/* /css/transparenz.css
   Transparenz-Portal (DE)
   Notes:
   - Uses site tokens if available: --border, --surface
   - Has safe fallbacks for standalone rendering

   Changes (reputation-safe / no-regression intent):
   - Keep Desktop + iPhone 14 Pro Max (≈430px) behavior intact
   - Fix 640–700px "in-between" state by scoping fixed language switch to <=640px
   - Add <=390px micro-breakpoint for very small phones (320–390px)

   Safety-Mode:
   - px -> rem 1:1 (16px basis) where used
   - Breakpoints converted to rem equivalents
*/

/* =========================
   Page hero
   ========================= */
.page-hero { padding: 2.75rem 0 1.125rem; } /* 44px 0 18px */
.page-hero h1 { margin: 0 0 0.625rem; }     /* 10px */
.page-hero p { margin: 0 0 0.875rem; }      /* 14px */

/* =========================
   Hero title row + language switch + socials
   ========================= */

/* Row: H1 left, socials middle, language switch right */
.hero-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem; /* 16px */
  min-width: 0;

  /* Abstand zwischen Titel/Socials/Language und folgendem Content */
  margin-bottom: 1.75rem; /* 28px */
}

/* Reset H1 spacing (Hero already controls margins) */
.hero-title-row h1 {
  margin: 0;
  flex: 0 0 auto;
}

/* Socials container (in title row, between h1 and lang switch) */
.page-hero .hero-socials.hero-socials-top {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* Social list – desktop: single row like Whitepaper */
.page-hero .hero-socials.hero-socials-top .social-list {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  flex-wrap: nowrap;          /* desktop: 1 row */
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Social pill */
.page-hero .hero-socials .social-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem; /* 7px */
  padding: 0.4375rem 0.75rem; /* 7px 12px */
  border-radius: 999px;

  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.2;

  color: var(--ink-muted, rgba(226,232,240,.78));
  text-decoration: none;

  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);

  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.15s ease;
}

/* Hover/Focus – calm, institutional */
.page-hero .hero-socials .social-list a:hover,
.page-hero .hero-socials .social-list a:focus-visible {
  color: var(--ink, rgba(255,255,255,.92));
  border-color: rgba(92,200,255,0.35);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0.625rem 1.375rem rgba(0,0,0,0.26); /* 10px 22px */
  text-decoration: none;
}

.page-hero .hero-socials .social-list a:focus-visible {
  outline: 0.1875rem solid rgba(92,200,255,0.45); /* 3px */
  outline-offset: 0.125rem; /* 2px */
}

/* Social icon sizing (safe defaults; works with your <img>) */
.page-hero .hero-socials .social-icon {
  width: 1rem;  /* 16px */
  height: 1rem; /* 16px */
  opacity: 0.92;
  flex: 0 0 auto;
}

/* Language switch container */
.hero-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;               /* never compress into H1/socials */
}

/* Label */
.hero-lang-switch .tiny-muted {
  opacity: 0.65;
}

/* Active language */
.hero-lang-switch .badge[aria-current="page"] {
  border-color: rgba(92,200,255,0.45);
  background: rgba(92,200,255,0.14);
}

