/* FFL-Entwürfe · Teil 2: Beratung (leise, weiß) und Über uns · Stand 15.10.2026
   Ergänzt basis.css, ändert sie nicht. Seiten: beratung.html, beratung-restaurants.html, beratung-kantinen.html,
   beratung-startups-brands.html, anfrage.html, ueber-uns.html.
   Formregel wie basis.css: Knöpfe und Pillen voll rund, Felder 12 px, Bilder und Blätter 4 px. */

/* ---------- Einstieg: Text links, echtes Foto rechts; Wolke nur in der Ecke, nie unter Foto oder Text ---------- */
.einstieg { padding-top: clamp(2rem, 4.5vw, 4rem); }
.einstieg__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s48) var(--s96); align-items: start; }
.einstieg .dachzeile { margin-bottom: var(--s16); }
.einstieg .einleitung { margin-top: var(--s24); }
.einstieg .knopfreihe { margin-top: var(--s32); }
.einstieg__foto { margin-top: var(--s8); }
.einstieg__foto img { aspect-ratio: 4 / 5; }
.naechster { margin-top: var(--s12); font-size: var(--font-size-small); color: var(--nebentext); max-width: 32rem; }

/* Zweiteilige Hauptüberschrift der Unterseiten: Thema klein, Versprechen groß (eine H1, wortgleich) */
.titel-zwei { font-size: clamp(2.5rem, 5.2vw, 4.5rem); letter-spacing: -.012em; }
.titel-zwei__thema { display: block; font-size: var(--font-size-title-2); line-height: 1.2; color: var(--color-primary); letter-spacing: 0; margin-bottom: var(--s12); }
.titel-zwei__satz { display: block; }
/* Das Problem der Zielgruppe, groß und ruhig, mit pinker Kante */
.problem { margin-top: var(--s32); padding-left: var(--s24); border-left: 4px solid var(--color-pink); font-family: var(--font-display); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.22; color: var(--color-primary); max-width: 34rem; text-wrap: pretty; }

/* Sprunglinks unter dem Einstieg */
.sprung { margin-top: var(--s48); }
.sprung ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8); list-style: none; margin: 0; padding: 0; }
.sprung__titel { font-size: var(--font-size-small); font-weight: 600; color: var(--nebentext); margin-bottom: var(--s8); }
.sprung a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem; border: 1.5px solid var(--color-mist); border-radius: var(--radius-button); color: var(--color-navy); text-decoration: none; font-weight: 500; font-size: var(--font-size-small); background: var(--color-white); transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sprung a:hover { border-color: var(--color-navy); } }

/* Abschnittskopf: Überschrift und Einleitung untereinander, nie nebeneinander */
.abschnitt__kopf { max-width: 46rem; margin-bottom: var(--s48); }
.abschnitt__kopf .einleitung { margin-top: var(--s16); }
.abschnitt__kopf .dachzeile { margin-bottom: var(--s12); }

/* Platz unter dem Inhalt am Rechner, damit die Wolke in der Ecke frei steht */
@media (min-width: 48rem) { .platz-ecke { padding-bottom: calc(var(--abstand-abschnitt) + 7rem); } }

/* ---------- Ergebnisse: Leistung links, was in der Küche ankommt rechts ---------- */
.ergebnisse { list-style: none; margin: 0; padding: 0; display: grid; }
.ergebnis { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s24) var(--s64); padding: var(--s32) 0; border-top: 1px solid var(--color-mist); }
.ergebnis h3 { margin-bottom: var(--s12); }
.ergebnis__kueche { font-family: var(--font-display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.25; color: var(--color-primary); }
.ergebnis__etikett { display: block; font-family: var(--font-body); font-size: var(--font-size-small); font-weight: 600; color: var(--nebentext); margin-bottom: var(--s8); line-height: 1.4; }
.schlusssatz { margin-top: var(--s32); padding-top: var(--s32); border-top: 1px solid var(--color-mist); font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.18; color: var(--titel); max-width: 40rem; text-wrap: balance; }
.schlusssatz + .textlink { display: inline-block; margin-top: var(--s16); }

/* ---------- Drei Betriebsarten mit Bild ---------- */
.betriebsarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s48) var(--s32); }
.betriebsart { display: grid; align-content: start; gap: var(--s12); }
.betriebsart > .foto, .betriebsart > .platzhalter { aspect-ratio: 4 / 3; margin-bottom: var(--s12); }
.betriebsart h3 a { color: inherit; text-decoration: none; }
.betriebsart__stichworte { font-size: var(--font-size-small); font-weight: 600; color: var(--color-primary); }
.betriebsart .textlink { margin-top: var(--s8); justify-self: start; }
.pfeil::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-left: .5rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .betriebsart h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-pink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .pfeil:hover::after { transform: translate(3px, -2px) rotate(45deg); }
}

