/* =========================================================
   BLOCK A — GLOBAL FIX (kein horizontales Scrollen / Wackeln)
   + Platz für FIXED Header
========================================================= */
:root{
  --hv-header-offset: 78px;          /* Desktop: Reserve unter Header */
  --hv-header-offset-mobile: 68px;   /* Mobile: Reserve unter Header */
}


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



/* Wichtig: nicht nur html/body, auch Wrapper */
html, body, #main, #content{
  max-width: 100%;
  overflow-x: hidden;
}

/* Check24 Container: volle Breite, kein Überstand */
#home_1{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Falls Check24 ein iframe reinrendert: hart klemmen */
#home_1 iframe,
#home_1 > iframe{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
}

/* Manche Widgets nutzen zusätzliche Wrapper-divs */
#home_1 *{
  max-width: 100% !important;
}

/* iOS/Android: verhindert „Gummi-Scroll“ durch Transform/Positioning */
#home_1{
  -webkit-overflow-scrolling: auto;
}


/* defensive: Medien/iframes nie breiter als Viewport */
img, iframe, video{
  max-width: 100%;
}



/* =========================================================
   BLOCK B — MODERN HEADER (hv-*) — FIXED TOP
   Elegant: weißer Balken, klare Typo, Desktop Inline-Nav
========================================================= */
/* =========================================================
   BLOCK B — MODERN HEADER (hv-*) — FIXED TOP (UPDATED)
   Fixes: Logo nicht schmal, Burger 3 Striche untereinander,
   Dropdown 100% width + linksbündig, kein Wackeln.
========================================================= */

/* Header-Höhen (Reserve unter fixed Header) */
:root{
  --hv-header-offset: 78px;         /* Desktop Reserve */
  --hv-header-offset-mobile: 72px;  /* Mobile Reserve */
}

/* Reserve unter fixed Header, damit Content nicht drunter läuft */
#main{
  padding-top: var(--hv-header-offset);
}

/* Header fixed */
.hv-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;

  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Inner: Desktop centered */
.hv-header__inner{
  position: relative;          /* Anker für Burger/Dropdown */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  padding: 10px 16px;          /* kompakter, Platz besser genutzt */
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Brand (kann Text oder Bild enthalten) */
.hv-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
}

/* Logo-Bild: nicht zusammendrücken */
.hv-logo-img{
  display: block;
  height: 38px;              /* Desktop Größe */
  width: auto;               /* Proportionen behalten */
  max-width: none;           /* wichtig gegen globale img{max-width:100%} im Flex */
}

/* Falls du zusätzlich Text nutzt (optional) */
.hv-brand__name{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.3px;
  color: #222;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv-brand__dot{ color: #2db84d; }
.hv-brand__tagline{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,.55);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop Navigation */
.hv-nav{
  margin-left: auto;
}

.hv-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 10px;

  flex-wrap: nowrap;          /* 1 Zeile */
  justify-content: flex-end;

  overflow-x: auto;           /* falls zu viele Links */
  -webkit-overflow-scrolling: touch;
}

.hv-nav__list::-webkit-scrollbar{ height: 8px; }
.hv-nav__list::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.08); }

.hv-nav__link{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  padding: 8px 8px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.hv-nav__link:hover{
  background: rgba(45,184,77,.10);
}
.hv-nav__link.is-active,
.hv-nav__link[aria-current="page"]{
  background: rgba(45,184,77,.14);
  color: #0f6c2a;
}

/* CTA Pills */
.hv-nav__cta{ display: flex; }

.hv-nav__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;

  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.08);
}
.hv-nav__pill.is-vodafone{
  background: #e60000;
  color: #fff;
  border-color: rgba(0,0,0,.06);
}
.hv-nav__pill.is-tchibo{
  background: #334A69;
  color: #FDD756;
  border-color: rgba(0,0,0,.06);
}
.hv-nav__pill:hover{ filter: brightness(.96); }

/* Toggle + Burger (Desktop aus) */
.hv-nav-toggle{ position: absolute; left: -9999px; }
.hv-burger{ display: none; }

/* Fokus sichtbar */
.hv-nav__link:focus-visible,
.hv-nav__pill:focus-visible,
.hv-burger:focus-visible{
  outline: 3px solid rgba(45,184,77,.45);
  outline-offset: 2px;
}

