/* Ersteinführung – Präfix ee-
   Bereich /ersteinfuehrung/: Übersicht aller Kapitel (Kacheln) und Kapitelseiten (Handouts von info.infra-struktur.de,
   nativ nachgebaut). Seiten erzeugt mit tools/seiten/ersteinfuehrung.py.
   Aufbau Kapitel: Seitenkopf (.page-hero mit Brotkrumen, Eyebrow, H1), darunter Kapitel-Navigation
   (bis 1023 px aufklappbare Liste .ee-toc über dem Text, ab 1024 px Seitenleiste .ee-side links), Text (.ee-prose)
   mit Screenshots (.ee-shot) und Vorher-/Weiter-Links (.ee-pager).
   Baut auf style.css auf. Mobile first, Breakpoints wie style.css (480/640/768/1024/1200). */

/* ---------- Seitenkopf ---------- */

.ee-hero { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.ee-hero__eyebrow { margin-top: 1.5rem; }
.ee-hero__title { max-width: 22em; font-size: clamp(1.875rem, 1.25rem + 2.4vw, 3rem); line-height: 1.12; overflow-wrap: break-word; hyphens: auto; }
.ee-hero__meta { margin-top: 1rem; color: var(--muted); font-size: .9375rem; font-weight: 700; }

/* ---------- Kapitel-Navigation ---------- */

.ee-body { padding: clamp(.5rem, 2vw, 1.5rem) 0 clamp(4rem, 9vw, 6.5rem); }
.ee-layout { display: grid; gap: 2rem; }
.ee-main { min-width: 0; }

/* Liste der Kapitel (in .ee-toc und .ee-side gleich) */
.ee-kapitel { display: grid; gap: .1rem; }
.ee-kapitel a {
  display: flex; gap: .65rem; align-items: baseline; min-height: 44px;
  padding: .6rem .75rem; border-left: 3px solid var(--line); border-radius: 0 6px 6px 0;
  color: var(--text); font-size: .9375rem; font-weight: 700; line-height: 1.4; text-decoration: none; text-wrap: pretty;
  transition: border-color .2s, background-color .2s, color .2s;
}
/* Seitenleiste (Maus): kompakter, damit möglichst alle 26 Kapitel ohne Scrollen sichtbar sind */
.ee-side .ee-kapitel { gap: 0; }
.ee-side .ee-kapitel a { min-height: 0; padding: .32rem .7rem; font-size: .875rem; line-height: 1.35; }
.ee-kapitel a:hover { border-left-color: var(--accent); background: var(--bg); color: var(--primary); }
.ee-kapitel a[aria-current="page"] { border-left-color: var(--primary); background: var(--tile-2); color: var(--primary); }
.ee-nr { flex: none; min-width: 1.4em; color: var(--lavender); font-size: .8125rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ee-kapitel a[aria-current="page"] .ee-nr { color: var(--primary); }

/* bis 1023 px: Kasten zum Auf- und Zuklappen über dem Text */
.ee-toc { width: 100%; max-width: 46rem; padding: 1.25rem 1.4rem 1.35rem; border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s); }
.ee-toc__title {
  display: flex; align-items: center; gap: .65rem; min-height: 44px; margin: -.5rem 0; padding: .5rem 0;
  color: var(--primary); font-size: .8125rem; font-weight: 900; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.ee-toc__title::-webkit-details-marker { display: none; }
.ee-toc__title::before, .ee-side__title::before { content: ""; width: 32px; height: 5px; flex: none; border-radius: 99px; background: var(--gradient); }
.ee-toc__chevron { width: 14px; height: 14px; margin-left: auto; transition: transform .25s var(--ease); }
.ee-toc details[open] .ee-toc__chevron { transform: rotate(180deg); }
.ee-toc details[open] .ee-toc__title { margin-bottom: .5rem; }

/* ab 1024 px: Seitenleiste links, läuft mit */
.ee-side { display: none; }
.ee-side__title {
  display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem;
  color: var(--primary); font-size: .8125rem; font-weight: 900; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase;
}

/* Vorheriges / nächstes Kapitel */
.ee-pager { display: grid; gap: 1rem; max-width: 46rem; margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.ee-pager__link {
  display: flex; align-items: center; gap: .9rem; min-height: 44px; padding: 1rem 1.2rem;
  border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s);
  color: var(--text); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ee-pager__link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ee-pager__link > span { display: grid; gap: .15rem; min-width: 0; }
.ee-pager__link .icon { width: 14px; height: 14px; flex: none; color: var(--primary); }
.ee-pager__link--nach { justify-content: space-between; text-align: right; }
.ee-pager__link--nach > span { margin-left: auto; }
.ee-pager__label { color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ee-pager__titel { color: var(--primary); font-weight: 900; line-height: 1.35; overflow-wrap: break-word; }
.ee-alle { margin-top: 1.5rem; }

/* ---------- Text ---------- */

.ee-prose { min-width: 0; max-width: 46rem; line-height: 1.75; overflow-wrap: break-word; }
.ee-prose > * + * { margin-top: 1.25rem; }
.ee-prose h2 { margin-top: clamp(2.75rem, 6vw, 3.5rem); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; }
.ee-prose h2::before { content: ""; display: block; width: 48px; height: 5px; margin-bottom: 1rem; border-radius: 99px; background: var(--gradient); }
.ee-prose h3 { margin-top: 2.25rem; font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); line-height: 1.3; }
.ee-prose h4 { margin-top: 2rem; font-size: 1.125rem; line-height: 1.35; }
.ee-prose h5 { margin-top: 1.75rem; color: var(--primary); font-size: 1rem; line-height: 1.4; }
.ee-prose > :first-child { margin-top: 0; }
.ee-prose h2 + *, .ee-prose h3 + *, .ee-prose h4 + *, .ee-prose h5 + * { margin-top: .9rem; }
.ee-prose a { color: var(--primary); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ee-prose a:hover { text-decoration-thickness: 2px; }
.ee-prose em { font-style: italic; }
.ee-prose hr { height: 0; border: 0; border-top: 1px solid var(--line); }

/* Listen: Punkte laut CD (türkiser Kreis, weißer Haken), nummerierte Listen mit Zahl im Kreis */
.ee-prose ul, .ee-prose ol { display: grid; gap: .6rem; }
.ee-prose li > ul, .ee-prose li > ol { margin-top: .6rem; }
.ee-prose ul > li, .ee-prose ol > li { position: relative; padding-left: 2.1rem; text-wrap: pretty; }
.ee-prose ul > li::before {
  content: ""; position: absolute; left: 0; top: .25em; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center / .7rem no-repeat;
}
.ee-prose li > ul > li::before { width: .55rem; height: .55rem; top: .6em; left: .4rem; background: var(--lavender); }
.ee-prose ol { counter-reset: ee-ol; }
.ee-prose ol > li { counter-increment: ee-ol; }
.ee-prose ol > li::before {
  content: counter(ee-ol); position: absolute; left: 0; top: .2em;
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--tile-2); color: var(--primary); font-size: .8125rem; font-weight: 900; line-height: 1;
}

/* Screenshots: in Originalgröße (Bildschirmfotos in 1×), höchstens so breit wie der Text */
.ee-shot { margin-inline: 0; }
.ee-shot img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--white); box-shadow: var(--shadow-s);
}
/* Symbol mitten im Satz (z. B. Stift, Button) */
.ee-icon { display: inline-block; max-height: 1.6em; width: auto; vertical-align: middle; }

/* Code-Zeilen (Beispiele aus dem Original) */
.ee-prose .ee-code {
  padding: .85rem 1.1rem; border-left: 4px solid var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--tile-2); color: var(--ink); font-size: .9375rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ee-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ee-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

/* ---------- Übersicht: Kacheln ---------- */

.ee-kacheln { display: grid; gap: 1rem; }
.ee-kachel {
  display: flex; flex-direction: column; gap: .6rem; min-height: 100%;
  padding: 1.3rem 1.4rem 1.2rem; border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ee-kachel:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ee-kachel__nr {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--gradient); color: var(--white); font-size: .9375rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.ee-kachel__titel { font-size: 1.125rem; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.ee-kachel__mehr { margin-top: auto; padding-top: .25rem; }
/* Einblenden (main.js) setzt transform: none; Anheben beim Hover wiederherstellen */
.js .ee-kacheln .ee-kachel.is-visible { transition: opacity .7s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.js .ee-kacheln .ee-kachel.is-visible:hover { transform: translateY(-3px); }

/* ---------- Breakpoints ---------- */

@media (max-width: 479px) {
  .ee-prose .ee-pdf__btn { justify-self: stretch; }
}
/* bis 639 px: Kapitel als kompakte Zeilen (Nummer links, Titel rechts) statt hoher Kacheln */
@media (max-width: 639.98px) {
  .ee-kacheln { gap: .6rem; }
  .ee-kachel { flex-direction: row; align-items: center; gap: .9rem; min-height: 64px; padding: .8rem 1.1rem; }
  .ee-kachel__nr { flex: none; width: 34px; height: 34px; font-size: .875rem; }
  .ee-kachel__titel { font-size: 1.0625rem; }
  .ee-kachel__mehr { display: none; }
}
@media (min-width: 640px) {
  .ee-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ee-pager__link--nach { grid-column: 2; }
  .ee-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ee-layout {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 46rem);
    justify-content: space-between; align-items: start; gap: 3.5rem;
  }
  .ee-toc { display: none; }
  .ee-side {
    display: block; grid-column: 1; grid-row: 1;
    position: sticky; top: calc(var(--header-h) + var(--header-gap) * 2 + 1.5rem);
    max-height: calc(100vh - var(--header-h) - var(--header-gap) * 2 - 3rem); overflow-y: auto;
    padding: 1.25rem 1rem 1.25rem 1.2rem; border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s);
    scrollbar-width: thin;
  }
  .ee-main { grid-column: 2; grid-row: 1; }
  .ee-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .ee-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}