/* ==========================================================================
   Rechtstexte, Vergleiche und Fehlerseite im Design „Bühne und Feldbuch“ (stage_pages.py)
   Titel auf der Bühne, Lesetext und Tabellen auf dem hellen Blatt des Feldbuchs.
   ========================================================================== */

.text-page,.compare-stage{--rail:0px}

/* Kein Heldenauftakt über eine volle Bildschirmhöhe: der Text beginnt neben dem Titel */
.text-page .chapter:first-of-type .tafeln,
.compare-stage .chapter:first-of-type .tafeln{padding-top:calc(var(--topbar) + 40px)}
.text-page .chapter-head{justify-content:flex-start;padding-top:40px}
.text-page h1.chapter-title{font-size:clamp(2.8rem,4.4vw,4.2rem);hyphens:auto;overflow-wrap:break-word}
.compare-stage h1.chapter-title{font-size:clamp(2.8rem,4.6vw,4.6rem)}
.compare-stage .chapter:first-of-type{min-height:0;padding-bottom:40px}
.compare-stage .chapter:first-of-type .chapter-head{min-height:0;position:static;padding-top:calc(var(--topbar) + 40px)}
.chapter-head .kicker a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(159,217,189,.4)}
.chapter-head .kicker a:hover{border-color:var(--moss)}

/* Das Blatt */
.blatt{position:relative;background:var(--paper);color:var(--ink);border-radius:var(--r);padding:44px 52px 48px;box-shadow:0 30px 80px rgba(0,0,0,.32)}
.blatt .kicker{color:var(--forest)}
.prose > :first-child{margin-top:0}
.prose h2{margin:2.1em 0 .55em;font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;color:var(--ink);scroll-margin-top:calc(var(--topbar) + 24px)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1em;font-size:.969rem;line-height:1.72;color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--forest);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}

/* Inhaltsverzeichnis im Kapitelkopf */
.blatt-toc{margin-top:8px}
.blatt-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--hair)}
.blatt-toc a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;font-size:.875rem;line-height:1.35;color:var(--white-2);text-decoration:none;transition:color .2s,border-color .2s}
.blatt-toc a:hover,.blatt-toc a:focus-visible{color:var(--white);border-left-color:var(--moss)}

/* Tafeln der Vergleichsseiten */
.tafel h3{margin:0 0 8px;font-family:var(--serif);font-weight:500;font-size:1.35rem;line-height:1.15;letter-spacing:-.01em}
.tafel p{margin:0 0 10px;font-size:.938rem;line-height:1.6;color:var(--white-2)}
.tafel p:last-child{margin-bottom:0}
.tafel-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:18px !important}
.btn svg,.btn-link svg{width:16px;height:16px;margin-left:8px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-link{color:var(--white);font-weight:600;font-size:.875rem;text-decoration:none;border-bottom:1px solid var(--hair)}
.btn-link:hover{border-color:var(--moss)}
.route-grid{display:grid;grid-template-columns:1fr;gap:14px}
.route-grid.is-many{grid-template-columns:repeat(2,minmax(0,1fr))}
.route-card{display:flex;flex-direction:column;padding:22px 24px}
.route-card h3{font-size:1.2rem}
.route-card p{font-size:.875rem}
.route-card a{margin-top:auto;padding-top:6px;font-size:.813rem;font-weight:600;color:var(--moss);text-decoration:none}
.route-card a:hover{color:var(--white)}

/* Parkauswahl (compare.js): Chips statt Kästchen */
.picker > p:not(.kicker){margin:0 0 16px}
.compare-options{display:flex;flex-wrap:wrap;gap:8px}
.compare-options label{position:relative;cursor:pointer}
.compare-options input{position:absolute;opacity:0;width:1px;height:1px}
.compare-options span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border:1px solid rgba(251,250,246,.26);border-radius:999px;background:rgba(251,250,246,.06);font-size:.844rem;font-weight:600;color:var(--white);transition:background .2s,border-color .2s,color .2s}
.compare-options span::before{content:'';width:12px;height:12px;border:1.5px solid currentColor;border-radius:4px;opacity:.7;flex:none}
.compare-options label:hover span{background:rgba(251,250,246,.14)}
.compare-options input:checked + span{background:var(--moss);border-color:var(--moss);color:var(--night)}
.compare-options input:checked + span::before{width:5px;height:10px;border-width:0 2px 2px 0;border-radius:0;transform:translateY(-2px) rotate(45deg);margin:0 3px 0 4px;opacity:1}
.compare-options input:focus-visible + span{outline:2px solid var(--moss);outline-offset:3px}
.picker button{margin:16px 18px 0 0;padding:0;border:0;background:none;font:600 .813rem var(--sans);color:var(--white);cursor:pointer;border-bottom:1px solid var(--hair)}
.picker button:hover{border-color:var(--moss)}
.picker button:disabled{opacity:.45;cursor:default}
#compare-status{margin:14px 0 0;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--white-3)}

