@font-face {
  font-family:Roboto;
  src:url('assets/fonts/roboto-regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:Roboto;
  src:url('assets/fonts/roboto-bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}
@font-face {
  font-family:'Roboto Condensed';
  src:url('assets/fonts/roboto-condensed-bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}
:root {
  --section-space:48px;
  --ink:#304b32;
  --lime:#eaf56c;
  --pink:#f4c5c5;
  --sage:#738362;
  --beige:#d9d2c7;
  --orange:#f64c25;
  --paper:#fcf8f5;
  --canvas:#f6eee5;
  --rose:#81575e;
  --soft-pink:#efdad4;
  --soft-sage:#dfe8d7;
  --line:rgba(48,75,50,.22);
  --brown:#4c4138;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px;
}
body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
  cursor:pointer;
}
img {
  max-width:100%;
  display:block;
}
h1,h2,h3,p {
  margin-top:0;
}
h1,h2,h3 {
  font-family:Roboto,Arial,sans-serif;
  font-weight:700;
  line-height:1.16;
}
h2 {
  font-size:clamp(32px,3.5vw,46px);
  letter-spacing:-.045em;
}
h3 {
  font-size:26px;
}
p {
  margin-bottom:20px;
}
.section-shell {
  width:min(1240px,100%);
  padding-inline:40px;
  margin-inline:auto;
}
section[id],aside[id] {
  scroll-margin-top:24px;
}
.eyebrow {
  font-size:11px;
  line-height:1.5;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:22px;
}
.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:106px;
  gap:25px;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:24px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.2;
  flex-shrink:0;
}
.brand-icon {
  width:55px;
  height:38px;
  overflow:hidden;
  position:relative;
  display:block;
}
.brand-icon img {
  position:absolute;
  max-width:none;
  width:84px;
  height:auto;
  left:-15px;
  top:-15px;
}
.brand-sub {
  font-size:8px;
  letter-spacing:.05em;
  display:block;
  margin-top:6px;
}
.main-nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:14px;
  font-weight:700;
}
.main-nav a {
  padding-block:10px;
  border-bottom:2px solid transparent;
}
.main-nav a:hover {
  border-color:var(--ink);
}
.menu-toggle {
  display:none;
}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:55px;
  padding-top:38px;
  padding-bottom:32px;
}
.hero h1 {
  font-size:clamp(54px,5.7vw,76px);
  line-height:1.06;
  letter-spacing:-.065em;
  margin-bottom:24px;
}
.hero h1 span {
  color:var(--rose);
}
.hero-lead {
  max-width:490px;
  font-size:16px;
  line-height:1.65;
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid transparent;
  border-radius:99px;
  padding:13px 23px;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
  transition:background .2s,transform .2s;
}
.button:hover {
  transform:translateY(-2px);
}
.button-dark {
  color:var(--paper);
  background:var(--ink);
}
.button-dark:hover {
  background:#203924;
}
.button-outline {
  border-color:var(--ink);
  color:var(--ink);
  background:transparent;
}
.button-outline:hover {
  background:rgba(48,75,50,.07);
}
.text-link {
  font-size:13px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:5px;
}
.hero-note {
  font-size:12px;
  margin:22px 0 0;
  display:flex;
  align-items:center;
  gap:12px;
}
.hero-note span {
  font-size:22px;
  color:var(--rose);
}
.hero-visual {
  position:relative;
  padding-block:55px 35px;
  min-width:0;
}
.studio-photo {
  position:relative;
  aspect-ratio:1.5;
  overflow:hidden;
  border-radius:45% 45% 22px 22px;
  background:var(--beige);
  transform:rotate(-2deg);
  box-shadow:0 20px 50px rgba(76,65,56,.08);
}
.studio-photo img {
  position:absolute;
  width:100%;
  height:325%;
  top:-81.6667%;
  max-width:none;
}
.hero-sticker {
  background:var(--pink);
  border:7px solid var(--canvas);
  color:var(--ink);
  width:154px;
  height:154px;
  border-radius:50%;
  display:grid;
  place-content:center;
  text-align:center;
  position:absolute;
  right:-8px;
  bottom:13px;
  font-family:Roboto,sans-serif;
  font-size:19px;
  font-weight:700;
  line-height:1.15;
  transform:rotate(6deg);
}
.leaves {
  height:auto;
  position:absolute;
  right:54px;
  top:0;
  width:60px;
  transform:rotate(-65deg);
  pointer-events:none;
}
.photo-caption {
  position:relative;
  color:var(--brown);
  font-size:10px;
  letter-spacing:.03em;
  margin:25px 110px 0 12px;
}
.courses-section,.prices-section,.schedule-section,.about-section,.contact-section {
  padding-block:var(--section-space);
}
.courses-section {
  background:var(--paper);
}
.prices-section {
  background:var(--paper);
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:35px;
  margin-bottom:38px;
}
.section-heading h2 {
  margin:0;
}
.heading-copy {
  max-width:320px;
  font-size:14px;
  margin:0;
}
.course-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.course-card {
  padding:32px;
  display:flex;
  flex-direction:column;
  border-radius:28px;
  min-width:0;
  border:1px solid rgba(48,75,50,.06);
}
.lime {
  background:#f0f4de;
}
.pink {
  background:#f2d3cf;
}
.beige {
  background:#eee1d1;
}
.sage {
  background:#c5d7c1;
  color:var(--ink);
}
.card-number {
  font-size:11px;
  letter-spacing:.12em;
  font-weight:700;
  margin-bottom:35px;
}
.course-card h3 {
  font-size:29px;
  letter-spacing:-.035em;
  margin-bottom:12px;
}
.course-subtitle {
  font-weight:700;
}
.course-card p {
  font-size:14px;
}
.card-meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid currentColor;
  padding-top:17px;
  margin-top:auto;
  font-size:11px;
}
.card-meta a {
  font-weight:700;
  white-space:nowrap;
}
.schedule-section {
  background:var(--soft-pink);
}
.section-lead {
  max-width:660px;
  margin-bottom:35px;
}
.schedule-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}
.schedule-day {
  background:var(--paper);
  border-radius:22px;
  padding:27px;
}
.schedule-day h3 {
  font-size:30px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
}
.class-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding-block:23px;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.class-row:last-child {
  border:0;
  padding-bottom:0;
}
.class-time {
  grid-column:1/-1;
  font-size:19px;
  font-weight:700;
}
.class-time span {
  display:block;
  font-size:11px;
  font-weight:400;
  margin-top:4px;
}
.class-row strong {
  font-family:'Roboto Condensed',sans-serif;
  font-size:23px;
  line-height:1.15;
}
.class-row .button {
  padding:10px 15px;
  font-size:12px;
}
.demo-label {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em;
  border-left:1px solid currentColor;
  padding-left:8px;
  opacity:.8;
}
.demo-notice {
  font-size:12px;
  margin:23px 0 40px;
  max-width:760px;
}
.consultation {
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  padding:35px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--canvas);
  align-items:center;
}
.consultation .eyebrow {
  margin-bottom:12px;
}
.consultation h3 {
  font-size:32px;
  margin-bottom:15px;
}
.consultation p:last-child {
  margin:0;
  max-width:600px;
  font-size:14px;
}
.consultation-actions {
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:165px;
}
.consultation-actions small {
  text-align:center;
  font-size:11px;
}
.price-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.price-card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px;
  display:flex;
  flex-direction:column;
  position:relative;
}
.price-card h3 {
  font-size:24px;
  margin-bottom:25px;
}
.price {
  font-family:'Roboto Condensed',sans-serif;
  font-size:53px;
  line-height:1;
  margin-bottom:13px;
}
.price span {
  font-family:Roboto,sans-serif;
  font-size:14px;
}
.price-subtitle {
  font-size:13px;
  font-weight:700;
}
.price-card ul {
  font-size:13px;
  padding-left:18px;
  margin:0 0 30px;
}
.price-card li {
  padding-left:3px;
  margin-block:8px;
}
.price-card .button {
  margin-top:auto;
  align-self:start;
}
.membership {
  background:#e2e9d8;
}
.early-bird {
  background:#edf1d1;
  border-color:#d5ddac;
}
.offer-badge {
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  margin-bottom:12px;
}
.old-price {
  margin:-5px 0 10px;
  font-size:18px;
}
.price-note {
  font-size:14px;
  text-align:center;
  margin:32px 0 0;
}
.price-note a {
  text-decoration:underline;
  text-underline-offset:4px;
}
.about-section {
  background:var(--soft-sage);
}
.about-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}
.about-portrait {
  margin:0;
}
.about-portrait img {
  width:100%;
  height:auto;
  border-radius:42% 42% 22px 22px;
}
.about-portrait figcaption {
  color:var(--brown);
  font-size:11px;
  margin-top:15px;
}
.about-lead {
  font-size:21px;
  font-weight:700;
}
.about-copy>p:not(.eyebrow):not(.about-lead),.story-columns p {
  font-size:14px;
}
.story-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:45px;
}
.credentials {
  font-weight:700;
  border-left:4px solid var(--orange);
  padding-left:20px;
  margin-top:28px;
}
.vision {
  background:var(--ink);
  color:var(--paper);
  border-radius:45px 20px 45px 20px;
  padding:45px;
  margin-top:30px;
  max-width:930px;
  margin-inline:auto;
}
.vision .eyebrow {
  color:var(--lime);
}
.vision h3 {
  font-size:36px;
}
.vision p:not(.eyebrow) {
  max-width:740px;
  font-size:15px;
}
.vision .button {
  background:var(--lime);
  color:var(--ink);
  margin-top:10px;
}
.contact-section {
  background:var(--paper);
}
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
.contact-grid h2 {
  margin-bottom:28px;
}
.contact-grid h2 em {
  font-style:normal;
}
.contact-details strong {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.contact-details address {
  font-size:18px;
  font-style:normal;
  margin-block:12px;
}
.contact-details p {
  font-size:13px;
}
.directions {
  margin-top:40px;
}
.map-panel {
  background:#eee9e1;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  min-height:290px;
}
.map-placeholder {
  padding:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:center;
  min-height:290px;
}
.map-placeholder p {
  margin-bottom:12px;
}
.map-pin {
  font-size:30px;
}
.map-privacy {
  font-size:12px;
  max-width:600px;
}
.map-panel iframe {
  display:block;
  width:100%;
  height:350px;
  border:0;
}
.map-actions {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:15px;
  margin-top:13px;
  font-size:12px;
}
.map-actions a {
  margin-left:auto;
  text-decoration:underline;
  text-underline-offset:3px;
}
.map-close {
  border:0;
  background:transparent;
  color:var(--ink);
  padding:0;
  text-decoration:underline;
}
.map-credit {
  font-size:10px;
  margin-top:10px;
  margin-bottom:0;
}
.map-credit a {
  text-decoration:underline;
}
.site-footer {
  background:var(--canvas);
  color:var(--ink);
  padding-block:18px;
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
}
.footer-inner>p {
  font-size:12px;
  margin:0;
  max-width:150px;
}
.footer-links {
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:11px;
}
.footer-links>a {
  text-decoration:underline;
}
.footer-links span {
  color:var(--brown);
}
.legal-content {
  max-width:860px;
  padding-block:35px 70px;
  overflow-wrap:anywhere;
}
.legal-content h1 {
  font-size:clamp(30px,5vw,54px);
  letter-spacing:-.04em;
}
.legal-content h2 {
  font-size:clamp(23px,3vw,30px);
  letter-spacing:-.02em;
  line-height:1.3;
}
.legal-content section {
  margin-top:36px;
}
.legal-content address {
  font-style:normal;
  margin-bottom:20px;
}
.legal-content a,.legal-home-link,.map-privacy a {
  text-decoration:underline;
  text-underline-offset:3px;
}
.legal-home-link {
  font-size:14px;
}
.legal-page .site-header {
  flex-wrap:wrap;
  padding-block:18px;
}
.legal-template-notice {
  padding:24px;
  background:var(--beige);
  border:1px solid var(--brown);
  border-radius:16px;
}
.legal-template-notice h2 {
  font-size:23px;
}
.legal-template-notice p:last-child {
  margin-bottom:0;
}
.legal-placeholder {
  font-weight:700;
}
.legal-editor-note {
  padding-left:16px;
  border-left:3px solid var(--brown);
}
.legal-toc {
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:28px;
}
dialog {
  border:0;
  border-radius:24px;
  padding:38px;
  max-width:480px;
  width:calc(100% - 36px);
  color:var(--ink);
  background:var(--paper);
  box-shadow:0 20px 80px #0004;
}
dialog::backdrop {
  background:#172719b3;
}
dialog h2 {
  font-size:34px;
}
dialog p {
  font-size:14px;
}
.dialog-close {
  position:absolute;
  right:16px;
  top:12px;
  border:0;
  background:none;
  color:inherit;
  font-size:22px;
  padding:5px;
}
.skip-link {
  position:absolute;
  left:20px;
  top:-100px;
  background:var(--lime);
  padding:15px;
  z-index:20;
}
.skip-link:focus {
  top:12px;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:5px;
}
[hidden] {
  display:none!important;
}
/* A welcoming first impression with the three core promises in view. */
.hero-location {
  color:var(--rose);
  letter-spacing:.08em;
  font-size:12px;
  margin-bottom:20px;
}
.hero-facts {
  list-style:none;
  padding:0;
  margin:25px 0 28px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.hero-facts li {
  background:var(--soft-sage);
  border-radius:99px;
  padding:7px 12px;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
}
.hero-visual::before {
  content:'';
  position:absolute;
  inset:28px -10px 42px 25px;
  background:var(--soft-pink);
  border-radius:48% 48% 35% 38%;
  transform:rotate(8deg);
}
.hero-sticker span { font-size:1.2em; }
.main-nav a[href="#buchung"] {
  background:var(--ink);
  color:var(--paper);
  border-radius:99px;
  padding:10px 20px;
}
.course-card,.price-card {
  transition:box-shadow .2s,transform .2s;
}
@media(hover:hover) {
  .course-card:hover,.price-card:hover {
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(48,75,50,.07);
  }
}
@media(max-width:1000px) {
  .section-shell {
    padding-inline:28px;
  }
  .hero {
    gap:30px;
    padding-top:40px;
  }
  .hero h1 {
    font-size:56px;
  }
  .main-nav {
    gap:20px;
  }
  .brand {
    font-size:21px;
  }
  .price-grid {
    grid-template-columns:1fr 1fr;
  }
  .about-grid,.story-columns {
    gap:35px;
  }
  .hero-sticker {
    width:125px;
    height:125px;
    font-size:17px;
  }
  .class-row {
    grid-template-columns:1fr;
  }
  .class-time {
    grid-column:auto;
  }
  .class-row .button {
    justify-self:start;
  }
  .consultation {
    gap:25px;
  }
}
@media(max-width:700px) {
  .section-shell {
    padding-inline:22px;
  }
  .site-header {
    min-height:85px;
    position:relative;
  }
  .brand {
    font-size:21px;
  }
  .brand-sub {
    font-size:7px;
  }
  .menu-toggle {
    display:block;
    border:1px solid var(--line);
    border-radius:30px;
    background:transparent;
    padding:8px 13px;
    color:var(--ink);
    font-size:13px;
  }
  .main-nav {
    display:none;
    position:absolute;
    top:85px;
    left:0;
    right:0;
    background:var(--paper);
    z-index:5;
    padding:15px 22px 25px;
    box-shadow:0 15px 20px #0001;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
  }
  .main-nav.open {
    display:flex;
  }
  .hero {
    grid-template-columns:1fr;
    gap:30px;
    padding-top:32px;
    padding-bottom:16px;
  }
  .hero h1 {
    font-size:clamp(42px,11.5vw,60px);
  }
  .hero-lead {
    font-size:16px;
  }
  .hero-actions {
    gap:18px;
  }
  .hero-note {
    margin-top:24px;
  }
  .hero-visual {
    padding-top:35px;
    max-width:480px;
    width:100%;
    margin-inline:auto;
  }
  .leaves {
    width:50px;
    right:50px;
    top:-15px;
  }
  .hero-sticker {
    right:0;
    bottom:5px;
    width:120px;
    height:120px;
    font-size:16px;
  }
  .photo-caption {
  position:relative;
  color:var(--brown);
    margin-left:0;
    margin-right:120px;
  }
  :root {
    --section-space:32px;
  }
  .section-heading {
    align-items:start;
    flex-direction:column;
    gap:20px;
    margin-bottom:28px;
  }
  .section-heading h2 {
    font-size:34px;
  }
  .heading-copy {
    max-width:100%;
  }
  .course-grid,.price-grid,.schedule-grid,.about-grid,.story-columns,.contact-grid {
    grid-template-columns:1fr;
    gap:20px;
  }
  .course-card {
    padding:27px;
  }
  .course-card h3 {
    font-size:27px;
  }
  .card-number {
    margin-bottom:25px;
  }
  .card-meta {
    gap:12px;
  }
  .schedule-day {
    padding:25px;
  }
  .class-row {
    grid-template-columns:1fr auto;
  }
  .class-time {
    grid-column:1/-1;
  }
  .class-row strong {
    font-size:22px;
  }
  .class-row .button {
    padding-inline:13px;
  }
  .consultation {
    grid-template-columns:1fr;
    gap:25px;
    padding:27px;
  }
  .consultation-actions {
    flex-direction:row;
    flex-wrap:wrap;
  }
  .consultation-actions small {
    width:100%;
    text-align:left;
  }
  .consultation h3 {
    font-size:30px;
  }
  .price-card {
    padding:28px;
  }
  .price-note {
    text-align:left;
  }
  .about-grid {
    gap:35px;
  }
  .about-portrait {
    max-width:430px;
  }
  .about-copy h2 {
    font-size:40px;
  }
  .story-columns {
    margin-top:0;
    gap:0;
  }
  .vision {
    padding:28px;
    margin-top:20px;
  }
  .vision h3 {
    font-size:30px;
  }
  .vision .button {
    font-size:12px;
  }
  .contact-grid {
    gap:25px;
  }
  .contact-grid h2 {
    font-size:34px;
  }
  .map-placeholder {
    padding:25px;
  }
  .footer-inner {
    align-items:start;
    flex-direction:column;
    gap:25px;
  }
  .footer-inner>p {
    max-width:none;
  }
  .map-actions a {
    margin-left:0;
  }
  .map-credit {
    font-size:11px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
  }
}
@media (max-width: 380px) {
  .site-header { gap: 12px; }
  .site-header .brand { font-size: 18px; gap: 7px; }
  .site-header .brand-icon { width: 46px; }
  .menu-toggle { white-space: nowrap; flex-shrink: 0; }
  .hero h1 { font-size: 40px; }
}

@media(max-width:700px) {
  .hero { padding-top:24px; gap:24px; }
  .hero-location { font-size:11px; margin-bottom:18px; }
  .hero-facts { gap:8px; margin-block:23px; }
  .hero-note { font-size:11px; gap:9px; }
  .hero-visual::before { inset:20px 0 30px 16px; }
  .hero-sticker { font-size:15px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:17px; }
  .section-heading h2 { font-size:34px; }
  .main-nav a[href="#buchung"] { align-self:flex-start; }
}