/* Platzhalter für fehlende Fotos: klar als Platzhalter erkennbar */
.platzhalter { display: grid; place-content: center; gap: var(--s8); padding: var(--s24); text-align: center; border: 2px dashed var(--color-grey); border-radius: var(--radius-image); background: repeating-linear-gradient(-45deg, var(--color-surface-soft) 0 14px, var(--color-white) 14px 28px); color: var(--color-ink); font-size: var(--font-size-small); }
.platzhalter strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--color-navy); }

/* ---------- Muster-Parameterblatt: ein echtes Blatt auf ruhiger Fläche, sichtbar als Muster ---------- */
.muster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s48) var(--s64); align-items: start; }
.muster__kopf .einleitung { margin-top: var(--s16); }
.muster__kopf .nebentext { margin-top: var(--s24); font-size: var(--font-size-small); }
.blatt { position: relative; background: var(--color-white); color: var(--color-ink); border-radius: var(--radius-image); padding: clamp(1.5rem, 3.2vw, 3rem); box-shadow: 0 1px 2px rgba(36, 43, 82, .06), 0 24px 48px -20px rgba(36, 43, 82, .22); font-variant-numeric: tabular-nums; }
.blatt__stempel { position: absolute; top: clamp(1rem, 2.4vw, 2rem); right: clamp(1rem, 2.4vw, 2rem); transform: rotate(-4deg); padding: .25rem .875rem .375rem; border: 2px solid var(--color-navy); border-radius: var(--radius-image); background: var(--color-pink); color: var(--color-navy); font-family: var(--font-display); font-size: 1.625rem; line-height: 1.1; }
.blatt__art { font-size: var(--font-size-small); font-weight: 600; color: var(--color-leise); }
.blatt__titel { font-size: clamp(1.625rem, 2.6vw, 2.25rem); margin-top: var(--s4); padding-right: 7rem; }
.blatt__felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s16) var(--s24); margin: var(--s24) 0 0; }
.blatt__felder div { display: grid; gap: var(--s4); }
.blatt__felder dt { font-size: .875rem; font-weight: 600; color: var(--color-leise); }
.blatt__felder dd { margin: 0; height: 1.75rem; border-bottom: 1.5px solid var(--color-leise); }
.blatt__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s32) var(--s48); margin-top: var(--s32); padding-top: var(--s32); border-top: 2px solid var(--color-navy); }
.blatt__teil { display: grid; gap: var(--s12); align-content: start; }
.blatt__teil--breit { grid-column: 1 / -1; }
.blatt h4 { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: var(--font-size-small); color: var(--color-navy); }
.blatt table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); line-height: 1.4; }
.blatt th { text-align: left; font-weight: 600; color: var(--color-leise); font-size: .875rem; padding: 0 var(--s12) var(--s8) 0; }
.blatt td { padding: var(--s8) var(--s12) var(--s8) 0; border-top: 1px solid var(--color-mist); vertical-align: top; }
.blatt td.zahl, .blatt th.zahl { text-align: right; white-space: nowrap; padding-right: 0; }
.blatt tfoot td { font-weight: 600; color: var(--color-navy); border-top: 1.5px solid var(--color-navy); }
.blatt td.leer { min-width: 4.5rem; border-bottom: 1.5px dashed var(--color-grey); }
.blatt dl.werte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s8) var(--s16); margin: 0; font-size: var(--font-size-small); line-height: 1.45; }
.blatt dl.werte dt { font-weight: 600; color: var(--color-navy); white-space: nowrap; }
.blatt dl.werte dd { margin: 0; }
.blatt ul { margin: 0; padding-left: 1.125rem; display: grid; gap: var(--s8); font-size: var(--font-size-small); line-height: 1.45; }
.blatt ul li::marker { color: var(--color-pink); }
.blatt__hinweis { font-size: .9375rem; color: var(--color-leise); }
.blatt__fuss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s24); margin-top: var(--s32); padding-top: var(--s24); border-top: 1px solid var(--color-mist); }
.blatt__fuss div { display: grid; gap: var(--s4); }
.blatt__fuss span:first-child { font-size: .875rem; font-weight: 600; color: var(--color-leise); }
.blatt__fuss span:last-child { height: 1.75rem; border-bottom: 1.5px solid var(--color-leise); }

