/* =====================================================
   Custom-Styles für die statische Seite
   - Natives Google-Bewertungs-Badge (Design angelehnt an das
     ursprüngliche Trustindex-Widget – ohne externe Aufrufe)
   - Video-Consent-Gate (Vimeo lädt erst nach Klick + Einwilligung)
   ===================================================== */

/* <picture>-Wrapper layout-transparent machen, damit das <img> sich exakt
   wie zuvor verhält (wichtig für absolut positionierte Bilder, z. B. Angebote/Vita) */
picture {
   display: contents;
}

/* ---------- Google-Bewertungs-Badge ---------- */
.google-badge {
   height: auto !important;
   transform: none !important;
   min-width: 0;
   max-width: 320px;
   margin: 0 auto 2em;
}

.footers .google-badge {
   margin-top: 2em;
}

.google-reviews-badge {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 7px;
   padding: 16px 26px;
   background: #fff;
   border: 1px solid #d9d9d9;
   border-radius: 12px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
   text-decoration: none;
   color: #000;
   font-family: 'Inter 24pt', Arial, sans-serif;
   transition: transform .3s ease, box-shadow .3s ease;
}

.google-reviews-badge:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

.grb-row {
   display: flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
}

.grb-logo {
   width: 20px;
   height: 20px;
   margin-right: 6px;
   flex: 0 0 auto;
   display: block;
}

.grb-logo svg {
   width: 100%;
   height: 100%;
   display: block;
}

.grb-stars {
   display: inline-flex;
   align-items: center;
}

.grb-stars svg {
   width: 16.8px;
   height: 16.8px;
   margin-right: 1px;
   display: block;
}

.grb-text {
   font-weight: 700;
   font-size: 15px;
   color: #000;
   letter-spacing: .2px;
}

.grb-sep {
   margin: 0 7px;
   font-weight: 400;
   opacity: .55;
}

/* ---------- Video-Consent-Gate (Vimeo) ---------- */
.video-consent {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 16px;
   padding: 28px;
   box-sizing: border-box;
   background: #fff;
   border: 1px solid #e6e6e6;
   border-radius: 10px;
   box-shadow: 0 6px 28px rgba(0, 0, 0, .14);
   font-family: 'Inter 24pt', Arial, sans-serif;
   color: #333;
}

.video-consent h3 {
   margin: 0;
   font-size: 1.15em;
   color: #202124;
}

.video-consent p {
   margin: 0;
   font-size: .9em;
   max-width: 48ch;
   line-height: 1.55;
   color: #555;
}

.video-consent .button_main {
   cursor: pointer;
}

.video-consent-remember {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: .82em;
   color: #666;
   cursor: pointer;
}

.video-consent-remember input {
   width: 16px;
   height: 16px;
   cursor: pointer;
}

.video-consent-links {
   font-size: .8em;
   color: #888;
}

.video-consent-links a {
   color: #0a66c2;
   text-decoration: underline;
}

/* Hinweis-Toast beim Zurücksetzen der Einwilligung */
.scm-toast {
   position: fixed;
   left: 50%;
   bottom: 28px;
   transform: translateX(-50%);
   z-index: 100000;
   background: #202124;
   color: #fff;
   padding: 12px 22px;
   border-radius: 8px;
   font-family: 'Inter 24pt', Arial, sans-serif;
   font-size: .9em;
   box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
   opacity: 0;
   transition: opacity .3s ease;
   pointer-events: none;
}

.scm-toast.show {
   opacity: 1;
}

/* Kontaktadresse semantisch (<address>) ohne Kursiv-Default */
address.contact-address {
   font-style: normal;
   display: block;
}

/* ---------- Responsive Feinschliff ---------- */
.angebot img {
   object-fit: cover;
}

#footer-bottom .navbar,
#footer-bottom .navbar a {
   font-size: clamp(10px, 1.1vw, 11px);
}

