/* Tobis kleiner IT-Service
   Leitlinien: große Schrift, starker Kontrast, große Klickflächen, wenig Ablenkung.
   Alle Farben stehen als Variablen hier oben, einmal hell und einmal dunkel.
   Die dunkle Ansicht gilt, wenn das Gerät dunkel eingestellt ist oder jemand oben
   auf „Dunkel“ tippt (js/ansicht.js setzt dann data-farben am <html>). */

:root {
  color-scheme: light;
  --grund: #fffaf5;          /* Seitenhintergrund */
  --flaeche: #ffffff;        /* Karten, Kästen, Eingabefelder */
  --text: #1f1a17;
  --text-leise: #4a403a;
  --akzent: #f97316;         /* Orange für Linien, Ziffern und Flächen mit dunkler Schrift */
  --akzent-hell: #ffedd5;    /* zarte Hinterlegung, z. B. beim Darüberfahren */
  --code-grund: #ffedd5;     /* Hinterlegung von Befehlen im Text */
  --akzent-text: #7c2d12;    /* dunkles Orange als Schrift auf zarter Hinterlegung */
  --knopf: #c2410c;          /* Hauptknöpfe und Links */
  --knopf-text: #ffffff;
  --knopf-darueber: #9a3412;
  --link: #c2410c;
  --rand: #f3d3b5;           /* zarte Ränder um Karten */
  --rand-stark: #4a403a;     /* Ränder um Eingabefelder */
  --dunkel: #1f1a17;         /* Codeblöcke und Fußzeile */
  --dunkel-text: #ffffff;
  --hilfe-grund: #f97316;
  --hilfe-text: #1f1a17;
  --hilfe-knopf: #1f1a17;
  --hilfe-knopf-text: #ffffff;
  --gruen-grund: #dcfce7; --gruen-text: #14532d; --gruen-rand: #15803d;
  --blau-grund: #dbeafe;  --blau-text: #1e3a8a;  --blau-rand: #1d4ed8;
  --grau-grund: #f3f4f6;  --grau-text: #1f2937;  --grau-rand: #4b5563;
  --schatten: 0 1px 3px rgba(31, 26, 23, 0.08);

  --radius: 14px;          /* Karten und Kästen */
  --radius-knopf: 12px;    /* alle Knöpfe, Reiter, Eingabefelder */
  --breite: 68rem;
}

/* Dunkle Farben. Zweimal dieselben Werte: einmal für „Gerät ist dunkel eingestellt“,
   einmal für „selbst auf Dunkel umgeschaltet“. */
@media (prefers-color-scheme: dark) {
  :root:not([data-farben="hell"]) {
    color-scheme: dark;
    --grund: #161412;
    --flaeche: #23201d;
    --code-grund: #35302b;
    --text: #eee9e4;
    --text-leise: #cdc5bd;
    --akzent: #fb923c;
    --akzent-hell: #3a2c20;
    --akzent-text: #fed7aa;
    --knopf: #fb923c;
    --knopf-text: #1a1209;
    --knopf-darueber: #fdba74;
    --link: #fdba74;
    --rand: #4f4841;
    --rand-stark: #b3aaa1;
    --dunkel: #0e0d0c;
    --dunkel-text: #eee9e4;
    --hilfe-grund: #23201d;
    --hilfe-text: #eee9e4;
    --hilfe-knopf: #fb923c;
    --hilfe-knopf-text: #1a1209;
    --gruen-grund: #12301d; --gruen-text: #bbf7d0; --gruen-rand: #4ade80;
    --blau-grund: #172554;  --blau-text: #bfdbfe;  --blau-rand: #60a5fa;
    --grau-grund: #2a2725;  --grau-text: #e5e7eb;  --grau-rand: #9ca3af;
    --schatten: none;
  }
}
:root[data-farben="dunkel"] {
  color-scheme: dark;
  --grund: #161412;
  --flaeche: #23201d;
  --code-grund: #35302b;
  --text: #eee9e4;
  --text-leise: #cdc5bd;
  --akzent: #fb923c;
  --akzent-hell: #3a2c20;
  --akzent-text: #fed7aa;
  --knopf: #fb923c;
  --knopf-text: #1a1209;
  --knopf-darueber: #fdba74;
  --link: #fdba74;
  --rand: #4f4841;
  --rand-stark: #b3aaa1;
  --dunkel: #0e0d0c;
  --dunkel-text: #eee9e4;
  --hilfe-grund: #23201d;
  --hilfe-text: #eee9e4;
  --hilfe-knopf: #fb923c;
  --hilfe-knopf-text: #1a1209;
  --gruen-grund: #12301d; --gruen-text: #bbf7d0; --gruen-rand: #4ade80;
  --blau-grund: #172554;  --blau-text: #bfdbfe;  --blau-rand: #60a5fa;
  --grau-grund: #2a2725;  --grau-text: #e5e7eb;  --grau-rand: #9ca3af;
  --schatten: none;
}

