/* budo GmbH · Website
   Farben, Schriften und Maße folgen budo-website-briefing.md.
   Schriften werden über fonts/schriften.css geladen (lokal, kein CDN). */

:root{
  --tinte:        #141C27;
  --tinte-band:   #1D2733;
  --tinte-tief:   #0D131B;
  --stein:        #47525F;
  --nebel:        #6B7480;
  --papier:       #EFEEEA;
  --bogen:        #FFFFFF;
  --linie:        #E2E0D9;
  --linie-dunkel: rgba(239,238,234,0.14);
  --zinnober:     #C8492F;
  --zinnober-tief:#A63A20;
  --zinnober-hell:#E8785A;

  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Instrument Sans', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --wrap:1180px;
  --pad:28px;
  --r:16px;
  --r-s:10px;
  --schatten:0 1px 2px rgba(20,28,39,.04), 0 10px 28px -14px rgba(20,28,39,.13);
  --schatten-hoch:0 2px 4px rgba(20,28,39,.05), 0 22px 48px -20px rgba(20,28,39,.20);
  /* Für Flächen, die zwar eigenständig sind, aber unter den Karten
     stehen sollen. Liegt bewusst unter --schatten. */
  --schatten-leise:0 1px 2px rgba(20,28,39,.03), 0 8px 22px -18px rgba(20,28,39,.10);
}

*{box-sizing:border-box; margin:0; padding:0;}
/* Grundfläche in Tinte, nicht in Papier. Sichtbar wird sie nur an zwei
   Stellen, und beide sind dunkel: hinter dem sticky Header am
   Seitenanfang und beim Überscrollen unter dem Footer. Mit Papier
   schien dort ein heller Streifen durch den zu 88 % deckenden Header. */
html{scroll-behavior:smooth; background:var(--tinte); color-scheme:light;}
body{
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.6;
  letter-spacing:-0.005em;
  color:var(--tinte);
  background:var(--tinte);
  -webkit-font-smoothing:antialiased;
}

/* Der sticky Header verdeckt sonst den Anfang der angesprungenen
   Sektion, wenn jemand die Navigation benutzt. */
section[id]{scroll-margin-top:92px;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-0.035em;
  line-height:1.03;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);}

.eyebrow{
  font-family:var(--mono);
  font-size:0.6875rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--zinnober-tief); display:block; margin-bottom:22px;
}
.on-dark .eyebrow{color:var(--zinnober-hell);}

/* Sprungmarke für Tastatur und Screenreader */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--zinnober); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-s) 0;
  font-size:0.9rem;
}
.skip:focus{left:0;}

