/**
 * EXIF Viewer & Metadata Remover — UI System v3
 * (c) 2026 Eric Bernstein
 *
 * Design-DNA — gezielt aus den drei Vorbild-Seiten:
 *
 * apple.com  → massive Hero-Typografie (clamp 3-5rem, weight 600, sehr enges
 *              letter-spacing -0.03em); Body in 17px; viel Whitespace; Apple-
 *              spezifische "Off-White" #fbfbfd; sehr WENIGE, dafür sehr
 *              prominente Buttons; Sektionen ohne sichtbare Trennlinien,
 *              Trennung NUR durch Spacing.
 *
 * stripe.com → Inter/Sohne-typografische Präzision; subtile Top-down Hero-
 *              Gradients (kein Marketing-Gewitter); Indigo (#635bff) als
 *              Primärakzent; Code-Cards in schwarz auf weißem Grund — der
 *              charakteristische "Stripe-Snippet"-Look; Buttons mit echtem
 *              Hover-Lift (translateY) statt Background-Wechsel; Form-Inputs
 *              mit präzisem Focus-Ring.
 *
 * airbnb.com → Cards in #ffffff auf #f7f7f7 Body; KEINE harte Border, nur
 *              dezente shadow-on-hover (0 6px 20px rgba(0,0,0,0.08));
 *              Pink-Magenta (#ff385c) als seltene Akzentfarbe für kritische
 *              Privacy-Warnungen; rounded-xl (12-16px) für alle Cards;
 *              warme, freundliche Mikro-Copy-Größen.
 */

/* ========== Core Tokens ========== */
:root {
  /* Surfaces — Apple-Off-White als Body, reines Weiß für Cards */
  --bg:           #fbfbfd;
  --bg-section:   #ffffff;
  --surface:      #ffffff;
  --surface-soft: #f5f5f7;          /* Apple System-Grey */
  --surface-inset:#f7f7fa;
  --surface-code: #0a0a0c;          /* Stripe-Code-Card */

  /* Text — Apple-Black (#1d1d1f) und Apple-Grey (#6e6e73) */
  --fg:           #1d1d1f;
  --fg-strong:    #0a0a0c;
  --fg-muted:     #6e6e73;
  --fg-subtle:    #86868b;
  --fg-faint:     #b5b5b9;

  /* Borders — extrem subtil */
  --border:        rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);
  --border-soft:   rgba(0,0,0,0.04);

  /* Akzente */
  --indigo:        #635bff;          /* Stripe Primary */
  --indigo-deep:   #4a40e0;
  --indigo-soft:   rgba(99,91,255,0.08);
  --indigo-text:   #4a40e0;

  --link:          #0066cc;          /* Apple-Link-Blue */
  --link-hover:    #0050a0;

  --pink:          #ff385c;          /* Airbnb-Pink für Privacy-Critical */
  --pink-soft:     rgba(255,56,92,0.08);

  /* Status */
  --ok:            #1f8a4c;
  --ok-bg:         rgba(31,138,76,0.08);
  --warn:          #b45309;
  --warn-bg:       rgba(180,83,9,0.08);
  --danger:        #dc2626;
  --danger-bg:     rgba(220,38,38,0.06);

  /* Risk */
  --risk-green:   #1f8a4c;
  --risk-amber:   #d97706;
  --risk-red:     #ff385c;

  /* Shadows — leicht stärker als zuvor, damit jede Card spürbar "schwebt".
   * Apple/Stripe layern shadows: einen sehr kurzen unter dem Rand für
   * Schärfe, plus einen weichen, weiteren für Tiefe. */
  --shadow-flat:  none;
  --shadow-1:     0 1px 2px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.06);
  --shadow-2:     0 1px 3px rgba(0,0,0,0.06), 0 10px 28px rgba(0,0,0,0.10);
  --shadow-3:     0 2px 6px rgba(0,0,0,0.07), 0 18px 44px rgba(0,0,0,0.12);
  --shadow-pop:   0 24px 70px rgba(0,0,0,0.18), 0 8px 20px rgba(0,0,0,0.10);
  --shadow-focus: 0 0 0 3px rgba(99,91,255,0.55), 0 0 0 6px rgba(99,91,255,0.18);
  /* Card-Default — der Default-Schwebe-Schatten für alle "Boxen" */
  --shadow-card:       0 1px 3px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.07);
  --shadow-card-hover: 0 2px 6px rgba(0,0,0,0.07), 0 16px 40px rgba(0,0,0,0.12);

  /* Radius */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 20px; --r-5: 28px;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;
  --sp-9: 64px; --sp-10: 96px; --sp-11: 128px;

  /* Typo — Inter primär (Stripe), SF Pro (Apple) als Fallback */
  --font-display:
    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-text:
    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
    'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK SC', 'Noto Sans CJK KR',
    'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali', sans-serif;
  --font-mono:
    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Easing */
  --ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========== Reset ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Safety-Net gegen versehentliches Horizontal-Overflow durch
   * Grid-Items mit min-content > Viewport, Hero ::before mit
   * width:1400px, oder lange unbreakable Strings. Ohne dieses
   * overflow-x:hidden zoomen Mobile-Browser die ganze Seite aus
   * (visualViewport=390 aber scrollWidth=831 → Layout-Skala 0.47x). */
  overflow-x: hidden;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 17px;                 /* Apple-Body-Größe */
  line-height: 1.5;
  font-feature-settings: 'cv11','ss01','ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Belt-and-suspenders zum html overflow-x:hidden — manche
   * Mobile-Browser (Safari iOS) ignorieren overflow-x auf html,
   * dann muss body es uebernehmen. */
  overflow-x: hidden;
}
a { color: var(--link); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--indigo-soft); color: var(--indigo-deep); }

/* ========== Layout container ========== */
header, main, footer {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 32px;
}
@media (max-width: 720px) {
  header, main, footer { padding-inline: 20px; }
}

/* ========== Header — top-bar Stil wie stripe/airbnb ========== */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 16px;
  background: rgba(251,251,253,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-block-end: 1px solid var(--border-soft);
}
.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
}
.header-row > div:first-child { min-width: 0; justify-self: start; }
.header-pick-wrap { justify-self: center; }
.header-tools { justify-self: end; }
/* Sticky-Header-Variante des Primary-Buttons.
 * Hoehe abgestimmt auf den Skill-Switch daneben (gleiche vertikale
 * Mass-Linie). Pill-Shape, gleicher Indigo-Gradient wie Hero-CTA.
 * Kein Pfeil — User-Wunsch. */
.btn-header-pick {
  padding: 0 22px;
  font-size: 0.84rem;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
  /* Exakt gleiche Hoehe wie .skill-switch */
  height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Brand-Element im Header (kein H1 mehr — H1 ist jetzt im Hero, SEO-relevant) */
.brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--fg-strong);
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;          /* nicht unter dem Logo umbrechen */
  text-decoration: none;
  transition: opacity .15s var(--ease);
  min-width: 0;
  max-width: 100%;
}
.brand-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.brand:hover { opacity: 0.85; text-decoration: none; }
.brand-logo {
  display: inline-block;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--indigo), var(--pink));
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(99,91,255,0.3);
  flex-shrink: 0;
}
.brand-name { color: var(--fg-strong); }
.brand-tag {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ok);
  background: var(--ok-bg);
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brand-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--ok);
  border-radius: 50%;
}

/* Skip-Link — keyboard-accessible Navigation, sichtbar nur on-focus.
 * Apple/Stripe haben das auf jeder Seite. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 1200;
  background: var(--fg-strong);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--r-2);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: top .2s var(--ease);
  box-shadow: var(--shadow-2);
}
.skip-link:focus { top: 12px; outline: none; box-shadow: var(--shadow-focus), var(--shadow-2); }

.noscript-banner {
  background: var(--warn-bg, #fff4e2);
  border: 1px solid var(--warn-border, #b45309);
  color: var(--fg);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-3);
  margin: var(--sp-4);
  text-align: center;
  font-family: inherit;
}

/* Visually-hidden — sichtbar nur fuer Screenreader und Suchmaschinen.
 * Standard-WAI-ARIA Pattern: nicht display:none (würde von SEO-Crawlern
 * teils ignoriert), sondern off-screen geklippt. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.subtitle { display: none; } /* In den Hero verschoben */

.header-tools { display: flex; gap: var(--sp-3); align-items: center; }

/* ========== Skill switch — segmented control im stripe/airbnb-Stil ========== */
.skill-switch {
  position: relative;
  display: inline-flex;
  background: var(--indigo-soft);
  border: 1.5px solid rgba(99,91,255,0.22);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(99,91,255,0.10);
  /* Feste Hoehe — Header-Pick-Button matcht diesen Wert */
  height: 40px;
  align-items: center;
  box-sizing: border-box;
}
.skill-switch button {
  position: relative;
  z-index: 2;
  border: 0;
  background: transparent;
  color: var(--indigo-text);
  /* min-height 36px Desktop; 44px ab @media (max-width: 720px) für WCAG-Touch-Target */
  min-height: 36px;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .25s var(--ease);
  font-family: inherit;
  letter-spacing: -0.005em;
}
.skill-switch button[aria-pressed="true"] {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.skill-switch button:hover:not([aria-pressed="true"]) { color: var(--indigo-deep); }
.skill-switch::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 4px; bottom: 4px;
  /* Dynamisch — initSkillMode() setzt --skill-ind-left + --skill-ind-width
   * an die echte Position+Breite des aktiven Buttons. So passt der
   * Indikator immer exakt, egal wie lang das Label in der jeweiligen
   * Sprache ist. Fallback (vor JS-Init): 50%-Pille wie zuvor. */
  left: var(--skill-ind-left, 4px);
  width: var(--skill-ind-width, calc(50% - 4px));
  /* Gleicher Gradient wie 'Privat' im Hero — aktiver Skill-Toggle ist
   * damit visuell verbunden mit der Brand-Identität. */
  background: linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(99,91,255,0.35), 0 4px 14px rgba(255,56,92,0.20);
  transition: left .35s var(--ease), width .35s var(--ease);
}

/* Lang select */
.lang-switch select {
  background: var(--surface);
  color: var(--fg);
  border: 0;
  border-radius: 999px;
  padding: 8px 30px 8px 14px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: box-shadow .15s;
}
[dir="rtl"] .lang-switch select { background-position: left 11px center; padding: 8px 14px 8px 30px; }
.lang-switch select:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.lang-switch select:focus { outline: none; box-shadow: var(--shadow-focus); }

/* ========== HERO — Apple-massive + Stripe-gradient-mesh ========== */
.hero {
  padding-block: var(--sp-11) var(--sp-9);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* Stripe-Gradient-Mesh: 3-farbiger animated wash */
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 1400px; height: 900px;
  background:
    radial-gradient(ellipse 60% 50% at 25% 30%, rgba(99,91,255,0.18), transparent 60%),
    radial-gradient(ellipse 50% 45% at 75% 40%, rgba(255,56,92,0.14), transparent 60%),
    radial-gradient(ellipse 55% 50% at 50% 80%, rgba(0,200,180,0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  animation: hero-shift 18s ease-in-out infinite;
}
@keyframes hero-shift {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.05); }
}
.hero-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 16px 6px 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--fg-muted);
  margin-block-end: var(--sp-6);
  box-shadow: var(--shadow-1);
  max-width: calc(100% - 32px);
  text-align: center;
}
.hero-eyebrow .badge {
  background: var(--ok-bg);
  color: var(--ok);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero .hero-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7.5vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--fg-strong);
  max-width: 980px;
  margin: 0 auto var(--sp-5);
}
.hero .hero-title .accent {
  background: linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.hero-sub {
  position: relative;
  z-index: 1;
  font-size: 1.28rem;
  color: var(--fg-muted);
  line-height: 1.5;
  max-width: 680px;
  margin: 0 auto var(--sp-7);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ========== Hero-CTA-Row & Big-Buttons ========== */
.hero-cta-row {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  margin-block-start: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
}
/* .btn-large/.btn-small: konsolidierte Definition unten bei .btn (Zeile ~1430).
 * Hier nur Schrift-Spezifikum für ältere Selectors (Hero-CTA), Höhe steuert .btn. */
.btn-link {
  background: transparent;
  border: 0;
  color: var(--indigo-text);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 4px;
  position: relative;
  letter-spacing: -0.005em;
}
.btn-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 4px; right: 4px; height: 1.5px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .25s var(--ease);
}
.btn-link:hover::after { transform: scaleX(1); transform-origin: left; }
.btn-link:hover { color: var(--indigo-deep); }

/* ========== Showcase Sektionen — Apple 2-Spalten ========== */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
  padding-block: var(--sp-11);
  max-width: 1080px;
  margin-inline: auto;
  position: relative;
}
/* "Truly safe" — grüner Glow-Hintergrund (Trust-Sektion) */
.showcase[data-accent="green"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 30% 50%, rgba(20,164,123,0.10), transparent 65%);
  pointer-events: none;
  z-index: -1;
}
/* "In every photo" — pinker Privacy-Critical-Hauch */
.showcase[data-accent="pink"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 70% 50%, rgba(255,56,92,0.08), transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.showcase.showcase-flip { grid-template-columns: 1fr 1fr; }
.showcase.showcase-flip .showcase-text { order: 2; }
.showcase.showcase-flip .showcase-visual { order: 1; }
@media (max-width: 880px) {
  .showcase, .showcase.showcase-flip {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-block: var(--sp-9);
  }
  .showcase.showcase-flip .showcase-text { order: 1; }
  .showcase.showcase-flip .showcase-visual { order: 2; }
}
.showcase-eyebrow {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--eyebrow-color, var(--indigo));
  text-transform: none;
  letter-spacing: -0.005em;
  margin-block-end: var(--sp-3);
}
.showcase-eyebrow.centered { text-align: center; }
/* Sektion-spezifische Eyebrow-Farben — Apple-Pattern: jede Sektion bekommt
 * eine eigene Akzentfarbe als visueller Anker. */
.showcase[data-accent="pink"]   { --eyebrow-color: var(--pink); }
.showcase[data-accent="indigo"] { --eyebrow-color: var(--indigo); }
.showcase[data-accent="green"]  { --eyebrow-color: #14a47b; }
.features-grid[data-accent="indigo"] { --eyebrow-color: var(--indigo); }
.formats-band[data-accent="indigo"]  { --eyebrow-color: var(--indigo); }
.upload-section[data-accent="black"] { --eyebrow-color: var(--fg-strong); }
.showcase-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg-strong);
  margin-block-end: var(--sp-5);
}
.showcase-title.centered { text-align: center; }
.showcase-title.small-title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.showcase-sub {
  font-size: 1.16rem;
  color: var(--fg-muted);
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 520px;
}
.showcase-sub.centered { text-align: center; max-width: 640px; margin: 0 auto var(--sp-6); }
.showcase-sub kbd {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--fg-strong);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

/* Phantom Tags Visual (Apple-mockup-Stil) — jede Tag-Art hat eigene Akzentfarbe */
.phantom-tags {
  display: grid;
  gap: var(--sp-3);
  position: relative;
  padding: var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-3);
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
}
.phantom-tags::before {
  /* Stripe-mäßiger sanfter Glow hinter dem Mockup */
  content: '';
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(ellipse 60% 60% at 30% 30%, rgba(255,56,92,0.18), transparent 60%),
    radial-gradient(ellipse 60% 60% at 70% 70%, rgba(99,91,255,0.18), transparent 60%);
  filter: blur(30px);
  z-index: -1;
  border-radius: inherit;
}
.phantom-tag {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-soft);
  border-radius: var(--r-2);
  transition: transform .25s var(--ease), background .25s var(--ease);
  border-left: 3px solid var(--pt-color, var(--indigo));
}
.phantom-tag:nth-child(1) { --pt-color: var(--pink); }
.phantom-tag:nth-child(2) { --pt-color: var(--indigo); }
.phantom-tag:nth-child(3) { --pt-color: var(--warn); }
.phantom-tag:nth-child(4) { --pt-color: var(--danger); }
.phantom-tag:hover { transform: translateX(4px); }
.phantom-tag-icon {
  width: 36px; height: 36px;
  background: color-mix(in srgb, var(--pt-color) 12%, var(--surface));
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-1);
  flex-shrink: 0;
}
.phantom-tag div { display: flex; flex-direction: column; gap: 1px; }
.phantom-tag strong {
  font-size: 0.82rem;
  color: var(--fg-strong);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.phantom-tag span {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg-muted);
}

/* Proof-Liste (Trust-Sektion) */
.proof-list {
  display: grid;
  gap: var(--sp-3);
  background: var(--surface);
  border-radius: var(--r-4);
  padding: var(--sp-5);
  box-shadow: var(--shadow-2);
}
.proof-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-2);
  background: var(--surface-soft);
}
.proof-icon {
  width: 40px; height: 40px;
  background: var(--surface);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: var(--shadow-1);
  flex-shrink: 0;
}
.proof-item div { display: flex; flex-direction: column; gap: 2px; }
.proof-item strong {
  font-size: 0.96rem;
  color: var(--fg-strong);
  font-weight: 600;
}
.proof-item span {
  font-size: 0.88rem;
  color: var(--fg-muted);
  line-height: 1.45;
}

/* ========== Features-Grid (3 Pillars) ========== */
.features-grid {
  padding-block: var(--sp-11);
  max-width: 1080px;
  margin-inline: auto;
}
.features-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-block-start: var(--sp-8);
}
.feature-pillar {
  background: var(--surface);
  border-radius: var(--r-4);
  padding: var(--sp-7) var(--sp-6);
  text-align: start;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: var(--shadow-card);
}
.feature-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.feature-num {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--fp-color, var(--fg-strong));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--font-display);
  margin-block-end: var(--sp-4);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--fp-color, var(--fg-strong)) 35%, transparent);
}
.feature-pillar:nth-child(1) { --fp-color: var(--indigo); }
.feature-pillar:nth-child(2) { --fp-color: var(--pink); }
.feature-pillar:nth-child(3) { --fp-color: #14a47b; }
.feature-pillar { position: relative; overflow: hidden; }
.feature-pillar::before {
  /* dezenter Akzent-Glow oben in jeder Säule */
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 120%; height: 120px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--fp-color) 14%, transparent), transparent 70%);
  pointer-events: none;
  opacity: 0.7;
}
.feature-pillar h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--fg-strong);
  margin-block-end: var(--sp-2);
}
.feature-pillar p {
  font-size: 0.98rem;
  color: var(--fg-muted);
  line-height: 1.55;
}
@media (max-width: 880px) {
  .features-row { grid-template-columns: 1fr; }
}

/* Section-Beam: dünner Stripe-Gradient zwischen großen Sektionen */
.section-beam {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(99,91,255,0.25) 25%,
    rgba(255,56,92,0.25) 50%,
    rgba(20,164,123,0.25) 75%,
    transparent 100%);
  margin: 0 auto;
  max-width: 880px;
  position: relative;
}
.section-beam::after {
  content: '';
  position: absolute;
  top: -20px; bottom: -20px;
  left: 50%; transform: translateX(-50%);
  width: 280px;
  background: radial-gradient(ellipse, rgba(99,91,255,0.08), transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}

/* ========== Formats-Band ========== */
.formats-band {
  padding-block: var(--sp-10);
  background: var(--surface);
  border-block: 1px solid var(--border-soft);
  margin-block-start: var(--sp-9);
  position: relative;
  overflow: hidden;
}
.formats-band::before {
  /* sehr subtiler Conic-Gradient-Wash */
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120%; height: 200%;
  background: conic-gradient(from 180deg at 50% 50%,
    transparent 0deg,
    rgba(99,91,255,0.06) 60deg,
    transparent 120deg,
    rgba(255,56,92,0.06) 180deg,
    transparent 240deg,
    rgba(20,164,123,0.06) 300deg,
    transparent 360deg);
  pointer-events: none;
  filter: blur(60px);
  z-index: 0;
}
.formats-band > * { position: relative; z-index: 1; }
.formats-grid {
  max-width: 1000px;
  margin: var(--sp-7) auto 0;
  padding-inline: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.format-tile {
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.format-tile::after {
  /* per-Tile-Akzent-Streifen oben, sichtbar on-hover */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--ft-color, var(--indigo));
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.format-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.format-tile:hover::after { opacity: 1; }
.format-tile:nth-child(1) { --ft-color: var(--pink); }
.format-tile:nth-child(2) { --ft-color: var(--indigo); }
.format-tile:nth-child(3) { --ft-color: var(--warn); }
.format-tile:nth-child(4) { --ft-color: #14a47b; }
.format-tile:nth-child(1) .format-icon,
.format-tile:nth-child(2) .format-icon,
.format-tile:nth-child(3) .format-icon,
.format-tile:nth-child(4) .format-icon { transition: transform .3s var(--ease-bounce); }
.format-tile:hover .format-icon { transform: scale(1.12); }
.format-icon { display: block; font-size: 2.4rem; margin-block-end: var(--sp-3); }
.format-tile strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.012em;
  margin-block-end: 4px;
}
.format-tile span {
  display: block;
  font-size: 0.82rem;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .formats-grid { grid-template-columns: 1fr 1fr; }
}

/* upload-headline aus altem Wizard entfernen wir — keine Index-Pille mehr */
.upload-headline { display: none; }
.upload-headline.no-hide { display: block; }

/* ========== Trust-Bar im Hero ========== */
.trust-bar {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--sp-7);
  flex-wrap: wrap;
  margin-block-start: var(--sp-6);
  font-size: 0.92rem;
  color: var(--fg-muted);
}
.trust-bar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.trust-bar span::before {
  content: '✓';
  color: var(--ok);
  font-weight: 700;
  width: 18px; height: 18px;
  background: var(--ok-bg);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

/* EU-/GDPR-Badge im Hero-Eyebrow neben "100% privat".
 * Erbt den existing .badge-Look mit dezentem Indigo-Akzent.
 * Reiner Trust-Stamp, faktischer Jurisdiktions-Hinweis. Kein Tooltip,
 * kein Link — wer mehr wissen will, findet die Datenschutzerklärung
 * via Footer.
 */
.badge-eu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--indigo-soft);
  color: var(--indigo-text);
  border: 1px solid rgba(99,91,255,0.24);
}

.hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--sp-9);
  flex-wrap: wrap;
  margin-block-start: var(--sp-7);
}
.hero-stat {
  text-align: center;
}
.hero-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg-strong);
  line-height: 1.05;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-stat-label {
  display: block;
  font-size: 0.84rem;
  color: var(--fg-muted);
  margin-block-start: 4px;
  font-weight: 500;
}