/* =========================
   Badges
   ========================= */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0; /* 12px 0 0 */
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  background: linear-gradient(180deg, var(--surface, rgba(255,255,255,0.06)), transparent);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.875rem;
  white-space: nowrap; /* Badge nie buchstabenweise umbrechen */
  max-width: 100%;
}
.badge .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
}
.badge.live .dot { background: #22c55e; }
.badge.planned .dot { background: #f59e0b; }
.badge.deprecated .dot { background: #ef4444; }
.badge.deployed .dot { background: #5cc8ff; } /* deployed but not active */

/* =========================
   Section title
   ========================= */
.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem; /* 12px */
  margin: 0 0 0.875rem; /* 14px */
  min-width: 0;
}
.section-title h2 { margin: 0; }

.meta-inline {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
}
.meta-top { margin-top: 0.625rem; } /* 10px */

/* =========================
   Mono
   ========================= */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* =========================
   Layout grids
   ========================= */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* 16px */
}
@media (min-width: 61.25rem) { /* 980px */
  .grid-2 { grid-template-columns: 1.05fr 0.95fr; }
}

/* Critical: allow grid children to shrink (prevents right-edge clipping) */
.grid-2 > div,
.grid-2 > aside { min-width: 0; }

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem; /* 14px */
}
@media (min-width: 51.25rem) { /* 820px */
  .cards { grid-template-columns: 1fr 1fr; }
}
.cards > * { min-width: 0; }

/* =========================
   Cards
   ========================= */
.card {
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  border-radius: 1rem; /* 16px */
  background: linear-gradient(180deg, var(--surface, rgba(255,255,255,0.06)), transparent);
  padding: 1rem; /* 16px */
  min-width: 0;
}
.card h3, .card h4 { margin: 0 0 0.625rem; } /* 10px */
.card p { margin: 0 0 0.625rem; overflow-wrap: break-word; word-break: normal; }
.card .muted { opacity: 0.8; }

/* =========================
   KV blocks
   ========================= */
.kv {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px */
  margin: 0.5rem 0 0; /* 8px */
  min-width: 0;
}
.kv .row {
  display: flex;
  gap: 0.625rem; /* 10px */
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.kv .k { min-width: 11.25rem; opacity: 0.8; } /* 180px */

/* =========================
   Address rows
   ========================= */
.addr {
  display: flex;
  gap: 0.625rem; /* 10px */
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.addr a { color: inherit; text-decoration: none; }
.addr a:hover { text-decoration: underline; }

/* =========================
   Button row + buttons
   ========================= */
.btn-row {
  display: flex;
  gap: 0.625rem; /* 10px */
  flex-wrap: wrap;
  margin-top: 0.75rem; /* 12px */
  min-width: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.75rem; /* 12px */
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
}
.btn:hover { background: rgba(255,255,255,0.07); }
.btn-primary { border-color: rgba(92,200,255,0.38); background: rgba(92,200,255,0.10); }
.btn-secondary { border-color: rgba(255,255,255,0.18); }

.btn.copy-btn.is-success { border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.12); }
.btn.copy-btn.is-error { border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.12); }

/* =========================
   Notes
   ========================= */
.note {
  border-left: 0.1875rem solid rgba(92,200,255,0.55); /* 3px */
  padding: 0.75rem 0.875rem; /* 12px 14px */
  border-radius: 0.75rem; /* 12px */
  background: rgba(92,200,255,0.06);
  border: 1px solid rgba(92,200,255,0.18);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.danger {
  border-left: 0.1875rem solid rgba(239,68,68,0.6); /* 3px */
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.18);
}

/* =========================
   Typography helpers
   ========================= */
.small { font-size: 0.95rem; }
.tiny { font-size: 0.875rem; opacity: 0.78; }

.list { margin: 0.5rem 0 0; padding-left: 1.125rem; } /* 8px / 18px */
.list li { margin: 0.375rem 0; overflow-wrap: break-word; word-break: normal; } /* 6px */

/* =========================
   Tables
   ========================= */
.table-wrap {
  border-radius: 0.875rem; /* 14px */
  overflow: visible;  /* kein Clipping */
  min-width: 0;
}

.table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem; /* 8px */
  table-layout: auto;
}

.table th, .table td {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 0.625rem 0.5rem; /* 10px 8px */
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
  min-width: 0;
}

.table th {
  opacity: 0.85;
  font-weight: 600;
  white-space: nowrap; /* Header nie umbrechen */
}

/* Standard-Links in Tabellen: normaler Umbruch (nicht "anywhere") */
.table td a {
  overflow-wrap: break-word;
  word-break: normal;
}

/* =========================
   Details / FAQ
   ========================= */
details {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.875rem; /* 14px */
  padding: 0.625rem 0.75rem; /* 10px 12px */
  background: rgba(255,255,255,0.03);
}
details + details { margin-top: 0.625rem; } /* 10px */

summary {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem; /* 10px */
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "▾";
  opacity: 0.75;
  font-size: 1rem;
  line-height: 1;
}
details[open] summary::after { content: "▴"; }

/* =========================
   Focus visibility
   ========================= */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 0.125rem solid rgba(92,200,255,0.55); /* 2px */
  outline-offset: 0.125rem; /* 2px */
  border-radius: 0.75rem; /* 12px */
}

/* =========================
   Skip link
   ========================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 0.75rem; /* 12px */
  top: 0.75rem;  /* 12px */
  width: auto;
  height: auto;
  z-index: 9999;
  background: rgba(92,200,255,0.12);
  border: 1px solid rgba(92,200,255,0.3);
  padding: 0.6rem 0.8rem;
  border-radius: 0.75rem; /* 12px */
}