*, *::before, *::after { box-sizing: border-box; }

/* Grundschrift 20px. Größere Stufen über js/ansicht.js */
html { font-size: 125%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.schrift-1 { font-size: 150%; }
html.schrift-2 { font-size: 175%; }

body {
  margin: 0;
  font-family: "Atkinson Hyperlegible", Verdana, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--grund);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { color: var(--text); }

:focus-visible {
  outline: 4px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6em; hyphens: auto; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
.h3 { font-size: 1.25rem; margin-bottom: 0.4em; }
p, ul, ol { margin: 0 0 1em; }
li { margin-bottom: 0.4em; }

/* Auf dem Handy wachsen Überschriften nur so weit, wie lange Wörter noch in die Zeile passen */
@media (max-width: 40rem) {
  h1 { font-size: min(1.7rem, 11vw); }
  h2 { font-size: min(1.4rem, 9vw); }
}
/* Lange deutsche Wörter auf schmalen Bildschirmen trennen statt über den Rand laufen lassen */
@media (max-width: 40rem) {
  body { hyphens: auto; }
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 1rem; }

.sprungmarke {
  position: absolute; left: -9999px; top: 0;
  background: var(--text); color: var(--grund); padding: 0.6rem 1rem;
}
.sprungmarke:focus { left: 1rem; top: 1rem; z-index: 10; }
.unsichtbar { position: absolute; left: -9999px; }
[hidden] { display: none !important; }

/* ---------- Knöpfe: eine Form für alles, was man anklicken kann ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.6rem 1.3rem; max-width: 100%;
  background: var(--knopf); color: var(--knopf-text);
  border: 3px solid var(--knopf); border-radius: var(--radius-knopf);
  font: inherit; font-weight: 700; line-height: 1.3; text-align: center;
  text-decoration: none; cursor: pointer; overflow-wrap: anywhere;
}
.knopf:hover { background: var(--knopf-darueber); border-color: var(--knopf-darueber); color: var(--knopf-text); }
.knopf.zweit { background: var(--flaeche); color: var(--link); }
.knopf.zweit:hover { background: var(--akzent-hell); color: var(--text); border-color: var(--knopf); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.2rem 0 1rem; }
@media (max-width: 30rem) {
  .knopfreihe .knopf { flex: 1 1 100%; }
}

/* Umschaltknöpfe (Filter, Schrift, Farben): gleiche Form, gedrückt = gefüllt */
.reiter, .umschalter button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.8rem; padding: 0.4rem 1rem; max-width: 100%;
  font: inherit; font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer;
  background: var(--flaeche); color: var(--text);
  border: 3px solid var(--knopf); border-radius: var(--radius-knopf);
  hyphens: auto; overflow-wrap: anywhere;
}
.reiter:hover, .umschalter button:hover { background: var(--akzent-hell); }
.reiter[aria-pressed="true"], .umschalter button[aria-pressed="true"] {
  background: var(--knopf); color: var(--knopf-text);
}
.reiterreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- Kopfbereich ---------- */

.kopf { background: var(--flaeche); border-bottom: 6px solid var(--akzent); }
.kopf .huelle {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.8rem; padding-top: 0.8rem; padding-bottom: 0.8rem;
}
.logo { text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.logo span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--text-leise); }
.logo:hover { color: var(--text); }