/* ---------- Ablauf: vier Schritte, die Wolke wird von Schritt zu Schritt dichter ---------- */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s48) var(--s32); counter-reset: schritt; }
.schritt { display: grid; align-content: start; gap: var(--s8); }
.schritt__wolke { width: min(100%, 13rem); margin: 0 0 var(--s16) -1.5rem; }
.schritt__nr { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-primary); }
.schritt__unterzeile { font-weight: 600; color: var(--color-navy); }
.ablauf__schluss { margin-top: var(--s64); font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.125rem); color: var(--titel); }

/* ---------- Drei Formate mit Beispielumfang ---------- */
.formate { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s48) var(--s32); }
.format { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--s12); padding-top: var(--s24); border-top: 2px solid var(--color-navy); }
.format__nr { font-size: var(--font-size-small); font-weight: 600; color: var(--nebentext); }
.format__satz { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; color: var(--color-primary); }
.haken { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s8); align-content: start; }
.haken li { position: relative; padding-left: 1.75rem; }
.haken li::before { content: ""; position: absolute; left: .125rem; top: .45em; width: .75rem; height: .4rem; border-left: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(-45deg); }
.beispiel { margin-top: var(--s16); padding: var(--s24); background: var(--color-white); border-radius: var(--radius-image); border-left: 4px solid var(--color-pink); }
.ton-weiss .beispiel { background: var(--color-surface-soft); }
.beispiel__titel { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-navy); margin-bottom: var(--s12); }
.beispiel dl { margin: 0; display: grid; gap: var(--s12); font-size: var(--font-size-small); line-height: 1.5; }
.beispiel dt { font-weight: 600; color: var(--color-navy); }
.beispiel dd { margin: var(--s4) 0 0; }
.formate__unten { margin-top: var(--s48); display: grid; gap: var(--s12); }

/* ---------- Über mich und Gearbeitet für ---------- */
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s48) var(--s96); align-items: start; }
.zwei-spalten .textfluss { max-width: var(--size-text-measure); }
.textfluss { display: grid; gap: var(--s16); }
.textfluss h2 { margin-bottom: var(--s8); }
.gearbeitet { padding-top: var(--s24); border-top: 1px solid var(--color-mist); }
.gearbeitet h3, .gearbeitet__titel { font-family: var(--font-body); font-weight: 600; font-size: var(--font-size-small); color: var(--nebentext); line-height: 1.4; }
.gearbeitet ul { list-style: none; margin: var(--s12) 0 0; padding: 0; display: grid; gap: var(--s4); }
.gearbeitet a { font-family: var(--font-display); font-size: var(--font-size-title-2); color: var(--color-navy); text-decoration-color: var(--color-mist); display: inline-flex; align-items: baseline; min-height: 2.75rem; gap: var(--s8); flex-wrap: wrap; }
.gearbeitet small { color: var(--nebentext); font-family: var(--font-body); font-size: .875rem; }
.gearbeitet + .textlink { display: inline-block; margin-top: var(--s24); }

/* ---------- Fragen: Überschrift links, Liste rechts ---------- */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s32) var(--s96); align-items: start; }

/* ---------- Erstgespräch (Abschluss) und Nachbarseiten ---------- */
.abschluss { max-width: 46rem; display: grid; gap: var(--s16); }
.abschluss .knopfreihe { margin-top: var(--s16); }
.abschluss__mail { font-family: var(--font-display); font-size: clamp(1.375rem, 2.4vw, 2rem); color: var(--color-navy); text-decoration-color: var(--color-pink); text-decoration-thickness: 3px; text-underline-offset: 7px; overflow-wrap: anywhere; }
.nachbarn { margin-top: var(--s64); padding-top: var(--s32); border-top: 1px solid var(--color-mist); }
.nachbarn__titel { font-size: var(--font-size-small); font-weight: 600; color: var(--nebentext); margin-bottom: var(--s8); }
.nachbarn ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s32); }
.nachbarn a { display: grid; gap: var(--s4); padding: var(--s16) 0; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--color-mist); height: 100%; }
.nachbarn__name { font-family: var(--font-display); font-size: var(--font-size-title-2); line-height: 1.2; color: var(--titel); }
@media (hover: hover) and (pointer: fine) { .nachbarn a:hover .nachbarn__name { text-decoration: underline; text-decoration-color: var(--color-pink); text-decoration-thickness: 2px; text-underline-offset: 5px; } }

