/* ==========================================================
   pyur-berlin.de – Design: Berliner Verkehrs-Signage
   Palette: Tinte, PŸUR-Magenta, Violett, Signalgelb, Beton
   ========================================================== */

:root{
  --tinte:      #14121c;
  --tinte-80:   #2a2637;
  --magenta:    #e5006d;
  --violett:    #6e2bd9;
  --signal:     #ffd400;
  --beton:      #ece9e2;
  --beton-warm: #f7f5f1;
  --weiss:      #ffffff;

  --display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --r: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(1rem,0.97rem + 0.2vw,1.075rem);
  line-height:1.65;
  color:var(--tinte);
  background:var(--beton-warm);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--magenta); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Typografie ---------- */
h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.03;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.5rem,1.4rem + 5.2vw,5rem); }
h2{ font-size:clamp(1.9rem,1.2rem + 2.8vw,3.1rem); }
h3{ font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem); letter-spacing:-0.01em; }
p{ margin:0 0 1.1em; }
.lead{ font-size:clamp(1.1rem,1rem + .5vw,1.35rem); line-height:1.5; }

/* Kennzeichnung wie ein Linienschild */
.eyebrow{
  display:inline-block;
  font-family:var(--display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--signal);
  color:var(--tinte);
  padding:.4rem .75rem;
  border-radius:2px;
}

