/* =========================
   BNAC DPP – styles.css (komplett)
   ========================= */

/* ---- Design Tokens ---- */
:root{
  --bg: #ffffff;
  --text: #0f172a;          /* slate-900 */
  --muted: #64748b;         /* slate-500 */
  --brand: #2563eb;         /* blue-600 */
  --brand-weak: #dbeafe;    /* blue-100 */
  --panel: #f8fafc;         /* slate-50 */
  --panel-2: #f1f5f9;       /* slate-100 */
  --border: #e2e8f0;        /* slate-200 */
  --shadow: 0 1px 8px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;          /* near-navy */
    --text: #e5e7eb;        /* slate-200 */
    --muted: #94a3b8;       /* slate-400 */
    --brand: #60a5fa;       /* blue-400 */
    --brand-weak: #1e293b;  /* slate-800 */
    --panel: #0f172a;       /* slate-900 */
    --panel-2: #111827;     /* gray-900 */
    --border: #1f2937;      /* gray-800 */
    --shadow: 0 1px 12px rgba(0,0,0,.35);
  }
}

/* ---- Base ---- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }
code{ background: var(--panel-2); border:1px solid var(--border); padding:.15rem .35rem; border-radius:6px; }
.muted{ color: var(--muted); }

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- Header / Top Nav ---- */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.logo-img{ display:block; height:24px; width:auto; }
.brand-text{ font-weight:600; letter-spacing:.2px; }

/* Suche */
.nav-search{
  display:flex; align-items:center; gap:8px;
  margin-left: auto;
}
.input{
  appearance:none;
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  min-width: 250px;
}
.input::placeholder{ color: var(--muted); }
.btn{
  appearance:none;
  border:1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  cursor:pointer;
}
.btn:hover{ border-color: var(--brand); }
.btn.ghost{ background: transparent; }

/* Language toggle */
.lang-toggle{
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
.lang-toggle:hover{ border-color: var(--brand); }

/* ---- Hero ---- */
.hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel) 0%, transparent 100%);
}
.hero-inner{ padding: 16px 0 18px; }
.hero-breadcrumbs{ font-size:.92rem; }
.crumb{ color:var(--muted); }
.sep{ margin:0 6px; color: var(--muted); }

/* Bild links + Titel-/Text rechts */
.hero-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:6px 0 4px;
  flex-wrap:wrap;
}
.hero-head-text{
  min-width:260px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.hero-title{ margin:0; font-size: 1.8rem; font-weight: 700; letter-spacing:.2px; line-height:1.2; }
.hero-subtitle{ margin:2px 0 0; font-size:.98rem; }
.hero-desc{ margin-top:2px; max-width: 820px; }

.hero-badges{ margin-top:10px; display:flex; gap:8px; flex-wrap: wrap; }
.pill{
  display:inline-block;
  padding:4px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: .85rem;
}

/* Produktbild links */
.hero-img{
  display:inline-block;
  position:relative;
  cursor: zoom-in;
  border-radius: 12px;
}
.hero-img img{
  display:block;
  height: 96px;       /* Basisgröße */
  width:auto;
  max-width: 34vw;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.hero-img::after{
  content: '↗';
  position: absolute;
  right: 6px; bottom: 6px;
  font-size: .8rem;
  color: rgba(0,0,0,.35);
  background: rgba(255,255,255,.55);
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid var(--border);
  pointer-events: none;
}
@media (prefers-color-scheme: dark){
  .hero-img::after{
    color: rgba(255,255,255,.6);
    background: rgba(0,0,0,.35);
  }
}

/* Placeholder fürs Produktbild */
.hero-img.is-placeholder{ cursor: default; }
.hero-img.is-placeholder::after{ display: none; }
.hero-img.is-placeholder img{
  box-shadow: none;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 6px;
}

/* Dezente Meta-Actions im Hero */
.hero-meta-actions{
  margin-top: 6px;
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}
.action-link{
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  opacity: .9;
}
.action-link:hover{
  color: var(--text);
  text-decoration: none;
  opacity: 1;
}

/* ---- Sub-Navigation (unter Hero) ---- */
/* Sub-Navigation (nicht sticky, scrollt normal mit) */
.subnav{
  position: static;          /* <- statt sticky */
  top: auto;
  z-index: auto;
  background: transparent;   /* braucht keinen Hintergrund mehr */
  border-bottom: 1px solid var(--border);
  margin: 6px 0 14px;
}
.tabs{ display:flex; gap:8px; flex-wrap:wrap; padding: 10px 0; }
.tabs a{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background: var(--panel-2);
  color: var(--text);
}
.tabs a:hover{ border-color: var(--brand); }

/* Ankerziele nicht vom Sticky-Header/Subnav überdecken */
.anchor-target{ scroll-margin-top: 120px; }

/* ---- Main / Cards ---- */
.main{ padding: 14px 0 32px; }
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow);
  margin: 10px 0 16px;
}

