/* ============================================================
   index.css — Aufbau des Mockups, auf den Kanon gebracht.

   Geändert gegenüber dem Mockup:
   · eine Schriftfamilie (General Sans), keine Serifen, keine
     kursiven Headlines
   · Tracking und Zeilenhöhe in den Kanon-Korridor
   · kein Overlay-Text auf dem Hero
   · keine Cards, kein Karussell, keine gerahmten Fotos
   · keine Bühnen-Dramatik (Glühen, Rahmen, leuchtender Punkt)
   · animiert werden nur transform und opacity
   · alle Farbpaare rechnerisch auf WCAG AA geprüft
   ============================================================ */

/* --- 1. Token ---------------------------------------------- */

:root{
  --ink:#0b0b0b;              /* Text und die eine Schwarzfläche */
  --ink-70:#4a4e51;           /* Fließtext auf Weiß      8.44:1 */
  --ink-55:#66696c;           /* Sekundärtext            5.30:1 */
  --paper:#f6f7f8;
  --paper-2:#edf1f3;
  --accent:#315f75;           /* die eine Akzentfarbe    6.94:1 */
  --accent-deep:#183746;      /* Akzentfläche                   */
  --accent-hell:#8fc2d6;      /* Akzent auf Schwarz     10.55:1 */
  --auf-dunkel:#c9c9c9;       /* Fließtext auf Schwarz  11.94:1 */
  --auf-dunkel-leise:#9a9a9a; /* Sekundär auf Schwarz    6.31:1 */
  /* Auf der Akzentfläche eigene Töne: das neutrale Grau von oben
     wirkt auf dem blaustichigen Grund schmutzig, und #9a9a9a fällt
     dort auf 4.46:1 — unter AA. Leicht kühl getönt und heller. */
  --auf-tief:#d3dde2;         /* Fließtext auf Akzent    9.09:1 */
  --auf-tief-leise:#a9b4ba;   /* Sekundär auf Akzent     5.93:1 */
  --line:#d9dde0;
  --line-feld:#8d9296;        /* Umriss Bedienelement    3.14:1 */
  --line-dunkel:#2a2a2a;
  --line-tief:rgba(255,255,255,.16);
}

/* --- 2. Grundlage ------------------------------------------ */

*{ box-sizing:border-box }

@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  letter-spacing:0;          /* Fließtext bleibt bei 0 */
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none }
button{ font:inherit }
img{ max-width:100% }

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* Headlines: Tracking negativ, Zeilenhöhe eng — beides im
   Korridor, den der Kanon vorgibt. */
.hero h1,
.tour h2,
.section-head h2,
.pricing-head h2,
.method h2,
.contact h2,
.rechts-kopf h1,
.journal-kopf h1{
  letter-spacing:calc(-.03em + var(--tr-adjust));
  line-height:1.04;
  font-weight:600;
}
/* „JOURNAL“ steht sehr groß und in Versalien. Versalien vertragen
   weniger Enge als gemischter Satz, sonst stoßen J und O aneinander.
   Der Wert bleibt im Korridor des Kanons, er nutzt nur dessen
   mildeste Stufe. */
.journal-kopf h1{ letter-spacing:calc(-.02em + var(--tr-adjust)) }

/* Kleintext leicht positiv — und größenabhängig, wie der Kanon es
   verlangt: je kleiner und je stärker gesperrt der Satz, desto mehr
   Laufweite. Eine einzige Pauschale für 10px bis 15px wäre bequem,
   aber typografisch falsch. Die Werte stammen aus der Vorlage. */
.section-label,
.feld label,
.absicht legend,
.tage legend,
.termin-klapp summary,
.about-head h2{ letter-spacing:.24em }
.tour-kicker,
.footer-mark,
.footer-rolle{ letter-spacing:.22em }
.footer-spalten-titel,
.artikel-inhalt-titel,
.artikel-schluss-label{ letter-spacing:.2em }
.tour-schedule-head strong{ letter-spacing:.2em }
.tour-season,
.card-index{ letter-spacing:.18em }
.pricing-group h3{ letter-spacing:.17em }
.tour-link{ letter-spacing:.16em }
.white-link{ letter-spacing:.15em }
.card-link,
.role{ letter-spacing:.14em }
.legal{ letter-spacing:.13em }
.brand,
.nav-cta,
.btn,
.artikel-schluss a,
.pricing-note a{ letter-spacing:.12em }
.navlinks{ letter-spacing:.09em }
/* Datum und Ortsangabe laufen mit; sie sind Text, nicht Signet. */
.tour-date time,
.tour-meta{ letter-spacing:.08em }

/* Wortabstand wächst mit der Laufweite mit. Wer Buchstaben sperrt,
   ohne den Wortzwischenraum nachzuziehen, hebt die Wortgrenze auf:
   „Vocal Coach · Voice Teacher“ liest sich sonst als eine einzige
   lange Kette. Faustregel: die Lücke zwischen zwei Wörtern soll
   deutlich größer sein als die zwischen zwei Buchstaben. Nur für
   gesperrten Kleintext in Versalien, nicht für Fließtext. */
.section-label,
.feld label,
.absicht legend,
.tage legend,
.termin-klapp summary,
.about-head h2{ word-spacing:.3em }
.tour-kicker,
.footer-mark,
.footer-rolle{ word-spacing:.26em }
.footer-spalten-titel,
.artikel-inhalt-titel,
.artikel-schluss-label,
.tour-schedule-head strong{ word-spacing:.22em }

/* --- 3. Navigation ----------------------------------------- */

.nav{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4vw;
  background:#fff;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line);
}
.brand{ font-size:15px; font-weight:600 }
.navlinks{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
}
.navlinks a{ padding:6px 0; border-bottom:1px solid transparent }
.navlinks a:hover{ border-bottom-color:var(--ink) }

.nav-cta,
.btn{
  border:0;
  background:var(--ink);
  color:#fff;
  padding:16px 22px;
  text-transform:uppercase;
  font-size:11px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:16px;
  cursor:pointer;
}
.nav-cta:hover,
.btn:hover{ background:var(--accent) }
/* Während der Versand läuft. Opazität, kein Farbwechsel — der Knopf
   soll denselben Knopf darstellen, nur gerade nicht bedienbar. */
.btn[disabled]{ opacity:.45; cursor:default }
.btn[disabled]:hover{ background:var(--ink) }

/* Gezeichnete Striche statt Glyphe. */
.menu{
  display:none;
  width:34px;
  height:34px;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
  position:relative;
}
.menu span,
.menu span::before,
.menu span::after{
  position:absolute;
  left:7px;
  width:20px;
  height:1.5px;
  background:var(--ink);
  content:"";
}
.menu span{ top:16px }
.menu span::before{ left:0; top:-6px }
.menu span::after{ left:0; top:6px }

/* --- 4. Hero ----------------------------------------------- */