/* ---------- Kopf ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--tinte);
  color:var(--weiss);
  border-bottom:3px solid var(--signal);
}
.topbar .wrap{ display:flex; align-items:center; gap:1.25rem; min-height:64px; }
.marke{
  font-family:var(--display); font-weight:800; font-size:1.15rem;
  letter-spacing:-.01em; color:var(--weiss); text-decoration:none;
  display:flex; align-items:center; gap:.6rem;
}
.marke .punkt{
  width:26px; height:26px; border-radius:50%;
  background:var(--magenta);
  display:grid; place-items:center;
  font-size:.8rem; color:#fff;
}
.nav{ margin-left:auto; display:flex; gap:1.4rem; align-items:center; }
.nav a{
  color:var(--weiss); text-decoration:none; font-size:.92rem; font-weight:500;
  padding:.35rem 0; border-bottom:2px solid transparent;
}
.nav a:hover, .nav a:focus-visible{ border-bottom-color:var(--signal); }
.nav .knopf-klein{
  background:var(--magenta); border-bottom:none; border-radius:2px;
  padding:.5rem .9rem; font-weight:600;
}
.nav .knopf-klein:hover{ background:#c30060; border-bottom-color:transparent; }
.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--tinte);
  color:var(--weiss);
  padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,7vw,5.5rem);
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:8px;
  background:linear-gradient(90deg,var(--magenta) 0 33%,var(--violett) 33% 66%,var(--signal) 66% 100%);
}
.hero .wrap{ position:relative; z-index:2; display:grid; gap:2.5rem; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; }
.hero h1{ margin-top:1rem; }
.hero h1 .schnell{ color:var(--signal); display:inline-block; }
.hero .lead{ color:#d7d3e2; max-width:38ch; }

.hero-aktionen{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.75rem; }

/* Signatur: Fernsehturm-Silhouette aus Bandbreiten-Balken */
.turm{ display:flex; justify-content:center; }
.turm svg{ width:min(100%,320px); height:auto; }
.turm .kugel{ transform-origin:center; }

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-block; font-family:var(--display); font-weight:700;
  font-size:.95rem; letter-spacing:.01em;
  padding:.95rem 1.5rem; border-radius:2px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .12s ease, background .15s ease;
}
.knopf:hover{ transform:translateY(-2px); }
.knopf-magenta{ background:var(--magenta); color:#fff; }
.knopf-magenta:hover{ background:#c30060; }
.knopf-linie{ background:transparent; color:var(--weiss); border-color:rgba(255,255,255,.45); }
.knopf-linie:hover{ border-color:var(--signal); color:var(--signal); }
.knopf-dunkel{ background:var(--tinte); color:#fff; }

/* ---------- Abschnitte ---------- */
.abschnitt{ padding-block:clamp(3.25rem,7vw,5.5rem); }
.abschnitt--beton{ background:var(--beton); }
.abschnitt--weiss{ background:var(--weiss); }
.abschnitt-kopf{ max-width:56ch; margin-bottom:2.5rem; }

/* ---------- Linienband (Ablauf) ---------- */
.linie{ position:relative; margin-top:2.5rem; }
.linie::before{
  content:""; position:absolute; left:0; right:0; top:19px; height:6px;
  background:var(--violett); border-radius:3px;
}
.linie-stationen{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  list-style:none; margin:0; padding:0; position:relative;
}
.linie-stationen li{ padding-top:0; }
.station-punkt{
  width:44px; height:44px; border-radius:50%;
  background:var(--weiss); border:6px solid var(--violett);
  display:grid; place-items:center; font-family:var(--display); font-weight:800;
  color:var(--tinte); margin-bottom:1rem; position:relative; z-index:2;
}
.linie-stationen li:last-child .station-punkt{ border-color:var(--magenta); background:var(--magenta); color:#fff; }
.station-titel{ font-family:var(--display); font-weight:700; font-size:1.05rem; margin:0 0 .35rem; }
.station-text{ font-size:.95rem; color:var(--tinte-80); margin:0; }

/* ---------- Angebots-Karten ---------- */
.filter{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.filter button{
  font-family:var(--display); font-size:.85rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  background:transparent; color:var(--tinte);
  border:2px solid var(--tinte); border-radius:2px;
  padding:.55rem 1rem; cursor:pointer;
}
.filter button[aria-pressed="true"]{ background:var(--tinte); color:#fff; }

.karten{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); align-items:start; }
.karte{
  background:var(--weiss);
  border:2px solid var(--tinte);
  border-radius:var(--r);
  padding:1.75rem 1.5rem 1.5rem;
  display:flex; flex-direction:column;
  position:relative;
  box-shadow:6px 6px 0 rgba(20,18,28,.09);
}
.karte .badge{
  position:absolute; top:-14px; left:1.25rem;
  background:var(--signal); color:var(--tinte);
  font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:2px;
}
.karte--bestand{ border-color:var(--magenta); }
.karte--bestand .badge{ background:var(--magenta); color:#fff; }
.karte h3{ margin:.4rem 0 .3rem; }
.karte .speed{ font-size:.95rem; color:var(--tinte-80); margin-bottom:1rem; }
.preis{ font-family:var(--display); font-weight:800; font-size:2.2rem; line-height:1; color:var(--magenta); }
.preis-zusatz{ font-size:.85rem; color:var(--tinte-80); margin:.4rem 0 1.1rem; }
.karte ul{ list-style:none; margin:0 0 1.25rem; padding:0; display:grid; gap:.55rem; }
.karte ul li{ position:relative; padding-left:1.5rem; font-size:.95rem; }
.karte ul li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:50%; background:var(--violett);
}
.karte .hinweis{ font-size:.8rem; color:var(--tinte-80); margin:0 0 1.25rem; }
.karte .knopf{ margin-top:auto; text-align:center; }

/* ---------- Bestandskunden-Block ---------- */
.bestand{
  background:var(--tinte); color:var(--weiss);
  border-radius:var(--r);
  padding:clamp(1.75rem,4vw,3rem);
  display:grid; gap:2rem; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  align-items:center;
}
.bestand h2{ color:var(--weiss); }
.bestand p{ color:#d7d3e2; }
.zwei-jahre{
  border:3px solid var(--signal); border-radius:var(--r);
  padding:1.5rem; text-align:center;
}
.zwei-jahre .zahl{ font-family:var(--display); font-weight:800; font-size:4.5rem; line-height:1; color:var(--signal); }
.zwei-jahre .label{ font-size:.95rem; color:#d7d3e2; margin:0; }

/* ---------- Formular ---------- */
.formular{
  background:var(--weiss); border:2px solid var(--tinte); border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,2.5rem);
  box-shadow:8px 8px 0 rgba(20,18,28,.09);
}
.feldreihe{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.feld{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.feld label{ font-weight:600; font-size:.9rem; }
.feld .optional{ font-weight:400; color:var(--tinte-80); }
input[type=text],input[type=email],input[type=tel],select,textarea{
  font-family:var(--body); font-size:1rem; color:var(--tinte);
  background:var(--beton-warm);
  border:2px solid #c9c4ba; border-radius:2px;
  padding:.8rem .9rem; width:100%;
}
input:focus,select:focus,textarea:focus{ outline:3px solid var(--violett); outline-offset:1px; border-color:var(--violett); }
textarea{ min-height:140px; resize:vertical; }
.checkbox{ display:flex; gap:.75rem; align-items:flex-start; font-size:.9rem; margin:1rem 0 1.5rem; }
.checkbox input{ margin-top:.3rem; width:20px; height:20px; accent-color:var(--magenta); flex:none; }
.hp{ position:absolute; left:-9999px; }

.meldung{ border-radius:2px; padding:1rem 1.25rem; margin-bottom:1.5rem; font-weight:500; }
.meldung--ok{ background:#e6f6ec; border-left:6px solid #1c8a4b; }
.meldung--fehler{ background:#fdeaef; border-left:6px solid var(--magenta); }

/* ---------- FAQ ---------- */
.faq details{
  background:var(--weiss); border:2px solid var(--tinte); border-radius:var(--r);
  padding:1rem 1.25rem; margin-bottom:.85rem;
}
.faq summary{ font-family:var(--display); font-weight:700; cursor:pointer; font-size:1.05rem; }
.faq summary::marker{ color:var(--magenta); }
.faq p{ margin:.85rem 0 .25rem; }

/* ---------- Fuß ---------- */
.fuss{ background:var(--tinte); color:#c9c4d6; padding-block:3rem 2rem; font-size:.92rem; }
.fuss a{ color:var(--weiss); }
.fuss-grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.fuss h4{ font-family:var(--display); color:var(--weiss); font-size:1rem; margin:0 0 .75rem; }
.fuss ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.fuss-unten{ border-top:1px solid #33304a; margin-top:2rem; padding-top:1.25rem; font-size:.85rem; }

/* ---------- Inhaltsseiten ---------- */
.inhalt{ background:var(--weiss); border:2px solid var(--tinte); border-radius:var(--r); padding:clamp(1.5rem,4vw,3rem); }
.inhalt h2{ font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); margin-top:2rem; }
.inhalt h2:first-child{ margin-top:0; }
.inhalt address{ font-style:normal; }

/* ---------- Bewegung ---------- */
.auf{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.auf.sichtbar{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .auf{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .turm{ order:-1; }
  .turm svg{ width:min(70%,220px); }
  .bestand{ grid-template-columns:1fr; }
  .linie-stationen{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .nav{ display:none; }
  .nav.offen{
    display:flex; flex-direction:column; align-items:flex-start; gap:.25rem;
    position:absolute; top:64px; left:0; right:0;
    background:var(--tinte); padding:1rem var(--pad) 1.5rem;
    border-bottom:3px solid var(--signal);
  }
  .nav.offen a{ width:100%; padding:.6rem 0; }
  .nav-toggle{
    display:block; margin-left:auto; background:transparent; border:2px solid rgba(255,255,255,.4);
    color:#fff; border-radius:2px; padding:.45rem .7rem; font-size:.9rem; cursor:pointer;
  }
  .feldreihe{ grid-template-columns:1fr; }
  .linie-stationen{ grid-template-columns:1fr; }
  .linie::before{ display:none; }
}