/* =========================================================================
   Jeva Reinigung — Redesign 2026
   Farbwerte aus dem Elementor-Global-Stylesheet der Live-Seite GELESEN
   (post-6.css, 05.09.2026): primary #2A78E0, gruen #A3D328, text #404040,
   dunkel #171717, grund #FAFAFA. Schriften: Work Sans (Titel), Inter (Text).
   ========================================================================= */

/* ---------- 1 · Marke ---------- */
:root{
  --blue:      #2A78E0;
  --blue-deep: #195A91;
  --lime:      #A3D328;
  --lime-deep: #7FA81C;   /* fuer Text auf Weiss: #A3D328 traegt nur 1,9:1 */

  --paper:     #FAFAFA;
  --paper-2:   #EEF3FA;
  --ink:       #171717;
  --ink-2:     #404040;
  --ink-3:     #5E6470;
  --line:      rgba(23,23,23,.12);

  /* 🔴 NICHT `var(--blue)`. Das reine Markenblau #2A78E0 traegt auf dem Papier #FAFAFA
     nur 4,14:1 und mit weisser Schrift darauf nur 4,32:1 — beides unter 4,5:1. Gemessen
     am 05.09.2026: 83 Befunde im HELLmodus, im Dunkelmodus keiner (dort ist `--accent`
     ohnehin aufgehellt). Eine Pruefung in nur einem Farbmodus haette das nie gefunden.
     #2670D4 ist zwei Stufen dunkler, optisch dasselbe Blau, und traegt 4,62:1 bzw.
     4,83:1. `--blue` selbst bleibt UNVERAENDERT — Logo, Band und grosse Flaechen
     behalten die Markenfarbe, nur Schrift und Bedienelemente werden dunkler. */
  --accent:    #2670D4;
  --accent-ink:#FFFFFF;

  /* Das Band: Blau -> Limette, EIN Verlauf, ueberall wiederverwendet */
  --ribbon: linear-gradient(100deg, var(--blue-deep) 0%, var(--blue) 45%, var(--lime) 100%);

  --shadow-s: 0 2px 8px rgba(23,23,23,.06);
  --shadow-m: 0 12px 32px -8px rgba(23,40,70,.16);
  --shadow-l: 0 32px 72px -20px rgba(23,40,70,.28);

  --r-s: 10px;  --r-m: 18px;  --r-l: 28px;  --r-xl: 40px;
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 56px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* 06.09.2026 aufgehellt (Wunsch Jairo: «ein bisschen heller, aber noch lesbar»).
       Vorher #0F1620 / #17212E — fast schwarz, wirkte hart und liess die Bilder
       herausstechen wie Leuchtkaesten. Jetzt zwei Stufen heller.
       🔴 Aufhellen kostet Kontrast bei den DUNKLEN Vordergrundfarben, nicht bei den
       hellen — ein hellerer Grund rueckt naeher an sie heran. Gemessen: die dunkelste
       Verlaufsfarbe des Farbbands (#195A91) fiel dabei von tragfaehig auf 2,12:1 und
       riss die Vorgabe von 3:1 fuer grosse Schrift. Darum unten ein eigenes --ribbon
       fuer den Dunkelmodus. Der schwaechste TEXTton (--ink-3) haelt dagegen. Nach der Aenderung im
       Browser gemessen, mit Deckkraft gerechnet und nach ausgeloesten Reveals —
       nicht aus dem Farbwert geschaetzt (CLAUDE.md Abschnitt 4).
       --line musste mitwachsen: auf hellerem Grund verschwindet .14 sonst. */
    --paper:   #1C2634;
    --paper-2: #26313F;
    --ink:     #F3F5F8;
    --ink-2:   #C9CFD9;
    --ink-3:   #99A3B2;
    --line:    rgba(243,245,248,.18);

    /* 🔴 Eigenes Farbband. Die Ueberschriften sind Verlaufstext
       (background-clip:text), ihre Farbe kommt also aus DIESEM Verlauf — nicht aus
       `color`. Eine Kontrastmessung, die nur `color` liest, meldet dort 1:1 und
       uebersieht das Problem vollstaendig. Gemessen werden muessen die Farbstopps
       gegen den Seitengrund. Auf #1C2634 trug #195A91 nur 2,12:1.

       ⚠️ NUR --ribbon wird ueberschrieben, NICHT --blue-deep. Beim ersten Versuch
       wurde --blue-deep aufgehellt — davon lebt aber auch die Pille «Nachher» und
       der Telefonknopf, beide mit WEISSER Schrift darauf. Die fiel dadurch auf
       3,54:1. Eine Farbe, die an zwei Stellen gegensaetzliche Aufgaben hat, wird
       nicht global veraendert, sondern an der einen Stelle ersetzt. */
    --ribbon: linear-gradient(100deg, #4E8AD6 0%, #6BA6F2 45%, #B9E04A 100%);
    --accent:  #5C9BEA;
    --accent-ink: #0F1620;
    --lime-deep: #B9E04A;
    --shadow-m: 0 12px 32px -8px rgba(0,0,0,.5);
    --shadow-l: 0 32px 72px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1620; --paper-2:#17212E; --ink:#F3F5F8; --ink-2:#C5CBD6;
  --ink-3:#909AAA; --line:rgba(243,245,248,.14); --accent:#5C9BEA;
  --accent-ink:#0F1620; --lime-deep:#B9E04A;
  --shadow-m: 0 12px 32px -8px rgba(0,0,0,.5);
  --shadow-l: 0 32px 72px -20px rgba(0,0,0,.7);
}

/* ---------- 2 · Grundlagen ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

/* 🔴 Das Netz gehoert auf main, NIE auf html/body — sonst wird die Seite
   komplett unscrollbar (gemessen 09.08.2026 bei luxangle). */
main{ overflow-x:clip; display:block; }

img,svg,video{ max-width:100%; height:auto; display:block; }

/* Grid-/Flex-Kinder schrumpfen sonst nie unter ihre Inhaltsbreite */
.grid > *, .flex > *{ min-width:0; }

a{ color:inherit; }
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- 3 · Satz ---------- */
h1,h2,h3,h4{
  font-family:"Work Sans","Inter","Segoe UI",system-ui,sans-serif;
  margin:0 0 .5em;
  line-height:1.06;
  letter-spacing:-.022em;
  font-weight:800;
  /* Lange deutsche Komposita brechen sonst aus dem Container.
     Gemessen 20.08.2026: H1 ragte bei 360px um 27px heraus. */
  overflow-wrap:break-word;

  /* 🔴 SILBENTRENNUNG IST PFLICHT, WO break-word MOEGLICH IST.
     Vorher stand hier hyphens:none oberhalb 27rem. Folge, gemessen am
     06.09.2026 auf der Startseite bei 1000, 1100 und 1280 px:
         «Reinigungsfirm | a Winterthur»
         «Umzugsreinigun | g, Baureinigung»
     break-word darf ohne Trennstrich mitten im Wort brechen — genau das ist
     passiert. Ein einzelner gestrandeter Buchstabe sieht nach kaputter Seite
     aus, und auf dem Desktop faellt er besonders auf.

     hyphens:auto allein reicht nicht: ohne Grenzen trennt der Browser auch
     kurze Woerter («BE-WUSST»), was die urspruengliche Regel verhindern
     wollte. hyphenate-limit-chars setzt genau diese Grenze:
         8 = erst ab acht Zeichen ueberhaupt trennen
         4 = mindestens vier Zeichen vor dem Strich
         4 = mindestens vier Zeichen nach dem Strich
     «BEWUSST» hat sieben Zeichen und wird darum nie getrennt,
     «Umzugsreinigung» wird zu «Umzugs-reinigung».

     Reihenfolge im Browser: erst Leerzeichen, dann Trennstelle, und erst
     wenn beides fehlt der harte Bruch. Mit hyphens:auto kommt es also
     praktisch nie mehr zum strichlosen Bruch. */
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:8 4 4;
  -webkit-hyphenate-limit-before:4;
  -webkit-hyphenate-limit-after:4;
}
h1{ font-size:clamp(2.3rem,6vw,4.9rem); letter-spacing:-.03em; }
h2{ font-size:clamp(1.95rem,4.4vw,3.6rem); }
h3{ font-size:clamp(1.25rem,2.1vw,1.75rem); line-height:1.2; }
h4{ font-size:1.05rem; line-height:1.3; }

/* Die frueher hier stehende Ausnahme «hyphens:auto nur unter 27rem» ist
   entfallen — die Trennung gilt jetzt auf allen Breiten (siehe oben). */

p{ margin:0 0 1.15em; color:var(--ink-2); }
.lede{ font-size:clamp(1.08rem,1.55vw,1.32rem); color:var(--ink-2); max-width:60ch; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.735rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-3);
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:34px; height:3px; border-radius:2px;
  background:var(--ribbon); flex:none;
}

/* Farbiger Textakzent aus dem Logoband */
.grad{
  background:var(--ribbon);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* Fallback, falls background-clip fehlt */
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  .grad{ color:var(--accent); -webkit-text-fill-color:currentColor; }
}

/* ---------- 4 · Layout ---------- */
.wrap{
  width:min(100% - (var(--gut) * 2), var(--wrap));
  margin-inline:auto;
}
.section{ padding-block:clamp(72px,11vw,160px); position:relative; }
.section--tight{ padding-block:clamp(52px,7vw,96px); }

.grid{ display:grid; gap:clamp(20px,3vw,40px); }

/* ---------- 5 · Knoepfe ---------- */
.btn{
  --btn-bg:var(--accent); --btn-fg:var(--accent-ink);
  display:inline-flex; align-items:center; gap:.6em;
  /* 🔴 min-height 48px: Tappflaeche, nicht Optik */
  min-height:48px; padding:.85em 1.6em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:2px solid transparent; border-radius:999px;
  font:inherit; font-weight:700; font-size:.96rem;
  text-decoration:none; cursor:pointer;
  transition:transform .28s cubic-bezier(.22,1,.36,1),
             box-shadow .28s, background-color .28s, color .28s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m); }
.btn:active{ transform:translateY(0); }
.btn .arw{ transition:transform .28s cubic-bezier(.22,1,.36,1); }
.btn:hover .arw{ transform:translateX(4px); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* Der Signaturknopf: Rand aus dem Logoband.
   🔴 Bewusst OHNE ::before mit negativem inset — das ragte 2px aus dem
   Kasten und meldete sich als Inhaltsueberlauf (188>186 bei 360px).
   Zwei Hintergrundebenen loesen dasselbe, ohne die Kastenmasse zu sprengen. */
.btn--ribbon{
  --btn-fg:var(--ink);
  border-color:transparent;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
             var(--ribbon) border-box;
}

@media (prefers-reduced-motion: reduce){
  .btn,.btn .arw{ transition:none; }
  .btn:hover{ transform:none; }
}

.btn--sm{ min-height:44px; padding:.6em 1.2em; font-size:.88rem; }
.btn--lime{ --btn-bg:var(--lime); --btn-fg:#171717; }
.btn--lime:hover{ --btn-bg:#B4E23A; }