/* ============================================================
   Krivontai — GRADIENT ATMOSPHERE
   Custom CSS, camelCase naming convention
   ============================================================ */


:root {
  --clr-primary: #4f46e5;
  --clr-primary-dark: #3730a3;
  --clr-secondary: #7c3aed;
  --clr-accent: #06b6d4;
  --clr-accent-warm: #f59e0b;
  --clr-grad-start: #4f46e5;
  --clr-grad-mid: #7c3aed;
  --clr-grad-end: #06b6d4;
  --clr-grad-warm-start: #f59e0b;
  --clr-grad-warm-end: #ef4444;

  --clr-bg: #f8f7ff;
  --clr-bg-alt: #f0effa;
  --clr-surface: #ffffff;
  --clr-surface-glass: rgba(255,255,255,0.72);

  --clr-text: #1e1b4b;
  --clr-text-muted: #6b7280;
  --clr-text-light: #f8f7ff;

  --grad-main: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);
  --grad-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --grad-section: linear-gradient(160deg, #1e1b4b 0%, #312e81 40%, #4f46e5 80%, #7c3aed 100%);
  --grad-text: linear-gradient(90deg, #4f46e5, #7c3aed, #06b6d4);

  --shadow-sm: 0 1px 3px rgba(79,70,229,0.08), 0 1px 2px rgba(79,70,229,0.04);
  --shadow-md: 0 4px 12px rgba(79,70,229,0.12), 0 2px 6px rgba(79,70,229,0.06);
  --shadow-lg: 0 12px 40px rgba(79,70,229,0.18), 0 4px 16px rgba(79,70,229,0.08);
  --shadow-xl: 0 24px 64px rgba(79,70,229,0.22), 0 8px 24px rgba(79,70,229,0.10);
  --shadow-glow: 0 0 32px rgba(79,70,229,0.3);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --header-h: 72px;
  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Wix Madefor Text', sans-serif;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.65;
  font-size: 1rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition), opacity var(--transition); }
ul { list-style: none; }
address { font-style: normal; }


h1, h2, h3, h4, h5, h6 {
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 700;
  line-height: 1.18;
  color: var(--clr-text);
}

.sectionLabel {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clr-primary);
  background: rgba(79,70,229,0.1);
  padding: 0.3em 0.9em;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}
.sectionLabel--light {
  color: rgba(248,247,255,0.9);
  background: rgba(255,255,255,0.15);
}

.sectionTitle {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: var(--space-md);
}
.sectionTitle--light { color: var(--clr-text-light); }

.sectionIntro {
  font-size: 1.1rem;
  color: var(--clr-text-muted);
  max-width: 640px;
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}
.sectionIntro--light { color: rgba(248,247,255,0.82); }


.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em 1.8em;
  border-radius: var(--radius-full);
  font-family: 'Wix Madefor Text', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  text-decoration: none;
  min-height: 44px;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--grad-main);
  color: #fff;
  box-shadow: var(--shadow-md), 0 0 0 0 rgba(79,70,229,0);
}
.btn--primary:hover {
  box-shadow: var(--shadow-lg), 0 0 24px rgba(79,70,229,0.4);
}

.btn--ghost {
  background: transparent;
  color: var(--clr-text-light);
  border-color: rgba(255,255,255,0.5);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.8);
}

.btn--white {
  background: #fff;
  color: var(--clr-primary);
  border-color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--white:hover {
  background: var(--clr-bg);
  box-shadow: var(--shadow-lg);
}

.btn--full { width: 100%; justify-content: center; }


.linkArrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--clr-primary);
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: var(--space-sm);
  transition: gap var(--transition), color var(--transition);
}
.linkArrow:hover { gap: 0.7em; color: var(--clr-secondary); }

/* ============================================================
   SITE HEADER
   ============================================================ */
.siteHeader {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
.siteHeader.siteHeader--scrolled {
  background: rgba(248,247,255,0.95);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 16px rgba(79,70,229,0.1);
}

.siteHeader_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.siteHeader_logo {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
}
.siteHeader_logoImg { height: 36px; width: auto; }
.siteHeader_logoText {
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.siteHeader_nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.siteHeader_navLink {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--clr-text-light);
  padding: 0.4em 0.2em;
  position: relative;
  transition: color var(--transition);
}
.siteHeader--scrolled .siteHeader_navLink { color: var(--clr-text); }

.siteHeader_navLink::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--grad-main);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--transition);
}
.siteHeader_navLink:hover::after,
.siteHeader_navLink--active::after { transform: scaleX(1); }
.siteHeader_navLink:hover { color: var(--clr-primary); }
.siteHeader--scrolled .siteHeader_navLink--active { color: var(--clr-primary); }

