@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-100.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-100italic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-200italic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-300italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-800italic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-900italic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design Tokens */
:root{
  /* Farben Sonne & Mond */
  --sun-50:  #FFF8E1;
  --sun-100: #FFE082;
  --sun-200: #FFCC80;
  --sun-300: #FFB74D;
  --sun-400: #FFA726;
  --sun-500: #FF9800;
  --sun-600: #FB8C00;
  --sun-700: #EF6C00;

  --moon-50:  #F0F6FF;
  --moon-100: #DCEAFE;
  --moon-200: #BFD6FB;
  --moon-300: #9EC2F6;
  --moon-400: #7EADEC;
  --moon-500: #5F97E0;
  --moon-600: #3E7FCF;
  --moon-700: #1F5FAE;
  --moon-800: #174C8A;

  --text-900: #0f172a;
  --text-700: #334155;
  --text-600: #475569;
  --muted:    #6b7280;

  --bg: #ffffff;
  --bg-soft: #FAFAFC;

  --radius-sm: .5rem;
  --radius:    1rem;
  --radius-xl: 1.25rem;

  --shadow-sm: 0 2px 10px rgba(15,23,42,.06);
  --shadow:    0 12px 30px rgba(15,23,42,.10);
  --shadow-lg: 0 24px 60px rgba(15,23,42,.12);
}

/* ---------- Base */
html{ scroll-behavior:smooth; }
body {
  font-family: 'Montserrat', sans-serif;
  color:var(--text-900);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Ensure content isn’t obscured by the consent bar when visible */
  padding-bottom: var(--consent-bar-offset, 0px);
}
img{ max-width:100%; height:auto; }

/* ---------- Layout Helpers */
.section{ padding: clamp(56px, 7vw, 110px) 0; }
.rounded-xl{ border-radius: var(--radius-xl) !important; }
.card-soft{
  border:0; background:#fff; border-radius: var(--radius-xl);
  box-shadow: var(--shadow); overflow:hidden;
}
.lead-tight{ max-width:58ch; }
.divider{ height:1px; background:rgba(0,0,0,.06); margin:2rem 0; }

/* ---------- Navbar (fixed, dezent) */
.navbar-sticky{
  position:sticky; top:0; z-index:1020;
  backdrop-filter:saturate(180%) blur(10px);
  background: rgba(255,255,255,.7);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.navbar-brand{ font-weight:800; letter-spacing:.2px; }
.nav-link{ font-weight:600; }
.nav-link.btn-cta{
  border-radius:999px; padding:.5rem 1rem; font-weight:800;
}

/* ---------- Branding Pills/Chips */
.pill{
  display:inline-block;
  border-radius:999px;
  padding:.35rem .75rem;
  background:var(--sun-50);
  color:#7a5d00;
  font-weight:700; font-size:.85rem;
  border:1px solid rgba(0,0,0,.03);
}
.chip{
  display:inline-block; margin:.25rem .35rem .25rem 0;
  padding:.45rem .8rem; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  font-weight:600; color:var(--text-700);
}

/* ---------- Avatare / Medien */
.avatar{ width:64px; height:64px; border-radius:999px; object-fit:cover; }

/* ---------- Hero / Parallax */
header .jarallax{ min-height: clamp(420px, 65vh, 820px); }
.jarallax > .jarallax-img{
  width:100%; height:100%; object-fit:cover;
}
.hero-overlay-sun{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(241, 222, 184, 1),rgba(74, 252, 148, 0.11));
  pointer-events:none;
}
.hero-overlay-moon{
  background: linear-gradient(135deg, var(--moon-700), var(--moon-400));
  color:#fff;
}

/* ---------- Buttons Feinschliff */
.btn-warning{
  background: var(--sun-500); border-color: var(--sun-500); color:#111;
}
.btn-warning:hover{
  background: var(--sun-600); border-color: var(--sun-600); color:#111;
}
.btn-outline-dark{ border-width:2px; }

/* ---------- Cards & Hover */
.card-soft:hover{ box-shadow: var(--shadow-lg); transform: translateY(-2px); transition: box-shadow .3s, transform .3s; }
.card-soft{ transition: box-shadow .3s, transform .3s; }

/* ---------- Utilities */
.bg-soft{ background: var(--bg-soft); }
.text-muted{ color: var(--muted) !important; }

/* ---------- Footer */
.footer{
  background: var(--sun-50);
  border-top:1px solid rgba(0,0,0,.06);
}

/* ---------- Consent-Bar (optional, wenn genutzt) */
.consent-bar{
  position:fixed; inset:auto 0 0 0; z-index:2000;
  background:#111827; color:#fff; box-shadow:0 -10px 25px rgba(0,0,0,.25);
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
.consent-bar .btn{ border-radius:999px; }

/* Mobile layout for consent actions to avoid overflow */
@media (max-width: 575.98px){
  #sol-consent-bar .consent-actions{
    width: 100%;
    display: flex; flex-direction: column; align-items: stretch;
    gap: .5rem; margin-top: .5rem;
  }
  #sol-consent-bar .consent-actions > .me-2{ margin-right: 0 !important; }
  #sol-consent-bar .consent-actions .btn{ width: 100%; }
}

