/* assets/theme.css — BRUTALIST CYBER EDITORIAL (Version C - CLEAN)
   --------------------------------------------------------
   Look: Poster / Editorial / Print + Neon accent
   Vibe: hard edges, thick rules, sharp shadows, grid, high contrast
   Inspired by: cyan paper, acid yellow type, magenta signature
*/

:root{
  /* Base */
  --bg: #05070c;           /* ink */
  --paper: #00cfe8;        /* cyan stage */
  --paper2:#00b7cf;
  --panel:#0b0f18;         /* deep panel */
  --panel2:#0e1422;

  /* Text */
  --text:#eef4ff;
  --ink:#0b0f18;
  --muted:#b7c2de;

  /* Accents */
  --acid:#ffd500;          /* acid yellow */
  --mag:#ff2e88;           /* magenta */
  --cyan:#00d9ff;
  --violet:#8a5cff;

  /* Lines + rules */
  --line: rgba(255,255,255,.18);
  --line2: rgba(255,255,255,.28);
  --rule: rgba(0,0,0,.65);
  --paperLine: rgba(0,0,0,.32);

  /* Brutal shadows */
  --shadow-hard: 10px 10px 0 rgba(0,0,0,.85);
  --shadow-hard2: 14px 14px 0 rgba(0,0,0,.85);

  /* Geometry */
  --radius: 0px;           /* brutalist = sharp */
  --max: 1220px;

  /* Type */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Motion */
  --t: .14s ease;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* GLOBAL EDITORIAL GRID + NOISE */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity:.08;
  mix-blend-mode: overlay;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity:.06;
  mix-blend-mode: overlay;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width: var(--max); margin:0 auto; padding:22px; }

/* ---------------------------------
   HEADER (SOLID INK MASTHEAD)
---------------------------------- */
header{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;

  padding:14px 14px;

  position: sticky;
  top:12px;
  z-index:10;

  background: linear-gradient(180deg, #0a0f18 0%, #0d1322 100%);
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: 8px 8px 0 rgba(0,0,0,.85);
}

/* Top-Edge Accent Strip */
header{ position:sticky; }
header::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background: linear-gradient(
    90deg,
    rgba(0,217,255,.55),
    rgba(255,46,136,.55),
    rgba(255,213,0,.55)
  );
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  user-select:none;
}

.logo, .mark{
  width:44px; height:44px;
  border:2px solid rgba(0,0,0,.75);
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  box-shadow: 5px 5px 0 rgba(0,0,0,.78);
  position:relative;
  overflow:hidden;
}
.logo::after, .mark::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: conic-gradient(from 180deg, rgba(255,255,255,.0), rgba(255,255,255,.25), rgba(255,255,255,.0));
  opacity:.35;
  transform: rotate(25deg);
}

.brand b{
  font-weight: 950;
  letter-spacing:-.6px;
  text-transform: uppercase;
}
.brand small{
  display:block;
  color: rgba(183,194,222,.92);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .4px;
}

/* ---------------------------------
   NAV (TAPES / LABELS)
---------------------------------- */
nav.nav, nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

.nav a, .link{
  padding:9px 12px;
  border:2px solid var(--line);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: .6px;
  text-transform: uppercase;
  transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
  box-shadow: 4px 4px 0 rgba(0,0,0,.75);
}

.nav a:hover, .link:hover{
  text-decoration:none;
  transform: translate(-1px,-1px);
  border-color: rgba(255,213,0,.55);
  background: rgba(255,213,0,.08);
}

.nav a[aria-current="page"], .link[aria-current="page"]{
  border-color: rgba(255,213,0,.85);
  background: linear-gradient(180deg, rgba(255,213,0,.20), rgba(255,213,0,.08));
  box-shadow: 4px 4px 0 rgba(0,0,0,.85);
  position:relative;
}
.nav a[aria-current="page"]::after,
.link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:-2px; right:-2px;
  top:-2px;
  height:6px;
  background: var(--mag);
}

/* “Hot” nav label */
.nav a.is-hot{
  border-color: rgba(0,217,255,.8);
  background: rgba(0,217,255,.10);
}
.nav a.is-hot:hover{
  border-color: rgba(0,217,255,1);
  background: rgba(0,217,255,.14);
}

/* ---------------------------------
   LAYOUT
---------------------------------- */
.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  margin-top:18px;
}
@media (max-width: 980px){
  header{ position:relative; top:auto; }
  .grid{ grid-template-columns: 1fr; }
}

/* ---------------------------------
   HERO (CYAN POSTER PANEL)
---------------------------------- */
.hero{
  margin-top:16px;
  border: 3px solid rgba(0,0,0,.65);
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  color: var(--ink);
  box-shadow: 12px 12px 0 rgba(0,0,0,.90);
  padding: 26px 22px;
  position:relative;
  overflow:hidden;
}