/* ---------- Lesespalte der Unterseiten: Überschrift links (klebt am Rechner), Text rechts ---------- */
.lesen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s24) var(--s96); align-items: start; }
.lesen__titel { font-size: clamp(1.75rem, 2.7vw, 2.5rem); }
@media (min-width: 64rem) { .lesen__titel { position: sticky; top: calc(var(--kopf-hoehe) + var(--s32)); } }
.lesen__text { display: grid; gap: var(--s16); max-width: 40rem; }
.lesen__text h3 { margin-top: var(--s24); }
.lesen__text .foto { margin: var(--s16) 0; }
.lesen__text figure { margin: var(--s16) 0; }
.lesen__text .gross { font-family: var(--font-display); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.22; color: var(--color-primary); }
.lesen + .lesen { margin-top: var(--s96); }
.bildreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s12); margin: var(--s16) 0; }
.bildreihe img { aspect-ratio: 3 / 2; }
.zutaten { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s32) var(--s32); }
.zutaten h3 { margin: 0 0 var(--s8); }
.querverweis { font-size: var(--font-size-small); }

/* ---------- Anfrage: wer antwortet und was danach passiert links, ein Formular rechts ---------- */
.anfrage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s48) var(--s96); align-items: start; }
.anfrage__seite { display: grid; gap: var(--s32); }
.anfrage__seite .einleitung { margin-top: calc(var(--s16) * -1); }
.antwortet { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s16); align-items: center; padding: var(--s16); border-radius: var(--radius-image); background: var(--color-surface-soft); }
.antwortet img { width: 4.5rem; height: 4.5rem; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-image); }
.antwortet__name { font-weight: 600; color: var(--color-navy); }
.antwortet p:last-child { font-size: var(--font-size-small); }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s16); counter-reset: schritte; }
.schritte li { counter-increment: schritte; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s12); align-items: start; }
.schritte li::before { content: counter(schritte); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid var(--color-navy); color: var(--color-navy); font-weight: 600; font-size: var(--font-size-small); }
.schritte li.erledigt::before { content: ""; background: var(--color-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11'%3E%3Cpath d='M1 5.5l4 4L13 1.5' fill='none' stroke='%23ff69a0' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center; }
.schritte__titel { font-size: var(--font-size-small); font-weight: 600; color: var(--nebentext); margin-bottom: var(--s12); }
.anderer-weg { font-size: var(--font-size-small); }
.anderer-weg a { font-weight: 600; }
.anfrage__formular { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-image); background: var(--color-white); box-shadow: 0 0 0 1px var(--color-mist), 0 24px 48px -28px rgba(36, 43, 82, .25); }
.anfrage__formular .formular { max-width: none; }
.felder-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24); }
.danke { display: grid; gap: var(--s24); max-width: 40rem; }
.danke__haken { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20'%3E%3Cpath d='M2 10l7.5 7.5L24 2.5' fill='none' stroke='%23ff69a0' stroke-width='3'/%3E%3C/svg%3E") no-repeat center; }
[hidden] { display: none !important; }

/* ---------- Über uns ---------- */
.menschen { display: grid; gap: var(--s96); margin-top: var(--s48); }
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s48) var(--s96); align-items: start; }
.person__foto img { aspect-ratio: 4 / 5; }
.person__rolle { font-weight: 600; color: var(--color-primary); margin: var(--s8) 0 var(--s24); }
.person__text { display: grid; align-content: start; }
.person__text p + p { margin-top: var(--s16); }
.philosophie { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s48) var(--s96); align-items: start; }
.philosophie .foto { aspect-ratio: 4 / 5; }
.bereiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bereiche > section { padding: var(--s64) max(var(--rand), 4vw); display: grid; gap: var(--s16); align-content: start; background: var(--grund); color: var(--text); }
.bereiche h2 { font-size: var(--font-size-title-1); }
.bereiche .knopf { justify-self: start; margin-top: var(--s16); }
.bereiche .ton-weiss { border-top: 1px solid var(--color-mist); }

