/* ============================================================
   Desktop-Layout – nur aktiv ab 768px
   Mobile bleibt exakt wie es ist.
   ============================================================ */

@media (min-width: 768px) {

  /* ── Body: Handy-auf-Tisch-Look entfernen ── */
  body {
    display: block !important;
    background: #ffffff !important;
    padding: 0 !important;
    align-items: unset !important;
    justify-content: unset !important;
  }

  /* ── Container: kein Rahmen, volle Breite ── */
  .container {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ── Content-Bereiche: lesbare Breite, zentriert ── */
  .content {
    max-width: 960px;
    margin: 0 auto;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* ── Header: volle Breite, Inhalt begrenzt ── */
  .header {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* ── Filter-Leiste (uebungen.html) ── */
  .filter-section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* ── Bottom-Nav: volle Breite statt 375px zentriert ── */
  .bottom-nav {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
    max-width: none !important;
    display: flex;
    justify-content: center;
    gap: 0;
  }

  .bottom-nav a,
  .bottom-nav button,
  .nav-item {
    max-width: 120px;
  }

  /* ── Home-Seite: Inhalt vertikal zentrieren ── */
  .container.home-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* ── Übungsdetail: Bild nicht zu groß werden lassen ── */
  .graphics-container img {
    max-height: 500px;
    object-fit: contain;
  }

  /* ── Drawer-Menü bleibt auf Container-Breite ── */
  .burger-drawer {
    width: 280px !important;
  }

  /* ── 2-Spalten-Grid für Listen ── */
  #exercises-list,
  #einheiten-list,
  #articles-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
  }

  /* Ab 1200px: 3 Spalten */
  @media (min-width: 1200px) {
    #exercises-list,
    #einheiten-list,
    #articles-list {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ── Karten: vertikal, größer ── */
  .exercise-card,
  .einheit-card,
  .article-card {
    flex-direction: column !important;
    border-radius: 14px !important;
    border: 1px solid #e8edf2 !important;
    margin-bottom: 0 !important;
    min-height: 200px;
    transition: box-shadow 0.18s, transform 0.18s;
  }

  .exercise-card:hover,
  .einheit-card:hover,
  .article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
  }

  /* Akzentstreifen oben statt links */
  .exercise-card .card-accent {
    width: 100% !important;
    height: 6px !important;
    flex-shrink: 0;
  }

  /* Größere Card-Body */
  .exercise-card .card-body,
  .einheit-card .card-body,
  .article-card .card-body {
    padding: 20px 22px !important;
  }

  /* Größerer Titel */
  .card-title {
    font-size: 17px !important;
    margin-bottom: 12px !important;
  }

  /* Mehr Beschreibungszeilen */
  .card-desc {
    font-size: 14px !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Tags etwas größer */
  .tag {
    font-size: 12px !important;
    padding: 3px 9px !important;
  }

  /* Thumb-Bild bei einheit/artikel-Karten volle Breite */
  .card-thumb {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .card-thumb-placeholder {
    width: 100% !important;
    height: 160px !important;
  }

  /* ── Bottom-Nav auf Desktop ausblenden ── */
  .bottom-nav {
    display: none !important;
  }

  /* ── Content: kein padding-bottom mehr für Bottom-Nav ── */
  .content {
    padding-bottom: 32px !important;
  }

  /* ── Bestehenden Mobile-Header ausblenden (Logo + Burger) ── */
  .header .logo-link,
  .burger-btn {
    display: none !important;
  }

  /* Header kollabiert wenn leer (Listenseiten) */
  .header:not(:has(*:not(.logo-link):not(.burger-btn))) {
    display: none !important;
  }

  /* ── Desktop Top-Navigation ── */
  .desktop-topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 64px;
    background: #ffffff;
    border-bottom: 1px solid #e8edf2;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
  }

  .desktop-topnav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #003D82;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
  }

  .desktop-topnav-logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
  }

  .desktop-topnav-links {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .desktop-topnav-link {
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    transition: background 0.15s, color 0.15s;
  }

  .desktop-topnav-link:hover {
    background: #f0f4ff;
    color: #003D82;
  }

  .desktop-topnav-link.active {
    background: #003D82;
    color: #ffffff;
  }

  /* ══════════════════════════════════════════════════════════
     ÜBUNGS-DETAIL — Desktop Layout
     White Nav + Dark Action Band + 2-Spalten Grafik|Inhalt
     ══════════════════════════════════════════════════════════ */

  body:has(#exercise-content) {
    background: #F5F6F9 !important;
  }

  body:has(#exercise-content) .container {
    background: #F5F6F9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Mobiler Header verstecken */
  body:has(#exercise-content) .header { display: none !important; }

  /* Weiße TopNav */
  body:has(#exercise-content) .desktop-topnav {
    background: #fff !important;
    border-bottom: 1px solid #E6E8EF !important;
  }
  body:has(#exercise-content) .desktop-topnav-logo { color: #003D82 !important; }
  body:has(#exercise-content) .desktop-topnav-link { color: #555 !important; }
  body:has(#exercise-content) .desktop-topnav-link:hover { background: #f0f4ff !important; color: #003D82 !important; }
  body:has(#exercise-content) .desktop-topnav-link.active { background: #003D82 !important; color: #fff !important; }

  /* Action-Band (back-bar) — dunkel, mit back links + share rechts */
  body:has(#exercise-content) .back-bar {
    padding: 14px 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
  }

  body:has(#exercise-content) .back-btn {
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  /* Share-Button: wirkt wie Teilen-Action-Button */
  body:has(#exercise-content) .share-btn {
    width: auto !important;
    height: auto !important;
    padding: 7px 12px !important;
    border-radius: 4px !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
  }
  body:has(#exercise-content) .share-btn::after {
    content: 'Teilen';
  }

  /* exercise-content: Grid 2-Spalten via display:contents-Trick */
  body:has(#exercise-content) #exercise-content {
    display: grid !important;
    grid-template-columns: 400px 1fr !important;
    column-gap: 40px !important;
    row-gap: 0 !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 32px 56px 80px !important;
    align-items: start !important;
    flex: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Grafik: linke Spalte, Zeile 1 */
  body:has(#exercise-content) .grafik-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    background: #fff !important;
    border: 1px solid #E6E8EF !important;
    border-bottom: 1px solid #E6E8EF !important;
    border-radius: 6px !important;
    padding: 16px !important;
    margin: 0 !important;
  }

  body:has(#exercise-content) .grafik-panel img {
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
  }

  /* .content → display:contents → Kinder direkte Grid-Kinder */
  body:has(#exercise-content) .content {
    display: contents !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Title-Block: rechte Spalte, Zeile 1 */
  body:has(#exercise-content) .title-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
  }

  body:has(#exercise-content) .phase-row { margin-bottom: 14px !important; }
  body:has(#exercise-content) .phase-badge { font-size: 11.5px !important; padding: 4px 10px !important; border-radius: 4px !important; }
  body:has(#exercise-content) .jahrgang-badge { font-size: 11.5px !important; padding: 4px 10px !important; border-radius: 4px !important; }

  body:has(#exercise-content) .ex-title {
    font-size: 38px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
  }

  body:has(#exercise-content) .ex-desc {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
  }

  body:has(#exercise-content) .skill-tags { margin-bottom: 28px !important; }
  body:has(#exercise-content) .skill-tag { font-size: 12px !important; padding: 4px 10px !important; border-radius: 4px !important; }

  /* .accordion-group → display:contents → Aufbau + Durchführung Grid-Kinder */
  body:has(#exercise-content) .accordion-group { display: contents !important; }

  /* Aufbau: linke Spalte, Zeile 2 */
  body:has(#exercise-content) #acc-aufbau {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 24px !important;
    border: none !important;
  }

  /* Durchführung: rechte Spalte, Zeile 2 */
  body:has(#exercise-content) #acc-durchfuehrung {
    grid-column: 2 !important;
    grid-row: 2 !important;
    border: none !important;
    margin-top: 0 !important;
  }

  /* Accordion-Button → nur als Label sichtbar, nicht klickbar */
  body:has(#exercise-content) .accordion-btn {
    cursor: default !important;
    pointer-events: none !important;
    padding: 0 0 8px 0 !important;
    border: none !important;
  }
  body:has(#exercise-content) .acc-icon { display: none !important; }
  body:has(#exercise-content) .acc-dot { display: none !important; }
  body:has(#exercise-content) .acc-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0E1430 !important;
    letter-spacing: -0.005em !important;
  }

  /* Accordion-Körper immer anzeigen */
  body:has(#exercise-content) .accordion-body {
    display: block !important;
    padding-bottom: 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #3B4565 !important;
  }

  /* Tiles: volle Breite */
  body:has(#exercise-content) .tiles-section {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    padding: 0 !important;
    margin-top: 48px !important;
    padding-top: 28px !important;
    border-top: 1px solid #E6E8EF !important;
  }
  body:has(#exercise-content) .tiles-label {
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 16px !important;
  }
  body:has(#exercise-content) .tiles-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  body:has(#exercise-content) .tile-btn {
    border-radius: 6px !important;
    padding: 18px 20px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  body:has(#exercise-content) .tile-hint { display: none !important; }

  /* Bottom Sheet: volle Breite (Overlay bleibt funktional) */
  body:has(#exercise-content) .sheet-overlay { grid-column: 1 / -1 !important; }

  /* Sisters: volle Breite */
  body:has(#exercise-content) .sisters-block {
    grid-column: 1 / -1 !important;
    padding: 0 !important;
    margin-top: 32px !important;
  }

  /* Feedback: volle Breite, dunkle Karte wie im Prototyp */
  body:has(#exercise-content) .feedback-block {
    grid-column: 1 / -1 !important;
    padding: 0 !important;
    margin-top: 40px !important;
  }
  body:has(#exercise-content) .feedback-card {
    border-radius: 6px !important;
    padding: 24px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
    flex-direction: row !important;
  }
  body:has(#exercise-content) .feedback-title {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }
  body:has(#exercise-content) .feedback-card textarea { display: none !important; }
  body:has(#exercise-content) .feedback-submit {
    width: auto !important;
    margin-top: 0 !important;
    padding: 12px 22px !important;
    background: #fff !important;
    color: #0E1430 !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── Desktop Footer ── */
  .desktop-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 40px;
    border-top: 1px solid #e8edf2;
    margin-top: auto;
  }

  .desktop-footer-link {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    transition: color 0.15s;
  }

  .desktop-footer-link:hover,
  .desktop-footer-link.active {
    color: #003D82;
  }

  .desktop-footer-sep {
    color: #ccc;
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════════
   HOME — Foto-Panel-Split (Desktop)
   Links: Fußball-Foto mit Headline · Rechts: dunkles Formular
   ══════════════════════════════════════════════════════════ */

.home-hero-headline { display: none; }
.home-hero-sub { display: none; }

@media (min-width: 768px) {
  body:has(.crest-panel) {
    background: #0E1430 !important;
  }

  /* Grid: Nav oben (volle Breite), Panels mitte, Footer unten */
  body:has(.crest-panel) .container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas:
      "topnav topnav"
      "photo  form"
      "footer footer" !important;
    min-height: 100vh !important;
    height: 100vh !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #0E1430 !important;
    overflow: hidden !important;
    flex-direction: unset !important;
  }

  /* Nav: weiß, volle Breite */
  body:has(.crest-panel) .desktop-topnav {
    grid-area: topnav !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e8edf2 !important;
  }

  body:has(.crest-panel) .desktop-topnav-logo { color: #003D82 !important; }
  body:has(.crest-panel) .desktop-topnav-link { color: #555 !important; }
  body:has(.crest-panel) .desktop-topnav-link:hover { background: #f0f4ff !important; color: #003D82 !important; }
  body:has(.crest-panel) .desktop-topnav-link.active { background: #003D82 !important; color: #fff !important; }

  /* Footer: dunkel, volle Breite */
  body:has(.crest-panel) .desktop-footer {
    grid-area: footer !important;
    background: #0E1430 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    margin-top: 0 !important;
  }

  body:has(.crest-panel) .desktop-footer-link { color: rgba(255,255,255,0.45) !important; }
  body:has(.crest-panel) .desktop-footer-link:hover { color: #fff !important; }
  body:has(.crest-panel) .desktop-footer-sep { color: rgba(255,255,255,0.18) !important; }

  /* Linkes Panel: Fußball-Foto */
  body:has(.crest-panel) .crest-panel {
    grid-area: photo !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    background: #0E1430 url('/hero-photo.jpg') center/cover no-repeat !important;
    overflow: hidden !important;
    flex-shrink: unset !important;
  }

  /* Gradient overlay */
  body:has(.crest-panel) .crest-panel::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(150deg, rgba(14,20,48,0.72) 0%, rgba(14,20,48,0.28) 100%) !important;
    z-index: 1 !important;
  }

  body:has(.crest-panel) .crest-shape { display: none !important; }

  body:has(.crest-panel) .crest-inner {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 64px !important;
    gap: 14px !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 64px !important;
  }

  /* Logo in TopNav — im Foto-Panel ausblenden */
  body:has(.crest-panel) .crest-inner img { display: none !important; }

  /* Große Headline auf dem Foto */
  body:has(.crest-panel) .home-hero-headline {
    display: block !important;
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-size: 52px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    margin: 0 !important;
  }

  /* Untertitel unter Headline */
  body:has(.crest-panel) .home-hero-sub {
    display: block !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.60) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  /* Rechtes Panel: dunkles Formular mit Crest-Naht */
  body:has(.crest-panel) .content {
    grid-area: form !important;
    background: #0E1430 !important;
    clip-path: url(#crestSeam) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 64px 72px 64px 132px !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
    height: 100% !important;
  }

  body:has(.crest-panel) .selects {
    width: 100%;
    max-width: 400px;
  }

  body:has(.crest-panel) .tagline { display: none !important; }

  /* Labels + Felder auf dunklem Hintergrund */
  body:has(.crest-panel) .field-label { color: #ffffff !important; }
  body:has(.crest-panel) .field-optional { color: rgba(255,255,255,0.45) !important; }

  /* CTA immer blau auf Desktop */
  body:has(.crest-panel) .cta-btn {
    background: #1E6BFF !important;
    color: #fff !important;
    cursor: pointer !important;
  }
}


/* ══════════════════════════════════════════════════════════
   ÜBUNGEN — Listenansicht statt Kachelgrid
   ══════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  body:has(.filter-section) #exercises-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  body:has(.filter-section) .exercise-card {
    flex-direction: row !important;
    align-items: center !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #E6E8EF !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    padding: 15px 16px 15px 20px !important;
    gap: 24px !important;
    position: relative !important;
  }

  body:has(.filter-section) .exercise-card:first-child {
    border-top: 1px solid #E6E8EF !important;
  }

  body:has(.filter-section) .exercise-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #F8F9FC !important;
  }

  /* Farbbalken links nach Phase */
  body:has(.filter-section) .exercise-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 28px;
    border-radius: 2px;
    background: #E6E8EF;
  }
  body:has(.filter-section) .exercise-card[data-phase="Aufwärmen"]::before { background: #C2611F; }
  body:has(.filter-section) .exercise-card[data-phase="Hauptteil"]::before  { background: #0E6A45; }
  body:has(.filter-section) .exercise-card[data-phase="Spielformat"]::before { background: #0F3FA8; }

  body:has(.filter-section) .card-accent { display: none !important; }

  body:has(.filter-section) .card-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 0 !important;
    flex: 1 !important;
    grid-template-columns: unset !important;
  }

  body:has(.filter-section) .card-left {
    flex: 0 0 300px !important;
    border-right: none !important;
    padding-right: 28px !important;
    align-items: center !important;
  }

  body:has(.filter-section) .card-title {
    font-size: 15px !important;
    margin-bottom: 0 !important;
  }

  body:has(.filter-section) .card-right { flex: 1 !important; }

  body:has(.filter-section) .card-desc {
    font-size: 13px !important;
    -webkit-line-clamp: 2 !important;
  }

  body:has(.filter-section) .card-tags {
    display: none !important;
  }

  body:has(.filter-section) .card-body {
    padding: 0 !important;
  }
}

@media (min-width: 1200px) {
  body:has(.filter-section) .card-left {
    flex: 0 0 360px !important;
  }
}




/* ══════════════════════════════════════════════════════════
   EINHEIT-DETAIL — Warmer Hintergrund, dunkler Hero-Header
   ══════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  body:has(#einheit-content) .header {
    display: none !important;
  }

  /* Weiße TopNav */
  body:has(#einheit-content) .desktop-topnav {
    background: #fff;
    border-bottom: 1px solid #e8edf2;
  }

  body:has(#einheit-content) .desktop-topnav-logo {
    color: #003D82;
  }

  body:has(#einheit-content) .desktop-topnav-link {
    color: #555;
  }

  body:has(#einheit-content) .desktop-topnav-link:hover {
    background: #f0f4ff;
    color: #003D82;
  }

  body:has(#einheit-content) .desktop-topnav-link.active {
    background: #003D82;
    color: #fff;
  }

  body:has(#einheit-content) {
    background: #FBFAF6 !important;
  }

  body:has(#einheit-content) .container {
    background: #FBFAF6 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Dunkler Hero-Bereich mit Einheit-Titel */
  body:has(#einheit-content) .einheit-hero {
    background: #0E1430 !important;
    padding: 80px !important;
    width: 100% !important;
  }

  body:has(#einheit-content) .einheit-hero #titel {
    font-size: 64px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -0.04em !important;
    line-height: 1.0 !important;
    max-width: 900px;
    margin-bottom: 0 !important;
  }

  /* Content-Bereich */
  body:has(#einheit-content) .content {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 56px 80px 80px !important;
  }

  /* Phasen-Header */
  body:has(#einheit-content) .phase-section-header {
    padding: 40px 0 20px !important;
    gap: 12px !important;
  }

  body:has(#einheit-content) .phase-section:first-child .phase-section-header {
    padding-top: 8px !important;
  }

  body:has(#einheit-content) .phase-header-bar {
    height: 4px !important;
  }

  body:has(#einheit-content) .phase-header-label {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
  }

  /* Übungs-Karten in der Einheit */
  body:has(#einheit-content) .uebung-card {
    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid #E6E8EF !important;
    margin-bottom: 8px !important;
  }

  body:has(#einheit-content) .uebung-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.09) !important;
    transform: translateY(-1px);
  }
}


/* ══════════════════════════════════════════════════════════
   EINHEIT-GENERATOR — Coach-Ansicht (Desktop)
   Kompakter Header-Band + Sidebar + aufgeklappte Karten
   ══════════════════════════════════════════════════════════ */

/* Sidebar auf Mobile ausblenden */
.dr-sidebar { display: none; }
.dr-main { flex: 1; min-width: 0; }

@media (min-width: 768px) {
  body:has(.page-hero) {
    background: #F5F6F9 !important;
  }

  body:has(.page-hero) .container {
    background: #F5F6F9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Weiße TopNav */
  body:has(.page-hero) .desktop-topnav { background: #fff; border-bottom: 1px solid #e8edf2; }
  body:has(.page-hero) .desktop-topnav-logo { color: #003D82; }
  body:has(.page-hero) .desktop-topnav-link { color: #555; }
  body:has(.page-hero) .desktop-topnav-link:hover { background: #f0f4ff; color: #003D82; }
  body:has(.page-hero) .desktop-topnav-link.active { background: #003D82; color: #fff; }

  /* Mobilen Header ausblenden */
  body:has(.page-hero) .header { display: none !important; }

  /* Hero: kompaktes dunkles Band */
  body:has(.page-hero) .page-hero {
    padding: 20px 56px 22px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  body:has(.page-hero) .back-btn {
    font-size: 12.5px !important;
    margin-bottom: 8px !important;
    color: rgba(255,255,255,0.65) !important;
  }

  body:has(.page-hero) .hero-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.2 !important;
  }

  /* Content: zwei Spalten (Sidebar + Main) */
  body:has(.page-hero) .content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 40px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 28px 56px 80px !important;
    overflow-y: visible !important;
  }

  /* ── Sidebar ── */
  body:has(.page-hero) .dr-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 220px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 28px !important;
    align-self: flex-start !important;
  }

  .dr-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dr-sidebar-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6B7390;
  }

  .dr-sidebar-phases {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
  }

  .dr-sidebar-phase { display: flex; flex-direction: column; }

  .dr-sidebar-phase-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0E1430;
    transition: background 0.12s;
  }
  .dr-sidebar-phase-link:hover { background: #E6E8EF; }

  .dr-sidebar-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .dr-sidebar-ex-link {
    display: block;
    padding: 4px 8px 4px 24px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #3B4565;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.12s;
  }
  .dr-sidebar-ex-link:hover { color: #1E6BFF; }

  .dr-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }

  .dr-sidebar-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #E6E8EF;
    border-radius: 6px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0E1430;
    cursor: pointer;
    transition: background 0.12s;
  }
  .dr-sidebar-action-btn:hover { background: #F5F6F9; }

  /* ── Phase-Header ── */
  body:has(.page-hero) .gen-phase-header {
    flex-direction: row !important;
    align-items: baseline !important;
    margin: 32px 0 12px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid #E6E8EF !important;
    gap: 0 !important;
  }
  body:has(.page-hero) .gen-phase-header:first-child { margin-top: 0 !important; }

  body:has(.page-hero) .gen-phase-aufwaermen { border-bottom-color: #0F3FA8 !important; }
  body:has(.page-hero) .gen-phase-hauptteil  { border-bottom-color: #1E6BFF !important; }
  body:has(.page-hero) .gen-phase-spielformat { border-bottom-color: #00B85C !important; }

  body:has(.page-hero) .gen-phase-bar { display: none !important; }

  body:has(.page-hero) .gen-phase-label {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    color: #0E1430 !important;
  }

  /* ── Exercise Cards ── */
  body:has(.page-hero) .ex-card {
    border-radius: 8px !important;
    border: 1px solid #E6E8EF !important;
    border-top-width: 1px !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 10px !important;
  }

  /* Phasen-Farben der Badges auf Desktop */
  body:has(.page-hero) .ex-card[data-phase="aufwaermen"] .ex-phase-badge { background: #0F3FA8 !important; }
  body:has(.page-hero) .ex-card[data-phase="hauptteil"]  .ex-phase-badge { background: #1E6BFF !important; }
  body:has(.page-hero) .ex-card[data-phase="spielformat"] .ex-phase-badge { background: #00B85C !important; }

  /* Immer geöffnet (kein Accordion) */
  body:has(.page-hero) .ex-card-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 22px 18px !important;
  }

  /* Card Header: kein Klick-Stil */
  body:has(.page-hero) .ex-card-header {
    cursor: default !important;
    padding: 18px 22px 14px !important;
  }
  body:has(.page-hero) .ex-card-header:hover { background: #fff !important; }

  body:has(.page-hero) .ex-chevron { display: none !important; }

  body:has(.page-hero) .ex-card-title {
    font-size: 19px !important;
    padding-right: 0 !important;
    margin-bottom: 4px !important;
  }

  body:has(.page-hero) .ex-card-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  body:has(.page-hero) .ex-img { max-height: 140px !important; }

  /* Skills-Zeile */
  body:has(.page-hero) .ex-skills {
    padding: 0 0 10px !important;
    border-bottom: none !important;
  }

  /* Aufbau / Durchführung nebeneinander */
  body:has(.page-hero) .dr-sections-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 24px !important;
    padding-top: 12px !important;
    border-top: 1px solid #E6E8EF !important;
    margin-top: 4px !important;
  }

  body:has(.page-hero) .ex-section { padding: 0 !important; border: none !important; }
  body:has(.page-hero) .ex-section-head { margin-bottom: 5px !important; }
  body:has(.page-hero) .ex-section-dot { display: none !important; }
  body:has(.page-hero) .ex-section-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #6B7390 !important;
  }
  body:has(.page-hero) .ex-section-text {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #3B4565 !important;
  }

  /* Detail-Link */
  body:has(.page-hero) .ex-detail-link {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 12.5px !important;
    color: #1E6BFF !important;
  }
  body:has(.page-hero) .ex-detail-link:hover { background: none !important; }

  /* Reroll */
  body:has(.page-hero) .reroll-wrap { margin-top: 24px !important; }
}


/* ══════════════════════════════════════════════════════════
   EINHEITEN — Editorial Desktop Layout
   Heller Hintergrund · Zentrierte Card · Weißes Formular
   ══════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  body:has(.selection-section) {
    background: #F7F6F2 !important;
  }

  body:has(.selection-section) .container {
    background: #F7F6F2 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body:has(.selection-section) .header { display: none !important; }

  /* Weiße TopNav */
  body:has(.selection-section) .desktop-topnav {
    background: #fff !important;
    border-bottom: 1px solid #E6E8EF !important;
  }
  body:has(.selection-section) .desktop-topnav-logo { color: #1E6BFF !important; }
  body:has(.selection-section) .desktop-topnav-link { color: #0E1430 !important; }
  body:has(.selection-section) .desktop-topnav-link:hover { background: #f0f4ff !important; color: #1E6BFF !important; }
  body:has(.selection-section) .desktop-topnav-link.active { background: #1E6BFF !important; color: #fff !important; }

  /* Hauptbereich: transparenter Hintergrund, zentrierter Inhalt */
  body:has(.selection-section) .selection-section {
    background: transparent !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 72px 24px 96px !important;
    overflow: visible !important;
  }

  /* Headline: dekorative Linie als Eyebrow + 44px H1 */
  body:has(.selection-section) .page-title {
    width: 100% !important;
    max-width: 720px !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    color: #0E1430 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
  }

  body:has(.selection-section) .page-title::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: #0E1430;
    margin-bottom: 18px;
  }

  /* Subtitle */
  body:has(.selection-section) .page-subtitle {
    width: 100% !important;
    max-width: 720px !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    color: #3B4565 !important;
    margin-bottom: 36px !important;
  }

  /* Weiße Card für die Auswahl-Felder */
  body:has(.selection-section) .selects {
    width: 100% !important;
    max-width: 720px !important;
    background: #fff !important;
    border: 1px solid #E6E8EF !important;
    border-radius: 10px !important;
    padding: 34px 38px 30px !important;
    gap: 22px !important;
    box-shadow: 0 1px 0 rgba(14,20,48,0.02), 0 24px 48px -32px rgba(14,20,48,0.18) !important;
    overflow: visible !important;
  }

  /* Feld-Labels: dunkel auf weißem Hintergrund */
  body:has(.selection-section) .field-label { color: #0E1430 !important; }
  body:has(.selection-section) .field-optional { color: #6B7390 !important; }

  /* Select-Button: subtile Border */
  body:has(.selection-section) .sel-btn {
    border-color: #E6E8EF !important;
    border-radius: 6px !important;
  }
  body:has(.selection-section) .sel-btn:hover {
    border-color: #3B4565 !important;
  }

  /* Divider + CTA am Kartenende (volle Breite, dunkel) */
  body:has(.selection-section) .cta-btn {
    background: #0E1430 !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 15px !important;
    width: calc(100% + 76px) !important;
    justify-content: flex-end !important;
    margin: 4px -38px -30px !important;
    padding: 22px 38px !important;
    border-top: 1px solid #E6E8EF !important;
    border-radius: 0 0 9px 9px !important;
  }

  body:has(.selection-section) .cta-btn:hover {
    background: #192245 !important;
  }

  /* Leerer Flex-Spacer ausblenden */
  body:has(.selection-section) .container > div[style*="flex:1"] {
    display: none !important;
  }

  /* Weißer Footer */
  body:has(.selection-section) .desktop-footer {
    background: #fff !important;
    border-top: 1px solid #E6E8EF !important;
  }
}