:root{--ink:#16171A;--accent:#F26522;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box;margin:0}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:block;src:url("instrument-sans-latin.woff2?v=2ee17598a9") format("woff2")}
body{font-family:"Instrument Sans",system-ui,sans-serif;background:var(--ink);color:#fff;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent,#F26522)}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
/* Kopfzeile: gemeinsam.css */
.aWrap{flex:1;padding:clamp(24px,5vh,64px) var(--pad) clamp(40px,8vh,96px);position:relative;overflow:hidden}
.aWrap::before{content:"";position:absolute;inset:0;background:radial-gradient(60vw 60vh at 88% 0%,rgba(242,101,34,.13),transparent 68%);pointer-events:none}
.aGrid{position:relative;z-index:1;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,4.5vw,88px);align-items:start}
@media(max-width:900px){.aGrid{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vh,44px)}}
.eyebrow{display:inline-block;font-size:clamp(10.5px,.72vw,12px);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:clamp(14px,2.2vh,22px)}
h1{font-size:clamp(30px,3.6vw,56px);line-height:1.03}
h1 .sub2{display:block;color:rgba(255,255,255,.56)}
.lead{margin-top:clamp(14px,2.2vh,22px);font-size:clamp(14px,1.05vw,18px);line-height:1.6;color:rgba(255,255,255,.72);max-width:50ch;text-wrap:pretty}
.get{margin-top:clamp(24px,4vh,40px)}
.get h3{font-size:clamp(11px,.76vw,12.5px);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58);margin-bottom:clamp(14px,2vh,18px)}
.get ul{display:flex;flex-direction:column;gap:12px}
.get li{display:flex;gap:13px;font-size:clamp(13.5px,.98vw,16.5px);line-height:1.5;color:rgba(255,255,255,.84);text-wrap:pretty}
.get li::before{content:"\2713";flex:none;color:var(--accent);font-weight:700}
.fields{margin-top:14px;font-size:clamp(11px,.78vw,13px);letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.55)}
.talk{margin-top:clamp(26px,4.4vh,44px);border-top:1px solid rgba(255,255,255,.18);padding-top:clamp(18px,3vh,28px)}
.talk p{font-size:clamp(13.5px,.95vw,16px);color:rgba(255,255,255,.66);margin-bottom:14px}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);padding:clamp(22px,2.6vw,40px)}
.card h2{font-size:clamp(19px,1.6vw,26px);line-height:1.15}
.card .small{margin-top:10px;font-size:clamp(12.5px,.88vw,14.5px);color:rgba(255,255,255,.6)}
.f{margin-top:clamp(18px,2.8vh,26px)}
.lab{display:block;font-size:clamp(10.5px,.74vw,12px);letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.58);margin-bottom:8px}
input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);color:#fff;font:inherit;font-size:clamp(15px,1.15vw,19px);font-weight:600;letter-spacing:-.01em;padding:9px 0;outline:none;transition:border-color .3s ease}
input::placeholder{color:rgba(255,255,255,.3)}
input:focus{border-color:var(--accent)}
.btn{background:var(--accent);color:#fff;font-size:clamp(14px,1vw,16.5px);font-weight:700;padding:clamp(14px,1.9vh,18px) clamp(20px,1.8vw,28px);display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;font-family:inherit;cursor:pointer;transition:background .3s ease}
.btn:hover{background:var(--accent,#F26522);color:#fff}
.btn[disabled]{opacity:.34;cursor:not-allowed}
.card .btn{width:100%;margin-top:clamp(22px,3.4vh,32px)}
.ghost{background:transparent;border:1px solid rgba(255,255,255,.26);color:#fff}
.ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.45);color:#fff}
.note{margin-top:14px;font-size:clamp(11px,.78vw,13px);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.55);text-align:center}
.dankeGrid{align-items:center}
.dankeGrid .mark{margin-bottom:clamp(16px,2.4vh,24px)}
.dankeGrid .flow{margin-top:clamp(20px,3.2vh,30px)}
.next{border-left:1px solid rgba(255,255,255,.16);padding:clamp(6px,1.4vh,14px) 0 clamp(6px,1.4vh,14px) clamp(24px,3vw,56px)}
@media(max-width:900px){.next{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding:clamp(24px,4vh,32px) 0 0}}
.next h2{font-size:clamp(24px,2.4vw,40px);line-height:1.06}
.nLead{margin-top:clamp(12px,2vh,18px);font-size:clamp(14px,1.02vw,17.5px);line-height:1.6;color:rgba(255,255,255,.72);max-width:38ch;text-wrap:pretty}
.next .btn{margin-top:clamp(20px,3.2vh,30px)}
.yourSite{margin-bottom:clamp(16px,2.4vh,24px);display:flex;flex-direction:column;gap:6px}
/* `display:flex` oben schlaegt sonst das hidden-Attribut: ohne Anfrage stand der Platzhalter
   „deinbetrieb.de" sichtbar auf der Seite (gefunden im Handy-Durchgang 23.09.2026). */
.yourSite[hidden]{display:none}
.yourSite span{font-size:clamp(10.5px,.74vw,12px);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.56)}
.yourSite a{font-size:clamp(15px,1.15vw,19px);font-weight:700;letter-spacing:-.02em;color:#fff}
.yourSite a:hover{color:var(--accent)}
.backLink{margin-top:clamp(16px,2.4vh,22px);font-size:clamp(12.5px,.88vw,14.5px);color:rgba(255,255,255,.62)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mark{width:50px;height:50px;border:1.5px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:22px;margin-bottom:18px}

.flow{list-style:none;margin:clamp(20px,3.2vh,30px) 0 0;padding:0;display:flex;flex-direction:column}
.flow li{display:flex;align-items:baseline;gap:14px;border-top:1px solid rgba(255,255,255,.16);padding:13px 0;font-size:clamp(13.5px,.95vw,16px);color:rgba(255,255,255,.84)}
.flow li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.flow b{font-size:clamp(10.5px,.74vw,12px);letter-spacing:.13em;font-weight:700;color:rgba(255,255,255,.66)}
.flow .ok{color:#fff;font-weight:600}
.flow .ok b{color:var(--accent)}
.flow .ok::after{content:"\2713";margin-left:auto;color:var(--accent);font-weight:700}
.card .ghost{width:100%;margin-top:clamp(20px,3vh,26px)}

/* Formular an modvio (23.09.2026): echte Labels, Honigtopf, Fehler- und Datenschutzzeile */
label.f{display:block}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
input[aria-invalid="true"]{border-bottom-color:#ff8a8a}
.fehler{margin-top:14px;font-size:clamp(13px,.9vw,15px);line-height:1.5;color:#ff9d9d}
.hinweis{margin-top:12px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.55);text-align:center}
.hinweis a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:2px}
.card .send[aria-busy="true"]{opacity:.7;cursor:progress}

/* Handy (24.09.2026, iPhone-Screenshot des Users: der Termin-Knopf hing halb an der Unterkante).
   Der erste Bildschirm endet jetzt sauber mit dem Sprung zum Formular: Einstieg, „Du bekommst" und
   Knopf, dazwischen teilen sich die freien Zeilen 4 und 6 genau den Rest. Das unsichtbare ::after spannt
   Zeile 1 bis 7 auf die sichtbare Hoehe unter Kopfzeile (72 px) und Innenabstand (20 px). Danach das
   Formular, dann der Weg zum Erstgespraech. Die Themenzeile entfaellt hier, sie steht woertlich im
   Lead. Schrift waechst mit der Hoehe, sonst klaffte auf hohen Handys ein Loch von 160 bis 300 px.
   Auf niedrigen Handys (iPhone SE) faellt die Zwischenzeile „Du bekommst" weg, auf sehr niedrigen
   (320 x 460) und im Querformat steht der ganze Block hinter dem Formular. */
a.btn.aSprung{display:none}
/* Der Weg zum Erstgespraech steht im Quelltext hinter dem Formular, damit Tab- und Lesereihenfolge der
   Anzeige auf dem Handy folgen (Pruefer 24.09.2026). Breit steht er wie vorher links unter dem Einstieg:
   Zeile 1 traegt den Einstieg, die freie Zeile 2 den Termin, das Formular spannt beide. */
@media(min-width:901px){
  .aAnfrage .aGrid{grid-template-rows:auto 1fr;row-gap:0}
  .aAnfrage .aIntro{grid-column:1;grid-row:1}
  .aAnfrage .card{grid-column:2;grid-row:1/3}
  .aAnfrage .talk{grid-column:1;grid-row:2}
}
/* Einspaltig steht der Termin mit dem Rasterabstand unter dem Formular, ohne eigenen Aussenabstand. */
@media(max-width:900px){.aAnfrage .talk{margin-top:0}}
@media(max-width:620px), (pointer:coarse) and (max-height:500px) and (orientation:landscape){
  .aAnfrage{padding-top:20px}
  .aAnfrage .aGrid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto minmax(0,1fr) repeat(3,auto);gap:0}
  .aAnfrage .aGrid::after{content:"";grid-row:1/8;grid-column:1;height:calc(100svh - 72px - 20px);pointer-events:none}
  .aIntro{display:contents}
  .aIntro>*,.aAnfrage .card,.aAnfrage .talk{grid-column:1}
  .aIntro .eyebrow{grid-row:1;justify-self:start}
  .aIntro h1{grid-row:2}
  .aIntro .lead{grid-row:3}
  .aIntro .get{grid-row:5;margin-top:22px}
  .aIntro .get h3{margin-bottom:10px}
  .aIntro .get ul{gap:8px}
  .aIntro .fields{display:none}
  .aAnfrage a.btn.aSprung{display:flex;grid-row:7;justify-self:start;margin:20px 0 18px}
  .aAnfrage .card{grid-row:8}
  .aAnfrage .talk{grid-row:9;margin-top:clamp(26px,4.4vh,44px)}
}
@media(max-width:620px){.aIntro h1{font-size:clamp(30px,5.4svh,46px)}.aIntro .lead{font-size:clamp(14px,2.2svh,17px)}
  .aIntro .get li{font-size:clamp(13.5px,2.1svh,16px)}}
@media(max-width:620px) and (max-height:600px){.aIntro .get h3{display:none}}
@media(max-width:620px) and (max-height:520px), (pointer:coarse) and (max-height:500px) and (orientation:landscape){.aIntro .get{grid-row:9}.aIntro .get h3{display:block}.aAnfrage .talk{grid-row:10}}