/* ---------- Motion Preferences */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Responsive Tweaks */
@media (max-width: 991.98px){
  .navbar .btn-cta{ padding:.45rem .9rem; }
}

.navbar .nav-link.active{ color:#0f172a !important; }

/* Navbar oberhalb von Bannern/Modals halten */
.navbar.fixed-top { z-index: 1050; }

/* Cookie-Bar darf nicht über der Navbar liegen */
#sol-consent-bar { z-index: 1020; }

/* Floating CTA: sicher vor Display-Rändern (iOS Safe Areas) */
.fab-cta {
  position: fixed;
  right: max(16px, env(safe-area-inset-right) + 12px);
  bottom: max(16px, env(safe-area-inset-bottom) + 12px);
  z-index: 1080;
  box-shadow: var(--shadow);
}
@media (min-width: 992px) { .fab-cta { display: none !important; } }

/* Fallback: if CSS var is not set, nudge FAB up a bit when consent bar exists */
@media (max-width: 991.98px){
}

/* Hide floating CTA while consent bar is open */
.consent-open .fab-cta { display: none !important; }

/* Slight nudge for very small screens so toggler doesn’t touch edges */
@media (max-width: 360px){
  .navbar .navbar-toggler { margin-left: 4px; }
}

/* Animated burger-to-X toggler (overrides image-based icon) */
.navbar-dark .navbar-toggler { color: rgba(255,255,255,0.95); border: 0 !important; background: transparent; }
.navbar-light .navbar-toggler { color: rgba(0,0,0,0.85); border: 0 !important; background: transparent; }
.navbar .navbar-toggler { border: 0 !important; background: transparent; }

.navbar .navbar-toggler-icon{
  width: 24px; height: 2px; display:inline-block; position:relative;
  background: currentColor; /* middle bar */
  background-image: none !important; /* override Bootstrap */
  transition: background-color .2s ease, transform .25s ease, opacity .2s ease;
}
.navbar .navbar-toggler-icon::before,
.navbar .navbar-toggler-icon::after{
  content:""; position:absolute; left:0; right:0; height:2px; background: currentColor;
  transition: transform .25s ease, top .25s ease, bottom .25s ease, opacity .2s ease;
}
.navbar .navbar-toggler-icon::before{ top:-7px; }
.navbar .navbar-toggler-icon::after{ bottom:-7px; }

.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{ background: transparent; }
.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{
  top:0; transform: rotate(45deg);
}
.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{
  bottom:0; transform: rotate(-45deg);
}

/* Verhindert horizontales Scrollen durch überstehende Inhalte */
html, body {
  overflow-x: hidden;
}

/* Stellt sicher, dass Bilder nie breiter als der Viewport werden */
img, .jarallax-img {
  max-width: 100%;
  height: auto;
}

/* Speziell für translate-middle im Hero */
header .container.position-absolute {
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* ==== Typografie-Reset (nur Darstellung) ==== */
:root{
  --fs-hero: clamp(28px, 3.3vw, 40px);
  --fs-h2:   clamp(22px, 2.2vw, 28px);
  --fs-h3:   clamp(18px, 1.6vw, 22px);
  --fs-h4:   clamp(16px, 1.2vw, 18px);
  --fs-body: 1rem;
  --lh-body: 1.65;
}

html { scroll-behavior: smooth; }
body {
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin:0 0 .5em;
  line-height:1.2;
  letter-spacing:.1px;
  font-weight:700;
}
h1 { font-size:var(--fs-hero); }
h2 { font-size:var(--fs-h2); }
h3 { font-size:var(--fs-h3); }
h4 { font-size:var(--fs-h4); }

p{margin:0 0 1em;}
ul, ol { margin:0 0 1em 1.25em; }
small, .small { font-size:.925rem; }
.text-muted { color:#6b7280!important; }

.lead { font-size:1.0625rem; line-height:1.7; }

.section { padding:clamp(56px,7vw,110px) 0; }
.section .section-kicker { display:inline-block; margin-bottom:.75rem; }
.section .section-title { margin-bottom:.35rem; }

.pill, .chip { font-size:.95rem; }
.card-soft h6, .card-soft h5, .card-soft h4 { font-size:var(--fs-h3); margin-bottom:.5rem; }

.btn { letter-spacing:.1px; }

/* ==== Typografie-Reset (nur Darstellung) ==== */
:root{
  --fs-hero: clamp(28px, 3.3vw, 40px);
  --fs-h2:   clamp(22px, 2.2vw, 28px);
  --fs-h3:   clamp(18px, 1.6vw, 22px);
  --fs-h4:   clamp(16px, 1.2vw, 18px);
  --fs-body: 1rem;
  --lh-body: 1.65;
}