@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
.guide-footer a[href="/impressum/"], .guide-footer a[href="/datenschutz/"] { display:inline-flex; align-items:center; min-height:44px; padding-inline:4px; }
.guide-footer a:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
:root { color-scheme: light; --green:#234842; --green-deep:#173b35; --cream:#f4efe5; --paper:#fffaf3; --sage:#dce4d9; --apricot:#e5b277; --rust:#b35c3c; --muted:#5d746b; --line:#d2c9b9; font-family:'DM Sans',system-ui,sans-serif; color:#234842; background:var(--cream); }
* { box-sizing:border-box; } body { margin:0; background:var(--cream); line-height:1.7; } a { color:inherit; } .guide-header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem max(1.25rem,calc((100vw - 1180px)/2)); background:rgba(255,250,243,.95); border-bottom:1px solid rgba(35,72,66,.12); backdrop-filter:blur(12px); } .brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:50%; background:var(--apricot); color:var(--green); font-size:.85rem; } .brand strong,.brand small { display:block; line-height:1.1; } .brand strong { letter-spacing:.08em; font-size:.9rem; } .brand small { margin-top:.25rem; color:var(--muted); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; } .guide-header nav { display:flex; align-items:center; gap:1.25rem; font-size:.82rem; font-weight:700; } .guide-shell { width:min(100% - 2.5rem, 960px); margin:0 auto; padding:2rem 0 5rem; } .overview-shell { width:min(100% - 2.5rem,1180px); } .breadcrumbs { display:flex; flex-wrap:wrap; gap:.55rem; color:var(--muted); font-size:.78rem; margin-bottom:2rem; } .breadcrumbs a { color:var(--rust); font-weight:700; } .eyebrow { margin:0 0 .6rem; color:var(--rust); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } h1,h2,h3 { font-family:'Playfair Display',Georgia,serif; font-weight:500; line-height:1.08; letter-spacing:-.025em; } h1 { max-width:900px; margin:.5rem 0 1rem; font-size:clamp(2.7rem,7vw,6rem); } h1 em,h2 em { color:var(--rust); } h2 { margin:2.6rem 0 1rem; font-size:clamp(1.9rem,4vw,3.2rem); } h3 { margin:2rem 0 .6rem; font-size:1.55rem; } .article-meta { color:var(--muted); font-size:.82rem; } .direct-answer { max-width:760px; margin:2rem 0; font-size:1.18rem; line-height:1.65; color:#355850; } .fact-box { margin:2rem 0 3rem; padding:1.4rem 1.6rem; border-left:4px solid var(--apricot); background:#ece6d9; } .fact-box ul,.facts-section ul { margin:.5rem 0 0; padding-left:1.2rem; } .fact-box a,.text-link { color:var(--rust); font-weight:700; } .article-body { font-size:1.03rem; } .article-body p { max-width:78ch; } .article-body li { margin:.35rem 0; } .article-body ul,.article-body ol { padding-left:1.4rem; } .table-wrap { overflow-x:auto; margin:1.5rem 0; } table { width:100%; min-width:520px; border-collapse:collapse; background:var(--paper); font-size:.9rem; } th,td { padding:.75rem .85rem; border:1px solid var(--line); text-align:left; vertical-align:top; } th { background:var(--green); color:var(--cream); } blockquote { margin:1.5rem 0; padding:1rem 1.25rem; border-left:3px solid var(--rust); background:#ece6d9; color:#355850; } .faq-section,.facts-section { margin-top:4rem; padding-top:1rem; border-top:1px solid var(--line); } details { padding:1rem 0; border-bottom:1px solid var(--line); } summary { cursor:pointer; font-weight:700; } details p { margin:.75rem 0 0; color:var(--muted); } .booking-card { margin:4rem 0 3rem; padding:2rem; border-radius:1.5rem; background:var(--green); color:var(--cream); } .booking-card h2 { margin:.3rem 0 .8rem; color:var(--cream); } .booking-card p { max-width:58ch; color:#dce2d5; } .button { display:inline-flex; align-items:center; justify-content:center; margin:.5rem .8rem .25rem 0; padding:.8rem 1.2rem; border-radius:999px; background:var(--apricot); color:var(--green); font-weight:700; text-decoration:none; } .button-small { margin:0; padding:.55rem .9rem; font-size:.75rem; } .booking-card .text-link { display:inline-block; color:var(--cream); font-size:.85rem; } .related-section { margin-top:3rem; } .related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .related-card { display:block; padding:1.2rem; border:1px solid var(--line); border-radius:1.2rem; background:var(--paper); text-decoration:none; transition:transform .2s,box-shadow .2s; } .related-card:hover { transform:translateY(-3px); box-shadow:0 10px 25px rgba(35,72,66,.1); } .related-card span,.guide-list span { display:block; color:var(--rust); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .related-card strong { display:block; margin-top:.35rem; font-family:'Playfair Display',Georgia,serif; font-size:1.25rem; line-height:1.2; } .overview-hero { padding:3rem 0 4rem; } .overview-hero h1 { max-width:800px; } .overview-hero .direct-answer { max-width:700px; } .category-section { margin-top:3rem; padding-top:1rem; border-top:1px solid var(--line); scroll-margin-top:6rem; } .guide-list { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:1rem 0 0; padding:0; list-style:none; } .guide-list li a { display:block; height:100%; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--paper); text-decoration:none; } .guide-list strong { display:block; line-height:1.28; } .overview-footer-card { margin-top:4rem; padding:2rem; border-radius:1.5rem; background:var(--sage); } .overview-links { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; } .quality-note { margin-top:2rem; padding:1rem; color:#6e3c2b; background:#f6dfd3; font-size:.8rem; } .guide-footer { padding:2.5rem max(1.25rem,calc((100vw - 1180px)/2)); background:var(--green-deep); color:#dce2d5; font-size:.82rem; } .guide-footer p { margin:.45rem 0; } .guide-footer a { color:var(--apricot); } @media (max-width:720px) { .guide-header { align-items:flex-start; } .guide-header nav { gap:.6rem; font-size:.75rem; } .brand small { max-width:130px; } .guide-shell,.overview-shell { width:min(100% - 1.5rem,960px); } .related-grid,.guide-list { grid-template-columns:1fr; } h1 { font-size:clamp(2.55rem,13vw,4.2rem); } .direct-answer { font-size:1.05rem; } .guide-footer { padding-left:.75rem; padding-right:.75rem; } }
         .brand { gap:.75rem; } .brand-mark { width:2.5rem; height:2.5rem; } .brand strong { font-family:'Playfair Display',Georgia,serif; font-weight:500; letter-spacing:-.03em; font-size:1.35rem; } .brand small { font-weight:600; letter-spacing:.19em; } .guide-main-nav { display:flex; align-items:center; gap:1.75rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; } .guide-main-nav a { text-decoration:none; } .guide-mobile-nav { display:none; position:relative; } .guide-mobile-nav summary { cursor:pointer; list-style:none; border:1px solid rgba(35,72,66,.18); border-radius:999px; padding:.7rem 1rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } .guide-mobile-nav summary::-webkit-details-marker { display:none; } .guide-mobile-nav nav { position:absolute; right:0; top:3.2rem; display:grid; min-width:230px; gap:.35rem; padding:.7rem; border:1px solid var(--line); border-radius:1.2rem; background:var(--paper); box-shadow:0 12px 30px rgba(35,72,66,.14); } .guide-mobile-nav nav a { padding:.7rem .8rem; text-decoration:none; font-size:.78rem; font-weight:700; } .guide-article h1 { overflow-wrap:anywhere; } .article-visual { margin:2rem 0 3rem; } .article-visual img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:1.25rem; background:var(--sage); } .article-visual figcaption { margin-top:.55rem; color:var(--muted); font-size:.75rem; } .route-map { margin:2rem 0 3rem; } .route-map img { display:block; width:100%; height:auto; aspect-ratio:14/9; border:1px solid var(--line); border-radius:1.25rem; background:var(--paper); } .route-map figcaption { margin-top:.55rem; color:var(--muted); font-size:.75rem; line-height:1.55; } @media (max-width:720px) { .guide-header .guide-main-nav { display:none !important; } .guide-header .guide-mobile-nav { display:block !important; } }