/* legal.css - gemeinsame Styles fuer impressum.html und datenschutz.html.
   Diese beiden Seiten haben identisches CSS (eigenes Design, NICHT base.css).
   Stand 2026-06-28. */

:root {--ink: #1d1d1f; --muted: #6e6e73; --soft: #f5f5f7; --soft-2: #fbfbfd; --line: rgba(29,29,31,.10); --navy: #061f43; --navy-2: #0a2c5d; --teal: #00a6a6; --teal-2: #47d4cf; --blue: #0071e3; --card: rgba(255,255,255,.78); --shadow: 0 24px 60px rgba(0,0,0,.08); --shadow-soft: 0 12px 34px rgba(0,0,0,.06); --radius-xl: 34px; --radius-lg: 26px; --radius-md: 18px; --max: 1180px;}
* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", sans-serif; color: var(--ink); background: radial-gradient(circle at 78% 4%, rgba(0,166,166,.11), transparent 30%), radial-gradient(circle at 10% 14%, rgba(0,113,227,.08), transparent 28%), linear-gradient(180deg, #fff 0%, #fbfbfd 42%, #f5f5f7 100%); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;}
a {color: inherit; text-decoration: none;}
img {max-width: 100%;}
.shell {width: min(var(--max), calc(100% - 48px)); margin: 0 auto;}
.skip-link {position: absolute; left: -999px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: 999px; color: #fff; background: var(--ink);}
.skip-link:focus {left: 12px;}
.nav-wrap {position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(255,255,255,.45); background: rgba(251,251,253,.72); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);}
.nav {height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px;}
.logo {display: inline-flex; align-items: center; gap: 12px; min-width: 240px; font-weight: 760; letter-spacing: -.035em; color: var(--navy);}
.logo-image {display: block; width: auto; height: 44px; max-width: 255px; object-fit: contain;}
.logo-text-fallback {display: none;}
.logo-text {display: grid; line-height: 1.05; font-size: 17px;}
.logo-text small {margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 540; letter-spacing: -.01em;}
.nav-links {display: flex; align-items: center; gap: 30px; font-size: 14px; color: rgba(29,29,31,.72);}
.nav-links a {transition: color .2s ease;}
.nav-links a:hover {color: var(--ink);}
.nav-cta {background:var(--teal);color:#04201f;font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;transition:background .15s ease;}
.hero {position: relative; padding: 82px 0 44px; overflow: hidden;}
.eyebrow {display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: 0 10px 30px rgba(0,0,0,.04); color: var(--muted); font-size: 14px; letter-spacing: -.01em;}
.eyebrow::before {content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(0,166,166,.12);}
h1 {margin: 24px 0 18px; max-width: 900px; font-size: clamp(46px, 7vw, 86px); line-height: .98; letter-spacing: -.06em; font-weight: 760;}
.grad {background: linear-gradient(95deg, var(--ink) 0%, var(--navy) 45%, var(--teal) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
.sub {margin: 0; max-width: 760px; color: var(--muted); font-size: clamp(18px, 2.1vw, 24px); line-height: 1.4; letter-spacing: -.025em;}
.legal-layout {display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; padding: 22px 0 84px;}
.toc {position: sticky; top: 100px; padding: 22px; border-radius: var(--radius-lg); background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.82); box-shadow: var(--shadow-soft);}
.toc strong {display: block; margin-bottom: 12px; color: var(--navy);}
.toc a {display: block; padding: 8px 0; color: var(--muted); font-size: 14px; line-height: 1.25;}
.toc a:hover {color: var(--ink);}
.content-card {padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-xl); background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.88); box-shadow: var(--shadow);}
.content-card h2 {margin: 38px 0 12px; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -.045em; color: var(--navy);}
.content-card h2:first-child {margin-top: 0;}
.content-card h3 {margin: 24px 0 10px; font-size: 20px; letter-spacing: -.025em;}
.content-card p, .content-card li {color: rgba(29,29,31,.78); font-size: 16px; line-height: 1.68; letter-spacing: -.006em;}
.content-card ul {padding-left: 22px;}
.content-card a {color: var(--blue); text-decoration: underline; text-underline-offset: 3px;}
.info-box {margin: 24px 0; padding: 20px; border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(0,113,227,.07), rgba(0,166,166,.06)); border: 1px solid rgba(0,113,227,.10);}
.muted {color: var(--muted) !important;}
.address {display: inline-block; margin-top: 6px; padding: 14px 16px; border-radius: 18px; background: var(--soft-2); border: 1px solid var(--line); line-height: 1.55;}
footer {padding: 34px 0 46px; color: rgba(29,29,31,.56); font-size: 14px; background: rgba(245,245,247,.62);}
.footer-grid {display: grid; grid-template-columns: 1.2fr .8fr .8fr .8fr; gap: 18px; align-items: start;}
footer strong {display: block; margin-bottom: 7px; color: var(--ink);}
footer a {display: block; margin-bottom: 7px;}
footer a:hover {color: var(--ink);}
.legal a {color: rgba(29,29,31,.7);}
@media (max-width: 900px) {.shell { width: min(var(--max), calc(100% - 32px)); } .nav { height: auto; min-height: 72px; padding: 12px 0; } .nav-links { gap: 16px; overflow-x: auto; padding-bottom: 2px; } .legal-layout { grid-template-columns: 1fr; } .toc { position: static; } .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 620px) {.nav { align-items: flex-start; flex-direction: column; gap: 10px; } .logo { min-width: 0; } .logo-image { height: 38px; max-width: 220px; } .nav-links { width: 100%; gap: 15px; font-size: 13px; } .nav-cta { padding: 8px 13px; } .hero { padding: 48px 0 24px; } h1 { font-size: clamp(40px, 13vw, 58px); } .content-card { border-radius: 26px; } .content-card p, .content-card li { font-size: 15px; } .footer-grid { grid-template-columns: 1fr; }}
/* Tools-Dropdown (Hauptnav) */
.nav-drop{position:relative;display:inline-block;}
.nav-drop-t{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px;line-height:inherit;}
.nav-drop-t .caret{font-size:10px;transition:transform .2s ease;}
.nav-drop.open .nav-drop-t .caret{transform:rotate(180deg);}
.nav-drop-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:212px;background:#0a1f3d;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 16px 38px rgba(0,0,0,.30);padding:8px;display:none;z-index:70;}
.nav-drop.open .nav-drop-menu{display:block;}
.nav-drop-menu a{display:block;padding:10px 14px;border-radius:8px;color:rgba(255,255,255,.9)!important;font-size:14px;font-weight:500;white-space:nowrap;opacity:1;}
.nav-drop-menu a:hover{background:rgba(255,255,255,.08);color:#fff!important;}
.nav-drop-menu a::after{content:none!important;}
@media (hover:hover){.nav-drop:hover .nav-drop-menu{display:block;}}