/* ==========================================================================
   Helle Fassung (16.10.2026). Wird nach site.css und v3.css geladen,
   beide bleiben unangetastet. Rueckbau: die eine <link>-Zeile entfernen.

   Vorbild ist der Abschnitt "Warum CM Autoglas" (.section--paper): Papierton,
   dunkle Schrift, --amber-ink fuer orange Schrift, --line-ink fuer Linien.
   Prinzip: die Text- und Linien-Tokens werden global auf die Papier-Werte
   gesetzt; Flaechen, die in site.css fest dunkel sind, werden einzeln
   umgestellt. Wenige dunkle Inseln (Lightbox, Pfeile auf dem Modal-Overlay)
   bekommen die dunklen Tokens lokal zurueck.

   Kontraste gerechnet (WCAG):
   #3e4a54 auf #f4f1ec 8,06:1 . auf #e8e3da 7,11:1 (vorher dunkel 8,2:1)
   #8f3d0a auf #f4f1ec 6,56:1 . auf #e8e3da 5,79:1
   #b85410 (grosse Schrift) 4,32:1 . #d9661a (Sterne, Grafik) 3,18:1
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root{
  --fg:        #0a1219;            /* = --fg-ink */
  /* Nebentext: auf Dunkel hatte er 8,2:1. #55636e kam auf Papier nur auf 5,5:1,
     #3e4a54 erreicht 8,1:1 (auf --paper-2 7,1:1) . gleicher Grauton, kraeftiger */
  --fg-ink-dim:#3e4a54;
  --fg-dim:    #3e4a54;
  --amber-ink: #8f3d0a;            /* 6,6:1 auf Papier, 5,8:1 auf --paper-2 */
  --line:      rgba(10,18,25,.14); /* = --line-ink */
  --line-2:    rgba(10,18,25,.24);
  --amber-lg:  #b85410;            /* Orange fuer grosse Schrift auf Papier */
  --amber-gfx: #d9661a;            /* Orange fuer Sterne/Grafik auf Papier */
  --refract-ink: linear-gradient(100deg, #1b6f99 0%, #2f5f9e 24%, #5b45c9 48%, #a8480c 74%, #b85410 100%);
}

/* Dunkle Inseln: hier gelten die urspruenglichen hellen Schrift-Tokens */
.lightbox,
.sl-modal__prev,.sl-modal__next{
  --fg:#eef4f8; --fg-dim:#97a9b6; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
}

/* 2. Grundflaeche ------------------------------------------------------------ */
body{ background:var(--paper); color:var(--fg); }
.cursor-light{ background:radial-gradient(circle, rgba(255,139,61,.16), rgba(255,139,61,0) 62%); }
.pagefade{ background:var(--paper); }
:focus-visible,
.upload__input:focus-visible + .upload__zone,
.gallery--cinema:focus-visible,
.gallery__arrow:focus-visible,
.gallery__dot:focus-visible,
.sl-card:focus-visible,
.formopt > summary:focus-visible{ outline-color:var(--amber-ink); }