.siteHeader_navLink--cta {
  background: var(--grad-main);
  color: #fff !important;
  padding: 0.5em 1.2em;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.siteHeader_navLink--cta::after { display: none; }
.siteHeader_navLink--cta:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.siteHeader_menuBtn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center;
}
.siteHeader_menuIcon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.siteHeader_menuIcon span {
  display: block;
  width: 24px; height: 2px;
  background: var(--clr-text-light);
  border-radius: 2px;
  transition: background var(--transition);
}
.siteHeader--scrolled .siteHeader_menuIcon span { background: var(--clr-text); }

/* ============================================================
   MOBILE MENU — FLIP CARD
   ============================================================ */
.mobileMenu_wrapper {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 950;
  perspective: 1000px;
}
.mobileMenu_wrapper.mobileMenu--open { display: block; }

.mobileMenu_flipCard {
  position: relative;
  width: 100%;
  min-height: var(--header-h);
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.mobileMenu_flipCard.mobileMenu--flipped {
  transform: rotateX(180deg);
}

.mobileMenu_front,
.mobileMenu_back {
  position: absolute;
  top: 0; left: 0; right: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mobileMenu_front {
  background: var(--grad-section);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
}
.mobileMenu_frontInner {
  width: 100%;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.mobileMenu_back {
  transform: rotateX(180deg);
  background: var(--grad-section);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: calc(var(--header-h) + var(--space-md));
}
.mobileMenu_nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 var(--space-md) var(--space-xl);
}
.mobileMenu_navLink {
  display: block;
  padding: var(--space-sm) 0;
  font-family: 'Wix Madefor Display', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: color var(--transition), padding-left var(--transition);
}
.mobileMenu_navLink:hover { color: #fff; padding-left: 0.5em; }

.mobileMenu_closeBtn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: var(--radius-full);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background var(--transition);
}
.mobileMenu_closeBtn:hover { background: rgba(255,255,255,0.28); }

/* ============================================================
   HERO SECTION
   ============================================================ */
.mainHero {
  min-height: 100vh;
  background: var(--grad-section);
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  position: relative;
  overflow: hidden;
}
.mainHero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(6,182,212,0.18) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(124,58,237,0.22) 0%, transparent 55%);
  pointer-events: none;
}

.mainHero_content {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  width: 100%;
}

.mainHero_eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(248,247,255,0.7);
  background: rgba(255,255,255,0.1);
  padding: 0.3em 0.9em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.18);
  margin-bottom: var(--space-md);
}

.mainHero_title {
  font-size: clamp(2.8rem, 8vw, 6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
}
.mainHero_titleGradient {
  background: linear-gradient(90deg, #06b6d4, #a78bfa, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mainHero_imageStrip {
  position: relative;
  width: 100%;
  height: clamp(180px, 28vw, 340px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-xl), 0 0 60px rgba(79,70,229,0.3);
}
.mainHero_stripImage {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.mainHero_stripOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(79,70,229,0.4) 0%, transparent 50%, rgba(6,182,212,0.3) 100%);
}
.mainHero_stripTag {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.9);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.15);
}

.mainHero_textBottom {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.mainHero_desc {
  flex: 1;
  min-width: 280px;
  color: rgba(248,247,255,0.82);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
}
.mainHero_actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

/* ============================================================
   INFO STRIP
   ============================================================ */
.infoStrip {
  background: var(--clr-surface);
  border-bottom: 1px solid rgba(79,70,229,0.1);
  box-shadow: var(--shadow-sm);
}
.infoStrip_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.infoStrip_item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--clr-text-muted);
}
.infoStrip_icon {
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1rem;
}

/* ============================================================
   INTRO SECTION
   ============================================================ */
.introSection {
  padding: var(--space-3xl) 0;
  background: var(--clr-bg);
}
.introSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.introSection_visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
}
.introSection_img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  transition: transform var(--transition), box-shadow var(--transition);
}
.introSection_img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}
.introSection_badge {
  position: absolute;
  bottom: -16px;
  right: -16px;
  background: var(--grad-main);
  color: #fff;
  padding: 0.7em 1.2em;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5em;
  box-shadow: var(--shadow-lg);
}
.introSection_text { padding-left: var(--space-md); }
.introSection_text p {
  color: var(--clr-text-muted);
  margin-bottom: var(--space-sm);
  line-height: 1.75;
}

