/* Gemeinsames Aussehen aller Seiten der Anleitung.
   Herausgeloest aus den 13 damals identischen <style>-Bloecken.
   Seitenspezifische Regeln bleiben in der jeweiligen Seite. */
:root {
  --bg: #FAF8F5; --card: #FFFFFF; --card-hover: #F5FAFA; --border: #E8E4DF;
  --text: #1C1C1C; --muted: #7A7268; --accent: #008080; --accent-dark: #006666;
  --accent-tint: #E6F2F2; --warn-tint: #FFF4E5; --warn: #B45309;
  --ok-tint: #EAF6EC; --ok: #2F7D3A;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --sidebar: 280px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text);
  line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, var(--accent-tint) 0%, transparent 68%);
  opacity: 0.3; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .22; transform: scaleY(1);} 50% { opacity: .40; transform: scaleY(1.05);} }
a { color: var(--accent-dark); }

/* Layout: Seitenleiste links, Inhalt rechts */
.layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 28px 18px 28px 22px;
  border-right: 1px solid var(--border); background: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.brand { display: block; text-decoration: none; margin-bottom: 22px; }
.brand .title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--accent-dark); line-height: 1.2; }
.brand .back { display: block; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.brand .back:hover { color: var(--accent); }
.nav h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 6px; }
.nav a { display: block; padding: 7px 10px; border-radius: 9px; text-decoration: none; color: var(--text); font-size: .93rem; }
.nav a:hover { background: var(--card-hover); color: var(--accent-dark); }
.nav a.active { background: var(--accent-tint); color: var(--accent-dark); font-weight: 600; }

.menu-toggle { display: none; }

/* min-width:0 ist noetig, nicht kosmetisch: main ist ein Grid-Element und
   schrumpft ohne diese Zeile nicht unter sein breitestes Kind. Eine breite
   Tabelle oder ein .tree-Block scrollt dann nicht in sich, sondern schiebt
   die ganze Seite seitwaerts. Auf dem Handy (375 px) betraf das abos,
   voraussetzungen, prompts und alternativen mit bis zu 219 px Ueberlauf.
   Am Desktop aendert die Zeile nichts. */
main { padding: 44px 48px 64px; max-width: 860px; min-width: 0; }
header.page { margin-bottom: 28px; }
.kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 0 0 6px; }
h1 { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; color: var(--accent-dark); }
.lead { color: var(--muted); font-size: 1.08rem; margin: 0; }
h2 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; margin: 40px 0 12px; color: var(--accent-dark); }
h3 { font-size: 1.05rem; margin: 26px 0 8px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 6px; }
li > ul, li > ol { margin-top: 6px; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--card); border: 1px solid var(--border); padding: 1px 6px; border-radius: 6px; }
pre { background: #1F2A2A; color: #EAF2F2; padding: 16px 18px; border-radius: 12px; overflow-x: auto;
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.5; margin: 0 0 18px; white-space: pre-wrap; }
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin: 0 0 16px; }
.card h3 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0 0 18px; }
.grid .card { margin: 0; }
a.card { display: block; text-decoration: none; color: var(--text); transition: transform .15s, border-color .15s; }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); }
a.card .name { font-weight: 600; color: var(--accent-dark); display: block; margin-bottom: 4px; }
a.card .meta { color: var(--muted); font-size: .88rem; }

.note { border-left: 4px solid var(--accent); background: var(--accent-tint); padding: 12px 16px; border-radius: 0 12px 12px 0; margin: 0 0 18px; }
.warn { border-left: 4px solid var(--warn); background: var(--warn-tint); padding: 12px 16px; border-radius: 0 12px 12px 0; margin: 0 0 18px; }
.ok { border-left: 4px solid var(--ok); background: var(--ok-tint); padding: 12px 16px; border-radius: 0 12px 12px 0; margin: 0 0 18px; }
.note p:last-child, .warn p:last-child, .ok p:last-child { margin-bottom: 0; }
.label { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px;
  border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark); font-weight: 600; vertical-align: middle; }
.label.warn-l { background: var(--warn-tint); color: var(--warn); }
.label.ok-l { background: var(--ok-tint); color: var(--ok); }

.summary { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; margin: 0 0 28px; }
.summary h2 { margin: 0 0 8px; font-size: 1.1rem; font-family: var(--font-body); color: var(--text); }
.summary ul { margin-bottom: 0; }

/* Schritte */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 24px; }
.steps > li { position: relative; padding: 0 0 22px 52px; margin: 0; }
.steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.steps > li::after { content: ''; position: absolute; left: 17px; top: 40px; bottom: 0; width: 2px; background: var(--border); }
.steps > li:last-child::after { display: none; }
.steps > li h3 { margin: 6px 0 8px; }