/* =========================================================
   MOBILE: Quick Verify Table – keep Status visible, avoid clipping
   - deterministic widths: Item | Wert | Status
   - no letter stacking
   - addresses: single line (ellipsis)
   ========================================================= */
@media (max-width: 40rem) { /* 640px */

  /* Title row becomes stacked: H1 -> Socials -> Language */
  .hero-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem; /* 8px */
  }

  /* Socials: wrap nicely (3x2 grid like Whitepaper) */
  .page-hero .hero-socials.hero-socials-top {
    width: 100%;
    justify-content: flex-start;
  }

  .page-hero .hero-socials.hero-socials-top .social-list {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    gap: 0.625rem 0.75rem; /* 10px 12px */
  }

  .hero-lang-switch {
    margin-top: 0.125rem; /* 2px */
  }

  /* Table MUST distribute width deterministically */
  .table {
    table-layout: fixed; /* key to prevent Status disappearing */
    width: 100%;
  }

  /* Column widths */
  .table th:first-child,
  .table td:first-child {
    width: 7.8rem;       /* Item */
    white-space: nowrap;
  }

  .table th:last-child,
  .table td:last-child {
    width: 7.2rem;       /* Status stays visible */
    white-space: nowrap;
  }

  /* Wert gets the remaining space */
  .table th:nth-child(2),
  .table td:nth-child(2) {
    width: auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Addresses: ellipsis (no wrapping, no stacking) */
  .table td.mono a {
    display: block;      /* ellipsis reliable in table */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Status badge must not expand column */
  .table td:last-child .badge {
    max-width: 100%;
    min-width: 7.2rem;
    justify-content: center;
  }
}

/* =========================================================
   EXTRA-SMALL PHONES: tighten grid + table widths (320–390px)
   - does NOT affect iPhone 14 Pro Max (≈430px)
   ========================================================= */
@media (max-width: 24.375rem) { /* 390px */
  /* Socials: avoid overflow on very small screens */
  .page-hero .hero-socials.hero-socials-top .social-list {
    grid-template-columns: repeat(2, max-content);
    gap: 0.625rem 0.625rem; /* 10px 10px */
  }

  /* Table columns: slightly tighter to preserve Status */
  .table th:first-child,
  .table td:first-child { width: 7.2rem; }

  .table th:last-child,
  .table td:last-child { width: 6.8rem; }

  /* Badges: minimal density increase */
  .badge {
    font-size: 0.84rem;
    padding: 0.32rem 0.55rem;
  }
}

/* =========================================================
   Transparenz: Language Switch – Mobile fine tuning ONLY
   (Position + size/density via variables)
   - scoped to <=640px to avoid the 641–700px in-between state
   ========================================================= */
@media (max-width: 40rem) { /* 640px */
  :root {
    /* Position (nur Mobile) */
    --tp-lang-top: 0.75rem;   /* 12px */
    --tp-lang-right: 0.75rem; /* 12px */

    /* Optional: Dichte / Größe */
    --tp-lang-font: 0.85rem;
    --tp-lang-gap: 0.5rem; /* 8px */
    --tp-lang-pad-y: 0.375rem; /* 6px */
    --tp-lang-pad-x: 0.625rem; /* 10px */

    /* Optional: Z-Layer */
    --tp-lang-z: 49;
  }

  .hero-lang-switch {
    position: fixed;
    top: var(--tp-lang-top);
    right: var(--tp-lang-right);
    z-index: var(--tp-lang-z);

    display: inline-flex;
    align-items: center;
    gap: var(--tp-lang-gap);

    margin: 0;
    white-space: nowrap;
    font-size: var(--tp-lang-font);
  }

  /* Badge sizing on mobile, without touching global badge styles */
  .hero-lang-switch .badge {
    padding: var(--tp-lang-pad-y) var(--tp-lang-pad-x);
    line-height: 1.1;
  }

  /* "Sprache:" label optionally smaller/softer */
  .hero-lang-switch .tiny-muted {
    font-size: 0.82em;
  }
}

@media (max-width: 26.25rem) { /* 420px */
  :root {
    --tp-lang-top: 0.625rem;   /* 10px */
    --tp-lang-right: 0.625rem; /* 10px */
    --tp-lang-font: 0.82rem;
    --tp-lang-gap: 0.4375rem;  /* 7px */
    --tp-lang-pad-y: 0.3125rem; /* 5px */
    --tp-lang-pad-x: 0.5625rem; /* 9px */
  }
}

@media print {
  .hero-lang-switch { display: none !important; }
}