/* ============================================================
   VORAUSSETZUNGEN SECTION
   ============================================================ */
.voraussetzungenSection {
  background: var(--grad-section);
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}
.voraussetzungenSection::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(6,182,212,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.voraussetzungenSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.voraussetzungenSection_header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.voraussetzungenSection_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.voraussCard {
  background: var(--clr-surface-glass);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}
.voraussCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}


.voraussCard--animated {
  position: relative;
  background: var(--clr-surface-glass);
  z-index: 0;
}
.voraussCard--animated::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: var(--grad-main);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition);
}
.voraussCard--animated::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: var(--clr-surface-glass);
  backdrop-filter: blur(12px);
  z-index: -1;
}
.voraussCard--animated:hover::before { opacity: 1; }

.voraussCard_iconWrap {
  width: 52px; height: 52px;
  background: var(--grad-main);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: var(--space-sm);
  box-shadow: var(--shadow-sm);
}
.voraussCard_title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 0.5em;
}
.voraussCard_text {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ============================================================
   EIGENMITTEL SECTION
   ============================================================ */
.eigenmittelSection {
  padding: var(--space-3xl) 0;
  background: var(--clr-bg-alt);
}
.eigenmittelSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.eigenmittelSection_text p {
  color: var(--clr-text-muted);
  margin-bottom: var(--space-sm);
  line-height: 1.75;
}
.eigenmittelSection_note {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
  background: rgba(79,70,229,0.07);
  border-left: 3px solid var(--clr-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  font-size: 0.92rem;
  color: var(--clr-text-muted);
}
.eigenmittelSection_note i { color: var(--clr-primary); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.eigenmittelSection_img {
  width: 100%; height: 380px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* ============================================================
   MIETE SECTION
   ============================================================ */
.mieteSection {
  background: var(--grad-section);
  padding: var(--space-3xl) 0;
  position: relative;
}
.mieteSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.mieteSection_split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.mieteKarte {
  background: var(--clr-surface-glass);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}
.mieteKarte_header {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: var(--space-md);
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--clr-text);
}
.mieteKarte_header i {
  font-size: 1.3rem;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mieteKarte--gemeinde .mieteKarte_header i {
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
}
.mieteKarte--privat .mieteKarte_header i {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  -webkit-background-clip: text;
  background-clip: text;
}
.mieteKarte_list li {
  padding: 0.45em 0;
  color: var(--clr-text-muted);
  font-size: 0.93rem;
  border-bottom: 1px solid rgba(79,70,229,0.07);
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  line-height: 1.5;
}
.mieteKarte_list li::before {
  content: '·';
  color: var(--clr-primary);
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 0.1em;
}
.mieteKarte_list li:last-child { border-bottom: none; }

.mieteSection_img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0.85;
}

/* ============================================================
   BETRIEBSKOSTEN SECTION
   ============================================================ */
.betriebskostenSection {
  padding: var(--space-3xl) 0;
  background: var(--clr-bg);
}
.betriebskostenSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.betriebskostenSection_header {
  margin-bottom: var(--space-xl);
}
.betriebskostenSection_header p {
  color: var(--clr-text-muted);
  font-size: 1.05rem;
  max-width: 560px;
  margin-top: var(--space-sm);
}
.betriebskostenSection_cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.betriebskostenCol {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}
.betriebskostenCol--included {
  background: linear-gradient(135deg, rgba(79,70,229,0.06) 0%, rgba(6,182,212,0.06) 100%);
  border: 1px solid rgba(79,70,229,0.15);
}
.betriebskostenCol--excluded {
  background: linear-gradient(135deg, rgba(239,68,68,0.05) 0%, rgba(245,158,11,0.05) 100%);
  border: 1px solid rgba(239,68,68,0.15);
}
.betriebskostenCol_head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: var(--space-md);
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}
.betriebskostenCol--included .betriebskostenCol_head i { color: #059669; }
.betriebskostenCol--excluded .betriebskostenCol_head i { color: #dc2626; }

.betriebskostenCol ul li {
  padding: 0.4em 0;
  color: var(--clr-text-muted);
  font-size: 0.93rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: flex; align-items: flex-start; gap: 0.5em;
}
.betriebskostenCol ul li::before {
  content: '—';
  flex-shrink: 0;
  opacity: 0.4;
}
.betriebskostenCol ul li:last-child { border-bottom: none; }

.betriebskostenSection_note {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-md);
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.betriebskostenSection_noteImg {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}
.betriebskostenSection_noteText {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.betriebskostenSection_noteText h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5em;
  color: var(--clr-primary);
}
.betriebskostenSection_noteText p {
  color: var(--clr-text-muted);
  line-height: 1.7;
  font-size: 0.95rem;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.ctaBanner {
  background: var(--grad-main);
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}
.ctaBanner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(6,182,212,0.2) 0%, transparent 50%);
  pointer-events: none;
}
.ctaBanner_inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  text-align: center;
  position: relative;
  z-index: 1;
}
.ctaBanner_eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.12);
  padding: 0.3em 0.9em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.2);
  margin-bottom: var(--space-sm);
}
.ctaBanner_title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #fff;
  margin-bottom: var(--space-sm);
}
.ctaBanner_text {
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

/* ============================================================
   WEITERE INFO SECTION
   ============================================================ */
.weitereInfoSection {
  padding: var(--space-3xl) 0;
  background: var(--clr-bg-alt);
}
.weitereInfoSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.weitereInfoSection_header {
  margin-bottom: var(--space-xl);
}
.weitereInfoSection_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.infoCard {
  display: flex;
  flex-direction: column;
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
}
.infoCard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}
.infoCard_img { overflow: hidden; height: 200px; }
.infoCard_photo {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.infoCard:hover .infoCard_photo { transform: scale(1.06); }
.infoCard_body { padding: var(--space-md); flex: 1; display: flex; flex-direction: column; }
.infoCard_label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-primary);
  margin-bottom: 0.4em;
}
.infoCard_title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5em;
  color: var(--clr-text);
}
.infoCard_text {
  font-size: 0.92rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--space-sm);
}
.infoCard_link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--clr-primary);
  font-size: 0.88rem;
  font-weight: 700;
  transition: gap var(--transition);
}
.infoCard:hover .infoCard_link { gap: 0.7em; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.pageHero {
  padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-xl);
}
.pageHero--inner {
  background: var(--grad-section);
  position: relative;
  overflow: hidden;
}
.pageHero--inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(6,182,212,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.pageHero_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
  z-index: 1;
}
.pageHero_eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(248,247,255,0.7);
  background: rgba(255,255,255,0.1);
  padding: 0.3em 0.9em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.18);
  margin-bottom: var(--space-sm);
}
.pageHero_title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-sm);
}
.pageHero_desc {
  color: rgba(248,247,255,0.82);
  font-size: 1.05rem;
  max-width: 600px;
  line-height: 1.7;
}

