/* =========================================================
   FLUID BLUE UI FRAMEWORK – CONSOLIDATED CORE
   ========================================================= */

/* 1) BASE STYLES */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@starting-style {
  html {
    font-display: swap;
  }
}
@view-transition {
  navigation: auto;
}

html {
  font-size: var(--font-size-root);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  /* Das Bibliotheks-Bild */
  background-image: url("/assets/img/library-g19b3ce0fb_1920.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* Parallax-Effekt: Bild steht, Text scrollt */
  background-repeat: no-repeat;

  background-color: oklch(95% 0 0); /* Fallback */
  color: var(--text);
  margin: 0;
}

section,
article {
  max-width: 1024px;
  margin: auto;
  padding: 25px;
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--article-border-color); /* Dünner Border statt Variable */

  /* WICHTIG: Weichzeichner für den Hintergrund, damit Text lesbar wird */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sanfter Schatten hebt Content ab */
}

section {
  background-color: var(--section-background-color);
}

article {
  background-color: var(--article-background-color);
  margin-bottom: 15px;
}

/* --- Breadcrumbs --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  /* Damit man Breadcrumbs auf dem Bild lesen kann, falls sie nackt stehen: */
  padding: 0.5rem;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  display: inline-flex;
  margin-bottom: var(--space-3);
}
.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb-separator {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-wrap: pretty;
  margin-top: 0;
  margin-bottom: var(--space-3);
  color: var(--text-header);
}

/* Heading Sizes clamp() ... (unverändert lassen, war gut) */
h1 {
  font-size: clamp(2rem, 2.2vw + 1rem, 3rem);
}
h2 {
  font-size: clamp(1.75rem, 1.8vw + 0.9rem, 2.5rem);
}
h3 {
  font-size: clamp(1.5rem, 1.5vw + 0.8rem, 2.1rem);
}
h4 {
  font-size: clamp(1.25rem, 1.2vw + 0.7rem, 1.7rem);
}
h5 {
  font-size: clamp(1.1rem, 1vw + 0.6rem, 1.5rem);
}
h6 {
  font-size: clamp(1rem, 0.9vw + 0.55rem, 1.35rem);
}

.brief {
  font-size: var(--font-size-small);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  background: var(--bg-alt); /* Lesbarkeit */
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* --- Buttons (angepasst an das Sofa-Blau) --- */
.btn {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated); /* Helles Weiss */
  color: var(--color-primary); /* Blaue Schrift */
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all var(--transition-normal);
  backdrop-filter: blur(5px);
}

.btn-nav {
  width: 150px;
  height: auto;
}

.btn:hover {
  background: var(--color-primary); /* Blau */
  color: white; /* Weiss */
  border-color: var(--color-primary-dark);
  box-shadow: 0 4px 12px var(--color-primary-soft);
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-ghost {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  text-decoration: none;
}
.btn-ghost:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

/* --- Inputs --- */
.field-control,
.select-control {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated); /* Deckendes Weiß */
  color: var(--text);
  font: inherit;
}
.field-control:focus,
.select-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* --- Cards (Wichtig für Lesbarkeit!) --- */
.card {
  background: var(--bg-elevated); /* 92% Weiß */
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}
.card-title {
  color: var(--color-primary);
}

/* --- Sidebar Navigation Styles --- */

/* Reset der Liste */
.sidebar .nav-list,
.sidebar .nav-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar .nav-list li a {
  color: var(--text-muted); /* Dunkles Grau */
  font-weight: 500;
  transition: all 0.2s ease;

  /* Kleiner Text-Schatten verbessert Lesbarkeit auf Glas */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.sidebar .nav-list li a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.sidebar .nav-list li a.active {
  background: var(--color-primary); /* Volles Blau */
  color: white;
  text-shadow: none;
  box-shadow: 0 4px 15px rgba(43, 120, 197, 0.4); /* Leuchtender Schatten */
}
/* --- Scroll To Top --- */
.scroll-top-btn {
  /* ... existierende Positionierung ... */
  right: 1.5rem;
  bottom: 1.5rem;
  width: 3rem;
  height: 3rem;
  background: var(--color-primary); /* Button soll auffallen */
  color: white;
  border: none;
  border-radius: 50%; /* Rund ist moderner */
}
.scroll-top-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* --- TOC (Table of Contents) --- */
ul.toc-level-2 {
  background: var(--bg-elevated);
  border-left-color: var(--color-primary);
  box-shadow: var(--shadow-soft);
}

/* Rest der Utilities (flex, grid, spacing) unverändert lassen, 
   da sie keine Farben beinhalten */
.mermaid {
  background: white;
  padding: 10px;
  border-radius: 8px;
} /* Mermaid braucht weißen Hintergrund */

.icon-small {
  width: var(--font-size-root);
  height: auto;
  vertical-align: middle;
}
.icon-medium {
  width: var(--font-size-bigger);
  height: auto;
}

.main_img {
  max-width: 100%;
  height: auto;
}

/* --- List Styles --- */

.list-style-none {
  list-style: none;
}

.list-style-disc {
  list-style: disc;
}

.list-style-circle {
  list-style: circle;
}

.list-style-square {
  list-style: square;
  color: var(--color-primary-soft);
}

/* --- Utilities --- */
.center {
  text-align: center;
}

.links {
  color: var(--color-primary-soft);
  text-decoration: none;
}

.links a {
  color: var(--color-primary);
  text-decoration: none;
}

.links a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Text */
.text {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  text-wrap: pretty;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.brief {
  color: var(--color-primary-soft);
}

.font-color {
  color: var(--font-color);
}