/* ========== Privacy banner (Apple-stat-row Style) ========== */
.local-only-notice {
  display: none;          /* Wir kommunizieren das schon im Hero & in Stats */
}

/* ========== Upload — sehr dominante Hero-CTA-Card ========== */
.upload-section {
  margin-block-end: var(--sp-9);
  position: relative;
  z-index: 1;
  /* Skip-Link springt mit Sticky-Header-Offset — sonst klebt der
   * #upload-Anker direkt am verdeckten Header-Boden */
  scroll-margin-top: 100px;
}
.upload-headline {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.018em;
  margin-block-end: var(--sp-5);
}
.upload-headline .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--fg-strong);
  color: #fff;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  margin-inline-end: 12px;
  vertical-align: 4px;
}
.drop-zone {
  background: var(--surface);
  border: 2px dashed rgba(0,0,0,0.14);
  border-radius: var(--r-5);
  padding: var(--sp-10) var(--sp-7);
  text-align: center;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: var(--shadow-card);
  position: relative;
}
/* Toast-Hinweis bei abgewiesener Datei (.txt etc.) — schwebt unten in
 * der Drop-Zone, fadet nach 4.5s aus. Vorher passierte einfach nichts,
 * was den User raten ließ ob das Tool kaputt ist. */
.drop-reject-toast {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  background: var(--warn);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(180,83,9,0.35);
  max-width: calc(100% - 32px);
  pointer-events: none;
  animation: drop-reject-pop .25s var(--ease-bounce);
}
@keyframes drop-reject-pop {
  from { transform: translateX(-50%) translateY(8px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}
.drop-zone:hover {
  border-color: var(--indigo);
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.drop-zone.over {
  border-color: var(--indigo);
  background: var(--indigo-soft);
  border-style: solid;
}
.drop-zone:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--indigo); border-style: solid; }
.drop-icons {
  display: flex; justify-content: center; align-items: center;
  gap: var(--sp-5); margin-block-end: var(--sp-5); flex-wrap: wrap;
}
.drop-icon {
  font-size: 2.6rem; opacity: 0.5;
  transition: opacity .25s var(--ease), transform .35s var(--ease-bounce);
  cursor: help; user-select: none;
}
.drop-icon:hover { opacity: 1; transform: translateY(-4px) scale(1.08); }
.drop-zone:hover .drop-icon, .drop-zone.over .drop-icon { opacity: 0.9; }
.drop-zone p {
  color: var(--fg-strong);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  font-family: var(--font-display);
}
.drop-zone .hint {
  color: var(--fg-muted);
  font-size: 1rem;
  margin-block-start: 10px;
  font-weight: 400;
  max-width: 540px;
  margin-inline: auto;
  line-height: 1.5;
}
.drop-zone-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: var(--sp-5);
  background: var(--fg-strong);
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.drop-zone:hover .drop-zone-cta {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.24);
}
.drop-zone-cta::after { content: '→'; transition: transform .25s var(--ease); }
.drop-zone:hover .drop-zone-cta::after { transform: translateX(4px); }
input[type="file"] { display: none; }

@media (max-width: 480px) {
  .drop-zone { padding: var(--sp-8) var(--sp-4); }
  .drop-icons { gap: var(--sp-3); }
  .drop-icon { font-size: 2rem; }
  .drop-zone p { font-size: 1.08rem; }
}

.demo-hint {
  text-align: center;
  margin-block-start: var(--sp-4);
  font-size: 0.95rem;
  color: var(--fg-muted);
}
.demo-btn {
  background: transparent;
  color: var(--indigo-text);
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-inline-start: 6px;
  cursor: pointer;
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: color .15s;
}
.demo-btn::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s var(--ease);
}
.demo-btn:hover { color: var(--indigo-deep); }
.demo-btn:hover::after { transform: scaleX(1); transform-origin: left; }
.demo-license-details { text-align: center; margin-block-start: var(--sp-3); font-size: 0.82rem; color: var(--fg-subtle); }
.demo-license-details summary { cursor: pointer; display: inline; list-style: none; color: var(--fg-subtle); }
.demo-license-details summary::-webkit-details-marker { display: none; }
.demo-license-details summary::before { content: 'ⓘ '; opacity: 0.7; }
.demo-license-details summary:hover { color: var(--fg); }
.demo-license-details p { font-size: 0.85rem; line-height: 1.6; color: var(--fg-muted); margin-block-start: 8px; padding: 0 var(--sp-4); max-width: 560px; margin-inline: auto; }

/* ========== Profile picker — Karten-Grid statt Dropdown ========== */
.profile-picker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  margin-block-end: var(--sp-4);
  box-shadow: var(--shadow-card);
}

/* Zusätzliches Karten-Grid (rendered von JS) */
.profile-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
}
.profile-card {
  position: relative;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--r-3);
  padding: var(--sp-5);
  cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-card);
}
.profile-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.profile-card[aria-pressed="true"] {
  border-color: var(--fg-strong);
  box-shadow: 0 0 0 4px rgba(10,10,12,0.06), var(--shadow-card-hover);
  transform: translateY(-3px);
}
.profile-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), var(--shadow-card-hover);
}
.profile-card-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  color: var(--fg-strong);
  letter-spacing: -0.012em;
}
.profile-card-icon {
  width: 28px; height: 28px;
  background: var(--surface-soft);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.96rem;
}
.profile-card[data-key="paranoid"] .profile-card-icon { background: rgba(99,91,255,0.10); }
.profile-card[data-key="social"] .profile-card-icon   { background: rgba(0,200,180,0.12); }
.profile-card[data-key="keepCamera"] .profile-card-icon { background: rgba(217,119,6,0.12); }
.profile-card[data-key="gpsOnly"] .profile-card-icon  { background: rgba(255,56,92,0.10); }
.profile-card-desc {
  font-size: 0.88rem;
  color: var(--fg-muted);
  line-height: 1.5;
}
.profile-card-recommended {
  position: absolute;
  top: -10px; right: 14px;
  background: var(--fg-strong);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-picker label {
  font-weight: 600;
  color: var(--fg-strong);
  font-size: 0.94rem;
  letter-spacing: -0.005em;
  font-family: var(--font-display);
}
.profile-picker select,
.advanced-options select,
.card-profile-select {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 10px 36px 10px 14px;
  font-size: 0.94rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
  min-width: 240px;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.profile-picker select:hover, .advanced-options select:hover, .card-profile-select:hover { border-color: var(--border-strong); }
.profile-picker select:focus, .advanced-options select:focus, .card-profile-select:focus {
  outline: none; box-shadow: var(--shadow-focus); border-color: var(--indigo);
}
.profile-hint { color: var(--fg-muted); font-size: 0.88rem; }
.profile-help-toggle { font-size: 0.86rem; }
.profile-help-detached {
  text-align: center;
  margin: var(--sp-2) auto var(--sp-5);
  max-width: 600px;
}
.profile-help-detached .profile-help-list { text-align: start; margin-block-start: var(--sp-3); }
.profile-help-toggle summary {
  cursor: pointer;
  color: var(--indigo-text);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.profile-help-toggle summary::-webkit-details-marker { display: none; }
.profile-help-toggle summary::before {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
}
.profile-help-list {
  list-style: none;
  padding: var(--sp-4) var(--sp-5);
  margin-block-start: var(--sp-2);
  background: var(--surface-soft);
  border-radius: var(--r-2);
  font-size: 0.88rem;
  line-height: 1.6;
}
.profile-help-list li { margin-block-end: var(--sp-2); }
.profile-help-list li:last-child { margin-block-end: 0; }
.profile-help-list strong { color: var(--fg-strong); font-weight: 600; }

/* ========== Advanced options panel ========== */
/* Filename-Sanitiser-Row — sichtbar in beide Skill-Modi (Beginner+Profi),
 * weil Filename-Leak ein realer Privacy-Vektor ist. */
.filename-sanitise-row {
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  margin-block-end: var(--sp-4);
  font-size: 0.92rem;
  box-shadow: var(--shadow-card);
}
.filename-sanitise-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--fg);
}
/* L2: Im Beginner-Mode keine Card-Optik — sonst stehen 2 visuell
 * gleichwertige Cards (sanitise + advanced-options-evtl) untereinander.
 * Im Beginner ist .advanced-options eh versteckt, also reicht ein
 * leichter Inline-Style, damit der Toggle nicht als separate Sektion
 * wirkt. Im Profi-Mode bleibt der Card-Look. */
body[data-skill-mode="beginner"] .filename-sanitise-row {
  box-shadow: none;
  background: transparent;
  padding: var(--sp-2) 0;
  margin-block-end: var(--sp-2);
}

.advanced-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-7);
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  margin-block-end: var(--sp-4);
  font-size: 0.92rem;
  box-shadow: var(--shadow-card);
}
.advanced-options label {
  display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--fg);
}
.advanced-options input[type="checkbox"],
.strip-options input[type="checkbox"],
.filename-sanitise-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  position: relative;
  flex-shrink: 0;
}
.advanced-options input[type="checkbox"]:checked,
.strip-options input[type="checkbox"]:checked,
.filename-sanitise-row input[type="checkbox"]:checked {
  background: var(--indigo);
  border-color: var(--indigo);
}
.advanced-options input[type="checkbox"]:checked::after,
.strip-options input[type="checkbox"]:checked::after,
.filename-sanitise-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; left: 5px; top: 2px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.advanced-options input[type="checkbox"]:focus-visible,
.strip-options input[type="checkbox"]:focus-visible,
.filename-sanitise-row input[type="checkbox"]:focus-visible {
  outline: none; box-shadow: var(--shadow-focus);
}
.advanced-options select { padding: 7px 28px 7px 12px; font-size: 0.9rem; min-width: auto; }

/* Skill-Mode Sichtbarkeits-Switch */
body[data-skill-mode="beginner"] [data-advanced] { display: none !important; }
body[data-skill-mode="beginner"] .advanced-options { display: none !important; }
body[data-skill-mode="beginner"] .multi-strip-actions { display: none !important; }
body[data-skill-mode="beginner"] .cli-hint,
body[data-skill-mode="beginner"] .hex-viewer,
body[data-skill-mode="beginner"] .strip-preview,
body[data-skill-mode="beginner"] .timeline-panel,
body[data-skill-mode="beginner"] .strip-options,
body[data-skill-mode="beginner"] .inconsistency-panel,
/* "Nur GPS entfernen" bleibt im Beginner-Modus sichtbar — haeufigster
 * Use-Case ("ich will nur GPS aus diesem Foto raus"), waere sonst nur
 * via Profil-Dropdown erreichbar. */
body[data-skill-mode="beginner"] .file-actions [data-strip="date"],
body[data-skill-mode="beginner"] .file-actions [data-strip="xmp"],
body[data-skill-mode="beginner"] .file-actions [data-strip="all"],
body[data-skill-mode="beginner"] .file-actions [data-action="edit"],
body[data-skill-mode="beginner"] .file-actions [data-action="spoof"],
body[data-skill-mode="beginner"] .file-actions [data-export="json"],
body[data-skill-mode="beginner"] .meta-category[data-cat="other"],
body[data-skill-mode="beginner"] .meta-category[data-cat="image"],
body[data-skill-mode="beginner"] .meta-category[data-cat="software"] {
  display: none !important;
}

/* ========== Bulk section (für alle Dateien) ========== */
/* Bulk-Section bekommt denselben Indigo→Pink-Gradient wie der aktive
 * "Einsteiger"/"Profi"-Toggle im Header — hebt das "alle Dateien"-
 * Cluster visuell als Brand-Element heraus. */
.bulk-section {
  background: linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  border-radius: var(--r-3);
  padding: var(--sp-5) var(--sp-6);
  margin-block-end: var(--sp-6);
  box-shadow: 0 2px 8px rgba(99,91,255,0.35), 0 4px 14px rgba(255,56,92,0.20);
  color: #fff;
}
.bulk-heading-row {
  margin-block-end: var(--sp-3);
}
.bulk-heading {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0;
  font-family: var(--font-display);
  text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.bulk-subheading {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
}
/* Buttons innerhalb der Bulk-Section auf hellem Background mit dunklem
 * Text — sie heben sich klarer vom Gradient-Hintergrund ab als unsere
 * normalen Indigo-Primaries. */
.bulk-actions .btn-primary {
  background: #fff;
  color: var(--indigo-deep);
}
.bulk-actions .btn-primary:hover:not(:disabled) {
  background: #fff;
  color: var(--indigo);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.bulk-actions .btn-secondary {
  background: rgba(255,255,255,0.16);
  color: #fff;
  backdrop-filter: blur(4px);
}
.bulk-actions .btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.26);
}
.bulk-actions .btn-ghost {
  color: rgba(255,255,255,0.92);
}
.bulk-actions .btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.bulk-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center; margin-block-end: 0;
}
/* Mobile: Bulk-Action-Buttons untereinander stapeln statt nebeneinander.
 * "Anwenden & herunterladen" ist allein schon >250px breit — drei Buttons
 * (plus "Kompakte Ansicht" + "Liste leeren") passen unter 480px nicht
 * sauber nebeneinander, brechen unleserlich um. */
@media (max-width: 480px) {
  .bulk-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bulk-actions .btn {
    width: 100%;
    justify-content: center;
    /* Auf Touch-Geräten 48px Mindesthöhe (Apple/Material-Empfehlung).
     * Vorher waren die Buttons mit btn-small-Padding nur ~36px hoch und
     * mit dem Daumen schwer zu treffen. */
    min-height: 48px;
    padding-block: 13px;
    font-size: 0.92rem;
  }
}
/* Bei nur 1 File: Profile-Cards oben + Apply-Primary + Clear bleiben
 * sichtbar (das ist der schnellste Weg "Profil wählen → Klick → fertig").
 * Ausgeblendet werden nur die Aktionen, die bei 1 File semantisch sinnlos
 * sind: Compare braucht ≥2 Files, ZIP-Download macht keinen Sinn für eine
 * einzelne Datei, "Export ALL metadata" wäre dasselbe wie der Per-Card-
 * "Export JSON"-Button. Der Bulk-Heading wird auch versteckt, weil "für
 * alle Dateien" bei einer Datei sprachlich falsch klingt. */
body.single-file .bulk-heading-row,
body.single-file .bulk-heading,
body.single-file #downloadAllZipBtn,
body.single-file #compareBtn,
body.single-file #exportAllJsonBtn,
body.single-file #exportAllCsvBtn { display: none !important; }
body.single-file .bulk-section {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-block-end: var(--sp-4);
  color: var(--fg);  /* Reset — bei 1 File kein weißer Text mehr */
}
/* Buttons-Override im single-file-Mode komplett zurueck auf Standard-
 * Indigo-/Ghost-Optik. Die Glas-/Weiss-Buttons machen nur auf dem
 * Gradient-Hintergrund Sinn — bei transparentem BG sehen sie aus, als
 * wuerden sie schweben. */
body.single-file .bulk-actions .btn-primary {
  background: linear-gradient(180deg, var(--indigo), var(--indigo-deep));
  color: #fff;
}
body.single-file .bulk-actions .btn-primary:hover:not(:disabled) {
  /* explicit background mitnehmen — sonst greift die multi-file-Hover-Regel
   * darüber (background: #fff) und der Button wird unlesbar. */
  background: linear-gradient(180deg, var(--indigo-deep), var(--indigo-deep));
  color: #fff;
  box-shadow: 0 8px 22px rgba(99,91,255,0.40);
  transform: translateY(-1px);
}
body.single-file .bulk-actions .btn-secondary {
  background: var(--surface);
  color: var(--fg-strong);
  border: 1px solid var(--border-strong);
  backdrop-filter: none;
}
body.single-file .bulk-actions .btn-secondary:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--fg-strong);
}
body.single-file .bulk-actions .btn-ghost {
  background: transparent;
  color: var(--fg-muted);
}
body.single-file .bulk-actions .btn-ghost:hover:not(:disabled) {
  background: var(--surface-soft);
  color: var(--fg);
}
/* Bei 1 File ist die Profile-Cards-Auswahl oben die einzige Quelle der
 * Wahrheit — Per-Card-Dropdown wäre nur eine Wiederholung. Ausblenden,
 * der Card-Apply-Button greift weiterhin auf state.defaultProfile zurück. */
body.single-file .card-profile { display: none !important; }

/* ========== Per-Card Action-Header ==========
 * Trennt visuell, dass die Buttons NUR für diese eine Card gelten — nicht
 * für alle. Pink-Akzent-Streifen als Komplementärfarbe zum Indigo der
 * Bulk-Section oben (Indigo = "alle", Pink = "nur diese"). */
.file-actions-heading-row {
  margin-block: var(--sp-4) var(--sp-2);
  border-inline-start: 3px solid var(--pink);
  padding-inline-start: var(--sp-3);
}
.file-actions-heading {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fg-strong);
  margin: 0;
  font-family: var(--font-display);
}
.file-actions-subheading {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--fg-muted);
  line-height: 1.4;
}

/* ========== Buttons — Apple/Stripe-mäßig ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 0;
  border-radius: 999px;
  padding: 0 24px;
  height: 44px;  /* iOS-Touch-Target-Empfehlung, einheitlich für alle btn-Varianten */
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .2s var(--ease), color .15s var(--ease),
              box-shadow .25s var(--ease), transform .15s var(--ease);
  user-select: none;
  white-space: nowrap;
  font-family: inherit;
  position: relative;
}
/* Auf Touch-Geräten (Tablet incl. iPad) muss btn-small auf 44px wachsen,
 * sonst sind die Buttons unter dem WCAG-2.1-AA / Apple-HIG-Touchziel.
 * Pointer-fine = Maus → 32px ist ausreichend, hover: hover bleibt eindeutig.
 * @media (hover: none) trifft alle Touch-Geräte zuverlässig, unabhängig
 * von der Bildschirmbreite (löst das iPad-Querformat-Problem). */
.btn-small { height: 32px; padding: 0 14px; font-size: 0.85rem; }
@media (hover: none), (pointer: coarse) {
  .btn-small { min-height: 44px; padding-inline: 16px; }
}
.btn-large { height: 56px; padding: 0 32px; font-size: 1.04rem; }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(180deg, var(--indigo), var(--indigo-deep));
  color: #fff;
  border-color: var(--indigo-deep);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 6px 18px rgba(99,91,255,0.30);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--indigo-deep), #3a31d0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 10px 28px rgba(99,91,255,0.40);
  transform: translateY(-1px);
  border-color: var(--indigo-deep);
}

.btn-secondary {
  background: var(--surface);
  color: var(--fg-strong);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--fg-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.btn-small { padding: 8px 16px; font-size: 0.86rem; }

/* Compact-Mode (Punkt 3 von Usability-Sprint):
 * body.compact-cards versteckt alle aufklappbaren <details>-Sektionen
 * innerhalb der File-Cards. Sichtbar bleiben:
 *   - File-Header (Name, Größe, Format, Thumbnail)
 *   - File-Info-Tile (Dimensions, MIME, ICC, SHA-Snippet)
 *   - Risk-Panel (mit Reasons-Toggle als <details> ZWAR drin, aber dessen
 *     summary-Zeile ist die "Score-X/100"-Anzeige; bleibt sichtbar)
 *   - Inconsistencies-Panel
 *   - GPS-Warning (incl. Map-CTA)
 *   - C2PA-Detection-Panel
 *   - Embedded-Thumbnail-Notice
 *   - File-Actions (Apply profile + Forensik + Mehr ▾)
 *   - Status / Tag-Diff
 *
 * Ausgenommen sind die <details> die SELBST auch im Compact-Mode noch
 * Sinn machen (z.B. risk-breakdown im Risk-Panel — das bleibt klappbar).
 * Daher ein gezielter Selektor statt "alle <details>".
 */
body.compact-cards .file-card .meta-category,
body.compact-cards .file-card .pro-section,
body.compact-cards .file-card .tag-filter-row,
body.compact-cards .file-card .meta-empty,
body.compact-cards .file-card .file-actions-heading-row,
body.compact-cards .file-card .strip-options,
body.compact-cards .file-card .card-profile {
  display: none;
}
body.compact-cards .file-card { padding-block: var(--sp-3); }
/* Compact-Toggle-Button — deutlicher active-State:
 * Voller Indigo-Fill + Checkmark + Glow, damit auf einen Blick klar ist
 * dass der Compact-Mode gerade aktiv ist. Subtiler "soft"-State war zu
 * leicht zu übersehen. */
#compactToggleBtn[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--indigo), var(--indigo-deep));
  color: #fff;
  border-color: var(--indigo-deep);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 14px rgba(99,91,255,0.32);
}
#compactToggleBtn[aria-pressed="true"]:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--indigo-deep), #3a31d0);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 22px rgba(99,91,255,0.40);
}
#compactToggleBtn[aria-pressed="true"] span::before {
  content: '✓ ';
  font-weight: 700;
}
/* Compact-Toggle nur sichtbar wenn ≥1 File geladen, sonst sinnlos */
body:not(.single-file):not(.multi-file) #compactToggleBtn { display: none; }

/* Action-Konsolidierung (Punkt 1 von Usability-Sprint):
 * "Mehr ▾"-Dropdown nimmt alle Sekundär-Actions auf, damit die file-actions-
 * Reihe nicht mehr 9-11 Buttons hat. Sichtbar bleiben: Apply profile +
 * Forensik-Run-all + Mehr ▾.
 *
 * Native <details><summary> als disclosure-Pattern — accessibility-friendly,
 * tastatur-bedienbar, kein custom JS-overhead. Click-outside-/Esc-Schließen
 * läuft via document-Level-Listener in init().
 */
.actions-more {
  position: relative;
  display: inline-block;
}
/* Card-Overflow temporär aufmachen + Card hochstapeln wenn das Dropdown
 * geöffnet ist:
 *   - overflow:visible: sonst clippt .file-card { overflow:hidden }
 *     das absolut positionierte Menu am Card-Rand
 *   - z-index: ohne den Tweak liegen nachfolgende File-Cards (später im
 *     DOM, default-höher gestapelt) ÜBER dem geöffneten Dropdown der
 *     aktuellen Card und verdecken es teilweise
 *
 * :has() ist seit 2022/2023 in allen modernen Browsern verfügbar. Falls
 * ein alter Browser das nicht versteht, fällt er auf das alte Verhalten
 * zurück (Dropdown clippt) — kein hard break.
 */
.file-card:has(details.actions-more[open]) {
  overflow: visible;
  z-index: 100;
}
/* Sicherstellen dass alle Cards in einem gemeinsamen Stacking-Context
 * sind, damit z-index:100 oben gegen die Sibling-Cards greift. */
