@charset "utf-8";
/* ==================================================================================================================
   ISO-FLEX 2026 :: navigation.css
   Kopf wie im Layout (Block header-global): Servicezeile, Leiste mit Logo / Hauptmenü / Burger / Button Bauwerks-Check,
   Mega-Dropdown Leistungen, Burgermenü (ab 1225px kleines Panel rechts, darunter Vollbild auf Anthrazit).
   Startseite: Kopf liegt transparent über dem Hero, beim Scrollen dunkel mit Weichzeichner, die Servicezeile fährt ein.
   Unterseiten: dieselbe Leiste auf Anthrazit.
   Breakpoints: 750 (Button Bauwerks-Check in die Leiste), 1225 (Menüleiste statt Burger-Vollbild), 1400 („Wissen & Service“)
   ================================================================================================================== */

/* |||||||||| Start :: KOPF |||||||||| */

.header_seite{
	position:fixed; top:0; left:0; right:0; z-index:90;
	background:var(--schwarz); color:var(--weiss);
	transition:background-color .3s ease, backdrop-filter .3s ease;
}
.html_index .header_seite{ background:transparent; }
.header_seite.is_scrolled,
.html_index .header_seite.is_scrolled{ background:rgba(var(--schwarz_tief),.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
/* Burgermenü offen (Vollbild) :: Kopf bleibt sichtbar und liegt über dem Overlay */
body.nav_is_open .header_seite{ background:var(--schwarz); }

/* Servicezeile :: nur ganz oben, beim Scrollen fährt sie ein */
.topbar{ max-height:var(--topbar_hoehe); overflow:hidden; border-bottom:1px solid rgba(255,255,255,.14); transition:max-height .35s ease, opacity .25s ease, border-color .25s ease; }
.header_seite.is_scrolled .topbar{ max-height:0; opacity:0; border-bottom-color:transparent; }
.topbar_inner{ display:flex; align-items:center; justify-content:flex-end; gap:var(--sp4); height:var(--topbar_hoehe); }
.topbar_text{ display:none; margin:0 auto 0 0; font-size:var(--txt_klein); color:var(--text_hell); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar_kontakt{ display:flex; align-items:center; gap:var(--sp3); min-width:0; }
.toplink{ display:inline-flex; align-items:center; gap:9px; font-size:var(--txt_klein); font-weight:500; color:var(--weiss); text-decoration:none; white-space:nowrap; }
.toplink .icon_maske{ width:14px; height:14px; color:var(--rot_hell); }
.toplink:hover{ color:var(--weiss); text-decoration:underline; text-underline-offset:4px; }
.topbar_trenner{ width:1px; height:16px; background:rgba(255,255,255,.22); }

/* Leiste */
.nav_leiste_inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--sp5); height:var(--navbar_hoehe); }
.logobox_nav{ display:block; flex:0 0 auto; width:var(--logo_breite); }
.logobox_nav img{ width:100%; height:auto; }

/* Hauptmenü (ab 1225px) */
.nav_haupt_liste{ display:none; list-style:none; align-items:center; gap:clamp(20px, 2.1vw, 42px); margin:0; padding:0; }
.nav_haupt_punkt{ position:relative; display:flex; align-items:center; }
/* Mega-Dropdown mittig in der Leiste (unter „Leistungen“ zentriert ragte es bei 1225–1700px links aus dem Bild) */
.nav_haupt_punkt.has_sub{ position:static; }
.nav_haupt_link{ position:relative; padding:8px 0; font-size:var(--nav); font-weight:500; color:var(--weiss); text-decoration:none; white-space:nowrap; }
.nav_haupt_link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--rot); transition:right .28s ease; }
.nav_haupt_link:hover::after,
.nav_haupt_link.is_active::after,
.nav_haupt_punkt.has_sub:hover > .nav_haupt_link::after,
.nav_haupt_punkt.has_sub:focus-within > .nav_haupt_link::after,
.nav_haupt_punkt.is_open > .nav_haupt_link::after{ right:0; }
.nav_haupt_link:hover{ color:var(--weiss); }
.nav_ab1400{ display:none; }

/* Pfeil neben „Leistungen“ :: öffnet das Mega-Dropdown per Klick / Tastatur (aria-expanded, main.js), per Hover über CSS */
.nav_dropdown_toggle{ display:grid; place-items:center; width:24px; height:24px; margin-left:4px; color:var(--weiss); }
.nav_dropdown_toggle::before{ content:""; width:13px; height:13px; background-color:currentColor; -webkit-mask:url("../images/icon_chevron-runter.svg") no-repeat center / contain; mask:url("../images/icon_chevron-runter.svg") no-repeat center / contain; transition:transform .25s ease; }
.nav_haupt_punkt.has_sub:hover .nav_dropdown_toggle::before,
.nav_haupt_punkt.is_open .nav_dropdown_toggle::before{ transform:rotate(180deg); }