.hero{
  min-height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:50% 50%;
  background:#fff;
}
.hero-copy{
  padding:7vh 5vw 6vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* Die Wortmarke. Werte am Logo gemessen, nicht geschätzt:
   Versalhöhe 131 px, Zeilenabstand 132.7 px — also Zeilenhöhe .73.
   Das liegt unter dem Kanon-Korridor 1.0–1.1; hier ist es Absicht,
   weil dieser Block kein Fließtext-Titel ist, sondern das Signet
   selbst. Stammbreite/Versalhöhe im Logo .198, General Sans
   erreicht .197 bei Strichstärke 575 und .212 bei 600 — 600 bleibt,
   der Unterschied liegt unter einem Pixel.
   Bewusste Abweichung vom Logo: dort berühren sich die Versalzeilen,
   bei .73 blieben davon 1.3 px Luft. Ein Signet darf so dicht stehen,
   eine Bildschirmseite nicht — gelesen wird sie aus wechselndem
   Abstand und in wechselnder Größe. .86 setzt zwischen Versalunter-
   und nächste Versaloberkante ein Fünftel der Versalhöhe. Die vier
   Wörter bleiben ein Block, ersticken aber nicht. Versalhöhe von
   General Sans ist .718 em, daraus rechnet sich die Luft:
   (.86 − .718) × Schriftgröße. */
.hero h1{
  font-size:clamp(52px,7vw,108px);
  line-height:.86;
  margin:0 0 46px;
  text-transform:uppercase;
}
.hero h1 span{ display:block; white-space:nowrap }
.hero h1 span:nth-child(2),
.hero h1 span:nth-child(4){ color:var(--accent) }
/* Die Unterzeile steht im Logo exakt so breit wie „TEACHER". Bei
   General Sans ergibt das Größe .313em und Laufweite .086em —
   ausgerechnet, nicht nach Augenmaß. */
.hero h1 .mentor{
  font-size:.313em;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.086em;
  color:var(--ink);
  margin-top:1em;
}
.actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn.secondary{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
}
.btn.secondary:hover{ background:var(--ink); color:#fff }

/* Kein Verlauf, kein Overlay-Text: das Foto bleibt unverstellt. */
.hero-image{
  min-height:650px;
  overflow:hidden;
  background:var(--paper-2);
}
.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* --- 5. Tour ----------------------------------------------- */

/* Dunkel, aber nicht schwarz: dieselbe Akzentfläche, die schon die
   Arbeitsweise trägt. Keine zweite dunkle Farbe erfinden — Schwarz
   bleibt dem Fuß und den Begegnungen vorbehalten.
   Keine Kanten nach oben oder unten: hier stößt Weiß auf Farbe,
   der Wechsel trennt bereits. */
.tour{
  background:var(--accent-deep);
  color:#fff;
  display:grid;
  grid-template-columns:minmax(440px,.9fr) 1.1fr;
}
.tour-intro{
  display:flex;
  align-items:center;
  border-right:1px solid var(--line-tief);
}
.tour-poster{
  padding:12vh 4vw;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.tour-kicker{
  color:var(--accent-hell);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
}
.tour h2{
  font-size:clamp(56px,6.4vw,104px);
  text-transform:uppercase;
  margin:32px 0 34px;
}
.tour h2 span{ display:block; color:var(--accent-hell) }
.tour h2 .tour-live{
  color:#fff;
  font-size:.6em;
  letter-spacing:.06em;
  margin:.18em 0;
}
.tour-season{
  margin-bottom:24px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--auf-tief-leise);
}
.tour-copy{
  font-size:18px;
  line-height:1.7;
  color:var(--auf-tief);
  max-width:34ch;
  margin:0 0 34px;
  text-wrap:pretty;
}
.tour-link{
  display:inline-flex;
  align-items:center;
  gap:18px;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding:0 0 10px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
}
.tour-link:hover{ border-bottom-color:#fff }

.tour-schedule{ padding:12vh 4vw }
.tour-schedule-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:30px;
  padding-bottom:28px;
}
.tour-schedule-head strong{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--accent-hell);
}
.tour-schedule-head span{
  color:var(--auf-tief-leise);
  font-size:13px;
  letter-spacing:.04em;
}
.tour-grid{ border-bottom:1px solid var(--line-tief) }
.tour-date{
  padding:27px 4px;
  border-top:1px solid var(--line-tief);
  display:grid;
  grid-template-columns:1fr 28px;
  gap:18px;
  align-items:center;
}
/* Bewegung nur über transform. */
.tour-date > div,
.tour-arrow{ transition:transform .22s cubic-bezier(.32,.72,0,1) }
.tour-date:hover > div,
.tour-date:focus-visible > div{ transform:translateX(10px) }
.tour-date > div{
  display:grid;
  grid-template-columns:150px minmax(140px,1fr) minmax(150px,.7fr);
  gap:24px;
  align-items:center;
}
/* Ein Akzent pro Zone. Datum und Preis sind Beiwerk, die Stadt ist
   die Aussage — deshalb trägt nur sie Weiß, und die Akzentfarbe
   bleibt dem Pfeil vorbehalten, der als einziges etwas verspricht. */
.tour-date time{
  color:var(--auf-tief);
  font-size:12px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.tour-date h3{
  font-size:clamp(21px,1.9vw,30px);
  font-weight:600;
  letter-spacing:calc(-.02em + var(--tr-adjust));
  line-height:1.1;
  margin:0;
}
.tour-meta{
  color:var(--auf-tief-leise);
  font-size:11px;
  line-height:1.6;
  text-transform:uppercase;
}
/* Kein Preisschild: gleiche Größe wie die Zeile darüber,
   Sekundärton, kein Fettdruck. */
.tour-price{
  display:block;
  color:var(--auf-tief-leise);
  font-size:13px;
  font-weight:500;
  margin-top:6px;
  letter-spacing:0;
  text-transform:none;
  font-variant-numeric:tabular-nums;
}
.tour-arrow{
  color:var(--accent-hell);
  font-size:19px;
  text-align:right;
}
.tour-date:hover .tour-arrow{ transform:translateX(4px) }

/* Fünf Termine sichtbar, die vier späteren eine Zeile tiefer.
   Nichts entfällt — die Saison reicht bis August 2027, und neun
   Zeilen untereinander lesen sich als Liste, nicht als Einladung.
   Die untere Kante des ersten Rasters trägt die Trennung, deshalb
   hier keine eigene Linie oben. */
.more-dates{ border-bottom:1px solid var(--line-tief) }
.more-dates summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 4px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.more-dates summary::-webkit-details-marker{ display:none }
.more-dates summary span{
  font-size:24px;
  font-weight:300;
  color:var(--accent-hell);
  transition:transform .22s cubic-bezier(.32,.72,0,1);
}
.more-dates[open] summary span{ transform:rotate(45deg) }
.more-dates .tour-grid{ border-bottom:0 }


/* --- 7. Über Mischa ---------------------------------------- */

/* Keine Kanten: oben endet der Tourplan auf der Akzentfläche, unten
   beginnt die Arbeitsweise auf derselben Fläche. Beide Male trennt
   der Farbwechsel — eine Haarlinie wäre eine zweite Naht. */
.about{
  padding:15vh 7vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7vw 10vw;
  background:#fff;
  align-items:start;
}
.section-label{
  font-size:10px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-55);
}
.about-quote{
  margin:36px 0 0;
  color:var(--accent);
  font-size:clamp(27px,2.9vw,44px);
  font-weight:500;
  line-height:1.24;
  letter-spacing:calc(-.02em + var(--tr-adjust));
  text-wrap:pretty;
}
/* Überschrift und Rollenzeile stehen gleich groß untereinander.
   Die Hierarchie liegt allein in der Farbe: die Überschrift auf
   vollem Schwarz, die Rolle darunter im Sekundärton. */
.about-head h2{
  font-size:10px;
  text-transform:uppercase;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
  margin:0 0 4px;
}
.about-copy p{
  font-size:19px;
  line-height:1.7;
  color:var(--ink-70);
  margin:0 0 28px;
  max-width:60ch;
  text-wrap:pretty;
}
.about-more{
  grid-column:1 / -1;
  border-top:1px solid var(--ink);
  margin-top:10px;
}
.about-more summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.about-more summary::-webkit-details-marker{ display:none }
.about-more summary span{
  font-size:24px;
  font-weight:300;
  transition:transform .22s cubic-bezier(.32,.72,0,1);
}
.about-more[open] summary span{ transform:rotate(45deg) }
.about-more-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5vw;
  padding:28px 0 10px;
}
.about-more-grid article{
  border-top:1px solid var(--line);
  padding-top:26px;
}
.about-more-grid h3{
  font-size:21px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:calc(-.02em + var(--tr-adjust));
  margin:0 0 18px;
}
.about-more-grid p{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-70);
  margin:0;
  text-wrap:pretty;
}

