/* --- HERO-ACTIONS: robustes, responsives Button-Layout --- */
.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
  gap: 16px; /* Abstand zwischen Buttons */
  width: min(90%, 500px); /* 90% vom Parent, gedeckelt bei 500px */
  margin: 20px auto; /* zentriert den Block */
    box-sizing: border-box;

}
.hero-actions a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 1px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  text-shadow: none;
}

/* Farbstile übernehmen deine bestehenden Klassen */
.category-button-red    { background:#cf3b35; color:#fff; }
.category-button-yellow { background:#f4b400; color:#111; }
.category-button-turquoise { background:#0ea5a9; color:#fff; }

/* Icon-Feinschliff (Font Awesome) */
.hero-actions i,
.all-hefte i { font-size: 1.05em; opacity:.95; }

/* Container gelb – Abstände weicher */
.container-yellow .divider{ 
  height:1px; 
  background:rgba(0,0,0,.08); 
  margin: 24px 0; 
}

/* --- LERNHEFTE HIGHLIGHT SECTION --- */
.hefte-highlight{
  margin-top: 24px;
  text-align:center;
}
.hefte-highlight h3{
  margin: 0 0 14px;
  font-size: clamp(20px, 2.6vw, 26px);
}
/* Horizontal scroll für Lernhefte */
.hefte-grid {
  display: flex;                  /* statt Grid jetzt Flex */
  gap: 16px;                       /* Abstand zwischen Karten */
  overflow-x: auto;                /* horizontales Scrollen */
  padding-bottom: 10px;            /* Platz für Scrollbar */
  scroll-behavior: smooth;         /* sanftes Scrollen */
}

.hefte-grid::-webkit-scrollbar {
  height: 8px;                     /* Höhe der Scrollbar */
}

.hefte-grid::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.2); /* Scrollbar-Farbe */
  border-radius: 4px;
}

.hefte-grid::-webkit-scrollbar-track {
  background: transparent;
}

.heft-card {
  flex: 0 0 180px;                  /* feste Kartenbreite */
  max-width: 180px;                 /* nicht größer als 180px */
}

.heft-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.heft-card img{
  width:100%;
  aspect-ratio: 3/4;         /* sichere Cover-Darstellung */
  object-fit: cover;
}
.heft-card span{
  font-weight:700;
  font-size: 15.5px;
}
.heft-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}



/* --- Kleine Screens: Lesbarkeit & Klickflächen --- */
@media (max-width: 420px){
  .hero-actions{ 
    grid-template-columns: 1fr; 
    gap: 12px;
    width: 90%; /* bleibt 90% des Parents */
}
  .hero-actions a  { 
    padding: 15px; 
    font-size: 16px; 
}
  
  .hefte-grid{ 
    grid-template-columns: 1fr 1fr; 
}
}


  .container-yellow {
  max-width: 900px;     
  margin: 0 auto;       /* zentriert den Container */
  padding: 20px 24px;   /* angenehmer Innenabstand */
  border-radius: 12px;
  box-sizing: border-box; /* Padding wird in max-width einberechnet */
  overflow-x: hidden;     /* verhindert horizontales Verschieben */
}





/* Farben */
.category-button-turquoise {
  background: #0ea5a9;
  color: #fff;
}
.all-hefte {
  background: #0077b6;
  color: #fff;
}

/* Hover-Effekt */
.all-hefte:hover,
.category-button-turquoise:hover {
  filter: brightness(1.08);
}

/* Icon-Größe vereinheitlichen */
.all-hefte i,
.category-button-turquoise i {
  font-size: 1.05em;
  opacity: 0.95;
}
/* Fix 1: Mobile-Optimierung für Flex-Scroller (statt grid-template-columns) */
@media (max-width: 420px){
  .hero-actions{ grid-template-columns: 1fr; }
  .hero-actions a{ padding: 15px; font-size: 16px; }

  /* Horizontaler Heft-Scroller bleibt flex; Karten etwas schmaler */
  .heft-card { 
    flex: 0 0 160px;   /* vorher 180px */
    max-width: 160px;
  }
}

