:root{
  --font:"Helvetica Neue",Helvetica,"Arial Nova",Arial,"Liberation Sans",sans-serif;
  --measure:64ch;
  --pad:clamp(20px,5vw,64px);
  --rule-dark:rgba(255,255,255,.22);
  --rule-light:rgba(0,0,0,.2);
  --ok:#1f6f3f;
  --warn:#9a5b00;
  --bad:#a8231b;
}
*,*::before,*::after{box-sizing:border-box}
html{background:#fff;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.5;color:#000;background:#fff}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.container{max-width:1180px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.skip{position:absolute;left:-999px;top:.5rem;background:#fff;color:#000;padding:.5em 1em;z-index:20}
.skip:focus{left:.5rem}

/* Die Seite verläuft von Schwarz (oben) nach Weiss (unten).
   Zwei Zonen, damit die Fragenliste beliebig lang werden kann,
   ohne dass weisser Text auf hellem Grund landet. */
.zone-dark{color:#fff;background:linear-gradient(180deg,#000 0%,#000 45%,#3a3a3a 100%)}
.zone-light{color:#000;background:linear-gradient(180deg,#3a3a3a 0%,#8c8c8c 25%,#d6d6d6 55%,#f7f7f7 80%,#fff 100%)}

/* Transparenzhinweis ganz oben: gestrichelt wie die übrigen Entwurfshinweise */
.hinweis-bar{margin:1rem 0 0;border:1px dashed rgba(255,255,255,.6);padding:.6rem .9rem;font-size:.9rem;line-height:1.4}

/* Kopf: Wortmarke links, Navigation in der Mitte, Besucherzähler rechts */
.masthead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.2rem 2.5rem;padding-top:1.2rem}
.brand{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;grid-column:1;grid-row:1}
.wordmark{font-weight:700;font-size:clamp(1.55rem,2.6vw,2rem);letter-spacing:-.03em;text-decoration:none;color:inherit;line-height:1;display:inline-block;padding-right:.06em}
/* Wortmarke in Regenbogenfarben: helle Töne auf Schwarz, tiefere Töne auf Weiss (Kontrast) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark{background-image:linear-gradient(90deg,#ff2d55 0%,#ff9f0a 22%,#ffd60a 40%,#30d158 58%,#0a84ff 78%,#bf5af2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .footer .wordmark{background-image:linear-gradient(90deg,#d10022 0%,#d96a00 22%,#b08d00 40%,#0b8a3a 58%,#1a5fd1 78%,#7a2fb3 100%)}
}
.wordmark:focus-visible{outline-color:#fff}
.footer .wordmark:focus-visible{outline-color:#000}
.wordmark-sub{font-size:.82rem;opacity:.7;letter-spacing:.01em}
.nav{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:flex-end;grid-column:2;grid-row:1}
.nav a{text-decoration:none;font-size:.95rem;border-bottom:1px solid transparent;padding-bottom:.1em}
.nav a:hover,.nav a:focus-visible{border-bottom-color:currentColor}

/* Besucherzähler: weisses Feld auf Schwarz, sechsstellig, damit es von weitem lesbar ist */
.zaehler{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;flex-direction:column;align-items:center;gap:.2rem;background:#fff;color:#000;padding:.55rem .9rem .5rem;min-width:8.2rem}
.zaehler-zahl{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;line-height:1;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.zaehler-label{font-size:.78rem;line-height:1;opacity:.75}

/* Zweispaltiges Raster: schmale Spalte für Nummern und Marginalien, breite Spalte für Inhalt */
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,5fr);column-gap:2.5rem}
.grid > .main{grid-column:2}

.statement{padding:clamp(4rem,13vh,9.5rem) 0 clamp(3rem,8vh,6rem)}
.statement h1{font-size:clamp(2.1rem,5.2vw,4.5rem);line-height:1.02;letter-spacing:-.035em;font-weight:700;margin:0 0 1.8rem;max-width:17ch}
.statement p{max-width:var(--measure);margin:0 0 1rem;font-size:1.125rem}
.statement .note{opacity:.7;font-size:.95rem;margin-top:1.6rem}
/* Externer Quellenlink im Kopfbereich (kununu): Rahmen wie die Abstimmungs-Buttons, gut sichtbar auf Schwarz */
.statement .extern-box{margin:1.8rem 0 0;max-width:var(--measure)}
.extern{display:inline-block;font-weight:700;text-decoration:none;border:2px solid #fff;padding:.7em 1.2em;line-height:1.25}
.extern::after{content:" \2197";font-weight:400}
.extern:hover,.extern:focus-visible{background:#fff;color:#000;outline-color:#fff}
.extern-hinweis{display:block;font-size:.9rem;opacity:.7;margin-top:.6rem}

/* Fragen */
.fragen{padding:1rem 0 4.5rem}
.fragen h2{font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.025em;margin:0 0 .6rem;font-weight:700}
.fragen .lead{max-width:var(--measure);margin:0 0 1.6rem;opacity:.85}
.filter{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem}
.chip{font:inherit;font-size:.92rem;padding:.45em .95em;border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;cursor:pointer;border-radius:0}
.chip:hover{border-color:#fff}
.chip[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
.filter-status{font-size:.9rem;opacity:.75;min-height:1.4em;margin:0 0 2rem}

.frage-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-dark)}
.frage{padding:1.7rem 0 1.9rem;border-bottom:1px solid var(--rule-dark)}
.frage-nr{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:400;line-height:1.1;opacity:.55;padding-top:.15em}
.frage-text{font-size:clamp(1.35rem,2.6vw,2.05rem);line-height:1.2;letter-spacing:-.018em;font-weight:500;margin:0 0 .9rem;max-width:32ch}
.frage-meta{margin:0;font-size:.9rem;opacity:.75}
.frage-quelle{margin:.45rem 0 0;font-size:.82rem;opacity:.6;max-width:var(--measure)}
.frage-quelle a{color:inherit}
.frage-meta span + span::before{content:"";display:inline-block;width:1px;height:.85em;background:currentColor;opacity:.5;margin:0 .8em;vertical-align:-.08em}

/* Abstimmung: eine Frage, Ja oder Nein, Ergebnis erst nach der eigenen Stimme */
.abstimmung{padding:0 0 6rem}
.abstimmung h2{font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.025em;margin:0 0 1rem;font-weight:700}
.poll{border:1px solid rgba(255,255,255,.55);padding:clamp(1.4rem,3.5vw,2.6rem);max-width:calc(var(--measure) + 8rem)}
.poll-frage{font-size:clamp(1.35rem,2.6vw,2.05rem);line-height:1.2;letter-spacing:-.018em;font-weight:500;margin:0 0 1.4rem;max-width:30ch}
.poll-buttons{display:flex;gap:.8rem;flex-wrap:wrap;margin:0 0 1rem}
.poll-btn{font:inherit;font-size:1.25rem;font-weight:700;min-width:9rem;padding:.7em 1.6em;border:2px solid #fff;background:transparent;color:#fff;cursor:pointer;border-radius:0}
.poll-btn:hover:not([disabled]),.poll-btn:focus-visible{background:#fff;color:#000;outline-color:#fff}
.poll-btn[disabled]{opacity:.5;cursor:not-allowed}
.poll-ergebnis{margin:.4rem 0 1rem}
.poll-row{display:grid;grid-template-columns:4.5rem minmax(0,1fr) 7.5rem;align-items:center;gap:1rem;margin:0 0 .8rem}
.poll-row-label{font-weight:700;font-size:1.15rem}
.poll-bar{display:block;height:1.4rem;background:rgba(255,255,255,.18);overflow:hidden}
.poll-bar-fill{display:block;height:100%;width:0;background:#fff;transition:width .6s ease}
@media (prefers-reduced-motion:reduce){.poll-bar-fill{transition:none}}
.poll-pct{font-variant-numeric:tabular-nums;font-size:1.05rem;text-align:right;white-space:nowrap}
.poll-total{margin:.6rem 0 0;font-size:.98rem}
.poll-status{font-size:.95rem;opacity:.85;min-height:1.4em;margin:0 0 .6rem}
.poll-hinweis{font-size:.9rem;opacity:.7;margin:0;max-width:var(--measure)}

/* Weisse Bogen auf dem Verlauf: Verfahren und Formular */
.zone-light .container{padding-top:clamp(3rem,8vh,6rem)}
.sheet{background:#fff;color:#000;padding:clamp(1.6rem,4vw,3.5rem);margin:0 0 2.5rem;border:1px solid var(--rule-light)}
.sheet h2{font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.025em;margin:0 0 1rem;font-weight:700}
.sheet .intro{max-width:var(--measure);margin:0 0 2.2rem}

.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.schritte li{border-top:2px solid #000;padding-top:1rem}
.schritt-nr{display:block;font-size:2.2rem;font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:.7rem}
.schritte h3{font-size:1.1rem;margin:0 0 .5rem;font-weight:700}
.schritte p{font-size:.97rem;margin:0}

/* Formular */
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:0 0 1.2rem}
.field label{display:block;font-weight:500;margin-bottom:.4rem;font-size:.95rem}
.field select,.field input,.field textarea{width:100%;font:inherit;padding:.7em .8em;border:1px solid #000;background:#fff;color:#000;border-radius:0}
.field textarea{min-height:13rem;resize:vertical;line-height:1.5}
.hint{font-size:.9rem;color:#444;margin:.45rem 0 0;max-width:var(--measure)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.linkbtn{font:inherit;font-size:.9rem;background:none;border:0;padding:0;color:#000;text-decoration:underline;cursor:pointer}
.check{display:flex;gap:.75rem;align-items:flex-start;margin:1.4rem 0;max-width:var(--measure)}
.check input{margin:.3em 0 0;width:1.1em;height:1.1em;flex:none}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.btn{font:inherit;font-weight:500;padding:.85em 1.4em;border:1px solid #000;background:#000;color:#fff;cursor:pointer;border-radius:0}
.btn:hover:not([disabled]){background:#222}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn.secondary{background:#fff;color:#000}
.btn.secondary:hover:not([disabled]){background:#f0f0f0}
.status{font-size:.95rem;color:#444;min-height:1.4em}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.pruefung{margin-top:1.6rem;padding:1.2rem 1.4rem;border-left:4px solid #000;background:#f3f3f3;max-width:calc(var(--measure) + 4rem)}
.pruefung.ok{border-color:var(--ok)}
.pruefung.warn{border-color:var(--warn)}
.pruefung.bad{border-color:var(--bad)}
.pruefung h3{margin:0 0 .5rem;font-size:1.08rem}
.pruefung p{margin:0 0 .7rem}
.pruefung ul{margin:.3rem 0 .9rem 1.2rem;padding:0}
.pruefung li{margin:0 0 .3rem}
.quelle{font-size:.85rem;color:#555;margin:.6rem 0 0 !important}

.formular-note{margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--rule-light);font-size:.95rem;color:#222;max-width:var(--measure)}
.formular-note p{margin:0 0 .6rem}

/* Regeln, Datenschutz, Impressum */
.rechtliches{padding:1.5rem 0 5rem}
.rechtliches h2{font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.025em;margin:0 0 1.2rem;font-weight:700}
.acc{border-top:1px solid rgba(0,0,0,.3)}
.acc:last-of-type{border-bottom:1px solid rgba(0,0,0,.3)}
.acc summary{cursor:pointer;padding:1.1rem 0;font-weight:500;font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-weight:400;font-size:1.6rem;line-height:1;flex:none}
.acc[open] summary::after{content:"–"}
.acc-body{padding:0 0 1.6rem;max-width:var(--measure)}
.acc-body h3{font-size:1rem;margin:1.3rem 0 .3rem}
.acc-body p{margin:0 0 .7rem}
.acc-body ul{margin:0 0 .7rem 1.2rem;padding:0}
.acc-body li{margin:0 0 .45rem}
.platzhalter{background:#fff3c4;padding:0 .2em}

/* Fuss */
.footer{border-top:2px solid #000;padding:2.2rem 0 3.5rem}
.footer .wordmark{font-size:1.15rem}
.footer .wordmark-sub{font-size:.78rem}
.footer p{max-width:var(--measure);margin:0 0 .8rem}
.footer .klein{font-size:.9rem;color:#444}
.footer nav{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.2rem}
.footer nav a{font-size:.95rem}

@media (max-width:860px){
  .schritte{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .masthead{grid-template-columns:minmax(0,1fr) auto;gap:1rem 1.2rem}
  .zaehler{grid-column:2;min-width:6.8rem;padding:.45rem .7rem .4rem}
  .nav{grid-column:1 / -1;grid-row:2;justify-content:flex-start;gap:1rem 1.3rem}
  .grid{grid-template-columns:1fr;column-gap:0}
  .grid > .main{grid-column:1}
  .frage-nr{font-size:1rem;padding:0 0 .3rem}
  .frage-text{max-width:none}
  .poll-row{grid-template-columns:3.6rem minmax(0,1fr) 6.2rem;gap:.7rem}
  .schritte{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .sheet{margin-left:calc(var(--pad) * -1 + 12px);margin-right:calc(var(--pad) * -1 + 12px)}
  .footer .brand{margin-bottom:1rem}
}

/* ---- Ergänzungen der produktiven Version (gleiche Formensprache wie oben) ---- */

/* Antwort der Hochschule bzw. Stellungnahme: ungekürzt unter dem Eintrag */
.antwort{margin:1.2rem 0 0;padding:.1rem 0 .1rem 1.2rem;border-left:2px solid rgba(255,255,255,.7);max-width:var(--measure)}
.antwort-kopf{margin:0 0 .45rem !important;font-size:.9rem;opacity:.75}
.antwort p{margin:0 0 .7rem}
.antwort p:last-child{margin-bottom:0}

/* Erfahrungsberichte: gleiche Liste wie die Fragen, Text kleiner, weil länger */
.erfahrung-text{font-size:clamp(1.12rem,1.9vw,1.4rem);line-height:1.42;letter-spacing:-.01em;margin:0 0 .9rem;max-width:var(--measure)}
.erfahrung-text p{margin:0 0 .8rem}

/* Abo: E-Mail breit, Häufigkeit schmal */
.abo-grid{grid-template-columns:2fr 1fr}
.choice{display:flex;gap:.75rem;align-items:flex-start;margin:0 0 .7rem;max-width:var(--measure)}
.choice input{margin:.3em 0 0;width:1.1em;height:1.1em;flex:none}
.btn.danger{background:var(--bad);border-color:var(--bad)}
.btn.danger:hover:not([disabled]){background:#861b15}
.sheet .zurueck{margin:2rem 0 0;font-size:.95rem}

/* Einzelseiten (Abo bestätigen, ändern, abmelden): kürzerer schwarzer Kopf */
.statement.kurz{padding:clamp(2.5rem,8vh,5rem) 0 clamp(2rem,5vh,3.5rem)}
.statement.kurz h1{font-size:clamp(1.8rem,4vw,3.2rem)}

@media (max-width:860px){
  .abo-grid{grid-template-columns:1fr}
}