/* halftone / editorial texture */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(rgba(0,0,0,.18) 1px, transparent 1px);
  background-size: 5px 5px;
  opacity:.15;
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* top ruler / cut marks vibe */
.hero::after{
  content:"";
  position:absolute;
  left:-10px; right:-10px;
  top:10px;
  height:2px;
  background: rgba(0,0,0,.55);
  box-shadow: 0 26px 0 rgba(0,0,0,.18);
  opacity:.65;
  pointer-events:none;
}

.hero > *{ position:relative; z-index:1; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 9px;
  border:2px solid rgba(0,0,0,.55);
  background: rgba(255,255,255,.16);
  font-size:12px;
  font-family: var(--mono);
  letter-spacing: .8px;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 rgba(0,0,0,.82);
  margin-bottom:14px;
}

/* Headlines: acid yellow blocks + ink shadow */
h2{
  margin:0;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height:1.05;
  letter-spacing:-.8px;
  font-weight: 950;
  text-transform: uppercase;
  color: var(--acid);
  text-shadow: 2px 2px 0 rgba(0,0,0,.85);
}

/* Use for “magenta signature” words */
.signature{
  font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", "Apple Chancery", cursive;
  color: var(--mag);
  font-weight: 700;
  text-transform:none;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 rgba(0,0,0,.75);
}

/* Accent word inside headline */
h2 em{
  font-style: normal;
  color: var(--ink);
  background: rgba(255,255,255,.22);
  padding: 2px 8px;
  border:2px solid rgba(0,0,0,.55);
  box-shadow: 4px 4px 0 rgba(0,0,0,.85);
}

.sub{
  margin:10px 0 0;
  max-width: 72ch;
  color: rgba(10,14,24,.92);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
}

/* ---------------------------------
   TAGS / LABELS
---------------------------------- */
.tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:2px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  font-size:12px;
  font-family: var(--mono);
  letter-spacing:.6px;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(0,0,0,.70);
}
.tag b{ color: var(--acid); }

/* ---------------------------------
   CARDS (EDITORIAL PANELS)
---------------------------------- */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:2px solid var(--line2);
  border-left: 7px solid rgba(255,213,0,.85);
  box-shadow: 9px 9px 0 rgba(0,0,0,.86);
  padding:16px;
  position:relative;

  /* wichtig: Table darf nicht abgeschnitten werden */
  overflow: visible;

  transition: transform var(--t), box-shadow var(--t), border-color var(--t), filter var(--t);
}

.card::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      transparent 2px,
      transparent 6px);
  opacity:.18;
  pointer-events:none;
}

.card:hover{
  transform: translate(-1px,-1px);
  box-shadow: 11px 11px 0 rgba(0,0,0,.92);
  border-color: rgba(0,217,255,.35);
  filter: contrast(1.02);
}

.card h2, .card h3{
  position:relative;
  margin:0 0 10px 0;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-family: var(--mono);
  color: rgba(255,255,255,.94);
}

.card p{
  margin:10px 0 0;
  color: rgba(183,194,222,.95);
  font-size: 14.5px;
  line-height: 1.65;
}

.mini{ font-size:12px; color: rgba(183,194,222,.85); font-family: var(--mono); }
.hr{ height:2px; background: rgba(255,255,255,.10); margin:12px 0; }

/* ---------------------------------
   LISTS
---------------------------------- */
.list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  border:2px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  box-shadow: 6px 6px 0 rgba(0,0,0,.75);
  transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}
.item:hover{
  transform: translate(-1px,-1px);
  background: rgba(255,255,255,.045);
  border-color: rgba(255,213,0,.30);
  box-shadow: 8px 8px 0 rgba(0,0,0,.85);
}