/* ============================================================
   INNER SECTION (generic)
   ============================================================ */
.innerSection {
  padding: var(--space-3xl) 0;
  background: var(--clr-bg);
}
.innerSection_inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.innerSection_inner--wide {
  max-width: 1280px;
}
.innerSection_split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.innerSection_text p {
  color: var(--clr-text-muted);
  margin-bottom: var(--space-sm);
  line-height: 1.75;
}
.innerSection_img {
  width: 100%; height: 380px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* ============================================================
   PRINZIPIEN SECTION
   ============================================================ */
.prinzipienSection {
  background: var(--grad-section);
  padding: var(--space-3xl) 0;
}
.prinzipienSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.prinzipienSection_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.prinzipCard {
  background: var(--clr-surface-glass);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}
.prinzipCard_num {
  font-family: 'Wix Madefor Display', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.4em;
}
.prinzipCard_title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 0.5em;
}
.prinzipCard p {
  color: var(--clr-text-muted);
  font-size: 0.93rem;
  line-height: 1.65;
}

/* ============================================================
   ABGRENZUNG GRID
   ============================================================ */
.abgrenzungGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.abgrenzungItem {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-sm);
}
.abgrenzungItem--no i { color: #dc2626; font-size: 1.3rem; flex-shrink: 0; }
.abgrenzungItem--yes i { color: #059669; font-size: 1.3rem; flex-shrink: 0; }
.abgrenzungItem strong { display: block; margin-bottom: 0.3em; }
.abgrenzungItem p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6; }

/* ============================================================
   CHECKLIST SECTION
   ============================================================ */
.checklistSection {
  padding: var(--space-3xl) 0;
  background: var(--clr-bg-alt);
}
.checklistSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.checklistSection_header {
  margin-bottom: var(--space-xl);
}
.checklistSection_header p {
  color: var(--clr-text-muted);
  margin-top: var(--space-xs);
  font-size: 1.05rem;
}
.checklistGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.checklistCard {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  border-top: 3px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}
.checklistCard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.checklistCard--primary { border-top-color: var(--clr-primary); }
.checklistCard:not(.checklistCard--primary) { border-top-color: var(--clr-accent); }

.checklistCard_head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: var(--space-md);
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}
.checklistCard_head i {
  font-size: 1.2rem;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.checklistCard_list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: 0.4em 0;
  border-bottom: 1px solid rgba(79,70,229,0.06);
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
}
.checklistCard_list li:last-child { border-bottom: none; }
.checklistCard_list li i { color: var(--clr-primary); flex-shrink: 0; margin-top: 2px; }