/* ---- Templates & Gruppen ---- */
.templates{ display: grid; gap: 14px; }
.template{
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--panel-2);
}
.template > header{
  display:flex; align-items:center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}

/* Collapsible Gruppen via <details> */
details.group{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  margin: 8px 0 10px;
  overflow: hidden;
}
.group-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}
.group-summary .group-title{ font-weight: 600; }
.group-summary::-webkit-details-marker{ display:none; }
.group-summary::before{
  content: '▸';
  margin-right: 6px;
  transform: translateY(1px);
  transition: transform .18s ease;
  color: var(--muted);
}
details.group[open] .group-summary::before{ transform: rotate(90deg); }
details.group table{
  border-top: 1px solid var(--border);
  background: var(--panel);
  border-radius: 0 0 12px 12px;
}

/* ---- Tabellen (Attribute & Dokumente) ---- */
.attrs{
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: .98rem;
}
.attrs th, .attrs td{
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.attrs thead th{
  border-top: none;
  color: var(--muted);
  font-weight: 600;
  background: var(--panel);
}
.attrs tbody tr:hover{ background: var(--brand-weak); }

/* Einheitliche, feste Spaltenbreiten für Attribut-Tabellen */
.attrs.fixed{ table-layout: fixed; }
.attrs.fixed col.col-key{ width: clamp(220px, 40ch, 520px); }
.attrs.fixed col.col-val{ width: auto; }

/* Bessere Lesbarkeit der Label-Zelle */
.attr-label{ display:flex; flex-direction:column; gap:4px; }
.attr-label .small{ font-size: .92rem; }

/* Lange Inhalte in beiden Spalten schön umbrechen */
.attrs.fixed th, .attrs.fixed td{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Werte-Spalte optisch stabil */
.attrs.fixed td.val{ min-width: 240px; }

/* Dokumententabelle spezifisch */
#documents .attrs th, #documents .attrs td{ vertical-align: top; }
#documents .attrs td:nth-child(2){ white-space: normal; } /* Dateiname(n) darf umbrechen */

/* Mehr Abstand zwischen Label- und Value-Spalte (nur Desktop) */
@media (min-width: 1024px){
  .attrs.fixed col.col-key{ width: clamp(260px, 44ch, 560px); }
  .attrs.fixed th:nth-child(2),
  .attrs.fixed td.val{ padding-left: 24px; }
  /* Optional: dezente Trennlinie vor den Values */
  .attrs.fixed td.val{ border-left: 1px dashed var(--border); }
}

/* ---- Attribute: Bilddarstellung ---- */
.attr-image{ margin: 2px 0 6px; }
.attr-image a.zoomable{ display:inline-block; max-width:100%; cursor: zoom-in; position:relative; }
.attr-image img{
  display:block;
  max-width: min(100%, 560px);
  max-height: 38vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.attr-image figcaption{
  font-size: .9rem;
  color: var(--muted);
  margin-top: .35rem;
}
.attr-image a.zoomable::after{
  content: '↗';
  position: absolute;
  right: 8px; bottom: 8px;
  font-size: .85rem;
  color: rgba(0,0,0,.35);
  background: rgba(255,255,255,.55);
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  pointer-events: none;
}
@media (prefers-color-scheme: dark){
  .attr-image a.zoomable::after{
    color: rgba(255,255,255,.6);
    background: rgba(0,0,0,.35);
  }
}

/* ---- Status / Banner / Skeleton ---- */
.banner{
  background: var(--panel-2);
  border:1px solid var(--border);
  padding: 8px 10px;
  border-radius: 10px;
  margin: 8px 0;
}
.banner.success{ border-color: #16a34a; color:#16a34a; }
.banner.error{ border-color: #ef4444; color:#ef4444; }

.skeleton{
  height: 48px;
  background: linear-gradient(90deg, var(--panel-2), var(--panel), var(--panel-2));
  background-size: 200% 100%;
  border-radius: 12px;
  animation: shimmer 1.2s infinite;
  margin: 6px 0;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ---- Toast ---- */
#toast{
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 100;
}
.toast{
  min-width: 220px;
  max-width: 360px;
  background: var(--panel);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity: 1; transform: translateY(0); }
.toast .title{ margin: 0 0 4px; font-weight: 600; }

/* ---- Utilities ---- */
.hidden{ display:none !important; }
:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---- Responsive ---- */
@media (max-width: 900px){
  .nav-search .input{ min-width: 160px; }
  .hero-title{ font-size: 1.5rem; }
}
@media (max-width: 720px){
  .hero-subtitle{ font-size:.95rem; }
  .attrs th, .attrs td{ padding: 7px 8px; }
  .attrs.fixed col.col-key{ width: clamp(180px, 28ch, 400px); }
}
/* Produktbildgrößen nach Breakpoints */
@media (min-width: 1024px){
  .hero-img img{ height: 120px; max-width: 28vw; }
}
@media (min-width: 1440px){
  .hero-img img{ height: 140px; max-width: 24vw; }
}
@media (max-width: 640px){
  .hero-head{ gap:10px; }
  .hero-img img{ height: 80px; max-width: 60vw; }
}
/* =========================
   Responsive Tuning: Templates & Dokumente
   ========================= */

/* --- Tablet: Attribute-Tabellen (Label-Spalte schmaler) --- */
@media (max-width: 1024px){
  .attrs.fixed col.col-key{ width: clamp(180px, 30ch, 360px); }
  .attrs.fixed td.val{ padding-left: 16px; border-left: none; } /* weniger Abstand, keine Trennlinie */
}

/* --- Mobile: Attribute-Tabellen noch kompakter --- */
@media (max-width: 720px){
  .attrs.fixed col.col-key{ width: clamp(150px, 26ch, 300px); }
  .attrs.fixed td.val{ padding-left: 12px; }
}

/* =========================
   Dokumenten-Tabelle: Tablet & Mobile
   ========================= */

/* Tablet: table-layout + Umbrüche, definiertere Spaltenbreiten */
@media (max-width: 1024px){
  #documents table.attrs.docs{
    table-layout: fixed;
    font-size: .96rem;
  }
  #documents table.attrs.docs th,
  #documents table.attrs.docs td{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  /* Grobe Breitenvorgaben: passen sich an, sind aber weniger „klebend“ */
  #documents table.attrs.docs thead th:nth-child(1){ width: 26%; } /* Dokument */
  #documents table.attrs.docs thead th:nth-child(2){ width: 28%; } /* Dateiname(n) */
  #documents table.attrs.docs thead th:nth-child(3){ width: 18%; } /* Dateitypen */
  #documents table.attrs.docs thead th:nth-child(4){ width: 16%; } /* Klassifizierung */
  #documents table.attrs.docs thead th:nth-child(5){ width: 8%;  } /* Dateien */
  #documents table.attrs.docs thead th:nth-child(6){ width: 10%; } /* Download */
}

/* Mobile: Karten-Layout (jede Zeile = Block, mit Label links / Wert rechts) */
@media (max-width: 720px){
  /* Kopf ausblenden, Zeilen als Card */
  #documents table.attrs.docs thead{ display:none; }
  #documents table.attrs.docs,
  #documents table.attrs.docs tbody,
  #documents table.attrs.docs tr{
    display:block; width:100%;
  }
  #documents table.attrs.docs tr{
    background: var(--panel-2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px;
    margin:10px 0;
  }

  /* Zellen als 2-spaltiges Grid: Label (links) / Wert (rechts) */
  #documents table.attrs.docs td{
    display:grid;
    grid-template-columns: 36% 1fr; /* Labelbreite reduzieren -> Werte bekommen Platz */
    gap:8px 10px;
    border-top:none; /* Trennlinien in Card nicht nötig */
    padding:6px 0;
  }

  /* Erste Zelle (Dokumenttitel) etwas betonen */
  #documents table.attrs.docs td:first-child strong{ font-size:1rem; }

  /* Pseudo-Labels je Spalte (i18n via CSS-Variablen, siehe app.js) */
  #documents table.attrs.docs td:nth-child(1)::before{ content: var(--col1, "Dokument"); }
  #documents table.attrs.docs td:nth-child(2)::before{ content: var(--col2, "Dateiname(n)"); }
  #documents table.attrs.docs td:nth-child(3)::before{ content: var(--col3, "Dateitypen"); }
  #documents table.attrs.docs td:nth-child(4)::before{ content: var(--col4, "Klassifizierung"); }
  #documents table.attrs.docs td:nth-child(5)::before{ content: var(--col5, "Dateien"); }
  #documents table.attrs.docs td:nth-child(6)::before{ content: var(--col6, "Download"); }

  #documents table.attrs.docs td::before{
    color: var(--muted);
    font-weight:600;
  }

  /* Download-Button über volle Breite fixieren? (optional) */
  #documents table.attrs.docs td:last-child a.btn{
    width: fit-content;
  }
}

