/* Vokabeln2go.de topic hub. All component styles use the v2g- prefix. */
.v2g-selection-section {
  --v2g-ink:#1d1d1f; --v2g-muted:#6e6e73; --v2g-track:#e6e6eb;
  box-sizing:border-box; color:var(--v2g-ink); background:#f5f5f7;
  padding:clamp(26px,3.2vw,46px) 24px clamp(30px,3vw,42px);
  scroll-margin-top:0;
  display:flex; flex-direction:column; height:100svh; min-height:700px;
}
.v2g-selection-inner { width:min(1240px,100%); margin-inline:auto; }
.v2g-selection-section > .v2g-selection-inner { display:flex; flex-direction:column; flex:1; min-height:0; }
.v2g-hub-heading { max-width:860px; margin:0 0 clamp(18px,2vw,26px); text-align:left; }
.v2g-hub-eyebrow { margin:0 0 8px; color:#e34b43; font-size:clamp(.78rem,1.05vw,.92rem); font-weight:700; letter-spacing:.14em; }
.v2g-hub-title { margin:0; color:var(--v2g-ink); font-size:clamp(2.7rem,5.6vw,4.7rem); font-weight:700; letter-spacing:-.06em; line-height:.98; }
.v2g-topic-intro { max-width:720px; margin:13px 0 0; color:var(--v2g-muted); font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.48; }
.v2g-hub-showcase { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(340px,1fr) auto; position:relative; flex:1; min-height:0; }
.v2g-feature-card { position:relative; isolation:isolate; overflow:hidden; min-height:0; aspect-ratio:auto; height:100%; border-radius:clamp(20px,2vw,28px); background:#202124; box-shadow:0 10px 30px rgba(20,20,25,.08); grid-area:1/1; }
.v2g-feature-image-frame { position:absolute; inset:0; overflow:hidden; margin:0; }
.v2g-hub-image { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; opacity:1; }
.v2g-feature-gradient { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(8,10,14,.02) 12%,rgba(8,10,14,.18) 36%,rgba(8,10,14,.68) 68%,rgba(8,10,14,.9) 100%); }
.v2g-feature-overlay { grid-area:1/1; z-index:2; align-self:end; display:flex; flex-direction:column; gap:22px; padding:clamp(22px,3vw,36px); pointer-events:none; }
.v2g-image-actions { position:relative; z-index:2; pointer-events:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px; transition:opacity .32s ease,transform .38s cubic-bezier(.22,.68,0,1); }
.v2g-feature-caption { position:relative; z-index:2; margin:0; padding:0; pointer-events:none; transition:opacity .32s ease,transform .38s cubic-bezier(.22,.68,0,1); }
.v2g-feature-caption.is-content-leaving,.v2g-image-actions.is-content-leaving { opacity:0; transform:translateY(9px); }
.v2g-feature-caption.is-content-entering,.v2g-image-actions.is-content-entering { opacity:0; transform:translateY(12px); }
.v2g-image-actions.is-content-entering .v2g-hub-link { opacity:0; transform:translateY(8px); }
.v2g-image-actions .v2g-hub-link { transition:opacity .32s ease,transform .38s cubic-bezier(.22,.68,0,1),background-color .18s ease,border-color .18s ease; }
.v2g-image-actions.is-content-entering .v2g-hub-link:nth-child(2) { transition-delay:.04s,.04s,0s,0s; }
.v2g-image-actions.is-content-entering .v2g-hub-link:nth-child(3) { transition-delay:.08s,.08s,0s,0s; }
.v2g-image-actions.is-content-entering .v2g-hub-link:nth-child(4) { transition-delay:.12s,.12s,0s,0s; }
.v2g-hub-description { max-width:720px; margin:0; color:rgba(255,255,255,.94); font-size:clamp(.98rem,1.3vw,1.16rem); line-height:1.42; text-shadow:0 1px 12px rgba(0,0,0,.2); }
.v2g-hub-link,.v2g-hub-cta { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:9px; padding:0 16px; border:1px solid rgba(255,255,255,.96); border-radius:999px; color:#1d1d1f; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); box-shadow:0 2px 12px rgba(0,0,0,.12); text-decoration:none; font-family:inherit; font-size:clamp(.85rem,.92vw,.96rem); font-weight:650; transition:background-color .18s ease,transform .18s ease,border-color .18s ease; }
.v2g-hub-link span,.v2g-hub-cta span { color:#45454a; font-size:1.12em; }
.v2g-hub-link:hover,.v2g-hub-cta:hover { color:#111; border-color:#fff; background:#fff; transform:translateY(-1px); }
.v2g-hub-link:focus-visible,.v2g-hub-cta:focus-visible,.v2g-hub-tab:focus-visible,.v2g-hub-arrow:focus-visible,.v2g-back-link:focus-visible { outline:3px solid #1685ff; outline-offset:3px; }
.v2g-hub-tabs-wrap { display:flex; justify-content:center; grid-area:2/1; margin:16px auto 0; width:100%; }
.v2g-hub-tabs { display:flex; align-items:center; gap:2px; width:max-content; max-width:100%; padding:4px; border-radius:999px; background:var(--v2g-track); }
.v2g-hub-arrow { flex:0 0 36px; display:none; place-items:center; width:36px; height:38px; padding:0; border:0; border-radius:999px; color:#45454a; background:transparent; font-family:inherit; font-size:1.35rem; font-weight:500; line-height:1; cursor:pointer; transition:color .18s ease,background-color .18s ease,opacity .18s ease; }
.v2g-hub-arrow:hover:not(:disabled) { color:#111; background:rgba(255,255,255,.72); }
.v2g-hub-arrow:disabled { opacity:.35; cursor:default; }
.v2g-hub-tab-track { position:relative; display:flex; min-width:0; align-items:center; justify-content:center; gap:2px; overflow-x:auto; scrollbar-width:none; }
.v2g-hub-tab-track::before { content:""; position:absolute; z-index:0; top:2px; left:var(--v2g-active-left,0px); width:var(--v2g-active-width,0px); height:calc(100% - 4px); border-radius:999px; background:#1d1d1f; transition:left .34s cubic-bezier(.22,.68,0,1),width .34s cubic-bezier(.22,.68,0,1); pointer-events:none; }
.v2g-hub-tab-track::-webkit-scrollbar { display:none; }
.v2g-hub-tab { position:relative; z-index:1; flex:0 0 auto; min-width:0; min-height:40px; padding:0 clamp(14px,1.8vw,22px); border:0; border-radius:999px; color:#45454a; background:transparent; font-family:inherit; font-size:clamp(.86rem,.98vw,1rem); font-weight:400; line-height:1.15; white-space:nowrap; cursor:pointer; transition:color .22s ease; }
.v2g-hub-tab:hover { color:#111; }
.v2g-hub-tab.is-active { color:#fff; }
.v2g-selection-followup { display:flex; justify-content:center; padding:0 24px clamp(26px,3vw,42px); background:#f5f5f7; border-bottom:1px solid rgba(60,60,67,.09); text-align:center; }
.v2g-selection-followup .v2g-selection-inner { text-align:center; }
.v2g-back-link { display:inline-block; color:#6e6e73; font-size:.92rem; text-decoration:none; transition:color .16s ease; }
.v2g-back-link:hover { color:#1d1d1f; }
.v2g-support-section { scroll-margin-top:20px; background:#fff; }
.v2g-topic-page .section--trust { border-top:1px solid rgba(60,60,67,.08); }
.v2g-section-divider { width:min(1160px,calc(100% - 48px)); height:1px; margin:0 auto; background:rgba(60,60,67,.16); }
.v2g-topic-page .section--social { padding-top:clamp(42px,6vw,76px); }
@media (max-width:1000px) {
  .v2g-selection-section { padding-inline:20px; }
  .v2g-feature-card { aspect-ratio:auto; }
  .v2g-hub-link,.v2g-hub-cta { min-height:38px; padding-inline:14px; }
  .v2g-hub-tab { flex:1 1 auto; padding-inline:clamp(6px,1.2vw,12px); font-size:clamp(.72rem,1.35vw,.9rem); }
}
/* Larger touch targets and labels on tablets in landscape. */
@media (min-width:768px) and (max-width:1366px) and (orientation:landscape) and (any-pointer:coarse) {
  .v2g-hub-tabs { width:min(960px,100%); box-sizing:border-box; padding:6px; }
  .v2g-hub-tab-track { width:100%; }
  .v2g-hub-tab { flex:1 1 auto; min-height:48px; padding-inline:clamp(12px,2vw,24px); font-size:clamp(.95rem,1.5vw,1.08rem); }
}
@media (max-width:640px) {
  .v2g-selection-section { height:auto; min-height:100svh; display:flex; align-items:center; padding:clamp(18px,3svh,28px) 17px clamp(20px,3svh,30px); }
  .v2g-selection-inner { width:100%; }
  .v2g-selection-section > .v2g-selection-inner { display:block; flex:none; }
  .v2g-hub-heading { max-width:450px; margin:0 auto clamp(14px,2.2svh,20px); }
  .v2g-hub-eyebrow { margin-bottom:6px; font-size:.68rem; }
  .v2g-hub-title { font-size:clamp(2.25rem,9.2vw,3.15rem); line-height:.98; }
  .v2g-topic-intro { margin-top:9px; font-size:.91rem; line-height:1.38; }
  .v2g-hub-showcase { width:min(100%,430px); margin-inline:auto; grid-template-rows:auto auto auto; }
  .v2g-feature-card { width:100%; aspect-ratio:auto; height:clamp(320px,50svh,480px); border-radius:22px; box-shadow:0 8px 24px rgba(20,20,25,.10); touch-action:pan-y; }
  .v2g-feature-image-frame { border-radius:inherit; }
  .v2g-hub-image { object-position:center 46%; }
  .v2g-feature-gradient { background:linear-gradient(180deg,rgba(0,0,0,.04) 12%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.65) 68%,rgba(0,0,0,.88) 100%); }
  .v2g-feature-overlay { display:contents; }
  .v2g-image-actions { grid-area:1/1; align-self:end; margin:15px 14px; gap:7px; }
  .v2g-image-actions.has-multiple-links { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
  .v2g-hub-link,.v2g-hub-cta { min-height:39px; padding:0 12px 0 18px; justify-content:flex-start; text-align:left; color:#1d1d1f; background:rgba(255,255,255,.97); border-color:#fff; font-size:.8rem; }
  .v2g-image-actions.has-multiple-links .v2g-hub-link { box-sizing:border-box; min-height:40px; padding:6px 8px 6px 16px; gap:5px; font-size:.75rem; font-weight:650; line-height:1.15; text-align:left; }
  .v2g-image-actions.has-multiple-links .v2g-hub-link:nth-child(1) { flex:0 1 56%; }
  .v2g-image-actions.has-multiple-links .v2g-hub-link:nth-child(2) { flex:0 1 39%; }
  .v2g-image-actions.has-multiple-links .v2g-hub-link:nth-child(3) { flex:0 1 45%; }
  .v2g-image-actions.has-multiple-links .v2g-hub-link:nth-child(4) { flex:0 1 48%; }
  .v2g-hub-link span,.v2g-hub-cta span { margin-left:auto; flex-shrink:0; }
  .v2g-hub-tabs-wrap { margin:12px auto 0; }
  .v2g-hub-tabs { width:100%; justify-content:space-between; gap:0; padding:4px; }
  .v2g-hub-arrow { display:grid; flex-basis:32px; width:32px; height:38px; font-size:1.3rem; }
  .v2g-hub-tab-track { flex:1 1 auto; justify-content:flex-start; gap:1px; scroll-behavior:smooth; }
  .v2g-hub-tab { flex:0 0 auto; min-height:38px; padding:0 11px; font-size:.79rem; }
  .v2g-feature-caption { grid-area:3/1; align-self:auto; margin:0; padding:20px 8px 0; min-height:7em; text-align:center; box-sizing:border-box; pointer-events:auto; }
  .v2g-hub-description { max-width:38ch; margin-inline:auto; color:#6e6e73; font-size:.95rem; line-height:1.48; text-align:center; text-shadow:none; }
  .v2g-selection-followup { padding:0 14px 25px; }
  .v2g-back-link { font-size:.88rem; }
  .v2g-section-divider { width:calc(100% - 28px); }
}
@media (prefers-color-scheme:dark) {
  /* Etwas dunkleres Marineblau; sehr subtiler Verlauf im Themenbereich. */
  .v2g-selection-section,.v2g-selection-followup { --v2g-ink:#f4f7ff; --v2g-muted:#abb8ca; --v2g-track:#25354c; color:#f4f7ff; background:#081321; }
  .ss-topic-page .v2g-selection-section { background:linear-gradient(145deg,#112038 0%,#0c1728 52%,#08121f 100%); }
  .ss-topic-page .v2g-selection-followup { background:#08121f; }
  .v2g-hub-title { color:#f5f5f7; }
  .v2g-topic-intro,.v2g-back-link { color:#abb8ca; }
  .v2g-back-link:hover { color:#fff; }
  .v2g-hub-link,.v2g-hub-cta { color:#f4f7ff; background:rgba(28,45,67,.94); border-color:rgba(225,237,255,.24); box-shadow:0 2px 10px rgba(0,0,0,.16); -webkit-backdrop-filter:blur(12px); }
  .v2g-hub-link:hover,.v2g-hub-cta:hover { color:#fff; background:rgba(48,70,101,.97); border-color:rgba(255,255,255,.4); }
  .v2g-hub-link span,.v2g-hub-cta span { color:#dedee2; }
  .v2g-hub-tab { color:#dedee2; }
  .v2g-hub-tab:hover { color:#fff; }
  .v2g-hub-tab.is-active { color:#1d1d1f; }
  .v2g-hub-tab-track::before { background:#f5f5f7; }
  .v2g-hub-arrow { color:#dedee2; }
  .v2g-hub-arrow:hover:not(:disabled) { color:#fff; background:rgba(255,255,255,.12); }
  .v2g-hub-description { color:#e4e4e7; }
  .v2g-selection-section .v2g-feature-caption { background:transparent; }
  .v2g-selection-section .v2g-hub-description { color:#e4e4e7; }
  .v2g-support-section { color:#f4f7ff; background:#111b2a; }
  .v2g-section-divider { background:rgba(235,235,245,.18); }
}
@media (prefers-reduced-motion:reduce) {
  .v2g-hub-image,.v2g-image-actions,.v2g-feature-caption,.v2g-hub-link,.v2g-hub-cta,.v2g-hub-tab,.v2g-hub-arrow,.v2g-back-link { transition:none !important; scroll-behavior:auto !important; }
}


/* ================================================================
   Schulspanisch: Ergänzungen zur gemeinsamen Verteilerseite
   Keine Änderung am vorhandenen <head> oder globalen Site-CSS.
   ================================================================ */
/* Eine einzige, websiteweite Suche: /navigation/search.js + /navigation/search.css.
   Die bereits von /navigation/menu.js eingebundene Suchkomponente wird
   hier weder dupliziert noch in ihrer Gestaltung überschrieben. */

/* Überschrift und originales Firebase-Herz befinden sich in einer Zeile. */
.ss-topic-page .v2g-hub-heading { width:100%; max-width:none; }
.ss-topic-page .ss-hub-title-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(12px,2vw,28px); width:100%; min-width:0;
}
.ss-topic-page .ss-hub-title-row .v2g-hub-title { min-width:0; flex:0 1 auto; }
/* Favoriten-Funktion bleibt original; rechts neben der H1. */
.ss-topic-page .ss-hub-favorite-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  margin: 0;
  flex: 0 0 auto;
}
.ss-topic-page .ss-hub-favorite-toolbar .topic-favorite-button {
  flex: 0 0 auto;
  position: static;
  margin: 0;
  z-index: 1;
}
/* Beide unteren Inhaltsbereiche erhalten getrennte, ruhige Flächen. */
.ss-topic-page .section--materials { background: #eceef2; }
.ss-topic-page .section--trust { background: #f5f5f7; }
/* Die Navigation wechselt schon auf kleineren Desktops zur Scroll-Variante.
   Tabs haben keine schrumpfenden Beschriftungen mehr. */
@media (max-width: 1180px) {
  .ss-topic-page .v2g-hub-tabs-wrap { width: 100%; }
  .ss-topic-page .v2g-hub-tabs {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 4px;
    justify-content: space-between;
  }
  .ss-topic-page .v2g-hub-arrow {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
  }
  .ss-topic-page .v2g-hub-tab-track {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 2px;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }
  .ss-topic-page .v2g-hub-tab {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 0 15px;
    font-size: .87rem;
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  .ss-topic-page .ss-hub-title-row { align-items:flex-start; gap:12px; }
  .ss-topic-page .ss-hub-title-row .ss-hub-favorite-toolbar { margin-top:2px; }
  /* Flexibler 2-Spalten-Modus statt alter Vier-Button-Sonderregeln. */
  .ss-topic-page .v2g-image-actions.has-multiple-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    width: calc(100% - 28px);
    box-sizing: border-box;
  }
  .ss-topic-page .v2g-image-actions.has-multiple-links .v2g-hub-link {
    flex: initial;
    width: auto;
    min-width: 0;
    font-size: clamp(.69rem, 3vw, .78rem);
  }
  .ss-topic-page .v2g-image-actions.has-multiple-links .v2g-hub-link:nth-child(n) { flex: initial; }
  .ss-topic-page .v2g-hub-tab { padding: 0 12px; font-size: .8rem; }
  .ss-topic-page .v2g-selection-section[data-block-count="5"] .v2g-feature-card,
  .ss-topic-page .v2g-selection-section[data-block-count="6"] .v2g-feature-card {
    height: clamp(350px, 53svh, 490px);
  }
}
@media (max-width: 360px) {
  .ss-topic-page .ss-hub-title-row { gap:8px; }
  .ss-topic-page .v2g-hub-arrow { flex-basis: 30px; width: 30px; }
  .ss-topic-page .v2g-hub-tab { padding: 0 11px; }
}
@media (prefers-color-scheme: dark) {
  .ss-topic-page {
    background:linear-gradient(165deg,#071322 0%,#050c16 100%);
    color:#f4f7ff;
  }
  /* Jede Section bekommt eine eigene, dunkle Marineblau-Nuance. */
  .ss-topic-page .v2g-selection-section {
    background:linear-gradient(145deg,#0c1b2c 0%,#071421 62%,#06101c 100%);
  }
  .ss-topic-page .v2g-selection-followup {
    background:linear-gradient(150deg,#081625,#050f1b);
  }
  .ss-topic-page .section--materials {
    background:linear-gradient(155deg,#14283c 0%,#0d1d2f 60%,#0a1827 100%);
  }
  .ss-topic-page .section--trust {
    background:linear-gradient(160deg,#0e2032 0%,#081726 65%,#071320 100%);
  }
  .ss-topic-page .section--footer {
    background:linear-gradient(150deg,#091727 0%,#050d18 100%);
  }
}

/* Globales Suchfeld: feste Position im Inhaltsfluss statt vom Menü-JavaScript
   abhängiger Position. /navigation/search.css liefert die Originalgestaltung. */
.ss-topic-search-slot {
  position:relative;
  z-index:850;
  box-sizing:border-box;
  width:100%;
  padding:clamp(14px,2.4vw,24px) 16px clamp(10px,1.7vw,18px);
  min-height:78px;
  background:transparent;
}
.ss-topic-search-slot .ss-search-container {
  max-width:50rem;
  width:100%;
  display:block;
  position:relative;
  margin:0 auto !important;
  padding:0 !important;
  transform:none !important;
  box-sizing:border-box;
}
/* Als Absicherung bei verzögertem oder fehlendem CSS-Load: Suchleiste ist
   trotzdem sichtbar; diese :where()-Regeln haben geringere Spezifität als
   die bereits vorhandene /navigation/search.css. */
.ss-topic-search-slot :where(.ss-search-field) {
  display:flex;align-items:center;position:relative;min-height:52px;
  border:1px solid rgba(0,0,0,.09);border-radius:16px;
  background:#fff;color:#1d1d1f;
}
.ss-topic-search-slot :where(.ss-search-icon) {
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;stroke:#86868b;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
/* V6: Die zentrale /navigation/search.css verwendet margin-top:-9px zur
   vertikalen Zentrierung. Unser translateY(-50%) addierte bisher weitere -9px.
   Daher Margin hier neutralisieren – Icon und Text sind wieder mittig. */
.ss-topic-search-slot .ss-search-container .ss-search-icon {
  margin:0;
  top:50%;
  transform:translateY(-50%);
}
.ss-topic-search-slot :where(.ss-search-input) {
  display:block;min-width:0;width:100%;height:52px;box-sizing:border-box;
  padding:0 15px 0 46px;border:0;outline:0;background:transparent;
  color:inherit;font:inherit;font-size:16px;
}
.ss-topic-search-slot :where(.ss-search-hint) {
  position:absolute;left:46px;right:12px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:#86868b;white-space:nowrap;overflow:hidden;
}
.ss-topic-search-slot :where(.ss-search-panel) {
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:5;
  max-height:min(65vh,34rem);overflow:auto;background:#fff;
  color:#1d1d1f;border-radius:18px;
  box-shadow:0 12px 32px rgba(0,0,0,.12);padding:8px;
}
.ss-topic-search-slot :where(.ss-search-panel[hidden]) { display:none; }
.ss-topic-search-slot :where(.ss-search-hint[hidden]) { display:none; }
@media (prefers-color-scheme:dark) {
  .ss-topic-search-slot :where(.ss-search-field) {
    background:#1a2029;border-color:rgba(255,255,255,.10);color:#f5f5f7;
  }
  .ss-topic-search-slot :where(.ss-search-panel) {
    background:#161c24;color:#f5f5f7;
  }
}