/* Fix 2: Scrollbar auch in Firefox lesbarer machen */
.hefte-grid {
  -webkit-overflow-scrolling: touch; /* sanfter Scroll auf iOS */
  scrollbar-width: thin;             /* Firefox */
  scrollbar-color: rgba(0,0,0,.2) transparent; /* Firefox */
}

/* Fix 3: all-hefte sicher gegenüber .category-button-blue machen */
 .all-hefte,
.category-button-turquoise {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  min-height: 56px;
  width: 100% !important;
  max-width: 520px;
  margin: 0 auto;
  border: 0;
  border-radius: 1px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
  font-size: 1.05rem;
  font-weight: 700 !important;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: none;
  box-sizing: border-box;
}
.category-button-turquoise { background: #0ea5a9; color:#fff; }
all-hefte,
.all-hefte { background: #0077b6; color:#fff; }

.category-button-red:hover,
.category-button-yellow:hover,
.all-hefte:hover,
.category-button-turquoise:hover { 
  filter: brightness(1.05);                /* sanft aufhellen */
  transform: translateY(-2px);             /* leicht anheben */
  transition: all 0.2s ease;                /* weiche Animation */
}


all-hefte i,
.all-hefte i,
.category-button-turquoise i {
  font-size: 1.05em;
  opacity: 0.95;
}

/* Bonus: weniger Shadow beim Scrollen für bessere Performance */
.heft-card { will-change: transform; }

.hero-actions, .nav-hero-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 750px);
  margin: 20px auto;
  box-sizing: border-box;
}
@media (max-width: 661px){
  .hero-actions, .nav-hero-actions
  { grid-template-columns: 1fr; gap: 12px; }
}

/* Mobile-Fix: Buttons stapeln, zentriert, ohne seitlichen Overflow */
/* Mobile-Fix: exakt 7px Rand links/rechts, kein Überragen */
/* Mobile-Fix: Buttons vollbreit, Parent mit exaktem Innenabstand */
@media (max-width: 520px){
  .category-buttons,
  .hero-actions,
  .nav-hero-actions{
    display: grid;
    grid-template-columns: 1fr;       /* stapeln */
    gap: 12px;

    width: 100%;
    max-width: none;
    margin: 20px auto 0;
    box-sizing: border-box;
  }

  /* Kinder füllen die Spalte komplett */
  .category-button-yellow,
  .category-button-red,
  .hero-actions > *,
  .nav-hero-actions > *{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    white-space: normal;
    word-break: break-word;
  }
}


/* Sicherheitsgeländer gegen horizontales Scrollen */
html { overflow-x: clip; }
body { overflow-x: hidden; }

@media (max-width: 520px){
  .category-buttons,
  .hero-actions,
  .nav-hero-actions{
    margin-left: max(7px, env(safe-area-inset-left));
    margin-right: max(7px, env(safe-area-inset-right));
  }
}


/* === Dark Mode für Hefte-Highlight & -Grid === */
@media (prefers-color-scheme: dark) {
  /* Section-Typo */
  .hefte-highlight {
    color: #e5e7eb; /* heller Text */
  }
  .hefte-highlight h3 {
    color: #f3f4f6; /* Überschrift etwas heller */
  }

  /* Scroller */
  .hefte-grid {
    /* Hintergrund bleibt transparent, nur Scrollbar anpassen */
    scrollbar-width: thin;                                   /* Firefox */
    scrollbar-color: rgba(255,255,255,.25) transparent;      /* Firefox */
  }
  .hefte-grid::-webkit-scrollbar {
    height: 8px;
  }
  .hefte-grid::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.25);
    border-radius: 4px;
  }
  .hefte-grid::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,.35);
  }
  .hefte-grid::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Karten */
  .heft-card {
    background: #1f2937;                         /* surface */
    box-shadow: 0 8px 18px rgba(0,0,0,.35);      /* dezenter, dunkler */
    color: #e5e7eb;
  }
  .heft-card span {
    color: #f3f4f6;                               /* Titel */
  }
  .heft-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.45);
  }

  /* Bilder bleiben hell, nur zarter Rand für Kontrast */
  .heft-card img {
    outline: 1px solid rgba(255,255,255,.06);
    outline-offset: -1px;
  }

  /* Fokus-Stil für Tastatur-Nutzer im Dark Mode */
  .heft-card:focus-visible {
    outline: 2px solid rgba(14,165,233,.7); /* cyan/blau Akzent */
    outline-offset: 2px;
  }
}