.file-list { isolation: isolate; }
.actions-more > summary.actions-more-toggle {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.actions-more > summary::-webkit-details-marker { display: none; }
.actions-more > summary::marker { display: none; content: ''; }
.actions-more-arrow {
  font-size: 0.7em;
  opacity: 0.7;
  transition: transform .15s var(--ease);
}
.actions-more[open] .actions-more-arrow {
  transform: rotate(180deg);
}
.actions-more-menu {
  position: absolute;
  /* Klappt nach OBEN auf — Menu erscheint über dem "Mehr ▾"-Button,
   * innerhalb der Card. Das vermeidet alle Stacking-/Overflow-Probleme
   * mit nachfolgenden File-Cards (die default-höher gestapelt sind und
   * sonst das Menu überdecken). Linker Rand bündig mit dem Button. */
  bottom: calc(100% + 6px);
  inset-inline-start: 0;
  /* Hoher z-index INNERHALB des Card-Stacking-Contexts (über status-banner
   * / tag-diff / andere Card-Children). */
  z-index: 200;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.08);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: actions-more-fade .12s var(--ease);
}
@keyframes actions-more-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.actions-more-item {
  appearance: none;
  background: transparent;
  border: 0;
  text-align: start;
  font: inherit;
  font-size: 0.88rem;
  color: var(--fg);
  padding: 8px 14px;
  border-radius: var(--r-1);
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
.actions-more-item:hover,
.actions-more-item:focus-visible {
  background: var(--indigo);
  color: #fff;
  outline: none;
}
.actions-more-item-reset {
  color: var(--fg-muted);
}
.actions-more-item-reset:hover,
.actions-more-item-reset:focus-visible {
  /* Reset-Item bekommt einen wärmeren Hover (Pink-Akzent), weil es eine
   * "Zurücksetzen"-Aktion ist — visuell vom regulären Indigo abgesetzt. */
  background: var(--pink);
  color: #fff;
}
.actions-more-sep {
  border: 0;
  border-block-start: 1px solid var(--border-soft);
  margin: 4px 0;
}

/* btn-forensics-toplevel — der "🔬 Forensik-Analyse"-Button neben den
 * Strip-Actions (Punkt 2 von Usability-Sprint). Etwas anderer Farbverlauf
 * als der btn-primary "Apply profile", damit klar wird: zwei verschiedene
 * Workflows (Privacy vs Forensik), nicht zwei gleichwertige Optionen.
 * Indigo→Pink-Gradient passt zur Forensik-Card-Markierung. */
.btn-forensics-toplevel {
  background: linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 6px 18px rgba(99,91,255,0.22),
              0 4px 14px rgba(255,56,92,0.18);
}
.btn-forensics-toplevel:hover:not(:disabled) {
  background: linear-gradient(120deg, var(--indigo-deep) 0%, #e02050 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 10px 28px rgba(99,91,255,0.32),
              0 6px 20px rgba(255,56,92,0.26);
}
.btn-forensics-toplevel:disabled {
  background: linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  opacity: 0.55;
}

.btn-ghost {
  background: transparent;
  color: var(--fg-muted);
  border: 0;
  padding: 6px 12px;
  font-weight: 500;
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-soft); color: var(--fg); }

/* ========== Multi-Preview Strip ========== */
.multi-preview-strip {
  display: none;
  background: var(--surface);
  border-radius: var(--r-3);
  /* Mehr Padding oben + rechts: der Remove-X-Button ragt 14px ueber das
   * Thumbnail hinaus. Bei zu engem Padding wuerde die overflow:auto-
   * Scroll-Logik den Button clippen. */
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  margin-block-end: var(--sp-5);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

/* Sticky-Sidebar — nur Desktop (≥1280px). Kleine Always-On-Übersicht
 * links neben dem Content, klickbare Mini-Thumbnails springen zur Card,
 * X entfernt. Position fixed damit sie beim Scrollen sichtbar bleibt. */
.multi-preview-sticky {
  display: none;
}
@media (min-width: 1280px) {
  .multi-preview-sticky.visible {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    position: fixed;
    inset-inline-start: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    background: var(--surface);
    border-radius: var(--r-3);
    /* Mehr Padding oben + rechts, damit der herausragende Remove-X-Button
     * (top:-14px) nicht vom overflow-y-auto-Scrollbereich geclippt wird. */
    padding: var(--sp-5) var(--sp-5) var(--sp-4) var(--sp-4);
    box-shadow: var(--shadow-card);
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
  }
}
.multi-preview-strip.visible { display: flex; gap: var(--sp-3); align-items: center; }
.mps-item { scroll-snap-align: start; }
.mps-item {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: var(--r-2);
  border: 2px solid transparent;
  background: var(--surface-soft);
  cursor: pointer;
  position: relative;
  /* overflow: visible — sonst clippt der Remove-X-Button, der absichtlich
   * über die rechte obere Ecke hinausragt. Das Bild selbst bekommt seinen
   * eigenen border-radius und überschreitet die Box wegen object-fit cover
   * sowieso nicht. */
  overflow: visible;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  transition: border-color .15s var(--ease), transform .25s var(--ease-bounce), box-shadow .15s;
}
.mps-item:hover { border-color: var(--indigo); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.mps-item.active { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }
.mps-item.cleaned::after {
  content: '✓'; position: absolute; bottom: 3px; right: 3px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ok); color: #fff; border-radius: 50%;
  font-size: 0.74rem; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.mps-item img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-2) - 2px); }
.mps-glyph { font-size: 1.5rem; line-height: 1; }
/* Remove-Button am Mini-Thumbnail oben rechts. Auf Touch immer sichtbar
 * (kein Hover dort), auf Desktop dezent + voll opacity beim Hover. */
.mps-remove {
  position: absolute;
  /* Position: 2/3 ausserhalb des Thumbnails (oben rechts). Bei 22px Button
   * = ca. 14px ausserhalb, 8px innerhalb. So ist der Button optisch klar
   * "Hover-/Klick-Aktion" und ueberlappt nur eine Bild-Ecke statt drauf
   * zu sitzen. */
  top: -14px;
  inset-inline-end: -14px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  z-index: 3;
  opacity: 0.92;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: opacity .12s, background .12s, transform .12s;
}
.mps-item:hover .mps-remove { opacity: 1; }
.mps-remove:hover { background: var(--err, #ff385c); transform: scale(1.12); opacity: 1; }
.mps-remove:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--indigo); opacity: 1; }
@media (hover: none) {
  .mps-remove { opacity: 0.92; }
}
.mps-count {
  flex-shrink: 0;
  font-size: 0.86rem;
  color: var(--fg-muted);
  padding-inline-end: var(--sp-3);
  font-weight: 600;
}

/* ========== Route map section ========== */
.route-map-section {
  background: var(--surface);
  border-radius: var(--r-4);
  padding: var(--sp-6) var(--sp-6);
  margin-block-end: var(--sp-6);
  box-shadow: var(--shadow-card);
}
.route-map-section h3 { margin-block-end: var(--sp-2); font-family: var(--font-display); letter-spacing: -0.01em; }
.route-controls {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  margin-block-start: var(--sp-3); font-size: 0.9rem;
}
.route-controls input[type="range"] { flex: 1; min-width: 200px; accent-color: var(--indigo); }
.route-time {
  font-family: var(--font-mono); font-size: 0.86rem; color: var(--fg-muted); min-width: 200px;
  background: var(--surface-soft);
  padding: 7px 12px;
  border-radius: var(--r-1);
}

/* ========== File card — Airbnb ohne Border, mit Hover-Lift ========== */
.file-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.file-card {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-4);
  padding: 0;
  box-shadow: var(--shadow-card);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  overflow: hidden;
  position: relative;
  /* Beim Auto-Scroll nach Datei-Auswahl 220px Luft oben lassen, damit
   * die Profile-Karten (mit dem 'Profil anwenden'-Button) und der sticky
   * Glass-Header über der Card sichtbar bleiben. */
  scroll-margin-top: 220px;
}
@media (max-width: 720px) {
  .file-card { scroll-margin-top: 160px; }
}
.file-card::before {
  /* dezente Border-Linie als pseudo-element für saubere Trennung ohne harte Border */
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid var(--border-soft);
  pointer-events: none;
}
.file-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.file-card.processing { opacity: 0.85; }
.file-card.cleaned::before { border-color: rgba(31,138,76,0.35); }

.file-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-block-end: 1px solid var(--border-soft);
}

/* File-Index — nur bei mehreren Dateien sichtbar. Gleicher Gradient wie
 * der "Privat"-Akzent im Hero (.hero-title .accent), damit die Brand-
 * Optik wiedererkennbar ist. Position: vor dem Thumbnail. */
.file-index {
  display: none;
}
body.multi-file .file-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 36px;
  padding: 0 6px;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  /* drop-shadow auf das Element wirkt unter dem Gradient-Text durch und
   * gibt der Zahl Tiefe — text-shadow tut das nicht zuverlässig wenn
   * background-clip: text aktiv ist. Doppelter Schatten: kurzer Indigo
   * für Schärfe + weicher Pink für Glow. */
  filter: drop-shadow(0 2px 4px rgba(99,91,255,0.30))
          drop-shadow(0 6px 16px rgba(255,56,92,0.18));
}
@media (max-width: 480px) {
  body.multi-file .file-index {
    font-size: 1.7rem;
    min-width: 28px;
    filter: drop-shadow(0 2px 3px rgba(99,91,255,0.30));
  }
}
.file-thumb, .file-thumb-placeholder {
  flex-shrink: 0;
  width: 96px; height: 96px;
  border-radius: var(--r-2);
  background: var(--surface-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  overflow: hidden;
}
.file-thumb { object-fit: cover; }
.thumb-spinner {
  display: inline-block;
  width: 22px; height: 22px;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.file-info { flex: 1; min-width: 0; }
.file-name {
  font-weight: 600;
  color: var(--fg-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 1.04rem;
  letter-spacing: -0.008em;
  font-family: var(--font-display);
}
.file-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 0.84rem; color: var(--fg-muted); margin-block-start: 4px;
}
.meta-format {
  background: var(--surface-soft);
  color: var(--fg);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.size-arrow { color: var(--ok); font-weight: 700; margin: 0 4px; }
.file-remove {
  width: 36px; height: 36px;
  background: var(--pink-soft);
  border: 1.5px solid rgba(255,56,92,0.32);
  color: var(--pink);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s var(--ease), color .15s var(--ease),
              border-color .15s var(--ease), transform .12s var(--ease),
              box-shadow .15s var(--ease);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(255,56,92,0.18);
  flex-shrink: 0;
}
.file-remove:hover {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
  transform: scale(1.08) rotate(90deg);
  box-shadow: 0 4px 14px rgba(255,56,92,0.45);
}
.file-remove:active { transform: scale(0.95); }
.file-remove:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255,56,92,0.30); }
.file-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }

/* PRO-Cluster (Strip-Preview / Forensics / Timeline / Hex / CLI-Snippet) —
 * gleicher Gap wie .file-body, damit die einzelnen Reiter darin den selben
 * Abstand voneinander haben wie die Tag-Kategorien (gps/date/camera/...). */
.pro-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ========== File-Information Tile ========== */
.file-info-tile {
  background: var(--surface-inset);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4) var(--sp-6);
}
.fit-row { display: flex; flex-direction: column; gap: 2px; }
.fit-key {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-subtle);
  font-weight: 600;
}
.fit-val {
  font-size: 0.95rem;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  font-weight: 500;
}

/* ========== Risk panel ========== */
.risk-panel {
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--sp-5) var(--sp-5);
  position: relative;
  box-shadow: var(--shadow-1);
}
.risk-header { display: flex; gap: var(--sp-5); align-items: center; }
.risk-meter {
  flex-shrink: 0;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: conic-gradient(var(--risk-color, var(--risk-amber)) calc(var(--risk-pct, 0) * 1%), var(--surface-soft) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.risk-meter::before {
  content: ''; position: absolute; inset: 8px;
  background: var(--surface); border-radius: 50%;
}
.risk-meter-fill { display: none; }
.risk-label { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.risk-score-value {
  font-size: 2rem; font-weight: 700; color: var(--fg-strong);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
}
.risk-score-max { font-size: 1rem; color: var(--fg-subtle); font-weight: 500; }
.risk-level-tag {
  margin-inline-start: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.risk-green  { --risk-color: var(--risk-green); }
.risk-green  .risk-level-tag { background: var(--ok-bg); color: var(--ok); }
.risk-lime   { --risk-color: var(--risk-green); }
.risk-lime   .risk-level-tag { background: var(--ok-bg); color: var(--ok); }
.risk-amber  { --risk-color: var(--risk-amber); }
.risk-amber  .risk-level-tag { background: var(--warn-bg); color: var(--warn); }
.risk-red    { --risk-color: var(--risk-red); }
.risk-red    .risk-level-tag { background: var(--pink-soft); color: var(--pink); }

.risk-explain { margin-block-start: var(--sp-4); font-size: 0.94rem; color: var(--fg-muted); line-height: 1.6; }
.risk-breakdown { margin-block-start: var(--sp-3); }
.risk-breakdown summary {
  cursor: pointer; color: var(--indigo-text); font-size: 0.88rem;
  list-style: none; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
.risk-breakdown summary::-webkit-details-marker { display: none; }
.risk-breakdown summary::before { content: '▸'; transition: transform .2s var(--ease); display: inline-block; font-size: 0.7em; }
.risk-breakdown[open] summary::before { transform: rotate(90deg); }
.risk-reasons {
  list-style: none;
  margin-block-start: var(--sp-3);
  display: grid;
  gap: 6px;
  padding-inline-start: 0;
}
.risk-reasons li {
  display: flex; gap: var(--sp-3); align-items: baseline;
  font-size: 0.88rem;
  padding: 10px 14px;
  background: var(--surface-soft);
  border-radius: var(--r-1);
  color: var(--fg);
}
.risk-weight {
  display: inline-block;
  min-width: 42px;
  font-weight: 700;
  color: var(--indigo-text);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.risk-clean { color: var(--ok); margin-block-start: var(--sp-2); font-size: 0.92rem; font-weight: 500; }
.risk-foot { font-size: 0.78rem; color: var(--fg-subtle); margin-block-start: var(--sp-2); }
.risk-cleaned-overlay { position: relative; }
.risk-cleaned-overlay::after {
  content: '✓ cleaned';
  position: absolute; top: 16px; right: 16px;
  background: var(--ok); color: #fff;
  padding: 5px 14px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(31,138,76,0.4);
}

/* ========== Inconsistency panel ========== */
.inconsistency-panel {
  background: var(--warn-bg);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  border: 1px solid rgba(180,83,9,0.25);
}
.inconsistency-panel strong {
  color: var(--warn); display: block; margin-block-end: var(--sp-2);
  font-size: 0.96rem; font-weight: 600; font-family: var(--font-display);
}
.inconsistency-list { list-style: none; margin-block-start: var(--sp-2); display: grid; gap: 6px; }
.inconsistency-list li {
  font-size: 0.92rem;
  color: var(--fg);
  padding: 4px 0 4px 24px;
  position: relative;
  line-height: 1.55;
}
.inconsistency-list li::before {
  content: '⚠'; position: absolute; left: 0; top: 4px; color: var(--warn);
}
.severity-info  { opacity: 0.82; }
.severity-warn  { color: var(--fg); }
.inconsistency-foot { font-size: 0.78rem; color: var(--fg-subtle); margin-block-start: var(--sp-2); }

.thumbnail-notice {
  background: var(--surface-soft);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.92rem;
  color: var(--fg-muted);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.thumbnail-notice strong { color: var(--fg-strong); font-size: 0.94rem; font-weight: 600; }
.thumbnail-notice.thumbnail-warn { background: var(--warn-bg); }
.thumbnail-notice.thumbnail-warn strong { color: var(--warn); }
.thumbnail-notice p { margin-block-start: 4px; flex-basis: 100%; font-size: 0.86rem; }
.thumb-dim {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-subtle);
  background: var(--surface);
  padding: 4px 10px;
  border-radius: var(--r-1);
}

/* ========== C2PA-Detected-Panel — Read-Only-Hinweis bei vorhandenem Manifest ==========
 * Indigo-Akzent (passend zur Pro-Badge / Forensik-Karten) statt warn-orange:
 * das Vorhandensein einer Provenance-Signatur ist kein Privacy-Problem,
 * sondern eine technische Information mit forensischer Relevanz.
 */
.c2pa-detected-panel {
  background: var(--indigo-soft);
  border: 1px solid rgba(99,91,255,0.2);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  margin-block: var(--sp-4) var(--sp-3);
}
.c2pa-detected-panel strong {
  display: block;
  color: var(--indigo-text);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  margin-block-end: var(--sp-2);
}
.c2pa-detected-panel p {
  font-size: 0.92rem;
  color: var(--fg);
  line-height: 1.55;
  margin-block-end: var(--sp-2);
}
.c2pa-detected-meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
  margin-block: var(--sp-2);
}
.c2pa-detected-marker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--surface);
  color: var(--fg-muted);
  padding: 4px 10px;
  border-radius: var(--r-1);
  border: 1px solid var(--border-soft);
}
.c2pa-detected-verify {
  color: var(--indigo-text);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-block-end: 1px solid currentColor;
}
.c2pa-detected-verify:hover { color: var(--indigo); }
.c2pa-detected-foot {
  font-size: 0.8rem;
  color: var(--fg-subtle);
  line-height: 1.5;
  margin-block-start: var(--sp-2);
}

/* ========== GPS warning — Airbnb-pink-Akzent für höchste Privacy-Kritizität ========== */
.gps-warning {
  background: linear-gradient(180deg, var(--pink-soft), transparent 75%);
  border: 1px solid rgba(255,56,92,0.18);
  border-radius: var(--r-3);
  padding: var(--sp-5) var(--sp-6);
}
.gps-warning > strong {
  display: block; color: var(--pink); margin-block-end: var(--sp-2);
  font-size: 1.1rem; font-weight: 600;
  font-family: var(--font-display); letter-spacing: -0.01em;
}
.gps-coords {
  font-family: var(--font-mono);
  background: var(--surface);
  padding: 8px 14px;
  border-radius: var(--r-1);
  display: inline-block;
  margin: 8px 6px 0 0;
  font-size: 0.88rem;
  color: var(--fg-strong);
  box-shadow: var(--shadow-1);
}
.gps-nearest { margin-block-start: var(--sp-3); font-size: 0.94rem; color: var(--fg); }
.gps-threats {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid rgba(255,56,92,0.18);
}
.gps-threats strong { color: var(--pink); font-size: 0.9rem; font-weight: 600; }
.gps-threats ul { list-style: none; margin-block-start: var(--sp-2); }
.gps-threats li { padding: 5px 0 5px 24px; position: relative; font-size: 0.9rem; color: var(--fg-muted); }
.gps-threats li::before { content: '→'; position: absolute; left: 0; color: var(--pink); font-weight: 700; }
.gps-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-block-start: var(--sp-4); align-items: center; }
.gps-leak-hint { font-size: 0.78rem; color: var(--fg-subtle); }

.gps-map-cta {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
  font-size: 0.86rem;
  margin-block-start: var(--sp-3);
}
.gps-map-cta-text { color: var(--fg-muted); flex: 1; line-height: 1.5; }
.map-canvas {
  width: 100%;
  height: 360px;
  border-radius: var(--r-2);
  margin-block-start: var(--sp-3);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
}

/* ========== Tag-Filter (Punkt 6) ==========
 * Suchfeld direkt über den Tag-Kategorien. Wird nur gerendert wenn das
 * File ≥ 12 Tags hat. Live-Filter auf Tag-Name + -Wert. Esc leert.
 */
.tag-filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-2);
}
.tag-filter {
  flex: 1;
  min-width: 200px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 9px 14px;
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.tag-filter::placeholder { color: var(--fg-subtle); }
.tag-filter:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: var(--shadow-focus);
}
.tag-filter-hint {
  font-size: 0.82rem;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* ========== Categorised tag tables ==========
 *
 * Affordance-Design für „totale Trottel": die Kategorie-Header sollen
 * SOFORT als klick-/aufklappbar erkennbar sein — auch ohne Erklärung.
 * Drei verstärkende Signale, die zusammenwirken:
 *   1. Linker, indigo-gefärbter Streifen (Akzent-Strip) — signalisiert
 *      „eigenständiges, interaktives Element"
 *   2. Großer, runder Chevron-Chip rechts (statt winziges ▸ links) —
 *      Standard-Affordance aus Apple Settings / iOS-Listen
 *   3. „Ausklappen" / „Einklappen"-Mini-Label neben dem Chip, zusätzlich
 *      zum Pfeil — verbal eindeutig
 *   4. Subtiler Hover-Lift + sichtbarer Akzent-Streifen, um Klickbarkeit
 *      auf Touch-Devices kommunizieren (wo Hover fehlt)
 */
.meta-category {
  background: var(--surface);
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.meta-category:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}
.meta-category[open] {
  box-shadow: var(--shadow-2);
  border-color: rgba(99,91,255,0.22);
}
.meta-category-header {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 4px);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3);
  list-style: none;
  user-select: none;
  font-weight: 500;
  transition: background .12s;
  position: relative;
  /* Linker indigo-gefärbter Akzent-Streifen — "interaktives Panel" */
  border-inline-start: 4px solid transparent;
  margin-inline-start: -1px;
}
.meta-category-header:hover {
  background: var(--indigo-soft);
  border-inline-start-color: var(--indigo);
}
.meta-category[open] .meta-category-header {
  background: var(--indigo-soft);
  border-inline-start-color: var(--indigo);
  border-block-end: 1px solid rgba(99,91,255,0.18);
}
.meta-category-header::-webkit-details-marker { display: none; }
.meta-category-header::marker { display: none; content: ''; }
.meta-category-title {
  font-weight: 600; color: var(--fg-strong); font-size: 0.96rem; flex: 1;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.meta-category-count {
  background: var(--surface-soft);
  color: var(--fg-muted);
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}
/* Großer, runder Chevron-Chip LINKS — die DOMINIERENDE Affordance.
 * Apple/iOS-Settings-Stil: deutlicher Kreis statt winziges Unicode-▸.
 * Hover/Open: gleicher Indigo→Pink-Verlauf wie der "Privat"-Pill im
 * Hero und der aktive Skill-Switch (Einsteiger/Profi) — visueller
 * Anker zur Brand-Identitaet.
 * Position via flex-order: -1 → springt vor alle Geschwister.
 * Title nutzt margin-inline-end: auto, damit der Counter rechts bleibt. */
.meta-category-header::after {
  content: '';
  order: -1;
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--indigo-soft);
  border: 1.5px solid rgba(99,91,255,0.32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%234a40e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  transition: transform .25s var(--ease), background-color .15s var(--ease),
              background-image .15s var(--ease),
              border-color .15s var(--ease), box-shadow .15s var(--ease);
  box-shadow: 0 1px 2px rgba(99,91,255,0.18);
}
.meta-category-header:hover::after,
.meta-category[open] .meta-category-header::after {
  background: linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 12px, cover;
  border-color: var(--indigo);
  box-shadow: 0 3px 10px rgba(99,91,255,0.35), 0 4px 14px rgba(255,56,92,0.20);
}
.meta-category[open] .meta-category-header::after { transform: rotate(180deg); }
.meta-category-header:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
[dir="rtl"] .meta-category-header::after { transform: scaleX(-1); }
[dir="rtl"] .meta-category[open] .meta-category-header::after { transform: scaleX(-1) rotate(180deg); }
.meta-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; table-layout: auto; }
.meta-table tr { border-block-start: 1px solid var(--border-soft); transition: background .12s; }
.meta-table tr:first-child { border-block-start: 0; }
.meta-table tr:hover { background: var(--surface-soft); }
.meta-table td { padding: 11px var(--sp-5); vertical-align: top; }
/* Werte-Spalte darf bei langen URLs/Hashes brechen, aber NICHT mitten im
 * Wort — overflow-wrap: anywhere bricht nur, wenn sonst Overflow droht. */
