/* =====================================================================
   System EDITORIAL: hell, grosse kontrastreiche Antiqua als Display, ruhige Grotesk im Text, Haarlinien in Tinte,
   Fotos gross und randlos (Massstab aventuradentalarts.com). Satzspiegel statt Kacheln: Kanten, Spalten, Luft.
   Schrift: Newsreader (optische Groessen bis 72, Display leicht) plus Instrument Sans. Braucht basis.css.
   ===================================================================== */
@layer system{
html[data-system="editorial"]{
  --papier:#F4F2EE; --kachel:#EAE7E1; --text:#1D1C1A; --leise:#5F5C56; --zart:#7C7870; --linie:#D3CFC7; --linie-stark:#1D1C1A;
  --tief:#1D1C1A; --tief-text:#F4F2EE; --tief-leise:#B3AFA6; --tief-linie:rgb(255 255 255/.18);
  --tief-knopf:#F4F2EE; --tief-knopf-text:#1D1C1A; --tief-knopf-hover:#FFFFFF;
  --knopf:#1D1C1A; --knopf-text:#F4F2EE; --knopf-hover:var(--dunkel,#3A3833);
  --kopf-grund:#F4F2EE; --kopf-text:#1D1C1A; --kopf-linie:#D3CFC7;
  --fuss-grund:#F4F2EE; --fuss-text:#5F5C56; --fuss-linie:#1D1C1A;
  --schrift:'Newsreader',Georgia,serif; --schrift-text:'Instrument Sans',system-ui,sans-serif;
  --display-gewicht:340; --display-lauf:-.032em; --display-hoehe:.96; --display-fall:none;
  --h1:clamp(44px,min(8.4vw,13.5svh),138px); --h2:clamp(44px,5.4vw,88px); --h3:clamp(24px,2.1vw,31px); --schrift-h3:'Newsreader',Georgia,serif; --h3-gewicht:400; --h3-lauf:-.015em;
  --zahl:clamp(64px,7vw,112px); --zahl-gewicht:300; --text-groesse:17px;
  --radius:0px; --bild-radius:0px; --knopf-radius:0px; --knopf-hoehe:52px; --knopf-innen:28px; --feld-radius:0px; --demo-radius:0px;
  --abstand:clamp(88px,10vw,168px);
  --dauer:.3s; --kurve:cubic-bezier(.22,1,.36,1); --auf-weg:16px; --auf-dauer:.9s;
  --marke-gewicht:400; --marke-groesse:32px; --nav-groesse:14px; --satz-groesse:clamp(17px,1.25vw,19px);
}
html[data-system="editorial"] .kopf::before{border-bottom-color:var(--kopf-linie)}
html[data-system="editorial"] .marke__zeichen{letter-spacing:-.02em}
/* Jede Sektion beginnt an einer Linie in Tinte: der Satzspiegel ist die Ordnung */
html[data-system="editorial"] .kopfzeile{padding-top:22px;border-top:1px solid var(--linie-stark);align-items:flex-start}
html[data-system="editorial"] .kopfzeile p{padding-top:12px}
html[data-system="editorial"] .index__zeile{padding:clamp(22px,2.6vw,38px) 0}
html[data-system="editorial"] .index__zeile h3{font-size:clamp(28px,2.8vw,42px);font-weight:350;letter-spacing:-.022em}
html[data-system="editorial"] .split__text h2{font-size:clamp(40px,4.6vw,72px)}
html[data-system="editorial"] .band figcaption{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--linie);padding-top:12px}
html[data-system="editorial"] .zahlen .t-zahl small{font-family:var(--schrift-text);font-size:.22em;font-weight:500;letter-spacing:0;color:var(--leise)}
html[data-system="editorial"] .frage summary{font-family:var(--schrift);font-weight:400;font-size:clamp(21px,1.8vw,27px);letter-spacing:-.015em}
html[data-system="editorial"] .zitat{font-weight:300;max-width:24ch}

/* ---------- Start "Satzspiegel": links die Schrift auf Papier, rechts das Foto randlos ueber die volle Hoehe ---------- */
html[data-system="editorial"] .start{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);padding:0}
html[data-system="editorial"] .start__text{grid-column:1;grid-row:1;display:flex;flex-direction:column;padding:clamp(36px,6vh,84px) clamp(28px,4vw,72px) calc(36px + var(--pille-platz)) var(--rand)}
html[data-system="editorial"] .start h1{font-size:var(--h1);margin-bottom:clamp(28px,5vh,56px)}
html[data-system="editorial"] .start__satz{margin-top:auto;max-width:36ch;color:var(--text)}
html[data-system="editorial"] .start__bild{grid-column:2;grid-row:1 / span 2;min-height:100%}
html[data-system="editorial"] .start__fuss{grid-column:1;grid-row:2;align-self:end;padding:0 var(--rand) calc(var(--pille-platz) + 20px);font-size:13px;flex-direction:column;gap:2px;display:none}
/* Auftritt: die Zeilen kommen ruhig herauf, das Foto oeffnet sich aus der Vergroesserung */
html[data-system="editorial"].js .start h1{animation:edit-auf 1.2s var(--kurve) both}
html[data-system="editorial"].js .start__satz,html[data-system="editorial"].js .start__aktion{animation:edit-auf 1.2s var(--kurve) .18s both}
html[data-system="editorial"].js .start__bild > img{animation:edit-bild 1.8s var(--kurve) both}
@keyframes edit-auf{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes edit-bild{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}

/* Kontakt: Papier, die Nummer in der Antiqua gross */
html[data-system="editorial"] .kontakt{border-top:1px solid var(--linie-stark)}
html[data-system="editorial"] .kontakt__tel{font-weight:300;font-size:clamp(40px,5vw,80px)}
html[data-system="editorial"] .fuss{font-size:13px}

@media (min-width:761px) and (max-height:520px){
  html[data-system="editorial"] main .start{padding-right:0}
}
@media (max-width:760px){
  html[data-system="editorial"]{--h1:clamp(48px,13.4vw,66px);--h2:clamp(38px,10.4vw,52px);--zahl:clamp(52px,15vw,72px);--abstand:84px}
  html[data-system="editorial"] .start{display:flex;flex-direction:column;padding:0}
  html[data-system="editorial"] .start__text{padding:28px var(--rand) 0}
  html[data-system="editorial"] .start h1{margin-bottom:18px}
  html[data-system="editorial"] .start__satz{margin-top:0}
  html[data-system="editorial"] .start__bild{flex:1 1 220px;min-height:200px;margin-top:24px;margin-bottom:0}
  html[data-system="editorial"] .start{padding-bottom:var(--pille-platz)}
  html[data-system="editorial"] .index__zeile h3{font-size:28px}
  html[data-system="editorial"] .band figcaption{display:block}
}
}