/* --- 8. Angebote ------------------------------------------- */
/* Spalten mit Haarlinien, keine Karten: kein Kasten, kein
   Hintergrundwechsel, kein Anheben beim Überfahren. */

.offers{ padding:14vh 4vw }
.section-head{ margin-bottom:52px }
.section-head h2{
  font-size:clamp(44px,6.2vw,92px);
  margin:0;
  text-transform:uppercase;
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink);
}
.card{
  padding:34px 34px 0 0;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:26px;
}
.card + .card{ padding-left:34px }
.card:last-child{ border-right:0 }
.card-index{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--ink-55);
}
.card h3{
  font-size:clamp(28px,2.9vw,46px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:calc(-.03em + var(--tr-adjust));
  margin:0 0 18px;
}
.card p{
  font-size:17px;
  line-height:1.7;
  color:var(--ink-70);
  max-width:34ch;
  margin:0;
  text-wrap:pretty;
}
.card-link{
  margin-top:auto;
  padding-bottom:26px;
  font-size:11px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--accent);
}
.card-link:hover{ text-decoration:underline; text-underline-offset:5px }

/* --- 9. Preise --------------------------------------------- */

/* Oben trennt die Linie Papierton von Weiß, das ist ihre Aufgabe.
   Unten folgen die Stimmen, wieder auf Papierton — die Kante dort
   sitzt am Stimmen-Abschnitt, damit jede Naht nur einmal fällt. */
.pricing{
  padding:13vh 4vw;
  background:#fff;
  border-top:1px solid var(--line);
}
.pricing-head{ margin-bottom:56px }
.pricing-head h2{
  font-size:clamp(42px,5.4vw,80px);
  text-transform:uppercase;
  margin:0;
}
.pricing-columns{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--ink);
  max-width:1180px;
}
.pricing-group{
  padding:30px 40px 8px 0;
  border-right:1px solid var(--line);
}
.pricing-group + .pricing-group{ padding-left:40px }
.pricing-group:last-child{ border-right:0 }
.pricing-group h3{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 26px;
}
.price-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  padding:22px 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.price-row:first-of-type{ border-top:0 }
.price-row strong{ font-size:17px; font-weight:600; line-height:1.35 }
.price-row small{
  display:block;
  color:var(--ink-55);
  font-size:13px;
  line-height:1.6;
  margin-top:7px;
}
.price-row b{
  font-size:20px;
  font-weight:500;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pricing-note{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-top:38px;
  padding-top:26px;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--ink-55);
}
.pricing-note a{
  color:var(--accent);
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
}
.pricing-note a:hover{ text-decoration:underline; text-underline-offset:5px }

/* --- 10. Arbeitsweise -------------------------------------- */

.method{
  background:var(--accent-deep);
  color:#fff;
  padding:14vh 7vw;
  display:grid;
  grid-template-columns:.9fr .7fr 1fr;
  gap:5vw;
  align-items:end;
}
.method h2{
  font-size:clamp(52px,6.4vw,98px);
  margin:0;
  text-transform:uppercase;
}
.method-portrait{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center top;
}
.method-copy{
  border-top:1px solid rgba(255,255,255,.5);
  padding-top:30px;
}
.method-copy h3{
  font-size:30px;
  font-weight:500;
  line-height:1.18;
  letter-spacing:calc(-.02em + var(--tr-adjust));
  margin:0 0 20px;
}
.method-copy p{
  font-size:18px;
  line-height:1.7;
  margin:0 0 30px;
  max-width:38ch;
  text-wrap:pretty;
}
.white-link{
  display:inline-block;
  border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:7px;
  text-transform:uppercase;
  font-weight:600;
  font-size:11px;
}
.white-link:hover{ border-bottom-color:#fff }

/* --- 11. Begegnungen --------------------------------------- */
/* Ruhiges Raster statt Karussell. Keine Rundung, kein Rahmen,
   kein Zoom beim Überfahren — die Fotos sind nicht anklickbar.
   Weiß statt Schwarz: der Fuß darunter ist schwarz, zwei dunkle
   Flächen hintereinander lesen sich als eine. Und Bühnenoptik
   ist ohnehin das Gegenteil dessen, was die Fotos brauchen —
   auf Weiß wirken sie wie eine Hängung, nicht wie ein Backdrop.
   Oben eine Haarlinie, weil darüber der Papierton der Stimmen
   endet. */
.connections{
  padding:10vh 5vw;
  background:#fff;
  color:var(--ink);
  border-top:1px solid var(--line);
}
.connections-intro{ margin-bottom:56px }
.connections-intro h2{
  font-size:clamp(32px,3.4vw,52px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:calc(-.03em + var(--tr-adjust));
  margin:0;
}
.connection-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1.5rem,2.4vw,2.5rem);
}
.connection{ margin:0; min-width:0 }
.connection-image{
  overflow:hidden;
  background:var(--paper-2);
}
.connection img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center;
}
.connection figcaption{
  padding:16px 0 0;
  color:var(--ink-70);
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.02em;
  text-wrap:pretty;
}

/* --- 12. Stimmen ------------------------------------------- */
/* Foto, Haarlinie, Zitat — kein Kasten, kein Rahmen. */

/* Knapper gepolstert als Über Mischa und Angebote: Weißraum soll
   gewichten, nicht gleichmäßig verteilt werden. Die Stimmen sind
   Beleg, nicht Hauptsache.
   Oben eine Haarlinie: darüber enden die Preise auf Weiß, und
   --paper ist davon kaum zu unterscheiden — ohne Kante liefen
   beide Flächen zu einer zusammen. */
