/* =====================================================================
   System PRAEZISION: dunkle Produktbuehne, Tinte und Porzellan (Massstab apple.com, lavadental.lv).
   Grosse leichte Grotesk, Pillen-Knopf, graue zweite Zeile, viel Luft, Ueberschriften der Sektionen mittig.
   Die dunkle Buehne traegt --dunkel des Kunden (Markentiefe), der Akzent nur als Punkt, Linie, Zustand.
   Schrift: Hanken Grotesk (eine Familie, Gewichtskontrast 400 zu 600). Braucht basis.css.
   ===================================================================== */
@layer system{
html[data-system="praezision"]{
  --papier:#F5F5F2; --kachel:#FFFFFF; --text:#121315; --leise:#5F6064; --zart:#8A8B90; --linie:#DADAD5; --linie-stark:#9C9DA0;
  --tief:var(--dunkel,#0D0E10); --tief-text:#F5F5F2; --tief-leise:#A9ABA6; --tief-linie:rgb(255 255 255/.16);
  --tief-knopf:#F5F5F2; --tief-knopf-text:var(--dunkel,#0D0E10); --tief-knopf-hover:#FFFFFF;
  --knopf:var(--dunkel,#121315); --knopf-text:#FFFFFF; --knopf-hover:#121315;
  --kopf-grund:var(--dunkel,#0D0E10); --kopf-text:#F5F5F2; --kopf-linie:rgb(255 255 255/.14);
  --fuss-grund:#F5F5F2; --fuss-text:#5F6064; --fuss-linie:#DADAD5;
  --schrift:'Hanken Grotesk',system-ui,sans-serif; --schrift-text:'Hanken Grotesk',system-ui,sans-serif;
  --display-gewicht:500; --display-lauf:-.034em; --display-hoehe:1.02; --display-fall:none;
  --h1:clamp(42px,min(7vw,10.4svh),108px); --h2:clamp(40px,4.9vw,76px); --h3:21px; --h3-gewicht:600;
  --zahl:clamp(60px,6.6vw,104px); --zahl-gewicht:400; --text-groesse:17px;
  --radius:18px; --bild-radius:22px; --knopf-radius:999px; --knopf-hoehe:46px; --knopf-innen:24px; --feld-radius:12px; --demo-radius:22px;
  --abstand:clamp(96px,11vw,176px);
  --dauer:.35s; --kurve:cubic-bezier(.25,.1,.25,1); --auf-weg:28px; --auf-dauer:1s;
  --punkt-radius:50%; --marke-gewicht:600; --marke-groesse:28px; --nav-groesse:13.5px;
}
html[data-system="praezision"] .kopf.is-fest::before{border-bottom-color:transparent}
html[data-system="praezision"] .marke__name{color:var(--tief-leise)}

/* Sektionen: Ueberschrift mittig, zweite Zeile grau, Satz darunter */
html[data-system="praezision"] .kopfzeile{flex-direction:column;align-items:center;text-align:center;gap:22px}
html[data-system="praezision"] .kopfzeile p{max-width:46ch;font-size:19px;line-height:1.5}
html[data-system="praezision"] .index{border-top-color:var(--linie)}
html[data-system="praezision"] .index__zeile h3{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.02em}
html[data-system="praezision"] .split{padding-right:var(--rand)}
html[data-system="praezision"] .split__bild,html[data-system="praezision"] .split--umgekehrt .split__bild{border-radius:var(--bild-radius)}
html[data-system="praezision"] .split--umgekehrt{padding-left:var(--rand)}
html[data-system="praezision"] .band{padding-inline:var(--rand)}
html[data-system="praezision"] .band__bild{border-radius:var(--bild-radius)}
html[data-system="praezision"] .band figcaption{text-align:center}
html[data-system="praezision"] .zahlen .zahlen__eintrag{border-top-color:var(--linie)}
html[data-system="praezision"] .zahlen .t-zahl small{color:var(--zart)}
html[data-system="praezision"] .zitat{margin-inline:auto;text-align:center;max-width:20ch}
html[data-system="praezision"] .zitat + p{text-align:center;margin-inline:auto}

/* ---------- Start "Buehne": dunkel, Satz mittig, das Objekt steigt ins Licht ---------- */
html[data-system="praezision"] .start{background:var(--tief);color:var(--tief-text);--text:var(--tief-text);--leise:var(--tief-leise);--zart:var(--tief-leise);--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);
  display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(40px,8vh,104px)}
html[data-system="praezision"] .start__text{display:flex;flex-direction:column;align-items:center;max-width:1040px}
html[data-system="praezision"] .start__satz{margin-inline:auto;font-size:clamp(18px,1.5vw,22px);max-width:40ch}
html[data-system="praezision"] .start__aktion{justify-content:center}
/* Das Objekt fuellt, was unter dem Satz bleibt (nie unter 28 % der Schirmhoehe); die Titelgroesse richtet sich auch nach
   der Hoehe, damit es auf jedem Schirm im ersten Bildschirm steht. Unter 860 px Hoehe: Satz links, Objekt rechts. */
html[data-system="praezision"] .start__bild{flex:1 1 0;min-height:max(180px,28svh);width:100%;max-width:1200px;margin-top:clamp(16px,3vh,40px);overflow:visible}
html[data-system="praezision"] .start__bild > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 26px 22px rgb(0 0 0/.28))}
html[data-system="praezision"] .start__bild--foto{border-radius:var(--bild-radius) var(--bild-radius) 0 0;overflow:hidden;margin-bottom:calc(-28px - var(--pille-platz))}
html[data-system="praezision"] .start__bild--foto > img{object-fit:cover;object-position:50% 50%;filter:none}
html[data-system="praezision"] .start__fuss{position:absolute;left:var(--rand);right:var(--rand);bottom:calc(var(--pille-platz) + 18px);justify-content:space-between;text-align:left;font-size:13px;color:var(--tief-leise);pointer-events:none}
html[data-system="praezision"] .start__fuss > *{pointer-events:auto}
html[data-system="praezision"] .start__fuss dt{color:var(--tief-text)}
/* Auftritt: Satz blendet auf, das Objekt steigt aus dem Dunkel; eine Geste, dann Ruhe */
html[data-system="praezision"].js .start__text > *{animation:praez-auf 1.1s var(--kurve) both}
html[data-system="praezision"].js .start__text > :nth-child(2){animation-delay:.12s}
html[data-system="praezision"].js .start__text > :nth-child(3){animation-delay:.22s}
html[data-system="praezision"].js .start__bild > img{animation:praez-objekt 1.6s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes praez-auf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes praez-objekt{from{opacity:0;transform:translateY(9%) scale(.94)}to{opacity:1;transform:none}}

@media (min-width:761px) and (max-height:860px){
  html[data-system="praezision"] .start{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(24px,4vw,64px);align-items:center;text-align:left;padding-top:clamp(20px,5vh,56px)}
  html[data-system="praezision"] .start__text{align-items:flex-start}
  html[data-system="praezision"] .start__satz{margin-inline:0}
  html[data-system="praezision"] .start__aktion{justify-content:flex-start}
  html[data-system="praezision"] .start__bild{align-self:stretch;min-height:0;margin:0}
  html[data-system="praezision"] .start__bild > img{object-position:50% 50%}
  html[data-system="praezision"] .start__bild--foto{margin:0;border-radius:var(--bild-radius)}
  html[data-system="praezision"] .start__fuss{display:none}
}

/* Kontakt auf der Buehne */
html[data-system="praezision"] .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)}
html[data-system="praezision"] .kontakt__tel{font-weight:400}

@media (max-width:760px){
  html[data-system="praezision"]{--h1:clamp(40px,11.4vw,58px);--h2:clamp(34px,9.4vw,46px);--zahl:clamp(46px,13vw,64px);--abstand:88px;--bild-radius:18px}
  html[data-system="praezision"] .start{padding-top:36px}
  html[data-system="praezision"] .start__satz{font-size:17px}
  html[data-system="praezision"] .start__bild{flex-basis:200px;margin-top:22px}
  html[data-system="praezision"] .start__fuss{display:none}
  html[data-system="praezision"] .kopfzeile{align-items:flex-start;text-align:left}
  html[data-system="praezision"] .kopfzeile p{font-size:17px}
  html[data-system="praezision"] .band{padding-inline:0}
  html[data-system="praezision"] .split{padding-inline:var(--rand)}
  html[data-system="praezision"] .split__text{padding-inline:0}
  html[data-system="praezision"] .split__bild{border-radius:var(--bild-radius)}
}
}