/* netzsprung.de - gemeinsames Design (Landingpage, Blog, Rechtstexte, Login). Farben aus dem Logo:
   Rot #e31e24, Anthrazit #1d1d1b, Grau #737373. Nur fuer SITE_IDENTITY=netzsprung (base.html, data-identity). */
:root[data-identity="netzsprung"] {
  --nz-red:#e31e24; --nz-ink:#1d1d1b; --nz-grey:#737373; --nz-soft:#f4f4f3;
  --brand-bg:#ffffff; --brand-surface:#ffffff; --brand-accent:#1d1d1b; --brand-light:#f4f4f3;
  --brand-text:#1d1d1b; --brand-text-muted:#737373; --brand-border:#e6e6e4;
  --brand-50:#fff1f1; --brand-100:#ffe0e0; --brand-200:#ffc2c3; --brand-300:#ff9496; --brand-400:#f4585c;
  --brand-500:#e31e24; --brand-600:#c8161c; --brand-700:#a11217; --brand-800:#7f1115; --brand-900:#5c0d10;
  --brand-ring:rgba(227,30,36,.18);
  color-scheme: light;
}
[data-identity="netzsprung"] body { background:#fff; color:var(--nz-ink); }
[data-identity="netzsprung"] nav { opacity:1 !important; background:rgba(255,255,255,.92) !important; border-bottom:1px solid var(--brand-border); box-shadow:none; }
[data-identity="netzsprung"] footer { background:var(--nz-ink) !important; border:0 !important; }

/* Kopf / Fuss */
.nzs-head{ max-width:1080px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nzs-logo img{ display:block; height:46px; width:auto; }
.nzs-nav{ display:flex; align-items:center; gap:22px; font-weight:600; font-size:.95rem; }
.nzs-nav a, .nzs-link{ color:var(--nz-ink); text-decoration:none; background:none; border:0; cursor:pointer; font:inherit; padding:4px 0; border-bottom:2px solid transparent; transition:border-color .15s,color .15s; }
.nzs-nav a:hover, .nzs-nav a.on, .nzs-link:hover{ color:var(--nz-red); border-bottom-color:var(--nz-red); }
.nzs-pill{ background:var(--nz-red); color:#fff !important; padding:8px 16px !important; border-radius:99px; border:0 !important; }
.nzs-pill:hover{ background:#c8161c; }
.nzs-foot{ max-width:1080px; margin:0 auto; padding:34px 20px; text-align:center; color:#cfcfcd; }
.nzs-foot img{ filter:brightness(0) invert(1); opacity:.9; margin-bottom:10px; }
.nzs-foot p{ margin:4px 0; font-size:.9rem; } .nzs-foot a{ color:#fff; text-decoration:none; } .nzs-foot a:hover{ color:var(--nz-red); }
.nzs-foot-small{ font-size:.75rem !important; color:#8a8a88; }
@media(max-width:640px){ .nzs-head{ flex-wrap:wrap; } .nzs-nav{ gap:14px; flex-wrap:wrap; } }

/* Seitenrahmen fuer Blog/Rechtstexte/Login: schmal und lesbar statt ueber die ganze Breite */

.nzs-shell .blog-filter-bar{ background:var(--nz-soft); border:1px solid var(--brand-border); border-radius:16px; padding:16px 18px; margin-bottom:26px; }
.nzs-shell .blog-filter-bar form{ gap:12px; }
.nzs-shell .blog-filter-select{ width:100%; }
.nzs-title{ font-size:clamp(1.8rem,4vw,2.6rem); font-weight:900; letter-spacing:-.02em; margin:0 0 6px; }
.nzs-title span{ color:var(--nz-red); }
.nzs-intro{ color:var(--nz-grey); margin:0 0 26px; }
[data-identity="netzsprung"] .blog-card{ border:1px solid var(--brand-border); border-radius:20px; overflow:hidden; background:#fff; margin-bottom:24px; transition:box-shadow .2s, transform .2s; }
[data-identity="netzsprung"] .blog-card:hover{ box-shadow:0 14px 34px rgba(29,29,27,.10); transform:translateY(-2px); }
[data-identity="netzsprung"] .blog-badge{ background:var(--brand-50); color:var(--nz-red); border:1px solid var(--brand-200); }

/* Landingpage */
.nz{ position:relative; overflow:hidden; color:var(--nz-ink); }
.nz a{ text-decoration:none; color:inherit; }
.nz-wrap{ max-width:1080px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }
.nz-dia{ position:absolute; background:var(--nz-grey); opacity:.13; transform:rotate(45deg); z-index:0; animation:nzhop 7s ease-in-out infinite; }
.nz-dia.d1{ width:260px;height:260px; top:-90px; right:-70px; } .nz-dia.d2{ width:150px;height:150px; top:340px; left:-60px; animation-delay:-2s; background:var(--nz-red); opacity:.10; }
.nz-dia.d3{ width:110px;height:110px; top:560px; right:12%; animation-delay:-4s; }
@keyframes nzhop{ 0%,100%{ transform:rotate(45deg) translate(0,0);} 50%{ transform:rotate(45deg) translate(-18px,-26px);} }
.nz-hero{ padding:84px 0 64px; text-align:center; }
.nz-tag{ display:inline-block; padding:6px 14px; border:1px solid var(--brand-200); border-radius:99px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--nz-red); background:var(--brand-50); font-weight:700; }
.nz h1{ font-size:clamp(2.8rem,9vw,6rem); line-height:.98; font-weight:900; letter-spacing:-.035em; margin:22px 0 18px; }
.nz h1 em{ font-style:normal; color:var(--nz-red); position:relative; white-space:nowrap; }
.nz h1 em::after{ content:""; position:absolute; left:0; right:0; bottom:.04em; height:.12em; background:var(--nz-ink); transform:skewX(-20deg); opacity:.9; }
.nz-lead{ font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--nz-grey); max-width:640px; margin:0 auto 32px; line-height:1.6; }
.nz-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.nz-btn{ display:inline-block; padding:14px 26px; border-radius:14px; font-weight:800; transition:transform .15s, box-shadow .15s, background .15s; }
.nz-btn:hover{ transform:translateY(-3px) skewX(-3deg); }
.nz-btn.p{ background:var(--nz-red); color:#fff !important; box-shadow:0 10px 26px rgba(227,30,36,.32); }
.nz-btn.p:hover{ background:#c8161c; }
.nz-btn.s{ border:2px solid var(--nz-ink); }
.nz-btn.s:hover{ background:var(--nz-ink); color:#fff; }
.nz-term{ margin:44px auto 0; max-width:520px; text-align:left; background:var(--nz-ink); border-radius:14px; padding:16px 18px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; color:#e8e8e6; transform:rotate(-1.2deg); box-shadow:0 22px 50px rgba(29,29,27,.28); }
.nz-term i{ font-style:normal; color:#ff6b70; } .nz-term em{ font-style:normal; color:#8a8a88; }
.nz-dots span{ display:inline-block; width:10px;height:10px;border-radius:50%;margin-right:6px; background:#ff5f56; } .nz-dots span:nth-child(2){background:#ffbd2e} .nz-dots span:nth-child(3){background:#27c93f}
.nz-sec{ padding:52px 0; }
.nz-sec h2{ font-size:clamp(1.6rem,4vw,2.3rem); font-weight:900; letter-spacing:-.02em; margin:0 0 10px; }
.nz-sub{ color:var(--nz-grey); margin:0 0 28px; max-width:620px; line-height:1.6; }
.nz-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; }
.nz-card{ background:var(--nz-soft); border:1px solid var(--brand-border); border-radius:18px; padding:24px; transition:transform .2s,border-color .2s, background .2s; border-left:5px solid var(--nz-grey); }
.nz-card:hover{ transform:translateY(-5px) rotate(-.4deg); border-left-color:var(--nz-red); background:#fff; }
.nz-card .ic{ font-size:26px; margin-bottom:8px; } .nz-card h3{ margin:0 0 6px; font-size:1.1rem; font-weight:800; } .nz-card p{ margin:0; color:var(--nz-grey); font-size:.95rem; line-height:1.55; }
.nz-ad{ position:relative; background:var(--nz-ink); color:#f4f4f3; border-radius:24px; padding:34px; display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:center; border-bottom:6px solid var(--nz-red); }
.nz-ad .lbl{ position:absolute; top:14px; right:18px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#bdbdbb; border:1px solid #55554f; padding:2px 8px; border-radius:6px; }
.nz-ad h2{ margin-top:0; color:#fff; } .nz-ad .nz-sub{ color:#bdbdbb; }
.nz-ad ul{ margin:14px 0 22px; padding:0; list-style:none; color:#e4e4e2; line-height:1.9; }
.nz-ad ul li::before{ content:"\2192  "; color:#ff6b70; font-weight:700; }
.nz-ad img{ max-width:100%; height:auto; border-radius:12px; display:block; margin:0 auto; }
.nz-note{ font-size:12px; color:var(--nz-grey); margin-top:14px; line-height:1.5; }
.nz-cta{ text-align:center; padding:56px 0 76px; }
@media(max-width:760px){ .nz-ad{ grid-template-columns:1fr; } .nz-hero{ padding:56px 0 40px; } .nz-term{ transform:none; } }
@media(prefers-reduced-motion:reduce){ .nz-dia{ animation:none; } .nz-card:hover,.nz-btn:hover{ transform:none; } }
.nzs-logo img{ height:60px; max-width:none; }
.nzs-foot img{ height:36px !important; width:auto !important; max-width:none; }
[data-identity="netzsprung"] .text-amber-600, [data-identity="netzsprung"] .text-amber-500{ color:var(--nz-red) !important; }
[data-identity="netzsprung"] main > .bg-white{ margin-top:36px; margin-bottom:56px; }
[data-identity="netzsprung"] main .bg-amber-50{ background:var(--brand-50) !important; border-color:var(--brand-200) !important; }
[data-identity="netzsprung"] main [class*="border-t-amber"], [data-identity="netzsprung"] main .border-amber-500{ border-color:var(--nz-red) !important; }
[data-identity="netzsprung"] main .border-t-4, [data-identity="netzsprung"] main [class*="border-t-"]{ border-top-color:var(--nz-red) !important; }
[data-identity="netzsprung"] a.nz-card{ display:block; color:inherit; text-decoration:none; }

/* Dunkelmodus */
:root[data-identity="netzsprung"][data-theme="dark"] {
  --nz-ink:#f1f1ef; --nz-grey:#a3a3a0; --nz-soft:#1c1c1b;
  --brand-bg:#121211; --brand-surface:#1a1a19; --brand-accent:#f1f1ef; --brand-light:#1c1c1b;
  --brand-text:#f1f1ef; --brand-text-muted:#a3a3a0; --brand-border:#2f2f2d;
  --brand-50:#2a1415; --brand-100:#3a1a1c; --brand-200:#5a2326; --brand-600:#ff5a5f; --brand-700:#ff7b7f;
  color-scheme: dark;
}
[data-identity="netzsprung"][data-theme="dark"] body{ background:#121211; color:var(--nz-ink); }
[data-identity="netzsprung"][data-theme="dark"] nav{ background:rgba(18,18,17,.92) !important; }
[data-identity="netzsprung"][data-theme="dark"] .nz-card:hover,
[data-identity="netzsprung"][data-theme="dark"] .blog-card,
[data-identity="netzsprung"][data-theme="dark"] main .bg-white{ background:#1a1a19 !important; }
[data-identity="netzsprung"][data-theme="dark"] .nz-btn.s{ border-color:#f1f1ef; }
[data-identity="netzsprung"][data-theme="dark"] .nz-term{ background:#0a0a09; }
[data-identity="netzsprung"][data-theme="dark"] .nz-ad{ background:#1c1c1b; }
[data-identity="netzsprung"][data-theme="dark"] .nz-dia{ opacity:.08; }
[data-identity="netzsprung"][data-theme="dark"] main [class*="text-slate-"]{ color:#c9c9c6; }
[data-identity="netzsprung"][data-theme="dark"] main input, [data-identity="netzsprung"][data-theme="dark"] main select, [data-identity="netzsprung"][data-theme="dark"] main textarea{ background:#222221; color:#f1f1ef; border-color:#3a3a38; }

/* Logo je Theme, Menue/Profil */
.nzs-logo img.nzs-logo-d{ display:none; } [data-theme="dark"] .nzs-logo img.nzs-logo-l{ display:none; } [data-theme="dark"] .nzs-logo img.nzs-logo-d{ display:block; }
.nzs-icon{ background:none; border:0; cursor:pointer; color:var(--nz-ink); padding:6px; border-radius:10px; line-height:0; }
.nzs-icon:hover{ background:rgba(127,127,127,.15); }
.nzs-nav{ gap:14px; }
.nzs-user{ display:flex; align-items:center; gap:8px; padding:3px 12px 3px 3px !important; border:1px solid var(--brand-border) !important; border-radius:99px; font-size:.85rem; }
.nzs-av{ width:30px; height:30px; border-radius:50%; background:var(--brand-50); color:var(--nz-red); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; overflow:hidden; }
.nzs-av img{ width:100%; height:100%; object-fit:cover; }
.nzs-menu-wrap{ position:absolute; left:0; right:0; z-index:50; }
.nzs-menu{ max-width:420px; margin:6px 20px 0 auto; background:var(--brand-surface); border:1px solid var(--brand-border); border-radius:18px; padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.2); display:flex; flex-direction:column; gap:2px; }
.nzs-menu a, .nzs-menu-out{ display:block; padding:12px 14px; border-radius:12px; color:var(--nz-ink); text-decoration:none; font-weight:600; text-align:left; background:none; border:0; width:100%; cursor:pointer; font:inherit; font-weight:600; }
.nzs-menu a:hover{ background:rgba(127,127,127,.13); }
.nzs-menu-user{ display:flex !important; align-items:center; gap:12px; background:rgba(127,127,127,.08); margin-bottom:6px; }
.nzs-menu-user small{ display:block; color:var(--nz-red); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.nzs-menu-out{ color:#e11d48 !important; background:rgba(225,29,72,.1) !important; margin-top:6px; text-align:center !important; }
.nzs-menu-in{ background:var(--nz-ink) !important; color:var(--brand-bg) !important; text-align:center !important; margin-top:6px; }
@media(max-width:760px){ .nzs-hide-s{ display:none !important; } }

/* Tailwind-"slate" (Blau-Grau) durch die Neutralfarben des Designs ersetzen - sonst weichen Blog/Wiki-Texte farblich ab */
[data-identity="netzsprung"] :is(.text-slate-300, .text-slate-400, .text-slate-500, .text-slate-600){ color:var(--brand-text-muted) !important; }
[data-identity="netzsprung"] :is(.text-slate-700, .text-slate-800, .text-slate-900){ color:var(--brand-text) !important; }
[data-identity="netzsprung"] :is(.border-slate-50, .border-slate-100, .border-slate-200){ border-color:var(--brand-border) !important; }
[data-identity="netzsprung"] :is(.bg-slate-50, .bg-slate-100){ background-color:var(--brand-light) !important; }
[data-identity="netzsprung"] .blog-card h3.text-slate-400{ color:var(--brand-text-muted) !important; }
[data-identity="netzsprung"] .blog-card :is(h1, h2).blog-title{ color:var(--brand-600); }

/* Seitenbreite = Breite der Kopfzeile (1080px) auch fuer Blog und Rechtstexte */
[data-identity="netzsprung"] main .blog-shell, [data-identity="netzsprung"] main .blog-shell.blog-wide{ max-width:1080px; }
[data-identity="netzsprung"] main .max-w-3xl{ max-width:1080px; }
[data-identity="netzsprung"] .blog-shell .prose-blog, [data-identity="netzsprung"] .blog-shell .blog-intro-box{ max-width:860px; margin-left:auto; margin-right:auto; }