.testimonials{
  padding:10vh 5vw;
  border-top:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
}
.testimonials-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:6vw;
  margin-bottom:72px;
}
.testimonials-head h2{
  font-size:clamp(38px,4.8vw,70px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:calc(-.03em + var(--tr-adjust));
  margin:0;
}
.testimonials-beitext{ max-width:44ch }
.testimonials-head p{
  font-size:17px;
  line-height:1.7;
  color:var(--ink-70);
  margin:0;
  text-wrap:pretty;
}
/* Die Aufzählung steht über dem Satz, nicht in ihm: sie benennt, wer
   spricht, der Satz sagt, woher. Als Kleintext, damit die Überschrift
   allein die Größe hält. */
.testimonials-head .section-label{ margin:0 0 14px }
.featured-testimonial{
  display:grid;
  grid-template-columns:minmax(280px,32%) 1fr;
  gap:5vw;
  align-items:center;
}
.featured-testimonial img{
  display:block;
  width:100%;
  height:auto;
}
.featured-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.featured-copy .person{
  font-size:clamp(26px,2.8vw,40px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:calc(-.03em + var(--tr-adjust));
  margin:0 0 10px;
}
.role{
  display:block;
  color:var(--accent);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
}
.featured-copy blockquote{
  font-size:clamp(20px,1.9vw,27px);
  line-height:1.5;
  letter-spacing:calc(-.01em + var(--tr-adjust));
  margin:40px 0 0;
  color:var(--ink);
  max-width:38ch;
  text-wrap:pretty;
}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:64px clamp(2rem,3vw,3.5rem);
  margin-top:72px;
}
.testimonial-card{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.testimonial-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
}
.testimonial-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding-top:26px;
  margin-top:26px;
  border-top:1px solid var(--line);
}
.testimonial-body blockquote{
  font-size:16px;
  line-height:1.7;
  margin:0 0 28px;
  color:var(--ink-70);
  text-wrap:pretty;
}
.testimonial-body cite{
  font-style:normal;
  margin-top:auto;
}
.testimonial-body cite strong{
  display:block;
  font-size:16px;
  font-weight:600;
  margin-bottom:8px;
}
/* Wer eine eigene Seite hat, bekommt sie verlinkt. Der Strich bleibt
   im Ruhezustand aus, damit die Namensspalte ruhig bleibt; er kommt
   beim Zeigen und liegt tief genug, um die Unterlängen freizulassen. */
.testimonial-body cite strong a{
  color:inherit;
  text-decoration:none;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.testimonial-body cite strong a:hover{
  text-decoration:underline;
  text-decoration-color:var(--ink-55);
}

/* Sechs Stimmen sichtbar, die übrigen sieben eine Zeile tiefer.
   Nichts ist entfernt — aber dreizehn Karten hintereinander liest
   niemand, sie werden überflogen und verlieren dabei ihr Gewicht.
   Gleiche Mechanik wie „Mehr über Mischa“. */
.more-voices{
  border-top:1px solid var(--line);
  margin-top:72px;
}
.more-voices summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.more-voices summary::-webkit-details-marker{ display:none }
.more-voices summary span{
  font-size:24px;
  font-weight:300;
  transition:transform .22s cubic-bezier(.32,.72,0,1);
}
.more-voices[open] summary span{ transform:rotate(45deg) }
.more-voices .testimonial-grid{ margin-top:30px; padding-bottom:10px }

/* --- 13. Kontakt ------------------------------------------- */

/* Die Ansprache stand vorher im Fuß und führte auf ein mailto —
   eine Aufforderung ohne Ort, sie einzulösen. Jetzt trägt sie einen
   eigenen Abschnitt: links die Frage, rechts das Formular, das sie
   beantwortet. Zwei Spalten, weil eine Anrede über einem
   Formular zur Überschrift eines Registrierungsdialogs würde.
   Weiß wie die Begegnungen darüber, deshalb eine Haarlinie; nach
   unten trennt der schwarze Fuß von selbst. */
.contact{
  padding:14vh 7vw;
  background:#fff;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:7vw;
  align-items:start;
}
.contact h2{
  font-size:clamp(40px,4.6vw,72px);
  margin:0;
  text-transform:uppercase;
}
/* --accent, nicht --accent-hell: heller Grund. */
.contact h2 span{ color:var(--accent) }
.contact-intro p{
  font-size:18px;
  line-height:1.7;
  color:var(--ink-70);
  max-width:34ch;
  margin:28px 0 0;
  text-wrap:pretty;
}

/* Der zweite Weg. Er steht in der linken Spalte, unter der Frage,
   nicht neben dem Absendeknopf: dort wäre er eine Alternative zum
   Klick, hier ist er eine Alternative zum Formular. Die Haarlinie
   trennt ihn vom Absatz, ohne einen Kasten zu bauen. */
.contact-direkt{
  margin-top:44px;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.contact-direkt > p{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-70);
}
.contact-direkt .direkt-fuss{
  margin:18px 0 0;
  font-size:13px;
  color:var(--ink-55);
}
.contact-direkt .direkt-fuss a{ border-bottom:1px solid var(--line-feld) }
.contact-direkt .direkt-fuss a:hover{ color:var(--ink); border-bottom-color:var(--ink) }

.contact-form{ display:flex; flex-direction:column; gap:34px }
.feld-paar{ display:grid; grid-template-columns:1fr 1fr; gap:34px }
.feld{ display:flex; flex-direction:column }
.feld label{
  font-size:10px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-55);
  margin-bottom:10px;
}
/* Unterstrich statt Kasten: ein Rahmen um jedes Feld ergibt sechs
   Rechtecke, die um Aufmerksamkeit konkurrieren.
   Nicht --line wie bei den Bandkanten: die misst auf Weiß 1.37:1
   und ist als Umriss eines Bedienelements nach WCAG 1.4.11 zu
   schwach. --line-feld liegt bei 3.14:1 — die Grenze, mehr nicht,
   damit die Felder nicht als Linienraster erscheinen. */
.feld input,
.feld textarea,
.feld select{
  font:inherit;
  font-size:17px;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-feld);
  border-radius:0;
  padding:8px 0 12px;
  width:100%;
}
.feld textarea{ resize:vertical }
/* Die Systemdarstellung eines select ist ein gerundeter Kasten mit
   eigenem Grau — neben fünf Unterstrichen liest sich das als
   Fremdkörper. Deshalb abgeschaltet und ein eigener Winkel als
   Hintergrundbild, inline, ohne zusätzliche Anfrage. Er steht im
   Stylesheet und nicht im Markup: eine Zeichnung, kein Textzeichen. */
.feld select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:28px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%230b0b0b' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
  cursor:pointer;
}
.feld input:hover,
.feld textarea:hover,
.feld select:hover{ border-bottom-color:var(--ink-55) }
.feld input:focus,
.feld textarea:focus,
.feld select:focus{ outline:none; border-bottom-color:var(--ink) }
/* Der globale :focus-visible-Block fasst a, button, summary und
   [tabindex] — Felder fehlen dort, also hier eigens. */
.feld input:focus-visible,
.feld textarea:focus-visible,
.feld select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
/* Die Auswahl steht allein auf einer Zeile — sie ist die Frage nach
   dem Format, nicht ein Feld unter Feldern. Aber sie muss auch nicht
   die volle Breite einnehmen, sonst wirkt sie wie ein Pflichtschritt. */
.feld-auswahl select{ max-width:26rem }
/* Fragen oder buchen. Kein Umschalter mit Vorzugsseite: buchen ist
   nicht die bessere Wahl, sondern die andere. Gleiches Gewicht,
   gleiche Fläche, keine Hervorhebung der einen. Verbindlich wird
   auch die Buchung nicht — sie sagt nur, worauf es hinausläuft. */
/* Die Legende steht außerhalb des Rasters — ein <legend> als
   Rasterzelle wird auf Spaltenbreite gequetscht und bricht Wort
   für Wort um. Deshalb liegt das Raster in einem eigenen Kasten. */