/* ---------------- NAV ---------------- */
header.site{position:sticky; top:0; z-index:60; background:rgba(20,28,39,0.88); backdrop-filter:blur(14px);}
.nav{max-width:var(--wrap); margin:0 auto; padding:18px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:20px;}
.nav-logo{display:flex; align-items:baseline; gap:9px; color:var(--bogen);}
.nav-logo svg{height:19px; width:auto; display:block;}
.nav-links{display:flex; gap:28px; font-size:0.9rem; font-weight:500; color:rgba(239,238,234,0.66);}
.nav-links a:hover{color:var(--bogen);}
.nav-cta{
  font-size:0.88rem; font-weight:500; color:var(--tinte); background:var(--papier);
  padding:9px 18px; border-radius:100px; white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.nav-cta:hover{background:var(--zinnober); color:#fff;}
@media (max-width:900px){.nav-links{display:none;}}

/* ---------------- HERO ---------------- */
/* Die Aussage steht im unteren Drittel: der Raum darüber trägt sie,
   statt sie zu umgeben. Die Höhe wächst mit dem Fenster, aber nur bis
   840 px. Ohne Deckel würde der Hero auf großen Monitoren über
   1100 px hoch und der Leerraum kippt von großzügig in leer.
   Das Padding ist die Untergrenze für flache Fenster. */
.hero{position:relative; background:radial-gradient(115% 85% at 76% 48%, #22303F 0%, rgba(34,48,63,0) 62%), var(--tinte);
  background-color:var(--tinte); color:var(--papier); overflow:hidden;
  min-height:min(80vh, 840px); display:flex; flex-direction:column; justify-content:flex-end;
  padding:220px 0 128px;}
.hero .wrap{position:relative; z-index:3; width:100%;}
/* Keine ch-Begrenzung: die Einheit rechnet mit der Schriftgröße des h1,
   nicht mit der viel größeren der Zeilen darin. 16ch waren rund 270 px
   und haben die Headline dreimal zu früh umgebrochen.
   Den Umbruch steuert das <br> im Text. */
.hero h1{max-width:none;}
.hero .l1{display:block; font-size:clamp(1.9rem,5vw,3.6rem); font-weight:500; color:rgba(239,238,234,0.78); letter-spacing:-0.03em;}
.hero .l2{display:block; margin-top:.1em; font-size:clamp(2.7rem,8.6vw,6.4rem); font-weight:800; color:var(--zinnober-hell); letter-spacing:-0.05em;}

.hero-band{background:linear-gradient(180deg, #212C39 0%, var(--tinte-band) 100%); color:var(--papier); padding:64px 0;}
.hero-band-inner{display:flex; gap:56px; align-items:center; flex-wrap:wrap;}
.portrait{
  flex:0 0 168px; width:168px; height:168px; border-radius:50%;
  overflow:hidden; background:var(--tinte);
}
.portrait img{width:100%; height:100%; object-fit:cover;}
.hero-band p{font-size:1.2rem; max-width:46ch; color:rgba(239,238,234,0.82); line-height:1.5;}
.hero-band p strong{color:var(--bogen); font-weight:600;}
.hero-band .meta{font-family:var(--mono); font-size:0.75rem; color:rgba(239,238,234,0.5); margin-top:14px;}
.hero-band .btn{margin-top:26px;}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-block; font-family:var(--body); font-weight:500; font-size:0.95rem;
  padding:13px 26px; border-radius:100px; border:1px solid transparent; cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-solid{background:var(--zinnober); color:#fff; box-shadow:0 2px 6px rgba(168,58,32,.11), 0 12px 26px -14px rgba(168,58,32,.22);}
.btn-solid:hover{background:var(--zinnober-tief);}
.btn-line{border-color:rgba(20,28,39,0.22); color:var(--tinte);}
.btn-line:hover{background:var(--tinte); color:var(--papier); border-color:var(--tinte);}
/* Hinweis unter einem Button: nimmt die letzte Hürde vor dem Klick.
   Bewusst in Mono und leise, damit er als Angabe liest und nicht als
   Verkaufsargument. */
.btn-hinweis{font-family:var(--mono); font-size:0.75rem; margin-top:16px;
  color:rgba(239,238,234,0.55);}

/* ---------------- LOGO-LEISTE ---------------- */
.logos{background:var(--papier); padding:56px 0;}
.logos .label{font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--nebel); text-align:center; margin-bottom:24px;}
.logo-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:22px 44px;}
.logo-row span{font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--stein); opacity:.7;}
/* Kundenlogos einfarbig, damit aus sieben fremden Markenauftritten eine
   ruhige Reihe wird statt der bunten Leiste, die auf jeder Agenturseite
   steht. Normalfall: Die SVG-Datei ist bereits in --nebel (#6B7480)
   eingefärbt, dann greift hier kein Filter.
   Höhe nach optischer Wirkung, nicht nach Pixeln: breite Wortmarken
   dürfen niedriger sein als kompakte Zeichen. */
.logo-row img{height:26px; width:auto;}
.logo-row img.hoch{height:34px;}
/* Für Logos, die im Original geliefert wurden und nicht bearbeitet
   werden konnten. brightness(0) färbt sie unabhängig von ihren Farben
   schwarz, die Deckkraft bringt sie auf dieselbe Graustufe.
   Voraussetzung: transparenter Hintergrund, sonst wird er mitgefärbt
   und erscheint als schwarzer Kasten. */
.logo-row img.original{filter:brightness(0); opacity:.45;}
@media (max-width:600px){.logo-row img{height:22px;} .logo-row img.hoch{height:28px;}}

/* ---------------- SECTIONS ---------------- */
.sec{padding:144px 0; background:var(--papier); color:var(--tinte);}
.sec-alt{background:var(--bogen);}
.sec-dark{background:linear-gradient(180deg, var(--tinte) 0%, #101825 100%); color:var(--papier);}
.sec-dark h2, .sec-dark h3{color:var(--bogen);}

/* Breiten in em statt ch und am jeweiligen Element statt am Container:
   ch rechnete am .head-div mit 17 px Grundschrift, was die Überschriften
   auf gut 220 px zusammengedrückt hat. em skaliert mit der Überschrift selbst. */
.head{margin-bottom:60px;}
.head h2{font-size:clamp(2rem,4.4vw,3.3rem); max-width:14em;}
.head .sub{font-size:1.2rem; font-weight:500; color:var(--zinnober-tief); margin-top:18px; max-width:28em; letter-spacing:-0.02em;}
.sec-dark .head .sub{color:var(--zinnober-hell);}

.prose{max-width:62ch;}
.prose p{margin-bottom:22px; font-size:1.125rem; color:var(--tinte);}
.prose p.lead{
  font-family:var(--display); font-weight:600; font-size:1.45rem; line-height:1.28;
  letter-spacing:-0.03em; margin:32px 0;
}
.sec-dark .prose p{color:rgba(239,238,234,0.8);}
.sec-dark .prose p.lead{color:var(--bogen);}

/* Eine Stufe über .lead: für den einen Satz je Abschnitt, der die
   Richtung dreht und nicht zwischen den anderen untergehen darf. */
.prose p.ziel{
  font-family:var(--display); font-weight:700; letter-spacing:-0.042em;
  font-size:clamp(1.7rem,3.2vw,2.35rem); line-height:1.1;
  color:var(--tinte); margin:0 0 30px;
}

/* ---------------- SPIEGEL ---------------- */
.mirror{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:44px 0;}
@media (max-width:760px){.mirror{grid-template-columns:1fr;}}
.mirror div{background:var(--bogen); border-radius:var(--r); padding:30px 32px; box-shadow:var(--schatten);}
.sec-alt .mirror div{background:var(--papier); box-shadow:var(--schatten);}
.mirror b{display:block; font-family:var(--display); font-weight:600; font-size:1.1rem; letter-spacing:-0.025em; color:var(--zinnober-tief); margin-bottom:6px;}
.mirror span{font-size:1rem; color:var(--stein);}

/* ---------------- KETTE (Signatur) ---------------- */
/* Die drei Glieder teilen sich über subgrid dieselben Zeilenhöhen.
   Vorher drückte margin-bottom:auto den Inhalt jedes Glieds einzeln
   nach unten, wodurch Überschriften und Texte je nach Textlänge auf
   unterschiedlichen Höhen begannen. Zeile 2 bleibt leer und dehnt sich,
   sie hält den Abstand zwischen Kennzeichnung und Aussage. */
.kette{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto 1fr auto auto;
  gap:0; min-height:330px; border-radius:var(--r); overflow:hidden; box-shadow:var(--schatten-hoch);}
.kette .glied{padding:58px 40px 66px;
  display:grid; grid-row:span 4; grid-template-rows:subgrid;}
/* Die Mindesthöhe steht an der Kette, nicht am einzelnen Glied: nur so
   bleibt der dehnbaren Leerzeile Platz zum Wachsen. Der Rand darunter
   ist die Untergrenze, damit die Kennzeichnung auch dann nicht an der
   Überschrift klebt, wenn ein langer Text die Zeile aufbraucht. */
.kette .n{grid-row:1; margin-bottom:26px; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; opacity:.55;}
.kette h3{grid-row:3; font-size:1.85rem; margin-bottom:12px;}
.kette p{grid-row:4; font-size:1rem; max-width:30ch; line-height:1.55;}
.glied-1{background:var(--tinte); color:var(--papier);}
.glied-1 h3{color:var(--bogen);} .glied-1 p{color:rgba(239,238,234,0.74);}
.glied-2{background:var(--stein); color:var(--papier);}
.glied-2 h3{color:var(--bogen);} .glied-2 p{color:rgba(239,238,234,0.86);}
.glied-3{background:var(--bogen); color:var(--tinte);}
.glied-3 h3{color:var(--tinte);} .glied-3 p{color:var(--stein);}
/* Untereinander gibt es nichts mehr auszurichten, das Subgrid wird
   aufgelöst und die Glieder werden wieder einfache Blöcke. */
@media (max-width:860px){
  .kette{grid-template-columns:1fr; grid-template-rows:none;}
  .kette .glied{min-height:0; padding:34px 28px 38px;
    display:flex; flex-direction:column; grid-row:auto; grid-template-rows:none;}
  .kette .n, .kette h3, .kette p{grid-row:auto;}
  .kette .n{margin-bottom:22px;}
}

/* ---------------- ANGEBOTE ---------------- */
.weg{font-family:var(--mono); font-size:0.78rem; color:var(--nebel); margin-bottom:52px;}
.weg b{color:var(--zinnober-tief); font-weight:500;}

/* Der Abstand nach unten muss größer sein als das Innen-Padding von
   54 px, sonst gruppiert das Auge die Karte mit den folgenden. */
.offer{background:var(--bogen); border-radius:var(--r); padding:54px; margin-bottom:64px; box-shadow:var(--schatten-hoch);}
/* Die Standortbestimmung steht unter den Karten, nicht darüber: Erst
   liest jemand, worum es geht, dann wie man reinkommt. Die Reihenfolge
   macht die Weg-Zeile oben, die Anordnung macht die Gewichtung.
   Deshalb hier Abstand nach oben statt nach unten. */
/* Beide Selektoren, weil .sec-alt .offer weiter oben spezifischer ist
   und den Schatten sonst zurücksetzt. */
.offer-tuer, .sec-alt .offer-tuer{margin-top:0; margin-bottom:0; box-shadow:var(--schatten-leise);}
/* Spricht den Leser in seinem Zustand an, damit der Block unten nicht
   wie ein Trostpreis wirkt, sondern wie die Tür, die er ist. */
.offer-frage{font-family:var(--display); font-weight:600; font-size:1.08rem;
  letter-spacing:-0.025em; color:var(--zinnober-tief);
  margin:56px 0 20px;}
.sec-alt .offer{background:var(--papier); box-shadow:var(--schatten-hoch);}
.offer h3{font-size:2rem; margin:4px 0 20px;}
.offer p{max-width:58ch; margin-bottom:16px; color:var(--stein);}
.offer ul{list-style:none; margin:22px 0;}
.offer ul li{padding:7px 0 7px 26px; position:relative;}
.offer ul li::before{content:"→"; position:absolute; left:0; color:var(--zinnober);}
.preis{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:30px; padding-top:26px; border-top:1px solid var(--linie);}
.preis .zahl{font-family:var(--display); font-weight:700; font-size:1.7rem; letter-spacing:-0.04em;}
.preis .note{font-family:var(--mono); font-size:0.76rem; color:var(--nebel);}

/* Kein align-items:start: die Karten sollen sich auf gleiche Höhe
   strecken, damit die Buttons darunter auf einer Linie sitzen. */
.karten{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:960px){.karten{grid-template-columns:1fr;}}
.karte{background:var(--bogen); border-radius:var(--r); padding:44px 38px; display:flex; flex-direction:column; height:100%; box-shadow:var(--schatten); transition:box-shadow .2s ease, transform .2s ease;}
.karte:hover{box-shadow:var(--schatten-hoch); transform:translateY(-2px);}
.sec-alt .karte{background:var(--papier);}
.karten-zwei{grid-template-columns:1fr 1fr;}
@media (max-width:960px){.karten-zwei{grid-template-columns:1fr;}}
.karte h3{font-size:1.55rem; margin-bottom:6px;}
/* Die drei Angebote sind gleichrangig, also tragen sie auch gleich
   große Namen. Nur der Ort auf der Seite unterscheidet sie.
   Dazu mehr Innenraum: Ein Name in dieser Größe braucht Luft über und
   unter sich, sonst wirkt die Karte gedrängt statt wertig. */
#angebote .karte{padding:56px 44px;}
#angebote .karte h3{font-size:2rem; margin-bottom:14px;}
#angebote .karte .unter{margin-bottom:28px;}
/* Kurzformel unter dem Namen: trägt die Seite des Angebots, die der
   Name selbst nicht sagen kann. */
.karte .unter{font-family:var(--display); font-weight:600; font-size:1.08rem;
  letter-spacing:-0.025em; color:var(--zinnober-tief); margin-bottom:20px;}
.karte p{font-size:1rem; margin-bottom:14px; color:var(--stein);}
/* Die drei Tiefen in der Karte: Das fette Wort am Satzanfang macht sie
   scanbar, ohne dass es eine Liste braucht. */
.karte p b{color:var(--tinte); font-weight:600;}
.karte p:last-of-type{margin-bottom:26px;}
/* Eckdaten am Fuß einer Karte, in derselben Rolle wie die Zeile neben
   dem Preis der Standortbestimmung: Angabe, nicht Argument. */
/* margin-top:auto sitzt an der Zeile und nicht am Button: So wandert
   der ganze Fuß aus Linie, Angabe und Button gemeinsam nach unten und
   steht in beiden Karten auf gleicher Höhe. Läge es am Button, würde
   sich der Freiraum zwischen Zeile und Button auftun. */
.karte .eckdaten{font-family:var(--mono); font-size:0.76rem; line-height:1.6;
  color:var(--nebel); margin-top:auto; padding-top:20px;
  border-top:1px solid var(--linie); margin-bottom:24px;}
.karte .eckdaten + .btn{margin-top:0;}
/* auto schiebt den Button an den unteren Rand der gestreckten Karte */
.karte .btn{margin-top:auto; align-self:flex-start;}

/* Der Impulsvortrag ist kein Schritt im Weg, sondern eine eigene Tür.
   Deshalb steht er quer statt als dritte gleichrangige Karte.
   Einspaltig: Zweispaltig blieb links unter der Überschrift eine große
   leere Fläche, weil dort nur zwei Zeilen stehen. */
.quer{margin-top:56px; padding-top:44px; border-top:1px solid var(--linie);}
.quer-kopf{margin-bottom:20px;}
.quer h3{font-size:1.55rem;}
.quer-text p{font-size:1rem; margin-bottom:14px; color:var(--stein); max-width:56ch;}
.quer-text .btn{margin-top:16px;}

/* ---------------- STIMMEN ---------------- */
.stimmen-intro{font-family:var(--display); font-weight:600; letter-spacing:-0.035em; font-size:clamp(1.6rem,3.4vw,2.4rem); max-width:16em; margin-bottom:60px; line-height:1.1;}
.stimmen{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
/* Bei ungerader Anzahl läuft die letzte Stimme über beide Spalten,
   sonst bliebe unten rechts eine Lücke, die wie ein Fehler aussieht. */
.stimmen .stimme:last-child:nth-child(odd){grid-column:1 / -1;}
@media (max-width:860px){.stimmen{grid-template-columns:1fr;}}
.stimme{background:var(--bogen); border-radius:var(--r); padding:38px 36px; box-shadow:var(--schatten);}
.sec-alt .stimme{background:var(--papier);}
.stimme blockquote{font-size:1.1rem; line-height:1.5; margin-bottom:22px; letter-spacing:-0.015em;}
.stimme .wer{font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-0.02em;}
.stimme .rolle{font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--nebel); margin-top:4px;}
/* Nachsatz unter den Stimmen. Bewusst leiser als die Zitate darüber:
   Der Satz belegt sich selbst und muss nicht laut sein. */
.nachsatz{
  margin-top:56px; font-family:var(--display); font-weight:600;
  font-size:1.3rem; letter-spacing:-0.03em; color:var(--tinte);
}

/* Ergebniszeile: derzeit ungenutzt, aber vorgesehen. Die dritte Frage
   an die Kundinnen und Kunden zielt auf konkrete Veränderungen, und
   wenn dabei eine nachprüfbare Zahl herauskommt, gehört sie hierhin. */
.stimme .ergebnis{font-family:var(--mono); font-size:0.76rem; line-height:1.6; color:var(--zinnober-tief); margin-top:18px; padding-top:16px; border-top:1px solid var(--linie);}

/* ---------------- FAQ ---------------- */
.faq{max-width:80ch;}
.faq details{background:var(--bogen); border-radius:var(--r-s); margin-bottom:12px; overflow:hidden; box-shadow:var(--schatten);}
.sec-alt .faq details{background:var(--papier);}
.faq summary{cursor:pointer; list-style:none; padding:28px 56px 28px 30px; position:relative; font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:-0.03em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:26px; top:25px; font-size:1.4rem; color:var(--zinnober); font-weight:400;}
.faq details[open] summary::after{content:"–";}
.faq .antwort{padding:0 30px 32px; max-width:64ch;}
.faq .antwort p{margin-bottom:16px; color:var(--stein);}

/* ---------------- FINAL ---------------- */
.final{background:radial-gradient(85% 115% at 50% 0%, #1F2A37 0%, rgba(31,42,55,0) 58%), var(--tinte); color:var(--papier); padding:152px 0;}
.final h2{font-size:clamp(2.1rem,5.2vw,3.6rem); color:var(--bogen); max-width:15em;}
.final .sub{color:var(--zinnober-hell); font-size:1.2rem; font-weight:500; margin-top:18px; letter-spacing:-0.02em;}
.final .prose{margin:28px 0 40px;}
.final .prose p{color:rgba(239,238,234,0.8);}

/* ---------------- FOOTER ---------------- */
footer{background:linear-gradient(180deg, #121A25 0%, var(--tinte-tief) 100%);
  background-color:var(--tinte-tief); color:rgba(239,238,234,0.65); padding:64px 0 32px;}
.f-top{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid var(--linie-dunkel);}
.f-lockup svg{height:38px; width:auto; margin-bottom:22px;}
.f-lockup .tag{font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--papier); letter-spacing:-0.03em;}
.f-social{display:flex; gap:22px; align-self:flex-end; font-size:0.9rem;}
.f-social a:hover{color:var(--bogen);}
.f-bottom{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:22px; font-family:var(--mono); font-size:0.72rem; color:rgba(239,238,234,0.4);}

/* ---------------- BILDBAND ---------------- */
.bilder{background:var(--tinte); color:var(--papier); padding:120px 0;}
.bilder .kopf{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:44px;}
.bilder h2{font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--bogen); max-width:20ch;}
.bilder .kopf p{color:rgba(239,238,234,0.62); font-size:1rem; max-width:34ch;}
.bildgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:860px){.bildgrid{grid-template-columns:1fr; max-width:460px; margin:0 auto;}}
.bild figure{margin:0;}
.bild .rahmen{
  aspect-ratio:4/5; border-radius:var(--r); overflow:hidden;
  background:var(--tinte-band);
  box-shadow:var(--schatten-hoch);
}
.bild .rahmen img{width:100%; height:100%; object-fit:cover;}
.bild figcaption{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em;
  color:rgba(239,238,234,0.55); margin-top:16px;
}
@media (max-width:600px){.bilder{padding:80px 0;}}

/* ---------------- FEHLERSEITE ---------------- */
/* Dunkel wie der Hero, damit sie zur Marke gehört und sich von den
   Rechtsseiten unterscheidet. Bewusst kurz: eine Zeile Erklärung und
   zwei Wege weiter, mehr braucht niemand, der hier landet. */
.fehlerseite{background:var(--tinte); color:var(--papier);
  min-height:64vh; display:flex; flex-direction:column; justify-content:center;
  padding:120px 0 140px;}
.fehlerseite .wrap{position:relative; z-index:2; width:100%;}
.fehlerseite h1{font-size:clamp(2rem,5vw,3.4rem); color:var(--bogen); max-width:18em; margin-bottom:26px;}
.fehlerseite p{font-size:1.125rem; color:rgba(239,238,234,0.78); max-width:44em;}
.fehlerseite .wege{margin-top:36px; font-family:var(--mono); font-size:0.8rem;
  letter-spacing:0.04em; color:rgba(239,238,234,0.55);}
.fehlerseite .wege a{text-decoration:underline; text-underline-offset:4px;}
.fehlerseite .wege a:hover{color:var(--bogen);}

/* ---------------- RECHTSSEITEN ---------------- */
/* Impressum und Datenschutz. Reine Lesetexte, deshalb ohne die
   Signaturelemente der Startseite. */
.rechtsseite{background:var(--papier); color:var(--tinte); padding:112px 0 140px; min-height:62vh;}
.rechtsseite h1{font-size:clamp(2rem,4.4vw,3rem); margin-bottom:12px;}
.rechtsseite .stand{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--nebel); margin-bottom:56px;}
.rechtstext{max-width:70ch;}
.rechtstext h2{font-size:1.35rem; margin:48px 0 14px;}
.rechtstext h3{font-size:1.05rem; margin:28px 0 10px;}
.rechtstext p{margin-bottom:14px; color:var(--stein);}
.rechtstext ul{margin:0 0 18px 20px;}
.rechtstext li{margin-bottom:7px; color:var(--stein);}
.rechtstext a{text-decoration:underline; text-underline-offset:3px;}
/* Kurzfassung am Anfang der Datenschutzerklärung. Sie nimmt die Haltung
   vorweg, die für alle Punkte darunter gilt, damit niemand sie sich
   aus zwölf Abschnitten zusammensuchen muss. Zinnober nur als Kante,
   nicht als Fläche: Der Kasten soll ruhig bleiben. */
.kurzfassung{
  background:var(--bogen); border-left:3px solid var(--zinnober);
  border-radius:0 var(--r-s) var(--r-s) 0;
  padding:30px 34px; margin:36px 0 8px;
}
.kurzfassung h2{font-size:1.3rem; margin:0 0 14px;}
.kurzfassung p{color:var(--stein); margin-bottom:12px;}
.kurzfassung p:last-child{margin-bottom:0;}

.rechtstext dl{margin-bottom:18px;}
.rechtstext dt{font-weight:600; color:var(--tinte); margin-top:12px;}
.rechtstext dd{color:var(--stein); margin-left:0;}

/* ---------------- KORN + VERLAEUFE ---------------- */
.korn{position:relative;}
.korn::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Hebt den Inhalt über die Rauschebene. Achtung: Diese Regel schlägt
   jedes absolut positionierte Kind einer .korn-Fläche zurück in den
   Fluss, sofern es nicht spezifischer adressiert wird. */
.korn > *{position:relative; z-index:2;}

/* ---------------- MOTION ---------------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.reveal.an{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}}
:focus-visible{outline:2px solid var(--zinnober); outline-offset:3px;}

/* Ohne JavaScript bleibt nichts unsichtbar */
.kein-js .reveal{opacity:1; transform:none;}

@media (max-width:600px){
  .sec{padding:88px 0;}
  .karte{padding:34px 28px;}
  .stimme{padding:30px 26px;}
  .hero{padding:120px 0 84px; min-height:68vh;}
  .offer{padding:34px 26px;}
}