/* ════════════════════════════════════════════════════════════════════
   Hospitly — statische Inhaltsseiten der Dachmarke (Stufe 1, 17.10.2026)
   ════════════════════════════════════════════════════════════════════
   Gilt nur fuer die Seiten aus scripts/inhaltsseiten.mjs (/karriere/..., /ratgeber/...).
   Werte aus dem Designsystem C2 "Kuechenpass" (Agents-Repo knowledge/hospitly-tech/
   DESIGNSYSTEM -- kuechenpass -- 2026-10-03.md, §3-§7), dieselben Tokens wie src/c2.css.
   Medienabfragen statt der 1024-px-Regel der App: Diese Seiten haben kein App-Skript und
   brauchen deshalb keine Ausblendung des vorgerenderten Textes am Handy.
   Verbote (§7): keine Pillenform, keine Schatten auf Karten und Knoepfen, kein Verlauf,
   kein Orange als Textfarbe auf Hell, keine halben Pixel, kein clamp() fuer Schrift.
   ════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/c2/zilla-slab-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/c2/zilla-slab-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/c2/zilla-slab-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/c2/zilla-slab-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/c2/lato-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/c2/lato-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/c2/lato-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/c2/lato-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --tief: #073D45; --flaeche: #0A4A52; --linie-d: #2F6670; --marke: #0B4F4A; --orange: #E8723A; --orange-hover: #F08A55;
  --toenung: #E3EEEF; --hell: #F6F2EA; --grau-hell: #B9CFD2; --tinte: #1A1A2E; --grau: #4E5A5C; --grund: #FFFFFF;
  --papier: #F4F6F5; --linie: #D3DEDF; --warn: #FBE3D3;
  --font-head: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --font-text: 'Lato', 'Segoe UI', Arial, sans-serif;
  --font-marke: 'Inter', 'DM Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-text); font-size: 16px; line-height: 24px; color: var(--tinte); background: var(--grund); }
img { max-width: 100%; }
a { color: var(--marke); }
:focus-visible { outline: 2px solid var(--tief); outline-offset: 2px; box-shadow: 0 0 0 2px #FFFFFF; }
.ik-sprung { position: absolute; left: 8px; top: -48px; z-index: 300; padding: 8px 12px; background: var(--grund); color: var(--tinte); border: 1px solid var(--linie); border-radius: 4px; }
.ik-sprung:focus { top: 8px; }

.ik-wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

/* Kopf: deckend, klebend, 64 px, 1-px-Linie unten */
.ik-kopf { position: sticky; top: 0; z-index: 100; background: var(--grund); border-bottom: 1px solid var(--linie); }
.ik-kopf-innen { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ik-marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.ik-marke img { display: block; width: 32px; height: 32px; }
.ik-marke span { font-family: var(--font-marke); font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: -0.5px; color: var(--marke); }
.ik-marke-hell span { color: var(--hell); }
.ik-nav-gross { display: flex; align-items: center; gap: 28px; }
.ik-nav-gross > a:not(.ik-knopf), .ik-welten > summary {
  display: inline-flex; align-items: center; height: 64px; padding-top: 2px; border-bottom: 2px solid transparent;
  color: var(--tinte); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ik-nav-gross > a:not(.ik-knopf):hover, .ik-nav-gross > a[aria-current="page"], .ik-welten > summary:hover, .ik-welten[open] > summary { border-bottom-color: var(--orange); }
.ik-welten { position: relative; }
.ik-welten > summary { list-style: none; gap: 4px; }
.ik-welten > summary::-webkit-details-marker { display: none; }
.ik-welten > summary::after { content: ""; width: 7px; height: 7px; margin: -4px 0 0 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.ik-welten[open] > summary::after { margin-top: 4px; transform: rotate(225deg); }
.ik-welten > ul, .ik-nav-klein nav {
  position: absolute; z-index: 200; margin: 1px 0 0; padding: 0; list-style: none; min-width: 340px;
  background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 8px 24px rgba(7, 61, 69, 0.12); overflow: hidden;
}
.ik-welten > ul { top: 100%; left: 0; }
.ik-welten li a, .ik-nav-klein li a { display: block; padding: 10px 20px; color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie); }
.ik-welten li:last-child a, .ik-nav-klein li:last-child a { border-bottom: 0; }
.ik-welten li a:hover, .ik-nav-klein li a:hover { background: var(--papier); }
.ik-w-titel { display: block; font-weight: 700; font-size: 14px; line-height: 20px; }
.ik-w-satz { display: block; font-size: 13px; line-height: 20px; color: var(--grau); }
.ik-nav-klein { display: none; }

/* Knoepfe: einfarbig, Radius 4, kein Schatten */
.ik-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 16px; line-height: 24px; border-radius: 4px; padding: 12px 22px; border: 1px solid transparent; text-decoration: none; white-space: nowrap; }
.ik-knopf-primaer { background: var(--orange); border-color: var(--orange); color: var(--tinte); }
.ik-knopf-primaer:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.ik-knopf-rahmen { background: var(--grund); border-color: var(--marke); color: var(--marke); }
.ik-knopf-rahmen:hover { background: var(--toenung); }
.ik-knopf-klein { font-size: 14px; line-height: 20px; padding: 7px 14px; }

/* Inhalt */
.ik-inhalt { max-width: 856px; padding-top: 32px; padding-bottom: 88px; }
.ik-inhalt h1, .ik-inhalt h2, .ik-inhalt h3 { font-family: var(--font-head); margin: 0; }
.ik-inhalt h1 { font-weight: 700; font-size: 40px; line-height: 48px; margin: 8px 0 16px; }
.ik-inhalt h2 { font-weight: 700; font-size: 28px; line-height: 36px; margin: 48px 0 16px; }
.ik-inhalt h3 { font-weight: 600; font-size: 20px; line-height: 28px; margin: 24px 0 8px; }
.ik-inhalt p { margin: 0 0 16px; }
.ik-inhalt ul, .ik-inhalt ol { margin: 0 0 16px; padding-left: 24px; }
.ik-inhalt li { margin-bottom: 8px; }
.ik-lead { font-size: 18px; line-height: 28px; color: var(--grau); max-width: 720px; }
.ik-krumen ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; line-height: 20px; color: var(--grau); }
.ik-krumen li { margin: 0; }
.ik-krumen li + li::before { content: "/"; margin-right: 4px; color: var(--linie); }
.ik-krumen a { display: inline-block; padding: 4px 0; color: var(--grau); }
.ik-kurz { margin: 24px 0 32px; padding: 20px 24px; background: var(--toenung); border-left: 3px solid var(--marke); border-radius: 0 8px 8px 0; }
.ik-kurz p { margin: 0; }
.ik-kurz .ik-kurz-kopf { margin-bottom: 4px; font-weight: 700; color: var(--marke); }
.ik-kasten { margin: 24px 0; padding: 20px 24px; background: var(--papier); border: 1px solid var(--linie); border-radius: 8px; }
.ik-kasten p:last-child { margin-bottom: 0; }
.ik-hinweis { font-size: 14px; line-height: 20px; color: var(--grau); }
.ik-ki { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--linie); }

