/* ============================================================================
   Norman Welz, zentrales Design
   ----------------------------------------------------------------------------
   Alle Farben, Schriften und Bausteine stehen HIER, nicht in den Seiten.
   Die Build-Skripte vergeben nur noch Klassen. Wer das Aussehen aendern will,
   aendert diese Datei und nicht 24 Seiten.

   Grundlage: Normans eigener Landingpage-Entwurf (Mail 04.09.2026, Erklaervideo
   08.09.2026), umgesetzt auf der Entwurfsseite und am 12.09.2026 zum Standard
   erklaert.

   ⚠️ Farbwerte sind nicht frei waehlbar. Jeder Textton ist gegen seine Flaeche
   gerechnet und haelt die WCAG-Grenze (4,5 fuer normalen Text, 3,0 ab 24px).
   Die frueheren Werte lagen teils darunter: Grau #6b7683 auf Creme kam auf 4,16,
   die Fusszeile auf 3,75. Vor jeder Farbaenderung neu rechnen.
   ========================================================================== */

:root{
  /* Flaechen */
  --nw-navy:#062741;          /* brand.json colors.primary */
  --nw-navy-2:#0a2c49;        /* minimal heller, fuer Verlaeufe */
  --nw-navy-tief:#041d31;     /* Fusszeile */
  --nw-creme:#f4f3ee;         /* helle Hauptflaeche */
  --nw-creme-2:#fbfaf7;       /* zweite Stufe fuer den Wechsel */
  --nw-weiss:#ffffff;         /* Karten auf hellem Grund */

  /* Akzent */
  --nw-gold:#cdae86;          /* brand.json accent.gold, Kontrast 7,27 auf Navy */
  --nw-gold-hell:#e0c9a6;     /* accent.gold_light, Hover und feine Linien */
  --nw-gold-dunkel:#7d653f;   /* accent.gold_on_light, 4,97 auf Creme */

  /* Schrift auf hellem Grund */
  --nw-tinte:#323335;         /* Fliesstext */
  --nw-tinte-leise:#5f6975;   /* Nebentext, 5,02 auf Creme (vorher 4,16) */

  /* Schrift auf Navy */
  --nw-hell:#d7e6ef;          /* Ueberschriften */
  --nw-hell-leise:#a9bccc;    /* Nebentext, 7,82 */
  --nw-grau:#9ba5ae;          /* Labels, 6,10 */
  --nw-fuss:#7b93ab;          /* Fusszeile auf Navy-tief, 5,39 (vorher 4,18) */

  /* Linien */
  --nw-linie-hell:rgba(6,39,65,.12);
  --nw-linie-gold:rgba(205,174,134,.30);
  --nw-linie-dunkel:rgba(255,255,255,.10);

  /* Schrift */
  --nw-serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
  --nw-sans:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --nw-radius:16px;
  --nw-ease:cubic-bezier(.22,.61,.36,1);
}

/* --- Flaechen ------------------------------------------------------------ */
.nw-f-navy{background:var(--nw-navy)!important}
.nw-f-creme{background:var(--nw-creme)!important}
.nw-f-creme2{background:var(--nw-creme-2)!important}
.nw-f-fuss{background:var(--nw-navy-tief)!important}

/* --- Typografie ---------------------------------------------------------- */
/* Ueberschriften laufen in der Serife, Fliesstext bleibt Montserrat.
   ⚠️ Nur h1 und h2. Karten- und Spaltentitel (h3 bis h5, div) bleiben in der Grotesk,
   so wie in Normans Entwurf: dort sind „Für dich, wenn …" und die Kartentitel Montserrat.
   ⚠️ !important ist hier noetig, weil das Elementor-Kit eine eigene Regel gleicher
   Spezifitaet mitbringt. Die Schriftfamilie wird bewusst NICHT mehr pro Widget gesetzt,
   Elementor macht daraus einen einzigen ungueltigen Schriftnamen (12.09.2026). */
h1.elementor-heading-title,
h2.elementor-heading-title{font-family:var(--nw-serif)!important;letter-spacing:-.01em}
.nw-h1 .elementor-heading-title,
.nw-h2 .elementor-heading-title{font-family:var(--nw-serif)!important;letter-spacing:-.01em}
.nw-h1 .elementor-heading-title{color:var(--nw-navy)}
.nw-h2 .elementor-heading-title{color:var(--nw-navy)}
.nw-h3 .elementor-heading-title{color:var(--nw-navy)}
/* auf dunklem Grund */
/* Auf dunklem Grund reines Weiss, nicht das gebrochene #d7e6ef. So steht es in
   Normans Entwurf; der Unterschied faellt sofort auf. */