/* iPad / Tablet (Hochkant) – Download-Button einzeilig halten */
@media (min-width: 721px) and (max-width: 1024px){
  /* Spaltenverteilung etwas zugunsten der Action-Spalte anpassen */
  #documents .card table.attrs.docs thead th:nth-child(1){ width:24%; } /* Dokument */
  #documents .card table.attrs.docs thead th:nth-child(2){ width:26%; } /* Dateiname(n) */
  #documents .card table.attrs.docs thead th:nth-child(3){ width:16%; } /* Dateitypen */
  #documents .card table.attrs.docs thead th:nth-child(4){ width:14%; } /* Klassifizierung */
  #documents .card table.attrs.docs thead th:nth-child(5){ width:8%;  } /* Dateien */
  #documents .card table.attrs.docs thead th:nth-child(6){ width:12%; } /* Download */

  /* Button rechts ausrichten & nicht umbrechen lassen */
  #documents .card table.attrs.docs td:last-child{
    text-align: right;
    padding-left: 8px;
  }
  #documents .card table.attrs.docs td:last-child a.btn{
    display: inline-flex;
    align-items: center;
    white-space: nowrap;   /* <<< wichtig */
    font-size: .9rem;      /* leicht kleiner */
    line-height: 1;        /* kompakter */
    padding: 6px 10px;     /* kompakter */
  }
}