.warningBox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: 0;
}
.warningBox i { color: var(--clr-accent-warm); font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.warningBox strong { display: block; margin-bottom: 0.3em; color: var(--clr-text); }
.warningBox p { font-size: 0.92rem; color: var(--clr-text-muted); line-height: 1.6; }


.dringlichkeitGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.dringlichkeitItem {
  background: var(--clr-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}
.dringlichkeitItem:hover { transform: translateY(-3px); }
.dringlichkeitItem_icon {
  width: 44px; height: 44px;
  background: var(--grad-main);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 0.7em;
}
.dringlichkeitItem h4 { font-size: 1rem; margin-bottom: 0.4em; }
.dringlichkeitItem p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6; }


.vorlagenSection {
  background: var(--grad-section);
  padding: var(--space-3xl) 0;
}
.vorlagenSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.vorlagenGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.vorlagenCard {
  background: var(--clr-surface-glass);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.vorlagenCard_header {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: var(--space-md);
  background: rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-text);
}
.vorlagenCard_header i { color: var(--clr-primary); }
.vorlagenCard_text { padding: var(--space-md); }
.vorlagenCard_muster {
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  white-space: pre-line;
  background: rgba(255,255,255,0.6);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(79,70,229,0.1);
}
.vorlagenHinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-lg);
  color: rgba(248,247,255,0.85);
  font-size: 0.93rem;
  line-height: 1.65;
}
.vorlagenHinweis i { color: var(--clr-accent); flex-shrink: 0; font-size: 1.1rem; margin-top: 2px; }

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faqSection {
  background: var(--grad-section);
  padding: var(--space-3xl) 0;
}
.faqSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.faqGrid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.faqItem {
  background: var(--clr-surface-glass);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}
.faqItem_q {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  margin-bottom: 0.8em;
}
.faqItem_q i {
  color: var(--clr-accent);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 3px;
}
.faqItem_q h3 { font-size: 1.05rem; font-weight: 700; color: var(--clr-text); }
.faqItem_a {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  padding-left: 1.9em;
}


.alternativenGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.alternativeCard {
  background: var(--clr-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition);
}
.alternativeCard:hover { transform: translateY(-4px); }
.alternativeCard i {
  font-size: 1.6rem;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.6em;
  display: block;
}
.alternativeCard h4 { font-size: 1rem; margin-bottom: 0.4em; }
.alternativeCard p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6; }

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contactSection {
  padding: var(--space-3xl) 0;
  background: var(--clr-bg);
}
.contactSection_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-xl);
  align-items: flex-start;
}
.contactSection_title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: var(--space-sm);
}
.contactSection_note {
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.88rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.contactForm { display: flex; flex-direction: column; gap: var(--space-sm); }

.formGroup { display: flex; flex-direction: column; gap: 0.4em; }
.formLabel { font-weight: 600; font-size: 0.9rem; color: var(--clr-text); }
.formRequired { color: #dc2626; }

.formInput {
  padding: 0.75em 1em;
  border: 1.5px solid rgba(79,70,229,0.2);
  border-radius: var(--radius-sm);
  font-family: 'Wix Madefor Text', sans-serif;
  font-size: 0.95rem;
  color: var(--clr-text);
  background: var(--clr-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 44px;
}
.formInput:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.formInput--textarea { min-height: 120px; resize: vertical; }

.contactForm:has(:focus) {  }
.formGroup:has(.formInput:focus) .formLabel { color: var(--clr-primary); }

.formGroup--checkbox { flex-direction: row; align-items: flex-start; }
.formCheckbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  cursor: pointer;
}
.formCheckbox input[type="checkbox"] { display: none; }
.formCheckbox_custom {
  width: 20px; height: 20px;
  border: 2px solid rgba(79,70,229,0.3);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--clr-surface);
  transition: background var(--transition), border-color var(--transition);
  position: relative;
}
.formCheckbox input:checked + .formCheckbox_custom {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}
.formCheckbox input:checked + .formCheckbox_custom::after {
  content: '';
  position: absolute;
  top: 2px; left: 5px;
  width: 6px; height: 10px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.formCheckbox_label {
  font-size: 0.88rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
}
.formCheckbox_label a { color: var(--clr-primary); text-decoration: underline; }

.formError {
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.25);
  border-radius: var(--radius-sm);
  padding: 0.7em 1em;
  color: #dc2626;
  font-size: 0.88rem;
}

.contactInfoCard {
  background: var(--clr-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-sm);
}
.contactInfoCard:last-child { margin-bottom: 0; }
.contactInfoCard_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-primary);
  margin-bottom: 0.7em;
}
.contactInfoCard p {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  color: var(--clr-text-muted);
  font-size: 0.92rem;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.contactInfoCard p:last-child { margin-bottom: 0; }
.contactInfoCard p i { color: var(--clr-primary); flex-shrink: 0; margin-top: 3px; }
.contactInfoCard a { color: var(--clr-primary); }
.contactInfoCard a:hover { text-decoration: underline; }
.contactInfoCard_address p { display: block; margin-bottom: 0.2em; }

.mapSection { padding: 0 0 var(--space-3xl); background: var(--clr-bg); }
.mapSection_inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-lg); }
.mapSection_title { font-size: 1.3rem; margin-bottom: var(--space-md); }
.mapSection_map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.mapSection_map iframe { display: block; }

