/* ══════════════════════════════════════════════════════════
   REINEXO – light.css
   Gemeinsames helles Layout und Schriftbild fuer alle Seiten.
   Wird nach site.css geladen und ueberschreibt deren dunkle
   Grundeinstellung.

   Dunkel bleiben: Navigation, Seitenkopf (.ph / Hero),
   Ablauf (.prz-sec), CTA-Baender (.ctab) und der Footer.
   Hell wird alles mit der Klasse .lite – das sind die
   Inhaltsabschnitte .cs und .trust.
   ══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   18. SCHRIFT – Archivo fuer Ueberschriften, Inter fuer Text
   Ersetzt Playfair Display und Plus Jakarta Sans. Lokal
   eingebunden ueber assets/fonts.css, kein Google-Aufruf.
   ══════════════════════════════════════════════════════════ */
body,input,select,textarea,button,
.btn,.fi,.fta,.fsel,.fsub,.wa-btn,.usp-item{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
}

h1,h2,h3,h4,h5,h6,
.hero h1,.logo-r,.logo-txt,.dash-title,.lcc-num,.lcc-title,
.ps-n,.ps-t,.cal-month,.fl,.kfh h3,.ft-name,.prz-badge,
.hero-fact-n,.uu-n,.geb-nr,.svc-num,.rev-name{
  font-family:'Archivo','Segoe UI',system-ui,sans-serif;
}

/* Vollstaendige Liste aller Selektoren, die in site.css Playfair setzen.
   Mehrere davon sind spezifischer als ein blankes h2. */
.cal-month,.city-n,.cs h2,.cs h3,.ctab h2,.dash-title,.fl,.ft-name,
.hero h1,.kfh h3,.lcc-num,.lcc-title,.legal h2,.logo-r,.logo-txt,
.ph h1,.prz-badge,.prz-card-body h3,.ps-n,.ps-t,.rc-score,.sc h3,
.svc h3,.svc-num,.trust-txt h2,.prz-header h2{
  font-family:'Archivo','Segoe UI',system-ui,sans-serif;
}

/* Archivo traegt breiter als Playfair – Groessen und Laufweite nach */
.hero h1{font-weight:700;font-size:clamp(2.3rem,5.1vw,4.6rem);letter-spacing:-.035em;line-height:1.04}
h2{font-weight:600;font-size:clamp(1.7rem,3.3vw,2.7rem);letter-spacing:-.028em}
.cs h2{font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.025em;line-height:1.24}
.ctab h2{font-weight:600;font-size:clamp(1.4rem,2.8vw,1.95rem);letter-spacing:-.025em;line-height:1.24}
.prz-header h2,.trust-txt h2{line-height:1.2}
.svc h3,.sc h3{font-weight:600;letter-spacing:-.015em}
.hero-fact-n,.uu-n,.geb-nr,.prz-badge{font-weight:700;letter-spacing:-.03em}
.uu-n{font-size:2rem}
.hero-fact-n{font-size:1.35rem}

/* Kein Kursiv mehr – der Akzent laeuft ueber Farbe, nicht ueber Neigung */
.hero h1 em,h2 em,.cs h2 em,.ctab h2 em,.ph h1 em,.prz-header h2 em{
  font-style:normal;font-weight:inherit;
}
.hero h1 em{display:block;color:var(--aqua)}
h2 em,.cs h2 em,.ctab h2 em,.prz-header h2 em{color:var(--aqua)}
/* Auf hellem Grund traegt der Farbakzent nicht – dort einfarbig */
.lite h2 em,.lite.cs h2 em{color:var(--l-ink)}

/* Inter laeuft enger als Plus Jakarta, Fliesstext braucht etwas mehr Zeile */
body{line-height:1.65}
.cs p,.hero-lead,.rev-txt,.uu-lead{letter-spacing:-.003em}

/* Kursivschnitte sind nicht eingebunden – jedes verbliebene Kursiv
   wuerde der Browser kuenstlich schraegstellen. Also durchgaengig aufrecht. */
