/* Urban Parking North – Stylesheet. Schriften liegen lokal unter /assets/fonts (keine Verbindung zu Google). */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}

:root{
  --navy:#0D2849;
  --blau:#3971A8;
  --blau-hell:#7BA6D0;
  --beton:#E3E2DE;
  --beton-hell:#F1F0ED;
  --markierung:#F2C230;
  --tinte:#132133;
  --tinte-leise:#4E5A68;
  --weiss:#FFFFFF;
  --schrift-display:"Barlow Condensed","Arial Narrow",Helvetica,sans-serif;
  --schrift-text:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--beton-hell);color:var(--tinte);font-family:var(--schrift-text);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--schrift-display);font-weight:600;line-height:1.06;margin:0;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--weiss);padding:10px 16px;z-index:50}
.skip:focus{left:16px;top:16px}

/* Kopf */
header{position:sticky;top:0;z-index:20;background:var(--beton-hell);border-bottom:2px solid var(--navy)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;min-height:84px;flex-wrap:wrap;padding-block:12px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.marke img{height:46px;width:auto}
.marke .p{display:grid;place-items:center;width:42px;height:42px;background:var(--navy);color:var(--weiss);border-radius:6px;font:700 28px/1 var(--schrift-display);box-shadow:inset 0 0 0 3px var(--weiss),inset 0 0 0 4px rgba(0,0,0,.15)}
.marke b{display:block;font:600 23px/1 var(--schrift-display);color:var(--navy)}
.marke small{display:block;font-size:11px;letter-spacing:.16em;color:var(--tinte-leise);text-transform:uppercase;margin-top:3px}
nav{display:flex;gap:6px 24px;flex-wrap:wrap}
nav a{font:500 19px/1.2 var(--schrift-display);text-decoration:none;padding:4px 0;border-bottom:3px solid transparent;color:var(--tinte)}
nav a:hover,nav a:focus-visible{border-bottom-color:var(--blau)}
nav a[aria-current="page"]{border-bottom-color:var(--markierung);color:var(--navy)}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:2px solid var(--navy)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 132px,rgba(13,40,73,.08) 132px 136px),linear-gradient(180deg,rgba(13,40,73,0) 70%,rgba(13,40,73,.08) 70%,rgba(13,40,73,.08) 70.6%,rgba(13,40,73,0) 70.6%)}
.hero-inhalt{position:relative;padding-block:80px 88px;max-width:62ch}
.eyebrow{font:600 15px/1 var(--schrift-text);letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin-bottom:18px}
.hero h1{font-size:clamp(40px,6.4vw,76px);color:var(--navy);max-width:16ch}
.hero-strich{height:5px;width:200px;max-width:60%;background:var(--markierung);margin:24px 0 22px}
.hero .unterzeile{font:600 clamp(22px,2.6vw,28px)/1.2 var(--schrift-display);color:var(--tinte);margin-bottom:0}
.hero .einleitung{font-size:19px;color:var(--tinte-leise);max-width:54ch}

.knopf{display:inline-block;margin-top:28px;background:var(--navy);color:var(--weiss);font:600 21px/1.1 var(--schrift-display);padding:15px 30px;text-decoration:none;border-radius:6px}
.knopf:hover,.knopf:focus-visible{background:var(--blau)}

/* Angebot */
.angebot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px;background:var(--navy);color:var(--weiss);padding:18px 28px 18px 22px;border-radius:6px;border-left:8px solid var(--markierung);max-width:100%}
.angebot .preis{font:700 clamp(46px,6vw,64px)/1 var(--schrift-display);color:var(--markierung);white-space:nowrap}
.angebot .preis small{font-size:.5em;vertical-align:top}
.angebot .text{font-size:16px;line-height:1.4;min-width:0}
.angebot .text b{display:block;font:600 22px/1.15 var(--schrift-display)}

/* Abschnitte */
section{padding-block:80px}
.fliess{max-width:66ch}
.fliess p{font-size:18px}
.abschnitt-kopf{max-width:62ch;margin-bottom:40px}
.abschnitt-kopf h2{font-size:clamp(30px,4.2vw,46px);margin-bottom:14px;color:var(--navy)}
.abschnitt-kopf p{color:var(--tinte-leise);font-size:18.5px}
.zwischen{font:600 clamp(26px,3vw,34px)/1.1 var(--schrift-display);color:var(--navy);margin:44px 0 14px}
.claim{font:600 clamp(22px,2.6vw,28px)/1.25 var(--schrift-display);color:var(--navy);border-top:4px solid var(--markierung);padding-top:18px;margin-top:48px;max-width:40ch}
.weiss{background:var(--weiss)}
.beton{background:var(--beton)}