.nw-f-navy .nw-h1 .elementor-heading-title,
.nw-f-navy .nw-h2 .elementor-heading-title,
.nw-f-navy .nw-h3 .elementor-heading-title,
.nw-auf-dunkel .elementor-heading-title{color:#fff}

.nw-lead{color:var(--nw-tinte-leise)}
.nw-f-navy .nw-lead,.nw-auf-dunkel .nw-lead{color:var(--nw-hell-leise)}

/* --- Kicker -------------------------------------------------------------- */
/* Getrackte Versalien, keine Pille. Auf hellem Grund das dunkle Gold, sonst
   faellt der Text unter die Kontrastgrenze. */
.nw-kicker{display:inline-block;font-family:var(--nw-sans);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;line-height:1.5;color:var(--nw-gold-dunkel)}
.nw-f-navy .nw-kicker,.nw-auf-dunkel .nw-kicker{color:var(--nw-gold)}

/* --- Haken-Listen -------------------------------------------------------- */
.nw-liste{list-style:none;margin:22px 0 0;padding:0}
.nw-liste li{position:relative;padding-left:30px;margin-bottom:11px;font-size:15px;
  line-height:1.5;color:var(--nw-tinte)}
.nw-liste li::before{content:"\2713";position:absolute;left:0;top:1px;width:19px;height:19px;
  border-radius:50%;border:1px solid var(--nw-gold-dunkel);color:var(--nw-gold-dunkel);
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.nw-f-navy .nw-liste li,.nw-auf-dunkel .nw-liste li{color:var(--nw-hell-leise)}
.nw-f-navy .nw-liste li::before,.nw-auf-dunkel .nw-liste li::before{
  border-color:var(--nw-gold);color:var(--nw-gold)}
/* schlichte Variante ohne Ring, fuer enge Karten */
.nw-liste--flach li::before{border:0;width:auto;height:auto;font-size:14px}
/* Ausschluss-Liste */
.nw-liste--nein li::before{content:"\2715";border-color:#c9302c;color:#c9302c}

/* --- Knoepfe ------------------------------------------------------------- */
.nw-btn{display:inline-flex;align-items:center;gap:12px;background:var(--nw-gold);
  color:var(--nw-navy)!important;font-family:var(--nw-sans);font-weight:700;font-size:15.5px;
  line-height:1;padding:16px 16px 16px 30px;border-radius:999px;text-decoration:none;
  box-shadow:0 16px 34px -14px rgba(205,174,134,.55);
  transition:transform .35s var(--nw-ease),box-shadow .35s var(--nw-ease)}
.nw-btn:hover{transform:translateY(-2px);background:var(--nw-gold-hell);
  color:var(--nw-navy)!important;box-shadow:0 22px 40px -14px rgba(205,174,134,.7)}
.nw-btn .ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:rgba(6,39,65,.14);font-size:14px}
.nw-btn--voll{width:100%;justify-content:center;padding-left:24px}
.nw-btn-sub{display:block;margin-top:11px;font-size:13px;color:var(--nw-tinte-leise)}
.nw-f-navy .nw-btn-sub,.nw-auf-dunkel .nw-btn-sub{color:var(--nw-hell-leise)}

/* Formular-Knopf. Gleiche Pille wie .nw-btn, aber ueber volle Breite und als
   <button>, deshalb Rahmen und Zeiger ausdruecklich. */
.nw-btn-form{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  gap:10px;background:var(--nw-gold);color:var(--nw-navy);border:none;border-radius:999px;
  padding:16px 20px;font-family:var(--nw-sans);font-size:16px;font-weight:700;cursor:pointer;
  box-shadow:0 14px 30px -14px rgba(205,174,134,.55);
  transition:transform .35s var(--nw-ease),background .2s var(--nw-ease)}
.nw-btn-form:hover{background:var(--nw-gold-hell);transform:translateY(-2px)}

/* Elementor-Formulare (Kontaktseite) bringen einen eigenen Knopf mit. Auch der
   laeuft ueber die Marken-Pille, sonst steht ein dunkelblauer Kasten in einer
   sonst goldenen Seite. */
.elementor-button[type="submit"],.elementor-form .elementor-button{
  background-color:var(--nw-gold)!important;color:var(--nw-navy)!important;
  border-radius:999px!important;font-weight:700}
.elementor-form .elementor-button:hover{background-color:var(--nw-gold-hell)!important;
  color:var(--nw-navy)!important}

/* Symbol im Kreis, etwa fuer das Briefsymbol auf der Bestaetigungsseite.
   ⚠️ Auf Navy war die alte Fassung praktisch unsichtbar: ein Kreis in
   rgba(6,39,65,.06) auf einem Grund derselben Farbe, dazu ein kleines Zeichen.
   Jetzt goldener Ring auf leicht aufgehelltem Grund, Zeichen in Gold. */
.nw-ikon{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 auto 4px;font-size:40px;line-height:1;
  background:rgba(6,39,65,.05);color:var(--nw-navy);border:1px solid rgba(6,39,65,.10)}
.nw-f-navy .nw-ikon,.nw-auf-dunkel .nw-ikon{background:rgba(205,174,134,.12);
  color:var(--nw-gold);border-color:rgba(205,174,134,.45)}
@media(max-width:520px){.nw-ikon{width:72px;height:72px;font-size:33px}}

/* --- Karten -------------------------------------------------------------- */
.nw-card{background:var(--nw-weiss);border:1px solid var(--nw-linie-gold);
  border-radius:var(--nw-radius);
  box-shadow:0 18px 44px -28px rgba(6,39,65,.16)!important;
  transition:transform .5s var(--nw-ease),box-shadow .5s var(--nw-ease)}
.nw-card:hover{transform:translateY(-5px);box-shadow:0 34px 70px -30px rgba(6,39,65,.24)!important}
/* Karte auf dunklem Grund */
.nw-f-navy .nw-card,.nw-karte-dunkel{background:rgba(255,255,255,.045)!important;
  border-color:var(--nw-linie-gold)!important}

/* --- Preis-Karten -------------------------------------------------------- */
.nw-price{position:relative}
.nw-reco{border-color:rgba(205,174,134,.45)!important}
.nw-reco>.elementor-widget-wrap{position:relative;overflow:hidden}
.nw-reco>.elementor-widget-wrap::before{content:"";position:absolute;left:0;right:0;top:0;
  height:4px;background:linear-gradient(90deg,var(--nw-gold),var(--nw-gold-hell));z-index:3}
.nw-preis-zahl{font-family:var(--nw-serif);font-size:34px;font-weight:700;color:var(--nw-gold)}
.nw-vorteil{align-self:flex-start;display:inline-block;margin-top:12px;
  background:rgba(205,174,134,.12);border:1px solid rgba(205,174,134,.45);
  color:var(--nw-gold-hell);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700}

/* --- Kopfleiste ---------------------------------------------------------- */
.nw-topbar{background:var(--nw-navy)!important;border-bottom:1px solid var(--nw-linie-gold)!important}
.nw-topbar .nw-marke{display:block;color:#fff;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;font-size:12px}
.nw-topbar .nw-marke-sub{display:block;color:var(--nw-gold);font-size:9.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;margin-top:5px}
.nw-topbar-fix{position:sticky;top:0;z-index:9000;box-shadow:0 2px 14px rgba(6,39,65,.18)}
body.admin-bar .nw-topbar-fix{top:32px}
@media(max-width:782px){body.admin-bar .nw-topbar-fix{top:46px}}

/* --- Fusszeile ----------------------------------------------------------- */
.nw-footer{background:var(--nw-navy-tief)!important}
.nw-footer,.nw-footer p,.nw-footer li,.nw-footer span{color:var(--nw-fuss)}
.nw-footer a{color:var(--nw-fuss);text-decoration:none;transition:color .2s var(--nw-ease)}
.nw-footer a:hover{color:#fff}
.nw-footer .nw-f-titel{color:#fff;font-weight:700}

/* --- Zitatband ----------------------------------------------------------- */
.nw-idee{background:var(--nw-navy);border-radius:var(--nw-radius);padding:34px 30px;text-align:center}
.nw-idee-gross{font-family:var(--nw-serif);font-size:23px;line-height:1.45;color:var(--nw-gold)}
.nw-idee-klein{margin-top:12px;font-size:14px;line-height:1.6;color:var(--nw-hell-leise)}

/* --- Kennzahlen ---------------------------------------------------------- */
.nw-stat-zahl{font-family:var(--nw-serif);font-weight:700;color:var(--nw-navy)}
.nw-stat-label{font-size:13px;color:var(--nw-tinte-leise)}
.nw-f-navy .nw-stat-zahl{color:var(--nw-gold)}
.nw-f-navy .nw-stat-label{color:var(--nw-hell-leise)}

/* --- Hilfen -------------------------------------------------------------- */
/* Unsichtbare Widgets (Stil-Bloecke, Popups, Skripte) sind 0px hoch, schleppen
   aber je 20px Elementor-Standardabstand mit und erzeugen weisse Streifen. */
.nw-tail{margin:0!important;line-height:0}
.nw-hairline{display:block;width:64px;height:1px;background:var(--nw-gold);margin:26px 0}
.nw-f-navy .nw-hairline{background:var(--nw-gold)}

@media(prefers-reduced-motion:reduce){
  .nw-btn,.nw-card{transition:none}
  .nw-btn:hover,.nw-card:hover{transform:none}
}