.meta-table td + td { overflow-wrap: anywhere; word-break: break-word; }
/* Tag-Spalte: width: 1% + nowrap = Tabellen-Auto-Layout-Trick. Browser
 * macht die Spalte exakt so breit wie längster Tag-Name + Button braucht.
 * Werte-Spalte nimmt den Rest. So wird 'Software' nie gekürzt und 'Date
 * TimeOriginal' bekommt automatisch die nötige Breite. */
.meta-table td:first-child {
  width: 1%;
  white-space: nowrap;
  color: var(--fg-muted);
}
.tag-name {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--fg);
  vertical-align: middle;
}
.tag-explain-btn {
  vertical-align: middle;
  margin-inline-end: 8px;
}
/* Spacer für Tags ohne ?-Button, damit alle Tag-Namen vertikal bündig
 * starten (sonst beginnen explained Tags 30px weiter rechts) */
.tag-explain-spacer {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-inline-end: 8px;
  vertical-align: middle;
}
.tag-explain-btn {
  width: 22px; height: 22px;
  flex: 0 0 22px;          /* feste Größe, kein Schrumpfen → bleibt kreisrund */
  border: 1.5px solid rgba(99,91,255,0.32);
  background: var(--indigo-soft);
  color: var(--indigo-text);
  border-radius: 50%;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background .15s var(--ease), color .15s var(--ease),
              border-color .15s var(--ease), transform .12s var(--ease),
              box-shadow .15s var(--ease);
  box-shadow: 0 1px 2px rgba(99,91,255,0.18);
}
.tag-explain-btn:hover {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(99,91,255,0.40);
}
.tag-explain-btn:active { transform: scale(0.95); }
.tag-explain-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99,91,255,0.30); }

.meta-empty {
  background: var(--ok-bg);
  border-radius: var(--r-3);
  padding: var(--sp-5) var(--sp-6);
  font-size: 0.96rem;
  color: var(--ok);
  text-align: center;
  font-weight: 500;
  border: 1px solid rgba(31,138,76,0.20);
}

/* Strip preview — Card-Look wie meta-category, gleiche Affordance.
 * Dezenter (kleiner Chip), aber gleiches Pattern: Pfeil-Chip rechts +
 * "Ausklappen/Einklappen"-Mikro-Label, damit das Klick-Verhalten
 * auf der ganzen Card konsistent ist. */
.strip-preview {
  font-size: 0.88rem;
  background: var(--surface);
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.strip-preview:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.strip-preview[open] { border-color: rgba(99,91,255,0.22); }
.strip-preview summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--fg-strong);
  padding: 14px var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  transition: background .12s;
  font-size: 0.96rem;
  letter-spacing: -0.005em;
  border-inline-start: 4px solid transparent;
  margin-inline-start: -1px;
}
.strip-preview summary:hover {
  background: var(--indigo-soft);
  border-inline-start-color: var(--indigo);
}
.strip-preview[open] summary {
  background: var(--indigo-soft);
  border-inline-start-color: var(--indigo);
}
.strip-preview summary::-webkit-details-marker { display: none; }
.strip-preview summary::marker { display: none; content: ''; }
.strip-preview summary::after {
  content: '';
  order: -1;
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--indigo-soft);
  border: 1.5px solid rgba(99,91,255,0.32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%234a40e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  transition: transform .25s var(--ease), background-color .15s var(--ease),
              background-image .15s var(--ease),
              border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.strip-preview summary:hover::after,
.strip-preview[open] summary::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") center/10px no-repeat,
    linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  border-color: var(--indigo);
  box-shadow: 0 2px 8px rgba(99,91,255,0.32), 0 3px 10px rgba(255,56,92,0.18);
}
.strip-preview[open] summary::after { transform: rotate(180deg); }
[dir="rtl"] .strip-preview summary::after { transform: scaleX(-1); }
[dir="rtl"] .strip-preview[open] summary::after { transform: scaleX(-1) rotate(180deg); }
.strip-preview-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  margin-block-start: var(--sp-2);
  background: var(--surface-soft);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-muted);
}

.strip-options {
  display: flex; gap: var(--sp-5); flex-wrap: wrap;
  font-size: 0.92rem;
  padding: 6px 0;
}
.strip-options label { display: flex; align-items: center; gap: 10px; cursor: pointer; }

.card-profile {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  font-size: 0.9rem;
}
.card-profile label { color: var(--fg); font-weight: 500; }

.file-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
/* Primary-Strip-Knopf in der Card visuell hervorheben — er ist der
 * Ein-Klick-Download im Beginner-Modus und sollte klar dominant sein. */
.file-actions [data-strip="profile"] {
  background: linear-gradient(180deg, var(--indigo), var(--indigo-deep));
  color: #fff;
  border-color: var(--indigo-deep);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 6px 18px rgba(99,91,255,0.30);
}
.file-actions [data-strip="profile"]:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--indigo-deep), #3a31d0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 10px 28px rgba(99,91,255,0.40);
  transform: translateY(-1px);
  border-color: var(--indigo-deep);
}

.status-banner {
  background: var(--ok-bg);
  border-radius: var(--r-2);
  padding: 10px var(--sp-4);
  font-size: 0.92rem;
  color: var(--ok);
  font-weight: 500;
  border: 1px solid rgba(31,138,76,0.20);
}

/* Tag-Diff — gleiches Toggle-Pattern wie meta-category */
.tag-diff-panel {
  border-radius: var(--r-2);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.tag-diff-panel:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.tag-diff-panel[open] { border-color: rgba(99,91,255,0.22); }
.tag-diff-panel summary {
  padding: 14px var(--sp-5);
  cursor: pointer;
  display: flex; gap: var(--sp-3); align-items: center;
  list-style: none;
  font-size: 0.92rem;
  font-weight: 500;
  border-inline-start: 4px solid transparent;
  margin-inline-start: -1px;
  transition: background .12s;
}
.tag-diff-panel summary:hover {
  background: var(--indigo-soft);
  border-inline-start-color: var(--indigo);
}
.tag-diff-panel[open] summary {
  background: var(--indigo-soft);
  border-inline-start-color: var(--indigo);
  border-block-end: 1px solid rgba(99,91,255,0.18);
}
.tag-diff-panel summary::-webkit-details-marker { display: none; }
.tag-diff-panel summary::marker { display: none; content: ''; }
.tag-diff-panel summary::after {
  content: '';
  order: -1;
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--indigo-soft);
  border: 1.5px solid rgba(99,91,255,0.32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%234a40e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  transition: transform .25s var(--ease), background-color .15s var(--ease),
              background-image .15s var(--ease),
              border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.tag-diff-panel summary:hover::after,
.tag-diff-panel[open] summary::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") center/10px no-repeat,
    linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  border-color: var(--indigo);
  box-shadow: 0 2px 8px rgba(99,91,255,0.32), 0 3px 10px rgba(255,56,92,0.18);
}
.tag-diff-panel[open] summary::after { transform: rotate(180deg); }
[dir="rtl"] .tag-diff-panel summary::after { transform: scaleX(-1); }
[dir="rtl"] .tag-diff-panel[open] summary::after { transform: scaleX(-1) rotate(180deg); }
.diff-removed-count {
  background: var(--ok); color: #fff;
  padding: 3px 12px; border-radius: 999px; font-weight: 700;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.diff-kept-count {
  margin-inline-start: auto;
  background: var(--surface-soft);
  color: var(--fg-muted);
  padding: 3px 12px; border-radius: 999px; font-size: 0.78rem;
}
.diff-section { padding: var(--sp-3) var(--sp-5); }
.diff-section h4 { font-size: 0.84rem; color: var(--fg-muted); margin-block-end: var(--sp-2); font-weight: 600; }
.diff-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.diff-list-removed li {
  background: var(--ok-bg);
  border-radius: var(--r-1);
  padding: 5px 11px;
  color: var(--ok);
  text-decoration: line-through;
  text-decoration-color: rgba(31,138,76,0.4);
}
.diff-list-kept li {
  background: var(--surface-soft);
  border-radius: var(--r-1);
  padding: 5px 11px;
  color: var(--fg-muted);
}
.diff-warn { background: var(--warn-bg); }

/* ========== Hex viewer / CLI snippet / Timeline / Structure — gleicher Card-Look wie meta-category ==========
 * Identische Affordance: Indigo-Linker-Streifen + Pfeil-Chip rechts +
 * "Ausklappen/Einklappen"-Mikro-Label. So lernt der User EIN Pattern und
 * erkennt es auf der ganzen Seite wieder.
 *
 * struct-viewer war ursprünglich aus dieser Card-Look-Liste ausgenommen
 * (hatte nur die Pfeil-Chip + Marker-Selectors). Optisch sah er deshalb
 * "ohne Box" aus während Hex/CLI/Timeline/Forensik die saubere Card hatten.
 * Hier nachgezogen, damit Structure-Inspector wie File-Hashes etc. wirkt.
 */
.hex-viewer, .cli-hint, .timeline-panel, .struct-viewer, .forensics-card {
  background: var(--surface);
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.hex-viewer:hover, .cli-hint:hover, .timeline-panel:hover, .struct-viewer:hover, .forensics-card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}
.hex-viewer[open], .cli-hint[open], .timeline-panel[open], .struct-viewer[open], .forensics-card[open] {
  border-color: rgba(99,91,255,0.22);
}
.hex-viewer > summary,
.cli-hint > summary,
.timeline-panel > summary,
.struct-viewer > summary,
.forensics-card > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--fg-strong);
  padding: 14px var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  transition: background .12s;
  font-size: 0.96rem;
  letter-spacing: -0.005em;
  border-inline-start: 4px solid transparent;
  margin-inline-start: -1px;
}
.hex-viewer > summary:hover,
.cli-hint > summary:hover,
.timeline-panel > summary:hover,
.struct-viewer > summary:hover,
.forensics-card > summary:hover {
  background: var(--indigo-soft);
  border-inline-start-color: var(--indigo);
}
.hex-viewer[open] > summary,
.cli-hint[open] > summary,
.timeline-panel[open] > summary,
.struct-viewer[open] > summary,
.forensics-card[open] > summary {
  background: var(--indigo-soft);
  border-inline-start-color: var(--indigo);
  border-block-end: 1px solid rgba(99,91,255,0.18);
}
.hex-viewer > summary::-webkit-details-marker,
.cli-hint > summary::-webkit-details-marker,
.timeline-panel > summary::-webkit-details-marker,
.struct-viewer > summary::-webkit-details-marker,
.forensics-card > summary::-webkit-details-marker { display: none; }
.hex-viewer > summary::marker,
.cli-hint > summary::marker,
.timeline-panel > summary::marker,
.struct-viewer > summary::marker,
.forensics-card > summary::marker { display: none; content: ''; }
.hex-viewer > summary::after,
.cli-hint > summary::after,
.timeline-panel > summary::after,
.struct-viewer > summary::after,
.forensics-card > summary::after {
  content: '';
  order: -1;
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--indigo-soft);
  border: 1.5px solid rgba(99,91,255,0.32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%234a40e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  transition: transform .25s var(--ease), background-color .15s var(--ease),
              background-image .15s var(--ease),
              border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.hex-viewer > summary:hover::after,
.cli-hint > summary:hover::after,
.timeline-panel > summary:hover::after,
.struct-viewer > summary:hover::after,
.forensics-card > summary:hover::after,
.hex-viewer[open] > summary::after,
.cli-hint[open] > summary::after,
.timeline-panel[open] > summary::after,
.struct-viewer[open] > summary::after,
.forensics-card[open] > summary::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") center/10px no-repeat,
    linear-gradient(120deg, var(--indigo) 0%, var(--pink) 100%);
  border-color: var(--indigo);
  box-shadow: 0 2px 8px rgba(99,91,255,0.32), 0 3px 10px rgba(255,56,92,0.18);
}
.hex-viewer[open] > summary::after,
.cli-hint[open] > summary::after,
.timeline-panel[open] > summary::after,
.struct-viewer[open] > summary::after,
.forensics-card[open] > summary::after { transform: rotate(180deg); }
[dir="rtl"] .hex-viewer > summary::after,
[dir="rtl"] .cli-hint > summary::after,
[dir="rtl"] .timeline-panel > summary::after,
[dir="rtl"] .struct-viewer > summary::after,
[dir="rtl"] .forensics-card > summary::after { transform: scaleX(-1); }
[dir="rtl"] .hex-viewer[open] > summary::after,
[dir="rtl"] .cli-hint[open] > summary::after,
[dir="rtl"] .timeline-panel[open] > summary::after,
[dir="rtl"] .struct-viewer[open] > summary::after,
[dir="rtl"] .forensics-card[open] > summary::after { transform: scaleX(-1) rotate(180deg); }
/* Innerer Inhalt mit padding analog zu meta-category-Tabelle */
.hex-viewer > .hex-dump,
.hex-viewer > .hex-actions,
.cli-hint > .cli-help,
.cli-hint > .cli-snippet,
.cli-hint > [data-cli-copy],
.timeline-panel > .timeline-help { margin: 0 var(--sp-5) var(--sp-3); }
.hex-viewer > .hex-actions { margin-block-end: var(--sp-3); }
/* Copy-Button am unteren Rand der Card noch zusaetzlich Luft —
 * sonst klebt er am Card-Boden direkt unter dem Code-Block. */
.cli-hint > [data-cli-copy] { margin-block-end: var(--sp-4); }
.hex-source { color: var(--fg-subtle); font-size: 0.8rem; font-weight: 400; margin-inline-start: 6px; }
.hex-dump {
  background: var(--surface-code);
  color: #f4f5f8;
  padding: var(--sp-5);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.65;
  overflow-x: auto;
  margin-block-start: var(--sp-2);
  white-space: pre;
}
.hex-actions { display: flex; gap: 6px; margin-block-start: 8px; }
.cli-help, .timeline-help { font-size: 0.86rem; color: var(--fg-muted); margin: var(--sp-2) 0 var(--sp-3); }
.cli-snippet {
  background: var(--surface-code);
  color: #f4f5f8;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  overflow-x: auto;
  white-space: pre;
}

/* ========== Date timeline — horizontal scrollbar (Vergleich-Style) ========== */
.timeline-zoom {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 var(--sp-5) var(--sp-3);
  font-size: 0.86rem;
  color: var(--fg-muted);
}
.timeline-zoom-label { font-weight: 600; color: var(--fg); }
.timeline-zoom-slider {
  flex: 1;
  max-width: 320px;
  accent-color: var(--indigo);
  cursor: pointer;
}
.timeline-zoom-value {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--fg);
  min-width: 32px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 var(--sp-5) var(--sp-3);
  background: var(--surface-soft);
  border-radius: var(--r-2);
  /* Großzügiges horizontales Padding (70px) — gibt den Punkten 0%/100%
   * genug Atemluft, damit ihre 120px breiten Labels nicht halb außerhalb
   * der Card liegen. */
  padding: var(--sp-5) 70px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.timeline-scroll::-webkit-scrollbar { height: 8px; }
.timeline-scroll::-webkit-scrollbar-track { background: transparent; }
.timeline-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 4px;
}
.timeline-scroll::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
.timeline {
  list-style: none;
  position: relative;
  min-width: 900px;
  height: 200px;
}
/* Linie horizontal in der Mitte — Labels darüber + darunter alternierend */
.timeline::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100px;
  height: 2px;
  background: var(--border-strong);
  border-radius: 2px;
}
.timeline-point {
  position: absolute;
  left: var(--pos);
  top: 0;
  bottom: 0;
  width: 130px;
  transform: translateX(-50%);
  font-size: 0.76rem;
}
.timeline-dot {
  position: absolute;
  top: 94px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  background: var(--indigo);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--surface-soft), 0 2px 6px rgba(99,91,255,0.4);
  z-index: 2;
}
/* Label-Container: ungerade Punkte oben (above the line), gerade unten */
.timeline-label {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.timeline-point:nth-child(odd) .timeline-label  { bottom: 116px; }
.timeline-point:nth-child(even) .timeline-label { top: 116px; }
/* Konnektor-Strich vom Dot zum Label */
.timeline-label::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1.5px;
  height: 12px;
  background: var(--border-strong);
}
.timeline-point:nth-child(odd) .timeline-label::after  { bottom: -14px; }
.timeline-point:nth-child(even) .timeline-label::after { top: -14px; }
.timeline-label strong {
  display: block;
  color: var(--fg-strong);
  font-family: var(--font-text);
  font-weight: 600;
  margin-block-end: 3px;
  font-size: 0.8rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== Compare panel ========== */
.compare-panel {
  background: var(--surface);
  border-radius: var(--r-4);
  padding: var(--sp-6) var(--sp-7);
  margin-block-end: var(--sp-6);
  box-shadow: var(--shadow-card);
}
.compare-panel h3 { margin-block-end: var(--sp-2); font-family: var(--font-display); letter-spacing: -0.01em; font-size: 1.32rem; }
.compare-foot { font-size: 0.86rem; color: var(--fg-muted); margin-block-end: var(--sp-3); }
.compare-tabs {
  display: flex;
  gap: 2px;
  margin-block-end: var(--sp-4);
  background: var(--surface-soft);
  padding: 4px;
  border-radius: 999px;
  width: fit-content;
}
.compare-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 18px; font-size: 0.88rem; color: var(--fg-muted);
  border-radius: 999px;
  font-weight: 500;
  transition: all .15s var(--ease);
  font-family: inherit;
}
.compare-tab[aria-selected="true"] {
  color: var(--fg-strong);
  background: var(--surface);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.compare-wrap { overflow-x: auto; border-radius: var(--r-2); border: 1px solid var(--border-soft); }
.compare-files-table {
  width: 100%; border-collapse: collapse; font-size: 0.86rem;
}
.compare-files-table th, .compare-files-table td {
  padding: 10px 14px; border-block-start: 1px solid var(--border-soft);
  text-align: start; vertical-align: top;
}
.compare-files-table tr:first-child td, .compare-files-table tr:first-child th { border-block-start: 0; }
.compare-files-table th {
  background: var(--surface-soft);
  font-weight: 600;
  position: sticky; top: 0; z-index: 1;
}
.compare-files-table .cmp-same  { background: rgba(31,138,76,0.05); }
.compare-files-table .cmp-diff  { background: rgba(255,56,92,0.05); }
.compare-files-table .cmp-partial { background: rgba(217,119,6,0.05); }
.compare-files-table .cmp-missing { color: var(--fg-faint); text-align: center; }

.graph-panel {
  background: var(--surface-soft);
  border-radius: var(--r-3);
  padding: var(--sp-3);
  min-height: 400px;
}
.graph-svg { width: 100%; height: 380px; display: block; }
.graph-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: 0.82rem; color: var(--fg-muted); margin-block-start: var(--sp-2); }
.graph-legend span { display: flex; align-items: center; gap: 6px; }
.graph-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.graph-link { stroke: var(--border-strong); stroke-opacity: 0.5; }
.graph-node-img circle { fill: var(--indigo); stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.graph-node-val circle { fill: var(--surface); stroke: var(--indigo); stroke-width: 1.6; }
.graph-node text { font-size: 11px; fill: var(--fg); pointer-events: none; }

/* ========== Modal ========== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: var(--sp-5);
  animation: overlay-in .25s var(--ease);
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--r-4);
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: modal-in .3s var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  padding: var(--sp-5) var(--sp-6);
  border-block-end: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { font-size: 1.22rem; font-family: var(--font-display); letter-spacing: -0.012em; font-weight: 600; }
.modal-close {
  width: 36px; height: 36px; border: 0; background: transparent;
  font-size: 1.5rem; line-height: 1; color: var(--fg-muted);
  cursor: pointer; border-radius: 50%;
  transition: background .12s, color .12s;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--surface-soft); color: var(--fg); }
.modal-body { padding: var(--sp-6); overflow-y: auto; flex: 1; }
.modal-footer {
  padding: var(--sp-3) var(--sp-6);
  border-block-start: 1px solid var(--border-soft);
  display: flex; gap: var(--sp-2); justify-content: flex-end;
}
/* Dual-save variant: Cancel pinned left, Save and Save&Download right */
.modal-footer-dual {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
}
.modal-footer-dual .modal-footer-spacer { flex: 1 1 auto; }
@media (max-width: 600px) {
  .modal-footer-dual { gap: 6px; justify-content: space-between; }
  .modal-footer-dual .modal-footer-spacer { display: none; }
  .modal-footer-dual [data-modal-action="cancel"] {
    flex: 0 0 auto;
    font-size: 0.86rem;
  }
  .modal-footer-dual [data-modal-action="save"],
  .modal-footer-dual [data-modal-action="save-download"] {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    font-size: 0.86rem;
    padding: 10px 8px;
    white-space: normal;
    line-height: 1.2;
  }
}
@media (max-width: 380px) {
  /* Stack vertically on very narrow screens; download primary first */
  .modal-footer-dual { flex-direction: column; align-items: stretch; }
  .modal-footer-dual [data-modal-action="cancel"] { order: 99; }
  .modal-footer-dual [data-modal-action="save-download"] { order: 1; }
  .modal-footer-dual [data-modal-action="save"] { order: 2; }
  .modal-footer-dual .btn { width: 100%; }
}

/* Edit-History panel per card. Hidden in beginner mode via data-advanced.
 * Beginner-mode CSS uses [data-advanced] { display: none } for all advanced
 * features — applied here as well so the card stays clean for beginners. */
body:not([data-skill-mode="advanced"]) .edit-history-panel[data-advanced] {
  display: none;
}
.edit-history-panel {
  margin-block-start: var(--sp-3);
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-1);
  background: var(--surface);
  font-size: 0.86rem;
}
.edit-history-panel summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 500;
  color: var(--fg);
  list-style: none;
}
.edit-history-panel summary::-webkit-details-marker { display: none; }
.edit-history-panel summary::before {
  content: '▸';
  display: inline-block;
  margin-inline-end: 8px;
  transition: transform .15s;
  color: var(--fg-muted);
}
.edit-history-panel[open] summary::before { transform: rotate(90deg); }
.history-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-block-end: 1px dashed var(--border-soft);
}
.history-item:last-child { border-block-end: none; }
.history-step {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-faint);
  min-width: 22px;
}
.history-label { flex: 1; color: var(--fg); }
.faq-search-empty {
  padding: 16px 20px;
  margin-block-end: var(--sp-3);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-1);
  color: var(--fg-muted);
  font-size: 0.92rem;
}
.history-ts {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-faint);
}
.history-undo {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 0.8rem;
}