ul.ik-schilder { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
ul.ik-schilder li { margin: 0; }
.ik-schild { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 13px; line-height: 20px; font-weight: 700; border: 1px solid transparent; }
.ik-schild-kostenlos { background: var(--toenung); color: var(--marke); }
.ik-schild-kostenpflichtig { background: var(--warn); color: var(--tinte); }
.ik-schild-testphase, .ik-schild-bald { background: var(--papier); color: var(--grau); border-color: var(--linie); }

/* Karten: 1-px-Rand, Radius 8, kein Schatten, keine Hebung */
ul.ik-karten { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
ul.ik-karten-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ik-karte { margin: 0; padding: 20px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); min-width: 0; }
.ik-karte h3 { margin-top: 0; }
.ik-karte h3 a { color: var(--tinte); text-decoration: none; }
.ik-karte h3 a:hover { text-decoration: underline; }
.ik-karte p { color: var(--grau); }
.ik-karte p:last-child { margin-bottom: 0; }
.ik-pfeillink { display: inline-block; font-weight: 700; color: var(--marke); text-decoration: none; margin-right: 16px; }
.ik-pfeillink::after { content: " \2192"; }
.ik-pfeillink:hover { text-decoration: underline; }
.ik-dateien { display: flex; flex-wrap: wrap; gap: 8px; }
.ik-vorbereitung { font-weight: 700; color: var(--grau); }
.ik-preis { font-family: var(--font-head); font-weight: 700; font-size: 32px; line-height: 40px; color: var(--tinte) !important; margin-bottom: 4px !important; }
.ik-preis span { font-family: var(--font-text); font-weight: 400; font-size: 14px; color: var(--grau); }
.ik-klein { font-size: 14px; line-height: 20px; }
ul.ik-bruecken, ul.ik-quellen { list-style: none; padding-left: 0; }

/* Fuss: deckend Tief */
.ik-fuss { background: var(--tief); color: var(--hell); padding: 56px 0 24px; }
.ik-fuss p { margin: 0; }
.ik-fuss-raster { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr; gap: 32px; }
.ik-fuss-erste p { margin-top: 12px; max-width: 260px; font-size: 14px; line-height: 20px; color: var(--grau-hell); }
.ik-fuss-kopf { margin-bottom: 12px !important; font-weight: 700; font-size: 14px; line-height: 20px; }
.ik-fuss ul { list-style: none; margin: 0; padding: 0; }
.ik-fuss li a { display: block; padding: 4px 0; font-size: 14px; line-height: 20px; color: var(--grau-hell); text-decoration: none; }
.ik-fuss li a:hover { color: var(--hell); }
/* Untermarke ohne freigegebenen Link (link_frei false): Text, kein Link */
.ik-welten li .ik-ohne, .ik-nav-klein li .ik-ohne { display: block; padding: 10px 20px; color: var(--grau); border-bottom: 1px solid var(--linie); }
.ik-fuss li .ik-fuss-ohne { display: block; padding: 4px 0; font-size: 14px; line-height: 20px; color: var(--grau-hell); }
/* Portal der Dachmarke (17.10.2026): Zeile "Weitere Produkte von uns", klein */
.ik-fuss .ik-fuss-weitere { margin-top: 32px; font-size: 13px; line-height: 20px; color: var(--grau-hell); }
.ik-fuss .ik-fuss-weitere a { color: var(--grau-hell); text-decoration: underline; text-underline-offset: 2px; }
.ik-fuss .ik-fuss-weitere a:hover { color: var(--hell); }
.ik-fuss-unten { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linie-d); font-size: 13px; line-height: 20px; color: var(--grau-hell); }