@media (max-width: 766px) {
   html,
   body {
      overflow-x: hidden;
   }

   section {
      padding-top: clamp(36px, 9vw, 58px);
      padding-bottom: clamp(36px, 9vw, 58px);
   }

   #home {
      height: auto !important;
      min-height: 0;
   }

   #logo_full {
      padding: 14px 0 !important;
   }

   #logo_full img {
      height: clamp(42px, 11vw, 50px);
   }

   #h-right {
      height: clamp(340px, 49vh, 420px) !important;
      min-height: 0 !important;
      margin-top: clamp(70px, 20vw, 82px) !important;
   }

   #h-left {
      padding: 22px 24px 34px !important;
   }

   .alt .start_wrap {
      padding: 26px 0 34px !important;
   }

   .start_wrap .highlighted {
      font-size: clamp(28px, 7.6vw, 36px) !important;
      line-height: 1.18;
      margin-bottom: .7em !important;
   }

   .start_wrap h1 {
      font-size: clamp(13px, 3.6vw, 16px);
      line-height: 1.45;
      margin-bottom: 1.2em;
   }

   #home p {
      max-width: 32ch;
   }

   #links {
      margin-top: 10px;
   }

   #links ul {
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      gap: 18px;
      justify-content: center;
   }

   nav ul li {
      width: auto;
   }

   .button_main,
   .scm-modal button {
      max-width: 100%;
      min-height: 44px;
      padding: .95em 1.05em;
      white-space: normal;
      line-height: 1.2;
      text-align: center;
   }

   .contents p,
   #angebot p,
   #angebot .text-justify,
   .angebot_section p {
      text-align: left !important;
      text-align-last: auto !important;
      hyphens: auto;
   }

   .contents .highlighted,
   #angebot .highlighted,
   #kontakt .highlighted,
   .angebot_section .highlighted {
      text-align: center;
      text-align-last: center;
   }

   .highlighted:not(#home .highlighted) {
      font-size: clamp(28px, 7.4vw, 34px) !important;
      line-height: 1.22;
   }

   .spacer-top {
      margin-top: 2em !important;
   }

   #angebote {
      margin-top: 34px;
   }

   .angebot {
      min-height: 255px;
      padding-bottom: 0;
   }

   .angebot_inner {
      padding: 56px 26px;
   }

   .angebot h3 {
      font-size: clamp(16px, 4.6vw, 19px);
      line-height: 1.35;
   }

   #kontakt {
      padding-top: 48px;
   }

   div#footer-bottom * {
      font-size: 10px;
      line-height: 1.4;
   }

   .google-reviews-badge {
      padding: 14px 22px;
   }

   #video .video-container {
      width: min(92vw, 420px);
      height: auto;
      max-height: calc(100dvh - 96px);
      padding: 0;
   }

   #video .scm-vimeo {
      height: auto;
      min-height: 0;
   }

   #video .video-consent {
      position: relative;
      inset: auto;
      max-height: calc(100dvh - 96px);
      overflow-y: auto;
      gap: 14px;
      padding: 26px 20px 24px;
      justify-content: flex-start;
   }

   #video .video-consent h3 {
      font-size: 1.05rem;
      line-height: 1.35;
      letter-spacing: .18em;
   }

   #video .video-consent p {
      font-size: .95rem;
      line-height: 1.5;
      max-width: 31ch;
   }

   #video .video-consent .button_main {
      width: 100%;
      max-width: 300px;
      margin-top: 6px;
      font-size: .95rem;
      letter-spacing: .08em;
   }

   #video .video-consent-remember {
      font-size: .95rem;
      line-height: 1.4;
      justify-content: center;
   }

   #video .video-consent-links {
      font-size: .9rem;
      line-height: 1.35;
      max-width: 28ch;
   }
}

/* Overlays bleiben geschlossen, auch wenn spaetere globale section-Regeln greifen. */
.angebot_section {
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 1000000000;
   background-color: #fff;
   transform: translate(-50%, -50%);
   padding: 0;
   padding-bottom: 0 !important;
   overflow: hidden;
   overflow-y: auto;
   display: none !important;
}

.angebot_section.is-open {
   display: block !important;
}

.angebot_section .tagline {
   margin-top: max(70px, 5vw);
}

.angebot_section .container {
   max-width: 100%;
}

.angebot_section p {
   margin-bottom: 20px;
}

.angebot_section .button_main {
   margin-top: max(3vw, 50px);
}

.angebot_ink {
   margin-top: -10px;
}

.angebot_ink img {
   width: 33%;
   height: auto;
   margin-bottom: 3vw;
}

.quote {
   background-color: var(--ricepaper);
   padding: var(--sectionpadding) 0;
   padding-top: calc(var(--sectionpadding) * .7);
   margin-top: calc(var(--sectionpadding) * .4);
   margin-bottom: 0;
   z-index: -1;
}

.close_wrap {
   position: sticky;
   top: 0;
   z-index: 1000000000;
}

.angebot_close {
   position: absolute;
   top: -1px;
   right: -1px;
   z-index: 100000000;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 3.5vw;
   height: 3.5vw;
   min-width: 42px;
   min-height: 42px;
   max-width: 64px;
   max-height: 64px;
   cursor: pointer;
   background-color: var(--yellow);
   transition: background .4s ease;
}

.angebot_close::before,
.angebot_close::after {
   content: '';
   position: absolute;
   display: block;
   width: 42%;
   height: 2px;
   background: var(--couch);
   transform-origin: center;
   transition: background .4s ease;
}

.angebot_close::before {
   transform: rotate(45deg);
}

.angebot_close::after {
   transform: rotate(-45deg);
}

@media (max-width: 574px) {
   .angebot_section {
      width: calc(100vw - 20px) !important;
      height: calc(100dvh - 20px);
   }

   #footer-bottom .navbar {
      height: auto;
      min-height: 0;
      flex-direction: column;
      gap: 9px;
      padding: 4px 0;
   }

   #footer-bottom .navbar a {
      display: inline-block;
      margin: 0 !important;
      line-height: 1.5;
      text-align: center;
   }
}

@media (min-width: 575px) {
   .angebot_section {
      width: min(82vw, 1120px) !important;
      height: min(80vh, 900px);
   }

   .angebot_section > .container,
   .angebot_section .quote > .container {
      width: min(100% - 96px, 760px);
      max-width: 760px;
      min-width: 0;
      margin-left: auto;
      margin-right: auto;
   }
}

@media (min-width: 1200px) {
   .angebot_section > .container,
   .angebot_section .quote > .container {
      width: min(100% - 140px, 820px);
      max-width: 820px;
   }
}

@media (max-width: 380px) {
   .google-reviews-badge {
      padding: 13px 18px;
   }

   .grb-text {
      font-size: 14px;
   }

   #links ul {
      gap: 14px;
   }
}