/* Richtung B «Schweizer Plakat» (Ines 02.11.2026): Raster, eine Schrift, ein gelber Kreis */
:root{
  --tinte:#111110; --tinte-hell:#242422; --tinte-linie:#44443F;
  --gelb:#F2C12E; --gelb-hover:#E0A800;
  --papier:#F1F1EE; --weiss:#FAFAF8; --grau:#B5B5AE;
  --schrift:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --rand:clamp(18px,4.2vw,60px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font:17px/1.5 var(--schrift);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
p{margin:0 0 16px;max-width:62ch}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* Flächen: links der Titel, rechts der Inhalt */
.s{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:clamp(52px,7vw,104px) var(--rand);border-top:2px solid var(--tinte)}
.s>h2{grid-column:1/span 5;grid-row:1/span 20;align-self:start}
.s>*:not(h2){grid-column:6/-1}
.s-gelb{background:var(--gelb)}
.s-dunkel{background:var(--tinte);color:var(--weiss)}
.s-hell,.s-beton{background:var(--papier)}
@media(max-width:900px){.s{display:block}}

/* Schrift */
h1,h2{font-family:var(--schrift);font-weight:500;margin:0}
h1{letter-spacing:-.045em;line-height:.94}
h2,h2.lang{font-size:clamp(36px,4.3vw,64px);line-height:1.02;letter-spacing:-.035em;margin-bottom:clamp(24px,3vw,40px)}
h3{font-family:var(--schrift);font-weight:700;margin:0}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.45}
.lead:last-child{margin-bottom:0}

/* Knöpfe: rund wie eine Taste am Telefon */
.s>.btn,.s>.klein{justify-self:start}
.btn{display:inline-block;background:var(--tinte);color:var(--papier);font:700 18px var(--schrift);text-decoration:none;padding:16px 28px;border:0;border-radius:999px;cursor:pointer}
.btn:hover{background:#000}
.s-dunkel .btn{background:var(--gelb);color:var(--tinte)}
.s-dunkel .btn:hover{background:var(--gelb-hover)}
.klein{display:block;margin-top:9px;font-size:14.5px}
.s-dunkel .klein{color:var(--grau)}
.btn-zweit{display:inline-block;white-space:nowrap;border:2px solid var(--tinte);color:var(--tinte);font:700 15px var(--schrift);text-decoration:none;padding:9px 18px;border-radius:999px}
.btn-zweit:hover{background:var(--tinte);color:var(--papier)}

/* Kopfzeile */
.kopf{display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:3;font-weight:500;font-size:15px;padding-bottom:14px;border-bottom:2px solid currentColor}
.kopf img{height:30px;width:auto}
.kopf nav{display:flex;gap:clamp(18px,4vw,64px)}
.kopf a{text-decoration:none}
.kopf nav a:hover{text-decoration:underline}
@media(max-width:760px){.kopf nav a:not(:first-child){display:none}}

/* Homepage: Plakat */
.plakat{position:relative;min-height:100svh;padding:22px var(--rand) 0;overflow:hidden;display:flex;flex-direction:column;background:var(--papier)}
.plakat::before{content:"";position:absolute;z-index:0;right:-10vw;bottom:-11svh;width:min(61vw,98svh);aspect-ratio:1;border-radius:50%;background:var(--gelb)}
.plakat h1{font-size:clamp(84px,min(13.2vw,21svh),230px);text-transform:lowercase;margin:clamp(14px,2.4vw,30px) 0 clamp(20px,2.4vw,32px) -.03em;position:relative;z-index:1}
.plakat h1 span{display:block}
.plakat .ines{position:absolute;z-index:2;right:5vw;bottom:0;height:min(82svh,51vw);width:auto;max-width:none}
.plakat .block{position:relative;z-index:3;margin-top:auto;padding:0 0 clamp(24px,3vw,44px);max-width:560px}
.plakat .block p{font-size:18px;line-height:1.45}
.plakat .block p.weiche{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:20px 0 0;font-size:15.5px}
@media(min-width:1280px){.plakat .block p.weiche{width:max-content;max-width:none;flex-wrap:nowrap}}
@media(max-width:760px){
  .plakat{min-height:auto}
  .plakat::before{right:-14vw;bottom:auto;top:calc(62vw + 16px);width:88vw}
  .plakat h1{font-size:22.5vw;margin-bottom:0}
  .plakat .ines{position:relative;right:auto;height:auto;width:72%;margin:-5vw 2% 0 auto}
  .plakat .block{margin:0 calc(var(--rand)*-1);padding:22px var(--rand) 28px;max-width:none;background:var(--papier)}
}

/* Szenen und Listen */
.szenen{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-bottom:28px}
.szenen p{margin:0;padding:16px 0 26px;border-top:2px solid currentColor;font-weight:500;font-size:clamp(18px,1.55vw,22px);line-height:1.3;max-width:none}
@media(max-width:760px){.szenen{grid-template-columns:1fr}}
.stark{font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.2;max-width:30ch;margin-bottom:0}

/* Stufen: Reihenfolge steckt im Ablauf von oben nach unten */
.stufe{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 24px;padding:18px 0 34px;border-top:2px solid currentColor}
.stufe h3{font-weight:500;font-size:clamp(23px,2.1vw,30px);line-height:1.1;letter-spacing:-.02em}
.stufe p{margin:0}
@media(max-width:760px){.stufe{grid-template-columns:1fr}}

/* Für wen */
.fuerwen{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}
.fuerwen h3{font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.15;letter-spacing:-.015em;margin-bottom:16px}
.fuerwen ul{list-style:none;margin:0;padding:0}
.fuerwen li{padding:11px 0;border-top:1px solid currentColor;font-size:16.5px;line-height:1.35}
@media(max-width:1000px){.fuerwen{grid-template-columns:1fr}}
.branchen{margin:30px 0 0}

/* Über mich */
.s>.ueber{grid-column:1/-1}
.ueber{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:end}
.ueber.ohne-bild{display:block}
.ohne-bild .text{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.ohne-bild .text>h2{grid-column:1/span 5;grid-row:1/span 10;align-self:start}
.ohne-bild .text>*:not(h2){grid-column:6/-1}
.s.mit-bild{padding-bottom:0}
.ueber .text{padding-bottom:clamp(52px,7vw,104px)}
.ueber.ohne-bild .text{padding-bottom:0}
.zitat{font-weight:500;font-size:clamp(28px,3vw,44px);line-height:1.06;letter-spacing:-.03em;margin:26px 0 0;max-width:24ch}
@media(max-width:900px){.ohne-bild .text{display:block}}
@media(max-width:760px){.ueber{grid-template-columns:1fr}.ueber img{width:82%;margin-left:auto}.ueber .text{padding-bottom:10px}}

/* Formular */
form{max-width:640px;margin-top:26px}
.feld{margin-bottom:18px}
label{display:block;font-size:14.5px;font-weight:500;color:var(--grau);margin-bottom:6px}
input,textarea{width:100%;font:16px var(--schrift);padding:13px 14px;border:1px solid var(--tinte-linie);background:var(--tinte-hell);color:var(--weiss);border-radius:0}
input:focus,textarea:focus{outline:2px solid var(--gelb);outline-offset:1px;border-color:var(--gelb)}
textarea{min-height:110px;resize:vertical}
textarea::placeholder{color:var(--grau);opacity:1}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.zwei{grid-template-columns:1fr}}
.hinweis{font-size:14px;color:var(--grau);margin-top:14px}
.honig{position:absolute;left:-9999px}

/* Telefon-Seite: der Anruf */
.anruf{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;padding:22px var(--rand) calc(22px + env(safe-area-inset-bottom));background:var(--papier)}
.anruf::before{content:"";position:absolute;z-index:0;right:-8vw;top:50%;transform:translateY(-50%);width:min(66vw,84svh);aspect-ratio:1;border-radius:50%;background:var(--gelb)}
.anruf>*{position:relative;z-index:1}
.anruf .mitte{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.status{font-weight:500;font-size:clamp(15px,1.4vw,19px);margin:0 0 14px;display:flex;gap:10px;align-items:center}
.punkt{width:11px;height:11px;border-radius:50%;background:currentColor;animation:puls 1.1s infinite}
@keyframes puls{50%{opacity:.2}}
.anruf h1{font-size:clamp(68px,min(14.5vw,24svh),230px);line-height:.96;max-width:9ch;transform-origin:30% 50%}
.klingelt h1{animation:rattern 2.6s infinite}
@keyframes rattern{0%,62%,100%{transform:none}64%,72%,80%,88%{transform:translateX(-5px) rotate(-.35deg)}68%,76%,84%,92%{transform:translateX(5px) rotate(.35deg)}}
.tasten{display:flex;gap:clamp(10px,2vw,20px)}
.taste{flex:1 1 0;max-width:420px;border:2px solid var(--tinte);background:var(--papier);color:var(--tinte);font:700 clamp(18px,1.8vw,23px) var(--schrift);padding:clamp(16px,2vw,22px) 10px;border-radius:999px;cursor:pointer}
.taste.ab{background:var(--tinte);color:var(--papier)}
.taste:hover{transform:translateY(-2px)}
.anruf .hinweis{color:inherit;margin:12px 0 0}
.anruf.weg,.anruf.dran{background:var(--tinte);color:var(--weiss)}
.anruf.weg::before,.anruf.dran::before{display:none}
.weg h1{font-size:clamp(44px,min(8vw,14svh),124px);line-height:1;max-width:18ch}
.weg h1 em{font-style:normal;color:var(--gelb)}
.weg .punkt{display:none}
.dran .punkt{color:var(--gelb)}
.dran h1{display:none}
.weg .taste,.dran .taste{border-color:var(--gelb);color:var(--gelb);background:transparent}
.weg .taste.ab{background:var(--gelb);color:var(--tinte)}
#verlauf{display:none;max-width:980px;min-height:40svh}
.dran #verlauf{display:block}
#verlauf p{font-weight:500;font-size:clamp(25px,3.6vw,52px);line-height:1.08;letter-spacing:-.025em;margin:0 0 16px;color:var(--gelb);max-width:none}
#verlauf p.k{color:var(--weiss);font-weight:400;font-size:clamp(20px,2.4vw,32px)}
#verlauf p.alt{opacity:.32}
.gelbe-zeile{color:var(--gelb)}
audio{width:100%;max-width:520px;margin:6px 0 8px;display:block}

/* Handy: Knopf bleibt sichtbar */
.mobil-cta{display:none}
@media(max-width:700px){
  .mobil-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--tinte);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .mobil-cta[hidden]{display:none}
  .mobil-cta .btn{display:block;text-align:center;background:var(--gelb);color:var(--tinte)}
  body{padding-bottom:76px}
}

footer{background:var(--tinte);color:var(--grau);padding:36px var(--rand);font-size:15px;border-top:1px solid var(--tinte-linie)}
footer a{color:var(--weiss);text-decoration:none}
footer a:hover{color:var(--gelb)}
.footzeile{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.footlinks{display:flex;gap:22px;flex-wrap:wrap}
footer .logo{height:32px;width:auto;margin-bottom:14px}
footer p{margin:0}

@media(prefers-reduced-motion:reduce){.klingelt h1,.punkt{animation:none}html{scroll-behavior:auto}}