/* FAQ search */
.faq-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-3);
}
.faq-search-input {
  flex: 1 1 auto;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 11px 14px;
  font-size: 0.96rem;
  font-family: inherit;
}
.faq-search-input:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--indigo);
}
.faq-search-count {
  font-size: 0.86rem;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* Field explain button (IPTC/XMP inline tooltip) */
.field-explain-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-inline-start: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: help;
  vertical-align: 1px;
  line-height: 1;
}
.field-explain-btn:hover {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
}

/* Template scope picker */
.inject-tpl-scope {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 7px 10px;
  font-size: 0.84rem;
  margin-inline-end: 6px;
}

/* Per-card "Download edited file" button — most prominent in file-actions */
.btn-download-edited {
  background: linear-gradient(135deg, #2ec27e, #1e9b66);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(46,194,126,0.3);
}
.btn-download-edited:hover {
  background: linear-gradient(135deg, #34d287, #22a973);
  box-shadow: 0 2px 6px rgba(46,194,126,0.4);
}
.btn-download-edited:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46,194,126,0.35);
}
/* Map-Consent-Dialog — nutzt das Standard-Modal, plus zwei spezifische
 * Inhalts-Klassen für die Privacy-Erklärung. */
.mapconsent-body {
  font-size: 1rem; color: var(--fg); line-height: 1.55;
  margin-block-end: var(--sp-4);
}
.mapconsent-detail {
  list-style: none;
  background: var(--surface-soft);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5);
  font-size: 0.92rem;
  color: var(--fg-muted);
  line-height: 1.55;
  margin-block-end: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}
.mapconsent-detail code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--fg-strong);
}
.editor-help, .editor-tip { font-size: 0.94rem; color: var(--fg-muted); line-height: 1.6; }
.editor-tip { margin-block-start: var(--sp-4); }
/* ============================================================
 *  Pixel-Forensik-Card (JPEG only, Skill=Profi)
 *  Quality-Estimator + Error-Level-Analysis (ELA) Visualisierung.
 * ============================================================ */
.forensics-card .forensics-title {
  font-family: var(--font-display);
}
/* "Profi"-Badge fuer alle Reiter, die nur im Profi-Mode sichtbar sind:
 * forensics-card, hex-viewer, cli-hint, timeline-panel, strip-preview.
 * Indigo-Pill, kein Emoji, kompakt — visueller Anker dass man sich
 * gerade im "Profi-Bereich" befindet. */
.pro-badge,
.forensics-card .forensics-badge {
  margin-inline-start: 12px;  /* >8px damit der Badge auch nach langen
                                Texten nicht direkt am Vortext klebt */
  background: var(--indigo-soft);
  color: var(--indigo-text);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
/* CJK: kein letter-spacing — Apple-typografische Tightness ist fuer
 * lateinische Schriften gedacht, weitet bei JA/ZH/KO Glyphen unsauber.
 * Plus: padding-block auf 3px (statt 2px) — CJK-Glyphen sind hoeher
 * als lateinische bei gleicher font-size, sonst druecken プロ/专业/프로
 * den Badge nach oben/unten. */
:lang(ja) .pro-badge, :lang(zh) .pro-badge, :lang(ko) .pro-badge {
  letter-spacing: 0;
  padding: 4px 10px;  /* etwas mehr Atem für CJK-Glyphen */
}
/* flex-wrap fuer Profi-Reiter-Summaries — bei sehr schmalen Cards
 * (320px Mobile + langem Lokal-Text) bricht der Badge sonst optisch
 * unsauber um. Mit wrap landet er sauber in einer eigenen Zeile. */
.strip-preview > summary,
.timeline-panel > summary,
.hex-viewer > summary,
.cli-hint > summary,
.forensics-card > summary {
  flex-wrap: wrap;
  row-gap: var(--sp-2);
}
.forensics-card .forensics-help {
  padding: 0 var(--sp-5) var(--sp-3);
  color: var(--fg-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.forensics-q {
  margin: 0 var(--sp-5) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-soft);
  border-radius: var(--r-2);
  border-inline-start: 4px solid var(--indigo);
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--sp-3);
  align-items: center;
}
.forensics-q-label {
  font-size: 0.84rem;
  color: var(--fg-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.forensics-q-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.forensics-q-hint {
  font-size: 0.88rem;
  color: var(--fg-muted);
  line-height: 1.45;
}
/* Q-Stufen-Farben analog zur Risk-Score-Ampel (green/lime/amber/red),
 * damit der User KEIN zweites Farb-Vokabular lernen muss. high=ok-grün,
 * medium=ok-grün (Web-Export ist unverdaechtig), low=amber, verylow=rot. */
.forensics-q-high   { border-inline-start-color: var(--ok); }
.forensics-q-high   .forensics-q-value { color: var(--ok); }
.forensics-q-medium { border-inline-start-color: var(--ok); }
.forensics-q-medium .forensics-q-value { color: var(--ok); }
.forensics-q-low    { border-inline-start-color: var(--warn); }
.forensics-q-low    .forensics-q-value { color: var(--warn); }
.forensics-q-verylow { border-inline-start-color: var(--danger); }
.forensics-q-verylow .forensics-q-value { color: var(--danger); }
.forensics-ela {
  padding: 0 var(--sp-5) var(--sp-5);
}
.forensics-ela-head { margin-block-end: var(--sp-3); }
.forensics-ela-head strong {
  display: block;
  color: var(--fg-strong);
  font-family: var(--font-display);
  font-size: 1rem;
  margin-block-end: 4px;
}
.forensics-ela-help {
  font-size: 0.88rem;
  color: var(--fg-muted);
  line-height: 1.5;
}
.forensics-ela-result { margin-block-start: var(--sp-3); }
.forensics-ela-img {
  width: 100%;
  max-width: 100%;
  /* Höhen-Cap konsistent mit Ghost/Copy-Move/Pixel-Heatmaps — sonst
   * werden 1600px-breite ELA-Heatmaps auf Tablet-Querformat unangenehm
   * lang. Lightbox mit Pinch-Zoom ist eh die korrekte Detail-Ansicht. */
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-2);
  background: #000;
  box-shadow: var(--shadow-2);
  display: block;
}
.forensics-ela-foot {
  margin-block-start: var(--sp-2);
  color: var(--fg-subtle);
  font-size: 0.8rem;
}
/* ELA-Legende: zwei Farb-Swatches mit Beschreibung. Hilft Anfaenger
 * zu verstehen, was hell vs. dunkel im ELA-Bild bedeutet. */
.forensics-ela-legend {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: var(--sp-2) var(--sp-3);
  margin-block-start: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-soft);
  border-radius: var(--r-2);
  font-size: 0.86rem;
  color: var(--fg);
  align-items: center;
}
.forensics-ela-swatch {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
}
.swatch-dark   { background: #0a0a14; }
.swatch-bright { background: linear-gradient(135deg, #ff80a8 0%, #fff5b3 100%); }
.forensics-ela-disclaimer,
.forensics-ela-browserhint {
  margin-block-start: var(--sp-2);
  color: var(--fg-subtle);
  font-size: 0.78rem;
  font-style: italic;
}
.forensics-ela-browserhint { font-style: normal; opacity: 0.85; }
/* Touch-Hint unter dem ELA-Bild — Cursor-Hint funktioniert auf Touch
 * nicht, also explizit als Text. Klein und dezent. */
.forensics-ela-tap-hint {
  margin-block-start: var(--sp-2);
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.84rem;
}
@media (max-width: 480px) {
  .forensics-ela-legend { grid-template-columns: auto 1fr; }
}
@media (max-width: 720px) {
  .forensics-q { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* Image-Lightbox fuer ELA-Result (oder andere Bilder). Auf Mobile
 * loest das das Problem, dass ein 1600px ELA-Bild auf 320px
 * unlesbaren Briefmarken-Pixelbrei wird — Pinch-Zoom + Pan via
 * touch-action und browser-default. */
.image-lightbox {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
.image-lightbox-pan {
  width: 100%; height: 100%;
  overflow: auto;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}
.image-lightbox-img {
  /* Zeige Original-Pixel-1:1 (kein Down-Sampling) — User scrollt
   * dann im Container, oder pinch-zoomed ins Detail. */
  max-width: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
  image-rendering: pixelated;  /* ELA-Pixel-Detail erhalten */
}
.image-lightbox-close {
  position: fixed; top: 12px; right: 12px;
  width: 44px; height: 44px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  z-index: 1501;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), transform .12s var(--ease);
}
.image-lightbox-close:hover {
  background: rgba(0,0,0,0.8);
  transform: scale(1.08);
}
.image-lightbox-close:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}
/* ELA-Bild im Card — Cursor-Hint dass es klickbar ist */
.forensics-ela-img { cursor: zoom-in; }

/* MakerNote-Verlustwarnung in Edit/Spoof-Modal — orange Hint-Box */
.warn-makernote {
  background: var(--warn-bg);
  border: 1px solid rgba(180,83,9,0.25);
  border-radius: var(--r-2);
  color: var(--warn);
  padding: 10px var(--sp-4);
  margin-block-end: var(--sp-4);
  font-size: 0.88rem;
  line-height: 1.5;
}
.editor-form { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-4); }
.editor-row {
  display: grid; grid-template-columns: 220px 1fr;
  gap: var(--sp-3); align-items: center;
}
.editor-row label { font-size: 0.92rem; color: var(--fg); font-weight: 500; }
.editor-row label small { color: var(--fg-subtle); font-family: var(--font-mono); font-weight: 400; }
.editor-row input, .editor-row select, .editor-row textarea, .editor-search {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 11px 14px;
  font-size: 0.94rem;
  font-family: inherit;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.editor-row textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.45;
}
.editor-row input:focus, .editor-row select:focus, .editor-row textarea:focus, .editor-search:focus {
  outline: none; box-shadow: var(--shadow-focus); border-color: var(--indigo);
}
.editor-search { margin-block-end: var(--sp-3); font-size: 1rem; padding: 12px 18px; }
.editor-pagination {
  display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between;
  margin-block-start: var(--sp-3); font-size: 0.88rem; color: var(--fg-muted);
}

/* ========== Injection Suite (v3.0) — Tabbed Editor + Bulk + Shift + Spoof-Map ========== */
.inject-toolbar {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-block-end: var(--sp-4);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--border-soft);
}
.inject-tabs {
  display: flex; gap: 4px;
  background: var(--surface-2, #f5f5f7);
  padding: 4px;
  border-radius: var(--r-1);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.inject-tab {
  flex: 1 1 auto;
  min-width: 80px;
  min-height: 44px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  font: inherit; font-weight: 500; font-size: 0.94rem;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.inject-tab:hover { color: var(--fg); background: rgba(0,0,0,0.04); }
.inject-tab.active {
  background: var(--bg, #fff);
  color: var(--indigo);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px var(--border);
  font-weight: 600;
}
.inject-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.inject-template-row {
  display: flex; gap: var(--sp-2); align-items: center;
  flex-wrap: wrap;
  padding-block-start: var(--sp-2);
}
.inject-template-row select {
  flex: 1 1 200px; min-width: 0;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--r-1);
  padding: 9px 12px; font-size: 0.92rem;
}
.inject-template-row .btn { flex: 0 0 auto; }
.inject-tpl-import-lbl {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 14px; font-size: 0.88rem;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--r-1);
  cursor: pointer;
  font-weight: 500;
  transition: background .15s;
}
.inject-tpl-import-lbl:hover { background: var(--surface-hover, #f0f0f3); }

.inject-source-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 0.78rem;
  background: rgba(99, 91, 255, 0.08);
  color: var(--indigo);
  border-radius: 999px;
  font-weight: 500;
}

/* Bulk-Edit + Date-Shift target-file pickers */
.bulk-file-list-details {
  margin-block: var(--sp-3);
  border: 1px solid var(--border-soft); border-radius: var(--r-1);
  background: var(--surface);
}
.bulk-file-list-details summary {
  padding: 11px var(--sp-4);
  cursor: pointer;
  font-weight: 500; font-size: 0.92rem;
  color: var(--fg);
  list-style: none;
}
.bulk-file-list-details summary::-webkit-details-marker { display: none; }
.bulk-file-list-details summary::before {
  content: '▸'; margin-inline-end: 8px;
  display: inline-block;
  transition: transform .15s;
}
.bulk-file-list-details[open] summary::before { transform: rotate(90deg); }
.bulk-file-list {
  padding: 0 var(--sp-4) var(--sp-3);
  max-height: 240px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 4px;
}
.bulk-file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--fg);
  cursor: pointer;
  transition: background .15s;
}
.bulk-file-item:hover { background: rgba(0,0,0,0.03); }
.bulk-file-item input[type=checkbox] { flex: 0 0 auto; cursor: pointer; }
.bulk-file-item small { color: var(--fg-faint); margin-inline-start: auto; font-family: var(--font-mono); font-size: 0.78rem; }

/* Date-Shift preview + presets */
.shift-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-block-end: var(--sp-3);
}
.shift-preset-btn {
  padding: 6px 14px;
  font-size: 0.86rem; font-weight: 500;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.shift-preset-btn:hover { background: rgba(99,91,255,0.08); border-color: var(--indigo); color: var(--indigo); }
.shift-preview {
  margin-block-start: var(--sp-3);
  padding: 12px 16px;
  background: rgba(99,91,255,0.06);
  border-radius: var(--r-1);
  font-size: 0.86rem;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  line-height: 1.5;
}
.shift-preview .arrow { color: var(--indigo); margin-inline: 6px; font-weight: bold; }
.shift-preview .old { text-decoration: line-through; color: var(--fg-faint); }

/* GPS-Spoof map CTA + canvas */
.spoof-map-cta {
  margin-block: var(--sp-3);
  padding: 12px 16px;
  background: rgba(255,180,80,0.06);
  border: 1px solid rgba(255,180,80,0.25);
  border-radius: var(--r-1);
  display: flex; flex-direction: column; gap: 8px;
}
.spoof-map-cta-text { font-size: 0.86rem; color: var(--fg-muted); line-height: 1.5; }
.spoof-map-canvas {
  height: 320px;
  margin-block: var(--sp-3);
  border-radius: var(--r-1);
  overflow: hidden;
  border: 1px solid var(--border);
}
.spoof-map-nearest {
  margin-block-start: -8px;
  margin-block-end: var(--sp-3);
  font-size: 0.86rem;
  color: var(--fg-muted);
}
.spoof-map-nearest strong { color: var(--fg); }

/* Bulk-button counter badge */
.bulk-count-badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Pro-badge in modal header */
.modal-pro-badge {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 8px;
  background: rgba(99,91,255,0.12);
  color: var(--indigo);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* warn-makernote was already used elsewhere — fallback rule if missing */
.warn-makernote {
  font-size: 0.84rem;
  color: #c47100;
  background: rgba(255,180,80,0.06);
  border-block-start: 1px solid rgba(255,180,80,0.18);
  border-block-end: 1px solid rgba(255,180,80,0.18);
  padding: 8px var(--sp-4);
  margin: var(--sp-2) calc(-1 * var(--sp-6));
  line-height: 1.4;
}

/* Toast / inline status bar for prompt() replacement */
.inline-prompt {
  position: fixed; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  padding: var(--sp-5) var(--sp-6);
  width: min(90vw, 420px);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.inline-prompt label { font-size: 0.96rem; font-weight: 600; color: var(--fg); }
.inline-prompt input {
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--r-1);
  padding: 11px 14px; font-size: 0.96rem;
}
.inline-prompt-buttons { display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* Mobile tweaks for new modal content */
@media (max-width: 720px) {
  .inject-tabs { padding: 3px; }
  .inject-tab { padding: 10px 12px; font-size: 0.86rem; min-width: 60px; }
  .inject-template-row { gap: 6px; }
  .inject-template-row select { flex: 1 1 100%; }
  .inject-template-row .btn,
  .inject-tpl-import-lbl { flex: 1 1 auto; min-width: 0; text-align: center; }
  .spoof-map-canvas { height: 260px; }
  .bulk-file-list { max-height: 200px; }
  .editor-row { grid-template-columns: 1fr; gap: 4px; }
  .editor-row label { margin-block-end: 2px; }
  .shift-presets { gap: 4px; }
  .shift-preset-btn { padding: 6px 10px; font-size: 0.8rem; }
}

/* ========== Footer — Apple-Stil reduziert ========== */
footer {
  margin-block-start: var(--sp-11);
  padding-block: var(--sp-7);
  border-block-start: 1px solid var(--border-soft);
  text-align: center;
  font-size: 0.86rem;
  color: var(--fg-muted);
}
.footer-links { margin-block-start: var(--sp-3); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.footer-sep { color: var(--fg-faint); }

/* ========== SEO content sections ========== */
.content-section {
  margin-block-start: var(--sp-10);
  display: grid;
  gap: var(--sp-9);
  /* CSS-Grid setzt auf seine Items per Default min-width:auto = min-content.
   * Wenn ein Item (z.B. .content-card mit Compare-Tabelle drin) eine
   * min-content-Breite > Viewport hat, expandiert der Grid-Track auf
   * diese min-content statt auf die verfügbare Spalten-Breite.
   * Resultat auf Mobile: doc.scrollWidth = 815 bei 390px Viewport,
   * Mobile-Browser zoomen die ganze Seite aus → wirkt "nicht responsive".
   *
   * Fix: explicit 1-Spalten-Track mit `minmax(0, 1fr)`. Default-`auto`-
   * Track expandiert auf max-content der Items; minmax(0, 1fr) klemmt
   * den Track auf die Container-Breite und respektiert min-width:0 der
   * Items. Damit greift overflow:auto auf inneren Container (compare-
   * wrap) und Tabelle wird horizontal-scrollable statt Layout zu sprengen.
   */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.content-section > * { min-width: 0; }
.content-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  /* width:100% klemmt die Card explizit auf den Grid-Track. Ohne das
   * nimmt sie default `width: auto` = max-content of children, was bei
   * der Compare-Card (mit Tabelle drin, min-content 789px) den Track
   * sprengt — selbst mit min-width:0 und minmax(0,1fr) greift CSS-Grid
   * den intrinsic-content-Hint. width:100% ueberschreibt das hard. */
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  min-width: 0;
}
/* compare-wrap nutzt overflow-x:auto fuer horizontal-scrollbare Tabelle —
 * dafuer muss sie selber min-width:0 + explicit width:100% haben.
 * Ohne width:100% nimmt die Box default `width: auto` = Tabellen-min-content,
 * also wird compare-wrap selbst 789px breit (= Inhalts-Tabelle), pusht die
 * .content-card auf 815, sprengt das Grid trotz minmax(0,1fr) und klemmt
 * den ganzen Layout. Mit width:100% wird sie auf Parent-Breite gefasst,
 * Tabelle scrollt INTERN horizontal. */
.compare-wrap { min-width: 0; width: 100%; max-width: 100%; }
.content-card.highlight-card {
  background: var(--surface);
  border-radius: var(--r-5);
  padding: var(--sp-9) var(--sp-9);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.content-card.highlight-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  background:
    radial-gradient(circle at 80% 50%, rgba(99,91,255,0.10), transparent 70%);
  pointer-events: none;
}

/* Mobile: SEO-Content-Cards passen sonst nicht in den knappen Viewport.
 * .highlight-card hat 64px Padding und einen 50%-breiten Gradient-
 * Pseudo-Stripe, der auf Mobile den Text überlagern kann. Plus die
 * Listen-Einrückung (margin-left) macht Text in Hochformat unleserlich.
 */
@media (max-width: 720px) {
  .content-section { gap: var(--sp-7); margin-block-start: var(--sp-7); }
  .content-card.highlight-card {
    padding: var(--sp-6) var(--sp-5);
    border-radius: var(--r-3);
  }
  .content-card.highlight-card::before {
    /* Gradient bleibt als dezenter Akzent, aber nur über die obere
     * Hälfte gespannt — kein 50%-Vertical-Stripe der den Fließtext
     * überlagert. */
    width: 100%; height: 40%; bottom: auto;
  }
  .content-card ul, .content-card ol {
    margin-inline-start: var(--sp-4);
  }
}
@media (max-width: 480px) {
  .content-card.highlight-card { padding: var(--sp-5) var(--sp-4); }
  .content-card ul, .content-card ol {
    margin-inline-start: var(--sp-3);
    padding-inline-start: 0;
  }
  .content-card li { font-size: 0.94rem; }
  .content-card p { font-size: 0.96rem; }
}
.content-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fg-strong);
  margin-block-end: var(--sp-4);
}
.content-card p {
  color: var(--fg-muted);
  margin-block-end: var(--sp-3);
  line-height: 1.7;
  font-size: 1.04rem;
}
.content-card p strong { color: var(--fg-strong); font-weight: 600; }
.content-card ul, .content-card ol { margin: var(--sp-3) 0 var(--sp-5) var(--sp-5); }
.content-card li { color: var(--fg-muted); line-height: 1.7; margin-block-end: var(--sp-2); font-size: 1rem; }
.content-card li strong { color: var(--fg-strong); font-weight: 600; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-3);
}
.feature {
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--sp-5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: var(--shadow-card);
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.feature strong { display: block; color: var(--fg-strong); margin-block-end: 6px; font-size: 1rem; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.005em; }
.feature span { color: var(--fg-muted); font-size: 0.92rem; line-height: 1.6; }

.howto-steps { padding-inline-start: var(--sp-5); }
.howto-steps li { margin-block-end: var(--sp-3); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-block-start: var(--sp-3); }
.compare-table th, .compare-table td { padding: 11px 14px; border-block-end: 1px solid var(--border-soft); text-align: start; }
/* Sticky header so spalten-zuordnung bei 50+ rows nicht verloren geht */
.compare-table th {
  background: var(--surface-soft);
  font-weight: 600;
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--border);
}
.compare-table .yes { color: var(--ok); font-weight: 600; }
.compare-table .no  { color: var(--pink); font-weight: 600; }
.compare-legend { font-size: 0.86rem; color: var(--fg-muted); }

.faq-list { width: 100%; }
.faq-list details {
  background: var(--surface);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5);
  margin-block-end: 8px;
  transition: box-shadow .15s;
  box-shadow: var(--shadow-card);
  /* Breite einfrieren: mit padding + box-sizing immer exakt 100% des Parents,
   * unabhaengig von Open/Hover. Vorher fuehrte transform translateY(-1px)
   * + erhoehter Schatten dazu, dass die Box beim Aufklappen "breiter"
   * wirkte — visuell und beim Hover-Lift auch positionsversetzt. */
  width: 100%;
  box-sizing: border-box;
}
.faq-list details:hover { box-shadow: var(--shadow-card-hover); }
.faq-list details[open] { box-shadow: var(--shadow-card-hover); }
.faq-list summary { cursor: pointer; font-weight: 500; color: var(--fg-strong); list-style: none; font-size: 1rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: '+'; color: var(--indigo-text); font-weight: 700; margin-inline-end: 10px; font-size: 1.2em; }
.faq-list details[open] summary::before { content: '−'; }
.faq-list p { margin-block-start: var(--sp-3); font-size: 0.94rem; line-height: 1.7; }
.feature-list { list-style: none; padding: 0; }
.feature-list li { padding: 6px 0 6px 28px; position: relative; }
.feature-list li::before { content: '✓'; position: absolute; left: 0; top: 6px; color: var(--ok); font-weight: 700; }
.trust-list { list-style: none; padding: 0; margin-block: var(--sp-4); display: grid; gap: 8px; }
.trust-list li { padding: 10px 16px; background: var(--surface-soft); border-radius: var(--r-2); font-size: 0.94rem; }

/* ============================================================
 * Forensik-Beginner-Disclosure — Stripe-style flat reveal.
 * Keine Box. Kein Background. Nur ein dezenter Text-Link mit
 * Chevron, der beim Öffnen um 90° rotiert. Geöffneter Content
 * sitzt in einem leicht eingerückten Block mit Hairline links.
 * ============================================================ */
.forensics-beginner {
  margin-block: var(--sp-3) var(--sp-4);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.forensics-beginner > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--indigo-text);
  letter-spacing: -0.005em;
  user-select: none;
  transition: color .15s var(--ease);
  border-radius: 4px;
  outline-offset: 2px;
}
.forensics-beginner > summary::-webkit-details-marker { display: none; }
.forensics-beginner > summary::marker { display: none; content: ''; }
.forensics-beginner > summary::before {
  /* Stripe-Chevron via SVG-mask, rotiert beim Öffnen 90° */
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  transition: transform .2s var(--ease);
  flex-shrink: 0;
}
[dir="rtl"] .forensics-beginner > summary::before { transform: scaleX(-1); }
.forensics-beginner[open] > summary::before { transform: rotate(90deg); }
[dir="rtl"] .forensics-beginner[open] > summary::before { transform: rotate(90deg) scaleX(-1); }

.forensics-beginner > summary:hover { color: var(--indigo-deep, var(--indigo)); }
.forensics-beginner > summary:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

.forensics-beginner-body {
  margin: var(--sp-3) 0 var(--sp-2) 14px;
  padding-inline-start: var(--sp-4);
  border-inline-start: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--fg-muted);
}
.forensics-beginner-body p {
  margin: 0;
  padding-block: 6px;
}
.forensics-beginner-body p + p {
  border-block-start: 1px dashed var(--border);
  padding-block-start: 10px;
  margin-block-start: 4px;
}
.forensics-beginner-body p strong {
  display: inline-block;
  min-width: 8.5em;
  color: var(--fg-strong);
  font-weight: 600;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-inline-end: 6px;
}
@media (max-width: 600px) {
  .forensics-beginner-body p strong {
    display: block;
    min-width: 0;
    margin: 0 0 2px;
    font-size: 0.76rem;
  }
}

/* Animations-Reveal beim Öffnen — sehr Stripe */
@keyframes beginnerReveal {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.forensics-beginner[open] > .forensics-beginner-body {
  animation: beginnerReveal .22s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .forensics-beginner[open] > .forensics-beginner-body { animation: none; }
}

/* ============================================================
 * Audience-Card — 6 Zielgruppen im Stripe-Premium-Design.
 * Verlaufs-Akzente passend zum Brand-Logo (indigo→pink, 135deg)
 * mit Variationen pro Gruppe. SVG-Icons in Verlaufs-Boxen.
 * Hover-Lift mit Gradient-Glow, Top-Strip animiert.
 * ============================================================ */
.audience-card {
  position: relative;
  overflow: hidden;
}
.audience-lead {
  font-size: 1.06rem;
  color: var(--fg-muted);
  max-width: 720px;
  margin-block-end: var(--sp-6);
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin-block: var(--sp-5);
}
@media (min-width: 900px) {
  .audience-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
}

.audience-item {
  --grad: linear-gradient(135deg, var(--indigo) 0%, var(--pink) 100%);
  --grad-soft: linear-gradient(135deg, rgba(99,91,255,0.10) 0%, rgba(255,56,92,0.08) 100%);
  --grad-glow: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,91,255,0.18), transparent 70%);
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-card);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
  isolation: isolate;
}
/* Top-Strip in Verlauf — Stripe-typisch */
.audience-item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad);
  border-radius: var(--r-3) var(--r-3) 0 0;
  opacity: 0.85;
  transition: opacity .3s var(--ease), height .3s var(--ease);
  z-index: 1;
}
/* Subtiler Glow im Hintergrund — beim Hover heller */
.audience-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-glow);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.audience-item > * { position: relative; z-index: 2; }