.absicht{
  border:0;
  padding:0;
  margin:0;
  min-inline-size:0;
}
.absicht legend{
  padding:0;
  margin-bottom:10px;
  font-size:10px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-55);
}
.absicht-wahlen{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 34px;
}
.wahl{ display:flex; align-items:center; gap:12px }
.wahl input{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin:3px 0 0;
  border:1px solid var(--line-feld);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
/* Der gefüllte Zustand als Innenschatten statt als zweites Element:
   ein Ring plus Punkt aus einem einzigen Kasten. */
.wahl input:checked{
  border-color:var(--ink);
  box-shadow:inset 0 0 0 3.5px #fff, inset 0 0 0 17px var(--ink);
}
.wahl input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.wahl label{
  font-size:17px;
  color:var(--ink);
  cursor:pointer;
}

/* Terminwünsche sind freiwillig und stehen deshalb eingeklappt: sonst
   sieht das Formular länger aus, als es ist. <details> statt Skript,
   damit die Felder auch ohne JavaScript erreichbar bleiben. */
.termin-klapp summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--ink-55);
}
.termin-klapp summary::-webkit-details-marker{ display:none }
.termin-klapp summary:hover{ color:var(--ink) }
/* Ein Winkel, kein Pluszeichen: das gedrehte Plus wird zum Kreuz und
   liest sich als „löschen". Derselbe Winkel wie an den Auswahlfeldern,
   damit die Seite ein Zeichen für „hier klappt etwas auf" hat. */
.termin-klapp summary span{
  flex:0 0 auto;
  width:11px;
  height:7px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2366696c' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  transition:transform .22s cubic-bezier(.32,.72,0,1);
}
.termin-klapp[open] summary{ color:var(--ink) }
.termin-klapp[open] summary span{ transform:rotate(180deg) }
.termin-felder{
  display:flex;
  flex-direction:column;
  gap:34px;
  padding:28px 0 0;
}

/* Wochentage statt Datumsfelder. Ein leeres Textfeld fragt nach einer
   Auskunft, die niemand parat hat; fünf Kästchen sind in zwei Klicks
   beantwortet. Samstag und Sonntag fehlen absichtlich — sie sind keine
   Option, die man erst abwählen muss. */
.tage{ border:0; padding:0; margin:0; min-inline-size:0 }
.tage legend{
  padding:0;
  margin-bottom:14px;
  font-size:10px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-55);
}
.tage-wahlen{ display:flex; flex-wrap:wrap; gap:14px 26px }
.tag{ display:flex; align-items:center; gap:10px }
/* Quadrat gegen Kreis: dieselbe Bauweise wie bei den Absichten, aber
   eckig — rund heißt „eines von beiden", eckig heißt „so viele du
   willst". */
.tag input{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin:0;
  border:1px solid var(--line-feld);
  border-radius:0;
  background:transparent;
  cursor:pointer;
}
.tag input:hover{ border-color:var(--ink-55) }
.tag input:checked{
  border-color:var(--ink);
  background-color:var(--ink);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6l3 3L10 1' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
}
.tag input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.tag label{
  font-size:17px;
  color:var(--ink);
  cursor:pointer;
  letter-spacing:0;
}