/* Mega-Dropdown :: zwei Spalten Leistungen + Kachel „Unklar?“, unten „Alle Leistungen ansehen“ */
.nav_mega{
	position:absolute; top:calc(100% - 12px); left:50%; z-index:70; width:min(1020px, 92vw);
	padding:var(--sp4); background:var(--weiss); border:1px solid var(--grau_linie); border-radius:24px;
	box-shadow:0 34px 80px rgba(18,18,17,.26); color:var(--text_dunkel);
	opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(-10px);
	transition:opacity .25s ease, visibility .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
/* unsichtbare Brücke, damit das Menü beim Weg der Maus nach unten offen bleibt */
.nav_mega::before{ content:""; position:absolute; left:0; right:0; top:-44px; height:44px; }
.nav_haupt_punkt.has_sub:hover .nav_mega,
.nav_haupt_punkt.has_sub:focus-within .nav_mega,
.nav_haupt_punkt.is_open .nav_mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega_spalten{ display:grid; grid-template-columns:1fr 1fr 250px; gap:var(--sp4); }
.mega_spalte{ list-style:none; margin:0; padding:0; }
.mega_link{ display:flex; align-items:flex-start; gap:var(--sp2); padding:10px; border-radius:var(--r_s); color:inherit; text-decoration:none; transition:background-color .2s ease; }
.mega_link:hover,
.mega_link.is_active{ background:var(--grau_bg); }
.mega_icon{ position:relative; flex:0 0 38px; width:38px; height:38px; border-radius:10px; background:var(--grau_bg); color:var(--markengrau); transition:background-color .25s ease, color .25s ease; }
.mega_icon::before{ content:""; position:absolute; inset:9px; background-color:currentColor; -webkit-mask:var(--icon) no-repeat center / contain; mask:var(--icon) no-repeat center / contain; }
.mega_icon.is_leer::before{ display:none; }
.mega_link:hover .mega_icon,
.mega_link.is_active .mega_icon{ background:var(--rot); color:var(--weiss); }
.mega_text strong{ display:block; font-family:var(--font_headline); font-size:1rem; line-height:1.3; font-weight:600; letter-spacing:-0.01em; color:var(--text_dunkel); }
.mega_text em{ display:block; margin-top:2px; font-style:normal; font-size:var(--txt_klein); line-height:1.5; color:var(--text); }
.mega_promo{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp3); padding:var(--sp3); background:var(--rot_flaeche); border-radius:var(--r_s); overflow:hidden; color:inherit; text-decoration:none; }
.mega_promo .gfx_streifen{ right:-40px; top:-30px; width:170px; height:170px; opacity:.24; }
.mega_promo_text{ position:relative; }
.mega_promo_klein{ display:block; font-family:var(--font_headline); font-size:var(--label); font-weight:600; letter-spacing:var(--ls_label); text-transform:uppercase; color:var(--rot); }
.mega_promo_titel{ display:block; margin-top:var(--sp2); font-family:var(--font_headline); font-size:1.0625rem; line-height:1.25; font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel); }
.mega_promo_info{ display:block; margin-top:6px; font-size:var(--txt_klein); line-height:1.5; color:var(--markengrau); }
.mega_promo .kreis{ width:44px; height:44px; }
.mega_promo:hover .kreis{ background:var(--rot_dunkel); border-color:var(--rot_dunkel); }
.mega_fuss{ display:flex; justify-content:flex-end; margin-top:var(--sp3); padding-top:var(--sp3); border-top:1px solid var(--grau_linie); }
.mega_fuss .link_pfeil{ color:var(--text_dunkel); }
.mega_fuss .link_pfeil:hover{ color:var(--text_dunkel); text-decoration:underline; text-underline-offset:4px; }

/* Rechts: Burger + Button Bauwerks-Check */
.nav_service{ display:flex; align-items:center; gap:var(--sp2); flex:0 0 auto; margin-left:auto; }
.nav_haupt_liste + .nav_service{ margin-left:0; }
.nav_service .header_cta{ display:none; }	/* spezifischer als .button (basic.css wird danach geladen) */

