:root{
  --c24-blue-100:#0563C1;
  --c24-blue-200:#064E9C;
  --c24-blue-300:#022D94;
  --c24-gray-100:#FAFAFA;
  --c24-gray-300:#DCDCDC;
  --c24-gray-600:#181818;

  /* Header-Höhen (wichtig für sticky + mini-search) */
  --header-h:74px;
  --header-h-scrolled:56px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:#fff;
  color:var(--c24-gray-600);
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.5;
  padding-top: var(--header-h); /* Platz für fixierten Header */
}

a{color:var(--c24-blue-100);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1280px;margin:0 auto;padding:0 16px}

/* HEADER */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  background:var(--c24-blue-300);
  color:#fff;

  transition: box-shadow .18s ease;
}

.nav-inner{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  transition: height .18s ease;
}

/* Scroll-State: Schatten + kleinere Header-Höhe */
.nav.is-scrolled{
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.nav.is-scrolled .nav-inner{
  height: var(--header-h-scrolled);
}

.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.brand .logo-mark{
  width:44px;height:44px;border-radius:6px;
  background:rgba(255,255,255,.12);
  display:grid;place-items:center;font-weight:800
}
.brand .logo-text{font-weight:700;letter-spacing:.2px}

.navlinks{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.navlinks a{color:#fff;font-size:14px}
.navlinks a:hover{text-decoration:none;opacity:.9}
.navlinks .pill{
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.12);
  transition: padding .18s ease;
}
.nav.is-scrolled .navlinks .pill{
  padding:7px 12px;
}
.navlinks .pill.cta{
  background:var(--c24-blue-100);
  font-weight:700;
}
.navlinks .pill.cta:hover{background:var(--c24-blue-200)}

/* Logo im Header */
.header-logo{
  display:flex;
  align-items:center;
  gap:10px;
  height:100%;
}

.header-logo img{
  height:46px;          /* Desktop Standard */
  width:auto;
  display:block;
  transition:height .18s ease;
}

/* Logo proportional kleiner beim Scroll */
.nav.is-scrolled .header-logo img{
  height:34px;
}

/* Mobile */
@media (max-width:768px){
  .header-logo img{height:32px;}
  .nav.is-scrolled .header-logo img{height:28px;}
}

/* HERO */
.hero{
  min-height: 55vh;
  background:
    linear-gradient(180deg, rgba(2,45,148,.92) 0%, rgba(2,45,148,.80) 45%, rgba(2,45,148,.55) 100%),
    url("assets/hero.jpg") center/cover no-repeat;
  color:#fff;
}
.hero-inner{padding:52px 0 46px}
.hero h1{margin:0;font-size:34px;font-weight:700;text-align:center}
.hero .lead{margin:10px auto 0;max-width:920px;text-align:center;opacity:.95}
.hero-badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px 0 22px}
.hero-badges span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:8px 12px;border-radius:20px;font-size:14px}