/* Falle für Automaten. Nicht display:none — das erkennen sie. */
.falle{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-fuss{ display:flex; align-items:center; gap:24px; flex-wrap:wrap }
.form-status{ margin:0; font-size:13px; line-height:1.6; color:var(--ink-70) }
.form-status[data-zustand="fehler"]{ color:#8a2b2b }
.form-hinweis{ margin:0; font-size:12px; line-height:1.6; color:var(--ink-55) }
.form-hinweis a{ border-bottom:1px solid currentColor }
.form-hinweis a:hover{ color:var(--ink) }

/* Die Antwort nach dem Senden. Sie nimmt den Platz des Formulars ein,
   in der Größe einer Abschnittsüberschrift. Eine graue Zeile von 13 px
   neben dem Knopf stand an derselben Stelle wie „Wird gesendet …“ und
   war davon nicht zu unterscheiden. Kein Häkchen, keine Signalfarbe,
   kein Aufblenden: der Größensprung sagt genug. */
/* .contact-form setzt display:flex — ohne Ausrufezeichen entschiede
   allein die Reihenfolge im Stylesheet darüber, ob das Formular
   wirklich verschwindet. */
[hidden]{ display:none !important }
/* Zuvor stand die Überschrift bis 48 px frei im Raum, ohne Kante und
   ohne Bezug zum Raster — daneben die 72-px-Frage, gegen die sie nur
   verlieren konnte, und zwei Absätze gleicher Größe, in denen die
   Auskunft und der Notweg gleich viel wogen. Jetzt trägt der Block
   dieselbe Ordnung wie jeder Abschnitt der Seite: schwarze Linie,
   Marke, Überschrift, Text — und die Rangfolge steht in den Graden,
   nicht in der Reihenfolge. */
.form-danke{
  max-width:42ch;
  border-top:1px solid var(--ink);
  padding-top:24px;
}
.form-danke:focus{ outline:none }
.form-danke:focus-visible{ outline:2px solid var(--accent); outline-offset:8px }
.form-danke .section-label{ margin:0 }
.form-danke h3{
  font-size:clamp(26px,2.6vw,38px);
  font-weight:600;
  letter-spacing:calc(-.026em + var(--tr-adjust));
  line-height:1.08;
  color:var(--ink);
  margin:20px 0 0;
}
.form-danke .danke-lead{
  font-size:18px;
  line-height:1.7;
  color:var(--ink-70);
  margin:24px 0 0;
  text-wrap:pretty;
}
/* Der Notweg, nicht die Nachricht: kleiner, leiser, hinter einer
   eigenen Linie. Dieselben Grade wie der Hinweis unter dem Knopf,
   den er ersetzt. */
.form-danke .danke-fuss{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-55);
  margin:32px 0 0;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.form-danke a{ color:var(--ink); border-bottom:1px solid var(--line-feld) }
.form-danke a:hover{ color:var(--accent); border-bottom-color:var(--accent) }

/* --- 14. Fuß ----------------------------------------------- */

/* Der Fuß trägt zwei Aufgaben zugleich: die Anschrift, wie es sich
   gehört, und die Wege, über die Suchmaschinen die Unterseiten
   einordnen. Deshalb steht hier ein Satz, der sagt, was diese Seite
   ist, und deshalb stehen die Artikel als eigene Spalte da. Die
   einzige schwarze Fläche der Seite; darüber enden die Begegnungen
   auf Weiß, der Farbwechsel trennt allein.
   Die Vorlage, an der sich der Aufbau orientiert, arbeitete mit Gold
   auf Schwarz. Das verbietet der Kanon; die Zeile über dem Namen
   steht deshalb im Blau, das die Seite ohnehin führt. */
.footer{
  padding:9vh 4vw 5vh;
  background:var(--ink);
  color:#fff;
}
.footer-top{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1.1fr;
  gap:56px 40px;
  align-items:start;
}
/* Die Rollenzeile ist kein Schmuck, sondern die kürzeste Auskunft
   darüber, worum es hier geht — für Menschen wie für Maschinen. */
.footer-rolle{
  margin:0 0 18px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--accent-hell);
}
.footer-mark{
  display:block;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
}
/* Der Satz nennt Leistung und Ort in einem. Das Fette hebt hervor,
   was jemand tatsächlich sucht; mehr Auszeichnung wäre Lärm. */
.footer-claim{
  max-width:34ch;
  margin:22px 0 0;
  font-size:17px;
  line-height:1.65;
  color:var(--auf-dunkel);
}
.footer-claim strong{ font-weight:500; color:#fff }
.footer-spalte{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
  font-size:15px;
}
.footer-spalten-titel{
  margin:0 0 6px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--auf-dunkel-leise);
}
.footer-spalte a{ color:var(--auf-dunkel) }
.footer-spalte a:hover{ color:#fff }
/* <address> ist hier die richtige Auszeichnung — ein Programm liest
   daraus, dass dies die Anschrift der Seite ist und nicht irgendein
   Absatz mit einer Straße darin. Die Kursive der Voreinstellung muss
   weg, sonst steht der einzige schräge Satz der Seite im Fuß. */
.footer-kontakt address{
  font-style:normal;
  font-size:15px;
  line-height:1.95;
  color:var(--auf-dunkel);
}
.footer-kontakt address a{
  color:var(--auf-dunkel);
  border-bottom:1px solid rgba(255,255,255,.3);
}
.footer-kontakt address a:hover{ color:#fff; border-bottom-color:#fff }
.footer-orte{
  margin:6px 0 0;
  font-size:13px;
  color:var(--auf-dunkel-leise);
}
.legal{
  border-top:1px solid var(--line-dunkel);
  margin-top:64px;
  padding-top:26px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  font-size:10px;
  text-transform:uppercase;
  color:var(--auf-dunkel-leise);
}
/* Rechtliches und Profile laufen in die Fußzeile, nicht in eine
   eigene Spalte: Sie sind Pflichtangaben, kein Angebot. */
.legal-wege{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
}
.legal-wege a{ color:var(--auf-dunkel-leise) }
.legal-wege a:hover{ color:#fff }

/* --- 15. Textseiten ---------------------------------------- */
/* Impressum, Datenschutz und die Artikel laufen auf demselben
   Raster wie die Startseite: derselbe Kopf, derselbe Fuß, dieselbe
   Schrift. Der Abschnittsname steht links und bleibt beim Scrollen
   stehen, der Text steht rechts in einer Spalte, die lesbar schmal
   bleibt. Die Klasse heißt .lauftext, nicht .rechtstext: sie trägt
   inzwischen auch Fachartikel, nicht nur Paragraphen. */

.rechts-kopf{
  padding:16vh 7vw 9vh;
  background:#fff;
}
.rechts-kopf h1{
  font-size:clamp(38px,5vw,74px);
  margin:0;
  text-transform:uppercase;
}
.rechts-kopf p{
  font-size:19px;
  line-height:1.7;
  color:var(--ink-70);
  max-width:46ch;
  margin:34px 0 0;
  text-wrap:pretty;
}

.rechts-block{
  padding:9vh 7vw;
  background:#fff;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);
  gap:7vw;
  align-items:start;
}
.rechts-block > .section-label{
  margin:0;
  position:sticky;
  top:112px;
}

.lauftext{
  max-width:70ch;
  font-size:17px;
  line-height:1.75;
  color:var(--ink-70);
}
.lauftext p{ margin:0 0 1.25em; text-wrap:pretty }
.lauftext strong{ color:var(--ink); font-weight:600 }
/* h2 nur in Artikeln: die Rechtstexte kommen mit h3 und h4 aus,
   ein Fachtext braucht eine Ebene mehr. Zwei Grade Abstand zum
   Fließtext, nicht vier — der Text soll gegliedert wirken, nicht
   zerteilt. */
.lauftext h2{
  font-size:24px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:calc(-.014em + var(--tr-adjust));
  color:var(--ink);
  margin:3.2em 0 .8em;
  max-width:30ch;
  text-wrap:balance;
}
.lauftext h3{
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  margin:3em 0 .7em;
}
.lauftext > :first-child{ margin-top:0 }
.lauftext h4{
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  margin:2em 0 .6em;
}
.lauftext ul{ margin:0 0 1.25em; padding-left:1.15em }
.lauftext ul li{ margin-bottom:.5em }
.lauftext ul li::marker{ color:var(--line-feld) }
.lauftext a{
  color:var(--ink);
  border-bottom:1px solid var(--line-feld);
}
.lauftext a:hover{ color:var(--accent); border-bottom-color:var(--accent) }

/* Das Verzeichnis führt in denselben Text und soll ihn nicht
   überstrahlen: kleiner Satz, zwei Spalten, keine Rahmen. */
.rechts-inhalt{
  margin:2.5em 0 3.5em;
  padding:0 0 0 1.4em;
  columns:2;
  column-gap:44px;
  font-size:15px;
  line-height:1.9;
}
.rechts-inhalt li::marker{ color:var(--line-feld) }
.rechts-inhalt a{ border-bottom:1px solid transparent }
.rechts-inhalt a:hover{ border-bottom-color:var(--ink) }

.rechts-stand{
  margin:3.5em 0 0;
  font-size:14px;
  color:var(--ink-55);
}

/* --- 16. Journal ------------------------------------------- */
/* Artikel sind kein zweites Gestaltungssystem. Sie benutzen den
   Kopf der Textseiten, denselben Fließtext, dieselbe Spalte. Neu
   ist zweierlei: die Überschrift eines Artikels steht in gemischter
   Schreibweise — ein Satz in Versalien über drei Zeilen liest sich
   nicht —, und das Verzeichnis braucht eine Form, die wachsen kann.
   Keine Karten, keine Vorschaubilder, keine Lesedauer: eine Zeile
   pro Artikel, wie ein Inhaltsverzeichnis. */

/* Der Kopf der Übersicht steht wie der Kopf eines Artikels auf
   Papier, damit Verzeichnis und Text zusammengehören. Er ist zweimal
   geteilt: links der Name des Bereichs, rechts der Satz, der sagt,
   was hier zu erwarten ist. Die Linie über dem Satz bindet ihn an die
   Oberkante der Überschrift — ohne sie hinge er im Weißraum. */
.journal-kopf{
  padding:14vh 7vw 10vh;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:7vw;
  align-items:start;
}
.journal-kopf .artikel-marke{ margin-bottom:26px }
.journal-kopf h1{
  font-size:clamp(52px,7vw,104px);
  text-transform:uppercase;
  margin:0;
}
.journal-kopf-text{
  border-top:1px solid var(--line-feld);
  padding-top:26px;
  font-size:19px;
  line-height:1.7;
  color:var(--ink-70);
  max-width:46ch;
  margin:14px 0 0;
  text-wrap:pretty;
}
.journal-kopf-text strong{ color:var(--ink); font-weight:600 }

/* Das Verzeichnis läuft über die volle Breite. Es hat keine
   klebende Spaltenbeschriftung wie die Rechtstexte: eine Liste, die
   man von oben nach unten liest, braucht keine Marke daneben. */
.journal-bereich{
  padding:9vh 7vw 10vh;
  background:#fff;
}
.journal-kopfzeile{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin:0 0 2px;
  padding-bottom:18px;
  border-bottom:1px solid var(--ink);
}
.journal-kopfzeile .section-label{ margin:0 }
/* Die Zahl ist eine Auskunft, kein Verkaufsargument: gleicher Grad
   wie die Beschriftung, aber leiser in der Farbe. */
.journal-anzahl{
  margin:0;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--ink-55);
  white-space:nowrap;
}

.journal-liste{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:eintrag;
}
.journal-eintrag{
  counter-increment:eintrag;
  border-bottom:1px solid var(--line);
}
/* Die ganze Zeile führt hinein, nicht ein „Weiterlesen“ am Ende.
   Vier Spalten: Ziffer, Thema, der Text, der Pfeil. Die beiden
   schmalen Spalten sind fest, damit die Titel aller elf Einträge
   auf derselben Kante beginnen. Die Themenspalte trägt seit dem
   Wegfall des Datums nur noch ein Wort; 150px fassen das längste
   („Stimmgesundheit“) in Versalien einzeilig. */
.journal-eintrag > a{
  display:grid;
  grid-template-columns:56px 150px minmax(0,1fr) 40px;
  gap:32px;
  align-items:start;
  padding:44px 0;
  border-bottom:0;
}
.journal-eintrag > a::before{
  content:counter(eintrag, decimal-leading-zero);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--ink-55);
  padding-top:9px;
}
.journal-eintrag > a:hover h3{ color:var(--accent) }
.journal-eintrag > a:hover .journal-pfeil{ transform:translate(3px,-3px) }
/* Das Raster bleibt, obwohl nur noch das Thema darin steht: käme
   je eine zweite Angabe dazu, stünde sie darunter und nicht daneben. */
.journal-meta{
  display:grid;
  gap:9px;
  margin:0;
  padding-top:8px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-55);
}
/* Titel und Anriss gehören in dieselbe Spalte, also in dasselbe
   Kästchen — sonst verteilt das Raster sie auf zwei. */
.journal-text{ min-width:0 }
.journal-eintrag h3{
  font-size:clamp(23px,2.3vw,31px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:calc(-.022em + var(--tr-adjust));
  color:var(--ink);
  margin:0;
  max-width:22ch;
  text-wrap:balance;
}
/* Nur der Anriss, nicht jeder Absatz der Zeile: die Themenzeile ist
   auch ein <p> und würde sich diese Werte sonst holen — sie stehen
   später und wiegen schwerer als `.journal-meta`. */
.journal-text p{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-70);
  margin:16px 0 0;
  max-width:56ch;
  text-wrap:pretty;
}
/* Der Pfeil sagt, dass die Zeile wegführt. Er rückt beim Überfahren
   ein Stück in seine Richtung — bewegt wird nur transform, und wer
   Bewegung abbestellt hat, bekommt sie nicht. */
.journal-pfeil{
  justify-self:end;
  padding-top:6px;
  font-size:17px;
  color:var(--ink-55);
  transition:transform .2s cubic-bezier(.2,.7,.2,1);
}

/* Datum und Thema in einer Zeile, in denselben Graden wie die
   Feldbeschriftungen im Formular. Der Punkt trennt, er schmückt
   nicht. */
.artikel-marke{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
  font-size:10px;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--ink-55);
}
.artikel-marke span[aria-hidden]{ color:var(--line-feld) }