/* 3. Abschnitte -------------------------------------------------------------- */
.section--ink2{ background:var(--paper-2); }
.hero{
  background:radial-gradient(120% 90% at 78% 8%, #ffffff 0%, var(--paper) 46%, var(--paper) 78%);
}
.phero{
  background:radial-gradient(110% 100% at 85% 0%, #ffffff 0%, var(--paper) 50%, var(--paper) 80%);
}
.cta{
  background:radial-gradient(90% 130% at 20% -10%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 62%), var(--paper-2);
}
.cta::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1.5px; background:var(--refract); opacity:.4;
}
.hero__badge{ background:rgba(255,255,255,.6); }

/* 4. Typografie / Orange auf Papier ------------------------------------------ */
.refract{ background-image:var(--refract-ink); }
/* Einleitungstexte: 330 ist grau auf Papier zu duenn, gleiche Staerke wie Fliesstext */
.lede{ font-weight:400; }
.hero__brand{ color:var(--amber-lg); }
.usp__n,
.note__k,
.card__no,
.step::before,
.qtest__q > p::before,
.marquee__i b,
.crumb a:hover,
.acc__b:hover,
.tel:hover,
.ftr a:hover,
.ftr__route::after,
.cookiebar__txt a:hover,
.ftr__cookiebtn:hover,
.formopt > summary::after,
.formopt > summary:hover,
.upload:hover .upload__ico,.upload.is-drag .upload__ico,
.upload__rm:hover,
.gallery__arrow:hover,
.sl-modal__close:hover{ color:var(--amber-ink); }
.upload__rm:hover,
.gallery__arrow:hover,
.sl-modal__close:hover{ border-color:var(--amber-ink); }
.stars{ color:var(--amber-gfx); }
.field input:focus + label,.field textarea:focus + label,
.field select:focus + label,.field select.has-val + label{ color:var(--amber-ink); }

/* 5. Schaltflaechen ---------------------------------------------------------- */
.btn--ghost{ --fgc:var(--fg-ink); box-shadow:inset 0 0 0 1px var(--line-ink); }
.btn--ghost::after{ background:var(--ink); }
.btn--ghost:hover{ --fgc:var(--paper); }
.btn--neutral{ --bg:var(--paper-3); --fgc:var(--fg-ink); }
.btn--neutral::after{ background:linear-gradient(100deg,#e8e3da,#cfc7b9); }
.btn--neutral:hover{ box-shadow:0 14px 40px -14px rgba(10,18,25,.25); }

/* 6. Kopf, Menue, Fuss ------------------------------------------------------- */
.hdr.is-stuck{ background:rgba(244,241,236,.86); }
.drawer{ background:var(--paper); }
.ftr{ background:var(--paper-2); }
.callbar a{ background:var(--paper-2); }
.callbar a.pri{ background:var(--amber); }
.cookiebar{ background:#fff; box-shadow:0 24px 60px -20px rgba(10,18,25,.3); }

/* 7. Bausteine ---------------------------------------------------------------- */
.marquee{ background:var(--paper-2); }

.card{
  background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.45));
  border-color:var(--line-ink);
}
.card::before{ background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(255,139,61,.14), transparent 62%); }
.card__ico{ color:var(--ink-4); }

.stat{ background:var(--paper); }
.stat::before{ background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,139,61,.14), transparent 62%); }

.quote{ background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.45)); }

.tile{ background:var(--paper); }
.tile:hover{ background:#fff; }
.tile::before{ background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,139,61,.14), transparent 62%); }

.arealist li{ background:var(--paper); }
.arealist li:hover{ background:#fff; }

.note{ border-color:var(--line-ink); background:rgba(255,139,61,.09); }

.qopt:hover span{ background:rgba(10,18,25,.04); }
.qopt input:checked + span{ border-color:var(--amber-ink); color:var(--amber-ink); }

/* 8. Karte Servicegebiet ----------------------------------------------------- */
.map-stage{
  background:radial-gradient(130% 100% at 50% 12%, #ffffff 0%, var(--paper) 46%, var(--paper-2) 100%);
}
.map .lbl{ stroke:var(--paper); }
.map .lbl[style]{ fill:var(--fg) !important; }   /* "Deggendorf" steht inline auf Weiss */
.map .land{ fill:rgba(10,18,25,.035); }
.map .node.sec circle.core{ fill:#1b6f99; }
.map .node.sec circle.ring{ stroke:#1b6f99; }

/* 9. Formular ------------------------------------------------------------------ */
.field input,.field textarea,.field select{ background:#fff; }
.field input:focus,.field textarea:focus,.field select:focus{ background:#fff; border-color:var(--amber-ink); }
.field select{ color-scheme:light; }
.field select option{ background:#fff; color:var(--fg-ink); }
.field__err,.upload__hint,.upload__msg{ color:#b42318; }
.field.has-err input,.field.has-err textarea,.field.has-err select{ border-bottom-color:#b42318; }
.formmsg{ background:rgba(27,111,153,.07); }
.formmsg.is-ok{ border-color:#15803d; background:rgba(21,128,61,.08); color:#15803d; }
.formmsg.is-error{ border-color:#b42318; background:rgba(180,35,24,.07); color:#b42318; }
.upload__zone{ background:rgba(255,255,255,.6); }
.upload.is-drag .upload__zone,.upload:hover .upload__zone{ border-color:var(--amber-ink); background:rgba(255,139,61,.08); }
.upload__item{ background:rgba(255,255,255,.6); }

/* Plakette "Meist reparierbar" lag mit 4,37:1 knapp unter AA */
.sl-badge--repair,.sl-modal .sl-badge--repair{ color:#0a5a75; }
.sl-badge--check,.sl-modal .sl-badge--check{ color:#8f3d0a; }
.sl-badge--replace,.sl-modal .sl-badge--replace{ color:#4331a8; }

/* 10. Fotos und Galerie ------------------------------------------------------- */
.ph,.sl-card__ico.ph{ background:var(--paper-3); }
.hero__photo{ box-shadow:0 30px 70px -30px rgba(10,18,25,.45); }
.gallery__arrow{ background:rgba(255,255,255,.7); }
.gallery__dot{ background:var(--paper-3); }