/* ============================================================
   THANKS PAGE
   ============================================================ */
.thanksMain {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - 200px);
  padding: var(--space-3xl) var(--space-lg);
}
.thanksMain_inner {
  text-align: center;
  max-width: 520px;
}
.thanksMain_icon {
  font-size: 4rem;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-md);
}
.thanksMain_title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  margin-bottom: var(--space-sm);
}
.thanksMain_sub {
  color: var(--clr-text-muted);
  font-size: 1.1rem;
  margin-bottom: var(--space-xl);
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legalHero {
  background: var(--grad-section);
  padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-xl);
  position: relative;
}
.legalHero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(6,182,212,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.legalHero_inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
  z-index: 1;
}
.legalHero_title {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #fff;
  margin-bottom: 0.3em;
}
.legalHero_meta {
  color: rgba(248,247,255,0.65);
  font-size: 0.9rem;
}

.legalSection {
  padding: var(--space-3xl) 0;
  background: var(--clr-bg);
}
.legalSection_inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.legalSection_intro {
  color: var(--clr-text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(79,70,229,0.1);
}
.legalSection_intro a { color: var(--clr-primary); text-decoration: underline; }

.legalFaq_item {
  border-bottom: 1px solid rgba(79,70,229,0.1);
  padding: var(--space-lg) 0;
}
.legalFaq_item:last-child { border-bottom: none; }
.legalFaq_q {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--space-sm);
}
.legalFaq_a p {
  color: var(--clr-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-sm);
  font-size: 0.95rem;
}
.legalFaq_a p:last-child { margin-bottom: 0; }
.legalFaq_a ul {
  margin: var(--space-sm) 0;
  padding-left: var(--space-md);
}
.legalFaq_a ul li {
  list-style: disc;
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  margin-bottom: 0.4em;
  line-height: 1.6;
}
.legalFaq_a a { color: var(--clr-primary); text-decoration: underline; }

.legalTerms_block {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(79,70,229,0.08);
}
.legalTerms_block:last-child { border-bottom: none; }
.legalTerms_block h2 {
  font-size: 1.2rem;
  color: var(--clr-primary);
  margin-bottom: var(--space-sm);
}
.legalTerms_block p {
  color: var(--clr-text-muted);
  line-height: 1.75;
  font-size: 0.95rem;
  margin-bottom: var(--space-sm);
}
.legalTerms_block p:last-child { margin-bottom: 0; }

.cookieCategory {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(79,70,229,0.08);
}
.cookieCategory:last-child { border-bottom: none; }
.cookieCategory h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--clr-text);
}
.cookieCategory p {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: var(--space-sm);
}
.cookieCategory ul {
  margin: var(--space-sm) 0;
  padding-left: var(--space-md);
}
.cookieCategory ul li {
  list-style: disc;
  color: var(--clr-text-muted);
  font-size: 0.92rem;
  margin-bottom: 0.4em;
  line-height: 1.6;
}
.cookieCategory a { color: var(--clr-primary); text-decoration: underline; }