/* ---------- Handy und Tablet ---------- */
@media (max-width: 63.99rem) {
  .einstieg__raster, .muster, .zwei-spalten, .fragen-raster, .lesen, .anfrage, .person, .philosophie { grid-template-columns: minmax(0, 1fr); }
  .betriebsarten, .formate { grid-template-columns: minmax(0, 1fr); gap: var(--s64); }
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesen__titel { position: static; }
  .lesen + .lesen { margin-top: var(--s64); }
  .bereiche { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
  .einstieg { padding-top: var(--s24); }
  .einstieg__foto img { aspect-ratio: 4 / 3; object-position: 50% 22%; }
  .titel-zwei { font-size: 2.25rem; }
  .titel-zwei__thema { font-size: 1.1875rem; }
  .problem { margin-top: var(--s24); padding-left: var(--s16); font-size: 1.3125rem; }
  .einstieg .knopf, .abschluss .knopf, .formate__unten .knopf { width: 100%; }
  .sprung { margin-top: var(--s32); }
  .ergebnis { grid-template-columns: minmax(0, 1fr); gap: var(--s16); padding: var(--s24) 0; }
  .betriebsart > .foto, .betriebsart > .platzhalter { aspect-ratio: 3 / 2; }
  .blatt__titel { padding-right: 0; margin-top: var(--s48); }
  .blatt__felder, .blatt__raster, .blatt__fuss { grid-template-columns: minmax(0, 1fr); }
  .blatt__felder { gap: var(--s12); }
  .ablauf { grid-template-columns: minmax(0, 1fr); gap: var(--s32); }
  .schritt { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--s16); }
  .schritt > :not(.schritt__wolke) { grid-column: 2; }
  .schritt__wolke { grid-row: 1 / span 4; width: 7.5rem; margin: -.5rem 0 0 -1rem; }
  .ablauf__schluss { margin-top: var(--s48); }
  .nachbarn ul { grid-template-columns: minmax(0, 1fr); }
  .bildreihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bildreihe img:first-child { grid-column: 1 / -1; }
  .zutaten { grid-template-columns: minmax(0, 1fr); gap: var(--s24); }
  .felder-zwei { grid-template-columns: minmax(0, 1fr); }
  .anfrage__formular { padding: var(--s24) var(--s16); margin: 0 calc(var(--s8) * -1); }
  .menschen { margin-top: var(--s32); }
  .person__foto img { aspect-ratio: 4 / 4.2; object-position: 50% 18%; }
  .bereiche > section { padding: var(--s48) var(--rand); }
}

/* ================= Ergänzung 15.10. abends (Zeichner 2): Konzept-Kopfzeile, Fußzeile, neue Bausteine ================= */
/* Wissen ist der vierte Punkt der Kopfzeile: aktiver Bereich auf Unterseiten (aria-current="true"), Menü-Staffel für Punkt 4 */
.kopf__liste a[aria-current="true"] { text-decoration: underline; text-decoration-color: var(--color-pink); text-decoration-thickness: 3px; text-underline-offset: 8px; }
@media (max-width: 63.99rem) and (prefers-reduced-motion: no-preference) {
  .kopf__nav.offen li:nth-child(4) { animation-delay: 120ms; }
  .kopf__nav.offen .kopf__extra { animation-delay: 160ms; }
}
/* Fußzeile nach Konzept: Marke + fünf Spalten (Beratung, Workshops & Events, Wissen, FlavorFocusLab, Rechtliches) */
@media (min-width: 64rem) { .fuss__spalten { grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); gap: var(--s48) var(--s24); } }
/* Seitenwechsel weich (Entscheidung 19b): Kopfzeile bleibt stehen, Rest blendet über; andere Browser normal */
@view-transition { navigation: auto; }
.kopf { view-transition-name: kopf; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Nur im Entwurf: Platz für fehlendes echtes Material (Praxisfall-Ausgangslage). .ohne-entwurf blendet ihn aus */
.entwurf-platz { border: 2px dashed var(--color-grey); border-radius: var(--radius-image); padding: var(--s16) var(--s24); color: var(--color-leise); font-size: var(--font-size-small); background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(190, 208, 215, .25) 12px 24px); }
.entwurf-platz strong { color: var(--color-navy); }
.ohne-entwurf .entwurf-platz { display: none; }