.audience-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
  border-color: transparent;
}
.audience-item:hover::before { height: 4px; opacity: 1; }
.audience-item:hover::after { opacity: 1; }
@media (hover: none) {
  .audience-item:hover { box-shadow: var(--shadow-card); transform: none; }
  .audience-item:hover::before { height: 3px; }
  .audience-item:hover::after { opacity: 0; }
}

/* Icon-Box mit Verlaufs-Hintergrund */
.audience-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  background: var(--grad);
  color: #fff;
  margin-block-end: var(--sp-4);
  box-shadow: 0 6px 16px rgba(99,91,255,0.22), 0 1px 2px rgba(0,0,0,0.04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.audience-item:hover .audience-icon {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 10px 24px rgba(99,91,255,0.32), 0 2px 4px rgba(0,0,0,0.06);
}
.audience-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.audience-item h3 {
  margin: 0 0 var(--sp-3);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.audience-item p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--fg-muted);
}

/* Verlaufs-Variationen pro Karte (Logo-Indigo+Pink + 4 Geschwister)
 * Stripe nutzt eine ähnliche „Family of gradients"-Strategie. */
.audience-item[data-grad="g1"] {
  --grad: linear-gradient(135deg, #635bff 0%, #ff385c 100%);
  --grad-glow: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,91,255,0.20), transparent 70%);
}
.audience-item[data-grad="g2"] {
  --grad: linear-gradient(135deg, #14a47b 0%, #635bff 100%);
  --grad-glow: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(20,164,123,0.18), transparent 70%);
}
.audience-item[data-grad="g3"] {
  --grad: linear-gradient(135deg, #ff385c 0%, #ff8a00 100%);
  --grad-glow: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,56,92,0.18), transparent 70%);
}
.audience-item[data-grad="g4"] {
  --grad: linear-gradient(135deg, #635bff 0%, #14a47b 100%);
  --grad-glow: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,91,255,0.18), transparent 70%);
}
.audience-item[data-grad="g5"] {
  --grad: linear-gradient(135deg, #ff8a00 0%, #ff385c 100%);
  --grad-glow: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,138,0,0.16), transparent 70%);
}
.audience-item[data-grad="g6"] {
  --grad: linear-gradient(135deg, #ff385c 0%, #635bff 100%);
  --grad-glow: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,56,92,0.18), transparent 70%);
}
.audience-item[data-grad="g2"] .audience-icon { box-shadow: 0 6px 16px rgba(20,164,123,0.24), 0 1px 2px rgba(0,0,0,0.04); }
.audience-item[data-grad="g3"] .audience-icon { box-shadow: 0 6px 16px rgba(255,56,92,0.24), 0 1px 2px rgba(0,0,0,0.04); }
.audience-item[data-grad="g4"] .audience-icon { box-shadow: 0 6px 16px rgba(99,91,255,0.24), 0 1px 2px rgba(0,0,0,0.04); }
.audience-item[data-grad="g5"] .audience-icon { box-shadow: 0 6px 16px rgba(255,138,0,0.24), 0 1px 2px rgba(0,0,0,0.04); }
.audience-item[data-grad="g6"] .audience-icon { box-shadow: 0 6px 16px rgba(255,56,92,0.24), 0 1px 2px rgba(0,0,0,0.04); }

/* Closing-Statement: full-width Verlaufs-Banner */
.audience-out {
  position: relative;
  margin-block-start: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: linear-gradient(135deg, rgba(99,91,255,0.08) 0%, rgba(255,56,92,0.06) 100%);
  border: 1px solid rgba(99,91,255,0.14);
  border-radius: var(--r-3);
  font-size: 1rem;
  color: var(--fg);
  line-height: 1.65;
  overflow: hidden;
}
.audience-out::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--indigo), var(--pink));
}

/* Mobile: tighter padding, etwas kleinere Icon-Box */
@media (max-width: 600px) {
  .audience-item { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .audience-icon { width: 44px; height: 44px; }
  .audience-icon svg { width: 22px; height: 22px; }
  .audience-out { padding: var(--sp-4) var(--sp-5); }
}

/* Tooltip */
.fast-tooltip, .explain-bubble {
  position: absolute;
  background: var(--fg-strong);
  color: var(--surface);
  padding: 10px 14px;
  border-radius: var(--r-1);
  font-size: 0.84rem;
  line-height: 1.5;
  max-width: 320px;
  z-index: 1100;
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  animation: overlay-in .15s var(--ease);
  font-weight: 500;
}
.explain-bubble { pointer-events: auto; }

/* Responsive */
/* ============================================================
 *  Responsive — Mobile + Tablet
 * ============================================================
 * Breakpoints:
 *   1024px = Tablet portrait / kleine Laptops
 *    720px = Mobile landscape / kleine Tablets
 *    480px = Mobile portrait
 *    360px = sehr enge Mobile-Screens
 */

/* Inputs auf >=16px halten — sonst zoomt iOS Safari beim Fokus rein */
@media (max-width: 720px) {
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Tablet — kleinere Sektion-Padding */
@media (max-width: 1024px) {
  .showcase, .features-grid { padding-block: var(--sp-9); }
  .content-section { margin-block-start: var(--sp-9); gap: var(--sp-8); }
  .content-card.highlight-card { padding: var(--sp-7) var(--sp-6); }
  /* Sticky-Header auf Tablet/Mobile entrümpeln — sonst quetscht sich
   * Brand + Tag + "Datei wählen"-Button + Skill-Switch + Sprach-Picker
   * in eine Reihe und bricht das Layout. Pick-Button steht auf den
   * unteren Sektionen sowieso prominent als CTA, das Privacy-Tag steht
   * im Hero-Bereich darunter. */
  .header-pick-wrap { display: none; }
  .brand-tag { display: none; }
}

/* Tablet-Portrait (>720px Mobile-Layout, <=1024px) — Header-Grid so
 * umbauen, dass die Tools-Spalte sich auf die tatsaechliche Breite
 * der Tools schrumpft. Sonst sitzen sie nur am rechten Rand einer
 * 1fr-Spalte, die ein ganzes Drittel der Header-Breite einnimmt, und
 * wirken dadurch zu weit links. Mit `1fr 0 auto` extends die Brand
 * frei (1fr), die mittlere Pick-Spalte ist eh display:none, und die
 * Tools-Spalte ist content-sized -> Tools rutschen bis an den
 * Container-Rand (32px Padding bleibt erhalten). */
@media (min-width: 721px) and (max-width: 1024px) {
  .header-row { grid-template-columns: 1fr 0 auto; }
}


/* iPad-Mini-/Tablet-Standard-Breakpoint — füllt die Lücke zwischen
 * 880px und 720px für 2-spaltige Showcase-Sections. */
@media (max-width: 768px) {
  .showcase { gap: var(--sp-6); padding-inline: var(--sp-5); }
  .features-row { gap: var(--sp-5); }
  .formats-grid { gap: var(--sp-4); }
}

/* Mobile landscape */
@media (max-width: 720px) {
  header { position: relative; padding-block: 14px; }
  /* Sticky-Header gibt's auf Mobile nicht — also weniger Scroll-Offset */
  .upload-section { scroll-margin-top: 20px; }
  .file-card { scroll-margin-top: 160px; }
  /* Header-Layout mobile: 2 Spalten (Brand + Tools), Pick-Button drunter */
  .header-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'brand tools' 'pick pick';
    gap: var(--sp-3);
  }
  .header-row > div:first-child { grid-area: brand; }
  .header-pick-wrap { grid-area: pick; justify-self: stretch; }
  .header-tools { grid-area: tools; }
  .btn-header-pick { width: 100%; padding: 0 18px; height: 44px; }
  .editor-row { grid-template-columns: 1fr; }
  .file-info-tile { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .strip-preview-list, .diff-list { grid-template-columns: 1fr 1fr; }
  .header-tools { width: 100%; justify-content: space-between; }
  .skill-switch { flex: 1; }
  /* WCAG 2.1 AA: 44×44 Touch-Target — Padding leicht erhöht statt height
   * gesetzt, damit der Indikator-Pille-Hintergrund weiter passt. */
  .skill-switch button { flex: 1; min-height: 44px; padding-block: 11px; }
  /* Sprach-Dropdown auf Mobile ausblenden — sonst quetscht "Einsteiger /
   * Profi" daneben und bricht das Layout. Stattdessen wird die mobile
   * .footer-lang-mobile-Auswahl unten im Footer sichtbar. */
  .lang-switch { display: none; }
  .footer-lang-mobile { display: flex; }
  .hero-stats { gap: var(--sp-5); }
  .content-card.highlight-card { padding: var(--sp-7) var(--sp-5); }
  .brand-tag { display: none; }
  /* Hero kompakter */
  .hero { padding-block: var(--sp-9) var(--sp-7); }
  .hero-cta-row { flex-direction: column; gap: var(--sp-3); width: 100%; }
  .hero-cta-row .btn-primary { width: 100%; justify-content: center; }
  /* Phantom-Tags Mockup ohne Perspective auf Mobile (sah verzerrt aus) */
  .phantom-tags { transform: none; }
  /* Showcases padding-block reduzieren */
  .showcase { padding-block: var(--sp-8); }
  .features-grid { padding-block: var(--sp-8); }
  .formats-band { padding-block: var(--sp-8); margin-block-start: var(--sp-7); }
  /* Bulk-Actions auf einer Card-Zeile */
  .bulk-actions .btn { flex: 1; min-width: 0; justify-content: center; }
  /* File-Card padding sparsamer */
  .file-header { padding: var(--sp-4); gap: var(--sp-3); }
  .file-thumb, .file-thumb-placeholder { width: 72px; height: 72px; font-size: 1.8rem; }
  .file-body { padding: var(--sp-4); gap: var(--sp-3); }
  .pro-section { gap: var(--sp-3); }
  /* Touch-Target: btn-small mind. 40px hoch */
  /* WCAG 2.1 AAA + Apple HIG Minimum: 44×44 touch-target */
  .btn-small { min-height: 44px; padding-inline: 16px; }
  .file-remove { width: 40px; height: 40px; }
  /* Drop-Zone padding sparsamer */
  .drop-zone { padding: var(--sp-7) var(--sp-4); border-radius: var(--r-4); }
  /* Profile-Cards-Grid: mind. 1 Spalte */
  .profile-cards { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .profile-card { padding: var(--sp-4); }
  .profile-card-head { font-size: 0.96rem; }
  .profile-card-desc { font-size: 0.84rem; }
  /* Tabellen scroll-fähig statt overflow */
  .meta-table { font-size: 0.86rem; }
  .meta-table td { padding: 9px var(--sp-4); }
  /* Modal: full-width auf Mobile */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-card { max-height: 92vh; max-height: 92dvh; border-radius: var(--r-4) var(--r-4) 0 0; }
  /* Risk-Meter etwas kleiner */
  .risk-meter { width: 64px; height: 64px; }
  .risk-meter::before { inset: 6px; }
  .risk-score-value { font-size: 1.6rem; }
  /* GPS-Warning padding sparsamer */
  .gps-warning { padding: var(--sp-4); }
  .gps-warning > strong { font-size: 1rem; }
  /* Map-Canvas niedriger auf Mobile */
  .map-canvas { height: 280px; }
  /* Footer kompakter */
  footer { margin-block-start: var(--sp-9); padding-block: var(--sp-5); }
  /* Compare-Panel padding sparsamer */
  .compare-panel { padding: var(--sp-4); }
  /* Modal-Header/-Body padding sparsamer */
  .modal-header, .modal-body { padding: var(--sp-4); }
  .modal-footer { padding: var(--sp-3) var(--sp-4); }
}

/* Mobile portrait */
@media (max-width: 480px) {
  header, main, footer { padding-inline: 16px; }
  .lang-switch select { padding: 7px 26px 7px 10px; font-size: 0.8rem; }
  /* Brand + Skill-Switch teilen sich auf Phones eine Zeile (siehe
   * 720px-Block). Auf engen Viewports (~390px iPhone) wird's knapp,
   * deshalb hier beide kompakter — Touch-Target 44px bleibt erhalten. */
  .header-row { gap: var(--sp-2); }
  .brand { gap: 7px; }
  .brand-logo { width: 18px; height: 18px; }
  .brand-name { font-size: 0.84rem; letter-spacing: -0.012em; }
  .skill-switch { padding: 3px; }
  .skill-switch button { padding-inline: 9px; font-size: 0.7rem; }
  .hero { padding-block: var(--sp-8) var(--sp-6); }
  .hero-eyebrow { font-size: 0.78rem; padding: 5px 12px 5px 6px; }
  .hero-eyebrow .badge { font-size: 0.66rem; padding: 1px 8px; }
  .trust-bar { gap: var(--sp-4); font-size: 0.86rem; }
  .hero-stats { gap: var(--sp-4); }
  .hero-stat-num { font-size: 1.4rem; }
  /* Format-Tiles auf 1-Spalte */
  .formats-grid { grid-template-columns: 1fr 1fr; padding-inline: 16px; }
  /* File-Info-Tile: 2 Spalten bleibt aber kleiner */
  .file-info-tile { padding: var(--sp-3); gap: var(--sp-2) var(--sp-4); }
  .fit-val { font-size: 0.86rem; }
  /* Showcase-Sub kleiner */
  .showcase-sub { font-size: 1rem; }
  /* Card-Grid 1 Spalte */
  .profile-cards { grid-template-columns: 1fr; }
  /* Section-Beam dünner */
  .section-beam { max-width: 90%; }
  /* Phantom-Tags noch kompakter */
  .phantom-tags { padding: var(--sp-4); }
  .phantom-tag { padding: var(--sp-2) var(--sp-3); }
  /* CTA-Row Buttons: 'Datei wählen' bleibt voll, demo-link daneben */
  .btn-large { padding: 14px 24px; font-size: 1rem; }
  /* Risk-Reasons in 1 Spalte */
  .risk-reasons li { font-size: 0.84rem; padding: 8px 10px; }
  /* GPS-Coords-Box flexibler */
  .gps-coords { font-size: 0.8rem; padding: 6px 10px; }
}

/* Sehr enge Screens (iPhone SE etc.) */
@media (max-width: 360px) {
  header, main, footer { padding-inline: 12px; }
  .hero h2.hero-title, .hero .hero-title { font-size: 2.4rem; }
  .file-name { font-size: 0.94rem; }
  .meta-format { font-size: 0.66rem; padding: 1px 7px; }
  .formats-grid { grid-template-columns: 1fr; }
  .strip-preview-list, .diff-list { grid-template-columns: 1fr; }
  .file-info-tile { grid-template-columns: 1fr; }
  /* Header bei 320px: skill-switch enger, lang-select enger,
   * damit DE-Labels ("Einsteiger") nicht das Tools-Cluster sprengen. */
  .skill-switch button { padding: 6px 8px; font-size: 0.72rem; letter-spacing: 0; }
  .lang-switch select { font-size: 0.78rem; padding: 6px 22px 6px 8px; }
  .header-tools { gap: var(--sp-2); }
  .brand-name { font-size: 1rem; }
}

/* Dynamic Viewport Units fuer Mobile-Browser (Safari/Chrome mit
 * eingeklappter URL-Bar) — vermeidet das 100vh-Mobile-Problem. */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
  .modal-overlay { height: 100dvh; }
}

/* iOS Safe-Area Padding — Notch / Home-Indicator auf iPhone X+ */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  header {
    padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  }
}

/* CJK-Sprachen brauchen weiteres letter-spacing — Apple-typografische
 * Tightness (-0.04em fuer Hero) ist fuer lateinische Schrift gemacht
 * und schaedigt die Lesbarkeit von chinesischen / japanischen /
 * koreanischen Glyphen. Reset auf 0 fuer alle Display-Texte. */
:lang(zh) .hero-title, :lang(ja) .hero-title, :lang(ko) .hero-title,
:lang(zh) .showcase-title, :lang(ja) .showcase-title, :lang(ko) .showcase-title,
:lang(zh) .brand, :lang(ja) .brand, :lang(ko) .brand {
  letter-spacing: 0;
}

[dir="rtl"] .file-actions, [dir="rtl"] .gps-actions { flex-direction: row-reverse; }
[dir="rtl"] .timeline::before { right: 0; left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Touch-Sticky-Hover-Bug fix: auf Geräten ohne Hover (Touch-Screens)
 * werden Hover-Effekte deaktiviert. Sonst bleiben sie nach einem Tap
 * "kleben", bis der User irgendwo anders hin tippt. */
@media (hover: none) {
  .file-card:hover { transform: none; box-shadow: var(--shadow-card); }
  .feature-pillar:hover { transform: none; box-shadow: var(--shadow-card); }
  .format-tile:hover { transform: none; box-shadow: var(--shadow-card); }
  .format-tile:hover::after { opacity: 0; }
  .format-tile:hover .format-icon { transform: none; }
  .feature:hover { transform: none; box-shadow: var(--shadow-card); }
  .profile-card:hover { transform: none; box-shadow: var(--shadow-card); }
  .drop-zone:hover { transform: none; box-shadow: var(--shadow-card); }
  .drop-zone:hover .drop-icon { transform: none; opacity: 0.5; }
  .phantom-tag:hover { transform: none; }
  .btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
    transform: none;
  }
  .file-remove:hover { transform: none; }
  .tag-explain-btn:hover { transform: none; }
  .meta-table tr:hover { background: transparent; }
  .meta-category-header:hover { background: transparent; }
  .strip-preview > summary:hover,
  .hex-viewer > summary:hover,
  .cli-hint > summary:hover,
  .timeline-panel > summary:hover { background: transparent; }
  .faq-list details:hover { box-shadow: var(--shadow-card); transform: none; }
}

/* ============================================================
   Forensik-Cards (Sprint 1-4) — Light-Mode (Stripe/Apple-Stil)
   Nutzt --fg / --fg-muted / --surface / --shadow-card Variablen
   aus :root, damit alle 5 Karten konsistent zum restlichen Tool
   wirken. Verdict-Banner sind farbkodiert (grün/gelb/rot/indigo)
   mit ~10% Hintergrund-Tint und 3px Akzent-Bar links.
   ============================================================ */

/* ---------- Compression-Fingerprint-Card ---------- */
.comp-card {
  margin: var(--sp-4) var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.comp-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.comp-head strong { font-size: 0.95rem; color: var(--fg-strong); font-weight: 600; }
.comp-help { margin: 0; font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5; }

.comp-verdict {
  margin: 0;
  padding: var(--sp-3) var(--sp-3);
  background: var(--indigo-soft);
  border-left: 3px solid var(--indigo);
  border-radius: var(--r-1);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fg);
}
.comp-verdict-psdSfw       { background: var(--warn-bg);   border-left-color: var(--warn);   color: var(--fg); }
.comp-verdict-psdSfwLikely { background: var(--warn-bg);   border-left-color: var(--warn);   color: var(--fg); }
.comp-verdict-ijg          { background: var(--ok-bg);     border-left-color: var(--ok);     color: var(--fg); }
.comp-verdict-unknown      { background: var(--surface-inset); border-left-color: var(--fg-subtle); color: var(--fg); }

.comp-pipeline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: 0.85rem;
}
.comp-pipe-step {
  padding: 5px 12px;
  background: var(--indigo-soft);
  border: 1px solid rgba(99,91,255,0.20);
  border-radius: 999px;
  color: var(--indigo-text);
  white-space: nowrap;
  font-weight: 500;
}
.comp-pipe-arrow { color: var(--fg-subtle); font-weight: 600; }