.menue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.menue li { margin: 0; }
.menue a {
  display: flex; align-items: center; justify-content: center; min-height: 2.8rem;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-knopf);
  border: 3px solid transparent;
  text-decoration: none; color: var(--text); font-weight: 700; line-height: 1.25; text-align: center;
}
.menue a:hover { background: var(--akzent-hell); color: var(--text); }
.menue a[aria-current="page"] { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-text); }
@media (max-width: 40rem) {
  .menue { width: 100%; }
  .menue ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menue a { border-color: var(--rand); padding: 0.3rem 0.4rem; height: 100%; font-size: min(1rem, 6vw); hyphens: auto; }
}

/* Schriftgröße und Farben (wird von js/ansicht.js in den Kopf eingefügt).
   Feste Größen in px: die Knöpfe sollen auch bei sehr großer Schrift kompakt bleiben.
   Handy und Tablet: eigene Leiste ganz oben. Großer Bildschirm: Knopf „Ansicht“ rechts neben dem Menü,
   der ein kleines Feld mit den Einstellungen aufklappt. */
.ansicht { order: -1; flex: 1 0 100%; margin: -0.8rem -1rem 0; }
.ansicht-knopf { display: none; }
.lesehilfe {
  padding: 8px 16px; background: var(--akzent-hell); border-bottom: 2px solid var(--rand);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 28px;
  font-size: 18px;
}
.umschalter { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; }
.umschalter-name { font-weight: 700; font-size: 16px; margin-right: 4px; color: var(--text); white-space: nowrap; }
.umschalter button { min-height: 42px; min-width: 46px; padding: 2px 12px; font-size: 16px; border-width: 2px; white-space: nowrap; }
.umschalter .a1 { font-size: 16px; }
.umschalter .a2 { font-size: 19px; }
.umschalter .a3 { font-size: 22px; }
/* Sehr schmale Handys */
@media (max-width: 22.5rem) {
  .lesehilfe { padding: 8px 12px; }
  .umschalter { gap: 4px; }
  .umschalter button { padding: 2px 8px; min-width: 40px; }
  .umschalter-name { font-size: 15px; margin-right: 2px; }
}
@media (min-width: 40rem) {
  .lesehilfe { justify-content: flex-end; }
}