.cookieTable_wrap { overflow-x: auto; margin: var(--space-sm) 0; }
.cookieTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.cookieTable th {
  background: rgba(79,70,229,0.08);
  color: var(--clr-text);
  font-weight: 700;
  text-align: left;
  padding: 0.6em 0.9em;
  border-bottom: 2px solid rgba(79,70,229,0.15);
}
.cookieTable td {
  padding: 0.6em 0.9em;
  border-bottom: 1px solid rgba(79,70,229,0.07);
  color: var(--clr-text-muted);
  vertical-align: top;
}
.cookieTable td code {
  font-family: 'Courier New', monospace;
  background: rgba(79,70,229,0.07);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.85em;
}


.impressum_sectionTitle {
  font-size: 1.2rem;
  color: var(--clr-primary);
  margin: var(--space-xl) 0 var(--space-sm);
}
.impressum_sectionTitle:first-of-type { margin-top: 0; }
.impressum_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
  font-size: 0.95rem;
}
.impressum_table th {
  text-align: left;
  font-weight: 600;
  padding: 0.6em 1em 0.6em 0;
  color: var(--clr-text);
  width: 200px;
  vertical-align: top;
  border-bottom: 1px solid rgba(79,70,229,0.08);
}
.impressum_table td {
  padding: 0.6em 0;
  color: var(--clr-text-muted);
  border-bottom: 1px solid rgba(79,70,229,0.08);
}
.impressum_table a { color: var(--clr-primary); text-decoration: underline; }
.legalSection p { color: var(--clr-text-muted); line-height: 1.75; font-size: 0.95rem; margin-bottom: var(--space-sm); }
.legalSection a { color: var(--clr-primary); text-decoration: underline; }

/* ============================================================
   FOOTER
   ============================================================ */
.pageFooter {
  background: var(--clr-text);
  color: rgba(248,247,255,0.75);
  padding-top: var(--space-3xl);
  margin-top: auto;
}
.pageFooter_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-xl);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-xl);
}
.pageFooter_logo {
  font-family: 'Wix Madefor Display', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-bottom: var(--space-sm);
}
.pageFooter_desc { font-size: 0.88rem; line-height: 1.65; max-width: 280px; }

.pageFooter_navTitle {
  font-family: 'Wix Madefor Display', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(248,247,255,0.45);
  margin-bottom: var(--space-sm);
}
.pageFooter_navLink {
  display: block;
  font-size: 0.9rem;
  color: rgba(248,247,255,0.72);
  margin-bottom: 0.5em;
  transition: color var(--transition);
}
.pageFooter_navLink:hover { color: #fff; }

.pageFooter_contact p {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 0.9rem;
  color: rgba(248,247,255,0.72);
  margin-bottom: 0.6em;
  line-height: 1.5;
}
.pageFooter_contact i { color: var(--clr-accent); flex-shrink: 0; margin-top: 3px; }
.pageFooter_contact a { color: rgba(248,247,255,0.82); }
.pageFooter_contact a:hover { color: #fff; }

.pageFooter_bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-md) var(--space-lg);
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: 0.82rem;
  color: rgba(248,247,255,0.45);
}

/* ============================================================
   COOKIE CONSENT — NOTIFICATION BELL PATTERN
   ============================================================ */
.cookieConsent_trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
  width: 52px; height: 52px;
  background: var(--grad-main);
  border: none;
  border-radius: var(--radius-full);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg), 0 0 20px rgba(79,70,229,0.4);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cookieConsent_trigger:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl), 0 0 30px rgba(79,70,229,0.5);
}
.cookieConsent_badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 16px; height: 16px;
  background: #ef4444;
  border: 2px solid #fff;
  border-radius: var(--radius-full);
  display: none;
}
.cookieConsent_badge.cookieConsent_badge--visible { display: block; }

.cookieConsent_panel {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 9991;
  width: 360px;
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), 0 0 40px rgba(79,70,229,0.2);
  border: 1px solid rgba(79,70,229,0.15);
  overflow: hidden;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s;
}
.cookieConsent_panel.cookieConsent_panel--open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}