.navy-band{background:var(--navy);color:var(--weiss)}
.navy-band h2{color:var(--weiss)}
.navy-band p{color:rgba(255,255,255,.88)}
.navy-band .claim{color:var(--weiss)}
.vision{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.vision h2{font-size:clamp(32px,4.4vw,52px)}
.vision p{font-size:19px}

.blick,.buchten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:4px solid var(--navy);background:var(--beton)}
.blick > div,.bucht{padding:30px 28px 36px;border-left:3px solid var(--weiss);min-width:0}
.blick > div:first-child,.bucht:first-child{border-left:none}
.blick .marke-klein{font:600 13px/1 var(--schrift-text);letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin-bottom:12px}
.blick h3,.bucht h3{font-size:25px;color:var(--navy);margin-bottom:10px}
.blick p,.bucht p{font-size:16.5px;color:#3C4650}

.vorteile{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:2px solid var(--navy)}
.vorteile > div{padding:24px 24px 26px 0;border-bottom:1px solid rgba(19,33,51,.18);display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.vorteile .stell{display:grid;place-items:center;width:36px;height:36px;background:var(--blau);color:var(--weiss);border-radius:5px;font:700 20px/1 var(--schrift-display);box-shadow:inset 0 0 0 2px var(--weiss)}
.vorteile h3{font-size:23px;color:var(--navy);margin-bottom:6px}
.vorteile p{font-size:16.5px;color:#3C4650}

.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.kasten{background:var(--weiss);border-top:4px solid var(--blau);padding:28px 30px}
.kasten h3{font-size:26px;color:var(--navy);margin-bottom:12px}

.liste{list-style:none;padding:0;margin:0;border-top:2px solid var(--navy)}
.liste li{display:flex;gap:14px;padding:15px 2px;border-bottom:1px solid rgba(19,33,51,.18);font-size:17.5px}
.liste b{color:var(--blau);font:600 20px/1.4 var(--schrift-display)}
.ladesaeulen{display:flex;gap:14px;align-items:flex-end;height:150px}
.ladesaeulen i{display:block;width:34px;background:rgba(255,255,255,.2);border-radius:4px 4px 0 0}
.ladesaeulen i:nth-child(1){height:58%}
.ladesaeulen i:nth-child(2){height:78%;background:var(--blau)}
.ladesaeulen i:nth-child(3){height:100%;background:var(--blau-hell)}
.ladesaeulen i:nth-child(4){height:44%}

.kontakt h2{font-size:clamp(32px,5vw,54px);margin-bottom:16px}
.kontakt p{max-width:56ch;font-size:19px}
.mail{display:inline-block;margin-top:8px;font:600 clamp(22px,3.4vw,38px)/1.2 var(--schrift-display);color:var(--markierung);text-decoration:none;border-bottom:3px solid rgba(242,194,48,.4);word-break:break-all}
.mail:hover,.mail:focus-visible{border-bottom-color:var(--markierung)}
.kontakt.beton h2{color:var(--navy)}
.kontakt.beton p{color:var(--tinte-leise)}
.kontakt.beton .mail{color:var(--navy);border-bottom-color:var(--markierung)}

.recht{max-width:68ch}
.recht h2{font-size:clamp(28px,3.6vw,40px);color:var(--navy);margin:0 0 16px}
.recht h3{font-size:22px;color:var(--navy);margin:30px 0 8px}
.recht p{font-size:16.5px}
.recht .block{background:var(--weiss);border-top:4px solid var(--blau);padding:24px 28px;margin-bottom:48px}

footer{background:var(--beton);padding-block:52px 40px;font-size:15.5px}
.fuss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;max-width:720px}
.fuss h3{font-size:20px;margin-bottom:10px;color:var(--navy)}
.fuss a{color:var(--blau)}
.fuss-unten{margin-top:40px;padding-top:20px;border-top:1px solid rgba(19,33,51,.2);color:var(--tinte-leise);display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}

:focus-visible{outline:3px solid var(--blau);outline-offset:3px}

@media (max-width:900px){
  .blick,.buchten{grid-template-columns:minmax(0,1fr)}
  .blick > div,.bucht{border-left:none;border-top:3px solid var(--weiss)}
  .blick > div:first-child,.bucht:first-child{border-top:none}
  .vision,.zwei,.fuss{grid-template-columns:minmax(0,1fr);gap:32px}
  nav a{font-size:17px}
  section{padding-block:60px}
  .hero-inhalt{padding-block:56px 64px}
  .wrap{padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}