/* umfrage.css – ausgelöst aus umfrage.html.
   Gemeinsame Vierpass-Logik liegt in assets/js/vierpass.js. */

:root{
  --bg:#08080A;
  --bg-2:#0E0E12;
  --card:#121218;
  --card-hi:#17171F;
  --fg:#FFFFFF;
  --fg-2:rgba(255,255,255,.68);
  --fg-3:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.28);
  --vio:#5E17EB;      /* Flyer-Lila – Flächen, Buttons */
  --pink:#A97BFF;     /* helles Lila – Akzente, aktiver Zustand */
  --cyan:#8B5CFF;     /* mittleres Lila – erledigt, sekundär */
  --display:"Antonio","Oswald","Arial Narrow",Impact,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.86,.3,1);

  /* Vertikaler Rhythmus
     --luft-opts  Abstand von Text zu den Auswahlbuttons. Ein einziger Wert,
                  damit der Sprung zwischen Screens mit und ohne Hinweiszeile
                  verschwindet (vorher 14px bzw. 26px).
     --luft-block Abstand zu einem zweiten Frageblock auf demselben Screen. */
  --luft-opts:clamp(20px,3vh,30px);
  --luft-block:clamp(30px,4.4vh,42px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100svh;
}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--pink);color:#fff}

/* ---------------- Fortschrittsanzeige ---------------- */
#bar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(8,8,10,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
  padding-top:env(safe-area-inset-top);
}
#bar.on{transform:translateY(0)}
.bar-in{
  max-width:1040px;margin:0 auto;
  padding:12px clamp(16px,4vw,32px) 0;
  display:flex;align-items:center;gap:14px;
}
.mark{flex:none;width:22px;height:22px;color:var(--fg);opacity:.9}
.steps{display:flex;flex:1;gap:6px;list-style:none;margin:0;padding:0}
.steps li{
  flex:1;min-width:0;
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:10px;color:var(--fg-3);
  padding-bottom:9px;
  border-bottom:2px solid rgba(255,255,255,.12);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.steps li.done{color:var(--fg-3);border-bottom-color:var(--cyan)}
.steps li.now{color:var(--pink);border-bottom-color:var(--pink)}
.counter{
  flex:none;font-family:var(--display);font-weight:600;
  letter-spacing:.14em;font-size:11px;color:var(--fg-3);
  font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
  .steps li{font-size:0;padding-bottom:8px;border-bottom-width:3px}
  .steps li.now{font-size:10px;flex:2.4}
}

/* Die Telefon-Anpassungen stehen am Ende der Datei. Sie überschreiben
   Regeln, die weiter unten definiert werden – bei gleicher Spezifität
   entscheidet die Reihenfolge, nicht die Media Query. */

/* ---------------- Layout ---------------- */
#app{
  max-width:1040px;
  margin:0 auto;
  padding:clamp(72px,12vh,120px) clamp(16px,4vw,32px) clamp(120px,18vh,160px);
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
}
#app.top{justify-content:flex-start}
.screen{animation:enter .55s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.screen.leave{animation:leave .28s ease forwards}
@keyframes leave{to{opacity:0;transform:translateY(-14px)}}

/* ---------------- Typografie ---------------- */
.eyebrow{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.34em;
  font-size:clamp(10px,1.2vw,13px);
  color:var(--pink);margin:0 0 clamp(14px,2.4vh,22px);
  text-indent:.34em;
}
.eyebrow.cy{color:var(--cyan)}
.eyebrow.nt{color:var(--fg-3)}
/* Überschriften stehen bewusst eng, aber 1.02 ließ die per <br> umbrochenen
   Versalzeilen aneinanderkleben – 1.07 bleibt plakativ und wird lesbar. */
h1{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.005em;
  line-height:1.07;margin:0;
  font-size:clamp(38px,7.4vw,86px);
}
h2{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.005em;
  line-height:1.07;margin:0;
  font-size:clamp(30px,5.4vw,60px);
}
h2 .pink{color:var(--pink)}
h2 .cy{color:var(--cyan)}
.sub{
  margin:clamp(16px,2.6vh,24px) 0 0;
  font-size:clamp(16px,1.9vw,21px);
  line-height:1.55;color:var(--fg);
  max-width:34ch;font-weight:500;
}
p.txt{
  margin:clamp(14px,2.2vh,20px) 0 0;
  font-size:clamp(14.5px,1.5vw,16.5px);
  line-height:1.68;color:var(--fg-2);
  max-width:62ch;
}
p.txt em{font-style:normal;color:var(--fg)}

/* Der Überschriftenblock trägt den Abstand zu allem, was danach kommt –
   Auswahlfelder, Karten, Slider oder Textfeld. Das ist die einzige Stelle,
   an der dieser Abstand entsteht, und sie greift auch auf Screens mit reiner
   Überschrift (z. B. „Wie oft waren Sie bisher hier?"). Dort hatte h2 mit
   margin:0 zuvor überhaupt keinen Abstand, die Felder überschnitten sich.
   Der untere Abstand von .q bzw. .hint kollabiert damit, statt sich zu
   addieren – der Wert bleibt also in jedem Fall genau --luft-opts. */
.kopf{margin-bottom:var(--luft-opts)}

/* Frage und Hinweiszeile tragen denselben unteren Abstand. Dadurch ist der
   Weg zu den Auswahlbuttons überall gleich weit, egal welches der beiden
   Elemente zuletzt steht. */
.q{
  margin:clamp(16px,2.6vh,26px) 0 var(--luft-opts);
  font-size:clamp(15px,1.7vw,19px);
  line-height:1.55;color:var(--fg);
  max-width:52ch;font-weight:500;
}
.hint{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;color:var(--fg-3);
  margin:0 0 var(--luft-opts);text-indent:.2em;
}

/* Folgt der Frage noch eine Hinweiszeile, gehören beide zusammen und
   brauchen dazwischen nur wenig Luft. Die Klasse setzt heading(). */
.q.eng{margin-bottom:clamp(8px,1.2vh,12px)}

/* Hinweis direkt unter einer Überschrift, ohne Frage dazwischen.
   Etwas großzügiger als der Wert von .q: die kleine Versalschrift mit
   Sperrung wirkt optisch enger, als sie gemessen ist. */
.hint.nach-titel{margin-top:clamp(20px,3.2vh,32px)}

/* Zweiter Frageblock auf demselben Screen. Ersetzt die früheren
   Inline-Styles im JavaScript (34px bzw. 38px). */
.q.folge,
.hint.folge{margin-top:var(--luft-block)}

/* ---------------- Vierpass ---------------- */
.quatre{display:block}
.quatre .vp-line{fill:none;stroke:currentColor;stroke-width:4.6;stroke-linejoin:round}
.quatre .vp-ring{fill:none;stroke:currentColor;stroke-width:3.4}
.quatre .vp-photo{opacity:.5;filter:grayscale(1) contrast(1.25) brightness(1.15)}
.hero-mark{
  width:clamp(52px,7vw,74px);height:auto;color:var(--fg);
  margin:0 0 clamp(22px,3.4vh,34px);opacity:.95;
}
.hero-mark.spin .vp-line,.hero-mark.spin .vp-ring{
  stroke-dasharray:640;stroke-dashoffset:640;
  animation:draw 2.2s var(--ease) .2s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.watermark{
  position:fixed;right:-9vw;bottom:-11vh;z-index:-1;
  width:52vw;max-width:640px;height:auto;
  color:#fff;opacity:.035;pointer-events:none;
}

/* ---------------- Karten & Auswahl ---------------- */
.opts{display:grid;gap:10px;margin:0;padding:0;list-style:none}
/* min(…,100%) verhindert, dass eine Spalte breiter bleibt als das Fenster */
.opts.two{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.opts.cards{grid-template-columns:repeat(auto-fill,minmax(min(178px,100%),1fr));gap:12px}

.opt{
  position:relative;
  display:flex;align-items:center;gap:14px;
  width:100%;text-align:left;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:17px 18px;
  cursor:pointer;
  /* 1.45 statt 1.4: viele Optionstexte sind ganze Sätze und brechen um */
  font-size:15.5px;line-height:1.45;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.opt:hover{background:var(--card-hi);border-color:var(--line-2);transform:translateY(-2px)}
.opt:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.opt .box{
  flex:none;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--line-2);
  display:grid;place-items:center;
  transition:border-color .2s,background .2s;
}
.opt.multi .box{border-radius:6px}
.opt .box svg{width:12px;height:12px;opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s var(--ease)}
.opt.sel{border-color:var(--pink);background:rgba(94,23,235,.22)}
.opt.sel .box{background:var(--vio);border-color:var(--pink)}
.opt.sel .box svg{opacity:1;transform:none;color:#fff}
.opt.sel .label{color:#fff}
.opt .label{color:var(--fg-2);transition:color .2s;overflow-wrap:break-word;min-width:0}
.opt:hover .label{color:#fff}

/* Nutzungs-Karten */
.card{
  flex-direction:column;align-items:flex-start;gap:12px;
  padding:18px 16px 16px;min-height:118px;
  justify-content:space-between;
}
.card .ico{width:26px;height:26px;color:var(--fg);opacity:.8;transition:color .2s,opacity .2s}
.card .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card.sel .ico{color:var(--pink);opacity:1}
/* Die Karten sind schmal, deutsche Komposita lang. Ohne Umbruchregel ragt
   ein Wort wie „Firmenveranstaltungen" über den Kartenrand hinaus – es gibt
   darin keine Stelle, an der der Browser von sich aus trennen dürfte.
   hyphens:auto nutzt die Sprache aus <html lang="de">, break-word ist das
   Netz für den Fall, dass keine Trennstelle gefunden wird. */
.card .label{
  font-size:14.5px;line-height:1.35;font-weight:500;
  overflow-wrap:break-word;
  hyphens:auto;
}
.card .tick{
  position:absolute;top:12px;right:12px;
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line-2);
  display:grid;place-items:center;
  transition:background .2s,border-color .2s;
}
.card .tick svg{width:11px;height:11px;opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s var(--ease)}
.card.sel .tick{background:var(--vio);border-color:var(--pink)}
.card.sel .tick svg{opacity:1;transform:none;color:#fff}

.group{margin:0 0 26px}
.group-h{
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:12px;color:var(--cyan);
  margin:0 0 12px;text-indent:.2em;
}

/* Sonstiges-Feld */
.other{
  margin-top:10px;width:100%;
  background:transparent;border:1px solid var(--line);
  border-radius:12px;padding:15px 16px;
  color:#fff;font-size:15px;
}
.other::placeholder{color:var(--fg-3)}
.other:focus{outline:none;border-color:var(--pink)}

/* ---------------- Skala ---------------- */
.scale{margin:6px 0 4px}
.scale-labels{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--fg-3);margin-bottom:14px;
}
.dots{display:flex;gap:10px}
.dot{
  flex:1;height:56px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);
  cursor:pointer;display:grid;place-items:center;
  transition:background .2s,border-color .2s,transform .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.dot i{
  display:block;width:12px;height:12px;border-radius:50%;
  border:1.5px solid var(--line-2);transition:all .2s var(--ease);
}
.dot:hover{border-color:var(--line-2);transform:translateY(-2px)}
.dot.sel{border-color:var(--pink);background:rgba(94,23,235,.22)}
.dot.sel i{background:var(--pink);border-color:var(--pink);transform:scale(1.25)}

/* ---------------- Bipolare Slider ---------------- */
.pole{margin:0 0 30px}
.pole-h{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:12.5px;color:var(--fg);margin:0 0 12px;
  display:flex;align-items:center;gap:10px;
}
.pole-h span{color:var(--fg-3);font-weight:600}
.rng{
  -webkit-appearance:none;appearance:none;
  width:100%;height:34px;background:transparent;cursor:pointer;
}
.rng::-webkit-slider-runnable-track{height:2px;background:var(--line-2);border-radius:2px}
.rng::-moz-range-track{height:2px;background:var(--line-2);border-radius:2px}
.rng::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--fg);border:none;margin-top:-10px;
  box-shadow:0 0 0 0 rgba(169,123,255,.35);
  transition:box-shadow .2s,background .2s;
}
.rng::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--fg);border:none;
}
.rng:hover::-webkit-slider-thumb,.rng:focus::-webkit-slider-thumb{
  background:var(--pink);box-shadow:0 0 0 8px rgba(169,123,255,.18);
}
.rng.moved::-webkit-slider-thumb{background:var(--pink)}
.rng.moved::-moz-range-thumb{background:var(--pink)}
.pole-ends{
  display:flex;justify-content:space-between;gap:14px;
  font-size:12.5px;color:var(--fg-3);margin-top:-4px;
}

/* ---------------- Freitext ---------------- */
.ta{
  /* Derselbe Abstand wie zu den Auswahlbuttons. Steht darüber eine Frage mit
     eigenem unteren Abstand, kollabieren beide Werte zu einem. */
  margin-top:var(--luft-opts);
  width:100%;min-height:190px;resize:vertical;
  background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px;
  font-size:17px;line-height:1.6;color:#fff;
}
.ta::placeholder{color:var(--fg-3)}

/* Datenschutzhinweis unter den Freitextfeldern */
.ta-hinweis{
  margin:10px 2px 0;
  font-size:12.5px;line-height:1.55;
  color:var(--fg-3);max-width:60ch;
}
.ta:focus{outline:none;border-color:var(--pink)}

/* ---------------- Zustimmung ---------------- */
.dsgvo{
  list-style:none;margin:var(--luft-opts) 0 0;padding:0;
  display:grid;gap:14px;max-width:62ch;
}
.dsgvo li{
  position:relative;padding-left:20px;
  font-size:14.5px;line-height:1.65;color:var(--fg-2);
}
.dsgvo li:before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:var(--pink);
}
.dsgvo b{color:#fff;font-weight:600}

/* Die Checkbox ist ein echtes <input>, nur optisch ersetzt – damit bleiben
   Tastaturbedienung und Screenreader unverändert nutzbar. */
.zu-box{
  display:flex;align-items:flex-start;gap:14px;
  margin:clamp(24px,3.4vh,34px) 0 0;max-width:62ch;
  padding:18px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.zu-box:hover{background:var(--card-hi);border-color:var(--line-2)}
.zu-box.an{border-color:var(--pink);background:rgba(94,23,235,.18)}

/* Optisch verbergen, aber fokussierbar lassen */
.zu-box input{
  position:absolute;width:1px;height:1px;
  opacity:0;margin:0;pointer-events:none;
}
.zu-kasten{
  flex:none;width:24px;height:24px;border-radius:7px;
  border:1.5px solid var(--line-2);
  display:grid;place-items:center;
  transition:background .2s,border-color .2s;
}
.zu-kasten svg{width:13px;height:13px;opacity:0;transform:scale(.5);
  transition:opacity .2s,transform .25s var(--ease)}
.zu-box.an .zu-kasten{background:var(--vio);border-color:var(--pink)}
.zu-box.an .zu-kasten svg{opacity:1;transform:none;color:#fff}
.zu-box input:focus-visible ~ .zu-kasten{outline:2px solid var(--pink);outline-offset:3px}

.zu-text{font-size:14.5px;line-height:1.6;color:var(--fg-2)}
.zu-box.an .zu-text{color:#fff}
.zu-text a{color:var(--pink);text-decoration:underline;text-underline-offset:2px}
.zu-text a:hover{color:#fff}

/* Fußzeile mit den Rechtsseiten */
.rechtlich{
  margin:clamp(26px,3.4vh,36px) 0 0;
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;color:var(--fg-3);text-indent:.18em;
}
.rechtlich a{
  color:var(--fg-3);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.rechtlich a:hover{color:var(--fg);border-bottom-color:var(--line-2)}
.rechtlich a:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--fg);color:#000;border:2px solid var(--fg);
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;
  font-size:clamp(15px,1.8vw,19px);
  padding:16px clamp(26px,3.4vw,40px);
  border-radius:999px;cursor:pointer;text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{background:transparent;color:var(--fg);transform:translateY(-2px)}
.btn:hover svg{transform:translateX(5px)}
.btn svg{transition:transform .2s var(--ease)}
.btn:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
.btn.pink{background:var(--vio);border-color:var(--vio);color:#fff}
.btn.pink:hover{background:transparent;color:var(--pink);border-color:var(--pink)}
.btn[disabled]{opacity:.32;pointer-events:none}
.btn.ghost{background:transparent;color:var(--fg-3);border-color:transparent;padding-left:0;padding-right:0}
.btn.ghost:hover{color:var(--fg);transform:none}

.sendestatus{
  max-width:1040px;margin:0 auto 12px;
  padding:14px 18px;border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  font-size:14px;line-height:1.5;color:var(--fg-2);
}
.sendestatus.fehler{border-color:var(--pink);color:#fff;background:rgba(94,23,235,.18)}
.sendestatus[hidden]{display:none}

#nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:linear-gradient(to top,var(--bg) 58%,rgba(8,8,10,0));
  padding:22px clamp(16px,4vw,32px) calc(22px + env(safe-area-inset-bottom));
  display:none;
}
#nav.on{display:block}
.nav-in{
  max-width:1040px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.back{
  background:none;border:none;cursor:pointer;
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;font-size:11.5px;
  color:var(--fg-3);padding:10px 0;transition:color .2s;
}
.back:hover{color:var(--fg)}
.back[hidden]{visibility:hidden;display:block}

/* ---------------- Infobox / Start ---------------- */
.info{
  display:inline-flex;flex-wrap:wrap;gap:6px 18px;
  border:1px solid var(--line);border-radius:999px;
  padding:12px 24px;margin:clamp(24px,3.6vh,34px) 0 0;
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  font-size:11.5px;color:var(--fg-2);
}
.info b{color:var(--cyan);font-weight:600}
.fine{
  margin:18px 0 0;font-size:12.5px;line-height:1.6;
  color:var(--fg-3);max-width:56ch;
}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:clamp(26px,3.6vh,36px)}
.thesis{
  padding:0;margin:clamp(20px,3vh,30px) 0 0;
  font-size:14.5px;line-height:1.6;color:var(--fg-2);max-width:58ch;
}
.thesis b{display:block;color:#fff;font-weight:600;margin-bottom:3px}

/* ---------------- Timeline ---------------- */
.tl{list-style:none;margin:clamp(26px,4vh,42px) 0 0;padding:0;position:relative}
.tl li{position:relative;padding:0 0 clamp(22px,3vh,30px)}
.tl li:last-child{padding-bottom:0}
.tl .yr{
  font-family:var(--display);font-weight:700;
  font-size:clamp(22px,3vw,30px);line-height:1;
  color:var(--cyan);letter-spacing:.02em;
}
.tl li.now .yr{color:var(--pink)}
.tl .cap{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:11.5px;color:var(--fg);margin:7px 0 5px;text-indent:.2em;
}
.tl .d{margin:0;font-size:14px;line-height:1.65;color:var(--fg-2);max-width:56ch}
.statement{
  margin:clamp(34px,5vh,54px) 0 0;
}
.statement p{
  margin:0;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(26px,4.6vw,50px);line-height:1;
}
.statement cite{
  display:block;margin-top:12px;font-style:normal;
  font-size:13px;letter-spacing:.06em;color:var(--fg-3);
}
.src{margin:26px 0 0;font-size:11.5px;line-height:1.6;color:var(--fg-3)}

/* ---------------- Prioritäten ---------------- */
.count{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:12px;color:var(--pink);margin:0 0 14px;text-indent:.2em;
  font-variant-numeric:tabular-nums;
}
.opt.locked{opacity:.34;pointer-events:none}

/* ---------------- Danke ---------------- */
.end{text-align:center;display:flex;flex-direction:column;align-items:center}
.end .hero-mark{margin-inline:auto;width:clamp(66px,9vw,96px)}
.end h1{font-size:clamp(34px,6.4vw,74px)}
.end p.txt{margin-inline:auto;text-align:center}
.credits{
  margin:clamp(38px,6vh,60px) 0 0;
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;color:var(--fg-3);line-height:2.1;text-indent:.2em;
}
.credits b{display:block;color:var(--fg);font-weight:700;letter-spacing:.24em;margin-bottom:6px}
.motto{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  font-size:clamp(11px,1.3vw,13.5px);
  color:var(--cyan);margin:clamp(30px,4.4vh,44px) 0 0;
  line-height:1.9;text-indent:.18em;
}

/* ==========================================================================
   Telefone
   ==========================================================================
   Diese Blöcke stehen bewusst am Dateiende. Sie überschreiben Regeln aus dem
   Hauptteil, und bei gleicher Spezifität gewinnt die zuletzt notierte Regel –
   eine Media Query erhöht die Spezifität nicht. Weiter oben platziert hätten
   sie keine Wirkung.
   ========================================================================== */

/* Die Nutzungsauswahl hat 36 Karten. Einspaltig wäre das eine endlose
   Strecke, darum zwei schmalere Spalten. */
@media (max-width:460px){
  .opts.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{min-height:104px;padding:14px 12px 12px}
  .card .label{font-size:13.5px}
  .card .ico{width:22px;height:22px}

  /* Auswahlzeilen etwas kompakter, damit mehr auf den Schirm passt */
  .opt{padding:15px 15px;font-size:15px;gap:12px}
  .ta{min-height:150px;padding:16px;font-size:16px}
}

/* Sehr schmale Geräte: zurück auf eine Kartenspalte, zwei wären zu gedrängt */
@media (max-width:330px){
  .opts.cards{grid-template-columns:1fr}
}

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