/* Porsche Next TT — lokal ausgeliefert, keine externen Schriftserver */
@font-face{font-family:'Porsche Next TT';font-weight:200;font-style:normal;font-display:swap;src:url('fonts/PorscheNextTT-THIN.woff2') format('woff2')}
@font-face{font-family:'Porsche Next TT';font-weight:400;font-style:italic;font-display:swap;src:url('fonts/PorscheNextTT-ITALIC.woff2') format('woff2')}
@font-face{font-family:'Porsche Next TT';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/PorscheNextTT-REGULAR.woff2') format('woff2')}
@font-face{font-family:'Porsche Next TT';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/PorscheNextTT-BOLD.woff2') format('woff2')}

:root{
  --navy:#0C1D6B;            /* Markenblau aus dem Key Visual */
  --navy-deep:#08144D;
  --navy-tint:#F3F4FA;
  --ink:#15171E;
  --ink-soft:#585C6B;
  --line:#D8DBE8;
  --line-soft:#ECEDF4;
  --paper:#FFFFFF;
  --measure:66ch;
  --font:'Porsche Next TT','Porsche Next','Helvetica Neue',Arial,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:17px;line-height:1.62;
}

/* ---------- Sprachlogik ---------------------------------------------- */
[data-lang="de"] .en{display:none}
[data-lang="en"] .de{display:none}



/* ---------- Kopf ------------------------------------------------------ */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.bar{
  max-width:1240px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;gap:36px;min-height:76px;
}
.brand{
  font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1;
  color:var(--navy);text-decoration:none;padding:6px 0;
}
nav.primary{margin-left:auto;display:flex;align-items:center;gap:34px}
nav.primary a,.navbtn{
  font-size:15.5px;color:var(--ink);text-decoration:none;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
  position:relative;line-height:1.2;
}
nav.primary a:hover,.navbtn:hover{color:var(--navy)}
nav.primary a.active,.has-drop.active-branch .navbtn{color:var(--navy)}
nav.primary > a.active::after,.has-drop.active-branch .navbtn::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--navy);
}
nav.primary .drop a.active{background:var(--navy-tint);color:var(--navy);font-weight:700}

