/* Forest Bakery – Tortenkurse in Roggwil (Entwurf Seetalwebsites) */
:root {
  --grund: #FAF4F1;
  --band: #F2E7E2;
  --text: #3B1E24;
  --text-2: rgb(59 30 36 / .68);
  --text-3: rgb(59 30 36 / .5);
  --linie: rgb(158 34 54 / .28);
  --beere: #9E2236;
  --beere-dunkel: #831A2C;
  --hell: #FDF9F7;

  --serif: "Gilda Display", "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --rand: 20px;
  --breite: 1200px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s3); }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 17px/1.5 var(--sans);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--beere); outline-offset: 3px; }

/* ---------- Kopf ---------- */
.kopf {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--s2) var(--rand) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo img, .fuss-logo { mix-blend-mode: multiply; filter: brightness(1.07) contrast(1.25); }
.logo img { width: 104px; }
.kopf-nav { display: none; gap: var(--s4); font-size: 15px; }
.kopf-nav a { padding: 8px 0; text-decoration: none; color: var(--text-2); transition: color 150ms ease-out; }
.kopf-nav a:hover { color: var(--beere); }

/* ---------- Knöpfe ---------- */
.knopf {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--beere);
  color: var(--hell);
  font: 500 16px/1 var(--sans);
  padding: 17px 26px;
  cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: var(--beere-dunkel); }
.knopf:active { transform: scale(.98); }
.knopf-klein { font-size: 15px; padding: 13px 20px; }
.knopf-voll { width: 100%; }
.textlink {
  display: inline-block;
  padding: 8px 0;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--linie);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 150ms ease-out;
}
.textlink:hover { text-decoration-color: var(--beere); }