@media (min-width: 75rem) {
  /* Zwei Zeilen: oben Name und „Ansicht“, darunter das Menü */
  .kopf .huelle { flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.6rem; }
  .kopf .logo { flex: none; }
  .kopf .menue { order: 3; flex: 1 0 100%; }
  .kopf .menue ul { gap: 0.2rem; }
  .kopf .menue a { padding: 0.35rem 0.7rem; }
  .kopf .menue li:first-child a { margin-left: -0.7rem; }
  .kopf .menue li:first-child a[aria-current="page"] { margin-left: 0; }

  .ansicht { order: 2; flex: none; margin: 0 0 0 auto; position: relative; }
  .ansicht-knopf {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 4px 14px; font: inherit; font-size: 17px; font-weight: 700; line-height: 1.2;
    background: var(--flaeche); color: var(--text); cursor: pointer;
    border: 2px solid var(--rand-stark); border-radius: var(--radius-knopf); white-space: nowrap;
  }
  .ansicht-knopf:hover, .ansicht.offen .ansicht-knopf { background: var(--akzent-hell); border-color: var(--knopf); }
  .ansicht-knopf .aa { font-size: 19px; color: var(--link); }
  .ansicht-knopf .pfeil { font-size: 13px; transition: transform 0.15s; }
  .ansicht.offen .pfeil { transform: rotate(180deg); }
  .lesehilfe {
    display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 20;
    flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px;
    background: var(--flaeche); border: 2px solid var(--rand); border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  }
  .ansicht.offen .lesehilfe { display: flex; }
  .umschalter { justify-content: space-between; gap: 6px; }
  .umschalter-name { margin-right: 12px; }
}
/* Breite Bildschirme mit normaler Schrift: alles in einer Zeile, Menü rechts neben dem Namen */
@media (min-width: 84rem) {
  html:not(.schrift-1):not(.schrift-2) .kopf .huelle { flex-wrap: nowrap; }
  html:not(.schrift-1):not(.schrift-2) .kopf .menue { order: 0; flex: 0 1 auto; margin-left: auto; }
  html:not(.schrift-1):not(.schrift-2) .kopf .menue ul { flex-wrap: nowrap; }
  html:not(.schrift-1):not(.schrift-2) .kopf .menue a { white-space: nowrap; font-size: 0.95rem; padding: 0.35rem 0.6rem; }
  html:not(.schrift-1):not(.schrift-2) .kopf .menue li:first-child a { margin-left: 0; }
  html:not(.schrift-1):not(.schrift-2) .ansicht { margin-left: 0; }
}

/* ---------- Inhalt ---------- */

main { padding: 2.2rem 0 1rem; }
section { margin-bottom: 2.5rem; }

.held {
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: 1fr;
}
.held > * { min-width: 0; }
.held.oben { align-items: start; }
.held .motto {
  font-size: 1.15rem; font-weight: 700; color: var(--link);
  margin-bottom: 0.3em;
}
.held img { border-radius: 50%; border: 6px solid var(--akzent); width: 15rem; margin: 0 auto; }
.held img.foto { border-radius: var(--radius); border: 0; width: 100%; max-width: 22rem; }
@media (min-width: 48rem) {
  .held { grid-template-columns: 1.6fr 1fr; }
}

