/* Titillium Web – lokal eingebunden (DSGVO: kein Google-CDN) */
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/titillium-web-v19-latin-regular.woff2") format("woff2");}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/titillium-web-v19-latin-700.woff2") format("woff2");}

:root{
  --blau:#123f73;
  --blau-dunkel:#0c2d54;
  --weiss:#ffffff;
  --weiss-gedimmt:rgba(255,255,255,.78);
  --pink:#ff5fb0;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--blau);color:var(--weiss);
  font-family:"Titillium Web","Segoe UI",Arial,sans-serif;
  font-size:1.125rem;line-height:1.6;
}
a{color:var(--weiss)}
a:hover{color:var(--weiss-gedimmt)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--weiss);outline-offset:3px}

main{flex:1;width:100%;max-width:44rem;margin:0 auto;padding:clamp(3rem,10vw,6.5rem) 1.5rem 3rem}
h1{font-weight:700;font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.08;margin:0 0 .4em;letter-spacing:-.01em}
h2{font-size:1.35rem;line-height:1.3;margin:2.2em 0 .5em}
h3{font-size:1.1rem;margin:1.6em 0 .3em}
p{margin:0 0 1em;text-wrap:pretty}

/* Brücken-Animation */
.bruecke{display:block;width:100%;height:auto;margin:0 0 2.5rem}
.bruecke .boden{stroke:rgba(255,255,255,.35);stroke-width:2}
.bruecke .pylon{fill:var(--weiss)}
.bruecke .fahrbahn{stroke:var(--weiss);stroke-width:4}
.bruecke .seil{stroke:var(--weiss);stroke-width:2;fill:none}
.bruecke .haenger{stroke:var(--weiss);stroke-width:1}
.bruecke .fresser{fill:var(--pink)}
.bruecke .auge{fill:var(--blau)}

.kontakt{margin:2.5rem 0;padding:1.5rem 0 1.5rem 1.25rem;border-left:3px solid var(--weiss)}
.kontakt p{margin:0}
.kontakt .einleitung{color:var(--weiss-gedimmt);margin-bottom:.5em}
.kontakt strong{font-weight:700}

.button{display:inline-block;margin-top:.5rem;padding:.7em 1.4em;background:var(--weiss);color:var(--blau);
  font:inherit;font-weight:700;text-decoration:none;border:none;border-radius:2px;cursor:pointer}
.button:hover{background:var(--weiss-gedimmt);color:var(--blau)}
.button-gross{margin-top:0;padding:.75em 1.4em;letter-spacing:.04em;text-transform:uppercase;font-size:1rem}

footer{background:var(--blau-dunkel);padding:1.25rem 1.5rem;text-align:center;font-size:.95rem}
footer a{text-decoration:none;margin:0 .6em}
footer a:hover{text-decoration:underline}

.recht a{word-break:break-word}

/* Bewerbungsformular */
.formular{width:calc(100% - 2rem);max-width:34rem;margin:4vh auto;padding:2rem 1.75rem 1.75rem;
  background:var(--blau);color:var(--weiss);border:1px solid rgba(255,255,255,.2);
  font-size:1rem;line-height:1.5}
.formular::backdrop{background:rgba(6,22,42,.7)}
.formular h2{font-size:1.9rem;line-height:1.15;margin:0 2rem .6em 0}
.formular .schliessen{position:absolute;top:.6rem;right:.8rem;background:none;border:none;color:var(--weiss);
  font:inherit;font-size:1.6rem;line-height:1;cursor:pointer;padding:.3rem}
.formular .hinweis-kursiv{font-style:italic;color:var(--weiss-gedimmt);margin-bottom:1.5em}
.formular form{display:flex;flex-direction:column;gap:1.25rem}
.formular .feld{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.formular .feld span,.formular legend{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.formular fieldset{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.formular legend{padding:0;margin-bottom:.35rem}
.formular .option{display:flex;gap:.5rem;align-items:center}
.formular input[type=radio],.formular input[type=checkbox]{accent-color:var(--weiss);margin:0}
.formular input:not([type=radio]):not([type=checkbox]),.formular select,.formular textarea{
  width:100%;min-width:0;background:var(--weiss);color:var(--blau);border:1px solid var(--weiss);
  padding:.55em .7em;font:inherit;border-radius:5px}
.formular textarea{resize:vertical}
.formular ::placeholder{color:rgba(18,63,115,.55)}
.formular .reihe{display:grid;gap:.75rem}
.formular .reihe-studium{grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1fr)}
.formular .reihe-kontakt{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.formular .hinweis{margin:0;font-size:.95rem;color:rgba(255,255,255,.85)}
.formular .zustimmung{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem}
.formular .zustimmung input{margin-top:.3em}
@media (max-width:30rem){.formular .reihe-studium{grid-template-columns:1fr 1fr}.formular .reihe-studium .feld:first-child{grid-column:1/-1}}