/* ===================================================================
   SharePassword — BYTEXX Corporate Identity
   Farben aus bytexx.de Logo:
   - Blau   #245398  (primary)
   - Orange #F5841F  (accent / CTA)
   =================================================================== */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/lato-900.woff2') format('woff2');
}

:root {
  /* Brand */
  --brand-blue:        #245398;
  --brand-blue-dark:   #1a3f74;
  --brand-blue-light:  #3a6dc0;
  --brand-orange:      #F5841F;
  --brand-orange-dark: #d96e0b;

  /* Surface */
  --bg:        #f4f6fa;
  --bg-grad-from: #eef2f9;
  --bg-grad-to:   #f7f8fb;
  --card:      #ffffff;
  --card-glass: rgba(255, 255, 255, 0.12);
  --border:    rgba(195, 205, 220, 0.6);
  --border-glass: rgba(36, 83, 152, 0.22);
  --border-strong: #c8d0dc;

  /* Text */
  --fg:        #1a2236;
  --fg-muted:  #5a6478;
  --fg-soft:   #8a93a3;

  /* States */
  --danger:    #b91c1c;
  --success:   #15803d;

  /* Misc */
  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 30, 60, 0.06);
  --shadow:    0 4px 16px rgba(15, 30, 60, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 30, 60, 0.12);
}

/* Dark-Theme — angewendet via system preference ODER expliziter Toggle */
:root[data-theme="dark"],
:root:not([data-theme]) {
  /* fallback: nichts (Light bleibt Standard) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0f1623;
    --bg-grad-from: #0f1623;
    --bg-grad-to:   #1a2236;
    --card:         #1a2236;
    --card-glass:   rgba(26, 34, 54, 0.12);
    --border:       rgba(60, 75, 100, 0.55);
    --border-glass: rgba(245, 132, 31, 0.22);
    --border-strong:#3a455c;
    --fg:           #f2f4f8;
    --fg-muted:     #a8b0c0;
    --fg-soft:      #6c7588;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --bg:           #0f1623;
  --bg-grad-from: #0f1623;
  --bg-grad-to:   #1a2236;
  --card:         #1a2236;
  --card-glass:   rgba(26, 34, 54, 0.45);
  --border:       rgba(60, 75, 100, 0.55);
  --border-glass: rgba(245, 132, 31, 0.32);
  --border-strong:#3a455c;
  --fg:           #f2f4f8;
  --fg-muted:     #a8b0c0;
  --fg-soft:      #6c7588;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ====== Globale Link-Farbe — BYTEXX Orange ====== */
a {
  color: var(--brand-orange);
  text-decoration: none;
  transition: color 0.12s;
}
a:hover { color: var(--brand-orange-dark); text-decoration: underline; }
a:visited { color: var(--brand-orange); }
body {
  margin: 0;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  /* Mehrschichtiger Verlauf:
     - radial-gradient oben-links: zarter Blau-Glow (BYTEXX)
     - radial-gradient unten-rechts: zarter Orange-Glow (BYTEXX)
     - linear-gradient: Grundton von hell oben nach dunkler unten */
  background:
    radial-gradient(circle at 18% 12%, rgba(36, 83, 152, 0.22), transparent 55%),
    radial-gradient(circle at 88% 92%, rgba(245, 132, 31, 0.12), transparent 50%),
    linear-gradient(180deg, var(--bg-grad-from) 0%, var(--bg-grad-to) 100%);
  background-attachment: fixed;
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Hexagon-Animation als statischer Hintergrund hinter allem */
#hex-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
.site-header, main.page, .site-footer { position: relative; z-index: 1; }

/* ====== Header ====== */
.site-header {
  background: var(--card-glass);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--card); }
}
.site-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--fg);
}
.brand:hover { color: var(--fg); text-decoration: none; }
.brand__logo {
  /* Logo zeigt nur den oberen Teil (Buchstaben), Reflexion wird abgeschnitten */
  height: 36px;
  width: auto;
  display: block;
  /* PNG ist 500x194; obere ~120/194 ≈ 62% sind die Buchstaben, Rest ist Reflexion */
  object-fit: cover;
  object-position: top;
  aspect-ratio: 500 / 120;
}
/* Im Dark-Mode hat das Logo einen leichten weißen Halo, damit Orange/Blau gut lesbar bleiben */
:root[data-theme="dark"] .brand__logo,
:where(:root:not([data-theme="light"])) .brand__logo {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
  }
}
.brand__title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--fg-muted);
  border-left: 1px solid var(--border-strong);
  padding-left: 0.7rem;
}
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lang-toggle,
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg-muted);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle {
  padding: 0.35rem 0.45rem;
  line-height: 0;
}
.lang-toggle:hover,
.theme-toggle:hover { color: var(--brand-blue); border-color: var(--brand-blue); }

