/* ==========================================================================
MTF Theme – gemeinsames Design für alle careweb.ch-Tools
--------------------------------------------------------------------------
Basis: MTF-CI (mtf.ch). Blau #0076BD / #00619B, Navy #0C2F5D,
Offwhite #F9F7F6, Grau #ECE9E8 / #DDD / #7F7F7F / #555 / #252525,
Grün #8EC563 / #639B35, Orange #EF8100 / #C46A00, Gelb #F8B200, Rot #E2301C.
Schrift: DIN OT (lizenzpflichtig) → Ersatz Barlow, Mono: IBM Plex Mono.
Radien: 50 / 20 / 15 / 10 px.
Einbinden:
(im , vor CSS)
Modus: hell = Standard (CI). Dunkel automatisch per Systemeinstellung
oder manuell via (siehe mtf-theme.js).
========================================================================== */
/* ---------- Fonts (lokal, keine Requests an Google) ---------- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/barlow-latin-300-normal.woff2") format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlow-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");}
/* ---------- Tokens: hell (Standard, MTF-CI) ---------- */
:root{
color-scheme:light;
--ground:#f9f7f6; /* Seitenhintergrund (Offwhite) */
--surface:#ffffff; /* Karten, Header */
--surface-2:#ece9e8; /* Tabellenkopf, Eingabefelder */
--line:#dddddd; /* Rahmen */
--line-soft:#ece9e8; /* feine Trennlinien */
--ink:#252525; /* Text */
--ink-2:#555555; /* Fliesstext sekundär */
--ink-3:#7f7f7f; /* Hinweise, Labels */
--strong:#000000; /* Überschriften */
--navy:#0c2f5d;
--accent:#0076bd; /* MTF-Blau = Primärfarbe / Info */
--accent-2:#00619b; /* Hover */
--on-accent:#ffffff;
--ok:#639b35; /* Grün */
--warn:#c46a00; /* Orange */
--warn-hi:#f8b200; /* Gelb */
--crit:#e2301c; /* Rot */
--logo-plate:transparent;
/* Daten-Palette (z. B. VLANs, Serien) – kontraststark auf hell */
--data-1:#0076bd; --data-2:#639b35; --data-3:#c46a00; --data-4:#7a4fb5;
--data-5:#c62a18; --data-6:#0f8584; --data-7:#a07c00; --data-8:#b5397a;
--shadow:0 5px 15px rgba(0,0,0,.03);
--shadow-lg:0 10px 30px rgba(0,0,0,.05);
--r-pill:50px; --r-lg:20px; --r-md:15px; --r-sm:10px; --r-xs:6px;
--font:"DIN OT","DINOT","DIN",Barlow,"Helvetica Neue",Arial,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* ---------- Tokens: dunkel (MTF-Farben auf Navy) ---------- */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--ground:#081a30; --surface:#0e2440; --surface-2:#15304f;
--line:#24426a; --line-soft:#1b3657;
--ink:#e8edf3; --ink-2:#b6c2d0; --ink-3:#8496aa; --strong:#ffffff;
--accent:#3a9fe0; --accent-2:#66b6ea; --on-accent:#04121f;
--ok:#8ec563; --warn:#ef9a2a; --warn-hi:#f8b200; --crit:#f2604e;
--logo-plate:#ffffff;
--data-1:#4fb0ef; --data-2:#8ec563; --data-3:#ef9a2a; --data-4:#b28cf0;
--data-5:#f2604e; --data-6:#3cc4c0; --data-7:#f8c834; --data-8:#ee7ab6;
--shadow:0 5px 15px rgba(0,0,0,.25); --shadow-lg:0 10px 30px rgba(0,0,0,.35);
}
}
:root[data-theme="dark"]{
color-scheme:dark;
--ground:#081a30; --surface:#0e2440; --surface-2:#15304f;
--line:#24426a; --line-soft:#1b3657;
--ink:#e8edf3; --ink-2:#b6c2d0; --ink-3:#8496aa; --strong:#ffffff;
--accent:#3a9fe0; --accent-2:#66b6ea; --on-accent:#04121f;
--ok:#8ec563; --warn:#ef9a2a; --warn-hi:#f8b200; --crit:#f2604e;
--logo-plate:#ffffff;
--data-1:#4fb0ef; --data-2:#8ec563; --data-3:#ef9a2a; --data-4:#b28cf0;
--data-5:#f2604e; --data-6:#3cc4c0; --data-7:#f8c834; --data-8:#ee7ab6;
--shadow:0 5px 15px rgba(0,0,0,.25); --shadow-lg:0 10px 30px rgba(0,0,0,.35);
}
/* Abgeleitete „soft“-Töne – passen sich dem Modus automatisch an */
:root{
--accent-soft:color-mix(in srgb,var(--accent) 12%,transparent);
--ok-soft:color-mix(in srgb,var(--ok) 13%,transparent);
--warn-soft:color-mix(in srgb,var(--warn) 13%,transparent);
--crit-soft:color-mix(in srgb,var(--crit) 11%,transparent);
--hover:color-mix(in srgb,var(--ink) 4%,transparent);
}
/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
margin:0;background:var(--ground);color:var(--ink);
font-family:var(--font);font-size:16px;line-height:1.55;
-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-underline-offset:2px;}
a:hover{color:var(--accent-2);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.mono,code,kbd,pre{font-family:var(--mono);font-variant-numeric:tabular-nums;}
button,input,select,textarea{font:inherit;color:inherit;}
/* ---------- Masthead (Startseite eines Tools) ---------- */
.mtf-mast{background:var(--surface);border-bottom:1px solid var(--line-soft);padding:26px 0 34px;}
.mtf-wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.mtf-brand{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:30px;}
.mtf-logo{display:block;height:36px;width:auto;background:var(--logo-plate);border-radius:var(--r-xs);padding:2px 4px;}
.mtf-kicker{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0;}
.mtf-title{margin:0;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.08;text-transform:uppercase;color:var(--strong);text-wrap:balance;font-weight:700;}
.mtf-title .l{display:block;font-weight:300;}
.mtf-title .b{display:block;font-weight:700;}
.mtf-bar{display:block;width:80px;height:8px;background:var(--accent);margin:22px 0 0;}
.mtf-lede{margin:20px 0 0;color:var(--ink);max-width:72ch;font-size:1.1rem;line-height:1.55;}
/* ---------- Überschriften ---------- */
.mtf-h2{font-size:1.3rem;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--strong);margin:0 0 14px;}
.mtf-h2::after{content:"";display:block;width:40px;height:4px;background:var(--accent);margin-top:9px;}
.mtf-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
/* ---------- Karten ---------- */
.mtf-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:20px 22px;}
/* ---------- Buttons ---------- */
.mtf-btn{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;}
.mtf-btn:hover{border-color:var(--accent);color:var(--accent);}
.mtf-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.mtf-btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent);}
.mtf-btn.danger:hover{border-color:var(--crit);color:var(--crit);}
/* ---------- Pill-Tabs ---------- */
.mtf-tabs{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);padding:3px;gap:2px;}
.mtf-tab{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);cursor:pointer;}
.mtf-tab:hover{color:var(--strong);background:var(--surface-2);}
.mtf-tab.on{background:var(--accent);color:var(--on-accent);}
/* ---------- Tool-Navigation (siehe /inc/mtf-nav.php) ---------- */
.mtf-nav{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--ground);max-width:100%;overflow-x:auto;scrollbar-width:none;}
.mtf-nav::-webkit-scrollbar{display:none;}
.mtf-nav a{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding:6px 14px;border-radius:var(--r-pill);color:var(--ink-2);transition:background .15s,color .15s;}
.mtf-nav a:hover{color:var(--strong);background:var(--surface-2);}
.mtf-nav a.on{background:var(--accent);color:var(--on-accent);}
@media print{.mtf-nav{display:none!important;}}
/* ---------- Chips / Badges ---------- */
.mtf-chip{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;letter-spacing:.03em;padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);}
.mtf-badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.68rem;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);border:1px solid currentColor;}
.mtf-badge.info{color:var(--accent);background:var(--accent-soft);}
.mtf-badge.ok{color:var(--ok);background:var(--ok-soft);}
.mtf-badge.warn{color:var(--warn);background:var(--warn-soft);}
.mtf-badge.crit{color:var(--crit);background:var(--crit-soft);}
/* ---------- Hinweisboxen ---------- */
.mtf-note{border-radius:var(--r-sm);padding:10px 14px;font-size:.88rem;border-left:4px solid var(--accent);background:var(--accent-soft);color:var(--ink);}
.mtf-note.ok{border-color:var(--ok);background:var(--ok-soft);}
.mtf-note.warn{border-color:var(--warn);background:var(--warn-soft);}
.mtf-note.crit{border-color:var(--crit);background:var(--crit-soft);}
/* ---------- Tabellen ---------- */
.mtf-table-wrap{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:auto;box-shadow:var(--shadow);}
.mtf-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.mtf-table th{background:var(--surface-2);color:var(--ink-2);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:9px 12px;white-space:nowrap;}
.mtf-table td{padding:8px 12px;border-top:1px solid var(--line-soft);vertical-align:middle;}
.mtf-table tr:hover td{background:var(--hover);}
/* ---------- Dropzone ---------- */
.mtf-drop{border:2px dashed var(--line);border-radius:var(--r-lg);background:var(--surface);padding:44px 36px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;}
.mtf-drop:hover,.mtf-drop.drag-over{border-color:var(--accent);background:var(--accent-soft);}
/* ---------- Footer ---------- */
.mtf-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border-top:1px solid var(--line-soft);padding:6px 24px;font-size:.72rem;color:var(--ink-3);}
.mtf-footer a{color:inherit;text-decoration:none;font-weight:700;}
.mtf-footer a:hover{color:var(--accent);}
/* Umschalter hell/dunkel (siehe mtf-theme.js) */
.mtf-theme-toggle{background:none;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-3);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;cursor:pointer;}
.mtf-theme-toggle:hover{color:var(--accent);border-color:var(--accent);}
/* ---------- Druck: immer hell ---------- */
@media print{
/* :not(#…) hebt die Spezifität über die Dark-Selektoren */
:root:not(#mtf-print){
color-scheme:light;--ground:#fff;--surface:#fff;--surface-2:#f0f0f0;--line:#ddd;--line-soft:#eee;
--ink:#000;--ink-2:#333;--ink-3:#666;--strong:#000;--accent:#0076bd;--ok:#639b35;--warn:#c46a00;--crit:#e2301c;
--shadow:none;--shadow-lg:none;--logo-plate:transparent;
}
.mtf-theme-toggle{display:none!important;}
}
@media (max-width:768px){.mtf-wrap{padding:0 16px;}}