/* FORM PANEL */
.search-panel{
  background:#fff;
  color:var(--c24-gray-600);
  border:1px solid var(--c24-gray-300);
  border-radius:6px;
  padding:18px 18px 14px;
  max-width:1100px;
  margin:18px auto 0;
}
.search-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}
label{display:block;font-size:12px;margin-bottom:6px}
input,select,textarea{
  width:100%;height:52px;padding:0 12px;
  border:1px solid #B4B4B4;border-radius:0;
  font-size:16px;color:var(--c24-gray-600);background:#fff;font-family:inherit
}
textarea{height:auto;min-height:120px;padding:10px 12px}
input:hover,select:hover,textarea:hover{border-color:var(--c24-gray-600)}
input:focus,select:focus,textarea:focus{outline:none;border-color:#005EA8}
button,.btn{
  height:52px;width:100%;
  border:0;border-radius:20px;
  background:var(--c24-blue-100);color:#fff;
  font-size:16px;font-weight:700;cursor:pointer
}
button:hover,.btn:hover{background:var(--c24-blue-200);text-decoration:none}
.small-note{margin:10px 0 0;font-size:12px;color:#555}

/* SECTIONS */
.section{padding:46px 0}
.section.alt{background:var(--c24-gray-100)}
.section h2{margin:0 0 14px;font-size:25px;font-weight:700;text-align:center;color:var(--c24-gray-600)}
.section .intro{max-width:920px;margin:0 auto 26px;text-align:center;color:#444}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--c24-gray-300);border-radius:0;padding:16px}
.card h3{margin:0 0 8px;font-size:18px}
.muted{color:#444}

/* COMPAT */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--c24-gray-300);padding:10px 8px;text-align:left;font-size:14px}
.table th{background:var(--c24-gray-100)}

/* FOOTER */
.footer{background:var(--c24-gray-100);border-top:1px solid var(--c24-gray-300);color:var(--c24-gray-600)}
.footer .inner{padding:24px 16px;max-width:1280px;margin:0 auto;font-size:14px;text-align:center}
.footer a{color:var(--c24-blue-100)}

/* Responsive */
@media (max-width:1024px){
  .search-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}

/* =====================
   STICKY MINI-SUCHE (Search.php)
===================== */
.sticky-mini-search{
  position: sticky;
  top: var(--header-h); /* Standard: unter normalem Header */
  z-index: 900;
  background:#fff;
  border-bottom:1px solid var(--c24-gray-300, #DCDCDC);
  transition: top .18s ease;
}

/* Wenn Header kleiner wird -> Mini-Suche rutscht hoch */
.nav.is-scrolled ~ .sticky-mini-search{
  top: var(--header-h-scrolled);
}

.sticky-mini-search .inner{
  max-width:1280px;
  margin:0 auto;
  padding:10px 16px;
}
.mini-search-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 180px;
  gap:10px;
  align-items:end;
}
.mini-search-grid label{
  font-size:11px;
  margin-bottom:4px;
  display:block;
}
.mini-search-grid input,
.mini-search-grid select{
  height:44px;
  font-size:14px;
}
.mini-search-grid button{
  height:44px;
  border-radius:18px;
  font-size:14px;
}
@media (max-width:1024px){
  .mini-search-grid{grid-template-columns:1fr}
  .sticky-mini-search .inner{padding:12px 16px}
}

/* =====================
   SEARCH RESULTS (klar getrennt)
===================== */
.results-list{display:grid;gap:14px}
.offer-card{
  background:#fff;
  border:1px solid var(--c24-gray-300, #DCDCDC);
  border-radius:6px;
  overflow:hidden;
}
.offer-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  background:var(--c24-gray-100, #FAFAFA);
  border-bottom:1px solid var(--c24-gray-300, #DCDCDC);
}
.offer-title{font-size:18px;font-weight:700;margin:0 0 4px}
.offer-meta{font-size:13px;color:#444}
.offer-badge{text-align:right;min-width:180px}
.offer-save{font-size:18px;font-weight:700;color:var(--c24-blue-300, #022D94)}
.offer-body{padding:14px 16px 16px}
.offer-desc{color:#444;font-size:14px;line-height:1.55}
.offer-actions{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
@media (max-width:640px){
  .offer-badge{min-width:auto;text-align:left}
  .offer-head{flex-direction:column}
}
/* =====================
   MULTI-SELECT CTA (Search Results)
===================== */
.offer-select{display:flex;align-items:flex-start;gap:10px}
.offer-check{width:20px;height:20px;margin-top:3px;cursor:pointer}
.offer-card.selected{outline:2px solid rgba(5,99,193,.35);outline-offset:-2px}

.bulk-cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  background:#fff;border-top:1px solid var(--c24-gray-300,#DCDCDC);
  box-shadow:0 -10px 24px rgba(0,0,0,.12);
  transform:translateY(110%);
  transition:transform .18s ease;
}
.bulk-cta-bar.is-visible{transform:translateY(0)}
.bulk-cta-inner{
  max-width:1100px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;gap:12px;
  justify-content:space-between;flex-wrap:wrap;
}
.bulk-cta-count{font-size:14px;color:#444}
.bulk-cta-actions{display:flex;align-items:center;gap:10px}
.bulk-cta-actions .btn{width:auto;padding:0 18px}
.bulk-cta-actions .link-reset{font-size:14px;color:var(--c24-blue-100);text-decoration:none}
.bulk-cta-actions .link-reset:hover{text-decoration:underline}
.has-bulkbar{padding-bottom:90px}

/* HERO Headline – Mobile Fix für lange Wörter */
.hero h1{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mobile Anpassung */
@media (max-width: 768px){
  .hero h1{
    font-size: 26px;      /* vorher ~34px */
    line-height: 1.25;
    padding: 0 8px;      /* Luft links/rechts */
  }
}

/* Sehr kleine Geräte */
@media (max-width: 420px){
  .hero h1{
    font-size: 23px;
  }
}


/* =====================
   Flash Messages
===================== */
.flash-wrap{margin-top:12px}
.flash{
  border:1px solid var(--c24-gray-300);
  border-left:6px solid var(--c24-blue-100);
  background:#fff;
  padding:10px 12px;
  margin:10px 0;
  border-radius:6px;
  font-size:14px;
}
.flash-success{border-left-color:#0a7b34}
.flash-error{border-left-color:#b00020}
.flash-info{border-left-color:var(--c24-blue-200)}

/* =====================
   Mobile Nav (Burger) + CTA
===================== */
.nav-right{display:flex;align-items:center;gap:10px}
.nav-cta{white-space:nowrap}

/* Burger button */
.nav-toggle{
  display:none;
  width:42px;height:42px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  margin:4px auto;
  border-radius:2px;
}

/* Mobile behavior */
@media (max-width: 900px){
  .navlinks{
    position:fixed;
    top: var(--header-h);
    left:0; right:0;
    background:var(--c24-blue-300);
    padding:12px 16px 16px;
    gap:10px;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    z-index:999;
  }
  body.nav-open .navlinks{display:flex}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  /* hide topic pills on header row (they live in menu now) */
  .nav-inner{gap:10px}
  .navlinks .pill{width:100%}
  .navlinks a{font-size:15px}
  /* CTA smaller on mobile */
  .navlinks .pill.cta, .nav-cta{
    height:40px;
    padding:0 14px;
    border-radius:18px;
    font-size:14px;
  }
}

/* Make the bottom bulk CTA smaller (was too big) */
.bulk-cta-actions .btn{
  height:44px;
  font-size:14px;
  border-radius:18px;
}


/* ===== Search: Metrics + Slider ===== */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:10px 0 12px}
.metric{border:1px solid var(--c24-gray-300,#DCDCDC);border-radius:8px;padding:10px 12px;background:#fff}
.metric .k{font-size:12px;color:#444;margin-bottom:4px}
.metric .v{font-size:18px;font-weight:800;color:var(--c24-gray-600,#181818)}
@media (max-width:1024px){.metrics-grid{grid-template-columns:1fr}}

.ticket-slider{margin-top:12px;border:1px solid var(--c24-gray-300,#DCDCDC);border-radius:8px;padding:12px;background:#fff}
.ticket-slider-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ticket-slider input[type="range"]{width:100%}
.ticket-slider-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:13px;color:#444}

/* Mini search layout refinements */
.mini-search-grid{display:grid;grid-template-columns:1.2fr 1fr 1.1fr 1fr 180px;gap:10px;align-items:end}
.mini-tax-row{display:flex;gap:8px;align-items:end}
.mini-tax-row select{width:90px;height:44px}
.mini-search-grid input, .mini-search-grid select{height:44px;font-size:14px}
.mini-search-grid button{height:44px;border-radius:18px;font-size:14px}
@media (max-width:1024px){.mini-search-grid{grid-template-columns:1fr}}

/* Sticky mini search: on mobile disable sticky (too much screen) */
@media (max-width:768px){
  .sticky-mini-search{position:static !important; top:auto !important;}
}

/* ===== Offer list: Title toggle + Details ===== */
.offer-title-link{color:inherit;text-decoration:none}
.offer-title-link:hover{opacity:.95;text-decoration:none}
.offer-details{margin-top:12px;border-top:1px solid var(--c24-gray-300,#DCDCDC);padding-top:12px}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px}
.ditem{border:1px solid var(--c24-gray-300,#DCDCDC);border-radius:8px;padding:10px 12px;background:#fff}
.ditem .k{font-size:12px;color:#444;margin-bottom:4px}
.ditem .v{font-size:16px;font-weight:800}
@media (max-width:768px){.detail-grid{grid-template-columns:1fr}}
.offer-desc-full{color:#444;font-size:14px;line-height:1.55}
.details-close{display:inline-block;margin-top:8px}

/* ROI display in list */
.offer-roi{margin-top:6px;font-size:13px;color:var(--c24-blue-300,#022D94);display:flex;gap:6px;justify-content:flex-end;align-items:baseline}
.offer-roi .roi-pct{font-weight:900}
.offer-roi .roi-eur{color:#444}
@media (max-width:640px){.offer-roi{justify-content:flex-start}}

/* Thumbnails clickable */
.offer-thumb{display:block;width:144px;height:108px;border:1px solid var(--c24-gray-300,#DCDCDC);border-radius:6px;overflow:hidden}
.offer-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;z-index:2000}
.lightbox.is-open{display:block}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.lightbox-inner{position:relative;max-width:980px;margin:6vh auto 0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.lightbox-inner img{width:100%;height:auto;display:block}
.lightbox-close{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:20px;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:26px;cursor:pointer}
.lightbox-close:hover{background:rgba(0,0,0,.7)}


/* Preset-Links unter dem Invest-Slider */
.invest-presets{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.preset-link{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border:1px solid var(--c24-gray-300,#DCDCDC);
  border-radius:999px;
  background:#fff;
  color:var(--c24-blue-300,#022D94);
  font-size:13px;
  text-decoration:none;
}
.preset-link:hover{ background:var(--c24-gray-100,#FAFAFA); }
.preset-link.is-active{
  border-color:rgba(2,45,148,.35);
  background:rgba(2,45,148,.08);
  font-weight:700;
}

@media (max-width:768px){.sticky-mini-search{position:static;top:auto;}}


/* Button soll sich wie normaler Textlink verhalten */
.linklike{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;

  padding:0;
  margin:0;

  font:inherit;
  color:var(--c24-blue-100);
  cursor:pointer;
  text-decoration:underline;
}

/* Hover */
.linklike:hover{
  background:transparent !important;
  box-shadow:none !important;
  color:var(--c24-blue-200);
}

/* Focus (z. B. nach Klick / Tab) */
.linklike:focus,
.linklike:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

/* Active (Maus gedrückt) */
.linklike:active{
  background:transparent !important;
  box-shadow:none !important;
  transform:none;
}

/* Optional: gefährliche Aktion */
.linklike.danger{
  color:#b00020;
  text-decoration:none;
}

.linklike.danger:hover{
  color:#7a0016;
  text-decoration:underline;
}

/* Startseite – CTA "Angebote vergleichen" */
.hero .nav-cta,
.hero .search-panel .nav-cta,
.hero button.nav-cta,
.hero .pill.nav-cta{
  background:#FF8A00;          /* Logo-Orange */
  color:#000;                  /* schwarze Schrift */
  font-weight:800;
  border-radius:999px;
  border:0;
  box-shadow:none;
}

/* Hover */
.hero .nav-cta:hover,
.hero .pill.nav-cta:hover{
  background:#E67600;          /* dunkleres Orange */
  color:#000;
  text-decoration:none;
}


.lead-icons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .lead-icons {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}




@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}