/* ===== Download-Icon im Dokumenten-Grid ===== */
.icon{ display:inline-block; vertical-align:middle; }
.icon-download{ width: 18px; height: 18px; margin-right: 6px; }

/* Auf Mobile: nur Icon zeigen, kein Text – spart Platz, kein Umbruch */
@media (max-width: 720px){
  .dl-btn{ padding: 6px 8px; }
  .dl-btn .dl-text{ display: none; }
  .icon-download{ margin-right: 0; }
}

/* iPad/Tablet Hochkant: Button einzeilig halten, rechts ausrichten */
@media (min-width: 721px) && (max-width: 1024px){
  #documents .card table.attrs.docs td:last-child{
    text-align: right;
    padding-left: 8px;
  }
  #documents .card table.attrs.docs td:last-child a.dl-btn{
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: .9rem;
    line-height: 1;
    padding: 6px 10px;
  }
}

/* ===== Datasheet: Value-Spalte größer, Label weniger dominant ===== */
/* Default / Desktop */
.attrs.fixed col.col-key{ width: clamp(200px, 32ch, 420px); }  /* vorher breiter */
@media (min-width: 1024px){
  .attrs.fixed col.col-key{ width: clamp(200px, 34ch, 420px); } /* Desktop etwas schmaler als zuvor */
  .attrs.fixed th:nth-child(2),
  .attrs.fixed td.val{ padding-left: 20px; }                     /* trotzdem Luft für Values */
}

