/* ===== Hero ===== */
.hero--glossar{
  background:linear-gradient(135deg,#2d3e50,#3b4f63);
  color:#fff;
  padding:2.4rem 1rem;
  text-align:center;
}
.hero--glossar .hero-text{max-width:920px;margin:0 auto}

/* ===== Toolbar (Suche + Filter) ===== */
.glossar-toolbar{
  display:flex;gap:.5rem;justify-content:center;align-items:center;
  margin:1rem auto;max-width:820px;
}
.glossar-toolbar input[type=search]{
  flex:1;min-width:260px;padding:.6rem 1rem;border:1px solid #cfd6de;border-radius:.55rem;
}
.btn-chip{
  padding:.45rem .8rem;border:1px solid #d9dee5;background:#f7f8fa;border-radius:999px;cursor:pointer;
}
.btn-chip[aria-pressed=true]{background:#2d3e50;color:#fff;border-color:#2d3e50}

/* ===== Sektionen ===== */
.faq-section{max-width:860px;margin:1.25rem auto}
.faq-section h2{margin:.25rem 0 1rem}

/* ===== Liste & Items – IMMER EINSPALTIG ===== */
.faq-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:.9rem;
}

/* FAQ-Item (Details/Accordion) */
.faq-item details{
  border:1px solid #e8edf2;border-radius:.6rem;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.faq-item summary{
  cursor:pointer;padding:.9rem 1rem;font-weight:600;list-style:none;
}
.faq-item details[open]{box-shadow:0 4px 14px rgba(0,0,0,.06)}
.faq-item .faq-a{padding:.5rem 1rem 1rem}

/* Caret */
.faq-item summary::marker{content:""}
.faq-item summary::after{content:"▾";float:right;transition:transform .15s ease}
.faq-item details[open] summary::after{transform:rotate(180deg)}

/* ===== Codeblock mit Copy-Fähnchen ===== */
.codebox{ position:relative; }
.codebox pre{
  margin:0;
  padding:1rem 2.75rem 1rem 1rem; /* rechts Platz für Button */
  background:#0f172a;
  color:#eaeaea;
  border-radius:.6rem;
  overflow:auto;
}
.codebox .btn-copy{
  position:absolute;
  top:.5rem; right:.5rem;               /* „Fähnchen“ */
  padding:.3rem .6rem;
  font-size:.8rem;
  background:#fff;
  border:1px solid #cfd6de;
  border-radius:.4rem;
  cursor:pointer;
  opacity:.85;
  transition:opacity .2s, background .2s, border-color .2s;
}
.codebox .btn-copy:hover{ opacity:1; }
.codebox .btn-copy.copied{
  background:#e7f8ed;
  border-color:#b5e2c5;
}
/* Optional: unten rechts, wenn du die Klasse .codebox--br ergänzt */
.codebox.codebox--br .btn-copy{ top:auto; bottom:.5rem; }

/* Sicherheitsnetz */
.glossar-page section{opacity:1 !important;transform:none !important}

/* Tastaturfokus besser sichtbar */
.faq-item summary:focus-visible{
  outline:2px solid #2d3e50; outline-offset:3px; border-radius:.4rem;
}

/* Bild größer, Logo nicht abgeschnitten */
.cta-pop__media{
  width: 96px; height: 96px;            /* größer als vorher */
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: none;                     /* keine Kante */
  background: #fff;                     /* Weißer Hintergrund für Logos */
}
.cta-pop__media img{
  width: 100%; height: 100%;
  object-fit: contain;                  /* Logo wird vollständig gezeigt */
}

/* Aktionen: gleiche Farbe für beide Buttons */
.cta-pop__actions .btn{
  flex: 1;                              /* gleich breit */
  text-align: center;
}
.cta-pop__actions .btn + .btn{
  margin-left: 0;                       /* gleichmäßiger Abstand via flex-gap */
}
.cta-pop__actions .btn-primary,
.cta-pop__actions .btn-secondary{
  background: #2d3e50;                  /* gleiche Grundfarbe */
  color: #fff;
  border: 1px solid #2d3e50;
}
.cta-pop__actions .btn-primary:hover,
.cta-pop__actions .btn-secondary:hover{
  background: #3b4f63;                  /* etwas heller beim Hover */
  border-color: #3b4f63;
}

/* Close-Button: ohne graue Box, nur Icon in Blau */
.cta-pop__close{
  position: absolute;
  right: .6rem; top: .6rem;
  background: none;
  border: none;
  width: 34px; height: 34px;
  color: #2d3e50;                       /* blaue Farbe für das Icon */
  cursor: pointer;
}
.cta-pop__close:hover{
  color: #3b4f63;
}
/* === CTA-Pop unten wie Bottom-Sheet, mit Consent-Offset === */
.cta-pop{
  --consent-offset: 0px;                 /* wird per JS gesetzt */
  position: fixed; left: 0; right: 0;
  bottom: calc(12px + var(--consent-offset));
  display: flex; justify-content: center;
  z-index: 2147483647;
}
.cta-pop[hidden]{ display:none; }

.cta-pop__card{
  width: min(860px, calc(100% - 16px));
  background:#fff; border:1px solid #e8edf2; border-radius:.8rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  position: relative; padding: 1rem 1rem 1rem 1rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
}
.cta-pop[data-show="true"] .cta-pop__card{ opacity:1; transform:none; }

/* Inhalt nebeneinander, mobil stapeln */
.cta-pop__inner{ display:flex; gap:1rem; align-items:flex-start; }
@media (max-width: 640px){
  .cta-pop__inner{ flex-direction: column; align-items: stretch; }
}

/* Logo groß & vollständig anzeigen */
.cta-pop__media{
  width: 96px; height: 96px;
  border-radius:.6rem; overflow:hidden; background:#fff;
  flex: 0 0 auto;
}
.cta-pop__media img{ width:100%; height:100%; object-fit:contain; }

/* Titel/Text-Abstand */
.cta-pop__title{ margin:.1rem 0 .35rem; font-size:1.15rem; }
.cta-pop__text{ margin:0 0 .6rem; line-height:1.45; }

/* Aktionen: gleiche Farbe & Breite */
.cta-pop__actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.cta-pop__actions .btn{ flex:1 1 200px; text-align:center; }
.cta-pop__actions .btn-primary,
.cta-pop__actions .btn-secondary{
  background:#2d3e50; color:#fff; border:1px solid #2d3e50;
}
.cta-pop__actions .btn-primary:hover,
.cta-pop__actions .btn-secondary:hover{
  background:#3b4f63; border-color:#3b4f63;
}

/* Close-Button: nur Icon, keine graue Box */
.cta-pop__close{
  position:absolute; right:.6rem; top:.6rem;
  width:34px; height:34px; display:grid; place-items:center;
  background:none; border:none; color:#2d3e50; cursor:pointer;
}
.cta-pop__close:hover{ color:#3b4f63; }
.cta-pop__close:focus-visible{
  outline:2px solid #2d3e50; outline-offset:2px; border-radius:.4rem;
}

/* ===== Mobile Tweaks ===== */

/* Tablet und kleiner */
@media (max-width: 768px){
  /* Hero kompakter & besser lesbar */
  .hero--glossar{ padding:1.25rem 1rem; text-align:left; }
  .hero--glossar .hero-text{ max-width:640px; }
  .hero--glossar h1{ font-size:1.8rem; line-height:1.25; margin:0 0 .5rem; }
  .hero--glossar p{  font-size:1rem;  line-height:1.45; margin:.25rem 0 0; }

  /* Toolbar untereinander statt nebeneinander */
  .glossar-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
    max-width:640px;
  }
  .glossar-toolbar input[type=search]{ min-width:0; width:100%; }
  .btn-chip{ width:100%; padding:.6rem .9rem; }

  /* FAQ-Abstände etwas luftiger auf Touch */
  .faq-item summary{ padding:.8rem 1rem; }
  .faq-item .faq-a{  padding:.6rem 1rem 1rem; }
}

/* Kleine Phones */
@media (max-width: 480px){
  .hero--glossar h1{ font-size:1.55rem; }
  .glossar-toolbar{ gap:.5rem; }
  .btn-chip{ font-size:.95rem; border-radius:.55rem; }
  .codebox pre{ font-size:.95rem; }
}

/* ===== CTA-Pop (Bottom-Sheet) – mobil noch freundlicher ===== */
@media (max-width: 768px){
  .cta-pop__card{
    width: calc(100% - 16px);
    padding: .9rem;
  }
  .cta-pop__inner{ flex-direction:column; gap:.75rem; }
  .cta-pop__media{ width:72px; height:72px; border-radius:.5rem; }
  .cta-pop__title{ font-size:1.05rem; margin:.1rem 0 .3rem; }
  .cta-pop__text{ font-size:.98rem; }
  .cta-pop__actions{ gap:.5rem; }
  .cta-pop__actions .btn{ flex:1 1 100%; padding:.7rem 1rem; }
  .cta-pop__close{ right:.4rem; top:.4rem; width:30px; height:30px; }
}

/* iOS-Safe-Area am unteren Rand berücksichtigen */
.cta-pop{
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* ===== Mobile Tweaks ===== */

/* Tablet und kleiner */
@media (max-width: 768px){
  /* Hero kompakter & besser lesbar */
  .hero--glossar{ padding:1.25rem 1rem; text-align:left; }
  .hero--glossar .hero-text{ max-width:640px; }
  .hero--glossar h1{ font-size:1.8rem; line-height:1.25; margin:0 0 .5rem; }
  .hero--glossar p{  font-size:1rem;  line-height:1.45; margin:.25rem 0 0; }

  /* Toolbar untereinander statt nebeneinander */
  .glossar-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
    max-width:640px;
  }
  .glossar-toolbar input[type=search]{ min-width:0; width:100%; }
  .btn-chip{ width:100%; padding:.6rem .9rem; }

  /* FAQ-Abstände etwas luftiger auf Touch */
  .faq-item summary{ padding:.8rem 1rem; }
  .faq-item .faq-a{  padding:.6rem 1rem 1rem; }
}

/* Kleine Phones */
@media (max-width: 480px){
  .hero--glossar h1{ font-size:1.55rem; }
  .glossar-toolbar{ gap:.5rem; }
  .btn-chip{ font-size:.95rem; border-radius:.55rem; }
  .codebox pre{ font-size:.95rem; }
}

/* ===== CTA-Pop (Bottom-Sheet) – mobil noch freundlicher ===== */
@media (max-width: 768px){
  .cta-pop__card{
    width: calc(100% - 16px);
    padding: .9rem;
  }
  .cta-pop__inner{ flex-direction:column; gap:.75rem; }
  .cta-pop__media{ width:72px; height:72px; border-radius:.5rem; }
  .cta-pop__title{ font-size:1.05rem; margin:.1rem 0 .3rem; }
  .cta-pop__text{ font-size:.98rem; }
  .cta-pop__actions{ gap:.5rem; }
  .cta-pop__actions .btn{ flex:1 1 100%; padding:.7rem 1rem; }
  .cta-pop__close{ right:.4rem; top:.4rem; width:30px; height:30px; }
}

/* iOS-Safe-Area am unteren Rand berücksichtigen */
.cta-pop{
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* iOS/Safari: verhindert Schrift-Aufblasen beim Öffnen von <details> */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Keine horizontale Überbreite mehr */
.faq-section,
.faq-list,
.faq-item,
.faq-item details,
.faq-item summary,
.faq-item .faq-a{
  box-sizing: border-box;
  max-width: 100%;
}

/* Lange Wörter/Begriffe sicher umbrechen (deutsche Komposita, Code etc.) */
.faq-item summary,
.faq-item .faq-a{
  overflow-wrap: anywhere;   /* moderne Variante */
  word-break: break-word;    /* Fallback */
  hyphens: auto;             /* Browser darf Silbentrennung nutzen */
}

/* Mobile: etwas kleinere Typo & kompaktere Abstände, damit nichts „zu groß“ wirkt */
@media (max-width: 640px){
  .container{ padding-left: 14px; padding-right: 14px; } /* Sicherheitsrand */
  .faq-item summary{
    font-size: 1rem;
    padding: .7rem .9rem;
  }
  .faq-item .faq-a{
    font-size: .95rem;
    line-height: 1.45;
    padding: .5rem .9rem 1rem;
  }
}

/* Hartnäckige horizontale Scrollbars verhindern (nur als Airbag) */
body{ overflow-x: hidden; }
	
	/* --- iOS: Schrift-Aufblasen NUR im FAQ-Accordion hart unterbinden --- */
@supports (-webkit-touch-callout: none) {
  .faq-item,
  .faq-item * {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
  /* besonders kritisch: summary und der geöffnete Inhalt */
  .faq-item summary,
  .faq-item details[open] .faq-a {
    -webkit-text-size-adjust: none !important; /* absolut keine Auto-Anpassung */
    text-size-adjust: none !important;
  }
}

/* Breite wirklich einschränken – Safari-sicher */
.faq-item details{ width:100%; max-width:100%; overflow:hidden; }
.faq-item summary{ display:block; max-width:100%; }
.faq-item .faq-a{ max-width:100%; }

/* Umbrechen erzwingen, falls irgendwo lange Begriffe sind */
.faq-item summary,
.faq-item .faq-a{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* Mobile: feste, kleinere Größen, damit iOS nicht „meint“ es sei zu klein/zu groß */
@media (max-width: 430px){
  .faq-item summary{ font-size:1rem; line-height:1.35; }
  .faq-item .faq-a   { font-size:.98rem; line-height:1.45; }
	

@media (max-width: 430px){
  .faq-item summary{ font-size:1rem; line-height:1.35; }   /* ok: 16px */
  .faq-item .faq-a   { font-size:1rem; line-height:1.45; } /* min. 16px */
}
}
	
html, body, .faq-item, .faq-item * {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
	
	/* iPhone/kleine Phones: geöffnete FAQ-Antwort begrenzen */
@media (max-width: 480px){
  /* Die geöffnete Antwort bekommt eine Max-Höhe und scrollt intern */
  .faq-item details[open] .faq-a{
    max-height: 55vh;                 /* nimmt höchstens ~halbe bis 2/3 Bildschirmhöhe */
    overflow: auto;
    -webkit-overflow-scrolling: touch;/* sanftes Scrollen in iOS */
    padding-right: .9rem;             /* Platz für die Scrollbar */
  }

  /* Überschrift nicht übertrieben groß */
  .faq-item summary{
    font-size: 1rem;
    line-height: 1.35;
    padding: .7rem .9rem;
  }

  /* Text in der Antwort gut lesbar, aber kompakt */
  .faq-item .faq-a{
    font-size: 1rem;                  /* >=16px, verhindert iOS-Zoom */
    line-height: 1.5;
    padding: .55rem .9rem 1rem;
  }

  /* Codeblöcke etwas kompakter, bleiben aber scrollbar */
  .codebox pre{
    font-size: .92rem;
    max-width: 100%;
    overflow: auto;                   /* verhindert horizontales „Aufblasen“ */
  }
}

/* Sicherheitsnetz: nichts darf breiter als der Viewport werden */
.faq-item, .faq-item *, .codebox pre{
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
	
	/* iOS: Text-Inflation global aus */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* iOS: innerhalb des Accordions hart abschalten (hohe Spezifität + !important) */
@supports (-webkit-touch-callout:none){
  .glossar-page .faq-list .faq-item,
  .glossar-page .faq-list .faq-item *{
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}

/* Phone: geöffnete Antwort clampen und intern scrollen */
@media (max-width: 480px){
  .glossar-page .faq-list .faq-item details[open] .faq-a{
    max-height: 58vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: .9rem; /* Platz für Scrollbar */
  }
  /* etwas kompakter, damit iOS gar nicht erst inflaten will */
  .glossar-page .faq-list .faq-item summary{ font-size:1rem; line-height:1.35; }
  .glossar-page .faq-list .faq-item .faq-a{  font-size:1rem; line-height:1.5; }
}

/* Keine Überbreite durch lange Wörter/Code */
.glossar-page .faq-list .faq-item,
.glossar-page .faq-list .faq-item *{
  box-sizing: border-box; max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
}
.codebox pre{ max-width:100%; overflow:auto; }

/* iOS zoomt bei kleinen Inputs -> 16px setzen */
.glossar-toolbar input[type="search"]{ font-size: 16px; }
	
	/* 1) Grid-Overflow verhindern */
.faq-list > li,
.faq-list > .faq-item,
.faq-item details,
.faq-item .faq-a {
  min-width: 0 !important;   /* entscheidend für CSS Grid */
  max-width: 100%;
  box-sizing: border-box;
}

/* 2) Summary-Layout ohne float (float kann Breitenprobleme triggern) */
.faq-item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem;
}
.faq-item summary::marker{ content:""; }
.faq-item summary::after{
  content: "▾";
  transition: transform .15s ease;
}
.faq-item details[open] summary::after{ transform: rotate(180deg); }

/* 3) Lange Inhalte zähmen */
.faq-item summary,
.faq-item .faq-a{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* 4) Codebox darf nie die Breite sprengen */
.codebox{ max-width: 100%; }
.codebox pre{
  max-width: 100%;
  overflow: auto;
}

/* 5) Sicherheitsnetz für Medien */
img, video{ max-width:100%; height:auto; }

/* 6) iOS: Text-Inflation aus – damit Typo nicht plötzlich größer wird */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
	
	
/* Codebox: Button sicher über dem <pre> rendern */
.codebox{ position: relative; }

.codebox pre{
  position: relative;       /* eigener Stacking-Kontext */
  z-index: 1;
  padding-right: 2.75rem;   /* Platz für den Button */
}

.codebox .btn-copy{
  position: absolute;
  top: .5rem; right: .5rem;
  z-index: 2;               /* VOR dem <pre> */
}

.glossar-toolbar {
  position: relative;
  display: flex;
  align-items: center;
}

/* Eingabefeld volle Breite */
.glossar-toolbar input[type="search"] {
  flex: 1;
  padding: .6rem 2.2rem .6rem 1rem; /* rechts mehr Platz für das X */
  font-size: 16px;                  /* verhindert iOS-Zoom */
}

/* X-Button klein und überlagert im Feld */
#gClear.btn-clear {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #2d3e50;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
#gClear.btn-clear:hover {
  color: #3b4f63;
}
	
.glossar-toolbar {
  position: relative;
  display: flex;
  align-items: center;
}

/* Eingabefeld volle Breite */
.glossar-toolbar input[type="search"] {
  flex: 1;
  padding: .6rem 2.2rem .6rem 1rem; /* rechts mehr Platz für das X */
  font-size: 16px;                  /* verhindert iOS-Zoom */
}

/* X-Button klein und überlagert im Feld */
#gClear.btn-clear {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #2d3e50;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
#gClear.btn-clear:hover {
  color: #3b4f63;
}
/* Mobile: Copy-Button unter den Codeblock ziehen */
@media (max-width: 480px){
  .codebox{ position: static; }
  .codebox .btn-copy{
    position: static;                
    margin-top: .5rem;
    width: 100%;                     
  }
  .codebox pre{ padding-right: 1rem; }  
}