/* ---------- Laufende Zusammenarbeit (Berlin Ramen Society): Text links, was entsteht rechts als Liste mit Punktwolke ---------- */
.zusammenarbeit { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s48) var(--s96); align-items: start; }
.zusammenarbeit__seit { justify-self: start; display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--s12); border-radius: var(--radius-button); background: var(--color-navy); color: #fff; font-size: .875rem; font-weight: 600; margin-bottom: var(--s16); }
.zusammenarbeit .textfluss { max-width: 36rem; }
.entsteht { list-style: none; margin: 0; padding: 0; display: grid; }
.entsteht li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--s16); align-items: center; padding: var(--s16) 0; border-top: 1px solid var(--color-mist); }
.entsteht li:last-child { border-bottom: 1px solid var(--color-mist); }
.entsteht canvas { width: 3.25rem; transform: scale(1.35); }
.entsteht strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; color: var(--color-navy); }
.entsteht span { font-size: var(--font-size-small); color: var(--nebentext); }

/* ---------- Was wir nicht machen: Grenzen als klare Liste, ruhiges Band ---------- */
.grenzen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s32) var(--s96); align-items: start; }
.grenzen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.grenzen li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--s12); padding: var(--s16) 0; border-top: 1px solid var(--color-mist); }
.grenzen li::before { content: ""; width: 1.125rem; height: 1.125rem; margin-top: .3em; background: linear-gradient(var(--color-navy), var(--color-navy)) center / 100% 2px no-repeat; border-radius: 1px; }
.grenzen li strong { display: block; color: var(--color-navy); }

/* ---------- Preis unter den Formaten: auf Anfrage + Erstgespräch kostenlos, danach festes Angebot ---------- */
.preis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s8) var(--s32); align-items: baseline; margin-top: var(--s48); padding: var(--s24) 0; border-top: 2px solid var(--color-navy); border-bottom: 1px solid var(--color-mist); }
.preis__wert { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; color: var(--color-navy); }
.preis p:last-child { max-width: 36rem; }

/* ---------- Praxisfall (Restaurants): Ausgangslage, Beitrag, Ergebnis als Folge von drei Feldern ---------- */
.praxisfall { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s32) var(--s96); align-items: start; }
.praxisfall__folge { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s24); counter-reset: fall; }
.praxisfall__folge > li { display: grid; align-content: start; gap: var(--s12); padding-top: var(--s16); border-top: 2px solid var(--color-navy); }
.praxisfall__folge h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--font-size-small); color: var(--nebentext); }
.praxisfall__folge p { font-family: var(--font-display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.25; color: var(--color-navy); }
.praxisfall__folge .entwurf-platz p { font-family: var(--font-body); font-size: var(--font-size-small); color: var(--color-leise); }
.praxisfall__hinweis { margin-top: var(--s16); font-size: var(--font-size-small); color: var(--nebentext); }

/* ---------- Unterseiten: ein großer Satz als Brücke zwischen Einstieg und Lesestrecke ---------- */
.bruecke { font-family: var(--font-display); font-size: clamp(1.625rem, 2.8vw, 2.5rem); line-height: 1.18; color: var(--titel); max-width: 46rem; text-wrap: balance; }

/* ---------- Anfrage: Themen in zwei Gruppen, Zusatzfragen je Thema, Fehlerübersicht ---------- */
.themen { display: grid; gap: var(--s16); }
.themen__gruppe { display: grid; gap: var(--s8); }
.themen__titel { font-size: .875rem; font-weight: 600; color: var(--nebentext); }
.fehler-liste { padding: var(--s16) var(--s24); border: 2px solid var(--color-fehler); border-radius: var(--radius-feld); background: #fff5f6; color: var(--color-ink); }
.fehler-liste h2 { font-family: var(--font-body); font-weight: 700; font-size: var(--font-size-body); color: var(--color-fehler); margin-bottom: var(--s8); }
.fehler-liste ul { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--s4); font-size: var(--font-size-small); }
.fehler-liste a { color: var(--color-fehler); font-weight: 600; }
.zusatz { display: grid; gap: var(--s24); padding-top: var(--s24); border-top: 1px solid var(--color-mist); }
.zusatz__titel { font-size: var(--font-size-small); font-weight: 600; color: var(--nebentext); }
@media (prefers-reduced-motion: no-preference) { .zusatz:not([hidden]) { animation: zusatz-ein 260ms var(--ease-out); } }
@keyframes zusatz-ein { from { opacity: 0; transform: translateY(.5rem); } }
.anfrage__zustand { scroll-margin-top: calc(var(--kopf-hoehe) + var(--s24)); }
.danke ol { margin: 0; }
.knopf[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ---------- Über uns: Werdegang als Stationen-Liste ohne Jahreszahlen, Gearbeitet-für-Zeilen mit Satz ---------- */
.werdegang { list-style: none; margin: var(--s24) 0 0; padding: 0; display: grid; gap: 0; }
.werdegang li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s16) 0; border-top: 1px solid var(--color-mist); }
.werdegang strong { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; color: var(--color-navy); }
.kunden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s32); }
.kunden li { display: grid; align-content: start; gap: var(--s8); padding-top: var(--s16); border-top: 2px solid var(--color-navy); }
.kunden__name { font-family: var(--font-display); font-size: var(--font-size-title-2); line-height: 1.2; color: var(--color-navy); }
.kunden a { text-decoration-color: var(--color-pink); }
.simonlab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s24); align-items: center; padding: var(--s24) var(--s32); border-radius: var(--radius-image); background: var(--color-white); box-shadow: 0 0 0 1px var(--color-mist); }