/* Tablet */
@media (max-width: 1024px){
  .attrs.fixed col.col-key{ width: clamp(170px, 28ch, 340px); }
  .attrs.fixed td.val{ padding-left: 16px; border-left: none; }
}

/* Mobile */
@media (max-width: 720px){
  .attrs.fixed col.col-key{ width: clamp(140px, 24ch, 280px); }  /* Labels schmaler */
  .attrs.fixed td.val{ padding-left: 12px; }
}

/* Phones & Tablets: nur Download-Icon, kein Text */
@media (max-width: 1024px){
  .dl-btn{ padding: 6px 8px; }
  .dl-btn .dl-text{ display: none !important; } /* Text ausblenden */
  .icon-download{ margin-right: 0; }             /* Icon ohne Abstand */
}

/* Tablet (Hochkant & Quer): Spaltenbreite + Button einzeilig rechts */
@media (min-width: 721px) and (max-width: 1024px){
  #documents .card table.attrs.docs thead th:nth-child(6){ width: 8%; } /* Download-Spalte schmal */
  #documents .card table.attrs.docs td:last-child{
    text-align: right;
    padding-left: 8px;
  }
  #documents .card table.attrs.docs td:last-child a.dl-btn{
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    padding: 6px 8px;
  }
}

/* Download überall als Icon-only */
.dl-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
}
.dl-btn .dl-text{ display: none !important; }  /* Text weltweit ausblenden */
.icon{ display:inline-block; vertical-align:middle; }
.icon-download{ width: 18px; height: 18px; margin-right: 0; }

/* Spalte rechts ausrichten, damit’s sauber steht */
#documents .card table.attrs.docs td:last-child{
  text-align: right;
  padding-left: 8px;
}

