/* ERZEUGT von scripts/homepage-nach-wordpress.py. Nicht von Hand aendern,
   Quelle ist entwuerfe/homepage-2026-09/entwurf-b-dunkle-buehne.html.
   Geladen nur auf der Startseite, siehe functions.php. */
:root{
    --primary-dark:#0d1b2a;
    --primary-darker:#080f1e;
    --navy-top:#12263a;
    --gold:#C9A84C;
    --gold-soft:#E2C97A;
    --accent-blue:#046BD2;
    --bg-soft:#F9FAFB;
    --bg-mid:#ECEFF3;
    --text-mid:#475569;
    --text-dark:#111827;
    --text-on-dark:#dce6f1;
    --gold-text:#7a611c;
    --text-muted-on-dark:#9fb0c3;
    --white:#FFFFFF;
    --hairline-gold:rgba(201,168,76,0.28);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
    color:var(--text-dark);background:var(--bg-soft);line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
  h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.01em;}
  h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.14;color:var(--primary-dark);}
  .rubrik{display:inline-block;font-family:"Segoe UI",system-ui,sans-serif;color:var(--text-mid);
    font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;}
  .cta{display:inline-block;background:var(--accent-blue);color:var(--white);text-decoration:none;
    font-weight:600;font-size:1.03rem;padding:15px 32px;border-radius:10px;
    transition:transform .15s ease, box-shadow .15s ease;box-shadow:0 10px 26px rgba(4,107,210,.3);}
  .cta:hover{transform:translateY(-2px);}
  .cta-hell{background:var(--gold);color:var(--primary-darker);box-shadow:0 10px 26px rgba(201,168,76,.28);}
  .aktion{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}

  /* Goldene Trennkante zwischen den Buehnen */
  .kante{height:6px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold-soft) 50%,var(--gold) 100%);}

  /* ---------- Navigation ---------- */
  .nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
    justify-content:space-between;padding:18px 28px;transition:background .3s ease;}
  .nav.fest{background:rgba(13,27,42,.94);backdrop-filter:blur(12px);}
  /* Die drehende Weltkugel ist auf kreditreich.de KEINE Bilddatei, sondern ein
     per JavaScript gezeichnetes <canvas> (kreditreich-branding/snippets/branding-logo.php).
     Klassenname und Masse sind von dort uebernommen, damit das Skript des Plugins
     sie in WordPress ohne Zutun mitzeichnet: es sammelt alle .globe-canvas-nav. */
  .marke{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;
    font-weight:700;font-size:1.2rem;color:var(--white);text-decoration:none;}
  /* Nur das innere span ist gold. Ohne diese Genauigkeit faerbte die Regel auch
     die neue Texthuelle .marke-text und damit das Wort "Kredit" mit ein. */
  .marke-text{color:var(--white);}
  .marke-text span{color:var(--gold);}
  .globe-canvas-nav{display:block;flex-shrink:0;width:44px;height:44px;}
  @media(max-width:560px){.globe-canvas-nav{width:36px;height:36px;}}
  .nav-links{display:flex;gap:28px;align-items:center;}
  .nav-links a{text-decoration:none;color:var(--text-on-dark);font-size:.95rem;font-weight:500;}
  .nav-links a:hover{color:var(--gold-soft);}
  .nav-links a.nav-cta{background:var(--gold);color:var(--primary-darker);padding:10px 20px;border-radius:9px;font-weight:700;}
  @media(max-width:860px){.nav-links a:not(.nav-cta){display:none;}}
  /* In WordPress schiebt die Werkzeugleiste fuer angemeldete Redakteure die
     ganze Seite nach unten, unsere feste Navigation aber nicht: sie klebte bei
     top:0 und verschwand zur Haelfte darunter (gemessen 07.09.2026 auf der
     Vorschauseite, Leiste 32 px hoch). Die Klasse admin-bar setzt WordPress,
     im Entwurf gibt es sie nicht, dort ist die Regel wirkungslos. Unter 782 px
     ist die Leiste 46 px hoch, das ist die Schwelle von WordPress. */
  body.admin-bar .nav{top:32px;}
  @media screen and (max-width:782px){ body.admin-bar .nav{top:46px;} }
  /* Die Navigation laeuft fest mit und ist auf jeder gemessenen Breite 80 px hoch
     (359, 390 und 1280 px, gemessen am 07.09.2026). Ohne Vorhaltemass landet eine
     Sprungmarke exakt am Sektionsanfang und die Ueberschrift verschwindet darunter.
     80 px Navigationshoehe plus 16 px Luft. Wer die Navigation umbaut, misst
     nav.offsetHeight neu und zieht diesen Wert nach. */
  :root{--nav-hoehe:80px;}
  section[id],header[id]{scroll-margin-top:calc(var(--nav-hoehe) + 16px);}
  /* Ausnahme Wechsel-Buehne: sie klebt ueber die volle Schirmhoehe und zentriert
     ihren Inhalt selbst, unter der Navigation verschwindet dort nichts. Ein
     Vorhaltemass schoebe stattdessen einen 96 px hohen Streifen der hellen
     Sektion davor ins Bild, bevor die Buehne klebt. */
  .wechsel[id]{scroll-margin-top:0;}

  /* ---------- Bildbuehne, Technik aus entwurf-fotohintergrund-v1 ---------- */
  /* 38 px weniger als die Schirmhoehe: In WordPress klebt unten eine feste Leiste mit den
     Pflichtverweisen (kreditreich-branding/snippets/compliance-footer.php, 38 px, auf jeder
     Seite). Bei voller Schirmhoehe deckte sie den unteren Teil des Kennzahlenbands ab
     (gemessen 10.09.2026 auf der Vorschauseite). Im Entwurf fehlt die Leiste, dort ist die
     Buehne dann 38 px kuerzer als der Schirm, das ist gewollt: der Entwurf zeigt das Ziel. */
  .bildbuehne{position:relative;min-height:calc(100vh - 38px);min-height:calc(100dvh - 38px);overflow:hidden;
    display:flex;align-items:center;color:var(--white);}
  .motivfeld{position:absolute;inset:0;}
  .motivfeld img{width:100%;height:100%;object-fit:cover;display:block;
    filter:brightness(1.16) saturate(1.04) contrast(1.02);}
  /* Das Buehnenfoto ist Hochformat (1440 x 2560). Je flacher der Bildschirm, desto
     staerker beschneidet `cover` oben und unten, und desto weiter muss der Ausschnitt
     nach unten wandern, damit das Haus im Bild bleibt. Auf einem 2827 px breiten
     Fenster waren bei 40 Prozent nur noch 28 Prozent der Bildhoehe sichtbar, Zeile 736
     bis 1456 von 2560, und das ist Himmel: die Buehne zeigte gar kein Motiv mehr
     (Betreiber-Befund 07.09.2026, an seinem Monitor gemessen).
     Die Schwelle haengt am Seitenverhaeltnis, nicht an der Breite, deshalb steht sie
     hier als aspect-ratio. Ab 16:9 zeigt 68 Prozent Haus und Vorgarten, 82 Prozent
     waeren schon nur noch Rasen. */
  @media (min-aspect-ratio: 16/9){
    .motivfeld img{object-position:60% 68% !important;}
  }
  /* Der Verlauf ist keine Stimmung, sondern der Lesegrund des Buehnentextes.
     Gemessen am 07.09.2026 gegen den hellsten Bildpunkt unter der jeweiligen
     Textflaeche (WCAG-Kontrastverhaeltnis, Text ausgeblendet, damit er die
     Messung nicht faelscht). Wer die Werte aendert, misst nach. */
  .tiefe{position:absolute;inset:0;
    background:linear-gradient(105deg,rgba(8,15,30,.90) 0%,rgba(8,15,30,.80) 46%,rgba(8,15,30,.42) 100%);}
  /* Auf schmalen Schirmen laeuft der Text ueber die ganze Breite, ein schraeger
     Verlauf laesst ihn dort auf dem hellen Ende liegen. Deshalb senkrecht. */
  @media(max-width:860px){
    .tiefe{background:linear-gradient(180deg,rgba(8,15,30,.82) 0%,rgba(8,15,30,.76) 60%,rgba(8,15,30,.60) 100%);}
  }
  /* Nur oben und unten, nicht die Kurzform: die nahm dem .wrap seinen Seitenrand von
     28 px, und auf dem Handy klebte der Buehnentext am linken Rand (Live-Messung 10.09.2026). */
  .bildbuehne .inhalt{position:relative;z-index:3;padding-top:150px;padding-bottom:90px;}
  .bildbuehne h1{font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1.08;color:var(--white);max-width:14em;}
  .bildbuehne h1 em{font-style:normal;color:var(--gold-soft);}
  .bildbuehne .lead{margin-top:24px;font-size:clamp(1.02rem,1.5vw,1.25rem);
    color:var(--text-on-dark);max-width:30em;}
  .bildbuehne .rubrik{color:var(--gold-soft);}

  /* Milchglasband mit Kennzahlen */
  .band{position:absolute;left:0;right:0;bottom:0;z-index:4;
    -webkit-backdrop-filter:blur(22px) saturate(1.05) brightness(.72);
    backdrop-filter:blur(22px) saturate(1.05) brightness(.72);
    border-top:1px solid var(--hairline-gold);padding:22px 0;}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .band{background:rgba(8,15,30,.66);}
  }
  .band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:center;}
  .band b{display:block;font-family:Georgia,serif;font-size:clamp(1.2rem,2.2vw,1.8rem);color:var(--gold-soft);}
  .band span{font-size:.84rem;color:var(--text-on-dark);}
  /* Auf Handybreite traegt das dreispaltige Raster nicht. Die Spalten koennen unter
     ihre min-content-Breite nicht schrumpfen: gemessen am 07.09.2026 summieren sie
     auf feste 359 px, waehrend bei 359 px Viewport nur 303 px Inhaltsbreite da sind.
     Die dritte Spalte ragte deshalb 28 px ueber den rechten Rand. Einspaltig
     untereinander, Zahl und Erklaerung nebeneinander, damit das Band nicht
     unnoetig hoch wird und die Buehne darueber Platz behaelt. */
  @media(max-width:560px){
    .band{padding:16px 0;}
    .band-grid{grid-template-columns:1fr;gap:10px;text-align:left;}
    .band-grid>div{display:flex;align-items:baseline;gap:10px;}
    .band b{display:inline;flex:0 0 auto;font-size:1.15rem;}
    .band span{font-size:.8rem;line-height:1.35;}
  }

  /* ---------- Helle Erklaerstrecke ---------- */
  .hell{background:var(--bg-soft);padding:clamp(70px,10vh,120px) 0;}
  .hell.mitte{background:var(--white);}
  .drei{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;}
  .schritt{padding-top:20px;border-top:2px solid var(--gold);}
  .schritt b{font-family:Georgia,serif;font-size:1.15rem;color:var(--primary-dark);display:block;}
  .schritt p{margin-top:8px;color:var(--text-mid);font-size:.98rem;}
  @media(max-width:860px){.drei{grid-template-columns:1fr;}}

  /* ---------- Wechsel-Buehne, dunkel ---------- */
  /* Behaelterhoehe = 100vh klebende Buehne + 3 Blaetterabstaende + Nachlauf.
     Der Blaetterabstand steht als --blaettern hier und wird vom Skript ausgelesen,
     damit CSS und Rechnung nicht auseinanderlaufen koennen. */
  .wechsel{position:relative;--blaettern:12vh;height:154vh;background:var(--primary-dark);}
  .wechsel-fix{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center;}
  .wechsel-bild{position:absolute;inset:0;}
  .wechsel-bild figure{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;}
  .wechsel-bild figure.ist-aktiv{opacity:1;}
  .wechsel-bild img{width:100%;height:100%;object-fit:cover;display:block;
    filter:brightness(1.16) saturate(1.04) contrast(1.02);}
  .wechsel-tiefe{position:absolute;inset:0;z-index:2;
    background:linear-gradient(100deg,rgba(8,15,30,.88) 0%,rgba(8,15,30,.62) 48%,rgba(8,15,30,.16) 100%);}
  .wechsel-inhalt{position:relative;z-index:3;color:var(--white);width:100%;}
  .wechsel-kopf{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
  .wechsel-zaehler{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);}
  .punkte{display:flex;gap:9px;}
  .punkt{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--text-on-dark);
    background:transparent;cursor:pointer;padding:0;transition:background-color .3s ease, border-color .3s ease, transform .2s ease;}
  .punkt:hover{transform:scale(1.2);}
  .punkt.ist-aktiv{background:var(--gold);border-color:var(--gold);}
  .wechsel-slot{position:relative;min-height:280px;max-width:34em;}
  .vorhaben{position:absolute;inset:0;opacity:0;clip-path:inset(0 0 100% 0);
    transition:opacity .6s ease, clip-path .7s ease;pointer-events:none;}
  .vorhaben.ist-aktiv{opacity:1;clip-path:inset(0 0 0 0);pointer-events:auto;}
  .vorhaben h2{color:var(--white);font-size:clamp(1.9rem,3.6vw,3rem);}
  .vorhaben p{margin-top:14px;color:var(--text-on-dark);font-size:1.05rem;}
  .produkt-marke{display:inline-block;margin-top:22px;font-family:"Segoe UI",sans-serif;
    font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);
    padding:7px 14px;border:1px solid var(--gold);border-radius:999px;background:rgba(13,27,42,.55);}
  .weiter{display:block;margin-top:22px;text-decoration:none;color:var(--gold-soft);font-weight:600;}
  .weiter:hover{text-decoration:underline;}

  /* ---------- Produktkarten hell ---------- */
  .karten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;}
  .karte{background:var(--white);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
    box-shadow:0 1px 3px rgba(13,27,42,.07), 0 12px 34px rgba(13,27,42,.06);}
  .karte img{width:100%;height:190px;object-fit:cover;display:block;
    filter:brightness(1.08) saturate(1.03);}

  /* Bildflaeche mit Rundgang: aus dem harten Schnitt wird ein Hineinfliegen.
     Beim Zeigen faehrt zuerst das Aussenbild heran, der Innenflug blendet
     verzoegert darueber auf und setzt die Bewegung fort, statt sie neu anzusetzen.
     Beim Verlassen laeuft beides ohne Verzoegerung zurueck. */
  .karte-bild{position:relative;overflow:hidden;line-height:0;}
  .karte-bild img{transform-origin:50% 58%;
    transition:transform 1.1s cubic-bezier(.33,.68,.4,1);}
  .karte-bild.laeuft img{transform:scale(1.34);
    transition:transform 1.9s cubic-bezier(.22,.61,.36,1);}
  /* Der Innenflug laeuft ueber die eigenstaendige Eigenschaft `scale`, NICHT ueber
     `transform: scale()`. Das ist kein Geschmack, sondern eine gemessene Notwendigkeit
     (07.09.2026): Mit `transform` blieb das Video nach der Ueberblendung visuell auf der
     Position seiner Ausgangsskalierung stehen, 11,33 px zu hoch, und gab unten einen
     Streifen des Standbildes frei. Layout und Endwert waren dabei korrekt (offsetTop 0,
     Matrix = Identitaet), nur die Darstellung nicht, und `getBoundingClientRect` meldete
     die falsche Lage mit. Wirkungslos blieben `will-change` samt `backface-visibility`,
     eine Uebergroesse des Videos und das Auslagern der Bewegung auf eine Huelle. Mit
     `scale` messen sich Versatz und Luecke zu 0,00 px. Wer hier auf `transform`
     zurueckbaut, holt den Streifen zurueck. Aeltere Browser ohne `scale` zeigen den
     Innenflug nicht, das Einblenden bleibt. */
  .karte-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    opacity:0;scale:1.12;filter:brightness(1.08) saturate(1.03);
    transition:opacity .5s ease, scale .5s ease;}
  /* Die Ausblendzeit oben bleibt bei 500 ms, der Ruecksprung im Skript rechnet damit.
     Verzoegert ist nur das Einblenden, das gehoert zur Anfahrt. */
  .karte-bild.laeuft video{opacity:1;scale:1;
    transition:opacity .85s ease .5s, scale 1.9s cubic-bezier(.22,.61,.36,1) .5s;}
  .rundgang-marke, .bild-hinweis{position:absolute;bottom:12px;z-index:2;
    font-family:"Segoe UI",sans-serif;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--white);background:rgba(8,15,30,.72);
    border-radius:999px;line-height:1;}
  .rundgang-marke{left:12px;font-size:.72rem;padding:6px 13px;
    border:1px solid var(--hairline-gold);transition:opacity .3s ease;display:none;}
  /* Die Einladung erscheint nur, wenn das Skript das Bewegtbild tatsaechlich gebunden hat */
  .rundgang-an .rundgang-marke{display:block;}
  .karte-bild.laeuft .rundgang-marke{opacity:0;}
  /* Der Hinweis bleibt stehen, auch waehrend das Bewegtbild laeuft. Er ordnet die
     Aufnahme als Symbolbild ein und darf deshalb nie ausgeblendet werden. */
  .bild-hinweis{right:12px;top:12px;bottom:auto;font-size:.68rem;padding:6px 12px;letter-spacing:.08em;
    background:rgba(8,15,30,.85);}
  /* Auf der Privatkredit-Karte traegt das Bild selbst Text in allen vier Ecken. Unten links
     liegt nur die Kamera, dort verdeckt die Marke nichts (oben rechts lag sie ueber
     "Flexible Laufzeiten", gesehen am 10.09.2026). */
  .bild-hinweis.unten-links{right:auto;left:12px;top:auto;bottom:12px;}
  .karte-text{padding:24px;display:flex;flex-direction:column;flex:1;}
  .karte h3{font-size:1.25rem;color:var(--primary-dark);}
  .karte .zweck{color:var(--text-mid);margin-top:6px;font-size:.95rem;}
  .karte ul{list-style:none;margin-top:16px;flex:1;}
  .karte li{padding:8px 0;border-top:1px solid #E5E7EB;font-size:.94rem;}
  .karte .cta{margin-top:20px;text-align:center;}
  @media(max-width:900px){.karten{grid-template-columns:1fr;}}

  /* ---------- Berater dunkel ---------- */
  .berater{position:relative;background:linear-gradient(160deg,var(--navy-top) 0%,var(--primary-darker) 100%);
    color:var(--text-on-dark);padding:clamp(70px,10vh,120px) 0;}
  .berater .rubrik{color:var(--gold-soft);}
  .berater h2{color:var(--white);}
  .berater-grid{display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(30px,5vw,70px);align-items:center;}
  .berater img{width:100%;max-width:300px;border-radius:16px;display:block;border:1px solid var(--hairline-gold);}
  .zitat{margin-top:20px;font-family:Georgia,serif;font-size:1.25rem;line-height:1.5;color:var(--white);max-width:27em;}
  .zitat-quelle{margin-top:16px;color:var(--gold-soft);font-weight:600;}
  .zitat-rolle{color:var(--text-muted-on-dark);font-size:.93rem;}
  @media(max-width:820px){.berater-grid{grid-template-columns:1fr;}}

  /* ---------- Zinsentwicklung ---------- */
  /* Der Chart selbst bringt sein CSS mit (zinschart.php). Hier steht nur, was der
     Abschnitt drumherum braucht, plus die Nachbildung fuer den Entwurf. Wer die
     Nachbildung anfasst, aendert nichts am echten Chart und umgekehrt. */
  .zins-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center;}
  /* Rasterfelder haben von Haus aus `min-width:auto` und schrumpfen deshalb nicht
     unter ihren Inhalt. Der Zinschart misst beim ersten Zeichnen die Breite seines
     Behaelters und friert sie in die Zeichenflaeche ein, danach draengt er das Feld
     auseinander: bei 320 px Schirmbreite wurde die Karte 346 px breit und die Seite
     lief 374 px waagerecht ueber (gemessen 07.09.2026). `min-width:0` loest die
     Sperre, `max-width:100%` haelt die Zeichenflaeche zusaetzlich im Rahmen. Auf der
     laufenden Startseite faellt das nicht auf, weil der Chart dort unter 1100 px
     ausgeblendet ist. Dieselbe Wurzel wie beim Kennzahlenband der Buehne. */
  .zins-grid>*{min-width:0;}
  .kr-zc-flaeche canvas{max-width:100%;}
  .zins-text{margin-top:16px;color:var(--text-mid);font-size:1.02rem;}
  .weiter-dunkel{display:inline-block;margin-top:22px;text-decoration:none;color:var(--gold-text);font-weight:600;}
  .weiter-dunkel:hover{text-decoration:underline;}
  @media(max-width:860px){.zins-grid{grid-template-columns:1fr;}}
  /* Unter 1100 px verschwindet der ganze Abschnitt, Ueberschrift und Text mit.
     Betreiber-Entscheidung vom 07.09.2026, nach Vorlage von drei Wegen.
     Grund: Der echte Zinschart ist auf kreditreich.de genau unter dieser Breite
     ausgeblendet (kreditreich-branding/snippets/layout-overrides.php, Zeile 59).
     Bliebe hier nur der Chart weg, stuenden auf dem Handy eine Ueberschrift und
     ein Absatz ueber einer leeren Flaeche, und das sieht nach einem kaputten
     Baustein aus. So fehlt nichts halb, sondern sauber.
     Die Kante davor geht mit, sonst stossen zwei goldene Linien aufeinander.
     Wer den Chart eines Tages doch auf dem Handy zeigen will, aendert zuerst
     zinschart.php (der Kopf braucht dort ein flex-wrap) und loescht dann diesen
     Block. Beides gehoert zusammen. */
  @media(max-width:1100px){
    #zinsen, .kante-zinsen{display:none;}
  }
  /* Nachbildung des Charts: gleiche Klassen, gleiche Masse, ohne Daten. Die Werte
     stammen aus zinschart.php (Zeilen 445 bis 451, gelesen am 07.09.2026). */
  .kr-zc-platzhalter{background:linear-gradient(135deg,#0d1b2a 0%,#080f1e 100%);
    border:1px solid rgba(201,168,76,.28);border-radius:12px;padding:20px 22px;
    box-shadow:0 4px 24px rgba(0,0,0,.4);}
  /* Der Kopf muss umbrechen duerfen. Ohne `flex-wrap` fordern Titel und die beiden
     Umschalter zusammen 317 px, bei 320 px Schirmbreite stehen aber nur 264 zur
     Verfuegung, und die Seite lief waagerecht ueber (gemessen 07.09.2026, 347 statt 320).
     Der echte Chart hat denselben starren Kopf, faellt heute aber nicht auf, weil er
     unter 1100 px ausgeblendet ist. Siehe offener Punkt in Abschnitt 4. */
  .kr-zc-kopf{display:flex;justify-content:space-between;align-items:flex-start;
    margin-bottom:10px;gap:8px;flex-wrap:wrap;}
  .kr-zc-platzhalter .kr-zc-title{font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.1em;
    margin-bottom:3px;text-transform:uppercase;font-family:"Segoe UI",system-ui,sans-serif;}
  .kr-zc-platzhalter .kr-zc-sub{font-size:11px;color:rgba(255,255,255,.42);}
  .kr-zc-tabs{display:flex;gap:6px;}
  .kr-zc-platzhalter .kr-ztab{background:transparent;border:1px solid rgba(201,168,76,.3);
    color:rgba(255,255,255,.42);border-radius:5px;padding:3px 9px;font-size:11px;line-height:1.4;
    font-family:inherit;cursor:default;}
  .kr-zc-platzhalter .kr-ztab.active{background:rgba(201,168,76,.14);color:var(--gold);border-color:rgba(201,168,76,.7);}
  /* 180 px ist die Hoehe des echten Zeichenbereichs, nicht geschaetzt sondern uebernommen */
  .kr-zc-flaeche{position:relative;height:180px;}
  .kr-zc-platzhalter .kr-zc-footnote{margin-top:10px;font-size:9.5px;color:rgba(255,255,255,.32);
    line-height:1.5;border-top:1px solid rgba(255,255,255,.07);padding-top:8px;}

  /* ---------- Kontakt hell ---------- */
  .kontakt{background:var(--white);padding:clamp(70px,10vh,120px) 0;}
  .kontakt .inhalt{max-width:42em;}
  .datenschutz{margin-top:24px;font-size:.91rem;color:var(--text-mid);}
  .kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;}
  .kontakt-lead{margin-top:16px;color:var(--text-mid);font-size:1.05rem;}
  .kontakt-wege{margin-top:26px;display:grid;gap:14px;}
  .kontakt-wege dt{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mid);}
  .kontakt-wege dd{margin-top:2px;font-size:1.02rem;color:var(--text-dark);}
  .kontakt-wege a{color:var(--gold-text);text-decoration:none;font-weight:600;}
  .kontakt-wege a:hover{text-decoration:underline;}
  /* Das Formular ist im Entwurf nicht absendbar, siehe Kommentar am Abschnitt.
     In WordPress steht an seiner Stelle das CF7-Formular 14. Dessen Inhalt (Felder,
     Labels, Klassen .feld und .feld-reihe) liegt in der Datenbank und ist am
     10.09.2026 auf diese Gestaltung gebracht worden (docs/cf7-formular-vorlage.md).
     Die Regeln unten gelten deshalb fuer beide: die Nachbildung hier und
     .wpcf7-form live. */
  .kontakt .wpcf7-form p{margin:0;}
  .kontakt .wpcf7-form-control-wrap{display:block;}
  .kontakt .wpcf7-not-valid-tip{font-size:.82rem;color:#b42318;margin-top:4px;}
  .kontakt .wpcf7-response-output{margin:0;padding:12px 14px;border-radius:9px;font-size:.92rem;
    border:1px solid #D7DDE5;}
  .kontakt .wpcf7-form.sent .wpcf7-response-output{border-color:#15803d;color:#15803d;}
  .kontakt .wpcf7-form.invalid .wpcf7-response-output,.kontakt .wpcf7-form.failed .wpcf7-response-output{
    border-color:#b42318;color:#b42318;}
  .kontakt .wpcf7-spinner{display:none;}
  .kontakt-formular,.kontakt .wpcf7-form{background:var(--bg-soft);border:1px solid #E5E7EB;border-radius:16px;
    padding:clamp(22px,3vw,32px);display:grid;gap:16px;}
  .feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .feld{display:grid;gap:6px;}
  .feld label{font-size:.82rem;font-weight:600;color:var(--text-mid);}
  .feld input,.feld textarea{font-family:inherit;font-size:1rem;color:var(--text-dark);
    background:var(--white);border:1px solid #D7DDE5;border-radius:9px;padding:12px 14px;width:100%;
    transition:border-color .15s ease, box-shadow .15s ease;}
  .feld textarea{resize:vertical;min-height:120px;}
  .feld input:focus,.feld textarea:focus{outline:none;border-color:var(--accent-blue);
    box-shadow:0 0 0 3px rgba(4,107,210,.16);}
  .feld input::placeholder,.feld textarea::placeholder{color:#9AA5B4;}
  .formular-senden{border:0;cursor:pointer;font-family:inherit;width:100%;}
  .kontakt .wpcf7-submit{box-shadow:0 10px 26px rgba(4,107,210,.3);}
  .formular-hinweis{font-size:.84rem;color:var(--text-mid);text-align:center;}
  @media(max-width:860px){.kontakt-grid{grid-template-columns:1fr;}}
  @media(max-width:560px){.feld-reihe{grid-template-columns:1fr;}}

  .bewegung .einfahrt{opacity:0;transform:translateY(24px);}
  .einfahrt{transition:opacity .7s ease, transform .7s ease;}
  .einfahrt.sichtbar{opacity:1;transform:none;}

  /* Nur bei ausdruecklich gewuenschter Bewegungsruhe: alles Laufende stillstellen. */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
    .bewegung .einfahrt{opacity:1;transform:none;}
  }

  /* Die Wechsel-Buehne wird zum Bilderraster: bei Bewegungsruhe UND auf schmalen
     Schirmen. Das Komma ist ein Oder. Auf dem Handy taugt eine klebende Buehne nicht,
     die Scrollstrecke waere dort am laengsten und die Bildflaeche am kleinsten.
     Der Rechner-Teil im Skript stoert hier nicht: .wechsel ist dann height:auto,
     die Rechnung landet auf Karte 1 und aendert an der Darstellung nichts. */
  @media (prefers-reduced-motion: reduce), (max-width:860px){
    .wechsel{height:auto;}
    .wechsel-fix{position:static;height:auto;padding:70px 0;flex-direction:column;}
    .wechsel-bild{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 28px 28px;}
    .wechsel-bild figure{position:static;opacity:1;}
    .wechsel-bild img{height:220px;border-radius:12px;filter:saturate(1.04);}
    .wechsel-tiefe{display:none;}
    .wechsel-slot{position:static;min-height:0;display:grid;gap:40px;max-width:none;}
    .vorhaben{position:static;opacity:1;clip-path:none;pointer-events:auto;}
    .punkte,.wechsel-zaehler{display:none;}
    .karte-bild video{display:none;}
  }

  /* Auf Handybreite steht das Raster einspaltig, zwei Spalten sind dort zu klein. */
  @media(max-width:560px){
    .wechsel-bild{grid-template-columns:1fr;}
    .wechsel-bild img{height:200px;}
  }

  /* ---------- Nur in WordPress wirksam: Vorrang vor den Seitenregeln ----------
     kreditreich-branding/snippets/design-tokens.php faerbt jeden Verweis innerhalb
     .entry-content goldbraun (#7a611c, Kontrastregel fuer Gold auf weissem Grund,
     Selektor `body .entry-content a:not(...)x4`, Spezifitaet 0,5,2), und Astra
     unterstreicht ihn. Gemessen am 10.09.2026 auf der Vorschauseite: Schaltflaechen
     mit goldbrauner Schrift auf Blau, Navigation unterstrichen. Auf dieser Seite
     liegen die betroffenen Verweise auf Navy oder in Schaltflaechen, die Kontrastregel
     trifft hier keinen einzigen Fall (die beiden Verweise auf hellem Grund,
     .weiter-dunkel und .kontakt-wege a, tragen dieselbe Farbe ohnehin). Keine
     Klassenkette erreicht 0,5,2 lesbar, deshalb !important, und zwar nur hier.
     Im Entwurf selbst sind diese Regeln wirkungslos, die Farben stehen oben. */
  .cta,.cta:hover{color:var(--white) !important;text-decoration:none !important;}
  .cta-hell,.cta-hell:hover,.nav-links a.nav-cta,.nav-links a.nav-cta:hover{color:var(--primary-darker) !important;text-decoration:none !important;}
  .nav-links a:not(.nav-cta){color:var(--text-on-dark) !important;text-decoration:none !important;}
  .nav-links a:not(.nav-cta):hover{color:var(--gold-soft) !important;}
  .marke,.marke:hover,.marke-text{color:var(--white) !important;text-decoration:none !important;}
  .weiter{color:var(--gold-soft) !important;text-decoration:none !important;}
  .weiter:hover{text-decoration:underline !important;}
  .weiter-dunkel,.kontakt-wege a{text-decoration:none !important;}
  .weiter-dunkel:hover,.kontakt-wege a:hover{text-decoration:underline !important;}

  /* HP-SUBMIT-GOLD-1 (12.09.2026): style.css:141 faerbt input[type=submit] mit !important gold und
     trifft den CF7-Sendeknopf der Startseite (Klassen cta formular-senden). Der Entwurf sieht ihn
     mittelblau vor, Spezifitaet (0,2,0) schlaegt (0,1,1) bei gleichem !important. */
  .kontakt .wpcf7-submit,.kontakt .wpcf7-submit:hover{background:var(--accent-blue) !important;
    color:var(--white) !important;box-shadow:0 10px 26px rgba(4,107,210,.3) !important;}