/* ===========================
   Layout
=========================== */

.site-shell {
  --sidebar-width: 88px;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100vh - var(--viewport-top-gap, 2px));
  padding-top: var(--viewport-top-gap, 2px);
  position: relative;
  z-index: 2;
}

.site-shell > [data-sidebar-mount] {
  grid-column: 1;
  grid-row: 1 / -1;
}

.site-shell > #app-content {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  view-transition-name: dbook-content;
  isolation: isolate;
  contain: paint;
  overflow: clip;
}

.site-shell > .main {
  min-height: 0;
}

.site-shell > footer {
  grid-column: 2;
  grid-row: 2;
}

.site-shell.sidebar-collapsed {
  --sidebar-width: 88px;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --page-flip-duration-out: 220ms;
    --page-flip-duration-in: 260ms;
    --page-flip-shift-x: 24px;
    --page-flip-shift-y: 6px;
    --page-flip-tilt: 2.2deg;
    --page-flip-fade-out: 0.1;
  }

  ::view-transition-group(dbook-content) {
    isolation: isolate;
    overflow: clip;
  }

  ::view-transition-old(dbook-content),
  ::view-transition-new(dbook-content) {
    animation-fill-mode: both;
    backface-visibility: hidden;
    transform-style: flat;
    border-radius: inherit;
    mix-blend-mode: normal;
    will-change: opacity, filter, transform;
  }

  :root[data-nav-transition="page-flip"][data-nav-direction="forward"] ::view-transition-old(dbook-content) {
    transform-origin: left center;
    animation: dbook-page-out-forward var(--page-flip-duration-out) cubic-bezier(0.44, 0.05, 0.78, 0.2);
  }

  :root[data-nav-transition="page-flip"][data-nav-direction="forward"] ::view-transition-new(dbook-content) {
    transform-origin: right center;
    animation: dbook-page-in-forward var(--page-flip-duration-in) cubic-bezier(0.2, 0.72, 0.18, 1);
  }

  :root[data-nav-transition="page-flip"][data-nav-direction="backward"] ::view-transition-old(dbook-content) {
    transform-origin: right center;
    animation: dbook-page-out-backward var(--page-flip-duration-out) cubic-bezier(0.44, 0.05, 0.78, 0.2);
  }

  :root[data-nav-transition="page-flip"][data-nav-direction="backward"] ::view-transition-new(dbook-content) {
    transform-origin: left center;
    animation: dbook-page-in-backward var(--page-flip-duration-in) cubic-bezier(0.2, 0.72, 0.18, 1);
  }

  :root:not([data-nav-transition="page-flip"]) ::view-transition-old(dbook-content),
  :root[data-nav-transition="shell-blur"] ::view-transition-old(dbook-content) {
    animation: dbook-content-blur-out 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  :root:not([data-nav-transition="page-flip"]) ::view-transition-new(dbook-content),
  :root[data-nav-transition="shell-blur"] ::view-transition-new(dbook-content) {
    animation: dbook-content-blur-in 260ms cubic-bezier(0.22, 0.61, 0.2, 1);
  }

  @keyframes dbook-page-out-forward {
    from {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1) rotateY(0deg);
      filter: brightness(1);
    }
    to {
      opacity: var(--page-flip-fade-out);
      transform: translateX(calc(var(--page-flip-shift-x) * 0.55)) translateY(var(--page-flip-shift-y)) scale(0.995) rotateY(calc(var(--page-flip-tilt) * -1));
      filter: brightness(0.9);
    }
  }

  @keyframes dbook-page-in-forward {
    from {
      opacity: 0.24;
      transform: translateX(calc(var(--page-flip-shift-x) * -1)) translateY(calc(var(--page-flip-shift-y) * -1)) scale(1.005) rotateY(var(--page-flip-tilt));
      filter: brightness(0.96);
    }
    to {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1) rotateY(0deg);
      filter: brightness(1);
    }
  }

  @keyframes dbook-page-out-backward {
    from {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1) rotateY(0deg);
      filter: brightness(1);
    }
    to {
      opacity: var(--page-flip-fade-out);
      transform: translateX(calc(var(--page-flip-shift-x) * -0.55)) translateY(var(--page-flip-shift-y)) scale(0.995) rotateY(var(--page-flip-tilt));
      filter: brightness(0.9);
    }
  }

  @keyframes dbook-page-in-backward {
    from {
      opacity: 0.24;
      transform: translateX(var(--page-flip-shift-x)) translateY(calc(var(--page-flip-shift-y) * -1)) scale(1.005) rotateY(calc(var(--page-flip-tilt) * -1));
      filter: brightness(0.96);
    }
    to {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1) rotateY(0deg);
      filter: brightness(1);
    }
  }

  @keyframes dbook-content-blur-out {
    from {
      opacity: 1;
      filter: blur(0);
      transform: none;
    }
    to {
      opacity: 0.08;
      filter: blur(5px);
      transform: none;
    }
  }

  @keyframes dbook-content-blur-in {
    from {
      opacity: 0.12;
      filter: blur(5px);
      transform: none;
    }
    to {
      opacity: 1;
      filter: blur(0);
      transform: none;
    }
  }
}


