/* =============================================================================
   wasserschadenhilfe.com — gemeinsames Stylesheet
   Aufgebaut auf den Token des DÖLCO Design Systems (Farben, Radien, Bewegung,
   Zustände). Struktur und Inhalt einer Seite bleiben in ihrer eigenen
   custom_template.html; hier liegt ausschliesslich das Aussehen.

   Abweichungen vom Design-System, bewusst und begruendet:
   - Schrift: System-Schriftstapel statt Myriad Pro (tka 2026-07-30). Myriad Pro
     ist lizenzpflichtig und darf als Webfont nicht ausgeliefert werden; ein
     selbst gehosteter Ersatz kostet Ladezeit und Dateien. Der Systemstapel
     liefert auf jedem Geraet die dort beste humanistische Grotesk - auf Windows
     Segoe UI, auf macOS/iOS San Francisco, auf Android Roboto. Kein Nachladen,
     keine Lizenzfrage, kein Layout-Sprung beim Schriftwechsel.
   - Keine Phosphor-Icons per CDN. Externe Ladevorgaenge waeren einwilligungs-
     pflichtig; die Seite kommt ohne Icons aus.
   - Kein Dark-Mode: eine oeffentliche Marketingseite, keine Anwendung.
   ========================================================================== */

:root{
  /* Marke - 1:1 aus tokens/colors.css */
  --doelco-blue:#086796;
  --doelco-blue-dark:#054a68;
  --doelco-blue-darker:#033348;
  --doelco-blue-light:#0099bf;
  --doelco-blue-tint:#e6f0f5;
  --doelco-blue-tint-strong:#cfe3ee;

  /* Neutrale */
  --n-0:#ffffff;
  --n-25:#f4f6fa;
  --n-50:#eef1f5;
  --n-100:#d8dde6;
  --n-400:#5b6472;
  --n-700:#1a2332;

  /* Status - nur fuer Status, nicht als Schmuckfarbe */
  --success:#2d7a3e;
  --warning:#c47000;
  --danger:#c0392b;

  /* Semantische Aliase */
  --background:var(--n-25);
  --foreground:var(--n-700);
  --card:var(--n-0);
  --primary:var(--doelco-blue);
  --primary-foreground:#ffffff;
  --muted-foreground:var(--n-400);
  --accent:var(--doelco-blue-tint);
  --accent-foreground:var(--doelco-blue);
  --border:var(--n-100);
  --ring:var(--doelco-blue);

  /* Radien - voll gerundet gibt es nicht */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px;

  --uebergang:.15s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.6;
  color:var(--foreground); background:var(--background);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary)}
/* Fokusring nie entfernen - 2 px Markenblau bei 50 % */
:focus-visible{outline:2px solid color-mix(in oklab,var(--ring) 50%,transparent);outline-offset:2px}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:12px;z-index:2000;background:var(--card);padding:10px 16px;border-radius:var(--r-md);border:1px solid var(--border)}

/* --- Kopfleiste ---------------------------------------------------------- */
header{background:var(--card);border-bottom:2px solid var(--primary);position:sticky;top:0;z-index:1000}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 0}
.kopf img{max-height:48px;width:auto}
nav.haupt{display:flex;flex-wrap:wrap;gap:2px;align-items:center}
nav.haupt a{
  text-decoration:none;color:var(--foreground);font-weight:600;font-size:.94rem;
  padding:8px 12px;border-radius:var(--r-md);transition:color var(--uebergang),background var(--uebergang);
}
nav.haupt a:hover{color:var(--primary);background:var(--accent)}
.hotline{
  background:var(--primary);color:var(--primary-foreground)!important;
  padding:9px 16px;border-radius:var(--r-md);font-weight:700;white-space:nowrap;margin-left:8px;
  transition:opacity var(--uebergang);
}
.hotline:hover{opacity:.9;background:var(--primary)}

/* --- Hero: Text ueber Foto ------------------------------------------------
   Bewusste Abweichung vom Design System (tka 2026-07-30). Dort steht
   "Text steht nie auf einem Foto"; tka haelt die Regel fuer nicht praktikabel.
   Damit die Lesbarkeit trotzdem traegt, ist der Verlauf kraeftig genug fuer
   weisse Schrift auf hellen Motiven, und die Grundflaeche bleibt Markenblau -
   faellt das Bild aus, steht der Text weiter auf blauem Grund statt auf Weiss.
   -------------------------------------------------------------------------- */
.hero{
  background-color:var(--primary);
  background-size:cover;background-position:center;
  color:var(--primary-foreground);padding:88px 0;text-align:center;
}
.hero h1{
  font-size:clamp(1.6rem,3.4vw,2.35rem);line-height:1.25;margin-bottom:16px;font-weight:700;
  text-shadow:0 2px 8px rgba(3,51,72,.55);
}
.hero p{
  font-size:1.1rem;margin:0 auto 26px;max-width:820px;
  text-shadow:0 1px 6px rgba(3,51,72,.55);
}

.knopf{
  background:var(--n-0);color:var(--primary);
  padding:13px 26px;text-decoration:none;border-radius:var(--r-md);
  font-weight:700;display:inline-block;font-size:1.02rem;border:1px solid transparent;
  transition:opacity var(--uebergang),transform var(--uebergang);
}
.knopf:hover{opacity:.9;transform:translateY(-1px)}
.knopf.blau{background:var(--primary);color:var(--primary-foreground)}