/* Burger :: runder Knopf, wird beim Öffnen zum X */
.button_menu{ position:relative; display:grid; place-items:center; width:var(--kreis); height:var(--kreis); border-radius:50%; border:1px solid rgba(255,255,255,.3); color:var(--weiss); transition:background-color .3s ease, border-color .3s ease; }
.button_menu:hover{ border-color:var(--weiss); }
.button_menu_lines{ position:relative; display:block; width:20px; height:14px; }
.button_menu_lines span{ position:absolute; left:0; width:100%; height:1.9px; border-radius:2px; background:currentColor; transition:transform .3s ease, opacity .2s ease, top .3s ease; }
.button_menu_lines span:nth-child(1){ top:0; }
.button_menu_lines span:nth-child(2){ top:6px; }
.button_menu_lines span:nth-child(3){ top:12px; }
.button_menu[aria-expanded="true"] .button_menu_lines span:nth-child(1){ top:6px; transform:rotate(45deg); }
.button_menu[aria-expanded="true"] .button_menu_lines span:nth-child(2){ opacity:0; }
.button_menu[aria-expanded="true"] .button_menu_lines span:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* |||||||||| Ende :: KOPF |||||||||| */


/* |||||||||| Start :: BURGERMENÜ |||||||||| */
/* Geschlossen: visibility hidden + pointer-events none (fängt nie Klicks ab, REGELN.md §5) */

.nav_overlay{ position:fixed; inset:0; z-index:85; visibility:hidden; pointer-events:none; }
.nav_overlay.is_open{ visibility:visible; pointer-events:auto; }
.nav_overlay_backdrop{ position:absolute; inset:0; }

/* Mobil + Tablet (bis 1224px): Vollbild auf Anthrazit unter dem Kopf */
.nav_overlay_panel{
	position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
	padding:calc(var(--header_hoehe) + var(--sp3)) var(--rand) var(--sp6) var(--rand);
	background:var(--schwarz); opacity:0; transform:translateY(-8px); transition:opacity .25s ease, transform .3s ease;
}
.header_seite.is_scrolled ~ .nav_overlay .nav_overlay_panel{ padding-top:calc(var(--navbar_hoehe) + var(--sp3)); }
.nav_overlay.is_open .nav_overlay_panel{ opacity:1; transform:none; }
.nav_overlay_inner{ max-width:1800px; margin:0 auto; }
.nav_overlay ul{ list-style:none; margin:0; padding:0; }

.nav_overlay_link{
	display:flex; align-items:center; justify-content:space-between; gap:var(--sp3); padding:18px 0;
	font-family:var(--font_headline); font-size:clamp(1.3125rem, 3.2vw, 1.75rem); line-height:1.2; font-weight:600; letter-spacing:var(--ls_head);
	color:var(--weiss); text-decoration:none;
}
.nav_overlay_link:hover,
.nav_overlay_link.is_active{ color:var(--rot_hell); }
.nav_overlay_haupt > li,
.nav_overlay_service > li,
.nav_overlay_legal > li{ border-bottom:1px solid rgba(255,255,255,.14); }
.nav_overlay_service,
.nav_overlay_legal{ margin-top:6px !important; }
/* Gruppenüberschriften „Service“ / „Rechtliches“ */
.nav_overlay_label{ margin:var(--sp5) 0 0 0; font-family:var(--font_headline); font-size:var(--label); line-height:1.3; font-weight:600; letter-spacing:var(--ls_label); text-transform:uppercase; color:var(--text_hell); opacity:.7; }
.nav_overlay_row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp2); }
.nav_overlay_row .nav_overlay_link{ flex:1 1 auto; }
.nav_overlay_toggle{ display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; color:var(--weiss); }
.nav_overlay_toggle::before{ content:""; width:18px; height:18px; background-color:currentColor; -webkit-mask:url("../images/icon_chevron-runter.svg") no-repeat center / contain; mask:url("../images/icon_chevron-runter.svg") no-repeat center / contain; transition:transform .25s ease; }
.nav_overlay_punkt.is_open .nav_overlay_toggle::before{ transform:rotate(180deg); }
.nav_overlay_sub{ display:none; margin:0 0 var(--sp2) 0; padding:0 0 var(--sp3) var(--sp3); border-left:2px solid var(--rot); }
.nav_overlay_punkt.is_open .nav_overlay_sub{ display:block; }
.nav_overlay_sub a{ display:block; padding:11px 0; font-size:var(--txt); font-weight:500; color:var(--text_hell); text-decoration:none; }
.nav_overlay_sub a:hover,
.nav_overlay_sub a.is_active{ color:var(--weiss); }
.nav_overlay_cta{ margin-top:var(--sp4); width:100%; }

/* |||||||||| Ende :: BURGERMENÜ |||||||||| */