.icon{
  width:36px; height:36px;
  display:grid; place-items:center;
  border:2px solid rgba(0,0,0,.55);
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  box-shadow: 5px 5px 0 rgba(0,0,0,.85);
  flex:0 0 auto;
  font-size:14px;
  color: var(--ink);
}
.icon.good{ background: linear-gradient(180deg, #42f0e3, #22c9bb); }
.icon.warn{ background: linear-gradient(180deg, #ffe35b, #ffd500); }
.icon.info{ background: linear-gradient(180deg, #7fb3ff, #5f98ff); }

/* ---------------------------------
   FORMS
---------------------------------- */
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:180px; flex:1; }
label{
  font-size:12px;
  font-family: var(--mono);
  letter-spacing: .7px;
  text-transform: uppercase;
  color: rgba(183,194,222,.95);
}

input, select, textarea{
  padding:11px 12px;
  border:2px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
  font-family: var(--mono);
}

input::placeholder, textarea::placeholder{ color: rgba(183,194,222,.55); }

input:focus, select:focus, textarea:focus{
  border-color: rgba(255,213,0,.75);
  box-shadow: 6px 6px 0 rgba(0,0,0,.85);
  transform: translate(-1px,-1px);
  background: rgba(0,0,0,.35);
}

/* ---------------------------------
   BUTTONS
---------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 12px;
  border:2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-family: var(--mono);
  box-shadow: 5px 5px 0 rgba(0,0,0,.82);
  transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
  text-decoration:none;
}

.btn:hover{
  text-decoration:none;
  transform: translate(-1px,-1px);
  border-color: rgba(0,217,255,.55);
  background: rgba(0,217,255,.08);
  box-shadow: 6px 6px 0 rgba(0,0,0,.90);
}

.btn:active{ transform: translate(0,0); box-shadow: 5px 5px 0 rgba(0,0,0,.82); }

.btn.secondary{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
}
.btn.secondary:hover{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}

.btn.danger{
  border-color: rgba(255,46,136,.45);
  background: rgba(255,46,136,.10);
}
.btn.danger:hover{
  border-color: rgba(255,46,136,.85);
  background: rgba(255,46,136,.14);
}

/* HOT CTA */
.btn.hot{
  border-color: rgba(255,213,0,.85);
  background: linear-gradient(180deg, rgba(255,213,0,.22), rgba(255,213,0,.10));
  color: #0b0f18;
  position:relative;
}
.btn.hot::after{
  content:"";
  position:absolute;
  left:-2px; right:-2px;
  bottom:-2px;
  height:6px;
  background: var(--mag);
}
.btn.hot:hover{
  border-color: rgba(255,213,0,1);
  transform: translate(-1px,-1px);
  box-shadow: 8px 8px 0 rgba(0,0,0,.95);
}

/* ---------------------------------
   CHIPS / STATUS
---------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:2px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  font-size:12px;
  font-family: var(--mono);
  letter-spacing: .6px;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(0,0,0,.70);
}

.dot{ width:10px; height:10px; border-radius:0; }
.dot.good{ background:#2bd4c4; }
.dot.warn{ background: var(--acid); }
.dot.bad{ background: var(--mag); }

/* ---------------------------------
   TABLES (BASE)
---------------------------------- */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  box-shadow: 8px 8px 0 rgba(0,0,0,.85);
}
th, td{
  padding:12px 10px;
  border-bottom:2px solid rgba(255,255,255,.08);
  font-size:13px;
  text-align:left;
  vertical-align:top;
}
th{
  font-size:12px;
  font-family: var(--mono);
  letter-spacing:.7px;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(255,213,0,.10);
  border-bottom:2px solid rgba(255,213,0,.35);
}
tr:last-child td{ border-bottom:none; }

/* ---------------------------------
   BADGES
---------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border:2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  font-size:12px;
  font-weight: 950;
  font-family: var(--mono);
  letter-spacing:.7px;
  text-transform: uppercase;
  white-space:nowrap;
  box-shadow: 4px 4px 0 rgba(0,0,0,.75);
}
.badge.good{ border-color: rgba(43,212,196,.55); }
.badge.warn{ border-color: rgba(255,213,0,.65); }
.badge.bad{  border-color: rgba(255,46,136,.65); }

.badge.bonus{ border-color: rgba(0,217,255,.60); background: rgba(0,217,255,.10); }
.badge.best{  border-color: rgba(43,212,196,.60); background: rgba(43,212,196,.10); }
.badge.lock{  border-color: rgba(255,213,0,.70);  background: rgba(255,213,0,.10); }

/* ---------------------------------
   NOTES / FOOTERS
---------------------------------- */
.note{
  margin-top:12px;
  padding:12px;
  border:2px dashed rgba(0,217,255,.35);
  background: rgba(0,217,255,.06);
  color: rgba(255,255,255,.92);
  font-size:13px;
  line-height:1.55;
  box-shadow: 6px 6px 0 rgba(0,0,0,.85);
}

.footer{
  margin:18px 0 0;
  padding:14px;
  border:2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  color: rgba(183,194,222,.92);
  font-size:12px;
  line-height:1.55;
  box-shadow: 8px 8px 0 rgba(0,0,0,.85);
}

footer{
  margin-top:18px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  padding:14px 6px 0;
  color: rgba(183,194,222,.92);
  font-size:12.5px;
  border-top: 2px solid rgba(255,255,255,.12);
}
.fine{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sep{ width:2px; height:12px; background: rgba(255,255,255,.18); }

/* ---------------------------------
   MODAL
---------------------------------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.72);
  z-index:1000;
}

.modal{
  width:min(920px, 100%);
  max-height:min(86vh, 860px);
  overflow:auto;
  border:3px solid rgba(0,0,0,.75);
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  color: var(--ink);
  box-shadow: 16px 16px 0 rgba(0,0,0,.95);
  padding: 16px;
}

.modal .head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.modal .head h3{
  margin:0;
  font-size:14px;
  font-weight: 950;
  font-family: var(--mono);
  letter-spacing: .8px;
  text-transform: uppercase;
}

.modal .close{
  border:2px solid rgba(0,0,0,.65);
  background: rgba(255,255,255,.16);
  color: var(--ink);
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 950;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .7px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.85);
  transition: transform var(--t), background var(--t);
}
.modal .close:hover{
  transform: translate(-1px,-1px);
  background: rgba(255,255,255,.22);
}
.modal .close:active{ transform: translate(0,0); }

/* ---------------------------------
   ACCESSIBILITY
---------------------------------- */
:focus-visible{
  outline: 3px solid rgba(255,213,0,.85);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
  body::before, body::after{ display:none !important; }
}

/* ==================================
   TABLE FIX: SCROLL WRAP (UNIVERSAL)
   ================================== */
.tablewrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;

  border:2px solid rgba(255,255,255,.18);
  box-shadow: 8px 8px 0 rgba(0,0,0,.85);
  background: rgba(255,255,255,.02);

  position:relative;
}

/* Tabelle darf breiter sein */
.tablewrap table{
  min-width: 980px;
  width: 100%;
  border: none;
  box-shadow: none;
}

/* Fades links/rechts – zeigt “da geht noch mehr” */
.tablewrap::before,
.tablewrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:18px;
  pointer-events:none;
  z-index:2;
}
.tablewrap::before{
  left:0;
  background: linear-gradient(90deg, rgba(5,7,12,.85), transparent);
}
.tablewrap::after{
  right:0;
  background: linear-gradient(270deg, rgba(5,7,12,.85), transparent);
}

/* Scrollbar */
.tablewrap::-webkit-scrollbar{ height: 10px; }
.tablewrap::-webkit-scrollbar-thumb{
  background: rgba(255,213,0,.35);
  border:2px solid rgba(0,0,0,.65);
}
.tablewrap::-webkit-scrollbar-track{
  background: rgba(0,0,0,.25);
}
/* ===========================
   INDEX FIX: RHYTHM & ALIGN
   (Hero + Statement wieder "wie vorher")
   =========================== */

/* 1) Gleicher Rhythmus: Header -> Hero -> Statement */
.hero{ margin-top: 18px; }
.statement{ margin-top: 22px; }

/* 2) Statement soll exakt wie Content im Wrap sitzen */
.statement,
.statement__frame{
  width: 100%;
}

/* 3) Statement-Block: verhindert, dass irgendwas optisch "zieht" */
.statement__frame{
  padding: 16px;
  border: 3px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 12px 12px 0 rgba(0,0,0,.90);
  overflow: hidden; /* wichtig: keine Schatten/Badges rausdrücken */
}

/* 4) Falls dein Statement innen ein Grid nutzt */
.statement__grid{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 16px;
}
@media (max-width: 980px){
  .statement__grid{ grid-template-columns: 1fr; }
}

/* 5) Hero soll NICHT breiter wirken als Header */
.hero{
  box-shadow: 12px 12px 0 rgba(0,0,0,.90);
}

/* 6) Falls irgendwo ein Element horizontal überläuft -> killt "Verschieben" */
html, body{
  overflow-x: hidden;
}

/* 7) Safety: Damit pseudo-elements im Header nix komisch beeinflussen */
header{
  position: sticky;
}
/* ===============================
   MODAL TEXT FIX (AGB Snippets)
   CYAN POSTER → SCHWARZE TYPO
   =============================== */

.modal,
.modal * {
  color: #000 !important;
}

/* Mini-Texte nicht grau */
.modal .mini {
  color: #000 !important;
  opacity: 1 !important;
}

/* Badges im Modal klar und kontrastreich */
.modal .badge {
  color: #000 !important;
  background: rgba(255,255,255,.35);
  border-color: rgba(0,0,0,.6);
}

/* Hinweis-Box */
.modal .note {
  background: rgba(255,255,255,.25);
  border-color: rgba(0,0,0,.6);
  color: #000 !important;
}

/* Listen-Items */
.modal .item {
  background: rgba(255,255,255,.25);
  border-color: rgba(0,0,0,.6);
  color: #000 !important;
}