/* Der Kopf einer Artikelseite. Kein Versalsatz und kleiner als der
   Kopf der Startseite: dort steht ein Name, hier ein Satz. Er steht
   auf Papier statt auf Weiß — der Farbwechsel trennt Einstieg und
   Text, ohne dass es dafür eine Linie bräuchte. */
.artikel-kopf{
  padding:12vh 7vw 8vh;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.artikel-kopf .artikel-marke{ margin-bottom:22px }
.artikel-kopf h1{
  font-size:clamp(36px,4.9vw,68px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:calc(-.032em + var(--tr-adjust));
  margin:0;
  max-width:18ch;
  text-wrap:balance;
}
.artikel-kopf .vorspann{
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.55;
  color:var(--ink-70);
  max-width:48ch;
  margin:30px 0 0;
  text-wrap:pretty;
}

/* Der Pfad sagt in einer Zeile, wo man gelandet ist — und gibt
   Suchmaschinen dieselbe Auskunft, die weiter unten noch einmal
   maschinenlesbar steht. Er ist Orientierung, kein Schmuck: kleiner
   Grad, graue Farbe, das Trennzeichen noch eine Stufe leiser. */
.brotkrume{
  margin:0 0 42px;
  font-size:13px;
  color:var(--ink-55);
}
.brotkrume a{ color:var(--ink-55); border-bottom:1px solid transparent }
.brotkrume a:hover{ color:var(--ink); border-bottom-color:var(--ink) }
.brotkrume span[aria-hidden]{ color:var(--line-feld); margin:0 7px }

/* Der Textkörper steht in zwei Spalten: links das Verzeichnis, das
   beim Scrollen stehenbleibt, rechts der Text. Die schmale Spalte
   ist fest, damit die Textspalte nicht mit der Fensterbreite
   mitwächst — 66ch bleiben lesbar, 100ch nicht. */
.artikel-raster{
  padding:9vh 7vw 10vh;
  background:#fff;
  display:grid;
  grid-template-columns:minmax(0,250px) minmax(0,1fr);
  gap:7vw;
  align-items:start;
}
.artikel-raster .lauftext{
  font-size:19px;
  line-height:1.7;
  max-width:66ch;
}
.artikel-raster .lauftext h2{ font-size:29px; margin:2.6em 0 .7em }
/* Ohne diesen Abstand verschwindet die angesprungene Überschrift
   unter dem stehenden Kopf der Seite. */
.lauftext h2[id]{ scroll-margin-top:130px }

/* Das Verzeichnis führt in den Text, es steht nicht neben ihm. Die
   Ziffern sind klein und grau: sie zählen, sie betonen nicht. */
.artikel-inhalt{
  position:sticky;
  top:112px;
  align-self:start;
  border-top:1px solid var(--ink);
  padding-top:18px;
}
.artikel-inhalt-titel{
  margin:0 0 22px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--ink-55);
}
.artikel-inhalt ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:punkt;
}
.artikel-inhalt li{
  counter-increment:punkt;
  display:grid;
  grid-template-columns:26px 1fr;
  gap:8px;
  margin:0 0 16px;
  font-size:13px;
  line-height:1.4;
}
/* Die Ziffer ist Text, kein Aufzählungspunkt — sie muss den
   Kontrastwert erreichen wie jeder andere Kleintext auch. Die
   Abstufung zur Zeile entsteht deshalb über den Grad, nicht über
   ein helleres Grau. */
.artikel-inhalt li::before{
  content:"0" counter(punkt);
  font-size:10px;
  padding-top:3px;
  color:var(--ink-55);
}
.artikel-inhalt a{ color:var(--ink-70); border-bottom:1px solid transparent }
.artikel-inhalt a:hover{ color:var(--ink); border-bottom-color:var(--ink) }

/* Ein herausgestellter Satz pro Artikel, kein Zierrat: er wiederholt
   den Kern eines Abschnitts für den, der überfliegt. Keine gefüllte
   Fläche und kein Anführungsornament — eine Linie genügt, der Satz
   trägt sich selbst. */
.zitat{
  margin:2.4em 0;
  padding:2px 0 2px 30px;
  border-left:2px solid var(--ink);
  font-size:24px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:calc(-.012em + var(--tr-adjust));
  color:var(--ink);
  max-width:34ch;
}

/* Ein Artikel endet nicht im Nichts, aber auch nicht in einem
   Angebot. Die dunkle Fläche ist eine Zäsur: sie sagt, dass der Text
   zu Ende ist. Kein Versprechen, kein „jetzt“ — der Satz benennt,
   was eine Bestandsaufnahme leistet, und überlässt den Schluss dem
   Leser. Darunter läuft die weiße Weiter-Zeile, damit die Fläche
   nicht mit dem Fuß zu einem einzigen schwarzen Block verwächst. */
