/* =====================================================================
   System KONTRAST: expressiv, grosse Farbflaechen der Marke, breite Display-Schrift (Gastro, Fitness, Events).
   Der Kundenakzent wird hier zur Flaeche (--feld), Tinte steht darauf; Weiss nur, wenn der Akzent dunkel ist
   (--feld-text im Block KUNDE auf #FFFFFF setzen). Ein Feld im Start, eines im Kontakt, dazwischen Papier.
   Schrift: Funnel Display (700) plus Funnel Sans. Braucht basis.css.
   ===================================================================== */
@layer system{
html[data-system="kontrast"]{
  --feld:var(--akzent); --feld-text:#111111; --feld-leise:rgb(17 17 17/.74);
  --papier:#F6F4EF; --kachel:#EBE8E1; --text:#111111; --leise:#56544F; --zart:#56544F; --linie:#D5D1C8; --linie-stark:#111111;
  --tief:#111111; --tief-text:#F6F4EF; --tief-leise:#B5B2AA; --tief-linie:rgb(255 255 255/.18);
  --tief-knopf:var(--akzent); --tief-knopf-text:#111111; --tief-knopf-hover:#FFFFFF;
  --knopf:#111111; --knopf-text:#FFFFFF; --knopf-hover:#2E2E2E;
  --kopf-grund:var(--akzent); --kopf-text:#111111; --kopf-linie:rgb(17 17 17/.2);
  --fuss-grund:#111111; --fuss-text:#B5B2AA;
  --schrift:'Funnel Display',system-ui,sans-serif; --schrift-text:'Funnel Sans',system-ui,sans-serif;
  --display-gewicht:700; --display-lauf:-.04em; --display-hoehe:.9; --display-fall:none;
  --h1:clamp(46px,min(10.2vw,15svh),170px); --h2:clamp(48px,6.4vw,108px); --h3:22px; --h3-gewicht:600;
  --zahl:clamp(72px,8vw,132px); --zahl-gewicht:700; --text-groesse:17px;
  --radius:0px; --bild-radius:0px; --knopf-radius:999px; --knopf-hoehe:56px; --knopf-innen:30px; --knopf-schrift:16px; --knopf-gewicht:600; --feld-radius:10px; --demo-radius:16px;
  --abstand:clamp(72px,8vw,128px);
  --dauer:.25s; --kurve:cubic-bezier(.65,0,.35,1); --auf-weg:40px; --auf-dauer:.75s;
  --punkt-radius:50%; --marke-gewicht:800; --marke-groesse:32px; --nav-groesse:15px;
}
html[data-system="kontrast"] .marke__punkt{background:var(--feld-text)}
html[data-system="kontrast"] .kopf{--fokus:var(--feld-text);--fokus-gegen:var(--feld)}
html[data-system="kontrast"] .nav a{font-weight:600}
html[data-system="kontrast"] .kopfzeile p{font-size:18px}
html[data-system="kontrast"] .index__zeile{align-items:center;padding:clamp(18px,2vw,28px) 0}
html[data-system="kontrast"] .index__zeile h3{font-family:var(--schrift);font-size:clamp(32px,3.6vw,58px);font-weight:700;letter-spacing:-.035em;line-height:1}
html[data-system="kontrast"] a.index__zeile:hover{opacity:1;color:var(--leise)}
html[data-system="kontrast"] .zahlen .t-zahl small{font-size:.32em;color:var(--text)}
html[data-system="kontrast"] .split__text h2{font-size:clamp(44px,5vw,84px)}
html[data-system="kontrast"] .frage summary{font-family:var(--schrift);font-weight:700;font-size:clamp(22px,2vw,30px);letter-spacing:-.025em}
html[data-system="kontrast"] .zitat{font-size:clamp(44px,5.4vw,92px);max-width:18ch}

/* ---------- Start "Farbfeld": der Akzent fuellt den Schirm, die Schrift laeuft ueber die Breite, das Bild sitzt unten rechts ---------- */
html[data-system="kontrast"] .start{background:var(--feld);color:var(--feld-text);--text:var(--feld-text);--leise:var(--feld-leise);--zart:var(--feld-text);--linie-stark:var(--feld-text);--fokus:var(--feld-text);--fokus-gegen:var(--feld);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:clamp(24px,4vw,64px);padding-top:clamp(20px,4vh,48px)}
html[data-system="kontrast"] .start__text{display:contents}
html[data-system="kontrast"] .start h1{grid-column:1 / -1;grid-row:1;font-size:var(--h1);max-width:none}
html[data-system="kontrast"] .start__satz,html[data-system="kontrast"] .start__aktion{grid-column:1}
html[data-system="kontrast"] .start__satz{grid-row:3;margin:0 0 clamp(16px,2.4vh,26px);font-size:clamp(18px,1.5vw,22px);color:var(--feld-text);max-width:30ch}
html[data-system="kontrast"] .start__aktion{grid-row:4;margin:0}
html[data-system="kontrast"] .start__bild{grid-column:2;grid-row:2 / span 3;margin-top:clamp(20px,3vh,40px);min-height:200px}
html[data-system="kontrast"] .start__bild--objekt > img{object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 30px 30px rgb(0 0 0/.22))}
html[data-system="kontrast"] .start__fuss{display:none}
/* Auftritt: die Zeilen schieben sich herein, kraeftig und einmal */
html[data-system="kontrast"].js .start h1{animation:kontrast-zeile .9s var(--kurve) both}
html[data-system="kontrast"].js .start__bild{animation:kontrast-bild 1s var(--kurve) .15s both}
html[data-system="kontrast"].js .start__satz,html[data-system="kontrast"].js .start__aktion{animation:kontrast-zeile .9s var(--kurve) .25s both}
@keyframes kontrast-zeile{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes kontrast-bild{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}

/* Kontakt im zweiten Feld */
html[data-system="kontrast"] .kontakt{--kontakt-grund:var(--feld);background:var(--feld);color:var(--feld-text);--text:var(--feld-text);--leise:var(--feld-leise);--zart:var(--feld-text);--linie:rgb(17 17 17/.22);--linie-stark:var(--feld-text);--fokus:var(--feld-text);--fokus-gegen:var(--feld)}
html[data-system="kontrast"] .kontakt h2{font-size:clamp(64px,9vw,150px)}
html[data-system="kontrast"] .kontakt__tel{font-weight:700}

@media (max-width:760px){
  html[data-system="kontrast"]{--h1:clamp(52px,15vw,74px);--h2:clamp(42px,12vw,58px);--zahl:clamp(60px,17vw,84px);--abstand:72px}
  html[data-system="kontrast"] .start{display:flex;flex-direction:column;padding:22px var(--rand) var(--pille-platz)}
  html[data-system="kontrast"] .start__text{display:block}
  html[data-system="kontrast"] .start__satz{margin:18px 0 0;font-size:17px}
  html[data-system="kontrast"] .start__aktion{margin-top:22px}
  html[data-system="kontrast"] .start__bild{flex:1 1 160px;min-height:150px;margin-top:18px}
  html[data-system="kontrast"] .kontakt h2{font-size:clamp(52px,15vw,74px)}
}
}