.cookieConsent_panelHead {
  background: var(--grad-main);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cookieConsent_panelTitle {
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
}
.cookieConsent_panelClose {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  border-radius: var(--radius-full);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background var(--transition);
}
.cookieConsent_panelClose:hover { background: rgba(255,255,255,0.35); }

.cookieConsent_panelBody { padding: var(--space-md); }
.cookieConsent_desc {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.cookieConsent_cats { display: flex; flex-direction: column; gap: 0.6em; margin-bottom: var(--space-md); }
.cookieConsent_cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 0.8em;
  background: var(--clr-bg);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(79,70,229,0.08);
}
.cookieConsent_catLabel { font-size: 0.88rem; font-weight: 600; color: var(--clr-text); }
.cookieConsent_catDesc { font-size: 0.75rem; color: var(--clr-text-muted); }

.cookieToggle {
  position: relative;
  width: 40px; height: 22px;
  flex-shrink: 0;
}
.cookieToggle input { display: none; }
.cookieToggle_track {
  position: absolute;
  inset: 0;
  background: rgba(79,70,229,0.15);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition);
}
.cookieToggle input:checked + .cookieToggle_track { background: var(--clr-primary); }
.cookieToggle_track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--transition);
}
.cookieToggle input:checked + .cookieToggle_track::after { transform: translateX(18px); }
.cookieToggle--disabled .cookieToggle_track { cursor: not-allowed; opacity: 0.6; }

.cookieConsent_actions { display: flex; gap: 0.5em; }
.cookieConsent_actions .btn { flex: 1; font-size: 0.85rem; padding: 0.6em 1em; }

.cookieConsent_link {
  display: block;
  text-align: center;
  margin-top: 0.7em;
  font-size: 0.78rem;
  color: var(--clr-text-muted);
}
.cookieConsent_link a { color: var(--clr-primary); text-decoration: underline; }

/* ============================================================
   RESPONSIVE — MOBILE FIRST
   ============================================================ */
@media (max-width: 1024px) {
  .introSection_inner { grid-template-columns: 1fr; }
  .eigenmittelSection_inner { grid-template-columns: 1fr; }
  .contactSection_inner { grid-template-columns: 1fr; }
  .pageFooter_inner { grid-template-columns: 1fr 1fr; }
  .betriebskostenSection_note { grid-template-columns: 1fr; }
  .betriebskostenSection_noteImg { height: 220px; }
  .alternativenGrid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root {
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 4rem;
  }

  .siteHeader_nav { display: none; }
  .siteHeader_menuBtn { display: flex; }

  .mainHero_textBottom { flex-direction: column; gap: var(--space-md); }
  .mainHero_actions { flex-direction: column; width: 100%; }
  .mainHero_actions .btn { width: 100%; justify-content: center; }

  .infoStrip_inner { gap: var(--space-md); }

  .voraussetzungenSection_grid { grid-template-columns: 1fr; }
  .mieteSection_split { grid-template-columns: 1fr; }
  .weitereInfoSection_grid { grid-template-columns: 1fr; }
  .checklistGrid { grid-template-columns: 1fr; }
  .abgrenzungGrid { grid-template-columns: 1fr; }
  .prinzipienSection_grid { grid-template-columns: 1fr; }
  .vorlagenGrid { grid-template-columns: 1fr; }
  .dringlichkeitGrid { grid-template-columns: 1fr; }
  .betriebskostenSection_cols { grid-template-columns: 1fr; }
  .innerSection_split { grid-template-columns: 1fr; }
  .alternativenGrid { grid-template-columns: 1fr; }

  .pageFooter_inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .pageFooter_bottom { flex-direction: column; text-align: center; }

  .introSection_text { padding-left: 0; }
  .introSection_badge { right: 0; }

  .cookieConsent_panel { width: calc(100vw - 32px); right: 16px; }

  .contactSection_inner { grid-template-columns: 1fr; }

  .impressum_table th { width: 120px; }
}

@media (max-width: 480px) {
  .mainHero_imageStrip { height: 180px; }
  .introSection_img { height: 260px; }
  .eigenmittelSection_img { height: 240px; }
  .innerSection_img { height: 240px; }
  .infoCard_img { height: 160px; }
  .mieteSection_img { height: 180px; }
}

/* ============================================================
   :HAS() RELATIONAL STYLING
   ============================================================ */
.infoCard:has(.infoCard_photo) .infoCard_body { border-top: 2px solid rgba(79,70,229,0.08); }
.formGroup:has(.formInput:invalid:not(:placeholder-shown)) .formLabel { color: #dc2626; }
.formGroup:has(.formInput:valid:not(:placeholder-shown)) .formLabel { color: #059669; }
.contactSection:has(.formInput:focus) { background: rgba(248,247,255,0.98); }
.checklistCard:has(.checklistCard_list) { background: var(--clr-surface); }
.voraussCard:has(.voraussCard_iconWrap) { padding-top: var(--space-lg); }