.comp-matches { display: flex; flex-direction: column; gap: var(--sp-2); }
.comp-match {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 2fr) auto;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.85rem;
}
.comp-match-label { color: var(--fg); }
.comp-match-bar {
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.comp-match-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--ok), var(--indigo));
  transition: width 0.3s ease-out;
}
.comp-match[data-match="psd"] .comp-match-fill {
  background: linear-gradient(90deg, #f59e0b, var(--warn));
}
.comp-match-conf {
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  min-width: 3ch;
  text-align: right;
}

.comp-markers { font-size: 0.85rem; }
.comp-markers > summary {
  cursor: pointer; color: var(--fg-muted); padding: var(--sp-1) 0;
}
.comp-markers > summary:hover { color: var(--fg-strong); }
.comp-markers-list { margin: var(--sp-2) 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px; }
.comp-markers-list li {
  display: grid;
  grid-template-columns: minmax(60px, auto) minmax(140px, 1fr) 2fr;
  gap: var(--sp-2);
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-1);
}
.comp-marker-name { font-family: var(--font-mono); color: var(--indigo-text); font-weight: 600; }
.comp-marker-label { color: var(--fg); }
.comp-marker-hint { color: var(--fg-muted); font-size: 0.78rem; }

.comp-dqts > summary {
  cursor: pointer; color: var(--fg-muted); padding: var(--sp-1) 0;
  font-size: 0.85rem;
}
.comp-dqts > summary:hover { color: var(--fg-strong); }
.comp-dqt-help { margin: var(--sp-2) 0; font-size: 0.78rem; color: var(--fg-muted); }
.comp-dqts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.comp-dqts-grid strong {
  display: block; margin-bottom: var(--sp-2);
  font-size: 0.78rem; color: var(--fg-muted); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600;
}
.comp-dqt-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 0.72rem;
  background: var(--surface);
  border-radius: var(--r-1);
  overflow: hidden;
}
.comp-dqt-table td {
  padding: 3px 5px; text-align: right;
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.comp-disclaimer { margin: 0; color: var(--fg-muted); font-style: italic; }

@media (max-width: 600px) {
  .comp-card { margin: var(--sp-3); padding: var(--sp-3); }
  .comp-match { grid-template-columns: 1fr; gap: 4px; }
  .comp-match-bar { width: 100%; }
  .comp-markers-list li { grid-template-columns: auto 1fr; }
  .comp-marker-hint { grid-column: 1 / -1; padding-left: var(--sp-3); }
}

/* ---------- Structure-Inspector ----------
 * summary-Look kommt jetzt vom gemeinsamen Card-Block weiter oben (~Z.2577,
 * .hex-viewer / .cli-hint / .timeline-panel / .struct-viewer / .forensics-card).
 * Die alte eigene summary-Definition mit surface-soft + zweiter Border ist
 * raus, damit struct-viewer optisch wie File-Hashes & Co. wirkt.
 *
 * Internes padding der direct-children, damit Content nicht am Card-Rand
 * klebt (analog zu forensics-help / hex-dump).
 */
.struct-viewer { margin: 0; }
.struct-viewer > .struct-help,
.struct-viewer > .struct-warn,
.struct-viewer > .struct-legend,
.struct-viewer > .struct-rows,
.struct-viewer > .struct-empty {
  padding-inline: var(--sp-5);
}
.struct-viewer > .struct-help { padding-block-start: var(--sp-3); }
.struct-viewer > .struct-rows,
.struct-viewer > .struct-empty { padding-block-end: var(--sp-4); }
.struct-help {
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5;
}
.struct-warn {
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--danger-bg);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-1);
  font-size: 0.88rem;
  color: var(--fg);
}
.struct-empty {
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  background: var(--surface-soft);
  border-radius: var(--r-1);
  color: var(--fg-muted);
  text-align: center;
  font-size: 0.88rem;
}

.struct-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-2) 0;
  font-size: 0.75rem;
}
.struct-legend-item {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 500;
}

.struct-rows {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-top: var(--sp-2);
}
.struct-row {
  border-left: 3px solid transparent;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-1);
  overflow: hidden;
}
.struct-row > summary {
  cursor: pointer;
  padding: 7px 11px;
  display: grid;
  grid-template-columns: minmax(60px, auto) minmax(0, 1fr) auto auto auto;
  gap: var(--sp-2);
  align-items: center;
  font-size: 0.82rem;
  font-family: var(--font-mono);
}
.struct-row > summary:hover { background: var(--surface-inset); }
.struct-row[open] { background: var(--surface-inset); }
.struct-row[open] > summary { border-bottom: 1px solid var(--border-soft); }

.struct-name { font-weight: 700; color: var(--fg-strong); }
.struct-ident { color: var(--warn); font-style: italic; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.struct-offset { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.struct-length { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.struct-preview {
  color: var(--ok);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 200px;
}
.struct-desc {
  margin: var(--sp-2) var(--sp-3); padding: 0;
  color: var(--fg-muted); font-size: 0.85rem; line-height: 1.5;
}
.struct-truncated {
  margin: 0 var(--sp-3) var(--sp-2);
  color: var(--warn); font-size: 0.78rem;
}
.struct-dump {
  margin: 0 var(--sp-3) var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-code);
  border-radius: var(--r-1);
  font-family: var(--font-mono); font-size: 0.72rem;
  white-space: pre;
  overflow-x: auto;
  color: rgba(255,255,255,0.85);
}

/* Kategorie-Farben — moderate Saturation für Light-Mode */
.struct-row-container { border-left-color: var(--indigo); }
.struct-legend-item.struct-row-container { background: var(--indigo-soft); border-color: rgba(99,91,255,0.30); color: var(--indigo-text); }
.struct-row-metadata  { border-left-color: var(--warn); }
.struct-legend-item.struct-row-metadata  { background: var(--warn-bg); border-color: rgba(180,83,9,0.30); color: var(--warn); }
.struct-row-image     { border-left-color: var(--ok); }
.struct-legend-item.struct-row-image     { background: var(--ok-bg); border-color: rgba(31,138,76,0.30); color: var(--ok); }
.struct-row-trailing  { border-left-color: var(--danger); }
.struct-legend-item.struct-row-trailing  { background: var(--danger-bg); border-color: rgba(220,38,38,0.30); color: var(--danger); }
.struct-row-unknown   { border-left-color: var(--fg-subtle); }
.struct-legend-item.struct-row-unknown   { background: var(--surface-soft); border-color: var(--border); color: var(--fg-muted); }

@media (max-width: 700px) {
  .struct-row > summary {
    grid-template-columns: minmax(60px, auto) 1fr auto;
    grid-auto-rows: auto;
  }
  .struct-ident, .struct-preview { grid-column: 1 / -1; padding-left: var(--sp-2); }
  .struct-preview { font-size: 0.7rem; max-width: 100%; }
}

/* ---------- JPEG-Ghost-Card ---------- */
.forensics-ghost,
.forensics-ela,
.forensics-pixel,
.forensics-cm,
.forensics-hashes {
  margin: var(--sp-3) var(--sp-5) var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
}
.forensics-ghost-head,
.forensics-pixel-head,
.forensics-cm-head,
.forensics-hashes-head { margin-bottom: var(--sp-2); }
.forensics-ghost-head strong,
.forensics-pixel-head strong,
.forensics-cm-head strong { font-size: 0.95rem; color: var(--fg-strong); font-weight: 600; }
.forensics-ghost-help,
.forensics-pixel-help,
.forensics-cm-help,
.forensics-hashes-help {
  margin: 4px 0 var(--sp-2);
  font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5;
}
.forensics-ghost-result,
.forensics-cm-result {
  margin-top: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.forensics-ghost-img,
.forensics-cm-img {
  width: 100%; height: auto; max-height: 70vh;
  border-radius: var(--r-2);
  cursor: zoom-in;
  background: var(--surface-code);
  object-fit: contain;
  box-shadow: var(--shadow-1);
}
.forensics-ghost-tap-hint,
.forensics-cm-tap-hint,
.pixel-tap-hint { margin: 0; color: var(--fg-muted); text-align: center; font-size: 0.82rem; }

.forensics-ghost-verdict,
.forensics-cm-verdict,
.pixel-verdict {
  margin: 0;
  padding: var(--sp-3);
  border-left: 3px solid var(--indigo);
  border-radius: var(--r-1);
  font-size: 0.92rem;
  line-height: 1.5;
  background: var(--indigo-soft);
  color: var(--fg);
}
.ghost-verdict-anomaly,
.cm-verdict-anomaly,
.pixel-verdict-anomaly        { background: var(--danger-bg);  border-left-color: var(--danger); }
.ghost-verdict-consistent,
.cm-verdict-consistent,
.pixel-verdict-consistent     { background: var(--ok-bg);      border-left-color: var(--ok); }
.ghost-verdict-mixed,
.cm-verdict-mixed,
.pixel-verdict-mixed          { background: var(--warn-bg);    border-left-color: var(--warn); }

.forensics-ghost-dist { display: flex; flex-direction: column; gap: 3px; }
.ghost-dist-label {
  margin: var(--sp-1) 0;
  font-size: 0.78rem; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.ghost-q-row {
  display: grid;
  grid-template-columns: 60px 1fr 50px;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.82rem;
  font-family: var(--font-mono);
}
.ghost-q-label { color: var(--fg-muted); }
.ghost-q-bar {
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.ghost-q-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--danger), var(--warn), var(--ok), var(--indigo));
  background-size: 400% 100%;
  background-position: 50% 0;
}
.ghost-q-pct {
  text-align: right; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.ghost-q-main { font-weight: 700; }
.ghost-q-main .ghost-q-label { color: var(--ok); }
.ghost-q-main .ghost-q-pct   { color: var(--fg-strong); }

.forensics-ghost-legend {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.78rem;
  color: var(--fg-muted);
}
.ghost-legend-label { grid-column: 1 / -1; }
.ghost-legend-grad {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    hsl(0,75%,50%),
    hsl(60,75%,50%),
    hsl(120,55%,40%),
    hsl(180,75%,40%),
    hsl(240,75%,55%));
}
.ghost-legend-min, .ghost-legend-max { font-family: var(--font-mono); }

.forensics-ghost-disclaimer,
.forensics-cm-disclaimer,
.forensics-pixel-disclaimer { margin: 0; color: var(--fg-muted); font-style: italic; font-size: 0.82rem; }

@media (max-width: 600px) {
  .forensics-ghost,
  .forensics-pixel,
  .forensics-cm { padding: var(--sp-3); }
  .ghost-q-row { grid-template-columns: 50px 1fr 40px; font-size: 0.78rem; }
}

/* ---------- Pixel-Konsistenz (Noise + CFA) ---------- */
.forensics-pixel-result { margin-top: var(--sp-3); }
.pixel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.pixel-panel {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
}
.pixel-panel-title {
  margin: 0; font-size: 0.85rem; color: var(--fg-strong);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.pixel-panel-help {
  margin: 0; font-size: 0.78rem; color: var(--fg-muted); line-height: 1.45;
}
.forensics-pixel-img {
  width: 100%; height: auto; max-height: 50vh;
  border-radius: var(--r-1);
  cursor: zoom-in;
  background: var(--surface-code);
  object-fit: contain;
  box-shadow: var(--shadow-1);
}

.pixel-cfa-score {
  display: grid;
  grid-template-columns: 1fr minmax(80px, 2fr) auto;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.82rem;
  color: var(--fg-muted);
}
.pixel-cfa-score-label { color: var(--fg-muted); }
.pixel-cfa-score-bar {
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.pixel-cfa-score-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--danger), var(--warn) 50%, var(--ok));
  transition: width 0.3s ease-out;
}
.pixel-cfa-score-val {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  color: var(--fg-strong);
  font-weight: 600;
}

@media (max-width: 600px) {
  .pixel-grid { grid-template-columns: 1fr; }
}

/* ---------- Copy-Move-Stats ---------- */
.forensics-cm-stats {
  margin: 0;
  font-size: 0.78rem; color: var(--fg-muted);
  font-family: var(--font-mono);
}

/* ---------- Thumbnail-Mismatch-Card (Sprint 9-A) ---------- */
.forensics-thumb {
  margin: var(--sp-3) var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
}
.forensics-thumb-head { margin-bottom: var(--sp-2); }
.forensics-thumb-head strong { font-size: 0.95rem; color: var(--fg-strong); font-weight: 600; }
.forensics-thumb-help {
  margin: 4px 0 var(--sp-2);
  font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5;
}
.forensics-thumb-result {
  margin-top: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.forensics-thumb-preview {
  width: 100%; max-width: 480px; height: auto;
  margin: 0 auto;
  border-radius: var(--r-1);
  background: var(--surface-code);
  cursor: zoom-in;
  display: block;
  box-shadow: var(--shadow-1);
  image-rendering: -webkit-optimize-contrast;
}
.forensics-thumb-labels {
  display: flex; justify-content: space-around;
  font-size: 0.78rem; color: var(--fg-muted);
  font-family: var(--font-mono);
  margin: 0 auto;
  max-width: 480px;
}
.forensics-thumb-verdict {
  margin: 0;
  padding: var(--sp-3);
  border-left: 3px solid var(--indigo);
  border-radius: var(--r-1);
  font-size: 0.92rem; line-height: 1.5;
  background: var(--indigo-soft);
  color: var(--fg);
}
.thumb-verdict-anomaly    { background: var(--danger-bg); border-left-color: var(--danger); }
.thumb-verdict-consistent { background: var(--ok-bg);     border-left-color: var(--ok); }
.thumb-verdict-mixed      { background: var(--warn-bg);   border-left-color: var(--warn); }
.forensics-thumb-disclaimer { margin: 0; color: var(--fg-muted); font-style: italic; font-size: 0.82rem; }

/* ---------- RGB-Histogramm-Card (Sprint 9-B) ---------- */
.forensics-hist {
  margin: var(--sp-3) var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
}
.forensics-hist-head { margin-bottom: var(--sp-2); }
.forensics-hist-head strong { font-size: 0.95rem; color: var(--fg-strong); font-weight: 600; }
.forensics-hist-help {
  margin: 4px 0 var(--sp-2);
  font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5;
}
.forensics-hist-result {
  margin-top: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.forensics-hist-svg-wrap {
  position: relative;
  background: var(--surface-code);
  border-radius: var(--r-1);
  padding: var(--sp-2);
}
.hist-svg {
  width: 100%; height: auto;
  display: block;
  background: transparent;
}
.forensics-hist-legend {
  position: absolute; top: 8px; right: 12px;
  display: flex; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(0,0,0,0.55);
  padding: 4px 10px;
  border-radius: var(--r-1);
}
.hist-legend-r { color: #ef4444; }
.hist-legend-g { color: #22c55e; }
.hist-legend-b { color: #3b82f6; }
.forensics-hist-stats {
  margin: 0;
  font-size: 0.82rem; color: var(--fg-muted);
  font-family: var(--font-mono);
}
.forensics-hist-verdict {
  margin: 0;
  padding: var(--sp-3);
  border-left: 3px solid var(--indigo);
  border-radius: var(--r-1);
  font-size: 0.92rem; line-height: 1.5;
  background: var(--indigo-soft);
  color: var(--fg);
}
.hist-verdict-anomaly    { background: var(--danger-bg); border-left-color: var(--danger); }
.hist-verdict-consistent { background: var(--ok-bg);     border-left-color: var(--ok); }
.hist-verdict-mixed      { background: var(--warn-bg);   border-left-color: var(--warn); }
.forensics-hist-disclaimer { margin: 0; color: var(--fg-muted); font-style: italic; font-size: 0.82rem; }

/* ---------- Pixel-Magnifier-Bubble (Sprint 9-C) ---------- */
.pixel-magnifier {
  position: fixed;
  z-index: 10000;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  padding: 3px;
  pointer-events: none;
  user-select: none;
}
.pixel-magnifier-canvas {
  display: block;
  border-radius: var(--r-1);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background: #000;
}
.pixel-magnifier-info {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg);
  gap: var(--sp-2);
  background: var(--surface);
}
.pixel-magnifier-rgb { color: var(--fg-strong); font-weight: 600; }
.pixel-magnifier-coords { color: var(--fg-muted); }

@media (max-width: 600px) {
  .forensics-thumb,
  .forensics-hist { margin: var(--sp-3); padding: var(--sp-3); }
  .pixel-magnifier-canvas { width: 64px; height: 64px; }
  .pixel-magnifier-info { font-size: 0.65rem; }
}

/* ---------- Side-by-Side-Compare (Sprint 10-B) ---------- */
.forensics-sbs,
.forensics-pdfreport {
  margin: var(--sp-3) var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
}
.forensics-sbs-head,
.forensics-pdfreport-head { margin-bottom: var(--sp-2); }
.forensics-sbs-head strong,
.forensics-pdfreport-head strong { font-size: 0.95rem; color: var(--fg-strong); font-weight: 600; }
.forensics-sbs-help,
.forensics-pdfreport-help {
  margin: 4px 0 var(--sp-2);
  font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5;
}
.forensics-sbs-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin: var(--sp-3) 0;
}
.forensics-sbs-label { font-size: 0.85rem; color: var(--fg-muted); font-weight: 500; }
.forensics-sbs-select {
  flex: 1; min-width: 220px;
  appearance: none; -webkit-appearance: none;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 8px 30px 8px 12px;
  font-size: 0.9rem;
  color: var(--fg-strong);
  font-family: var(--font-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 10px;
  min-height: 44px; cursor: pointer;
}

.forensics-sbs-result { margin-top: var(--sp-3); }
.sbs-compare {
  position: relative;
  user-select: none;
}
.sbs-compare-frame {
  position: relative;
  width: 100%;
  background: var(--surface-code);
  border-radius: var(--r-1);
  overflow: hidden;
  cursor: ew-resize;
  box-shadow: var(--shadow-1);
}
/* img-a füllt das Frame komplett (Hintergrund-Layer). */
.sbs-img-a {
  display: block;
  width: 100%; height: auto;
  user-select: none;
  pointer-events: none;
}
/* clip-Container ist absolut, beginnt bei left:0 und hat variable
 * Breite (via JS 0-100%). Wegen overflow:hidden zeigt er nur den
 * Anfang des img-b. */
.sbs-clip {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 50%;
  overflow: hidden;
  pointer-events: none;
}
/* img-b hat absolute Größe relativ zum FRAME, nicht zum clip — sonst
 * würde es bei clip-Resize sich mit-strecken. Das hier hält beide Bilder
 * 1:1 in derselben Pixel-Position. */
.sbs-clip .sbs-img-b {
  position: absolute;
  top: 0; left: 0;
  width: var(--sbs-frame-w, 100%);
  height: auto;
  display: block;
  user-select: none;
}
.sbs-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 4px;
  background: rgba(255,255,255,0.85);
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 2;
  outline: none;
}
.sbs-handle:focus-visible .sbs-handle-grip { box-shadow: var(--shadow-focus); }
.sbs-handle-line {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  width: 1px;
  left: 50%;
  transform: translateX(-50%);
}
.sbs-handle-grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg-strong);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.sbs-label {
  position: absolute;
  bottom: 8px;
  padding: 3px 9px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  pointer-events: none;
  max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  z-index: 3;
}
.sbs-label-a { left: 10px; }
.sbs-label-b { right: 10px; }

@media (max-width: 600px) {
  .forensics-sbs,
  .forensics-pdfreport { margin: var(--sp-3); padding: var(--sp-3); }
  .sbs-handle-grip { width: 32px; height: 32px; }
  .sbs-label { font-size: 0.65rem; max-width: 35%; }
}

/* ---------- C2PA Self-Sign Provenance (Sprint 11) ---------- */
.forensics-c2pa {
  margin: var(--sp-3) var(--sp-5);
  padding: var(--sp-4);
  background: linear-gradient(135deg, rgba(99,91,255,0.04), rgba(99,91,255,0.10));
  border: 1px solid rgba(99,91,255,0.22);
  border-radius: var(--r-2);
}
.forensics-c2pa-head { margin-bottom: var(--sp-2); }
.forensics-c2pa-head strong { font-size: 0.95rem; color: var(--fg-strong); font-weight: 600; }
.forensics-c2pa-help {
  margin: 4px 0 var(--sp-2);
  font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5;
}
.forensics-c2pa-warn {
  margin: var(--sp-2) 0 var(--sp-3);
  padding: var(--sp-3);
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-1);
  font-size: 0.85rem; color: var(--fg); line-height: 1.5;
}
.forensics-c2pa-warn strong { color: var(--warn); margin-right: 6px; }
.forensics-c2pa-result { margin-top: var(--sp-3); }
.forensics-c2pa-success {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  background: var(--ok-bg); border-left: 3px solid var(--ok);
  border-radius: var(--r-1);
  font-size: 0.92rem; color: var(--fg); font-weight: 500;
}
.forensics-c2pa-error {
  margin: 0;
  padding: var(--sp-3);
  background: var(--danger-bg); border-left: 3px solid var(--danger);
  border-radius: var(--r-1);
  font-size: 0.92rem; color: var(--fg);
}
.forensics-c2pa-stats {
  width: 100%; border-collapse: collapse;
  font-size: 0.82rem; margin: var(--sp-2) 0 var(--sp-3);
}
.forensics-c2pa-stats th {
  text-align: left; padding: 6px 10px 6px 0;
  color: var(--fg-muted); font-weight: 500; width: 40%;
  vertical-align: top;
}
.forensics-c2pa-stats td {
  padding: 6px 0; word-break: break-all;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg);
}
.forensics-c2pa-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.forensics-c2pa-actions .btn { text-decoration: none; }
.forensics-c2pa-disclaimer { margin: var(--sp-2) 0 0; color: var(--fg-muted); font-style: italic; font-size: 0.78rem; line-height: 1.5; }

@media (max-width: 600px) {
  .forensics-c2pa { margin: var(--sp-3); padding: var(--sp-3); }
  .forensics-c2pa-actions .btn { flex: 1 1 100%; }
}

/* ---------- Lupen-Badge auf Forensik-Heatmaps ---------- */
.forensics-img-wrap {
  position: relative;
  display: block;
  line-height: 0;
}
.forensics-img-zoom-badge {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 38px; height: 38px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  line-height: 1;
}
/* Touch-Geräte und kleine Screens: Badge sichtbar.
 * Auf Maus/Trackpad-Geräten reicht 'cursor: zoom-in' der img-Klasse. */
@media (hover: none), (max-width: 720px) {
  .forensics-img-zoom-badge { display: flex; }
}

/* ---------- Master "Run all forensics"-Bar (eingebettet in Forensik-Card) ---------- */
.forensics-runall {
  margin: 0 var(--sp-5) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(135deg, var(--indigo-soft), rgba(99,91,255,0.04));
  border: 1px solid rgba(99,91,255,0.18);
  border-radius: var(--r-2);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3);
}
.forensics-runall-head { display: flex; flex-direction: column; gap: 4px; }
.forensics-runall-head strong {
  font-size: 0.95rem; color: var(--fg-strong); font-weight: 600;
}
.forensics-runall-head p {
  margin: 0; font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5;
}
.forensics-runall-status {
  grid-column: 1 / -1;
  font-size: 0.85rem; color: var(--indigo-text);
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}
@media (max-width: 600px) {
  .forensics-runall { grid-template-columns: 1fr; margin: var(--sp-3); padding: var(--sp-3); }
  .forensics-runall .btn { width: 100%; }
}