/* ====== Page layout ====== */
main.page {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}
main.page--wide { max-width: 1600px; }   /* z.B. Sicherheits-Seite */
main.page--wide .card { font-size: 0.95rem; }
main.page--wide .card h1 { font-size: 1.65rem; }
main.page--wide .card h2 { font-size: 1.1rem; margin-top: 1.2rem; }
main.page--wide .card p,
main.page--wide .card li { line-height: 1.55; }
.hero {
  text-align: center;
  margin-bottom: 1.75rem;
}
.hero h1 {
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--fg);
}
.hero .lead {
  color: var(--fg-muted);
  font-size: 1.05rem;
  margin: 0;
  white-space: pre-line;   /* \n im i18n-String wird zu Zeilenumbruch */
}

/* ====== Card — Glassmorphism (sehr transparent, fast schwebend) ====== */
.card {
  background: var(--card-glass, rgba(255, 255, 255, 0.12));
  /* Dünner, sehr dezenter Rand — gibt nur eine Andeutung der Karte */
  border: 1px solid var(--border-glass, rgba(36, 83, 152, 0.22));
  border-radius: var(--radius-lg);
  box-shadow:
    0 8px 32px rgba(15, 30, 60, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  padding: 2rem 2.25rem;
  /* Moderater Frost — Inhalte bleiben klar, Hintergrund schimmert sanft durch */
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  position: relative;
}
@media (max-width: 480px) {
  .card { padding: 1.4rem 1.25rem; }
}
.card + .card { margin-top: 1.25rem; }
/* Fallback wenn backdrop-filter nicht unterstützt wird */
@supports not (backdrop-filter: blur(1px)) {
  .card { background: var(--card); }
}
@media (max-width: 480px) {
  .card { padding: 1.25rem; border-radius: 0; border-left: none; border-right: none; }
  main.page { padding: 1.5rem 0; }
  .hero { padding: 0 1.25rem; }
}

/* ====== Form ====== */
.field {
  display: block;
  margin-bottom: 1.1rem;
}
.field > span {
  display: block;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--fg);
  margin-bottom: 0.4rem;
}
.field.checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

/* Felder nebeneinander (z.B. Ihr Name + Empfänger Name) */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  align-items: start;            /* nicht stretchen, sondern oben bündig */
  margin-bottom: 1.1rem;         /* Abstand zur nächsten Section übernimmt der Row */
}
.field-row > .field { margin-bottom: 0; }   /* inneres margin entfällt */
/* Inputs in der Row sind schmaler — nehmen nur den nötigen Platz ein */
.field-row input[type=text],
.field-row input[type=email] {
  max-width: 20rem;
}
@media (max-width: 600px) {
  .field-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .field-row > .field { margin-bottom: 1.1rem; }
}

/* Hinweis-Textarea darf kompakter sein als der Plaintext-Bereich */
textarea.hint-textarea {
  min-height: 3.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
}
.field.checkbox > span {
  margin: 0;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--fg);
}
textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=file],
select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea:focus,
input:focus,
select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(36, 83, 152, 0.15);
}
textarea {
  resize: vertical;
  min-height: 7.5rem;
  font-family: 'Lato', sans-serif;
}
input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-blue);
  cursor: pointer;
}
input[type=file] {
  padding: 0.4rem;
  font-size: 0.9rem;
}

