/* =====================================================================
   System WARM: persoenlich, warmes Weiss, fotogetragen, weiche Formen (Massstab hims.com).
   Grosse Fotofenster mit Radius, freundliche humanistische Grotesk, Knopf als Pille in der dunklen Markenfarbe,
   Sand als einzige Flaeche, die Markentiefe als Buehne fuer den Kontakt.
   Schrift: Commissioner (eine Familie, 500 im Display, 400 im Text). Braucht basis.css.
   ===================================================================== */
@layer system{
html[data-system="warm"]{
  --papier:#FBF8F3; --kachel:#F2ECE3; --text:#29231F; --leise:#665C54; --zart:var(--dunkel,#5A4E45); --linie:#E7DFD4; --linie-stark:#8F857C;
  --tief:var(--dunkel,#2E2620); --tief-text:#FBF8F3; --tief-leise:#D9D1C6; --tief-linie:rgb(255 255 255/.18);
  --tief-knopf:#FBF8F3; --tief-knopf-text:var(--dunkel,#2E2620); --tief-knopf-hover:#FFFFFF;
  --knopf:var(--dunkel,#2E2620); --knopf-text:#FFFFFF; --knopf-hover:#29231F;
  --kopf-grund:#FBF8F3; --kopf-text:#29231F; --kopf-linie:#E7DFD4;
  --fuss-grund:#FBF8F3; --fuss-text:#665C54; --fuss-linie:#E7DFD4;
  --schrift:'Commissioner',system-ui,sans-serif; --schrift-text:'Commissioner',system-ui,sans-serif;
  --display-gewicht:500; --display-lauf:-.03em; --display-hoehe:1.03; --display-fall:none;
  --h1:clamp(40px,min(6.2vw,10svh),96px); --h2:clamp(36px,4.3vw,64px); --h3:21px; --h3-gewicht:600;
  --zahl:clamp(52px,5.4vw,84px); --zahl-gewicht:500; --zahl-farbe:var(--dunkel,#29231F); --text-groesse:17px;
  --radius:20px; --bild-radius:26px; --knopf-radius:999px; --knopf-hoehe:52px; --knopf-innen:28px; --feld-radius:14px; --demo-radius:26px;
  --abstand:clamp(72px,8vw,128px);
  --dauer:.3s; --kurve:cubic-bezier(.3,.7,.2,1); --auf-weg:20px; --auf-dauer:.8s;
  --punkt-radius:50%; --marke-gewicht:600; --marke-groesse:28px; --nav-groesse:15px;
}
html[data-system="warm"] .index{border-top-color:var(--linie)}
html[data-system="warm"] .index__zeile h3{font-size:clamp(22px,2vw,28px);font-weight:500}
html[data-system="warm"] .index__bild{width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;overflow:hidden}
html[data-system="warm"] .index__bild img{width:100%;height:100%;object-fit:cover}
html[data-system="warm"] .split{padding-right:var(--rand)}
html[data-system="warm"] .split__bild,html[data-system="warm"] .split--umgekehrt .split__bild{border-radius:var(--bild-radius)}
html[data-system="warm"] .split--umgekehrt{padding-left:var(--rand)}
html[data-system="warm"] .band{padding-inline:var(--rand)}
html[data-system="warm"] .band__bild{border-radius:var(--bild-radius)}
html[data-system="warm"] .zahlen .zahlen__eintrag{border-top-color:var(--linie)}
html[data-system="warm"] .frage summary::after{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--kachel);font-size:22px;color:var(--text)}

/* ---------- Start "Kopf und Fenster": Satz oben, darunter ein grosses Fotofenster mit Radius bis zum Rand ---------- */
html[data-system="warm"] .start{display:flex;flex-direction:column;padding:clamp(28px,5vh,64px) var(--rand) 16px}
html[data-system="warm"] .start__text{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);grid-template-areas:"h s" "h a";column-gap:clamp(32px,5vw,96px);align-items:end}
html[data-system="warm"] .start h1{grid-area:h;max-width:13ch}
html[data-system="warm"] .start__satz{grid-area:s;margin-top:0}
html[data-system="warm"] .start__aktion{grid-area:a;margin-top:22px}
html[data-system="warm"] .start__bild{flex:1 1 300px;margin-top:clamp(24px,4vh,48px);border-radius:var(--bild-radius)}
html[data-system="warm"] .start__fuss{position:absolute;left:calc(var(--rand) + 18px);bottom:calc(var(--pille-platz) + 2px);padding:14px 20px;border-radius:18px;background:var(--papier);font-size:14px;color:var(--leise)}
/* Auftritt: das Fenster oeffnet sich weich, der Satz folgt */
html[data-system="warm"].js .start__bild{animation:warm-fenster 1.3s var(--kurve) both}
html[data-system="warm"].js .start__text > *{animation:warm-auf 1s var(--kurve) .1s both}
@keyframes warm-fenster{from{opacity:0;transform:translateY(32px) scale(.98)}to{opacity:1;transform:none}}
@keyframes warm-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Kontakt auf der Markentiefe, weich gerahmt */
html[data-system="warm"] .kontakt{--kontakt-grund:var(--tief);background:var(--tief);color:var(--tief-text);--text:var(--tief-text);--leise:var(--tief-leise);--zart:var(--tief-leise);--linie:var(--tief-linie);--linie-stark:var(--tief-leise);--knopf:var(--tief-knopf);--knopf-text:var(--tief-knopf-text);--knopf-hover:var(--tief-knopf-hover);--fokus:var(--tief-text);--fokus-gegen:var(--tief);margin:0 var(--rand) var(--rand);border-radius:var(--bild-radius)}

@media (max-width:760px){
  html[data-system="warm"]{--h1:clamp(40px,11vw,54px);--h2:clamp(32px,8.6vw,42px);--zahl:clamp(44px,12vw,60px);--abstand:72px;--bild-radius:20px}
  html[data-system="warm"] .start{padding:24px var(--rand) 12px}
  html[data-system="warm"] .start__text{display:block}
  html[data-system="warm"] .start__satz{margin-top:16px}
  html[data-system="warm"] .start__bild{flex:1 1 220px;min-height:220px;margin-top:22px}
  html[data-system="warm"] .start__fuss{display:none}
  html[data-system="warm"] .band{padding-inline:var(--rand)}
  html[data-system="warm"] .band__bild{border-radius:var(--bild-radius)}
  html[data-system="warm"] .split{padding-inline:var(--rand)}
  html[data-system="warm"] .split__text{padding-inline:0}
  html[data-system="warm"] .split__bild{border-radius:var(--bild-radius)}
  html[data-system="warm"] .kontakt{margin:0 10px 10px}
}
}