/* ---------- Pro-Modus-Hinweis (Toast bottom-right) ---------- */
.pro-mode-hint {
  position: fixed;
  bottom: var(--sp-5); right: var(--sp-5);
  max-width: 360px;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-pop);
  z-index: 9999;
  display: flex; flex-direction: column; gap: var(--sp-3);
  font-size: 0.92rem;
  animation: pro-hint-slide-in 0.4s ease-out;
}
@keyframes pro-hint-slide-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.pro-mode-hint-head {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--fg-strong);
}
.pro-mode-hint-head strong { font-weight: 600; }
.pro-mode-hint-icon {
  width: 28px; height: 28px;
  background: var(--indigo-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--indigo);
  font-size: 1rem;
}
.pro-mode-hint p {
  margin: 0; font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5;
}
.pro-mode-hint-actions {
  display: flex; gap: var(--sp-2);
}
.pro-mode-hint-actions .btn { flex: 1; }
.pro-mode-hint-close {
  position: absolute;
  top: var(--sp-2); right: var(--sp-2);
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--fg-muted);
  font-size: 1.2rem;
  line-height: 1;
}
.pro-mode-hint-close:hover { background: var(--surface-soft); color: var(--fg-strong); }
@media (max-width: 600px) {
  .pro-mode-hint {
    bottom: var(--sp-3); right: var(--sp-3); left: var(--sp-3);
    max-width: none;
  }
}

/* ---------- Hashes + Reverse-Image-Search ---------- */
.forensics-hashes-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.82rem;
  margin: var(--sp-3) 0;
}
.forensics-hashes-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.forensics-hashes-table .hash-algo {
  font-weight: 600;
  color: var(--fg-strong);
  white-space: nowrap;
  width: 1%;
}
.forensics-hashes-table .hash-value {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg);
  word-break: break-all;
}
.forensics-hashes-table .hash-value code {
  background: transparent; padding: 0;
}
.btn-tiny {
  padding: 3px 8px; min-height: 28px;
  font-size: 0.85rem;
}
.forensics-hashes-disclaimer {
  margin: var(--sp-3) 0 0;
  color: var(--fg-muted); font-style: italic; font-size: 0.82rem;
}

@media (max-width: 600px) {
  .forensics-hashes-table .hash-algo { font-size: 0.75rem; }
  .forensics-hashes-table .hash-value { font-size: 0.68rem; }
}

/* Reduced-Motion: globaler Override für alle Transitions/Animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Footer-Sprach-Auswahl (mobile-only, Tablet+Desktop hidden) ---------- */
.footer-lang-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-3) auto var(--sp-2);
  padding: 0 var(--sp-4);
  font-size: 0.85rem;
  color: var(--fg-muted);
}
.footer-lang-mobile label {
  font-weight: 500;
}
.footer-lang-mobile select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 8px 30px 8px 12px;
  font-size: 0.9rem;
  color: var(--fg-strong);
  font-family: var(--font-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px;
  min-height: 44px;
  cursor: pointer;
}
[dir="rtl"] .footer-lang-mobile select { background-position: left 11px center; padding: 8px 12px 8px 30px; }
.footer-lang-mobile select:focus { outline: none; box-shadow: var(--shadow-focus); }

/* ============================================================
 *  Mobile-Polish-Sweep (Punkt: Boxen passen mobile)
 *  Zentralisierter Block für alle Card-internen Boxen die bisher
 *  KEIN explizites Mobile-Tuning hatten und auf engem Viewport zu
 *  groß / zu eng / zu unleserlich wurden. Identifiziert via Audit
 *  aller Container-Selektoren ohne max-width:480/720-Override.
 * ============================================================ */

/* ── 720px: Tablet-Portrait und kleiner ── */
@media (max-width: 720px) {
  /* Formats-Band: 4 Spalten passen mobile nicht — 2 Spalten */
  .formats-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: var(--sp-4);
    gap: var(--sp-3);
  }
  .format-tile { padding: var(--sp-5) var(--sp-3); }

  /* Feature-Pillars: Padding reduzieren (sp-7 = 32px war zu fett) */
  .feature-pillar { padding: var(--sp-5) var(--sp-4); }

  /* Card-interne Boxen: padding sp-5/sp-6 → sp-4/sp-4 */
  .risk-panel,
  .gps-warning,
  .c2pa-detected-panel,
  .inconsistency-panel,
  .forensics-card,
  .hex-viewer,
  .cli-hint,
  .timeline-panel,
  .struct-viewer {
    padding-inline: var(--sp-4);
  }
  .gps-warning { padding-inline: var(--sp-4); }

  /* Risk-Header auf Mobile: meter + label dürfen umbrechen */
  .risk-header { gap: var(--sp-3); }
  .risk-meter { width: 64px; height: 64px; }
  .risk-meter::before { inset: 6px; }
  .risk-score-value { font-size: 1.6rem; }

  /* GPS-Threats / GPS-Coords: größere Auswahlfläche, weniger padding */
  .gps-coords { font-size: 0.85rem; padding: 6px 10px; word-break: break-all; }
  .gps-actions { gap: 6px; }

  /* Compare-Table: kleinere Schrift damit mehr Spalten lesbar bleiben */
  .compare-table { font-size: 0.82rem; }
  .compare-table th, .compare-table td { padding: 8px 10px; }

  /* Hex-Dump in File-Cards: word-break + max-width für lange Hex-Lines */
  .hex-dump { font-size: 0.7rem; padding: var(--sp-3); }

  /* Strip-Options Toggles: vertikal stacken (waren oft 2 nebeneinander) */
  .strip-options { gap: var(--sp-2); }
  .strip-options label { width: 100%; }

  /* Thumbnail-Notice + Inconsistency-Liste: padding-inline matchen */
  .thumbnail-notice { padding-inline: var(--sp-4); gap: var(--sp-2); }
  .inconsistency-list { font-size: 0.88rem; }

  /* File-Header Padding reduzieren */
  /* file-header hat schon max-width 720 Override, aber nochmal sicher */
  .file-header { padding: var(--sp-4); gap: var(--sp-3); }
}

/* ── 480px: Phone-Portrait ── */
@media (max-width: 480px) {
  /* Formats-Tiles auf 1 Spalte */
  .formats-grid {
    grid-template-columns: 1fr;
    padding-inline: var(--sp-3);
  }

  /* Risk-Header in Spalte stacken bei sehr engem Viewport */
  .risk-header { flex-direction: column; align-items: flex-start; }
  .risk-meter { width: 56px; height: 56px; }
  .risk-meter::before { inset: 5px; }

  /* Compare-Table sehr klein — User scrollt eh horizontal via .compare-wrap */
  .compare-table { font-size: 0.76rem; }
  .compare-table th, .compare-table td { padding: 6px 8px; white-space: nowrap; }

  /* Card-internes Padding minimal */
  .risk-panel,
  .gps-warning,
  .c2pa-detected-panel,
  .inconsistency-panel,
  .forensics-card,
  .hex-viewer,
  .cli-hint,
  .timeline-panel,
  .struct-viewer,
  .thumbnail-notice {
    padding-inline: var(--sp-3);
  }

  /* GPS-Coords: extreme Mobile-Coords brechen sonst die Card */
  .gps-coords { font-size: 0.78rem; }

  /* Drop-Zone-Padding kleiner — sonst nimmt sie 70% des Viewport-Höhe */
  /* (drop-zone hat eigene Mobile-Rules, das ist nur zur Sicherheit) */
}

/* ============================================================
 *  Mobile-Polish — SEO-Content-Sections
 *  Vereinheitlicht Mobile-Verhalten ALLER .content-card-Sektionen:
 *    "Why we built this", "Who this tool is for" + "Common thread",
 *    "What is metadata?", "Why does this matter?",
 *    "How to use this tool", "Features", "Compare", "FAQ".
 *  Vorher hatte nur .highlight-card ("Why we built this") explizite
 *  Mobile-Rules; alle anderen Cards liefen mit Desktop-Padding und
 *  -Schriftgrößen — Headlines (clamp() bis 2.4rem), li (1rem),
 *  ul/ol (margin-inline-start sp-5), faq padding (sp-4 sp-5),
 *  feature-grid (minmax 250px), audience-item (sp-6 sp-5)
 *  überlaufen damit den Container auf engen Phones (320-390px).
 *  Hier zentral nachgezogen.
 * ============================================================ */

/* 720px = Tablet portrait + Phone landscape */
@media (max-width: 720px) {
  /* Section-Gap auf Mobile knapper, sonst rutscht der Footer
   * gefuehlt 5km nach unten. */
  .content-section { gap: var(--sp-7); margin-block-start: var(--sp-7); }

  /* Headlines: kleinere Hero-Groessen — auf 360px Phone passen sonst
   * nur 2-3 Worte pro Zeile, was Marketing-Headlines unleserlich macht. */
  .content-card h2 {
    font-size: clamp(1.4rem, 5vw, 1.85rem);
    line-height: 1.2;
    margin-block-end: var(--sp-3);
  }
  .content-card p { font-size: 0.98rem; line-height: 1.65; margin-block-end: var(--sp-3); }
  .content-card li { font-size: 0.96rem; line-height: 1.65; margin-block-end: 6px; }

  /* Listen-Padding statt margin: Container bleibt am linken Rand,
   * Bullets liegen INNERHALB des Padding (20px) statt außerhalb.
   * Sonst landen Listen auf 320px-Phones gefuehlt 24-28px eingerueckt
   * und der Text ist schmal-eingequetscht. */
  .content-card ul, .content-card ol {
    margin: var(--sp-3) 0 var(--sp-4) 0;
    padding-inline-start: var(--sp-5);
  }

  /* Trust-Liste in highlight-card: kleinere Pillen, weniger Gap */
  .trust-list { gap: 6px; }
  .trust-list li { padding: 8px 12px; font-size: 0.9rem; }

  /* HowTo-Steps: konsistente Padding-Indent statt margin */
  .howto-steps { padding-inline-start: var(--sp-5); }
  .howto-steps li { margin-block-end: var(--sp-3); font-size: 0.96rem; }

  /* Feature-Grid: 1 Spalte auf Mobile (vorher minmax 250px =
   * blieb 1-spaltig erst unter ~280px Viewport), kompakter */
  .feature-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .feature { padding: var(--sp-4); }
  .feature strong { font-size: 0.96rem; }
  .feature span { font-size: 0.88rem; line-height: 1.55; }

  /* FAQ: Padding deutlich reduziert (vorher sp-4 sp-5 = 16/20px
   * fuhrte mit Q+A zusammen zu 60-80% Bildschirmbreite Text-Block) */
  .faq-list details { padding: var(--sp-3) var(--sp-4); margin-block-end: 6px; }
  .faq-list summary { font-size: 0.94rem; line-height: 1.5; }
  .faq-list p { font-size: 0.92rem; line-height: 1.65; margin-block-start: var(--sp-2); }

  /* Audience-Grid: garantiert 1 Spalte unter 720px (vorher kollabierte
   * minmax(280px, 1fr) erst bei extrem engen Viewports), kompaktere
   * Cards, kleinere Icon-Box. */
  .audience-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-block: var(--sp-4);
  }
  .audience-lead { font-size: 0.98rem; margin-block-end: var(--sp-4); }
  .audience-item { padding: var(--sp-4); }
  .audience-item h3 {
    font-size: 1rem; line-height: 1.35;
    margin-block-end: var(--sp-2);
  }
  .audience-item p { font-size: 0.9rem; line-height: 1.6; }
  .audience-icon { width: 42px; height: 42px; margin-block-end: var(--sp-3); }
  .audience-icon svg { width: 22px; height: 22px; }

  /* Common-thread-Banner ("Common thread: everyone who needs..."):
   * kompakteres Padding, Akzent-Streifen links bleibt 4px breit */
  .audience-out {
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
    font-size: 0.94rem; line-height: 1.6;
    margin-block-start: var(--sp-5);
  }

  /* Compare-Foot + Methodologie-Text kleiner */
  .compare-foot { font-size: 0.86rem; }
  .compare-methodology { font-size: 0.82rem; line-height: 1.55; }
}

/* 480px = Phone portrait */
@media (max-width: 480px) {
  /* Headlines noch kompakter — passen jetzt in 2 Zeilen auf 360px */
  .content-card h2 { font-size: 1.36rem; line-height: 1.22; }
  .content-card p { font-size: 0.94rem; }
  .content-card li { font-size: 0.92rem; margin-block-end: 5px; }
  .content-card ul, .content-card ol { padding-inline-start: var(--sp-4); }

  .trust-list li { padding: 7px 10px; font-size: 0.86rem; }

  /* Audience: Padding/Icon noch enger — auf 360px sonst nur ~200px
   * fuer den Beschreibungstext */
  .audience-item { padding: var(--sp-4); }
  .audience-item h3 { font-size: 0.96rem; }
  .audience-item p { font-size: 0.86rem; }
  .audience-icon { width: 38px; height: 38px; margin-block-end: var(--sp-2); }
  .audience-icon svg { width: 20px; height: 20px; }
  .audience-out {
    padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-4);
    font-size: 0.9rem;
  }

  /* Feature-Tile: schmaler Padding */
  .feature { padding: var(--sp-3) var(--sp-4); }
  .feature strong { font-size: 0.92rem; }
  .feature span { font-size: 0.84rem; }

  /* FAQ: sehr kompakt (Frage + Antwort zusammen schon 100-150px Hoehe) */
  .faq-list details { padding: var(--sp-3); }
  .faq-list summary { font-size: 0.9rem; }
  .faq-list summary::before { margin-inline-end: 6px; font-size: 1.05em; }
  .faq-list p { font-size: 0.88rem; }

  /* HowTo-Indent weiter rein */
  .howto-steps { padding-inline-start: var(--sp-3); }
  .howto-steps li { font-size: 0.92rem; }
}

/* 360px = sehr enge Phones (iPhone SE 1.Gen, alte Androids) */
@media (max-width: 360px) {
  .content-card h2 { font-size: 1.22rem; }
  .content-card p { font-size: 0.9rem; }
  .content-card li { font-size: 0.88rem; }
  .content-card ul, .content-card ol { padding-inline-start: var(--sp-3); }

  .audience-item { padding: var(--sp-3); }
  .audience-icon { width: 34px; height: 34px; }
  .audience-icon svg { width: 18px; height: 18px; }
  .audience-out { padding: var(--sp-3); }

  .feature { padding: var(--sp-3); }
  .feature strong { font-size: 0.9rem; }

  .faq-list details { padding: var(--sp-3) 12px; }
  .faq-list summary { font-size: 0.88rem; }
}

/* ============================================================
 *  Mobile-Card-Look — SEO-Content-Sections bekommen Outer-Boxen
 *
 *  User-Feedback: Marketing-Sektionen wie ".features-grid" ("So
 *  einfach. Drei Klicks zum sauberen Foto.") und ".showcase"
 *  ("Sicher. Niemals auf einem Server.") sind auf Mobile als klar
 *  abgegrenzte Boxen erkennbar. Die 9 SEO-Content-Sections waren
 *  dagegen nackter Fließtext ohne visuelle Sektion-Trennung —
 *  alles eine lange Wand.
 *
 *  Fix: Auf Mobile (≤720px) bekommt jede .content-card (außer
 *  .highlight-card, die schon eine eigene Box hat) eine dezente
 *  surface-soft-Outer-Box mit Padding + Border-Radius. Innere
 *  Cards (.audience-item / .feature / .faq-list details) bleiben
 *  surface-weiß mit shadow — sie heben sich klar vom Outer ab,
 *  analog zur Marketing-Pattern (.feature-pillar weiß auf body).
 *  Listen ohne eigene Card (feature-list / howto-steps) werden
 *  zu Mini-Cards aufgewertet, damit auch Text-Sektionen visuell
 *  als strukturierte Stapel wirken.
 *
 *  Auf Desktop (>720px) bleibt der Apple-naked-Look erhalten.
 * ============================================================ */

/* 720px = Tablet portrait + Phone landscape */
@media (max-width: 720px) {
  /* Outer-Box für ALLE non-highlight Content-Cards */
  .content-card:not(.highlight-card) {
    background: var(--surface-soft);
    border-radius: var(--r-3);
    padding: var(--sp-5) var(--sp-4);
    /* kein box-shadow — Body sitzt eh auf hellem bg, plus die
     * Marketing-Sektionen haben auch keinen Outer-Shadow. */
  }

  /* feature-list (10+ Items in "What is metadata?" / "Why does
   * this matter?"): jeder Bullet wird zu einer dezenten Mini-Card
   * mit surface-Background (weiß auf surface-soft Outer = sichtbar
   * abgehoben). Padding-inline-start macht Platz für die Checkmark. */
  .content-card .feature-list { display: grid; gap: 6px; margin: var(--sp-3) 0 var(--sp-4); }
  .content-card .feature-list li {
    background: var(--surface);
    padding: 10px var(--sp-3) 10px var(--sp-7);
    border-radius: var(--r-1);
    margin-block-end: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .content-card .feature-list li::before {
    left: 12px; top: 12px;
  }

  /* howto-steps: numerierte Cards. ol-Marker bleibt außen
   * (list-style-position: outside), Background drinnen. */
  .content-card .howto-steps {
    padding-inline-start: var(--sp-6);
    margin: var(--sp-3) 0 var(--sp-4);
  }
  .content-card .howto-steps li {
    background: var(--surface);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-2);
    margin-block-end: var(--sp-2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .content-card .howto-steps li::marker {
    color: var(--indigo);
    font-weight: 700;
  }

  /* trust-list (in highlight-card): Items waren schon surface-soft
   * Pillen — auf der weißen highlight-card-Outer sehen sie sauber aus.
   * Nur padding etwas konsistenter zu den anderen List-Items. */
  .trust-list li { padding: 10px 14px; }

  /* compare-wrap: hat eigene border + r-2; auf surface-soft-Outer
   * sichtbar getrennt — keine Anpassung nötig. */

  /* feature-grid in der Outer-Box: Items behalten ihre weißen Cards
   * mit shadow und heben sich klar vom surface-soft Outer ab. */
}

/* 480px = Phone portrait — Outer-Box noch enger */
@media (max-width: 480px) {
  .content-card:not(.highlight-card) {
    padding: var(--sp-4) var(--sp-3);
    border-radius: var(--r-2);
  }
  .content-card .feature-list li {
    padding: 9px var(--sp-3) 9px var(--sp-6);
  }
  .content-card .feature-list li::before {
    left: 10px; top: 11px;
  }
  .content-card .howto-steps {
    padding-inline-start: var(--sp-5);
  }
  .content-card .howto-steps li {
    padding: var(--sp-3);
  }
}

/* 360px = sehr enge Phones */
@media (max-width: 360px) {
  .content-card:not(.highlight-card) {
    padding: var(--sp-3);
  }
  .content-card .feature-list li {
    padding: 8px var(--sp-2) 8px var(--sp-6);
    font-size: 0.86rem;
  }
  .content-card .howto-steps {
    padding-inline-start: var(--sp-5);
  }
}