@charset "UTF-8";
/* ===================================================================
   EDV-Janssen • Global Styles (Refined)
   -------------------------------------------------------------------
   • Single source of truth für alle Projekte
   • Struktur: CORE → TYPO → LAYOUT → COMPONENTS → APP-ADDONS → UTILS
   • Abwärtskompatibel: vorhandene Klassennamen bleiben gültig
   =================================================================== */


/* ===================================================================
   CORE: Variablen, Reset, Base
   =================================================================== */
:root{
  /* Farben */
  --navy:#0B3A77;        /* dunkles Logo-Blau */
  --royal:#1F64B5;       /* kräftiges Logo-Blau */
  --ink:#172033;         /* Grundtext */
  --hair:#E3ECF7;        /* Haarlinie/Border 1 */
  --hair2:#E9F0F9;       /* Haarlinie/Border 2 */
  --lt1:#8DB3E2;         /* zarte Akzentlinie */
  --lt2:#D6E4F5;         /* zarter Hintergrund */
  --accent:#E28C2D;      /* Logo-Orange */
  --bg:#F6F9FD;          /* App-Hintergrund */
  --card:#FFFFFF;        /* Kartenfläche */

  /* Typo & Radius */
  --font-base:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --radius:16px;

  /* Schatten & Focus */
  --shadow:0 12px 28px rgba(11,58,119,.14);
  --shadow-sm:0 4px 10px rgba(11,58,119,.08);
  --focus-ring:0 0 0 3px rgba(31,100,181,.12);

  /* Abstände */
  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:22px;
  --space-6:28px;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  color:var(--ink);
  font:16px/1.6 var(--font-base);
  background:
    radial-gradient(1200px 1200px at -10% -10%,rgba(226,140,45,.09),transparent 50%),
    radial-gradient(1200px 1200px at 110% -20%,rgba(31,100,181,.10),transparent 50%),
    linear-gradient(180deg,var(--bg),#EEF4FB 65%,#E9F1FB);
}
a{ color:var(--royal); text-decoration:none }
a:hover{ opacity:.92; text-decoration:underline }
.wrap{ max-width:1120px; margin:32px auto; padding:0 22px }

/* Bessere Focus-Sichtbarkeit */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--focus-ring);
  border-color:var(--royal);
}

/* Motion-Reduktion respektieren */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important }
}


/* ===================================================================
   HEADER
   =================================================================== */
header{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:22px; margin-bottom:20px; text-align:center;
}
.logo{
  width:auto; height:auto; object-fit:contain;
  padding:10px; border-radius:14px; background:#fff; border:1px solid var(--hair); box-shadow:var(--shadow);
}
.brand{ font-weight:800; font-size:22px; color:var(--navy); letter-spacing:.4px }
.sub{
  font-size:15px; color:#fff; background:linear-gradient(90deg,var(--navy),var(--royal));
  padding:2px 10px; border-radius:6px; margin-top:4px; display:inline-block; font-weight:600; letter-spacing:.3px;
}

/* Logo responsiv */
header .logo { width:220px; height:220px; }
@media (max-width:600px){ header .logo { width:150px; height:150px; } }


/* ===================================================================
   TYPO & META
   =================================================================== */