/* Prompt-Box */
.prompt { position: relative; border: 1px solid #CDE4E4; background: #F3FAFA; border-radius: 12px; padding: 14px 16px 14px; margin: 0 0 18px; }
.prompt .ptitle { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-dark); font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prompt pre { margin: 0; background: #FFFFFF; color: var(--text); border: 1px solid var(--border); font-family: var(--font-body); font-size: .92rem; }
.copy { font: inherit; font-size: .75rem; letter-spacing: 0; text-transform: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; color: var(--accent-dark); cursor: pointer; }
.copy:hover { border-color: var(--accent); }

/* Tabellen */
.tablewrap { overflow-x: auto; margin: 0 0 18px; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--accent-tint); color: var(--accent-dark); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
tr:last-child td { border-bottom: 0; }
td.y { color: var(--ok); font-weight: 600; } td.n { color: var(--warn); font-weight: 600; }

/* Ordnerbaum */
.tree { font-family: var(--font-mono); font-size: .86rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin: 0 0 18px; white-space: pre; overflow-x: auto; line-height: 1.6; }
.tree .c { color: var(--muted); }

/* Diagramm (Flow) */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0 0 20px; }
.flow .box { flex: 1 1 140px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: .9rem; }
.flow .box b { display: block; color: var(--accent-dark); margin-bottom: 4px; }
.flow .arrow { align-self: center; color: var(--accent); font-size: 1.3rem; }
.flow .box.you { border-color: #CDE4E4; background: var(--accent-tint); }

/* Blättern */
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border); }
.pager a { flex: 1; text-decoration: none; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); }
.pager a:hover { border-color: var(--accent); }
.pager a small { display: block; color: var(--muted); font-size: .78rem; }
.pager a.next { text-align: right; }

footer { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem; }
footer code { background: var(--card); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.footer-credit { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; transition: color .15s ease; }
.footer-credit:hover { color: var(--accent); }
.footer-avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); object-fit: cover; display: block; }
.footer-coffee { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; transition: color .15s ease; }
.footer-coffee:hover { color: var(--accent); }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 16px 18px; }
  .menu-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; font: inherit; font-weight: 600;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; cursor: pointer; color: var(--accent-dark); }
  .nav { display: none; margin-top: 10px; }
  .nav.open { display: block; }
  .brand { margin-bottom: 12px; }
  main { padding: 28px 18px 48px; }
  h1 { font-size: 1.7rem; }
  .footer-sep { display: none; }
}
/* «Jetzt faellig»: faellig.js aus stayingclean/ki-tasks. Ohne faelligen Eintrag
   bleibt die Spalte hidden und .layout zweispaltig. */
.layout.mit-spalte { grid-template-columns: var(--sidebar) minmax(0, 1fr) 300px; }
.spalte { position: sticky; top: 24px; align-self: start; margin: 44px 24px 0 0; padding: 16px 18px;
  background: var(--card); border: 1px solid #F2D3B0; border-top: 4px solid var(--warn); border-radius: 14px; font-size: .88rem; }
.spalte h2 { font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--warn); margin: 0 0 4px; }
.spalte h3 { font-size: .95rem; margin: 16px 0 4px; }
.spalte h3 a { text-decoration: none; }
.spalte h3 a:hover { text-decoration: underline; }
.spalte p { margin: 0 0 6px; }
.spalte ul { list-style: none; margin: 6px 0; padding: 0; }
.spalte li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; margin: 0; border-top: 1px solid var(--border); }
.spalte li a { color: var(--text); text-decoration: none; }
.spalte li a:hover { color: var(--accent); }
.rest { color: var(--muted); white-space: nowrap; }
.rest.knapp { color: var(--warn); font-weight: 600; }
.spalte .klein { color: var(--muted); font-size: .78rem; margin-top: 8px; }
.badge { display: inline-block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--warn); background: var(--warn-tint); border-radius: 999px; padding: 2px 9px; margin-bottom: 6px; }
.card.ist-faellig { border-color: #F2D3B0; box-shadow: inset 0 3px 0 var(--warn); }
.nav a.ist-faellig::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-radius: 50%; background: var(--warn); vertical-align: middle; }
/* Zu schmal fuer drei Spalten: Spalte ueber den Inhalt, Seitenleiste ueber beide Zeilen */
@media (max-width: 1180px) {
  .layout.mit-spalte { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .layout.mit-spalte .sidebar { grid-row: 1 / span 2; }
  .layout.mit-spalte .spalte { grid-column: 2; grid-row: 1; position: static; margin: 28px 48px 0; max-width: 764px; }
  .layout.mit-spalte main { grid-column: 2; grid-row: 2; padding-top: 28px; }
}
/* Handy: Spalte unter der Seitenleiste, ueber dem Inhalt. Muss nach dem
   1180er-Block stehen, sonst gewinnt dessen grid-row (gleiche Spezifitaet). */
@media (max-width: 860px) {
  .layout.mit-spalte { grid-template-columns: 1fr; }
  .layout.mit-spalte .sidebar, .layout.mit-spalte .spalte, .layout.mit-spalte main { grid-column: 1; grid-row: auto; }
  .layout.mit-spalte .spalte { order: 1; margin: 20px 18px 0; max-width: none; }
  .layout.mit-spalte main { order: 2; padding-top: 20px; }
}
@media print { .spalte, .sidebar, .pager, .copy { display: none; } .layout { display: block; } main { max-width: none; padding: 0; } }