/* (optional) Desktop: Download-Spalte etwas schmaler */
@media (min-width: 1025px){
  #documents .card table.attrs.docs thead th:nth-child(6){ width: 8%; }
}
/* ===== Datasheet (Templates) – Mobile: Values breiter, Labels schlanker ===== */
@media (max-width: 720px){
  /* prozentuale Spalten statt clamp → garantiert mehr Platz für Werte */
  .attrs.fixed { table-layout: fixed; }
  .attrs.fixed col.col-key{ width: 32% !important; }  /* Label */
  .attrs.fixed col.col-val{ width: 68% !important; }  /* Value */

  /* kompaktere Abstände und kein Divider, damit Breite nicht „verloren“ geht */
  .attrs.fixed th:nth-child(2),
  .attrs.fixed td.val{
    padding-left: 10px !important;
    border-left: none !important;
  }

  /* Werte optisch priorisieren */
  .attrs.fixed td.val{ font-size: 1rem; }
  .attr-label strong{ font-size: .95rem; }

  /* lange Beschreibungen unter Labels sanft kürzen statt alles zu verdrängen */
  .attr-label .small{
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* max. 2 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* kein Überlaufen in Value-Zelle */
  .attrs.fixed td.val code{
    white-space: normal;
    word-break: break-word;
  }
}

/* ===== (Optional) Tablet leicht bevorzugt die Value-Spalte ===== */
@media (min-width: 721px) and (max-width: 1024px){
  .attrs.fixed col.col-key{ width: 38% !important; }  /* vorher 40–44% */
  .attrs.fixed th:nth-child(2),
  .attrs.fixed td.val{ padding-left: 14px; border-left: none; }
}

/* QR-Card */
.qr-wrap{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
#qr-code canvas, #qr-code img{
  display:block;
  width: 200px; height: 200px;       /* sichtbare Größe */
  image-rendering: pixelated;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
@media (min-width: 1024px){
  #qr-code canvas, #qr-code img{ width: 240px; height: 240px; }
}

/* ===== 1) Global: niemals horizontales Scrollen ===== */
html, body { width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* Medien verkleinern sich immer in den Container */
img, canvas, svg, video { max-width: 100%; height: auto; }

/* Wrapper dürfen nie breiter als die Seite werden */
header, main, section, .card, .hero-head, .qr-wrap, .nav-sub { max-width: 100%; }

/* ===== 2) Hero-Bereich – flexibler auf Mobile ===== */
.hero-head { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-head > * { min-width: 0; } /* erlaubt Schrumpfen */
.hero-img { display: block; max-width: 40vw; }      /* Bildseite */
.hero-img img { width: clamp(80px, 28vw, 180px); }  /* nie zu breit */

/* ===== 3) QR-Code nie zu groß für kleine Geräte ===== */
#qrcode .qr-wrap { flex-wrap: wrap; }
#qr-code canvas, #qr-code img{
  width: clamp(140px, 60vw, 240px);
  height: auto;
}

/* ===== 4) Tabellen: brechen statt überlaufen ===== */
table { width: 100%; border-collapse: collapse; }
th, td { min-width: 0; }
.attrs.fixed td,
.attrs.fixed th { word-break: break-word; overflow-wrap: anywhere; }

/* ===== 5) Dokumentenliste: Buttons & Zellen zwingen keinen Overflow ===== */
#documents .attrs.docs td:last-child { text-align: right; }
#documents .attrs.docs a.dl-btn{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: nowrap;
}

/* ===== 6) Sticky Sub-Navigation sicher am Rand fixieren ===== */
.nav-sub { position: sticky; top: var(--header-height, 0); left: 0; right: 0; }

/* ===== 7) Sichere Innenabstände – inkl. Notch (iOS) ===== */
main, .page, .container{
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* Header: Reihenfolge korrigieren */
.site-header,
.header-inner{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;     /* darf umbrechen */
}

/* Elemente gezielt sortieren */
.header-brand{ order: 0; }   /* Logo + "BNAC DPP" */
.header-actions{ order: 2; } /* z.B. Language-Button etc. */
.header-search{ order: 1; }  /* Suchleiste NACH Titel/Brand */

/* Desktop: Titel links, Suche rechts, Actions ganz rechts */
@media (min-width: 1025px){
  .header-inner{ flex-wrap: nowrap; }
  .header-brand{ order: 0; }
  .header-search{ order: 1; margin-left: auto; max-width: 540px; width: 100%; }
  .header-actions{ order: 2; margin-left: 12px; }
}

/* Mobile/Tablet: Suche unter dem Titel, volle Breite */
@media (max-width: 1024px){
  .header-brand{ flex: 1 1 100%; }
  .header-search{ flex: 1 1 100%; }
  .header-search input{
    width: 100%;
  }
}

/* Optional: Suchfeld-Optik */
.header-search input[type="search"],
.header-search input[type="text"]{
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
}

/* ==== Header-Layout fix für deine Klassen ==== */
.nav-inner{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;           /* darf umbrechen */
}

/* Reihenfolge definieren: Brand -> Suche -> Sprache */
.nav .brand{ order: 0; }
.nav .nav-search{ order: 1; }
.nav .lang-toggle{ order: 2; }

/* Desktop: Marke links, Suche mittig (breit), Sprache rechts */
@media (min-width: 1025px){
  .nav-inner{ flex-wrap: nowrap; }
  .nav .brand{ flex: 0 0 auto; }
  .nav .nav-search{
    margin-left: auto;
    flex: 0 1 520px;         /* Suchleiste nimmt Platz, bricht aber nicht um */
    max-width: 520px;
    width: 100%;
  }
  .nav .lang-toggle{ flex: 0 0 auto; }
}

/* Tablet & Mobile: erst Brand, dann Suche, dann Sprache – alle vollbreit */
@media (max-width: 1024px){
  .nav .brand{ flex: 1 1 100%; }
  .nav .nav-search{ flex: 1 1 100%; }
  .nav .nav-search .input{ width: 100%; }
  .nav .lang-toggle{ flex: 0 0 auto; }
}

/* Falls frühere Regeln die Reihenfolge umwerfen: hart überschreiben */
.nav .brand,
.nav .nav-search,
.nav .lang-toggle{
  order: initial; /* reset */
}
.nav .brand{ order: 0 !important; }
.nav .nav-search{ order: 1 !important; }
.nav .lang-toggle{ order: 2 !important; }