.artikel-schluss{
  padding:8vh 7vw;
  background:var(--ink);
  color:#fff;
}
.artikel-schluss-label{
  margin:0 0 20px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--auf-dunkel-leise);
}
.artikel-schluss h2{
  font-size:clamp(26px,2.8vw,38px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:calc(-.026em + var(--tr-adjust));
  margin:0;
  max-width:22ch;
  text-wrap:balance;
}
.artikel-schluss p{
  font-size:17px;
  line-height:1.7;
  color:var(--auf-dunkel);
  max-width:46ch;
  margin:20px 0 0;
}
.artikel-schluss a{
  display:inline-block;
  margin-top:28px;
  padding-bottom:6px;
  border-bottom:1px solid var(--auf-dunkel-leise);
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  color:#fff;
}
.artikel-schluss a:hover{ border-bottom-color:#fff }

/* Am Fuß eines Artikels steht kein „Das könnte dich auch
   interessieren“, sondern der Weg zurück und der Weg weiter. */
.artikel-weiter{
  margin:0;
  padding:5vh 7vw;
  background:#fff;
  font-size:15px;
  line-height:1.9;
  color:var(--ink-70);
}
/* Steht die Zeile innerhalb eines Bereichs, der schon einen Rand
   hat, braucht sie keinen eigenen — sonst rückt sie um die doppelte
   Randbreite ein und steht nicht mehr auf der Kante des Textes. */
.journal-bereich .artikel-weiter,
.rechts-block .artikel-weiter{ padding-left:0; padding-right:0 }
.artikel-weiter a{ color:var(--ink); border-bottom:1px solid var(--line-feld) }
.artikel-weiter a:hover{ color:var(--accent); border-bottom-color:var(--accent) }

/* Fachbegriff und Übersetzung im Fließtext. Kein Tooltip, keine
   gepunktete Linie: wer den Begriff kennt, liest darüber hinweg. */
.lauftext dl{ margin:0 0 1.25em }
.lauftext dt{ color:var(--ink); font-weight:600; margin-top:1.1em }
.lauftext dd{ margin:.35em 0 0 }

/* --- 17. Schmal (1100px) ----------------------------------- */

@media (max-width:1100px){
  .connection-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .testimonial-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }

  /* Das Verzeichnis wird schmaler, bevor es unter den Text rückt. */
  .artikel-raster{ grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:5vw }

  /* Ziffer und Themenspalte geben zuerst nach; der Titel behält
     seine Breite, solange es geht. */
  .journal-eintrag > a{ grid-template-columns:40px 132px minmax(0,1fr) 34px; gap:24px }

  /* Der Satz braucht Breite; die drei Spalten rücken darunter. */
  .footer-top{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .footer-identitaet{ grid-column:1 / -1 }
  .footer-claim{ max-width:52ch }
}

/* --- 18. Schmal (860px) ------------------------------------ */

@media (max-width:860px){
  .nav{ height:70px }
  .navlinks{
    display:none;
    position:absolute;
    top:70px; left:0; right:0;
    background:#fff;
    padding:26px 6vw;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    border-bottom:1px solid var(--line);
  }
  .navlinks.offen{ display:flex }
  .menu{ display:block }
  .nav-cta{ display:none }

  .hero{ grid-template-columns:1fr; min-height:auto }
  .hero-copy{ padding:10vh 6vw 8vh }
  .hero h1{ font-size:clamp(42px,15vw,76px) }
  .hero-image{ min-height:0; aspect-ratio:1 / 1 }

  .tour{ grid-template-columns:1fr }
  .tour-intro{ border-right:0; border-bottom:1px solid var(--line-tief) }
  .tour-poster{ padding:11vh 6vw }
  .tour-schedule{ padding:11vh 6vw }


  .about{ grid-template-columns:1fr; padding:12vh 6vw; gap:64px }
  .about-quote{ margin-top:28px }
  .about-more{ grid-column:auto }
  .about-more-grid{ grid-template-columns:1fr; gap:36px }

  .offers{ padding:12vh 6vw }
  .cards{ grid-template-columns:1fr }
  .card,
  .card + .card{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:34px 0;
  }
  .card:last-child{ border-bottom:0 }
  .card-link{ padding-bottom:0 }

  .pricing{ padding:12vh 6vw }
  .pricing-columns{ grid-template-columns:1fr }
  .pricing-group,
  .pricing-group + .pricing-group{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:30px 0;
  }
  .pricing-group:last-child{ border-bottom:0 }
  .pricing-note{ display:block }
  .pricing-note a{ display:inline-block; margin-top:18px }

  .method{ grid-template-columns:1fr; gap:48px; padding:12vh 6vw }
  .method-portrait{ aspect-ratio:4 / 3 }

  .connections{ padding:12vh 6vw }
  .testimonials{ padding:12vh 6vw }
  .testimonials-head{ display:block }
  .testimonials-head p{ margin-top:24px }
  .featured-testimonial{ grid-template-columns:1fr; gap:36px }
  .featured-copy blockquote{ margin-top:32px }
  .testimonial-grid{ grid-template-columns:1fr; gap:72px; margin-top:88px }

  .contact{ grid-template-columns:1fr; padding:12vh 6vw; gap:56px }
  .feld-paar{ grid-template-columns:1fr }
  .absicht-wahlen{ grid-template-columns:1fr; gap:22px }

  .artikel-kopf{ padding:10vh 6vw 7vh }
  .brotkrume{ margin-bottom:28px }
  /* Das Verzeichnis rückt über den Text und hört auf zu kleben; es
     bleibt sichtbar, statt auf kleinen Geräten zu verschwinden. */
  .artikel-raster{ display:block; padding:7vh 6vw 9vh }
  .artikel-inhalt{ position:static; margin-bottom:46px }
  .artikel-raster .lauftext{ font-size:18px; max-width:none }
  .artikel-raster .lauftext h2{ font-size:25px }
  .zitat{ font-size:21px; padding-left:22px }
  .artikel-schluss{ padding:7vh 6vw }
  .artikel-weiter{ padding:5vh 6vw }

  /* Der Kopf der Übersicht wird einspaltig, der Satz rückt unter die
     Überschrift und behält seine Linie. */
  .journal-kopf{ display:block; padding:11vh 6vw 8vh }
  .journal-kopf-text{ margin-top:38px; max-width:none }
  .journal-bereich{ padding:8vh 6vw 9vh }
  /* Aus vier Spalten wird eine Zeile mit Marke und Titel: Ziffer und
     Pfeil sind auf dem Telefon Zierrat, die Zeile ist ohnehin ganz
     anklickbar. */
  .journal-eintrag > a{ display:block; padding:34px 0 }
  .journal-eintrag > a::before{ display:none }
  .journal-meta{ display:flex; flex-wrap:wrap; gap:14px; padding-top:0; margin-bottom:14px }
  .journal-eintrag h3{ max-width:none }
  .journal-pfeil{ display:none }

  .rechts-kopf{ padding:12vh 6vw 7vh }
  .rechts-block{ grid-template-columns:1fr; gap:34px; padding:8vh 6vw }
  .rechts-block > .section-label{ position:static }
  .rechts-inhalt{ columns:1 }

  .footer{ padding:8vh 6vw 5vh }
  .footer-top{ grid-template-columns:1fr; gap:44px }
  .footer-claim{ max-width:none }
  .legal{ display:block; line-height:2.2 }
  .legal-wege{ margin-top:14px; gap:18px }
}

/* --- 19. Sehr schmal (560px) ------------------------------- */

@media (max-width:560px){
  .tour h2{ font-size:clamp(48px,16vw,74px) }
  .tour-schedule-head span{ display:none }
  .tour-date > div{ grid-template-columns:96px 1fr; gap:12px 18px }
  .tour-date h3{ font-size:23px }
  .tour-meta{ grid-column:2 }
  .connection-grid{ gap:1.25rem }
}

/* --- 20. Reduzierte Bewegung ------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}