/* Optional: Manuelle Dark-Theme-Umschaltung per .theme-dark an <body>
   (falls du später einen Toggle möchtest) */
.theme-dark .hefte-highlight,
.theme-dark .heft-card,
.theme-dark .hefte-grid { color-scheme: dark; }
.theme-dark .hefte-highlight { color: #e5e7eb; }
.theme-dark .hefte-highlight h3 { color: #f3f4f6; }
.theme-dark .heft-card {
  background: #111827;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  color: #e5e7eb;
}
.theme-dark .heft-card span { color: #f3f4f6; }
.theme-dark .heft-card img { outline: 1px solid rgba(255,255,255,.06); outline-offset: -1px; }
.theme-dark .hefte-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.theme-dark .hefte-grid::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.25); }
.theme-dark .hefte-grid::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.35); }


/* ===========================
   AQP-Block (nur für deinen HTML oben)
   =========================== */

/* Variablen an euer Schema andocken */
:root {
  --aqp-gap: 1.25rem;
  --aqp-maxw: 1100px;
  --aqp-red: #ef4444;       /* Rot für "Mehr erfahren" */
  --aqp-border: #e6e8ec;
  --aqp-text: #111;
  --aqp-bg: #fff;
  --aqp-muted: #5e6572;
}
@media (prefers-color-scheme: dark) {
  :root {
    --aqp-border: #1f2937;
    --aqp-text: #e5e7eb;
    --aqp-bg: #0b0c10;
    --aqp-muted: #9ca3af;
  }
}

/* Container: 2-spaltig – bleibt auch mobil zweispaltig */
.aqp-quality {
  display: grid;
  grid-template-columns: clamp(96px, 28vw, 350px) 1fr;
  grid-template-areas:
    "logo text"
    "logo details"; /* details normalerweise rechts */
  align-items: start;
  gap: var(--aqp-gap);
}

/* Bereiche zuordnen */
.aqp-quality .aqp-logo { grid-area: logo; }
.aqp-quality .aqp-text { grid-area: text; }
.aqp-quality details   { grid-area: details; }

/* Logo-Spalte links – Bild skaliert innerhalb seiner Spalte */
.aqp-quality .aqp-logo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px; /* optional: an eure Bildsprache anpassen */
}

/* Text-Spalte rechts */
.aqp-quality .aqp-text {
  min-width: 0; /* verhindert Overflow bei langen Überschriften */
}