.rev-txt{font-style:normal}
.trust-txt h2 em{font-style:normal;color:var(--l-ink)}
em{font-style:normal}
.rev-txt::before{content:''}
.qual-t{font-family:'Archivo','Segoe UI',system-ui,sans-serif}


/* ══════════════════════════════════════════════════════════
   12. HELLE ABSCHNITTE
   Rhythmus: Hero und Ticker dunkel, Leistungen bis Einsatz-
   gebiet hell, Ablauf dunkel, Bewertungen hell, CTA dunkel,
   Rest hell. Aqua nur noch fuer Handlungsaufforderungen.
   ══════════════════════════════════════════════════════════ */
.lite{
  --l-bg:#F5F4F0;
  --l-card:#ffffff;
  --l-line:#e3e1d9;
  --l-line2:#d2cfc4;
  --l-ink:#0B1C2C;
  --l-mid:#4d5a63;
  --l-soft:#6d7982;
  --l-tint:#edebe4;
  --l-link:#0a6470;
  background:var(--l-bg);
  color:var(--l-mid);
}
.lite-b{--l-bg:#FBFAF7;--l-tint:#f0eee7}

.lite h2,.lite h3,.lite h4,.lite strong,.lite b{color:var(--l-ink)}
.lite p,.lite li,.lite address{color:var(--l-mid)}
.lite h2 em{color:var(--l-ink)}
.lite .stag{color:var(--l-soft)}
.lite .stag::before{background:var(--l-line2)}
.lite .inl{color:var(--l-link);text-decoration-color:rgba(10,100,112,.4)}
.lite .inl:hover{color:var(--l-ink)}

/* Karten */
.lite .svc,.lite .rev-card,.lite .geb-ort,.lite .answer{
  background:var(--l-card);border-color:var(--l-line);
}
.lite .svc:hover,.lite .geb-ort:hover{
  background:var(--l-card);border-color:var(--l-line2);
  box-shadow:0 10px 30px rgba(11,28,44,.07);
}
.lite .svc-num{color:var(--l-line2)}
.lite .svc-ico{background:var(--l-ink);border-color:var(--l-ink);color:#fff}
.lite .svc-ico svg{stroke:#fff}
.lite .svc-more{color:var(--l-link)}
.lite .svc-more:hover{color:var(--l-ink)}

/* Pills */
.lite .svc-tags span,.lite .dist span{
  background:var(--l-tint);border-color:transparent;color:#3d4a52;
}
.lite .dist span::before{background:var(--l-line2)}

/* Einsatzgebiet */
.lite .geb-pin{background:var(--l-ink);box-shadow:0 0 0 4px rgba(11,28,44,.09)}
.lite .geb-ort-top strong{color:var(--l-ink)}
.lite .geb-more{border-top-color:var(--l-line)}
.lite .geb-more summary{color:var(--l-link)}
.lite .geb-more summary:hover{color:var(--l-ink)}
.lite .geb-grp h3{color:var(--l-soft)}
.lite .geb-cnt{background:var(--l-tint);border-color:transparent;color:var(--l-ink)}
.lite .geb-note{background:var(--l-tint);border-left-color:var(--l-ink)}

/* Bewertungen */
.lite .rev-card svg,.lite .rev-card .stars{color:var(--l-link)}

/* Qualifikation */
.lite.trust-late{background:var(--l-bg)}
.lite .qual{background:var(--l-card);border-color:var(--l-line)}
.lite .qual-ic{background:var(--l-ink);color:#fff}
.lite .qual-t{color:var(--l-ink)}
.lite .qual-s{color:var(--l-soft)}
.lite .trust-logo{background:var(--l-card);border-color:var(--l-line)}
.lite .trust-logo img{filter:none;opacity:.85}

/* FAQ */
.lite .faq-item{background:var(--l-card);border-color:var(--l-line)}
.lite .faq-q{color:var(--l-ink)}
.lite .faq-arr{color:var(--l-soft)}
.lite .faq-a{color:var(--l-mid)}

/* Zusammenfassung */
.lite .a-lbl{color:var(--l-soft)}
.lite .answer{border-color:var(--l-line)}

/* Buttons: Aqua bleibt der Handlungsaufforderung vorbehalten */
.lite .btn-outline{border-color:var(--l-line2);color:var(--l-ink)}
.lite .btn-outline:hover{background:var(--l-ink);border-color:var(--l-ink);color:#fff}

/* Dekorative Punkte aus dem dunklen Layout stoeren auf Hell */
.lite .si::before,.lite .si::after{display:none}

/* Akzentlinie der Leistungskarten auf Hell */
.lite .svc::after{background:linear-gradient(90deg,var(--l-ink),transparent)}
/* ══════════════════════════════════════════════════════════
   BAUSTEINE, DIE NUR AUF UNTERSEITEN VORKOMMEN
   Kontaktformular, Rechtstexte, Kontaktkacheln, Verwandtes.
   Der Seitenkopf .ph bleibt bewusst dunkel – wie der Hero.
   ══════════════════════════════════════════════════════════ */

/* ─── Kontaktformular ───────────────────────────────────── */
.lite .flbl{color:var(--l-soft)}
.lite .fi,.lite .fta,.lite .fsel{
  background:var(--l-card);border:1px solid var(--l-line2);
  color:var(--l-ink);
}
.lite .fi:focus,.lite .fta:focus,.lite .fsel:focus{
  border-color:var(--l-ink);background:var(--l-card);
  box-shadow:0 0 0 3px rgba(11,28,44,.07);
}
.lite .fi::placeholder,.lite .fta::placeholder{color:#9aa5ad}
.lite .fsel option{background:#fff;color:var(--l-ink)}
.lite .fsub{background:var(--aqua);color:#06202b}
.lite .fsub:hover{background:var(--aqua2);box-shadow:0 8px 24px rgba(0,197,212,.28)}
.lite .kfh h3{color:var(--l-ink)}
.lite .kfh p{color:var(--l-soft)}
.lite .kform{background:var(--l-card);border-color:var(--l-line)}

/* ─── Kontaktkacheln ────────────────────────────────────── */
.lite .ki{
  background:var(--l-card);border:1px solid var(--l-line);color:var(--l-ink);
}
.lite .ki:hover{border-color:var(--l-line2);box-shadow:0 8px 24px rgba(11,28,44,.07)}
.lite .ki-icon{background:var(--l-ink);border-color:var(--l-ink)}
.lite .ki-icon svg{stroke:#fff}
.lite .ki-lbl{color:var(--l-soft)}
.lite .ki-val{color:var(--l-ink)}

/* ─── Rechtstexte ───────────────────────────────────────── */
.lite .legal h2,.lite .legal h3{color:var(--l-ink)}
.lite .legal p,.lite .legal li,.lite .legal td,.lite .legal th{color:var(--l-mid)}
.lite .legal a{color:var(--l-link)}
.lite .legal table{border-color:var(--l-line)}
.lite .legal th,.lite .legal td{border-color:var(--l-line)}
.lite .legal th{background:var(--l-tint);color:var(--l-ink)}
.lite .tbl-wrap{border-color:var(--l-line)}

/* ─── Verwandte Leistungen und Checklisten ──────────────── */
.lite .rel a,.lite .rel li{background:var(--l-card);border-color:var(--l-line);color:var(--l-ink)}
.lite .rel a:hover{border-color:var(--l-line2)}
.lite .chk li{color:var(--l-mid)}
.lite .chk-i{color:var(--l-ink)}

/* ─── FAQ auf Unterseiten ───────────────────────────────── */
.lite .faq-item{border-bottom-color:var(--l-line)}
.lite .faq-q{color:var(--l-ink)}
.lite .faq-a{color:var(--l-mid)}
.lite .faq-arr{color:var(--l-soft)}

/* ─── Karten und Listen aus site.css ────────────────────── */
.lite .lcc-num{color:var(--l-line2)}
.lite .lcc-title{color:var(--l-ink)}
.lite .ps-n{color:var(--l-ink)}
.lite .ps-t{color:var(--l-ink)}
.lite .city-n{color:var(--l-ink)}
.lite .gebiet-item{background:var(--l-tint);border-color:transparent;color:#3d4a52}
.lite .gebiet-item:hover{background:var(--l-line);transform:translateY(-2px)}

/* ══════════════════════════════════════════════════════════
   GEMEINSAM FUER ALLE SEITEN
   Diese Regeln standen anfangs nur in home.css und haben
   den Unterseiten gefehlt.
   ══════════════════════════════════════════════════════════ */

/* .facts h2 im Seitenkopf haengt noch an der alten Schrift */
.facts h2{font-family:'Inter','Segoe UI',system-ui,sans-serif}

/* Abstaende und Zeilenhoehe der Ueberschriften */
.cs h2,.prz-header h2,.trust-txt h2,.ctab h2{margin-bottom:1.8rem}
.cs h2{line-height:1.24}

/* Hervorhebungen: site.css setzt .cs p strong auf --mist */
.lite.cs p strong,
.lite .answer strong,
.lite .trust-txt p strong,
.lite .legal p strong,
.lite p strong,
.lite li strong{color:var(--l-ink);font-weight:600}

/* Inline-Links */
.lite a.inl{color:var(--l-link);text-decoration-color:rgba(10,100,112,.45)}
.lite a.inl:hover{color:var(--l-ink)}

/* Dekorative Nummern */
.lite .svc-num{color:#c4bfae}

/* ─── Tabellen (Preis- und Leistungstabellen) ───────────── */
.lite table{border-color:var(--l-line)}
.lite thead th,.lite th{
  background:var(--l-tint);color:var(--l-ink);
  border-color:var(--l-line);font-weight:600;
}
.lite td{color:var(--l-mid);border-color:var(--l-line)}
.lite td strong,.lite td b{color:var(--l-ink)}
.lite tr{border-color:var(--l-line)}
.lite .tbl-wrap{border-color:var(--l-line);background:var(--l-card)}

/* Tabellen heissen table.rx – das ist spezifischer als .lite td */
.lite .tbl-wrap{border-color:var(--l-line)}
.lite table.rx th{
  color:var(--l-ink);background:var(--l-tint);
  border-bottom-color:var(--l-line2);
}
.lite table.rx td{color:var(--l-mid);border-bottom-color:var(--l-line)}
.lite table.rx tbody tr:hover td{background:var(--l-tint)}
.lite .tbl-wrap::after{color:var(--l-soft);background:var(--l-tint)}

/* Rechtstexte: Code und Hinweiskaesten */
.lite .legal code{background:var(--l-tint);color:var(--l-ink)}
.lite .legal .todo{background:#fdf4e3;border-color:#e8cf9a}
.lite .legal .todo strong{color:#7a5714}

/* Links in hellen Abschnitten – Schaltflaechen und Kacheln ausgenommen */
.lite a{color:var(--l-link)}
.lite a.btn-aqua,.lite .fsub{color:#06202b}
.lite a.btn-outline{color:var(--l-ink)}
.lite a.svc,.lite a.ki,.lite a.rel,.lite .rel a{color:var(--l-ink)}
.lite .dist span,.lite .svc-tags span{color:#3d4a52}

/* Fehlermeldung im Kontaktformular */
.form-fehler{
  background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.25);
  border-radius:10px;padding:1rem 1.2rem;margin-bottom:1rem;
  font-size:.85rem;color:#ff8080;
}
.lite .form-fehler{background:#fdeaea;border-color:#f0bcbc;color:#a32020}

/* ══════════════════════════════════════════════════════════
   SYSTEMATISCH STATT EINZELN
   site.css greift ueberall auf --fog und --mist zu. Beide
   werden ausschliesslich fuer Text verwendet, lassen sich
   also innerhalb heller Abschnitte gefahrlos umdefinieren.
   --white bleibt unangetastet, das dient zehnmal als
   Hintergrundfarbe.
   ══════════════════════════════════════════════════════════ */
.lite{
  --fog:#56636b;
  --mist:#414d55;
  --aqua-mid:#08505a;
  --l-soft:#56636b;
  --l-link:#08505a;
}
.lite-b{--l-soft:#56636b}

.lite caption{color:var(--l-soft)}
.lite .rev-stars{color:#9a6f08}
.lite .chk-i{background:var(--l-card);border-color:var(--l-line);color:var(--l-mid)}
.lite .chk-i svg{stroke:var(--l-ink)}

/* Badge aus dem Hero taucht auch auf Unterseiten auf */
.lite .hero-badge{
  background:var(--l-tint);border-color:transparent;color:var(--l-ink);
}
.lite .hero-badge .bpulse{background:var(--l-ink)}

/* Erfolgsmeldung und Restlinks im Kontaktformular */
.form-erfolg{
  background:rgba(0,197,212,.08);border:1px solid rgba(0,197,212,.25);
  border-radius:10px;padding:1rem 1.2rem;margin-bottom:1rem;
  font-size:.85rem;color:var(--aqua);
}
.lite .form-erfolg{background:#e6f6f8;border-color:#a9dbe1;color:#07505b}
.aqua-inline{color:var(--aqua)}
.lite .aqua-inline{color:var(--l-link)}
.lite .fnote a,.lite label a,.lite small a{color:var(--l-link)}
.lite .rev-stars{color:#8a6207}

/* ══════════════════════════════════════════════════════════
   ABSTAENDE UNTER UEBERSCHRIFTEN
   Gemessen ueber alle Seiten: h3 stand bei 9,6 px, der
   Seitenkopf bei 16 px trotz 54 px Schriftgroesse. Archivo
   traegt kompakter als Playfair, dadurch wirkte es gedraengt.
   ══════════════════════════════════════════════════════════ */
.cs h3,.sc h3,.svc h3,.prz-card-body h3,.kfh h3,.legal h3{margin-bottom:1rem}
.geb-ort-top{margin-bottom:.75rem}
.ph h1{margin-bottom:1.8rem}
.hero h1{margin-bottom:2rem}
.ft-name,.fl{margin-bottom:1rem}
.footer h4,.ft-col h4{margin-bottom:1rem}
.cs h2,.prz-header h2,.trust-txt h2,.ctab h2{margin-bottom:1.8rem}

/* Einsatzgebiet: einspaltig steht die Zeile direkt unter der
   Ueberschrift, dort braucht sie wieder einen Abstand. */
/* Einsatzgebiet steht nur auf der Startseite – die
   Abstandsregel liegt deshalb am Ende von home.css. */

/* ══════════════════════════════════════════════════════════
   LEISTUNGEN AUF MOBIL: SEITLICH WISCHEN
   ══════════════════════════════════════════════════════════ */
.swipe-hinweis{display:none}

@media(max-width:760px){
  .svc-grid{
    display:grid;
    /* site.css setzt hier drei feste Spalten – die muessen weg,
       sonst quetscht das Raster die ersten Karten zusammen. */
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:80%;
    gap:.85rem;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding:.3rem 0 1.1rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .svc-grid>*{scroll-snap-align:start;min-width:0}
  .svc-grid::-webkit-scrollbar{height:3px}
  .svc-grid::-webkit-scrollbar-track{background:rgba(11,28,44,.06);border-radius:3px}
  .svc-grid::-webkit-scrollbar-thumb{background:rgba(11,28,44,.28);border-radius:3px}

  .swipe-hinweis{
    display:flex;align-items:center;gap:.45rem;
    font-size:.74rem;color:var(--l-soft);margin:-.4rem 0 0;
  }
  .swipe-hinweis::after{
    content:'';width:14px;height:14px;flex:none;
    background:currentColor;
    -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    animation:swipe-wink 1.8s ease-in-out infinite;
  }
  @keyframes swipe-wink{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
}
@media(prefers-reduced-motion:reduce){
  .swipe-hinweis::after{animation:none}
}

/* Rubrikzeile stand bei 13–15 px unter einer bis zu 43 px
   grossen Ueberschrift – zu wenig Vorlauf. */
.stag{margin-bottom:1.4rem}