/* Vergleichstabelle auf dem Blatt */
.vergleich{position:relative;z-index:1;padding:0 56px 120px 64px;max-width:1440px}
.vergleich-blatt{padding:30px 32px 32px}
.compare-help{margin:0 0 18px;font-size:.813rem;line-height:1.5;color:var(--ink-3)}
.compare-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.compare-scroll:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.compare-table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:.875rem}
.compare-table caption{padding:14px 18px;text-align:left;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.compare-table th,.compare-table td{vertical-align:top;text-align:left;padding:18px;border-top:1px solid var(--line-2)}
.compare-table thead th{border-top:0;font-weight:400}
.compare-table [hidden]{display:none}
.compare-table thead th:not(.compare-label),.compare-table td{min-width:230px}
.compare-label{position:sticky;left:0;z-index:1;width:150px;min-width:130px;background:var(--paper-2);font-family:var(--mono);font-size:.75rem !important;font-weight:500 !important;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.compare-table thead img{display:block;width:100%;height:170px;object-fit:cover;border-radius:10px;background:var(--paper-2)}
.compare-credit,.compare-credit a{font-size:.75rem;line-height:1.5;color:var(--ink-3);text-decoration:none}
.compare-credit{display:block;margin:6px 0 10px}
.compare-credit a:hover{color:var(--ink)}
.compare-region{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.compare-table thead h2{margin:4px 0 4px;font-family:var(--serif);font-weight:500;font-size:1.35rem;line-height:1.15;letter-spacing:-.01em}
.compare-table thead h2 a{color:var(--ink);text-decoration:none}
.compare-table thead h2 a:hover{color:var(--forest)}
.compare-table thead p{margin:0;color:var(--ink-2)}
.compare-profile{display:inline-block;margin-top:10px;font-size:.813rem;font-weight:600;color:var(--forest);text-decoration:none}
.compare-fact + .compare-fact{margin-top:14px}
.compare-table td strong{display:block;color:var(--ink);font-weight:600}
.compare-table td p{margin:3px 0 6px;line-height:1.55;color:var(--ink-2)}
.compare-source,.compare-source a{font-size:.75rem;color:var(--ink-3)}
.compare-source a{text-decoration:underline;text-underline-offset:2px}
a.compare-source{display:inline-block;text-decoration:underline;text-underline-offset:2px}
.compare-detail,.compare-table td > a:last-child{display:inline-block;margin-top:10px;font-size:.813rem;font-weight:600;color:var(--forest);text-decoration:none}
.compare-detail:hover,.compare-table td > a:last-child:hover,.compare-profile:hover{text-decoration:underline}

/* Fehlerseite */
.not-found .chapter{min-height:100vh}
.not-found .chapter-head{position:static;min-height:0;padding-top:calc(var(--topbar) + 40px)}

@media (max-width:1180px){
  .vergleich{padding:0 40px 100px 64px}
}
@media (max-width:900px){
  .text-page .chapter-head{padding-top:calc(var(--topbar) + 32px)}
  .text-page .chapter:first-of-type .chapter-head,
  .compare-stage .chapter:first-of-type .chapter-head{min-height:0}
  .text-page .chapter:first-of-type .tafeln,
  .compare-stage .chapter:first-of-type .tafeln{padding-top:0}
  .blatt{padding:26px 20px 28px;border-radius:14px}
  .prose h2{font-size:1.3rem}
  .prose p{font-size:.938rem}
  .blatt-toc ol{display:flex;flex-wrap:wrap;gap:6px;border:0}
  .blatt-toc a{padding:6px 11px;margin:0;border:1px solid var(--hair);border-radius:999px;font-size:.781rem}
  .blatt-toc a:hover,.blatt-toc a:focus-visible{border-color:var(--moss)}
  .vergleich{padding:0 16px 88px}
  .vergleich-blatt{padding:22px 16px 18px}
  .route-grid.is-many{grid-template-columns:1fr}
  .compare-label{width:84px;min-width:84px;padding:14px 8px 14px 10px !important;font-size:.75rem !important;letter-spacing:.06em;hyphens:auto;overflow-wrap:anywhere}
  .compare-table thead th:not(.compare-label),.compare-table td{min-width:210px;padding:14px}
  .not-found .chapter{min-height:0}
  .not-found .chapter-head{min-height:calc(100vh - 220px) !important;justify-content:flex-end;padding-top:calc(var(--topbar) + 32px)}
}
/* Tabellen im Fließtext (Ratgeberseiten): eigener Scrollbereich, die Seite bleibt schmal */
.prose .table-scroll{overflow-x:auto;margin:18px 0;border:1px solid var(--line-2);border-radius:12px;-webkit-overflow-scrolling:touch}
.prose .table-scroll table{width:100%;min-width:680px;border-collapse:collapse;font-size:.875rem}
.prose .table-scroll th,.prose .table-scroll td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--line-2)}
.prose .table-scroll thead th{border-top:0;font-weight:700;background:var(--paper-2)}
.prose .table-scroll tbody th{font-weight:600;white-space:nowrap}
.prose .table-scroll thead th{white-space:nowrap}
.prose p,.prose li{overflow-wrap:break-word}
/* Grid-Kinder dürfen schmaler werden als die Tabelle; sonst bestimmt deren Mindestbreite die Spalte */
.text-page .chapter>*,.text-page .tafeln>*,.text-page .blatt{min-width:0}
/* Tabellen im Lesetext (EN-Ratgeber) schieben auf dem Handy in sich, statt die Seite zu verbreitern */
@media (max-width:640px){.blatt.prose table{display:block;max-width:100%;overflow-x:auto}}