h1{ margin:0 0 8px; font-size:clamp(22px,2.8vw,32px); line-height:1.18; color:var(--navy) }
h2{ margin:0 0 10px; font-size:20px; color:#0E3769 }
.meta{ font-size:13px; color:#5a6c85 }
.badge{
  display:inline-block; margin-left:.35em; transform:translateY(-2px);
  padding:2px 10px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.3px;
  color:#0A2E60; background:linear-gradient(180deg,#DDE9F9,#CFE0F6); border:1px solid var(--hair);
}


/* ===================================================================
   LAYOUT (Grid, Cards, Hero)
   =================================================================== */
.grid{ display:grid; gap:18px; margin:18px 0 }
.grid.cols3{ grid-template-columns:1fr }
@media (min-width:900px){ .grid.cols3{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:860px){ .grid.cols2-1{ grid-template-columns:2fr 1.1fr } }

/* Zweispaltige Variante, kompatibel zu Add-ons */
.grid.two{ display:grid; gap:14px; margin:14px 0 }
@media (min-width:760px){ .grid.two{ grid-template-columns:1fr 1fr } }
/* Speziell für Analyzer: 1.1fr / 1fr auf breiten Screens */
@media (min-width:860px){ .grid.two.analyzer{ grid-template-columns:1.1fr 1fr } }

.card{
  background:var(--card); border:1px solid var(--hair); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(11,58,119,.12) }

.hero{
  background:linear-gradient(135deg,rgba(11,58,119,.06),rgba(226,140,45,.06));
  border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px 24px 20px; margin-bottom:22px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}


/* ===================================================================
   COMPONENTS (Buttons, Notice, Pills, Inputs, Hash)
   =================================================================== */
/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; margin-top:10px;
  padding:14px 20px; border-radius:12px;
  background:linear-gradient(145deg,var(--navy),var(--royal));
  color:#fff; font-weight:800; letter-spacing:.2px; box-shadow:0 10px 18px rgba(11,58,119,.25);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  border:2px solid transparent; cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); filter:saturate(1.06); box-shadow:0 12px 22px rgba(11,58,119,.18) }
.btn:active{ transform:translateY(0) }

/* Button-Varianten klein/ghost (für Toolbars etc.) */
.btn.smol{ padding:8px 12px; font-size:13px; border-radius:10px; font-weight:700 }
.btn.ghost{
  background:linear-gradient(180deg,#fff,#F6FAFF);
  color:var(--navy); border-color:var(--hair); box-shadow:0 6px 14px rgba(11,58,119,.08);
}

/* Notice */
.notice{
  background:#fff; border:1px dashed var(--hair); border-radius:12px; padding:12px 14px; margin-top:10px;
  box-shadow:0 6px 14px rgba(11,58,119,.08);
}
.notice.ok{   border-left:4px solid #0a7f3f }
.notice.bad{  border-left:4px solid #b00020 }
.notice.warn{ border-left:4px solid #8a6a00 }

/* Pills/Tags */
.pill{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700;
  border:1px solid var(--hair2); background:#fff; margin:4px 6px 0 0; box-shadow:0 1px 2px rgba(11,58,119,.1);
}
.pill.ok{   color:#0a7f3f; border-color:#b7e1c1; background:#e9f9ee }
.pill.warn{ color:#8a6a00; border-color:#f5e2a4; background:#fffbea }
.pill.bad{  color:#b00020; border-color:#f3b7b7; background:#fff0f0 }

/* Inputs (z. B. Toolbar) */
input[type="search"], .toolbar input, .toolbar select, textarea{
  padding:10px 12px; border:1px solid var(--hair); border-radius:10px; background:#fff; outline:none;
  font:14px/1.5 var(--font-base); color:var(--ink)
}
input[type="search"]:focus, .toolbar input:focus, .toolbar select:focus, textarea:focus{
  border-color:var(--royal); box-shadow:var(--focus-ring)
}

/* Textarea (Analyzer) */
textarea#hdr{
  width:100%; min-height:260px; font-family:var(--font-mono); font-size:13.5px;
  padding:12px 14px; border:1px solid var(--hair); border-radius:var(--radius);
  background:#fff; color:var(--ink); box-shadow:0 2px 6px rgba(11,58,119,.08) inset;
  resize:vertical;
}

/* Key/Value-Listen (Analyzer & Vault) */
.kv{
  display:grid; grid-template-columns:180px 1fr; gap:6px 10px;
  font-size:14px; color:var(--ink);
}

/* Monospace & Meta/Mute */
.mono{ font-family:var(--font-mono); word-break:break-all; color:var(--navy); font-size:12.5px }
.muted{ color:#5a6c85; font-size:13px }

/* Hash-Block (Vault) */
.hashwrap{ display:flex; align-items:center; gap:10px; margin:12px 0 6px; flex-wrap:wrap }
.hash{
  background:#F0F6FF; border:1px solid #DCE9FB; color:#0b2f61; padding:6px 10px; border-radius:10px;
  font-family:var(--font-mono); font-size:13.5px;
}
.copy{
  cursor:pointer; border:1px solid var(--hair); border-radius:10px; background:linear-gradient(180deg,#fff,#F6FAFF);
  padding:7px 12px; font-weight:700; color:var(--navy);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  display:inline-flex; align-items:center; gap:6px;
}
.copy:hover{ background:#fff; transform:translateY(-1px); filter:saturate(1.05); box-shadow:0 8px 18px rgba(11,58,119,.12) }
.copy:active{ transform:translateY(0); box-shadow:none }


/* ===================================================================
   APP-ADDONS
   =================================================================== */

/* Mirror Browser */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.list{ display:grid; gap:14px }
@media (min-width:760px){  .list{ grid-template-columns:1fr 1fr } }
@media (min-width:1100px){ .list{ grid-template-columns:1fr 1fr 1fr } }

.item{
  border:1px solid var(--hair2); border-radius:var(--radius); padding:14px 16px;
  background:var(--card); display:flex; flex-direction:column; gap:8px;
  box-shadow:0 8px 20px rgba(11,58,119,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.item:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(11,58,119,.10) }
.item h3{ margin:0; font-size:16px; color:var(--navy); font-weight:700 }
.item .meta{ font-size:12.5px; color:#5f6b7a }
.item .tags{ display:flex; gap:6px; flex-wrap:wrap }
.tag{
  font-size:11px; padding:3px 7px; border:1px solid var(--hair); border-radius:999px; background:#fff;
  font-weight:600; color:var(--navy);
}
.empty{
  padding:16px; border:1px dashed var(--hair); border-radius:var(--radius);
  background:#fff; text-align:center; color:#5f6b7a; font-size:14px;
}

/* Mail Header Analyzer: Received-Hops */
.hop{
  border:1px solid var(--hair); border-radius:var(--radius); padding:12px 14px; background:#fff; margin:10px 0;
  box-shadow:var(--shadow-sm);
}
.hop h4{ margin:0 0 6px 0; font-size:14px; color:var(--navy) }

/* Checksum Vault: Drop-Zone & Hash-Row */
.drop{
  border:2px dashed var(--hair); border-radius:var(--radius); padding:18px; background:#fff;
  text-align:center; cursor:pointer; box-shadow:0 8px 20px rgba(11,58,119,.06);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.drop:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(11,58,119,.10) }
.drop.drag{ background:#f4f8ff; border-color:var(--royal); box-shadow:0 0 0 3px rgba(31,100,181,.12) inset }
.hashrow{ display:flex; gap:8px; align-items:center; margin:6px 0 }

/* Statusfarben (Vault/Analyzer) */
.ok{ color:#0a7f3f; font-weight:700 }
.bad{ color:#b00020; font-weight:700 }


/* ===================================================================
   IMPRESSUM & FOOTER
   =================================================================== */
.impressum{
  margin:60px 0 30px; padding:24px 26px; background:linear-gradient(180deg,#F7F9FC 0%,#EAF2FB 100%);
  border:1px solid #D4E1F1; border-radius:14px; box-shadow:0 8px 20px rgba(11,58,119,.08);
  color:#0b3766; text-align:left;
}
.imp-h2{
  margin-top:0; font-size:22px; color:#0B3A77; border-bottom:2px solid var(--lt1);
  display:inline-block; padding-bottom:6px; margin-bottom:10px;
}
footer{ margin:0 0 40px; text-align:center }
.foot{
  display:inline-block; padding:12px 20px; background:linear-gradient(90deg,#F5F8FB,#E9F0F8);
  border:1px solid #CEDAE6; border-radius:10px; color:#0b3766; font-size:14px; font-weight:600; letter-spacing:.4px;
  text-shadow:0 0 3px rgba(11,55,102,.15); box-shadow:0 4px 14px rgba(11,55,102,.08);
}


/* ===================================================================
   ARCHIVE (aus Global beibehalten)
   =================================================================== */
.archive-controls{ display:flex; justify-content:flex-end; margin:6px 0 12px }
.archive-controls input[type="search"]{
  width:min(360px,100%); padding:10px 12px; border-radius:10px;
  border:1px solid var(--hair); background:#fff; outline:none;
}
.archive-controls input[type="search"]:focus{ border-color:var(--royal); box-shadow:var(--focus-ring) }
.archive-grid{ display:grid; gap:14px }
@media (min-width:900px){ .archive-grid{ grid-template-columns: repeat(2,1fr) } }
.group{ border:1px solid #e6eef8; border-radius:12px; padding:14px; background:#fff }
.group h3{ margin:0 0 8px; color:#0E3769; font-size:16px }
.group ul{ margin:8px 0 0 18px }
.group li{ margin:4px 0 }


/* ===================================================================
   UTILS (kleine Helfer, nicht projekt-spezifisch)
   =================================================================== */
.u-hide{ display:none !important }
.u-center{ display:grid; place-items:center }
.u-right{ margin-left:auto }
.u-gap-s{ gap:var(--space-2) }
.u-gap-m{ gap:var(--space-3) }
.u-gap-l{ gap:var(--space-5) }
.u-mt-s{ margin-top:var(--space-2) }
.u-mt-m{ margin-top:var(--space-3) }
.u-mt-l{ margin-top:var(--space-5) }
.u-mb-s{ margin-bottom:var(--space-2) }
.u-mb-m{ margin-bottom:var(--space-3) }
.u-mb-l{ margin-bottom:var(--space-5) }

/* Inline-Code (Analyzer + allgemein) */
code.inline{
  background:#F9FBFF; padding:2px 7px; border-radius:6px; border:1px solid var(--hair2);
  font-family:var(--font-mono); font-size:13px; color:var(--navy);
}

/* === Language Segmented Toggle === */
.lang.seg{
  display:inline-flex; gap:6px; padding:4px;
  border:1px solid var(--hair); border-radius:12px; background:#fff;
  box-shadow:0 6px 18px rgba(11,58,119,.08);
}
.seg-btn{
  appearance:none; border:0; cursor:pointer;
  padding:8px 14px; border-radius:10px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(180deg,#fff,#F6FAFF); color:#0B3A77;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
  min-width:56px;
}
.seg-btn:hover{ transform:translateY(-1px); filter:saturate(1.05); box-shadow:0 8px 18px rgba(11,58,119,.12); }
.seg-btn:active{ transform:translateY(0); box-shadow:none; }
.seg-btn.is-active{
  background:linear-gradient(145deg,var(--navy),var(--royal)); color:#fff;
  box-shadow:0 10px 20px rgba(11,58,119,.22);
}
.seg-btn:focus-visible{ outline:3px solid rgba(31,100,181,.18); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .seg-btn{ transition:none; }
}

/* === Lang-Switch unter der Subline platzieren & größer stylen === */

/* Subline soll eine eigene Zeile belegen */
header .sub{
  display:block;            /* statt inline-block */
  margin-bottom:8px;        /* etwas Luft zur Sprachnavi */
}

/* Container für die Sprach-Buttons */
.lang{
  display:flex;
  justify-content:center;   /* mittig unter der Subline */
  gap:10px;
  margin-top:5px;
}

/* Buttons selbst – etwas größer und CI-konform */
.lang button{
  padding:8px 16px;
  font-size:14px;
  font-weight:800;
  border:1px solid var(--hair);
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#F6FAFF);
  color:var(--navy);
  box-shadow:0 8px 18px rgba(11,58,119,.10);
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.lang button:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
  box-shadow:0 12px 24px rgba(11,58,119,.14);
}

/* Aktiver Zustand via aria-pressed */
.lang button[aria-pressed="true"]{
  background:linear-gradient(145deg,var(--navy),var(--royal));
  color:#fff;
  border-color:transparent;
}

/* Legend grid — aligned with master style.css */
.legend-grid {
  display: grid;
  gap: var(--gap, 12px);
}

@media (min-width: 720px) {
  .legend-grid { grid-template-columns: repeat(3, 1fr); }
}

.item {
  border: 1px solid var(--hair);
  border-radius: var(--radius, 12px);
  padding: var(--space-m, 14px);
  background: var(--card, #fff);
}

.item h3 {
  margin: 0 0 var(--space-s, 10px);
  font-size: var(--fs-14, 15px);
  color: var(--ink-strong, #103B71);
  letter-spacing: .2px;
}

.demo a {
  display: inline-block;
  position: relative;
  padding-left: 26px;             /* Platz für Icon (icons.css) */
  color: var(--link, #1F64B5);
  text-decoration: none;
  font-weight: 600;
}

.demo a:hover { text-decoration: underline; }

.demo a:focus {
  outline: 2px solid var(--focus, #0B3A77);
  outline-offset: 2px;
}