/* ===========================
   Main
=========================== */

/* ======================================================
   Split-Prep: Kanonische Schicht (Design-System v2-ready)
   Zielzuordnung:
   - layout.css: .page, Größencontainer, responsive wrappers
   - components.css: .accordion__body, .ui-*, .box--Brücken
   - content.css: content-/glossar-nahe Komponenten
   - tools.css: sql-*/java-*/caesar-* Spezialfälle
====================================================== */

.main {
  --shell-inline-padding: clamp(20px, 5vw, 56px);
  padding: clamp(72px, 11vh, 120px) var(--shell-inline-padding) var(--space-10);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  inline-size: 100%;
}


.page {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  flex: 1 1 auto;
}

.hero,
.accordion,
.subaccordion,
.knowledge-net-module-slot,
.chapter-knowledge-net,
.box,
.content-block,
.definition-box,
.example-box,
.formula-box,
.code-box,
.caesar-visual,
.diagram-figure,
.glossary-card,
.link-card,
.tool-card,
.tool-shell,
.media-embed {
  width: 100%;
  max-width: var(--content-reading-max);
  margin-left: auto;
  margin-right: auto;
}

.hero {
  margin-bottom: var(--space-8);
  padding: var(--space-2) var(--space-5) var(--space-8);
  border: 1px solid var(--glass-box-border);
  border-radius: var(--radius-xl);
  background: var(--glass-box-bg-strong);
  box-shadow: var(--glass-box-shadow);
  backdrop-filter: blur(var(--glass-box-blur));
  -webkit-backdrop-filter: blur(var(--glass-box-blur));
}


.eyebrow,
.hero__eyebrow {
  display: inline-block;
  margin: var(--space-6) 0 var(--space-2);
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-ui-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}


.eyebrow a,
.hero__eyebrow a,
.eyebrow-link {
  color: inherit;
  text-decoration: none;
}

.eyebrow a:hover,
.hero__eyebrow a:hover,
.eyebrow-link:hover,
.eyebrow a:focus-visible,
.hero__eyebrow a:focus-visible,
.eyebrow-link:focus-visible {
  opacity: 0.82;
  text-decoration: none;
}

.hero h1,
.hero h2,
.hero__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: #f6f9ff;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.hero small,
.hero__subtitle {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-text-soft);
  font-size: var(--fs-meta);
}

.hero-intro {
  display: block;
  margin-top: var(--space-3);
  color: #ffffff;
  font-size: var(--fs-meta);
}

.hero p {
  margin: var(--space-2) 0;
  max-width: min(88ch, 100%);
  overflow-wrap: break-word;
  word-break: normal;
}

