/* HostLabel – zentrales Stylesheet (kompiliert aus dem Claude-Design)
   Design nutzt Inline-Styles; hier liegen nur Tokens, Basis, Dropdown,
   responsive Helfer und Fokus-Stile. Hover-Effekte kommen aus site.js. */

:root{
	--bg:#f7f9fc;--panel:#ffffff;--border:#e3e9f0;--text:#131c2e;--muted:#5a6b85;
	--brand:#005FC6;--brand2:#3186E9;--brand3:#76B4FF;--navy:#131C2E;--coal:#0D1526;
	--soft:#eef4fc;--codebg:#0d1526;
	--shadow:0 18px 40px -24px rgba(19,28,46,.25);
	--grad:linear-gradient(135deg,#005FC6 0%,#3186E9 55%,#76B4FF 120%);
}
:root[data-theme="dark"]{
	--bg:#0D1526;--panel:#131C2E;--border:#26334d;--text:#eef3fb;--muted:#94a4c0;
	--brand:#3186E9;--soft:#182338;--codebg:#0a111f;
	--shadow:0 18px 40px -24px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
	margin:0;background:var(--bg);color:var(--text);
	font-family:'Sora',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
	transition:background-color .25s ease,color .25s ease;
}
a{color:inherit}
img{max-width:100%}

/* Responsive Umschaltung Desktop/Mobile-Navigation (Breakpoint wie im Design) */
@media (max-width:920px){ .hl-desktop{display:none!important} }
@media (min-width:921px){ .hl-mobile{display:none!important} }

/* „So funktioniert's": Verbindungs-Pfeile + Stagger nur auf großen Screens */
@media (max-width:1020px){
	.hl-arrow{display:none!important}
	.hl-step{margin-top:0!important}
}

/* ---------- Einstellungs-Dropdown (Theme + Sprache) ---------- */
.menu{position:relative;flex:none}
.menu__trigger{
	display:inline-flex;align-items:center;justify-content:center;
	width:36px;height:36px;padding:0;color:var(--muted);
	background:transparent;border:1px solid var(--border);border-radius:9px;cursor:pointer;
	transition:color .15s,border-color .15s;
}
.menu__trigger:hover{color:var(--text);border-color:var(--muted)}
.menu__trigger:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.menu__panel{
	position:absolute;top:calc(100% + 8px);right:0;min-width:224px;padding:6px;
	background:var(--panel);border:1px solid var(--border);border-radius:12px;
	box-shadow:var(--shadow);opacity:0;visibility:hidden;
	transform:translateY(-6px) scale(.97);transform-origin:top right;
	transition:opacity .14s ease,transform .14s ease,visibility .14s;z-index:200;
}
.menu.is-open .menu__panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.menu__heading{
	margin:0;padding:8px 10px 4px;font-size:11px;font-weight:600;
	letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.menu__item{
	display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
	font:inherit;font-size:14px;color:var(--text);text-align:left;
	background:none;border:0;border-radius:8px;cursor:pointer;
}
.menu__item:hover{background:var(--soft)}
.menu__item:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.menu__lead{
	display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
	flex:none;color:var(--muted);font-size:10px;font-weight:700;
}
.menu__label{flex:1}
.menu__check{width:16px;height:16px;flex:none;color:var(--brand);opacity:0}
.menu__item.is-active .menu__check{opacity:1}
.menu__item.is-active .menu__lead{color:var(--text)}
.menu__divider{height:1px;margin:6px 4px;background:var(--border)}

/* ---------- Formularhelfer (Kontakt/Login/Registrieren) ---------- */
.hl-input{
	width:100%;height:44px;padding:0 13px;font:inherit;font-size:14.5px;color:var(--text);
	background:var(--panel);border:1px solid var(--border);border-radius:10px;
	transition:border-color .15s,box-shadow .15s;
}
textarea.hl-input{height:auto;padding:12px 13px;resize:vertical;min-height:120px}
select.hl-input{cursor:pointer}
.hl-input:focus{
	outline:none;border-color:var(--brand);
	box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);
}
.hl-input::placeholder{color:var(--muted);opacity:.75}

a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Mobile-Burger: Icon je nach Zustand */
.nav-burger .i-close{display:none}
.nav-burger.is-open .i-open{display:none}
.nav-burger.is-open .i-close{display:block}

/* Mobile-Menü sanft einblenden */
@keyframes hl-menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
[data-mobile-menu]:not([hidden]){animation:hl-menu-in .22s ease}

/* ---------- Scroll-Reveal (site.js vergibt .rv + --rvd-Verzögerung) ----------
   Transition liegt nur auf .rv-in, damit das initiale Verstecken nicht flackert. */
.rv{opacity:0;transform:translateY(22px)}
.rv.rv-in{
	opacity:1;transform:none;
	transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
	transition-delay:var(--rvd,0ms);
}
/* Barrierefreiheit: Nutzer mit reduzierter Bewegung sehen alles sofort */
@media (prefers-reduced-motion:reduce){
	.rv{opacity:1;transform:none}
	.rv.rv-in{transition:none}
	[data-mobile-menu]:not([hidden]){animation:none}
}