@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(schriften/barlow-semi-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(schriften/barlow-semi-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(schriften/barlow-semi-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(schriften/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(schriften/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* Leitbild: Landesfarben Schleswig-Holstein (Blau-Weiß-Rot), Hamburger Rot,
   grünes Land, blaues Meer. Hell, klar, Seekarten-Ordnung. Bewusst nur ein (helles) Erscheinungsbild. */
:root{
  --weiss:#ffffff;
  --papier:#f3f6f9;     /* Flächen, leicht blaustichig */
  --blau:#003b7e;       /* Landesblau SH */
  --rot:#d2132a;        /* Landesrot SH / Hamburger Rot */
  --meer:#2c6a9c;
  --watt:#d6e5f0;
  --gruen:#6f9c52;      /* Marsch und Geest */
  --tinte:#10243a;      /* Text */
  --grau:#566a7d;       /* Nebentext */
  --linie:#d5dfe8;
  --f-kopf:"Barlow Semi Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --f-text:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mess:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--weiss)}
body{margin:0;background:var(--weiss);color:var(--tinte);font:400 18px/1.6 var(--f-text);-webkit-font-smoothing:antialiased}
a{color:var(--blau)}
a:focus-visible,button:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.rand{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.breite{max-width:1200px;margin-inline:auto}

/* Landesfarben-Band: Blau / Weiß / Rot */
.farben{height:9px;background:linear-gradient(180deg,var(--blau) 0 33.3%,var(--weiss) 33.3% 66.6%,var(--rot) 66.6% 100%)}

/* Kopf */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.kopf .breite{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--blau);font:800 24px/1 var(--f-kopf);letter-spacing:.04em;text-transform:uppercase}
.flagge{width:30px;height:20px;display:grid;grid-template-rows:1fr 1fr 1fr;border:1px solid var(--linie)}
.flagge i:nth-child(1){background:var(--blau)}.flagge i:nth-child(2){background:var(--weiss)}.flagge i:nth-child(3){background:var(--rot)}
.marke small{display:block;font:500 11px/1.2 var(--f-mess);letter-spacing:.12em;color:var(--grau);text-transform:uppercase;margin-top:3px}
nav{display:flex;gap:22px;flex-wrap:wrap}
nav a{color:var(--tinte);text-decoration:none;font-weight:600;font-size:16px}
nav a:hover{color:var(--rot)}

/* Bühne */
.buehne{background:linear-gradient(180deg,var(--weiss) 0%,var(--papier) 100%)}
.buehne .breite{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(40px,6vw,80px)}
.ort{font:500 13px/1.4 var(--f-mess);letter-spacing:.12em;text-transform:uppercase;color:var(--grau);display:flex;gap:10px;flex-wrap:wrap}
.ort b{color:var(--blau);font-weight:500}
h1{margin:18px 0 0;font:800 clamp(56px,8.4vw,112px)/.88 var(--f-kopf);text-transform:uppercase;color:var(--blau);letter-spacing:-.01em;text-wrap:balance}
h1 span{display:block}
h1 .rot{color:var(--rot)}
.unter{margin:24px 0 0;max-width:30ch;font-size:clamp(19px,2vw,22px);line-height:1.45}
.marken{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.marken span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:var(--weiss);border:1px solid var(--linie);font:600 15px/1 var(--f-text)}
.marken span i{width:12px;height:12px;display:inline-block}
.marken .hh i{background:var(--rot)}
.marken .sh i{background:linear-gradient(180deg,var(--blau) 0 33%,var(--weiss) 33% 66%,var(--rot) 66%);outline:1px solid var(--linie)}

.karte{position:relative;aspect-ratio:7/6;max-width:100%;width:100%;background:var(--meer);overflow:hidden;box-shadow:0 1px 0 var(--linie),0 30px 60px -30px rgba(0,59,126,.45)}
#karte{position:absolute;inset:0;width:100%;height:100%;display:block}
.legende{position:absolute;left:12px;bottom:12px;display:flex;gap:14px;flex-wrap:wrap;background:rgba(255,255,255,.92);padding:8px 12px;font:500 11px/1.2 var(--f-mess);letter-spacing:.06em;color:var(--tinte);text-transform:uppercase}
.legende span{display:inline-flex;align-items:center;gap:6px}
.legende i{width:10px;height:10px;border-radius:50%;display:inline-block}
.massstab{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.92);padding:6px 10px;font:500 11px/1 var(--f-mess);color:var(--tinte)}

/* Abschnitte */
section.teil{padding-block:clamp(64px,9vw,112px)}
.teil h2{margin:0;font:800 clamp(36px,4.6vw,56px)/1 var(--f-kopf);text-transform:uppercase;color:var(--blau);text-wrap:balance}
.teil .vorspann{margin:14px 0 44px;max-width:60ch;color:var(--grau)}
.dienste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.dienst{background:var(--weiss);border:1px solid var(--linie);border-top:5px solid var(--blau);padding:24px 22px 26px;min-width:0}
.dienst:nth-child(2){border-top-color:var(--meer)}
.dienst:nth-child(3){border-top-color:var(--rot)}
.dienst:nth-child(4){border-top-color:var(--gruen)}
.dienst .kenn{font:500 12px/1 var(--f-mess);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.dienst h3{margin:12px 0 10px;font:700 28px/1 var(--f-kopf);text-transform:uppercase;color:var(--tinte)}
.dienst p{margin:0;font-size:16.5px;color:var(--grau)}
.teil.flaeche{background:var(--papier)}

.ablauf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:start}
.schritte{list-style:none;margin:0;padding:0;counter-reset:s;border-top:2px solid var(--blau)}
.schritte li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--linie);counter-increment:s}
.schritte li::before{content:counter(s);font:800 30px/1 var(--f-kopf);color:var(--rot)}
.schritte b{display:block;font:700 22px/1.1 var(--f-kopf);text-transform:uppercase;color:var(--blau);margin-bottom:4px}
.schritte span{color:var(--grau);font-size:16.5px}

.kontakt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.kanal{background:var(--weiss);border:1px solid var(--linie);padding:26px 24px;min-width:0;display:grid;gap:10px;align-content:start}
.kanal.haupt{border-left:6px solid var(--rot)}
.kanal .kenn{font:500 12px/1 var(--f-mess);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.kanal .adresse{font:700 clamp(24px,3vw,34px)/1.1 var(--f-kopf);color:var(--blau);overflow-wrap:anywhere}
.kanal p{margin:0;color:var(--grau);font-size:16.5px}
.knopf{justify-self:start;margin-top:6px;font:600 15px/1 var(--f-text);background:var(--blau);color:var(--weiss);border:0;padding:13px 18px;cursor:pointer}
.knopf:hover{background:var(--rot)}

footer{background:var(--blau);color:#dbe6f2;padding-block:44px 56px;font-size:15px}
footer .breite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
footer h4{margin:0 0 10px;font:700 18px/1 var(--f-kopf);text-transform:uppercase;letter-spacing:.06em;color:var(--weiss)}
footer p{margin:0}
.entwurf{display:inline-block;margin-bottom:8px;background:var(--rot);color:var(--weiss);font:500 11px/1 var(--f-mess);letter-spacing:.08em;padding:5px 8px;text-transform:uppercase}


/* Foto-Bühne */
.foto-buehne{position:relative;min-height:clamp(520px,78vh,780px);display:grid;align-items:end;overflow:hidden;background:var(--tinte)}
.foto-buehne .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.foto-buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,32,72,.92) 0%,rgba(0,32,72,.7) 38%,rgba(0,32,72,.1) 75%),linear-gradient(0deg,rgba(0,24,56,.6) 0%,rgba(0,24,56,0) 40%)}
.foto-text{position:relative;z-index:2;padding-block:clamp(64px,10vw,120px)}
.foto-text h1{color:var(--weiss)}
.foto-text h1 .rot{color:#ff3b4e}
.foto-text .ort,.foto-text .ort b{color:#cfe0f2}
.foto-text .unter{color:#eef4fa;max-width:38ch}
.symbol{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:12px;z-index:2;font:500 10px/1 var(--f-mess);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.netz{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.kabelbild{margin:8px 0 0;position:relative}
.kabelbild img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.kabelbild figcaption{position:absolute;right:8px;bottom:8px;font:500 10px/1 var(--f-mess);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.gebaeude{position:relative;min-height:clamp(380px,56vw,640px);overflow:hidden;display:grid;align-items:end}
.gebaeude img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.gebaeude::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,32,72,.75) 0%,rgba(0,32,72,0) 55%)}
.gebaeude-text{position:relative;z-index:2;padding-block:40px}
.gebaeude-text p{margin:0;font:800 clamp(30px,4.6vw,58px)/1 var(--f-kopf);text-transform:uppercase;color:var(--weiss)}
.gebaeude-text p span{color:#d6e5f0;font-weight:700}

.vision{background:var(--tinte);color:var(--weiss)}
.vision-bild{position:relative}
.vision-bild img{display:block;width:100%;height:clamp(320px,52vw,640px);object-fit:cover;max-width:100%}
.vision-text{padding-block:clamp(48px,7vw,88px)}
.vision-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.vision h2{margin:0;font:800 clamp(36px,4.6vw,56px)/1 var(--f-kopf);text-transform:uppercase;color:var(--weiss)}
.vision .vorspann{margin:14px 0 0;max-width:60ch}
.vision .vorspann{color:#c9d8e6;margin-bottom:0}
.vision-link{margin:22px 0 0;font:500 14px/1.4 var(--f-mess);letter-spacing:.06em;color:#c9d8e6}.vision-link b{color:var(--weiss);font-weight:500}
.kenn-hell{font:500 12px/1 var(--f-mess);letter-spacing:.16em;text-transform:uppercase;color:#ff6b7a;margin-bottom:12px}
.vision-detail{margin:0}
.vision-detail img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.vision-detail figcaption{margin-top:8px;font:500 11px/1.3 var(--f-mess);letter-spacing:.08em;text-transform:uppercase;color:#9fb3c6}
@media (max-width:960px){.vision-raster{grid-template-columns:1fr}}
@media (max-width:960px){.netz{grid-template-columns:1fr}}
@media (max-width:620px){.foto-buehne::after{background:linear-gradient(0deg,rgba(0,32,72,.95) 10%,rgba(0,32,72,.55) 70%,rgba(0,32,72,.3) 100%)}}
@media (max-width:960px){
  .buehne .breite{grid-template-columns:1fr}
  .dienste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ablauf{grid-template-columns:1fr}
}
@media (max-width:620px){
  .dienste,.kontakt,footer .breite{grid-template-columns:1fr}
  nav{gap:16px}
  .karte{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Campus SH */
.status{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:9px 14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);font:500 12px/1 var(--f-mess);letter-spacing:.12em;text-transform:uppercase;color:var(--weiss)}
.status i{width:9px;height:9px;border-radius:50%;background:#ffb4bd;display:inline-block}
.schwer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.feld{background:var(--weiss);border:1px solid var(--linie);border-top:6px solid var(--blau);padding:28px 26px 30px;min-width:0}
.feld.recht{border-top-color:var(--rot)}
.feld .kenn{font:500 12px/1 var(--f-mess);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.feld h3{margin:12px 0 6px;font:800 34px/1 var(--f-kopf);text-transform:uppercase;color:var(--blau)}
.feld.recht h3{color:var(--rot)}
.feld .adr{font:500 13px/1.4 var(--f-mess);color:var(--grau);margin-bottom:14px}
.feld ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.feld li{padding-left:18px;position:relative;color:var(--tinte);font-size:17px}
.feld li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:currentColor;opacity:.5}
.baustein{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.baustein figure{margin:0;position:relative}
.baustein img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.baustein figcaption{margin-top:8px;font:500 11px/1.3 var(--f-mess);letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.verweis{display:inline-block;margin-top:20px;font:600 16px/1 var(--f-text);color:var(--weiss);background:var(--blau);padding:14px 18px;text-decoration:none}
.verweis:hover{background:var(--rot)}
.fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--blau)}
.fakten div{padding:20px 20px 20px 0;border-bottom:1px solid var(--linie);min-width:0}
.fakten div+div{padding-left:20px;border-left:1px solid var(--linie)}
.fakten dt{font:500 12px/1 var(--f-mess);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.fakten dd{margin:10px 0 0;font:700 24px/1.15 var(--f-kopf);text-transform:uppercase;color:var(--blau)}
@media (max-width:860px){.schwer,.baustein{grid-template-columns:1fr}.fakten{grid-template-columns:1fr}.fakten div+div{padding-left:0;border-left:0}}