/* ============================================================
   mih-site.css — Seiten-Layout der öffentlichen Front (Block 3).
   Ergänzt mih-design.css um die Layout-Stile der Design-Referenz
   (referenz/mih-design-paket/index.html, Richtung 2).
   CTA-Stil: Variante B (heller grüner Akzentblock #E8F7EF), fest.
   ============================================================ */

body { background: #FBFAF7; }

/* Padding-Kollision reparieren (Block 6b): Unterseiten setzen .mih-container UND
   .mih-section am SELBEN <main>. mih-design.css definiert .mih-section{padding:64px 0}
   NACH .mih-container{padding:0 24px} — das Shorthand überschreibt das horizontale
   Padding auf 0, sodass der Inhalt auf Viewports <1140px (z. B. iPad 834px) am Rand
   klebt. Der kombinierte Selektor (zwei Klassen) hat höhere Spezifität und stellt das
   horizontale Padding wieder her. NICHT „wegoptimieren" — sonst kehrt der Rand-Bug zurück. */
.mih-container.mih-section { padding: var(--mih-space-8) var(--mih-space-5); }

/* Header: höher, Logo 74px (Stand Block 2), CTA-Button als Pill */
.mih-header__inner { padding: 26px 32px; }
.mih-header__cta { border-radius: 999px; white-space: nowrap; }

/* --- Burger-Button + Mobil-Panel (Block 6) ---
   Desktop: Burger und Panel komplett aus; die volle .mih-nav + .mih-header__cta
   bleiben wie gehabt. Erst der eine Umschaltpunkt ≤900px (s. u.) dreht das um. */
.mih-burger { display: none; }   /* Desktop: kein Burger */
.mih-burger { -webkit-appearance: none; appearance: none; background: transparent;
    border: 1px solid var(--mih-line); border-radius: var(--mih-radius-sm);
    color: var(--mih-marine); cursor: pointer; padding: 0;
    width: 44px; height: 44px; align-items: center; justify-content: center; }
.mih-burger:hover { background: var(--mih-marine-50); }
.mih-burger__close { display: none; }   /* X erst im offenen Zustand */

.mih-mobile-nav { display: none; }   /* Panel-Sichtbarkeit steuert ≤900px + body.mih-nav-open */
.mih-mobile-nav { position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 4px; padding: 12px 20px 18px;
    background: var(--mih-surface); border-bottom: 1px solid var(--mih-line);
    box-shadow: var(--mih-shadow-lg); }
.mih-mobile-nav a { color: var(--mih-ink-soft); font-weight: 600; padding: 14px 8px;
    border-radius: var(--mih-radius-sm); border-bottom: 1px solid var(--mih-line); }
.mih-mobile-nav a:last-of-type { border-bottom: 0; }
.mih-mobile-nav a:hover { color: var(--mih-marine); text-decoration: none; background: var(--mih-marine-50); }
.mih-mobile-nav a.is-active { color: var(--mih-marine); }
.mih-mobile-nav__cta { margin-top: 10px; color: #fff !important; text-align: center;
    border-radius: 999px; border-bottom: 0 !important; }
.mih-mobile-nav__cta:hover { color: #fff !important; }

/* --- Hero (Startseite) --- */
.r2-hero { position: relative; padding: 72px 0 84px; background:
    radial-gradient(ellipse at 75% 20%, #E8F7EF 0%, rgba(232,247,239,0) 60%),
    radial-gradient(ellipse at 10% 90%, #EAF1F8 0%, rgba(234,241,248,0) 55%), #FBFAF7; }
.r2-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.r2-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.1; letter-spacing: -.015em; }
.r2-hero h1 em { font-style: normal; color: #26A65B; }
.r2-hero p { font-size: 1.15rem; color: #555E6D; max-width: 520px; }
.r2-kicker { display: inline-flex; align-items: center; gap: 8px; background: #E8F7EF; color: #1E8549;
    font-weight: 600; font-size: .85rem; padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; }
.r2-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.r2-cta .mih-btn { border-radius: 999px; }

/* Hero-Foto mit schwebenden Kennzahl-Kärtchen */
.r2-photo { position: relative; }
.r2-photo .ph { border-radius: 32px; overflow: hidden; position: relative;
    box-shadow: 0 16px 48px rgba(38,166,91,.12); }
.r2-photo .ph img { display: block; width: 100%; height: auto; }
.r2-photo .float { position: absolute; background: #fff; border-radius: 18px;
    box-shadow: 0 12px 36px rgba(20,40,70,.1); padding: 12px 16px; }
/* Badges diagonal verteilt (Plätze getauscht): die kompakte "3 Min."-Badge (float--2)
   sitzt in der unteren linken Ecke — überlappt nur den Gehweg, ragt bewusst über die
   Bildkante hinaus (verdeckt keine Person), left im 52px-Spaltenabstand für klaren
   Weißraum zum Textblock. Die Kostenlos-Badge (float--1) sitzt oben rechts im Himmel. */
.r2-photo .float--1 { top: 26px; right: -20px; }
.r2-photo .float--2 { bottom: -24px; left: -32px; }
.r2-photo .float .big { font-size: 1.5rem; font-weight: 700; color: #26A65B; line-height: 1; }
.r2-photo .float small { color: #8A93A2; }
/* Wrapper ist im Desktop "luftleer" (display:contents): die Badges positionieren sich
   weiterhin absolut relativ zur .r2-photo — ≥1100px pixelgleich zum Ist-Zustand.
   ≤900px wird der Wrapper zur Chip-Reihe unter dem Foto (s. Mobile-Block). */
.r2-floats { display: contents; }

/* --- Werkzeug-Karten --- */
.r2-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.r2-card { background: #fff; border-radius: 24px; padding: 30px 24px;
    box-shadow: 0 6px 22px rgba(20,40,70,.05); text-align: center; display: block; color: inherit; }
a.r2-card:hover { text-decoration: none; box-shadow: 0 10px 30px rgba(20,40,70,.1); }
.r2-ic { width: 80px; height: 80px; border-radius: 50%; background: #E8F7EF;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
/* B4.2: Lucide-Icons inline (kein CDN), Marine auf hellgrünem Kreis */
.r2-ic svg { width: 40px; height: 40px; }

/* --- CTA-Block: Variante B (heller grüner Akzentblock) --- */
.cta-accent { background: #E8F7EF; border-radius: 40px; margin: 0 24px; }
.cta-accent p { color: #3b6e54; }
.cta-accent .mih-btn { border-radius: 999px; }

/* --- Seitenbild (Rechner/Finanzierung): gerundet, dezenter Schatten --- */
.seite-bild { border-radius: 24px; overflow: hidden; box-shadow: 0 10px 32px rgba(20,40,70,.08); }
.seite-bild img { display: block; width: 100%; height: auto; }

/* --- Footer (B4.8): drei Spalten über die Breite verteilt, flacher --- */
.mih-footer { margin-top: 48px; padding: 36px 0 18px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; align-items: start; }
.foot-grid strong { color: #fff; }
.foot-brand img { display: block; height: 40px; width: auto; }
.foot-brand p { margin: 12px 0 0; font-size: .9rem; color: rgba(255,255,255,.7); max-width: 320px; }
/* Copyright-Zeile: links ©, rechts dezenter Partner-Login (Ghost-Button —
   bewusst zurückhaltend, konkurriert nicht mit den grünen CTAs) */
.mih-footer__bottom { display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; }
.foot-login { display: inline-block; padding: 4px 14px; border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px; font-size: .8rem; color: rgba(255,255,255,.6) !important;
    background: transparent; text-decoration: none; }
.foot-login:hover { border-color: rgba(255,255,255,.7); color: #fff !important;
    text-decoration: none; }

/* Schmaler Desktop (901–1100px): Hero bleibt 2-spaltig, aber das Foto wird klein —
   Badges schweben weiter, verkleinert und mit nach innen gezogenen Offsets, damit sie
   an den Bildecken sitzen (float--1 oben rechts im Himmel, float--2 unten links am
   Gehweg) und keine Person verdecken. */
@media (min-width: 901px) and (max-width: 1100px) {
  /* Schmaler Desktop (z. B. iPhone-Querformat ab 901px, iPad-Landscape 1024px):
     die volle Nav + CTA passen mit Desktop-Maßen NICHT nebeneinander (langer Link
     "Gesamtkostenrechner" → ~1080px Mindestbreite) und erzeugten horizontalen Scroll.
     Spec verlangt aber die volle Nav ab >900px. Deshalb in diesem Band ein kompakter
     Header: kleineres Logo (52px), engeres Padding/Gap, kleinere Nav-Schrift. So passt
     alles ab 901px scrollfrei; ≥1101px bleibt der Header pixelgleich zum Ist-Zustand. */
  .mih-header__inner { padding: 18px 16px; gap: 14px; }
  .mih-header__logo { height: 52px; }
  .mih-nav { gap: 11px; }
  .mih-nav a { font-size: .9rem; }
  .r2-photo .float { padding: 10px 13px; }
  .r2-photo .float .big { font-size: 1.2rem; }
  .r2-photo .float--1 { top: 18px; right: -10px; }
  .r2-photo .float--2 { bottom: -16px; left: -16px; }
}

/* ============================================================
   EIN Umschaltpunkt für die mobile Front (Block 6): ≤900px.
   Räumt die iPad-Portrait-Quetschzone ab (834px) — Desktop-Nav + Header-CTA aus,
   Burger an; alle Raster (Hero, Karten, Footer) fallen einspaltig; die Hero-Badges
   werden zur statischen Chip-Reihe unter dem Foto. Landscape ≥1024px (also alles
   >900px) behält die volle Nav unverändert.
   Breakpoint-Entscheid: die früheren 768/820px-Queries sind hier auf EINEN Wert (900)
   konsolidiert, damit Header und Raster nie in einem Zwischenbereich auseinanderlaufen.
   ============================================================ */
@media (max-width: 900px) {
  /* Header: Desktop-Nav + CTA aus, Burger an, kompaktes Padding, Logo 56px */
  .mih-nav { display: none; }            /* überschreibt bewusst mih-design (768px) — Panel-Steuerung liegt komplett hier */
  .mih-header__cta { display: none; }
  .mih-burger { display: inline-flex; }
  .mih-header__inner { padding: 14px 20px; }
  .mih-header__logo { height: 56px; }    /* HTML-Attribut height="74" per CSS überschrieben; width:auto erhält das Seitenverhältnis */

  /* Mobil-Panel nur im offenen Zustand zeigen + Icon-Wechsel */
  body.mih-nav-open .mih-mobile-nav { display: flex; }
  body.mih-nav-open .mih-burger__open { display: none; }
  body.mih-nav-open .mih-burger__close { display: block; }

  /* Unterseiten-Padding mobil: 20px horizontal (bündig zum Header-Padding mobil),
     48px vertikal — s. Padding-Kollisions-Kommentar oben. */
  .mih-container.mih-section { padding: var(--mih-space-7) 20px; }

  /* Raster einspaltig (Hero, Karten, Footer) */
  .r2-grid, .r2-cards { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Hero kompakter; Badges raus aus der Schwebe → statische Chip-Reihe unter dem Foto */
  .r2-hero { padding: 48px 0 56px; }
  .r2-floats { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
  .r2-photo .float { position: static; padding: 10px 14px; }
  .r2-photo .float .big { font-size: 1.1rem; }

  .cta-accent { margin: 0 8px; }
}