.section-stack {
  display: grid;
  gap: var(--space-4);
}

.section-stack > .accordion,
.section-stack > .subaccordion,
.section-stack > .knowledge-net-module-slot,
.section-stack > .content-block,
.section-stack > .box {
  margin: 0 auto;
}

.home-grid .content-block,
.q-phase-grid .content-block {
  margin-bottom: 0;
}

.overview-card-grid h4,
.overview-card-grid strong,
.overview-card-grid p,
.overview-card-grid span {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}


.hero > h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-ui);
  color: #f6f9ff;
}

/* ===========================
   Responsive content proportions
=========================== */

.site-shell,
.main,
.page {
  min-width: 0;
}

.overview-card-grid,
.home-grid,
.q-phase-grid,
.q2-overview-grid,
.q21-level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 16px);
}

@media (max-width: 1080px) {
  .site-shell {
    --sidebar-width: 0px;
    grid-template-columns: minmax(0, 1fr);
  }

  .site-shell > [data-sidebar-mount],
  .site-shell > #app-content,
  .site-shell > .main,
  .site-shell > footer {
    grid-column: 1;
  }

  .site-shell > [data-sidebar-mount] {
    grid-row: 1;
  }

  .site-shell > #app-content {
    grid-row: 1;
    inline-size: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
    contain: none;
    overflow: visible;
  }

  .site-shell > .main {
    grid-row: 1;
    inline-size: 100%;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .site-shell > footer {
    grid-row: 2;
  }

  .main {
    justify-content: flex-start;
    --shell-inline-padding: clamp(12px, 3.8vw, 18px);
    padding: calc(var(--mobile-topbar-height, 56px) + var(--mobile-content-top-gap, 14px)) var(--shell-inline-padding) var(--space-6);
  }

  .page {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
  }

  .overview-card-grid,
  .home-grid,
  .q-phase-grid,
  .q2-overview-grid,
  .q21-level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .hero {
    width: 100%;
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-4) var(--space-4);
  }

  .hero,
  .accordion,
  .subaccordion,
  .box,
  .content-block,
  .definition-box,
  .example-box,
  .formula-box,
  .code-box,
  .tool-card,
  .tool-shell,
  .er-editor-layout,
  .er-editor-stage {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .eyebrow,
  .hero__eyebrow {
    margin: var(--space-4) 0 var(--space-1);
    font-size: 0.76rem;
  }

  .hero h1,
  .hero h2,
  .hero__title {
    font-size: clamp(1.5rem, 4.8vw, 2rem);
  }

  .hero small,
  .hero__subtitle,
  .hero-intro {
    margin-top: 6px;
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: min(84ch, 100%);
  }
}

@media (max-width: 720px) {
  .main {
    --shell-inline-padding: clamp(12px, 4vw, 16px);
    padding: calc(var(--mobile-topbar-height, 56px) + var(--mobile-content-top-gap, 14px)) var(--shell-inline-padding) var(--space-5);
  }

  .overview-card-grid,
  .home-grid,
  .q-phase-grid,
  .q2-overview-grid,
  .q21-level-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .hero {
    width: 100%;
    padding: 6px 10px 10px;
    margin-bottom: var(--space-3);
  }

  .section-stack {
    gap: 8px;
  }

  .section-stack > .accordion,
  .section-stack > .subaccordion,
  .section-stack > .knowledge-net-module-slot,
  .section-stack > .content-block,
  .section-stack > .box {
    margin-inline: 0;
  }

  .hero h1,
  .hero h2,
  .hero__title {
    font-size: clamp(1.3rem, 6.2vw, 1.65rem);
    line-height: 1.18;
  }

  .hero small,
  .hero__subtitle,
  .hero-intro {
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .hero p {
    margin: 6px 0;
    font-size: 0.9rem;
    line-height: 1.38;
  }
}