/* Dropdown */
.has-drop{position:relative}
.drop{
  position:absolute;top:calc(100% + 17px);left:-20px;min-width:344px;
  background:#fff;border:1px solid var(--line);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
  box-shadow:0 20px 44px -26px rgba(12,29,107,.5);
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
nav.primary .drop a{display:block;padding:11px 14px;font-size:14.5px;line-height:1.35}
nav.primary .drop a:hover{background:var(--navy-tint);color:var(--navy)}
.drop .sep{display:block;height:1px;background:var(--line-soft);margin:6px 10px}

/* Sprachumschalter */
.lang{display:flex;align-items:center;border:1px solid var(--line);overflow:hidden}
.lang button{
  font-family:inherit;font-size:12.5px;letter-spacing:.05em;font-weight:700;
  padding:6px 11px;border:0;background:#fff;color:var(--ink-soft);cursor:pointer;
}
nav.primary .lang a{font-family:inherit;font-size:12.5px;letter-spacing:.05em;font-weight:700;padding:6px 11px;color:var(--ink-soft);text-decoration:none;display:inline-block;line-height:1.2}
nav.primary .lang a:hover{color:var(--navy);background:var(--navy-tint)}
nav.primary .lang a.on{background:var(--navy);color:#fff}
nav.primary .lang a::after{display:none}
.globe{width:15px;height:15px;margin:0 9px 0 8px;flex:none;color:var(--ink-soft)}

/* Auf der Startseite traegt das Key Visual die Wortmarke,
   die kleine Marke im Kopf entfaellt dort */
[data-page="home"] .brand{display:none}

/* Burger */
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.burger rect{fill:var(--navy)}

/* ---------- Seiten ---------------------------------------------------- */
.page{display:none}
.page.on{display:block}
main{min-height:60vh}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* Hero Startseite — Key Visual unveraendert, Blau blutet aus */
.hero{background:var(--navy)}
.hero img{display:block;width:100%;max-width:1440px;margin:0 auto;height:auto}
/* Der Claim steht auf der gleichen Fluchtlinie wie Wortmarke und Aussage
   im Key Visual: 132 von 1280 Bildpunkten = 10.3125 % der Bildbreite. */
.hero-claim{max-width:1440px;margin:0 auto;padding:64px 0 88px}
.hero-claim > div{padding-left:10.3125%;padding-right:32px}
.hero-claim p{
  margin:0;max-width:30ch;color:var(--navy);
  font-size:clamp(21px,2.6vw,32px);font-weight:200;
  line-height:1.24;letter-spacing:-.015em;
}

/* Seitenkopf Unterseiten */
.pagehead{border-bottom:1px solid var(--line-soft);padding:74px 0 46px}
.kicker{font-size:14px;color:var(--navy);margin:0 0 14px;font-weight:700}
.pagehead h1{
  font-size:clamp(28px,4vw,46px);font-weight:200;letter-spacing:-.018em;
  line-height:1.12;margin:0;max-width:20ch;color:var(--navy);
}
.pagehead .lead{margin:26px 0 0;font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:var(--measure)}

section.body{padding:56px 0 88px}
h2{font-size:23px;font-weight:700;letter-spacing:-.01em;margin:52px 0 16px;line-height:1.3;color:var(--navy)}
h2:first-child{margin-top:0}
h3{font-size:18px;font-weight:700;margin:32px 0 8px}
p{margin:0 0 17px;max-width:var(--measure)}
ul{max-width:var(--measure);padding-left:20px;margin:0 0 17px}
li{margin:0 0 9px}
b,strong{font-weight:700}
a.inline{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(12,29,107,.35)}
a.inline:hover{border-bottom-color:var(--navy)}

/* Phasen — echte Abfolge */
.phases{border-top:1px solid var(--line);margin:34px 0 8px;max-width:940px}
.phase{
  display:grid;grid-template-columns:154px 1fr;gap:34px;
  padding:26px 0;border-bottom:1px solid var(--line-soft);
}
.phase .when{font-size:15px;font-weight:700;color:var(--navy);padding-top:3px}
.phase h3{margin:0 0 8px;font-size:19px}
.phase p,.phase ul{margin-bottom:0}

/* Dimensionen — keine Sequenz */
.dims{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:34px 0}
.dim{background:#fff;padding:24px 22px 26px}
.dim h3{margin:0 0 7px;font-size:17px;color:var(--navy)}
.dim p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:none}

/* Lieferergebnisse */
.deliver{border-left:3px solid var(--navy);padding:6px 0 6px 24px;margin:34px 0;max-width:var(--measure)}
.deliver h3{margin:0 0 12px;color:var(--navy)}

/* Kontakt / Impressum */
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px 48px;max-width:920px;margin:8px 0 0}
.fact h3{margin:0 0 6px;font-size:14px;color:var(--ink-soft);font-weight:700}
.fact p{margin:0;font-size:17px}
.note{background:var(--navy-tint);border:1px solid var(--line-soft);padding:18px 20px;font-size:14.5px;color:var(--ink-soft);max-width:var(--measure);margin:28px 0}
.note p{margin:0;font-size:14.5px;max-width:none}
.note p + p{margin-top:10px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:#fff;padding:1px 5px;border:1px solid var(--line)}

/* ---------- Fuss ------------------------------------------------------ */
footer.site{background:var(--navy);color:#fff;padding:52px 0 56px;margin-top:24px}
.footrow{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:baseline;justify-content:space-between}
.claim{font-size:21px;font-weight:200;letter-spacing:-.01em;margin:0}
.claim b{font-weight:700}
.footnav{display:flex;flex-wrap:wrap;gap:26px}
.footnav a{font-size:14.5px;color:rgba(255,255,255,.82);text-decoration:none}
.footnav a:hover{color:#fff}
.copy{width:100%;margin:32px 0 0;font-size:13.5px;color:rgba(255,255,255,.66)}
footer .claim b{color:#fff}

/* Impressum-Claim auf hellem Grund */
.claim-dark{color:var(--navy)}

/* ---------- Fokus & Motion -------------------------------------------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
footer a:focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Schmale Viewports ----------------------------------------- */
@media (max-width:880px){
  .bar{gap:16px;min-height:64px;padding:0 20px}
  .wrap{padding-left:20px;padding-right:20px}
  .hero-claim > div{padding-right:20px}
  .burger{display:block}
  nav.primary{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;
    gap:0;padding:8px 20px 18px;
  }
  nav.primary.open{display:flex}
  nav.primary>a,.navbtn{padding:13px 0;width:100%;text-align:left}
  .has-drop{width:100%}
  /* im aufgeklappten Menue markiert ein kurzer Balken den aktiven Punkt,
     eine durchgehende Linie wuerde wie ein Trenner wirken */
  nav.primary > a.active::after,.has-drop.active-branch .navbtn::after{
    right:auto;width:22px;bottom:8px;
  }
  .drop{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0}
  nav.primary .drop a{padding:12px 0;line-height:1.3}
  .lang{order:-1;margin:12px 0 4px}
  .phase{grid-template-columns:1fr;gap:8px}
  .hero-claim{padding-top:44px;padding-bottom:60px}
}

/* lange URLs in den Rechtstexten duerfen umbrechen */
p,li,h1,h2,h3{overflow-wrap:break-word}
ol{max-width:var(--measure);padding-left:22px;margin:0 0 17px}
ol li{margin:0 0 9px}

/* --- Korrekturen aus dem Geraetetest, 01.09.2026 ---------------------
   Gemessen bei geoeffnetem Menue auf 375, 393, 430 und 744 px Breite.
   Ziel: jedes antippbare Element mindestens 44 px hoch. */
@media (max-width:880px){
  .burger{padding:14px 10px}
  /* .navbtn ist hier ein <a> im .has-drop-Span und wird sonst von
     nav.primary a (padding:0) ueberstimmt */
  nav.primary .navbtn{display:block;width:100%;padding:13px 0;text-align:left}
  nav.primary .drop a{padding:13px 0;line-height:18px}
  nav.primary .lang a{padding:13px 14px;line-height:18px}
  .footnav{gap:0 26px}
  .footnav a{padding:11px 0;display:inline-block}
  .copy{margin-top:18px}
}

/* Copyright-Zeile rechtsbuendig. Kopfleiste (.bar) und Fussbereich (.wrap)
   haben dieselbe Maximalbreite und denselben Innenabstand, deshalb steht
   die Zeile exakt auf der Flucht des Sprachschalters oben rechts.
   flex:0 0 100% erzwingt eine eigene Zeile - sonst teilt sie sich bei
   mittleren Breiten die Zeile mit der Fussnavigation. max-width:none hebt
   die Textbreite von 66 Zeichen auf, die .copy als <p> sonst erbt. */
.copy{flex:0 0 100%;max-width:none;text-align:right}