/* ====== Drop-Zone ====== */
.dropzone {
  display: block;
  position: relative;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  padding: 1.1rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.dropzone:hover {
  border-color: var(--brand-blue);
  background: rgba(36, 83, 152, 0.06);
}
.dropzone.is-dragover {
  border-color: var(--brand-orange);
  background: rgba(245, 132, 31, 0.08);
  border-style: solid;
}
.dropzone.has-file {
  border-color: var(--brand-blue);
  border-style: solid;
}
.dropzone__input {
  /* nativen File-Input verstecken; Label-Klick triggert ihn */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
}
.dropzone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  color: var(--fg-muted);
  pointer-events: none; /* Drag-Events gehen an Container */
}
.dropzone__icon { color: var(--brand-blue); }
.dropzone.is-dragover .dropzone__icon,
.dropzone.has-file  .dropzone__icon { color: var(--brand-orange); }
.dropzone__text {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--fg);
}
.dropzone__hint {
  font-size: 0.82rem;
  color: var(--fg-soft);
}
.dropzone__file {
  margin-top: 0.4rem;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  background: rgba(36, 83, 152, 0.12);
  color: var(--brand-blue);
}
.dropzone__files {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  pointer-events: auto;
}
.dropzone__files li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  background: rgba(36, 83, 152, 0.10);
  color: var(--fg);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.82rem;
}
.dropzone__files .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__files .file-size { color: var(--fg-muted); font-size: 0.78rem; }
.dropzone__files .file-remove {
  background: none; border: none; padding: 0 0.3rem;
  color: var(--brand-orange); cursor: pointer; font-size: 1rem; line-height: 1;
}
.dropzone__total {
  font-size: 0.8rem; color: var(--fg-muted);
  text-align: right;
}
.dropzone__total.is-over { color: var(--danger); font-weight: 700; }

/* ====== Honeypot (versteckt für Menschen) ====== */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

details.advanced {
  margin: 1.25rem 0 1.1rem;
  border: 1px solid rgba(245, 132, 31, 0.25);
  border-radius: var(--radius);
  background: rgba(245, 132, 31, 0.05);
}
details.advanced > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.95rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brand-orange);
  user-select: none;
}
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--brand-orange);
  transition: transform 0.15s;
}
details.advanced[open] > summary::before { transform: rotate(90deg); }
details.advanced[open] {
  padding-bottom: 0.5rem;
}
details.advanced > .field,
details.advanced > .field-row { margin-left: 0.95rem; margin-right: 0.95rem; }
details.advanced > .advanced__lead {
  margin: 0.25rem 0.95rem 1rem;
  font-size: 0.88rem;
  color: var(--fg-muted);
}
.field__help {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fg-muted);
}

/* ====== Buttons ====== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.75rem 1.4rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn:hover { text-decoration: none; }   /* Buttons unterstreichen nicht im Hover */

.btn--primary {
  background: var(--brand-orange);
  color: #fff;
  width: 100%;
  padding: 0.95rem 1.4rem;
  font-size: 1rem;
}
.btn--primary:hover:not(:disabled) { background: var(--brand-orange-dark); }

.btn--secondary {
  background: var(--brand-blue);
  color: #fff;
}
.btn--secondary:hover:not(:disabled) { background: var(--brand-blue-dark); }

.btn--ghost {
  background: transparent;
  color: var(--brand-blue);
  border-color: var(--border-strong);
}
.btn--ghost:hover:not(:disabled) { border-color: var(--brand-blue); background: rgba(36,83,152,0.06); }

.btn--ghost-orange {
  background: transparent;
  color: var(--brand-orange);
  border-color: var(--brand-orange);
}
.btn--ghost-orange:hover:not(:disabled) {
  background: rgba(245, 132, 31, 0.10);
  color: var(--brand-orange-dark);
  border-color: var(--brand-orange-dark);
}

/* ====== Result section ====== */
.result__title {
  font-weight: 900;
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.result__title::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--success);
  color: #fff;
  border-radius: 50%;
  font-size: 0.9rem;
}
.result__lead {
  color: var(--fg-muted);
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
}
.result__url-box {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.result__url-box input {
  flex: 1;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.85rem;
  background: var(--bg-grad-from);
}
.result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.result__actions .btn { flex: 1 1 calc(50% - 0.3rem); min-width: 140px; }
.result__meta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--fg-soft);
}
.result__meta strong { color: var(--fg-muted); font-weight: 700; }