.aqp-quality .aqp-text h1 {
  font-size: clamp(1.25rem, 0.8rem + 1.5vw, 1.8rem);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

/* Details/Accordion */
.aqp-quality details {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.aqp-quality details[open] {
  background: transparent !important;
}

/* „Mehr erfahren“ als roter, zugänglicher Trigger */
.aqp-quality summary {
  list-style: none;          /* Standard-Dreieck ausblenden */
  cursor: pointer;
  color: #ef4444 !important;  /* bleibt immer rot */
  font-weight: 700;
  user-select: none;
  outline: none;
    background: transparent !important;

}
.aqp-quality summary::-webkit-details-marker { display: none; }

/* Eigene Pfeile: ▼ / ▲ */
.aqp-quality summary::after {
  content: " ▼";
  font-weight: 700;
}
.aqp-quality details[open] summary::after {
  content: " ▲";
}

/* Fokuszustand für Tastatur-Nutzer */
.aqp-quality summary:focus-visible {
  outline: 2px solid var(--aqp-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Innenbereich (nur sichtbar, wenn geöffnet) */
.aqp-quality .aqp-body {
  margin-top: 0.6rem;
  color: var(--text); /* immer an die globale Textfarbe gekoppelt */
}

.aqp-quality .aqp-body p {
  margin: 0 0 0.75rem 0;
  line-height: 1.6;
    color: inherit !important; /* erbt von .aqp-body */

}

/* Liste mit grünen Haken */
.aqp-quality .aqp-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.75rem 0;
}

.aqp-quality .aqp-list li {
  position: relative;
  padding-left: 1.5rem; /* Platz für den Haken */
  margin-bottom: 0.5rem;
}

.aqp-quality .aqp-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #16a34a !important; /* Grün */
  font-weight: bold;
}

.aqp-quality .aqp-list .text {
  line-height: 1.5;
}

/* Optional: leichte Typo-Abstufung */
.aqp-quality .aqp-body p:last-child {
  color: var(--aqp-muted);
}

/* Mikro-Feintuning für sehr schmale Screens */
@media (max-width: 420px) {
  .aqp-quality { 
    gap: 0.9rem;
    padding: 0.75rem;
    grid-template-columns: 1fr; /* nur 1 Spalte */
    grid-template-areas:
      "logo"
      "text"
      "details"; /* Details rutscht nach unten */
  }
  }

/* ===========================
   Modernes Details-Panel (neutral)
   =========================== */
.details-light-grey {
  border: 1px solid var(--aqp-border, #e6e8ec);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  background: #f9fafb;              /* hellgrau für Light Mode */
  transition: background 0.3s ease, border-color 0.3s ease;
  color: var(--aqp-text, #111);
  font-family: system-ui, sans-serif;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .details-light-grey {
    background: #1f2937;           /* dunkles Grau */
    border-color: #374151;         /* etwas hellere Linie */
    color: var(--aqp-text, #e5e7eb);
  }
}

/* Summary-Trigger */
.details-light-grey summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  outline: none;
  color: inherit; /* übernimmt normale Textfarbe */
}

.details-light-grey summary::-webkit-details-marker {
  display: none; /* Standard-Dreieck ausblenden */
}

/* Eigene Pfeile: ▼ / ▲ */
.details-light-grey summary::after {
  content: " ▼";
  font-weight: 700;
}
.details-light-grey[open] summary::after {
  content: " ▲";
}

/* Fokuszustand für Tastatur-Nutzer */
.details-light-grey summary:focus-visible {
  outline: 2px solid var(--aqp-border, #e6e8ec);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Innenbereich */
.details-light-grey > *:not(summary) {
  margin-top: 0.75rem;
  line-height: 1.6;
}
/* Standard */
.button-karteikarten {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  background: #f3f4f6;   /* hellgrau */
  color: #111;           /* dunkler Text */
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s, color 0.3s;
}

/* Hover Light */
.button-karteikarten:hover {
  background: #e5e7eb;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .button-karteikarten {
    background: #374151;   /* dunkles Grau */
    color: #e5e7eb;        /* hellgrau/weißlicher Text */
  }

  .button-karteikarten:hover {
    background: #4b5563;   /* etwas heller beim Hover */
    color: #fff;
  }
}
.gewinnspiel-banner {
  width: 100%;
  overflow: hidden;
  background: var(--surface, #fff8e1); /* dezenter Hintergrund */
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 4px 0;
}

.gewinnspiel-banner .lauftext {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scroll-left 22s linear infinite;
  font-weight: 500;
  color: var(--text, #111);
  font-size: 1rem;
}

.gewinnspiel-banner .highlight {
  font-size: 1.15rem;   /* etwas größer als Standard (z. B. 0.95rem) */
  font-weight: 700;     /* fett, damit es heraussticht */
  color: inherit;       /* optional: rot für extra Betonung, oder inherit für gleiche Farbe */
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-color-scheme: dark) {
  .gewinnspiel-banner {
    background: var(--surface-soft, rgba(255,248,225,0.08)); /* zartes Gelb als Tönung */
    border-top: 1px solid var(--border-dark, rgba(255,255,255,0.10));
    border-bottom: 1px solid var(--border-dark, rgba(255,255,255,0.10));
  }
  .gewinnspiel-banner .lauftext {
    color: var(--text-on-dark, #f5f5f5);
  }
  .gewinnspiel-banner a {
    text-decoration-color: rgba(255,255,255,0.6);
  }
}

/* Motion-Preference respektieren */
@media (prefers-reduced-motion: reduce) {
  .gewinnspiel-banner .lauftext {
    animation: none;
    padding-left: 0;
    text-align: center;

  }
}

/* Mobile: minimal kleinere Höhe */
@media (max-width: 420px) {
  .gewinnspiel-banner { height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .gewinnspiel-banner .lauftext {
  animation: scroll-left 22s linear infinite;
  }
}
/* Animation */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}