@media (max-width: 1023.98px) {
  .ik-wrap { padding: 0 20px; }
  .ik-kopf-innen { height: 60px; }
  .ik-nav-gross { display: none; }
  .ik-nav-klein { display: block; }
  .ik-nav-klein > summary {
    list-style: none; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px;
    border: 1px solid var(--linie); border-radius: 4px; font-weight: 700; cursor: pointer;
  }
  .ik-nav-klein > summary::-webkit-details-marker { display: none; }
  .ik-nav-klein nav { position: fixed; top: 60px; left: 0; right: 0; min-width: 0; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  .ik-nav-klein ul { list-style: none; margin: 0; padding: 0; }
  .ik-inhalt { padding-top: 20px; padding-bottom: 56px; }
  .ik-inhalt h1 { font-size: 32px; line-height: 40px; }
  .ik-inhalt h2 { font-size: 24px; line-height: 32px; margin-top: 40px; }
  .ik-lead { font-size: 16px; line-height: 24px; }
  ul.ik-karten, ul.ik-karten-drei { grid-template-columns: minmax(0, 1fr); }
  .ik-fuss-raster { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ik-fuss-erste { grid-column: 1 / -1; }
  .ik-fuss-unten { flex-direction: column; gap: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   Hospitly — Gastro-Rechner (scripts/rechnerseiten.mjs), Rahmen im Designsystem C2 "Küchenpass" (20.10.2026)
   ════════════════════════════════════════════════════════════════════
   Wird hinter inhalt.css geladen (dort: Tokens, Schriften, Kopf .ik-kopf, Fuss .ik-fuss, Typografie .ik-inhalt).
   Dieselben Regeln wie dort: keine Pillenform, keine Schatten auf Karten und Knoepfen, kein Verlauf, kein Orange als Textfarbe auf Hell.
   Rechenkerne, Ergebnisse und Texte bleiben unberuehrt; hier steht nur das Aussehen.
   Klassen, auf die Pruefungen zugreifen: r-skip, r-card, r-result, r-error, r-grid, r-field, r-links, r-source, r-tip-row. */

.r-skip { position: absolute; left: 8px; top: -64px; z-index: 300; padding: 8px 12px; background: var(--grund); color: var(--tinte); border: 1px solid var(--linie); border-radius: 4px; }
.r-skip:focus { top: 8px; }
.r-hidden, [hidden] { display: none !important; }

/* Kopf: Sprachwechsel und aktuelle Seite */
.ik-nav-gross > a[aria-current] { border-bottom-color: var(--orange); }
.r-lang { display: inline-flex; align-items: center; gap: 6px; height: 64px; padding-left: 20px; border-left: 1px solid var(--linie); font-size: 14px; color: var(--grau); white-space: nowrap; }
.r-lang b { color: var(--tinte); }
.r-lang a { color: var(--grau); text-decoration: none; padding: 8px 0; }
.r-lang a:hover { color: var(--tinte); text-decoration: underline; }
.ik-nav-klein li a { min-height: 44px; }
.ik-fuss .r-fuss-raster { grid-template-columns: 2fr 1.3fr 1.3fr 1fr; }

/* Inhalt */
.r-main { max-width: 920px; }
.r-main.r-uebersicht { max-width: 1200px; }
.r-main .ik-krumen ol { margin-bottom: 8px; }
.r-main h1 { overflow-wrap: anywhere; }
.r-main h3 { font-family: var(--font-head); }
.r-main .r-lead { margin-bottom: 24px; }

/* Rechner-Karte (Eingaben) */
.r-card, .r-result { padding: 28px; border: 1px solid var(--linie); border-radius: 8px; margin: 24px 0; background: var(--grund); }
.r-result { background: var(--toenung); border-color: #B9CFD2; border-left: 3px solid var(--marke); border-radius: 0 8px 8px 0; }
.r-result h2 { margin-top: 0; }
.r-result > p:first-of-type { color: var(--grau); }
fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
legend { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 30px; padding: 0; margin-bottom: 16px; }
.r-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.r-field { min-width: 0; }
label { display: block; font-weight: 700; margin-bottom: 6px; }
.r-field small { display: block; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--grau); }
input, select, button { font: inherit; min-height: 44px; }
input:not([type=checkbox]), select { width: 100%; padding: 9px 12px; border: 1px solid #7B9193; border-radius: 4px; background: var(--grund); color: var(--tinte); }
input[type=checkbox] { width: 24px; height: 24px; min-height: 24px; vertical-align: middle; margin: 0 10px 0 0; accent-color: var(--marke); }
.r-check { grid-column: 1 / -1; font-weight: 400; display: flex; align-items: flex-start; gap: 0; }
.r-check input { flex: 0 0 24px; margin-top: 2px; }
.r-check .r-error { display: block; }
[aria-invalid=true] { border-color: #B3261E !important; border-width: 2px !important; }
.r-error { color: #9B1C14; font-weight: 700; margin: 6px 0; font-size: 15px; line-height: 22px; }
.r-error:empty { display: none; }
.r-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; }
button, .r-button { padding: 11px 22px; border-radius: 4px; background: var(--orange); color: var(--tinte); border: 1px solid var(--orange); cursor: pointer; font-weight: 700; }
button:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
button:disabled { opacity: .6; cursor: default; }
.r-secondary { background: var(--grund); color: var(--marke); border: 1px solid var(--marke); }
.r-secondary:hover { background: var(--toenung); border-color: var(--marke); }
.r-tip-row { border-bottom: 1px solid var(--linie); padding: 15px 0; display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; }
.r-table { overflow: auto; }

/* Ergebnis */
.r-result dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 16px 0; }
.r-result dt, .r-result dd { margin: 0; padding: 8px 0; border-bottom: 1px solid #C5D6D8; overflow-wrap: anywhere; }
.r-result dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; padding-left: 24px; }
.r-result dt.r-hervor, .r-result dd.r-hervor { padding: 4px 0 16px; border-bottom: 2px solid var(--marke); }
.r-result dt.r-hervor { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 32px; align-self: end; color: var(--tief); }
.r-result dd.r-hervor { font-family: var(--font-head); font-size: 40px; line-height: 44px; color: var(--tief); }
.r-result ul { margin: 12px 0 0; padding-left: 20px; }
.r-result li { overflow-wrap: anywhere; margin-bottom: 6px; color: var(--grau); }
.r-result h3 { margin: 28px 0 4px; font-size: 20px; line-height: 28px; }
.r-result dl.r-weg { margin-top: 4px; }
.r-result dl.r-weg dt { font-weight: 400; color: var(--tinte); }
.r-result dl.r-weg dd { font-weight: 700; white-space: nowrap; }
.r-note { border-left: 3px solid var(--marke); padding: 12px 18px; background: var(--toenung); border-radius: 0 8px 8px 0; font-size: 15px; line-height: 22px; }
.r-note h2 { margin: 0 0 8px; font-size: 20px; line-height: 28px; }
.r-source { overflow-wrap: anywhere; }
.r-source code { font-size: 12px; line-height: 18px; }
.r-main ul:has(.r-source) { list-style: none; padding-left: 0; }
.r-main ul:has(.r-source) li { margin-bottom: 12px; }

/* Verwandte Rechner (Unterseiten) */
.r-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; }
.r-links li { margin: 0; }
.r-links a { display: block; background: var(--grund); padding: 18px 20px; border: 1px solid var(--linie); border-radius: 8px; text-decoration: none; font-weight: 700; color: var(--tinte); }
.r-links a:hover { background: var(--papier); border-color: var(--marke); }
.r-links a::after { content: " \2192"; color: var(--marke); }

/* Uebersicht: Gruppen mit Karten */
.r-gruppe { margin: 40px 0 0; }
.r-gruppe > h2 { margin: 0 0 16px; font-size: 26px; line-height: 34px; }
.r-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.r-karten.r-karten-eins { grid-template-columns: minmax(0, 1fr); }
.r-karten.r-karten-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-karten-eins + .r-karten { margin-top: 20px; }
.r-gruppen-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.r-karte { margin: 0; padding: 24px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.r-karte:hover { border-color: var(--marke); }
.r-symbol { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: var(--toenung); color: var(--marke); }
.r-symbol svg { width: 24px; height: 24px; display: block; }
.r-karte h3 { margin: 4px 0 0; font-size: 22px; line-height: 30px; }
.r-karte h3 a { color: var(--tinte); text-decoration: none; }
.r-karte h3 a:hover { text-decoration: underline; }
.r-karte p { margin: 0; color: var(--grau); }
.r-karte .r-knopf { margin-top: auto; align-self: flex-start; }
.r-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 4px; background: var(--grund); border: 1px solid var(--marke); color: var(--marke); font-weight: 700; text-decoration: none; }
.r-knopf::after { content: "\2192"; }
.r-knopf:hover { background: var(--toenung); }
.r-karte-gross { padding: 32px; flex-direction: row; align-items: center; gap: 28px; background: var(--tief); border-color: var(--tief); color: var(--hell); }
.r-karte-gross .r-symbol { width: 64px; height: 64px; background: var(--flaeche); color: var(--hell); flex: 0 0 64px; }
.r-karte-gross .r-symbol svg { width: 32px; height: 32px; }
.r-karte-gross .r-karte-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.r-karte-gross h3 { font-size: 32px; line-height: 40px; margin: 0; }
.r-karte-gross h3 a { color: var(--hell); }
.r-karte-gross p { color: var(--grau-hell); font-size: 18px; line-height: 28px; max-width: 640px; }
.r-karte-gross .r-knopf { margin: 0; background: var(--orange); border-color: var(--orange); color: var(--tinte); flex: 0 0 auto; align-self: center; }
.r-karte-gross .r-knopf:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.r-karte-gross:hover { border-color: var(--tief); }

@media (max-width: 1023.98px) {
  .r-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ik-fuss .r-fuss-raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .r-card, .r-result { padding: 18px; }
  .r-grid, .r-links, .r-karten, .r-karten.r-karten-zwei, .r-gruppen-paar { grid-template-columns: minmax(0, 1fr); }
  .r-tip-row { grid-template-columns: 1fr 1fr; }
  .r-tip-row > :first-child { grid-column: 1 / -1; }
  .r-result dd.r-hervor { font-size: 34px; line-height: 40px; }
  .r-karte-gross { flex-direction: column; align-items: flex-start; padding: 24px; gap: 16px; }
  .r-karte-gross h3 { font-size: 26px; line-height: 34px; }
  .r-karte-gross p { font-size: 16px; line-height: 24px; }
  .r-gruppe > h2 { font-size: 22px; line-height: 30px; }
}
@media print {
  .ik-kopf, .ik-fuss, .r-actions, .r-links, .r-skip, .ik-krumen { display: none; }
  body { background: white; }
  .r-result { border: 1px solid #555; break-inside: avoid; }
  .r-main { padding: 0; }
}

/* W2: gleiche Kartenmasse und Buendigkeit trotz globaler Inhaltslisten-Regeln. */
.ik-inhalt .r-karten { list-style: none; margin: 0; padding: 0; }
.r-gruppen-paar .r-gruppe { display: flex; flex-direction: column; }
.r-gruppen-paar .r-karten { flex: 1; }
.r-gruppen-paar .r-karte { min-height: 20rem; }