/* ====== View page ====== */
.view-hint {
  background: var(--bg-grad-from);
  border-left: 3px solid var(--brand-blue);
  padding: 0.7rem 0.95rem;
  margin: 0 0 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--fg-muted);
  font-size: 0.95rem;
  /* Lange ungetrennte Strings (z.B. '111111...') sollen die Seite
     nicht aufreißen — überall umbrechen, notfalls mitten im Wort. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre.plaintext {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.95rem;
  background: var(--bg-grad-from);
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 0 0 1rem;
  color: var(--fg);
}
.file-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.files-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.2rem 0 0.6rem;
  color: var(--brand-blue);
}
.files-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.files-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: rgba(36, 83, 152, 0.08);
  border: 1px solid rgba(36, 83, 152, 0.18);
  border-radius: var(--radius);
}
.files-list .file-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  color: var(--brand-blue);
}
.files-list .file-meta { flex: 1; min-width: 0; }
.files-list .file-name {
  font-weight: 700;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.9rem;
}
.files-list .file-size {
  color: var(--fg-muted);
  font-size: 0.8rem;
}
.files-list .file-dl {
  flex-shrink: 0;
}
.burn-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 0.9rem;
}

/* ====== Error ====== */
.error {
  color: var(--danger);
  background: rgba(185, 28, 28, 0.08);
  border-left: 3px solid var(--danger);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 1rem;
}

/* ====== Sicherheits-Sprechblase ====== */
/* Wrapper im Footer trägt position:relative, damit die Bubble absolut
   exakt über dem "Sicherheit"-Link sitzt. */
.footer-security-wrap {
  position: relative;
  display: inline-block;
}
.security-hint {
  position: absolute;
  bottom: calc(100% + 14px);     /* über dem Link, etwas Luft für den Pfeil */
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem 0.55rem 0.75rem;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 30, 60, 0.25);
  font-size: 0.85rem;
  font-weight: 700;
  z-index: 50;
  animation: hint-pop 0.4s ease-out 0.4s both,
             hint-bob 2.6s ease-in-out 1.2s infinite;
}
.security-hint::after {
  /* Pfeil nach unten — mittig zentriert, zeigt direkt auf den Link darunter */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--brand-blue);
  border-bottom-right-radius: 3px;
}
.security-hint__icon { font-size: 1rem; line-height: 1; }
.security-hint__text { color: #fff; }

/* Highlight des Footer-Links, solange die Sprechblase aktiv ist */
.security-hint-active .footer-security-link {
  color: var(--brand-orange);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes hint-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .security-hint { animation: hint-pop 0.4s ease-out both; }
}

/* ====== 2-Spalten-Layout (Sicherheits-Seite) ====== */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2.5rem;
  margin: 1rem 0 1.5rem;
}
.cols-2__col h2:first-child { margin-top: 0; }
.cols-2__col ol,
.cols-2__col ul { padding-left: 1.2rem; }
.cols-2__col li { margin-bottom: 0.35rem; }
@media (max-width: 760px) {
  .cols-2 { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Tabelle horizontal scrollbar bei zu kleinem Viewport */
.table-wrap { overflow-x: auto; }

/* Unter-Überschriften in Doku-Seiten */
.card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1rem 0 0.4rem;
  color: var(--fg);
}

/* GitHub-Link (prominent, mit Icon) auf der Sicherheits-Seite */
.github-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--brand-orange);
  text-decoration: none;
  font-weight: 700;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.9rem;
  padding: 0.3rem 0.7rem;
  background: rgba(245, 132, 31, 0.08);
  border: 1px solid rgba(245, 132, 31, 0.28);
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s;
}
.github-link:hover {
  background: rgba(245, 132, 31, 0.16);
  border-color: var(--brand-orange);
  text-decoration: none;
  color: var(--brand-orange);
}

/* ====== Tabellen (Sicherheits-Seite) ====== */
.datatable {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 0.9rem;
}
.datatable th, .datatable td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.datatable th {
  font-weight: 700;
  color: var(--brand-blue);
  background: rgba(36, 83, 152, 0.06);
}
.datatable td:first-child { font-weight: 700; }

.turnstile-slot { margin: 1rem 0; }

/* ====== Footer ====== */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--card-glass);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--fg-soft);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
/* Footer-Links bewusst gedämpfter — Orange wäre dort zu laut */
.site-footer a {
  color: var(--fg-muted);
  text-decoration: none;
}
.site-footer a:hover { color: var(--brand-orange); text-decoration: underline; }

/* ====== Toast ====== */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(2rem);
  background: var(--fg);
  color: var(--card);
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 1000;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[hidden] { display: none !important; }