.karten {
  display: grid; gap: 1.2rem; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.karten.drei { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.karte {
  background: var(--flaeche); border: 2px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.4rem; margin: 0; display: flex; flex-direction: column; min-width: 0;
}
.karte h3 { margin-bottom: 0.4em; }
.karte p { flex: 1; }
.karte .symbol { font-size: 2.2rem; line-height: 1; margin-bottom: 0.5rem; }
a.weiter { font-weight: 700; }
.karte a.weiter { align-self: flex-start; }
a.weiter::after { content: " →"; }

/* Karten, die als Ganzes anklickbar sind: Der Link sitzt in der Überschrift und
   spannt sich über die ganze Karte (::after). Der Pfeil unten rechts zeigt, dass es weitergeht. */
.karte.klickbar { position: relative; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.karten-link { color: inherit; text-decoration: none; }
.karten-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.karten-link:hover { color: inherit; }
.karten-link:focus-visible { outline: none; }
.karte.klickbar:hover { border-color: var(--akzent); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }
.karte.klickbar:focus-within { outline: 4px solid var(--text); outline-offset: 3px; }
.karte.klickbar:hover h3 { color: var(--link); }
.karten-pfeil {
  position: absolute; right: 1.2rem; bottom: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--akzent-hell); color: var(--link); font-weight: 700; font-size: 1.2rem; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.karte.klickbar:hover .karten-pfeil { background: var(--knopf); color: var(--knopf-text); }
.karte.klickbar p:not(.merkmale-karte) { flex: 1; }
.karte.klickbar p.merkmale-karte { margin-bottom: 0; padding-right: 3rem; min-height: 2.4rem; }
.karte.klickbar > p:last-of-type:not(.merkmale-karte) { padding-right: 2.6rem; }
@media (prefers-reduced-motion: reduce) {
  .karte.klickbar, .karten-pfeil { transition: none; }
  .karte.klickbar:hover { transform: none; }
}

.kasten {
  background: var(--flaeche); border: 2px solid var(--rand); border-left: 8px solid var(--akzent);
  border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: var(--schatten);
}
.kasten > :last-child { margin-bottom: 0; }

/* ---------- Formular ---------- */

.formular { display: grid; gap: 1.1rem; max-width: 38rem; }
.formular > * { min-width: 0; }
.formular label { font-weight: 700; display: block; margin-bottom: 0.3rem; }
input, textarea, select { font: inherit; color: var(--text); }
.formular input, .formular textarea, .formular select, .filter input[type="search"] {
  width: 100%; padding: 0.7rem 0.8rem; min-height: 3rem;
  border: 3px solid var(--rand-stark); border-radius: var(--radius-knopf);
  background: var(--flaeche); color: var(--text);
}
.formular input:focus, .formular textarea:focus, .formular select:focus, .filter input[type="search"]:focus {
  border-color: var(--knopf); outline: 3px solid var(--akzent); outline-offset: 1px;
}
::placeholder { color: var(--text-leise); opacity: 1; }
.formular .hinweis { font-size: 0.9rem; color: var(--text-leise); font-weight: 400; }
.formular .check { display: flex; gap: 0.7rem; align-items: flex-start; }
.formular .check input { width: 1.6rem; height: 1.6rem; min-height: 0; flex: none; margin-top: 0.2rem; accent-color: var(--knopf); }
.formular .check label { font-weight: 400; min-width: 0; }
.formular .knopf { justify-self: start; }

/* ---------- Kontaktblock am Ende jeder Seite ---------- */

.hilfe { background: var(--hilfe-grund); color: var(--hilfe-text); padding: 2.2rem 0; margin-top: 2rem; border-top: 6px solid var(--akzent); }
.hilfe h2 { margin-bottom: 0.3em; }
.hilfe p { font-size: 1.1rem; margin-bottom: 0.4em; }
.hilfe a:not(.knopf) { color: inherit; }
.hilfe .knopf { background: var(--hilfe-knopf); border-color: var(--hilfe-knopf); color: var(--hilfe-knopf-text); }
.hilfe .knopf:hover { background: var(--flaeche); border-color: var(--hilfe-knopf); color: var(--text); }
.hilfe .knopf.zweit { background: var(--flaeche); border-color: var(--hilfe-knopf); color: var(--text); }
.hilfe .knopf.zweit:hover { background: var(--akzent-hell); }

/* ---------- Fuß ---------- */

.fuss { background: var(--dunkel); color: var(--dunkel-text); padding: 1.4rem 0; font-size: 0.9rem; }
.fuss a { color: var(--dunkel-text); }
.fuss ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

/* ---------- Anleitungen ---------- */

.zurueck { margin: 0 0 1rem; }
.zurueck-knopf {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.8rem; padding: 0.35rem 1rem 0.35rem 0.8rem;
  border: 3px solid var(--knopf); border-radius: var(--radius-knopf); background: var(--flaeche);
  color: var(--text); font-weight: 700; text-decoration: none; line-height: 1.3;
}
.zurueck-knopf span { color: var(--link); font-size: 1.15em; }
.zurueck-knopf:hover { background: var(--akzent-hell); color: var(--text); }
.zurueck-unten { margin: 2rem 0 0; }
.einleitung { font-size: 1.1rem; max-width: 46rem; }
.schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 2rem 0; max-width: 46rem; }
.schritte > li {
  counter-increment: schritt; position: relative;
  background: var(--flaeche); border: 2px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.3rem 1.4rem 1.1rem 5rem; margin-bottom: 1.2rem; min-width: 0;
}
.schritte > li::before {
  content: counter(schritt); position: absolute; left: 1.2rem; top: 1.1rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--akzent); color: #1f1a17; font-weight: 700; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.schritte h2 { font-size: 1.3rem; margin-bottom: 0.4em; }
.schritte p:last-child, .schritte ul:last-child, .schritte ol:last-child { margin-bottom: 0; }
.warnung { max-width: 46rem; }
@media (max-width: 30rem) {
  .schritte > li { padding: 4.2rem 1.1rem 1rem; }
  .schritte > li::before { left: 1.1rem; top: 1rem; }
}

/* ---------- Schwierigkeit: drei gleich große Punkte, gefüllt oder leer ---------- */

.punkte { display: inline-flex; gap: 0.22em; align-items: center; flex: none; }
.punkte i {
  display: block; width: 0.72em; height: 0.72em; border-radius: 50%;
  border: 0.13em solid currentColor; background: transparent;
}
.punkte i.voll { background: currentColor; }

.stufe {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.1rem 0.45em;
  padding: 0.15rem 0.7rem; border-radius: 999px; max-width: 100%;
  font-size: 0.85rem; font-weight: 700; line-height: 1.5; border: 2px solid transparent;
  hyphens: auto; overflow-wrap: anywhere;
}
.stufe-einfach { background: var(--gruen-grund); color: var(--gruen-text); border-color: var(--gruen-rand); }
.stufe-fortgeschritten { background: var(--akzent-hell); color: var(--akzent-text); border-color: var(--akzent); }
.stufe-profi { background: var(--text); color: var(--grund); border-color: var(--text); }
.stufen-gruppe h2 .stufe { font-size: 1rem; vertical-align: middle; padding: 0.35rem 0.7rem; }
.stufen-gruppe > p { color: var(--text-leise); }

.merkmale {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center;
  margin: 0 0 1.2rem; font-size: 0.95rem; color: var(--text-leise);
}
.merkmale li { margin: 0; }
.karte p.merkmale-karte {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem;
  font-size: 0.9rem; color: var(--text-leise); margin-bottom: 0.8rem;
}

/* Filter auf der Tipps-Übersicht */
.filter {
  background: var(--flaeche); border: 2px solid var(--rand); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin: 1.5rem 0 2rem; display: grid; gap: 1.1rem; box-shadow: var(--schatten);
}
.filter > * { min-width: 0; }
.filter label, .filter legend { font-weight: 700; display: block; margin-bottom: 0.4rem; padding: 0; }
.filter fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.filter input[type="search"] { max-width: 32rem; }
.treffer { margin: 0; font-weight: 700; color: var(--text-leise); }

.profi-hinweis { max-width: 46rem; margin-bottom: 1.5rem; border-left-color: var(--text); }
.verwandt { margin-top: 3rem; }
.drucken-zeile { margin-bottom: 1.2rem; }

/* ---------- Befehle und Tasten ---------- */

code, kbd, pre { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; font-size: 0.9em; }
code { background: var(--code-grund); color: var(--text); padding: 0.05em 0.35em; border-radius: 5px; overflow-wrap: anywhere; hyphens: none; }
kbd {
  display: inline-block; padding: 0.05em 0.45em; border: 2px solid var(--rand-stark); border-bottom-width: 4px;
  border-radius: 6px; background: var(--flaeche); color: var(--text); font-weight: 700; white-space: nowrap; hyphens: none;
}
pre {
  background: var(--dunkel); color: var(--dunkel-text); padding: 0.9rem 1rem; border-radius: 10px;
  border: 2px solid var(--rand);
  overflow-x: auto; margin: 0 0 1em; line-height: 1.5; hyphens: none;
}
pre code { background: none; padding: 0; color: inherit; overflow-wrap: normal; }
.befehl { position: relative; }
.befehl pre { padding-top: 3rem; }
.kopieren {
  position: absolute; top: 0.5rem; right: 0.5rem; min-height: 2.2rem;
  font: inherit; font-size: 0.85rem; font-weight: 700; line-height: 1.2;
  padding: 0.3rem 0.8rem; border-radius: 8px; cursor: pointer;
  border: 2px solid var(--akzent); background: var(--dunkel); color: var(--dunkel-text);
}
.kopieren:hover { background: var(--akzent); color: #1f1a17; }

/* ---------- Preise und häufige Fragen ---------- */

.preistabelle {
  width: 100%; max-width: 46rem; border-collapse: separate; border-spacing: 0; margin: 0 0 1.2rem;
  background: var(--flaeche); border: 2px solid var(--rand); border-radius: var(--radius); overflow: hidden;
}
.preistabelle th, .preistabelle td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 2px solid var(--rand); vertical-align: top; }
.preistabelle tr:last-child > * { border-bottom: 0; }
.preistabelle thead th { background: var(--akzent-hell); }
.preistabelle td:last-child, .preistabelle th:last-child { text-align: right; white-space: nowrap; }
/* Auf dem Handy wird jede Tabellenzeile zu einem kleinen Block */
@media (max-width: 40rem) {
  .preistabelle.stapeln, .preistabelle.stapeln tbody { display: block; }
  .preistabelle.stapeln thead { position: absolute; left: -9999px; }
  .preistabelle.stapeln tr { display: block; border-bottom: 2px solid var(--rand); padding: 0.6rem 0.9rem; }
  .preistabelle.stapeln tr:last-child { border-bottom: 0; }
  .preistabelle.stapeln td { display: block; border: 0; padding: 0.1rem 0; text-align: left; white-space: normal; }
  .preistabelle.stapeln td:first-child { font-weight: 700; }
  .preistabelle.stapeln td[data-titel]::before { content: attr(data-titel) ": "; color: var(--text-leise); }
  .preistabelle td:last-child, .preistabelle th:last-child { white-space: normal; }
}
.preis-gross { font-size: 2.4rem; font-weight: 700; color: var(--link); line-height: 1.1; margin-bottom: 0.2em; }
.kleingedruckt { font-size: 0.95rem; color: var(--text-leise); }
.fragen h2 { font-size: 1.3rem; margin-top: 1.6rem; }
.fragen p { max-width: 46rem; }
.telefon-gross { font-size: 1.4rem; font-weight: 700; }
.zeiten { font-weight: 700; }

/* Schmale Bildschirme: nichts darf über den Rand ragen */
@media (max-width: 40rem) {
  .thema-name, kbd { white-space: normal; }
}

.nur-druck { display: none; }

/* ---------- Druckansicht: nur der Inhalt und die Kontaktdaten, schwarz auf weiß ---------- */
@media print {
  html, html.schrift-1, html.schrift-2 { font-size: 12pt !important; }
  :root, :root[data-farben] {
    color-scheme: light;
    --grund: #fff; --flaeche: #fff; --text: #000; --text-leise: #000; --link: #000;
    --akzent: #000; --akzent-hell: #fff; --code-grund: #fff; --akzent-text: #000; --rand: #999; --dunkel: #fff; --dunkel-text: #000;
    --gruen-grund: #fff; --gruen-text: #000; --gruen-rand: #000; --schatten: none;
  }
  body { background: #fff; color: #000; }
  .kopf .menue, .ansicht, .sprungmarke, .knopfreihe, .knopf, .drucken-zeile, .kopieren,
  .filter, .verwandt, .zurueck, .fuss { display: none !important; }
  .kopf { border-bottom: 2pt solid #000; }
  main { padding-top: 1rem; }
  .schritte > li, .kasten, .karte { break-inside: avoid; }
  .schritte > li::before { background: #fff; border: 2pt solid #000; color: #000; }
  pre { white-space: pre-wrap; border: 1pt solid #000; }
  .hilfe { background: #fff; color: #000; border-top: 2pt solid #000; padding: 1rem 0 0; margin-top: 1rem; }
  .nur-druck { display: block; font-weight: 700; }
}