@media (max-width: 63.99rem) {
  .zusammenarbeit, .grenzen, .praxisfall { grid-template-columns: minmax(0, 1fr); }
  .kunden { grid-template-columns: minmax(0, 1fr); gap: var(--s24); }
}
@media (max-width: 47.99rem) {
  .praxisfall__folge { grid-template-columns: minmax(0, 1fr); }
  .preis { grid-template-columns: minmax(0, 1fr); }
  .simonlab { grid-template-columns: minmax(0, 1fr); padding: var(--s24); }
  .simonlab .knopf { width: 100%; }
}
/* Muster-Blatt am Handy: Stempel überdeckt die Kopfzeile nicht, pH-Tabelle passt in die Breite (Kürzel-Spalte entfällt) */
@media (max-width: 47.99rem) {
  .blatt__art { padding-right: 6.5rem; }
  .blatt__stempel { font-size: 1.25rem; }
  .blatt__teil--breit table { table-layout: fixed; }
  .blatt__teil--breit :is(th, td):nth-child(4) { display: none; }
  .blatt__teil--breit td.leer { min-width: 0; }
}
/* Anfrage: Felder nebeneinander bleiben gleich hoch, auch wenn nur eines einen Fehler zeigt; programmatischer Fokus ohne Rahmen */
.felder-zwei > .feld { align-content: start; }
#danke-titel:focus, .fehler-liste:focus { outline: none; }
.fehler-liste:focus-visible { box-shadow: 0 0 0 3px var(--color-primary); }

/* ================= Korrekturrunde 15.10. 20:23: Kleckse groß und kräftig ================= */
/* Klecks-Band: eigene, textfreie Fläche zwischen zwei Abschnitten. Die Wolken laufen über die Abschnittsgrenzen
   in den Innenabstand der Nachbarn (über deren Fläche, unter deren Text) und über den Bildschirmrand hinaus. */
main { overflow-x: clip; }
.klecks-band { position: relative; height: clamp(16rem, 36vw, 34rem); background: var(--grund); overflow-x: clip; overflow-y: visible; pointer-events: none; }
.klecks-band img { position: absolute; z-index: 1; left: var(--x); top: var(--y, 50%); width: var(--b); max-width: none; height: auto; transform: translate(-50%, -50%) rotate(var(--d, 0deg)); user-select: none; }
@media (max-width: 47.99rem) {
  .klecks-band { height: 78vw; }
  .klecks-band img { width: calc(var(--bh) * .68); }
  .klecks-band .nur-gross { display: none; }
}
/* Große Eckwolken in Abschnitten ohne Foto */
.klecks--riesig { --klecks-breite: 72rem; }
.ueber-mich__foto { margin-bottom: var(--s32); }
.ueber-mich__foto img { aspect-ratio: 4 / 5; }
@media (max-width: 63.99rem) { .ueber-mich__foto img { aspect-ratio: 4 / 3; object-position: 50% 22%; } }

