/* =========================================================
   Ratgeber-Seiten (/webseite-kosten-dresden/ usw.)
   Ergänzt page.css, nutzt deren Tokens. Erzeugt mit render_guide.py
   aus _www/Werkzeuge/ratgeber/. Bei Änderungen ?v= in der Hülle hochzählen.
   ========================================================= */

/* Pfadnavigation */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 18px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.crumbs a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:6px 0; }
.crumbs a:hover{ color:var(--orange-text); }
.crumbs [aria-current]{ color:var(--muted); }

/* Kopf */
.guide-hero h1.guide-h1{ font-size:clamp(34px, 5vw, 64px); line-height:1.04; overflow-wrap:break-word; hyphens:auto; }
.guide-hero p.lead{ max-width:680px; }
.guide-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.guide-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border-radius:999px;
  border:1px solid var(--ink); color:var(--ink); background:transparent; text-decoration:none; font-weight:500; font-size:16px;
  transition:background .2s var(--ease), color .2s var(--ease); }
.guide-btn:hover{ background:var(--ink); color:#fff; }
.guide-btn--primary{ background:var(--ink); color:#fff; }
.guide-btn--primary:hover{ background:var(--orange); border-color:var(--orange); color:var(--ink); }

/* Artikel */
.guide{ padding:56px 0 100px; }
.guide-body{ max-width:780px; }
.guide-sec{ margin:0 0 48px; }
.guide-body h2, .guide-faq h2, .guide-more h2, .guide-cta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(26px, 3vw, 34px); letter-spacing:-.01em; line-height:1.15; margin:0 0 16px; }
.guide-body h3{ font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.25; margin:28px 0 8px; }
.guide-body p, .guide-body li{ color:var(--ink-2); font-size:17px; line-height:1.7; }
.guide-body p{ margin:0 0 14px; }
.guide-body ul, .guide-body ol{ padding-left:22px; margin:6px 0 18px; }
.guide-body li{ margin:5px 0; }
.guide-body a, .guide-cta a:not(.guide-btn), .guide-faq a{ color:var(--orange-text); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; overflow-wrap:anywhere; }
.guide-body a:hover{ color:var(--ink); }
.guide-body strong{ color:var(--ink); font-weight:600; }
.guide-body code{ font-family:var(--mono); font-size:.9em; background:var(--orange-tint); padding:1px 5px; border-radius:4px; overflow-wrap:anywhere; }
.guide-note{ border:1px solid var(--orange-3); background:var(--orange-tint); border-radius:14px; padding:16px 20px; margin:18px 0 22px; }
.guide-note p:last-child{ margin-bottom:0; }

/* Tabellen scrollen innerhalb des Rahmens, die Seite wird nie breiter als der Bildschirm */
.guide-table-wrap{ overflow-x:auto; margin:12px 0 22px; border:1px solid var(--line); border-radius:14px; background:var(--bg-card); }
.guide-table{ width:100%; border-collapse:collapse; font-size:15px; hyphens:auto; }
.guide-table th, .guide-table td{ text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--line); }
.guide-table th{ color:var(--ink); font-weight:600; background:var(--orange-tint); }
.guide-table td{ color:var(--ink-2); }
.guide-table td:first-child, .guide-table th:first-child{ hyphens:manual; }
.guide-table td:first-child a{ white-space:nowrap; overflow-wrap:normal; }
.guide-table tr:last-child td{ border-bottom:0; }
.guide-meta{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:8px; }

/* FAQ */
.guide-faq{ max-width:780px; margin:24px 0 56px; }
.guide-faq__list{ border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--bg-card); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:last-child{ border-bottom:0; }
.faq-item summary{ cursor:pointer; list-style:none; padding:20px 52px 20px 24px; position:relative; font-family:var(--serif); font-size:19px; line-height:1.3; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:24px; top:18px; font-family:var(--mono); font-size:20px; color:var(--orange-text); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:focus-visible{ outline:2px solid var(--orange-3); outline-offset:-2px; }
.faq-item p{ margin:0; padding:0 24px 22px; color:var(--ink-2); font-size:16px; line-height:1.65; }

/* Weitere Ratgeber */
.guide-more{ max-width:780px; margin:0 0 56px; }
.guide-related{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.guide-related a{ display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border:1px solid var(--line); border-radius:999px;
  background:var(--bg-card); color:var(--ink); text-decoration:none; font-size:15px; }
.guide-related a:hover{ border-color:var(--orange-3); color:var(--orange-text); }

/* Kontakt */
.guide-cta{ max-width:780px; background:var(--bg-card); border:1px solid var(--line); border-radius:24px; padding:40px; }
.guide-cta p{ color:var(--ink-2); margin:0 0 4px; }
.guide-cta .guide-ctas{ margin-top:20px; }
.guide-cta__note{ font-size:14px; color:var(--muted) !important; margin-top:20px !important; }

@media (max-width:720px){
  .guide{ padding:40px 0 72px; }
  .guide-cta{ padding:28px 20px; }
  .guide-btn{ width:100%; }
  .guide-table{ font-size:14px; }
  .guide-table th, .guide-table td{ padding:9px 10px; }
  .faq-item summary{ font-size:17px; padding:18px 48px 18px 18px; }
  .faq-item summary::after{ right:18px; }
  .faq-item p{ padding:0 18px 18px; }
}