/* DualNet – Farbthemen. Standard = Orange. Die Seiten benutzen nur diese Variablen. */
:root{
  --o-light:#ff8a4c; --o-mid:#ff6a2b; --o-mid2:#ff5e1f; --o-deep:#f6551a; --o-dark:#c8461a; --o-dark2:#8a2a0a;
  --o-pale:#ffd9c2; --o-wash:#fde8dd;
  --o-light-rgb:255,138,76; --o-mid-rgb:255,106,43; --o-deep-rgb:246,85,26; --o-glow-rgb:255,150,90;
  --paper:#faf6f1; --paper-2:#fff8f2; --paper-3:#f3ece6;
  --ink:#2a1206; --ink-1:#4a3226; --ink-2:#5e4030; --ink-2b:#6b5040; --ink-3:#7a5e4e; --ink-4:#8a7466;
  --ink-rgb:42,18,6; --sh-rgb:120,40,0;
  --logo-filter:none;
  --card-rgb:20,22,28; --ca1:.9; --ca2:.82;
  /* Darstellung (Standard = farbig) */
  --fg:#fff; --fg-rgb:255,255,255; --em:var(--ink); --acc-text:var(--o-deep);
  --btn-bg:#fff; --btn-fg:var(--o-dark);
  --surface:#fff; --surface-rgb:255,255,255; --field:#fff;
  --pill-bg:rgba(120,230,150,.25); --pill-fg:#d6ffe3; --good:#7ee0a1;
  --bar1:var(--o-pale); --bar2:var(--o-light); --spark:var(--o-pale);
  --globe-rgb:255,240,220;
  --page-bg:radial-gradient(1200px 820px at 76% 12%, var(--o-light) 0%, rgba(var(--o-light-rgb),0) 55%),
            radial-gradient(1000px 760px at 16% 88%, var(--o-deep) 0%, rgba(var(--o-deep-rgb),0) 60%),
            linear-gradient(150deg, var(--o-mid) 0%, var(--o-mid2) 45%, var(--o-deep) 100%);
  --page-bgc:var(--o-mid2);
  --top-bg:radial-gradient(900px 420px at 76% 0%, var(--o-light) 0%, rgba(var(--o-light-rgb),0) 60%),
           linear-gradient(150deg, var(--o-mid) 0%, var(--o-mid2) 45%, var(--o-deep) 100%);
  --top-bgc:var(--o-mid2);
  color-scheme:light;
}
html[data-theme="blau"]{
  --o-light:#5b9df0; --o-mid:#2f6fd6; --o-mid2:#2a63c4; --o-deep:#1f56b3; --o-dark:#1a4a99; --o-dark2:#12336b;
  --o-pale:#d3e3fb; --o-wash:#e1ecfb;
  --o-light-rgb:91,157,240; --o-mid-rgb:47,111,214; --o-deep-rgb:31,86,179; --o-glow-rgb:125,178,245;
  --paper:#f4f7fb; --paper-2:#f7faff; --paper-3:#e9eef6;
  --ink:#0f1b33; --ink-1:#24334f; --ink-2:#35476a; --ink-2b:#43567a; --ink-3:#5a6b8a; --ink-4:#7b8aa5;
  --ink-rgb:15,27,51; --sh-rgb:10,30,80;
  --logo-filter:hue-rotate(199deg) saturate(1.05);
}
html[data-theme="gruen"]{
  --o-light:#3fc7a8; --o-mid:#17a38a; --o-mid2:#129983; --o-deep:#0f7f6b; --o-dark:#0b6656; --o-dark2:#084a3e;
  --o-pale:#c9f0e6; --o-wash:#dcf3ec;
  --o-light-rgb:63,199,168; --o-mid-rgb:23,163,138; --o-deep-rgb:15,127,107; --o-glow-rgb:106,220,194;
  --paper:#f3f8f6; --paper-2:#f6fbf9; --paper-3:#e6eeeb;
  --ink:#0e2a26; --ink-1:#22403b; --ink-2:#33544e; --ink-2b:#416059; --ink-3:#58746d; --ink-4:#7a918b;
  --ink-rgb:14,42,38; --sh-rgb:0,50,40;
  --logo-filter:hue-rotate(150deg) saturate(.95);
}
html[data-theme="anthrazit"]{
  --o-light:#6b7785; --o-mid:#4a5462; --o-mid2:#414a57; --o-deep:#2f3742; --o-dark:#262d37; --o-dark2:#1b2028;
  --o-pale:#dfe3e8; --o-wash:#e6e9ed;
  --o-light-rgb:107,119,133; --o-mid-rgb:74,84,98; --o-deep-rgb:47,55,66; --o-glow-rgb:138,149,163;
  --paper:#f5f6f7; --paper-2:#f8f9fa; --paper-3:#eceef0;
  --ink:#12161c; --ink-1:#2a3038; --ink-2:#3c434c; --ink-2b:#495059; --ink-3:#626a74; --ink-4:#858c95;
  --ink-rgb:18,22,28; --sh-rgb:10,14,20;
  --logo-filter:grayscale(1) brightness(.9);
  --card-rgb:14,17,24; --ca1:.55; --ca2:.28;
}
.brand-mark{ filter:var(--logo-filter); }
/* Farbwahl im Kopfbereich */
.nav .dn-theme{position:relative;display:flex;align-items:center;margin-right:.9rem}
.dn-theme button.dn-tbtn{display:flex;align-items:center;background:none;border:none;cursor:pointer;padding:0;line-height:1}
.dn-theme button.dn-tbtn:hover{opacity:.8}
.dn-theme .dot{display:inline-block;width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:inset 0 0 0 4px #fff,0 0 0 1px rgba(0,0,0,.12)}
.dn-theme .tmenu{display:none;position:absolute;right:0;top:calc(100% + .7rem);min-width:150px;padding:.35rem;background:var(--surface);border:1px solid rgba(var(--ink-rgb),.08);border-radius:14px;box-shadow:0 14px 34px rgba(var(--sh-rgb),.22);z-index:200}
.dn-theme.open .tmenu{display:block}
.dn-theme .tmenu a{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;border-radius:9px;color:var(--ink);font-size:.92rem;text-decoration:none;white-space:nowrap}
.dn-theme .tmenu a:hover{background:rgba(var(--o-mid-rgb),.10)}
.dn-theme .tmenu a.on{color:var(--acc-text);font-weight:700}
.dn-theme .tmenu .dot{width:16px;height:16px;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.15)}