/* ---------- Einstieg ---------- */
.einstieg {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--s2) var(--rand) 0;
  display: grid;
  gap: var(--s4);
}
.titel {
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.zeile { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.zeile > span { display: inline-block; }
.einstieg-satz { margin-top: var(--s3); max-width: 34ch; color: var(--text-2); }
.einstieg-knoepfe { margin-top: var(--s3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* Bild im Rahmen wie auf ihren Flyern */
.rahmen { position: relative; margin: 0; padding: 10px; }
.einstieg-bild { margin: 0; }
.bild-maske { overflow: hidden; aspect-ratio: 4 / 5; }
.bild-maske img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.rahmen-linie {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.rahmen-linie rect {
  width: calc(100% - 1px); height: calc(100% - 1px);
  fill: none;
  stroke: var(--beere);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.etikett {
  position: absolute;
  right: 22px; top: 22px;
  max-width: 190px;
  background: var(--hell);
  padding: 10px 12px;
  text-decoration: none;
  display: grid; gap: 4px;
  border: 1px solid var(--linie);
  transition: border-color 150ms ease-out;
}
.etikett:hover { border-color: var(--beere); }
.etikett-klein { font-size: 13px; color: var(--text-3); }
.etikett-gross { font: 400 16px/1.15 var(--serif); }
@media (min-width: 720px) { .etikett { max-width: 240px; padding: 12px 14px; } .etikett-gross { font-size: 18px; } }
.einstieg-bild figcaption { margin-top: 14px; font-size: 14px; color: var(--text-3); }

/* ---------- Abschnitte ---------- */
.abschnitt-kopf { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.abschnitt-kopf h2, .ablauf h2, .anmelden h2 { font-size: 40px; line-height: 1.05; letter-spacing: -0.015em; }
.abschnitt-kopf p { color: var(--text-2); max-width: 46ch; }

/* ---------- Kurse ---------- */
.kurse {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--s5) var(--rand);
}
.kursliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.kurs {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas:
    "datum  datum"
    "bild   text"
    "leiste leiste"
    "preis  preis";
  column-gap: var(--s2);
  row-gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--linie);
}
.kurs-datum { grid-area: datum; display: flex; align-items: center; gap: 12px; }
.d-tag { font: 400 44px/1 var(--serif); letter-spacing: -0.02em; color: var(--beere); min-width: 1.15em; }
.d-rest { display: grid; font-size: 15px; line-height: 1.3; }
.d-rest span:last-child { color: var(--text-3); }
.kurs-bild { grid-area: bild; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--band); }
.kurs-bild img { width: 100%; height: 100%; object-fit: cover; }
.kurs-bild-schrift { display: grid; place-items: center; text-align: center; }
.kurs-bild-schrift span { font: 400 17px/1.1 var(--serif); color: var(--beere); }
.kurs-text { grid-area: text; }
.kurs-text h3 { font-size: 24px; line-height: 1.1; letter-spacing: -0.01em; }
.kurs-text p { margin-top: var(--s1); color: var(--text-2); font-size: 16px; }
.kurs-text p a { text-underline-offset: 3px; text-decoration-color: var(--linie); }

/* Fussleiste wie auf ihren Flyern: Datum | Zeit | Plätze | Inklusive | Preis */
.leiste {
  grid-area: leiste;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
}
.leiste div { padding: 0 14px; border-left: 1px solid var(--linie); }
.leiste div:first-child { padding-left: 0; border-left: 0; }
.leiste dt { font-size: 13px; color: var(--text-3); }
.leiste dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; }
.leiste div:not(:last-child) dd { white-space: nowrap; }
.leiste div { padding: 0 12px; }
.kurs-preis { grid-area: preis; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.preis {
  display: inline-grid;
  justify-items: center;
  border: 1px solid var(--beere);
  padding: 8px 14px 7px;
  color: var(--beere);
  transform-origin: 50% 60%;
}
.preis span { font: 400 30px/1 var(--serif); letter-spacing: -0.01em; }
.preis small { font-size: 12px; margin-top: 3px; }
.hinweis { margin-top: var(--s3); font-size: 14px; color: var(--text-3); }


/* ---------- So läuft ein Kurs ---------- */
.ablauf { background: var(--band); }
.ablauf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--s5) var(--rand);
  display: grid;
  gap: var(--s4);
}
.ablauf-liste { margin: 0; display: grid; }
.ablauf-liste div { padding: var(--s2) 0; border-top: 1px solid var(--linie); display: grid; gap: 4px; }
.ablauf-liste div:last-child { border-bottom: 1px solid var(--linie); }
.ablauf-liste dt { font: 400 21px/1.2 var(--serif); }
.ablauf-liste dd { margin: 0; color: var(--text-2); max-width: 52ch; }

/* ---------- Anmelden ---------- */
.anmelden {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--s5) var(--rand);
}
.anmelden h2 { font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.anmelden-satz { margin-top: var(--s2); color: var(--text-2); max-width: 40ch; }
.anmelden-wege { margin-top: var(--s4); display: grid; gap: 0; border-top: 1px solid var(--linie); }
.anmelden-wege .knopf-gross { justify-self: start; margin: var(--s3) 0; }
.knopf-gross { font-size: 17px; padding: 20px 32px; }
.weg {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-top: 1px solid var(--linie);
  text-decoration: none;
}
.weg-name { color: var(--text-3); font-size: 15px; padding-top: 3px; }
.weg-wert { font: 400 21px/1.25 var(--serif); }
a.weg .weg-wert { text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color 150ms ease-out; }
a.weg:hover .weg-wert { text-decoration-color: var(--beere); }
.weg-platzhalter .weg-wert, .leise { color: var(--text-3); }
.leise { font: 400 15px/1.5 var(--sans); }
.anmelden-wege .weg:last-child { border-bottom: 1px solid var(--linie); }
.torten { margin-top: var(--s5); max-width: 52ch; }
.torten h3 { font-size: 28px; line-height: 1.1; }
.torten p { margin: var(--s2) 0; color: var(--text-2); }

/* ---------- Fuss ---------- */
.fuss {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--s4) var(--rand) var(--s5);
  border-top: 1px solid var(--linie);
  display: grid;
  gap: var(--s2);
  font-size: 14px;
  color: var(--text-2);
}
.fuss-logo { width: 96px; }
.fuss a { text-underline-offset: 3px; text-decoration-color: var(--linie); display: inline-block; padding: 6px 0; }
.entwurf { color: var(--text-3); }

/* ---------- Anfrage-Blatt ---------- */
.blatt {
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 520px;
  margin: auto auto 0;
  background: var(--grund);
  color: var(--text);
  border-radius: 8px 8px 0 0;
  max-height: 92svh;
}
.blatt::backdrop { background: rgb(59 30 36 / .45); }
.blatt[open] { animation: blatt-auf 500ms var(--expo); }
.blatt[open]::backdrop { animation: dunkel 300ms ease-out; }
@keyframes blatt-auf { from { transform: translateY(40px); opacity: 0; } }
@keyframes dunkel { from { opacity: 0; } }
.blatt-innen { padding: var(--s3) var(--rand) calc(var(--s3) + env(safe-area-inset-bottom)); display: grid; gap: var(--s2); }
.blatt-kopf { display: flex; justify-content: space-between; align-items: center; }
.blatt-kopf h2 { font-size: 30px; }
.schliessen { appearance: none; border: 0; background: none; font-size: 30px; line-height: 1; color: var(--text-2); cursor: pointer; padding: 4px 8px; }
.feld { display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
.feld select, .feld input {
  font: 400 17px/1.3 var(--sans);
  color: var(--text);
  background: var(--hell);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 12px;
  width: 100%;
}
.feld select:focus, .feld input:focus { outline: none; border-color: var(--beere); }
.feld-reihe { display: grid; grid-template-columns: 1fr 96px; gap: var(--s2); }
.vorschau { background: var(--band); padding: var(--s2); border-left: 2px solid var(--beere); }
.vorschau-titel { font-size: 13px; color: var(--text-3); }
.vorschau-text { margin-top: 6px; font-size: 16px; white-space: pre-line; }
.blatt-hinweis { font-size: 14px; color: var(--text-3); }

/* ---------- Bewegung ---------- */
.js .zeile > span { transform: translateY(105%); }
.js .geladen .zeile > span { transform: none; transition: transform 1000ms var(--expo); }
.js .geladen .zeile:nth-child(2) > span { transition-delay: 90ms; }
.js .einstieg-satz, .js .einstieg-knoepfe { opacity: 0; }
.js .geladen .einstieg-satz, .js .geladen .einstieg-knoepfe { opacity: 1; transition: opacity 800ms ease-out 300ms; }
.js .bild-maske { clip-path: inset(100% 0 0 0); }
.js .bild-maske img { transform: scale(1.15); }
.js .geladen .bild-maske { clip-path: inset(0 0 0 0); transition: clip-path 1000ms var(--expo) 150ms; }
.js .geladen .bild-maske img { transform: scale(1); transition: transform 1400ms var(--expo) 150ms; }
.js .rahmen-linie rect { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .geladen .rahmen-linie rect { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--expo) 500ms; }
.js .etikett { opacity: 0; transform: translateY(8px); }
.js .geladen .etikett { opacity: 1; transform: none; transition: opacity 600ms ease-out 1100ms, transform 600ms var(--expo) 1100ms; }
.js .kurs .preis { opacity: 0; transform: scale(1.25) rotate(-6deg); }
.js .kurs.da .preis { opacity: 1; transform: none; transition: opacity 200ms ease-out 250ms, transform 600ms var(--expo) 250ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .zeile > span, .js .bild-maske, .js .bild-maske img, .js .etikett, .js .kurs .preis,
  .js .einstieg-satz, .js .einstieg-knoepfe { transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; }
  .js .rahmen-linie rect { stroke-dashoffset: 0 !important; transition: none !important; }
  .blatt[open], .blatt[open]::backdrop { animation: none; }
}

/* ---------- Tablet ---------- */
@media (min-width: 720px) {
  :root { --rand: 40px; }
  .kurs {
    grid-template-columns: 150px 120px 1fr auto;
    grid-template-areas:
      "datum bild text   preis"
      "datum bild leiste preis";
    grid-template-rows: auto 1fr;
    column-gap: var(--s4);
    align-items: start;
    padding: var(--s4) 0;
  }
  .kurs-datum { display: grid; gap: 6px; align-items: start; }
  .d-tag { font-size: 64px; }
  .kurs-text h3 { font-size: 30px; }
  .kurs-preis { flex-direction: column; align-items: flex-end; gap: var(--s2); }
  .ablauf-innen { grid-template-columns: 1fr 1.4fr; padding: var(--s6) var(--rand); }
  .kurse, .anmelden { padding: var(--s6) var(--rand); }
  .abschnitt-kopf { grid-template-columns: 1fr 1fr; align-items: end; }
  .abschnitt-kopf h2, .ablauf h2 { font-size: 56px; }
  .blatt { margin: auto; border-radius: 8px; }
}

/* ---------- Computer ---------- */
@media (min-width: 1024px) {
  .kopf { padding-top: var(--s3); }
  .logo img { width: 132px; }
  .kopf-nav { display: flex; }
  .einstieg {
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: var(--s5);
    padding-top: var(--s4);
    padding-bottom: var(--s6);
  }
  .titel { font-size: clamp(80px, 8vw, 112px); letter-spacing: -0.03em; }
  .einstieg-satz { font-size: 18px; max-width: 38ch; margin-top: var(--s4); }
  .einstieg-knoepfe { margin-top: var(--s4); }
  .bild-maske { aspect-ratio: 4 / 5; max-height: 76vh; width: 100%; }
  .anmelden { display: grid; grid-template-columns: 5fr 6fr; column-gap: var(--s5); }
  .anmelden h2 { font-size: 104px; grid-column: 1; }
  .anmelden-satz { grid-column: 1; font-size: 18px; }
  .anmelden-wege { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .torten { grid-column: 1; margin-top: var(--s5); }
}