/* --- Abschnitte ---------------------------------------------------------- */
section{padding:64px 0}
.s-weiss{background:var(--card)}
.s-grau{background:var(--background)}
.s-blau{background:var(--primary);color:var(--primary-foreground)}
.s-dunkel{background:var(--doelco-blue-dark);color:var(--primary-foreground)}
.s-akzent{background:var(--accent);border-top:2px solid var(--primary)}
.s-blau a,.s-dunkel a{color:var(--doelco-blue-tint-strong)}

h2.titel{font-size:clamp(1.45rem,2.6vw,2rem);margin-bottom:24px;text-align:center;color:var(--primary);font-weight:700}
.s-blau h2.titel,.s-dunkel h2.titel{color:var(--primary-foreground)}
h3{font-size:1.15rem;margin:24px 0 8px;color:var(--primary);font-weight:600}
.s-blau h3,.s-dunkel h3{color:var(--primary-foreground)}
p+p{margin-top:14px}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.duo>.zweit{order:2}
/* Bilder: Rahmen statt Schatten, wie Karten im Design-System */
.bild-rund{border-radius:var(--r-xl);border:1px solid var(--border);width:100%}

.liste{list-style:none;columns:2;column-gap:32px;margin-top:18px}
.liste li{padding:6px 0 6px 22px;position:relative;font-weight:500}
.liste li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:2px;background:var(--primary)}
.s-blau .liste li::before,.s-dunkel .liste li::before{background:var(--doelco-blue-tint-strong)}

/* --- Karten: 1 px Rahmen, kein Schatten ---------------------------------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.team-karte{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;text-align:center}
.team-karte img{aspect-ratio:1/1;object-fit:cover;width:100%}
.team-initialen{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--primary);font-size:2.2rem;font-weight:700}
.team-karte figcaption{padding:14px}
.team-karte strong{display:block;color:var(--primary);font-size:1rem}
.team-karte span{display:block;font-size:.86rem;color:var(--muted-foreground);margin-top:4px}

.notruf{text-align:center}
.notruf .nummer{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:700;display:inline-block;margin:6px 0 4px}
.notruf .nummer a{color:var(--primary-foreground);text-decoration:none}

.kontakt-karte{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px}
.kontakt-karte p+p{margin-top:12px}

/* --- Stuetzpunktliste ---------------------------------------------------- */
.stuetzpunkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:8px}
.stuetzpunkt{
  background:var(--card);border:1px solid var(--border);border-left:2px solid var(--primary);
  border-radius:var(--r-xl);padding:20px;transition:border-color var(--uebergang),transform var(--uebergang);
}
.stuetzpunkt:hover{border-color:var(--primary);transform:translateY(-1px)}
.stuetzpunkt strong{display:block;font-size:1.02rem;margin-bottom:6px}
.stuetzpunkt strong a{color:var(--primary);text-decoration:none}
.stuetzpunkt strong a:hover{text-decoration:underline}
.stuetzpunkt .ort{display:block;color:var(--muted-foreground);font-size:.92rem}
.stuetzpunkt .regionen{display:block;margin-top:8px;font-size:.92rem}

/* --- Rechtstexte --------------------------------------------------------- */
.rechtstext{max-width:820px;margin:0 auto}
.rechtstext h3{margin-top:32px}
.rechtstext ul{margin:12px 0 12px 22px}
.rechtstext li{margin-bottom:5px}
.rechtstext .stand{margin-top:36px;padding-top:16px;border-top:1px solid var(--border);color:var(--muted-foreground);font-size:.92rem}

footer{background:var(--doelco-blue-darker);color:var(--doelco-blue-tint-strong);padding:52px 0 24px;font-size:.94rem}
footer h4{color:var(--n-0);margin-bottom:16px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:8px}
.fuss{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px}
footer a{color:var(--n-0)}
.fuss-unten{text-align:center;margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.86rem;opacity:.75}

/* --- Untere Leiste, nur mobil ---------------------------------------------
   Das Design System schreibt fuer Mobilgeraete eine untere Leiste vor. Oben
   bleiben nur Logo und Rufnummer - vorher brachen sieben Links in drei Zeilen
   um und fraßen 168 px, bevor der erste Inhalt kam.
   -------------------------------------------------------------------------- */
.mobil-leiste{display:none}

@media(max-width:900px){
  .duo{grid-template-columns:1fr;gap:28px}
  .duo>.zweit{order:0}
  .liste{columns:1}
  .fuss{grid-template-columns:1fr;gap:28px}
  section{padding:44px 0}
  .hero{padding:56px 0}

  /* Kopfzeile auf Logo + Rufnummer reduzieren */
  nav.haupt a:not(.hotline){display:none}
  .kopf{padding:8px 0}
  .kopf img{max-height:40px}

  /* Platz fuer die untere Leiste, damit der Fuss nicht darunter verschwindet */
  body{padding-bottom:66px}

  .mobil-leiste{
    /* auto-columns statt fester Spaltenzahl: Partnerseiten haben drei Felder
       (ohne Verweis auf die Uebersicht), DOELCO-Seiten vier */
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:1100;
    background:var(--primary);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobil-leiste a{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 4px;text-decoration:none;
    color:var(--doelco-blue-tint-strong);font-size:.7rem;font-weight:600;
    transition:color var(--uebergang),background var(--uebergang);
  }
  .mobil-leiste a:first-child{color:var(--primary-foreground)}
  .mobil-leiste a:hover,.mobil-leiste a:focus-visible{color:var(--primary-foreground);background:rgba(255,255,255,.12)}
  .mobil-leiste svg{width:22px;height:22px;fill:currentColor;display:block}
}