/* ---------- Darstellung: Creme ---------- */
html[data-mode="creme"]{
  --paper:#f5f3ee; --paper-2:#faf8f3; --paper-3:#eae7e1;
  --ink:#222222; --ink-1:#3a3a3a; --ink-2:#555555; --ink-2b:#5c5c5c; --ink-3:#777777; --ink-4:#888888;
  --ink-rgb:34,34,34; --sh-rgb:70,55,35;
  --fg:#222222; --fg-rgb:34,34,34; --em:var(--o-deep); --acc-text:var(--o-deep);
  --btn-bg:var(--o-mid); --btn-fg:#fff;
  --card-rgb:255,255,255; --ca1:.94; --ca2:.82;
  --pill-bg:rgba(30,150,80,.14); --pill-fg:#1a7a3c; --good:#2eb872;
  --bar1:var(--o-light); --bar2:var(--o-deep); --spark:var(--o-mid);
  --globe-rgb:var(--o-deep-rgb);
  --page-bg:radial-gradient(1200px 820px at 76% 12%, rgba(var(--o-light-rgb),.22) 0%, rgba(var(--o-light-rgb),0) 55%),
            radial-gradient(1000px 760px at 16% 88%, rgba(var(--o-deep-rgb),.10) 0%, rgba(var(--o-deep-rgb),0) 60%),
            var(--paper);
  --page-bgc:var(--paper);
  --top-bg:radial-gradient(900px 420px at 76% 0%, rgba(var(--o-light-rgb),.20) 0%, rgba(var(--o-light-rgb),0) 60%), var(--paper);
  --top-bgc:var(--paper);
}
html[data-mode="creme"] .top{ border-bottom:1px solid rgba(var(--ink-rgb),.10); }
html[data-mode="creme"] .band.alt{ background:rgba(var(--ink-rgb),.04); border-color:rgba(var(--ink-rgb),.08); }
html[data-mode="creme"] .card, html[data-mode="creme"] .feature, html[data-mode="creme"] .cta-box{ box-shadow:0 18px 40px rgba(var(--sh-rgb),.14); }
html[data-mode="creme"] .card{ backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-mode="creme"] .copy h1, html[data-mode="creme"] .copy h2{ text-shadow:none; }
html[data-mode="creme"] .kicker{ background:rgba(var(--o-mid-rgb),.10); border-color:rgba(var(--o-deep-rgb),.45); color:var(--o-deep); }
html[data-mode="creme"] .modal{ background:rgba(var(--ink-rgb),.25); }