/* =========================================================
   MOBILE (<= 980px) — Burger + FULL-WIDTH Dropdown
========================================================= */
@media (max-width: 1200px){
  #main{ padding-top: var(--hv-header-offset-mobile); }

  .hv-header__inner{
    max-width: 100%;
    margin: 0;
    padding: 3px;
  }

  .hv-logo-img{
    height: 26px;
  }
   .hv-nav__pill{
    padding: 2px 4px;     /* stark reduziert */
  font-size: 12px;
  }
}
@media (max-width: 980px){

  /* Reserve unter Header auf Mobile */
  #main{ padding-top: var(--hv-header-offset-mobile); }

  .hv-header__inner{
    max-width: 100%;
    margin: 0;
    padding: 3px;
  }

  /* Logo auf Mobile etwas kleiner, aber weiterhin logo2.gif */
  .hv-logo-img{
    height: 32px;
  }

  /* Burger anzeigen — 3 Striche UNTEREINANDER (nicht nebeneinander) */
  .hv-burger{
    display: inline-flex;
    margin-left: auto;

    width: 48px;
    height: 48px;
    margin-right:2px;

    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;

    align-items: center;
    justify-content: center;

    flex-direction: column;   /* <<< wichtig */
    gap: 6px;                 /* <<< Abstand */
    cursor: pointer;
  }

  .hv-burger span{
    display: block;
    width: 24px;
    height: 3px;
    background: #111;
    border-radius: 3px;
    margin: 0;                /* <<< kein seitliches “nebeneinander” */
  }

  /* Desktop-Nav verstecken (bis Toggle) */
  .hv-nav{
    display: none;
  }

  /* Dropdown: FIXED FULL WIDTH unter dem Header */
  #hv-nav-toggle:checked ~ .hv-nav{
    display: block;

    position: fixed;
    left: 0;
    right: 0;
    width: 100%;

    top: var(--hv-header-offset-mobile);
    z-index: 10000;

    padding: 10px 12px 14px;
  }

  /* Dropdown Box: 100% breit + linksbündig */
  #hv-nav-toggle:checked ~ .hv-nav .hv-nav__list{
    width: 100%;
    margin: 0;
    padding: 12px;

    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 5px;
    box-shadow: 0 14px 30px rgba(0,0,0,.14);

    display: flex;
    flex-direction: column;
    gap: 8px;

    overflow: visible;
  }

  /* Links/Pills: 100% breit, linksbündig */
  #hv-nav-toggle:checked ~ .hv-nav .hv-nav__link,
  #hv-nav-toggle:checked ~ .hv-nav .hv-nav__pill{
    width: 100%;
    display: block;
    text-align: left;
    white-space: normal;
  }

  #hv-nav-toggle:checked ~ .hv-nav .hv-nav__link{
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.04);
    font-size: 15px;
  }

  #hv-nav-toggle:checked ~ .hv-nav .hv-nav__pill{
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 15px;
    justify-content: flex-start;
  }
}

/* =========================================================
   BLOCK D — FIXED FOOTER (1 Zeile, schmal)
========================================================= */
#footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  height: 28px;
  line-height: 28px;

  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(0,0,0,.15);

  padding: 0 10px;
  font-size: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#footer p{
  display: inline;
  margin: 0;
  padding: 0;
}

#footer_copyright::after{
  content: "  |  ";
  color: rgba(0,0,0,.45);
}

#footer a{
  font-size: 12px;
  color: #2b2b2b;
  text-decoration: none;
}
#footer a:hover{
  text-decoration: underline;
}

/* unten Platz lassen */
#content{
  padding-bottom: 40px;
}

/* =========================================================
   BLOCK E — COOKIE CONSENT (Banner + Modal) — ohne Bootstrap
   - kollidiert nicht mit deinem Footer
   - 100% Breite / kein Wackeln
========================================================= */

/* Falls dein Footer FIXED ist (28px), damit Banner nicht drüber liegt */
:root{
  --hv-footer-h: 28px; /* wenn Footer NICHT fixed ist: 0px setzen */
}

.cookie-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  z-index: 10000;
}

.cookie-banner2{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(var(--hv-footer-h) + 10px);
  z-index: 10001;

  display: none;
  max-width: 980px;
  margin: 0 auto;

  background: #3C5A98;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  padding: 14px;
}

.cookie-banner2__title{
  font: 900 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .1px;
}

.cookie-banner2__body{
  margin-top: 10px;
  font: 600 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.90);
}

.cookie-banner2__body p{
  margin: 0 0 10px 0;
}

.cookie-banner2 a{
  color: #a7f3d0;
  text-decoration: none;
}
.cookie-banner2 a:hover{ text-decoration: underline; }

.cookie-banner2__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 10px;
}

.cookie-banner2__links{
  margin-top: 10px;
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  flex-wrap: wrap;
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  opacity: .92;
}

/* Buttons */
.cookie-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font: 800 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  white-space: nowrap;
}

.cookie-btn:focus-visible{
  outline: 3px solid rgba(45,184,77,.55);
  outline-offset: 2px;
}

.cookie-btn--ok{
  background: #16a34a;
  border-color: rgba(0,0,0,.10);
}
.cookie-btn--ok:hover{ filter: brightness(.97); }

.cookie-btn--primary{
  background: #2563eb;
  border-color: rgba(0,0,0,.10);
}
.cookie-btn--primary:hover{ filter: brightness(.97); }

.cookie-btn--ghost{
  background: rgba(255,255,255,.06);
}

/* Modal */
.cookie-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10002;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.cookie-modal__card{
  width: 100%;
  max-width: 560px;
  background: #ffffff;
  color: #111;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 20px 48px rgba(0,0,0,.30);
  overflow: hidden;
}

.cookie-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font: 900 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.cookie-modal__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.cookie-modal__body{
  padding: 14px 16px;
  font: 600 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: rgba(0,0,0,.82);
}

.cookie-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
}

.cookie-toggle input{
  width: 18px;
  height: 18px;
}

.cookie-small{
  margin: 10px 0 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}

.cookie-modal__actions{
  padding: 12px 16px 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 640px){
  .cookie-banner2{
    left: 8px;
    right: 8px;
    bottom: calc(var(--hv-footer-h) + 8px);
    padding: 12px;
  }
  .cookie-banner2__actions{
    justify-content: stretch;
  }
  .cookie-btn{
    width: 100%;
    white-space: normal;
  }
  .cookie-modal__actions{
    grid-template-columns: 1fr;
  }
}


/* CHECK24 Widget: Platz reservieren -> weniger Shift */
#home_1{ min-height: 760px; }
@media (max-width: 700px){
  #home_1{ min-height: 980px; }
}