/* Gemeinsame Grundlage aller Startseiten-Abschnitte.
   ---------------------------------------------------------------------------
   Eyebrow / Titel / Fließtext sind in jedem Abschnitt identisch — sie stehen
   deshalb GENAU HIER und nicht je Abschnitt noch einmal. Abschnitts-eigene
   Bausteine (Karten, Zeitstrahl …) liegen in impark-<abschnitt>.css.

   Farben aus impark-farben.css, Schrift aus impark-fonts.css. */

.impark-sec {
  padding: 72px 0 90px;
  font-family: var(--impark-font, 'Montserrat', system-ui, sans-serif);
  font-weight: 500;
  color: var(--ipk-ink, #414141);
}

/* Flächen-Varianten: Creme ist die Grundfläche, Weiß die Alternative. */
.impark-sec--cream { background: var(--ipk-cream, #fffaf2); }
.impark-sec--white { background: var(--ipk-white, #fff); }

.impark-sec__wrap {
  width: min(1000px, calc(100% - 3rem));
  margin: 0 auto;
}

/* Kopf: linksbündig, schmaler als die Inhaltsbreite darunter. */
.impark-sec__head { max-width: 560px; }

.impark-sec .impark-sec__eyebrow,
.impark-sec__eyebrow {
  display: block;
  margin: 0 0 20px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ipk-orange, #ffa000);
}

/* Zwei Klassen im Selektor, damit die Regel die Alt-Regel „body.impark-brand h2"
   der Innenseiten schlägt — die färbte den Titel sonst dunkel statt blau. */
.impark-sec .impark-sec__title,
.impark-sec__title {
  margin: 0 0 24px;
  font-family: inherit;
  font-weight: 600;
  font-size: 2.375rem;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ipk-blue, #2b7ee2);
}

.impark-sec .impark-sec__lead,
.impark-sec__lead {
  margin: 0;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.43;
  color: var(--ipk-muted, #646464);
}

@media (max-width: 900px) {
  .impark-sec { padding: 56px 0 62px; }
  .impark-sec__title { font-size: 1.85rem; }
}

/* ---------------------------------------------------------------------------
   Seiten-Hero (Stellplätze, Dauermiete, …) — EINE Umsetzung für alle Seiten.
   Blaue Vollbreiten-Fläche, schräge Unterkante zur Creme-Fläche darunter,
   Eyebrow in Orange, Titel zweifarbig (erste Zeile weiß, Rest hellblau).
   --------------------------------------------------------------------------- */
.impark-hero {
  position: relative;
  padding: 88px 0 148px;
  background: var(--ipk-blue, #2b7ee2);
  color: var(--ipk-white, #fff);
  overflow: hidden;
  font-family: var(--impark-font, 'Montserrat', system-ui, sans-serif);
  font-weight: 500;
}

/* Die Schräge: cremefarbener Keil unten links — gleiche Farbe wie die Seite. */
.impark-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 60px;
  background: var(--ipk-cream, #fffaf2);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.impark-hero__wrap { width: min(1220px, calc(100% - 4rem)); margin: 0 auto; }

.impark-hero__eyebrow {
  display: block;
  margin: 0 0 32px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ipk-orange, #ffa000);
}

.impark-hero__title {
  margin: 0 0 24px;
  font-family: inherit;
  font-size: 3.375rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ipk-white, #fff);
}

.impark-hero__title-soft { color: var(--ipk-blue-soft, #95bff1); }

.impark-hero__sub {
  margin: 0;
  max-width: 34ch;
  font-size: 1.25rem;
  line-height: 1.43;
  color: var(--ipk-blue-soft, #95bff1);
}

@media (max-width: 900px) {
  .impark-hero { padding: 56px 0 96px; }
  .impark-hero__wrap { width: calc(100% - 2rem); }
  .impark-hero__title { font-size: 2.1rem; }
  .impark-hero__sub { font-size: 1.05rem; }
}

/* ---------------------------------------------------------------------------
   Blaue Inhaltskarte — gemeinsame Grundlage für alle Karten auf hellblauem
   Grund (Abschnitt „Für wen", Abschnitt „Ihre Vorteile im Überblick", …).
   Abschnitts-eigene Zutaten (Eyebrow, Button) stehen in der jeweiligen Datei.
   --------------------------------------------------------------------------- */
.impark-bluecard {
  background: var(--ipk-blue-bg, #e5effc);
  border-radius: 14px;
  padding: 36px 21px 40px;
  text-align: start;
}

.impark-bluecard__title {
  margin: 0 0 14px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ipk-ink, #414141);
}

.impark-bluecard__text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ipk-muted, #646464);
}

/* Zwei-mal-zwei-Raster (Vorteile) */
.impark-cardgrid--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 49px 50px;
  max-width: 887px;
  margin: 62px auto 0;
}

@media (max-width: 900px) {
  .impark-cardgrid--2 { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; max-width: none; }
  .impark-bluecard { padding: 28px 20px 30px; }
  .impark-bluecard__title { font-size: 1.3rem; }
}

/* ---------------------------------------------------------------------------
   Ablauf-Karten (« So einfach funktioniert … ») — weiße Fläche, je Schritt eine
   Karte mit feinem Rahmen und einem Nummernkreis, der auf der Oberkante sitzt.
   --------------------------------------------------------------------------- */
.impark-stepcards {
  counter-reset: impark-stepcard;
  list-style: none;
  max-width: 889px;
  margin: 62px auto 0;
  padding: 0;
}

.impark-stepcard {
  position: relative;
  margin: 0 0 49px;
  padding: 44px 26px 40px;
  min-height: 112px;
  box-sizing: border-box;
  /* Rahmen bewusst deutlich sichtbar (Vorlage), nicht die feine Tabellenlinie. */
  border: 1px solid var(--ipk-line-strong, rgba(65, 65, 65, .34));
  border-radius: 16px;
  background: var(--ipk-white, #fff);
}

.impark-stepcard:last-child { margin-bottom: 0; }

/* Nummernkreis mittig auf der Oberkante */
.impark-stepcard::before {
  counter-increment: impark-stepcard;
  content: counter(impark-stepcard, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ipk-line-strong, rgba(65, 65, 65, .34));
  border-radius: 50%;
  background: var(--ipk-white, #fff);
  color: var(--ipk-orange, #ffa000);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
}

.impark-stepcard__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.56;
  color: var(--ipk-muted, #646464);
}

.impark-stepcard__text b,
.impark-stepcard__text strong { color: var(--ipk-ink, #414141); font-weight: 600; }
.impark-stepcard__text em,
.impark-stepcard__text i,
.impark-stepcard__text a { color: var(--ipk-muted, #646464); }
.impark-stepcard__text a { text-decoration: underline; }

@media (max-width: 900px) {
  .impark-stepcards { margin-top: 44px; max-width: none; }
  .impark-stepcard { padding: 40px 18px 26px; margin-bottom: 36px; }
  .impark-stepcard__text { font-size: .95rem; }
}

/* Alt-Skin der Innenseiten rundet <section> global ab (18px). Unsere Flächen
   sind bewusst kantig und randlos — mit body-Präfix, damit die Regel unabhängig
   von der Ladereihenfolge gewinnt. */
body .impark-hero,
body .impark-sec { border-radius: 0; }

/* Abschnitte auf den Unterseiten (Dauermiete, Für Eigentümer) stecken im
   Inhalts-Container des Themes. Ihre Fläche soll aber über die GANZE Breite
   laufen — sonst steht ein schmales weißes Rechteck auf der Creme-Seite.
   Der Inhalt bleibt über .impark-sec__wrap weiterhin auf 1000 px zentriert. */
.impark-page .impark-sec,
.impark-page .impark-hero {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}
/* Der Fließtext des Heros ist auf Textseiten länger als die 34ch der Startseite. */
.impark-page .impark-hero__sub { max-width: 60ch; }

/* Auf den meisten Seiten sitzt der Hero ÜBER dem Inhalts-Container und schließt
   direkt an das Menü an. Auf «Berechtigte Straßen» wird er dagegen INNERHALB
   von .impark-page ausgegeben — dort schob dessen oberer Innenabstand (38px)
   den blauen Hero nach unten und liess einen cremefarbenen Streifen zwischen
   Menü und Hero stehen. Steht der Hero ganz oben in der Seitenfläche, entfällt
   dieser Abstand. */
.impark-page:has(> .impark-hero:first-child),
.impark-page:has(> .impark-i18n:first-child > .impark-hero:first-child) { padding-top: 0; }
/* Fallback ohne :has() — dieselbe Wirkung für die betroffene Seite. */
.impark-strassen { padding-top: 0; }

/* ---------------------------------------------------------------------------
   Alte Hero-Auszeichnung ohne .impark-hero__wrap (z. B. «Über uns»):
   dort standen Überschrift und Fließtext direkt im Hero. Weil der Hero über
   die volle Fensterbreite läuft, klebten sie am linken Bildschirmrand statt
   im Inhaltsraster zu stehen — und sahen anders aus als auf allen anderen
   Seiten. Diese Regeln geben ihnen dieselbe Innenbreite und dieselbe Typo
   wie .impark-hero__wrap / __title / __sub. Texte bleiben unverändert.
   --------------------------------------------------------------------------- */
.impark-hero > h1,
.impark-hero > p {
  /* Linke Kante fest auf das Inhaltsraster, rechts «auto»: sonst würde der
     Fließtext (max-width 60ch) von den auto-Rändern mittig gestellt statt
     unter der Überschrift zu beginnen. */
  margin-left: max(2rem, calc(50% - 610px));
  margin-right: auto;
  max-width: min(1220px, calc(100% - 4rem));
}

/* Die Schaltfläche bleibt inline-flex (sonst würde sie über die ganze Breite
   laufen) — sie wird nur auf die linke Kante des Inhaltsrasters gerückt. */
.impark-hero > .impark-btn { margin-left: max(2rem, calc(50% - 610px)); }

.impark-hero > h1 {
  margin-top: 0;
  margin-bottom: 24px;
  font-family: inherit;
  font-size: 3.375rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ipk-white, #fff);
}

.impark-hero > p {
  margin-top: 0;
  margin-bottom: 0;
  max-width: min(60ch, calc(100% - 4rem));
  font-size: 1.25rem;
  line-height: 1.43;
  color: var(--ipk-blue-soft, #95bff1);
}

@media (max-width: 900px) {
  .impark-hero > h1,
  .impark-hero > p { margin-left: 1rem; max-width: calc(100% - 2rem); }
  .impark-hero > h1 { font-size: 2.1rem; }
  .impark-hero > p { font-size: 1.05rem; }
  .impark-hero > .impark-btn { margin-left: 1rem; }
}