@import url('fonts.css');

/* ehrlich leicht — Richtung "Zwei Stimmen", Favoriten-Stand
   Warmes Papier und Tinte. Ihre Stimme groß in kursiver Serife,
   Jans Antwort sachlich in der Grotesk. Farbe nur als Rosé-Marker
   hinter dem einen wahren Satz, genau fünfmal auf der Seite. */

:root{
  --papier:#F7F5F2;
  --weiss:#FFFFFF;
  --tinte:#211F1C;
  --sekundaer:#5E5951;
  --marker:#E7BFB6;
  --rose-tief:#9C4A44;
  --linie:#DEDAD3;

  --stimme:'Instrument Serif', Georgia, serif;
  --sach:'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;

  --spalte:47.5rem; /* 760px */
  --rand:clamp(1.25rem, .75rem + 2.5vw, 3rem);

  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:40px; --s8:56px; --s9:72px; --s10:96px; --s11:128px; --s12:176px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-ui:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sach);
  font-size:20px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--marker);color:var(--tinte)}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 1.3em}
p:last-child{margin-bottom:0}

/* Die Spalte */
.spalte{width:min(var(--spalte),100% - var(--rand)*2);margin-inline:auto}

/* Ihre Stimme */
.sie{
  font-family:var(--stimme);
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.5rem, 1.55rem + 4.2vw, 5.25rem); /* 40 bis 84px */
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0;
  max-width:16ch;
}

/* Jans Antwort */
.jan{margin-top:var(--s7);max-width:36rem}
.jan p{font-size:20px;line-height:1.7}

/* Der Marker: der eine wahre Satz */
mark{
  background:linear-gradient(transparent 8%, var(--marker) 8%, var(--marker) 92%, transparent 92%);
  color:var(--tinte);
  padding:0 .12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* Labels */
.label{
  font-family:var(--sach);
  font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--sekundaer);
  margin:0 0 var(--s6);
}
.label + .jan{margin-top:0}

/* Sektionen: Paare mit viel Luft */
.paar{padding-block:var(--s11)}
.paar-eng{padding-block:var(--s9)}
.paar + .paar{border-top:1px solid var(--linie)}
main > :first-child{padding-top:var(--s9)}

/* Kopf */
.kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;padding-block:var(--s6) var(--s4)}
.wortmarke{font-family:var(--stimme);font-style:italic;font-size:1.625rem;color:var(--tinte);text-decoration:none;white-space:nowrap}
.wortmarke small{display:block;font-family:var(--sach);font-style:normal;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sekundaer);margin-top:4px}
.nav{display:flex;gap:var(--s5);flex-wrap:wrap}
.nav a{font-size:15px;color:var(--tinte);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color 160ms var(--ease-ui)}
.nav a:hover{border-color:var(--tinte)}
@media(max-width:640px){.kopf{flex-direction:column;gap:var(--s4)}}

/* Button: Tinte, sonst nichts */
a.btn,.btn{
  display:inline-flex;align-items:center;
  font-family:var(--sach);font-weight:700;font-size:17px;line-height:1;
  background:var(--tinte);color:var(--papier);
  padding:19px 30px;text-decoration:none;
  transition:transform 180ms var(--ease-ui),background 180ms var(--ease-ui);
}
.btn:hover{transform:translateY(-1px);background:#000}
.btn:active{transform:translateY(0) scale(.985)}
.mikro{font-size:15px;color:var(--sekundaer);margin-top:var(--s4)}
.btn-abstand{margin-top:var(--s6)}

/* Links */
a{color:var(--rose-tief)}
.jan a:not(.btn),.check a{color:var(--rose-tief);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;transition:text-decoration-thickness 160ms var(--ease-ui)}
.jan a:not(.btn):hover,.check a:hover{text-decoration-thickness:2px}
a.btn{color:var(--papier)}
a:focus-visible,button:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}

/* Selbst-Check: Karte auf Weiß */
.check{background:var(--weiss);border:1px solid var(--linie);padding:var(--s8) var(--s7)}
.check ul{list-style:none;margin:var(--s6) 0 0;padding:0}
.check li{padding-block:var(--s4);border-top:1px solid var(--linie);font-family:var(--stimme);font-style:italic;font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);line-height:1.35}
.check li:first-child{border-top:0;padding-top:0}
.check .schwelle{margin-top:var(--s6);font-family:var(--sach);font-style:normal;font-size:20px}
@media(max-width:640px){.check{padding:var(--s6) var(--s5)}}

/* Ablauf */
.ablauf{list-style:none;margin:var(--s6) 0 0;padding:0;counter-reset:n}
.ablauf li{counter-increment:n;display:grid;grid-template-columns:2.75rem 1fr;gap:var(--s5);padding-block:var(--s5);border-top:1px solid var(--linie)}
.ablauf li::before{content:counter(n);font-family:var(--sach);font-weight:700;font-size:15px;color:var(--sekundaer);padding-top:4px}
.ablauf p{margin:0}
.ablauf strong{font-weight:700}

/* Stimmen: Video-Plätze */
.stimmen{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media(min-width:700px){.stimmen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.stimmen{grid-template-columns:repeat(3,1fr)}}
.vslot{background:var(--weiss);border:1px solid var(--linie)}
.vslot .frame{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:var(--papier);border-bottom:1px solid var(--linie);position:relative}
.vslot .frame::before{content:"";width:64px;height:64px;border-radius:50%;background:var(--weiss);border:1px solid var(--linie);position:absolute;box-shadow:0 6px 18px -6px rgba(33,31,28,.2)}
.vslot .frame::after{content:"";width:0;height:0;border-left:16px solid var(--tinte);border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;margin-left:4px;opacity:.75}
.vslot figcaption{padding:var(--s4) var(--s5);font-size:15px;color:var(--sekundaer)}
.vslot video{width:100%;height:100%;object-fit:cover;display:block}

/* Fuß */
.fuss{border-top:1px solid var(--linie);margin-top:var(--s11);padding-block:var(--s8)}
.fuss-innen{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);justify-content:space-between;align-items:baseline}
.fuss p{margin:0;font-size:15px;color:var(--sekundaer)}
.fuss a{color:var(--sekundaer)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--rand);top:var(--s3);z-index:99;background:var(--tinte);color:var(--papier);padding:12px 18px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}