/* ================= Runde 20:55: Wolken gestalten die Abschnitte (geschichtet statt Schleier) =================
   Jede große Wolke gehört einem Abschnitt, wächst aus einer Ecke und läuft über dessen Rand in den Nachbarn.
   Sie liegt über den Flächen der Abschnitte, aber unter dem Inhalt. Textblöcke liegen auf weißen Flächen mit harter
   Kante (.flaeche), die die Wolke teilweise überdecken. Wolken bleiben scharf; leichtes Mitlaufen in wolken-ebene.js. */
.mit-wolke { overflow: visible; }
.wolke-gross { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--b); max-width: none; height: auto; transform: translate(-50%, -50%); pointer-events: none; user-select: none; will-change: translate; }
.flaeche { position: relative; z-index: 2; background: #fff; padding: var(--s32); margin: calc(var(--s32) * -1); border-radius: var(--radius-image); }
.flaeche.blatt { margin: 0; }
@media (max-width: 47.99rem) {
  .wolke-gross { width: var(--bh); left: var(--xh, var(--x)); top: var(--yh, var(--y)); }
  .flaeche { padding: var(--s24) var(--s16); margin: calc(var(--s24) * -1) calc(var(--s16) * -1); }
}

/* ================= Astra-Funde 15.10.: Fußzeile, Newsletter-Zustände, Versand fehlgeschlagen, 404 ================= */
.fuss__ohne { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-mist); }
.fuss__status { margin-top: var(--s12); max-width: 34rem; padding: var(--s12) var(--s16); border-radius: var(--radius-feld); font-size: var(--font-size-small); font-weight: 600; display: flex; gap: var(--s8); }
.fuss__status[hidden] { display: none; }
.fuss__status[data-art="ok"] { background: rgba(255, 255, 255, .1); color: #fff; }
.fuss__status[data-art="ok"]::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--color-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9'%3E%3Cpath d='M1 4.5l3.5 3.5L11 1.5' fill='none' stroke='%23242b52' stroke-width='2'/%3E%3C/svg%3E") no-repeat center; }
.fuss__status[data-art="fehler"] { background: #fff; color: var(--color-fehler); }
.fuss__status[data-art="fehler"]::before { content: "!"; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--color-fehler); color: #fff; font-size: .8125rem; line-height: 1.25rem; text-align: center; }
.fuss__feld .eingabe[aria-invalid="true"] { border-color: #ff8a95; border-width: 2px; }
.versand-fehler { display: grid; gap: var(--s12); padding: var(--s16) var(--s24); border: 2px solid var(--color-fehler); border-radius: var(--radius-feld); background: #fff5f6; }
.versand-fehler h2 { font-family: var(--font-body); font-weight: 700; font-size: var(--font-size-body); color: var(--color-fehler); }
.versand-fehler p { font-size: var(--font-size-small); }
.nicht-gefunden { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s48) var(--s96); align-items: center; min-height: 60svh; }
.nicht-gefunden__zahl { font-family: var(--font-display); font-size: clamp(6rem, 18vw, 14rem); line-height: .9; color: var(--color-navy); }
.wege { list-style: none; margin: var(--s32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s32); }
.wege a { display: grid; gap: var(--s4); padding: var(--s16) 0; border-bottom: 1px solid var(--color-mist); text-decoration: none; color: var(--text); min-height: 2.75rem; }
.wege strong { font-family: var(--font-display); font-weight: 400; font-size: var(--font-size-title-2); line-height: 1.2; color: var(--titel); }
@media (hover: hover) and (pointer: fine) { .wege a:hover strong { text-decoration: underline; text-decoration-color: var(--color-pink); text-decoration-thickness: 2px; text-underline-offset: 5px; } }
@media (max-width: 63.99rem) { .nicht-gefunden { grid-template-columns: minmax(0, 1fr); min-height: 0; } }
@media (max-width: 47.99rem) { .wege { grid-template-columns: minmax(0, 1fr); } }

.nicht-gefunden h1 { margin: var(--s16) 0; }
@media (min-width: 64rem) { .lesen__titel.flaeche { position: sticky; } }
.nachbarn.flaeche { margin-top: var(--s64); }