/* ---------- Darstellung: Dunkel ---------- */
html[data-mode="dunkel"]{
  color-scheme:dark;
  --paper:#0a0e17; --paper-2:#121824; --paper-3:#1a2332;
  --ink:#e8edf5; --ink-1:#cbd5e1; --ink-2:#b4c0d0; --ink-2b:#a8b5c6; --ink-3:#94a3b8; --ink-4:#7c8aa0;
  --ink-rgb:232,237,245; --sh-rgb:0,0,0;
  --fg:#ffffff; --fg-rgb:255,255,255; --em:var(--o-light); --acc-text:var(--o-light);
  --btn-bg:var(--o-mid); --btn-fg:#fff;
  --surface:#121824; --surface-rgb:18,24,36; --field:#1a2332;
  --card-rgb:18,24,36; --ca1:.86; --ca2:.72;
  --o-wash:rgba(var(--o-mid-rgb),.18); --o-dark2:var(--o-pale);
  --bar1:var(--o-light); --bar2:var(--o-mid); --spark:var(--o-light);
  --globe-rgb:var(--o-glow-rgb);
  --page-bg:radial-gradient(1200px 820px at 76% 12%, rgba(var(--o-mid-rgb),.32) 0%, rgba(var(--o-mid-rgb),0) 55%),
            radial-gradient(1000px 760px at 16% 88%, rgba(var(--o-deep-rgb),.20) 0%, rgba(var(--o-deep-rgb),0) 60%),
            #0a0e17;
  --page-bgc:#0a0e17;
  --top-bg:radial-gradient(900px 420px at 76% 0%, rgba(var(--o-mid-rgb),.35) 0%, rgba(var(--o-mid-rgb),0) 60%), linear-gradient(180deg,#111827,#0a0e17);
  --top-bgc:#0a0e17;
}
html[data-mode="dunkel"] .top{ border-bottom:1px solid rgba(255,255,255,.08); }
html[data-mode="dunkel"] .band.alt{ background:rgba(255,255,255,.03); }
html[data-mode="dunkel"] .brand-mark{ filter:var(--logo-filter) brightness(1.5); }
html[data-mode="dunkel"] ::-webkit-scrollbar{ width:8px; height:8px; }
html[data-mode="dunkel"] ::-webkit-scrollbar-track{ background:#0a0e17; }
html[data-mode="dunkel"] ::-webkit-scrollbar-thumb{ background:#1e293b; border-radius:4px; }
html[data-mode="dunkel"] .chip.paid{ background:rgba(46,184,114,.18); color:#7ee0a1; }
html[data-mode="dunkel"] .cust-bot b, html[data-mode="dunkel"] .pok{ color:#7ee0a1; }
html[data-mode="dunkel"] .tmenu, html[data-mode="dunkel"] .menu{ border-color:rgba(255,255,255,.10); }

/* Menü: Abschnittsüberschriften */
.dn-theme .tmenu .th{ display:block; padding:.45rem .8rem .2rem; font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); }
.dn-theme .tmenu .th:not(:first-child){ margin-top:.3rem; border-top:1px solid rgba(var(--ink-rgb),.08); padding-top:.6rem; }
.dn-theme .tmenu .mi{ width:16px; height:16px; border-radius:50%; flex:none; box-shadow:0 0 0 1px rgba(128,128,128,.4); }

/* Grösseres Farbmenü: Vollfarben + Akzentfarben auf Weiss/Schwarz */
.dn-theme .tmenu{ min-width:260px; padding:.5rem; border-radius:16px; }
.dn-theme .tmenu a.full{ padding:.6rem .9rem; font-size:1rem; }
.dn-theme .tmenu .th{ font-size:.72rem; }
.dn-theme .tmenu .arow{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.35rem .5rem .35rem .9rem; }
.dn-theme .tmenu .al{ font-size:.95rem; color:var(--ink); }
.dn-theme .tmenu .sw{ display:flex; gap:.35rem; padding:.4rem .5rem; border-radius:100px; }
.dn-theme .tmenu .sw.creme{ background:#f5f3ee; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.dn-theme .tmenu .sw.dunkel{ background:#0a0e17; box-shadow:0 0 0 1px rgba(0,0,0,.4); }
.dn-theme .tmenu a.acc{ display:block; padding:3px; border-radius:50%; background:none; }
.dn-theme .tmenu a.acc:hover{ background:rgba(128,128,128,.25); }
.dn-theme .tmenu a.acc i{ display:block; width:22px; height:22px; border-radius:50%; }
.dn-theme .tmenu a.acc.on{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #333; }
.dn-theme .tmenu .sw.dunkel a.acc.on{ box-shadow:0 0 0 2px #0a0e17, 0 0 0 4px #fff; }

/* ---------- Handy-Menü (bis 760 px): Menüknopf mit aufklappbarer Liste ---------- */
.dn-burger{display:none}
@media(max-width:760px){
  header{position:relative}
  .dn-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px 9px;margin:0 -9px -.3rem 0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .dn-burger i{display:block;height:2px;border-radius:2px;background:var(--fg);transition:transform .2s,opacity .2s}
  header.dn-open .dn-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.dn-open .dn-burger i:nth-child(2){opacity:0}
  header.dn-open .dn-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header .nav{display:none !important}
  header.dn-open .nav{display:flex !important;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:calc(100% + .5rem);left:0;right:0;z-index:150;padding:.5rem;font-size:1.1rem;color:var(--ink);background:var(--surface);border:1px solid rgba(var(--ink-rgb),.08);border-radius:16px;box-shadow:0 14px 34px rgba(var(--sh-rgb),.28)}
  header.dn-open .nav > a{display:block;padding:.85rem 1rem;border-radius:10px;color:var(--ink)}
  header.dn-open .nav > a:hover{background:rgba(var(--o-mid-rgb),.10);opacity:1}
  header.dn-open .nav .dn-theme{margin:0;padding:.6rem 1rem}
}
