/* =========================================================
   Trockenbau Karlovic GmbH – Basis-Theme
   ========================================================= */
:root{
  --bg:#ffffff;
  --text:#222;
  --muted:#666;
  --accent:#b10e0e;       /* Rot */
  --accent-ink:#fff;
  --border:#e6e6e6;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --shadow-md:0 8px 20px rgba(0,0,0,.08);
}

/* Reset / Typo */
*{box-sizing:border-box}
html,body{height:100%}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{filter:brightness(.96);text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 16px}

/* Header */
.site-header{ position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--border) }
.header-inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none }
.brand-img{ height:clamp(120px, 12vw, 260px); width:auto; margin-bottom:-14px }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0) }
.nav-toggle{ display:none; appearance:none; border:1px solid var(--border); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer }
.nav-list{ display:flex; gap:18px; list-style:none; margin:0; padding:0; margin-bottom:-2px }
.nav-list a{ color:var(--text); padding:8px 0; display:block; font-weight:500 }
.nav-list a:hover{ color:var(--accent); text-decoration:none }
@media (max-width:900px){
  .brand-img{ margin-bottom:-8px }
  .nav-toggle{ display:inline-flex }
  .nav-list{
    display:none; position:absolute; right:16px; top:calc(100% + 10px);
    background:#fff; border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow-md); padding:12px; min-width:220px; margin-bottom:0;
  }
  .nav-list.open{ display:grid }
}
@media (min-width:901px){ .nav-toggle{display:none} .nav-list{display:flex !important} }

/* Inhalt */
.site-main{padding:32px 0 48px}
.hero{padding:48px 0 24px; border-bottom:1px solid var(--border); margin-bottom:24px}
.hero h1{margin:0 0 8px; font-size:clamp(24px,3vw,34px)}
.hero p{margin:0; color:var(--muted)}

.grid{display:grid; gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .grid.cols-3{grid-template-columns:1fr} }

.card{
  border:1px solid var(--border); border-radius:12px; padding:16px; background:#fff;
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.card h3{margin:0 0 8px}
.card .btn{margin-top:auto; align-self:flex-start}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:600;
}
.btn:hover{filter:brightness(.95)}
.btn.secondary{background:#e9e9e9; color:#222}

/* Footer */
.site-footer{ background:#1c1c1c; color:#eaeaea; border-top:1px solid #111 }
.footer-inner{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start; padding:26px 0 }
.footer-col{ min-width:300px }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.footer-links a{ color:#eaeaea } .footer-links a:hover{ color:#fff }
.footer-brand{ display:flex; gap:18px; align-items:flex-start }
.footer-logo{ height:clamp(120px,14vw,300px); width:auto; margin-top:-14px; filter:drop-shadow(0 1px 0 rgba(255,255,255,.02)) }
.footer-contact a{ color:inherit; text-decoration:underline } .footer-contact a:hover{ color:#fff }
@media (max-width:680px){ .footer-inner{flex-direction:column; gap:20px} }
.copyright{ text-align:center; padding:12px 0; border-top:1px solid #2a2a2a; color:#bdbdbd; font-size:.95rem }

section+section{margin-top:36px}
.linklike{background:none;border:none;padding:0;cursor:pointer;color:inherit}

/* Startseiten-Karten mit Foto */
.card-kontakt, .card-leistungen, .card-trockenbau{ position:relative; overflow:hidden }
.card-kontakt::before, .card-leistungen::before, .card-trockenbau::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.22;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.card-kontakt::before    { background-image:url("/assets/img/handschlag.jpg") }
.card-leistungen::before { background-image:url("/assets/img/flur.jpg") }
.card-trockenbau::before { background-image:url("/assets/img/wohn.jpg") }
.card-kontakt > *, .card-leistungen > *, .card-trockenbau > *{ position:relative; z-index:1 }

/* Zeilenumbruch nur auf kleinen Displays (Startseiten-H1) */
.br-xs{display:none}
@media (max-width:560px){ .br-xs{display:block;height:0;line-height:0} }

/* =========================================================
   STARTSEITEN-SLIDER
   ========================================================= */
.home-slider{
  position:relative;
  width:100%;
  margin:18px auto 28px;
  aspect-ratio:16/7;         /* passt sich dem Container an */
  max-height:520px;
  min-height:260px;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
}
@media (max-width:680px){ .home-slider{ aspect-ratio:16/9; min-height:220px } }

.hs-track{ position:relative; height:100% }
.hs-slide{
  position:absolute; inset:0;
  opacity:0; transform:scale(1.02);
  transition:opacity .7s ease, transform .7s ease;
}
.hs-slide.is-active{ opacity:1; transform:scale(1); z-index:1 }
.hs-slide img{ width:100%; height:100%; object-fit:cover; object-position:center }

/* Text mittig im Bild */
.hs-caption{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0 22px }
.hs-over, .hs-main{ color:var(--accent) }
.hs-over{ margin:0 0 .15em; font-weight:700; letter-spacing:.01em; font-size:clamp(18px,1.2vw + 12px,28px) }
.hs-main{ margin:0; line-height:1.2; font-weight:800; font-size:clamp(28px,3.2vw + 12px,52px) }

/* Für dunkles Bild: weiße Schrift */
.hs-slide.white-text .hs-over, .hs-slide.white-text .hs-main{ color:#fff }

/* leichte Abdunklung für bessere Lesbarkeit */
.hs-slide::after{ content:""; position:absolute; inset:0; pointer-events:none; background:rgba(0,0,0,.25) }
.hs-slide.white-text::after{ background:rgba(0,0,0,.35) }

/* Punkte (Dots) */
.hs-dots{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:10px; z-index:2 }
.hs-dots button{
  width:10px; height:10px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.7);
}
.hs-dots button.is-active{ background:var(--accent) }


/* Über-uns: Bild nach dem Text hübsch darstellen */
.about-media{ margin-top: 16px; }
.about-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.about-media figcaption{
  color: var(--muted);
  font-size: .95rem;
  margin-top: 6px;
  text-align: center; /* nur wenn figcaption genutzt wird */
}


/* Bauelemente – Bild hinter dem Text (20 % sichtbar) */
.be-bg{
  position: relative;
  isolation: isolate;              /* eigener Stacking-Context */
  border-radius: 12px;             /* optional, für weiche Kanten */
  overflow: hidden;                /* falls Bild übersteht */
  padding: 16px;                   /* gleichmäßiger Innenabstand */
}
.be-bg::before{
  content: "";
  position: absolute; inset: 0;
  background: url("/assets/img/Bauelemente/Hintergrund_Tueren.jpg")
              center / cover no-repeat;
  opacity: .2;                     /* 20 % sichtbar */
  z-index: 0;
  pointer-events: none;            /* klicks gehen zum Inhalt */
}
.be-bg > *{
  position: relative;              /* Inhalt über dem Bild */
  z-index: 1;
}

/* Brandschutz – Diagramm */
.brand-structure{
  margin: 16px auto 8px;
  text-align: center;
}
.brand-structure img{
  max-width: 720px;   /* angenehm groß, wird nach unten skaliert */
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.brand-structure figcaption{
  margin-top: 6px;
  font-size: .9rem;
  color: var(--muted);
}


/* Abschnitt mit halbtransparentem Hintergrundbild */
.page-with-bg{
  position: relative;
  isolation: isolate;         /* eigener Stacking-Context */
  padding: 16px 0 24px;
}
.page-with-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);  /* kommt aus dem style-Attribut */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .2;                  /* 20 % sichtbar */
  pointer-events: none;
  z-index: 0;
}
.page-with-bg > *{
  position: relative;
  z-index: 1;                  /* Inhalt über dem Bild */
}


/* === Trockenbau: Abschnitt mit Video-Hintergrund ===================== */
.tb-hero{
  position: relative;
  isolation: isolate;            /* eigener Stacking-Context */
  padding: 28px 0 32px;          /* Platz um den Text */
  overflow: hidden;
}
.tb-hero > .container{ position: relative; z-index: 1; }

/* Videolayer */
.tb-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.tb-hero__video{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* füllt den Bereich */
  opacity: .30;                   /* 30 % sichtbar */
}

/* === Trockenbau: Arbeitsprozess – Bild links, Text rechts =========== */
.tb-prozess{
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 22px;
  align-items: start;
}
.tb-prozess__media img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 820px){
  .tb-prozess{ grid-template-columns: 1fr; }
  .tb-prozess__media{ order: -1; }   /* Bild über dem Text auf Mobile */
}


/* Was-ist-Trockenbau – Banner mit Überschrift auf dem Bild */
.wi-banner{
  position: relative;
  margin: 12px 0 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.wi-banner img{
  width: 100%;
  height: auto;
  aspect-ratio: 16/7;        /* sorgt für gleichmäßige Höhe, passt sich an */
  object-fit: cover;
}

/* rote, zentrierte Überschrift auf dem Bild */
.wi-banner__title{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 20px;
  color: var(--accent);
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(22px, 2.2vw + 12px, 44px);
  text-shadow: 0 1px 10px rgba(255,255,255,.6); /* bessere Lesbarkeit */
}

/* Optional: leichtes Weiß-Overlay, damit Rot überall gut lesbar bleibt */
.wi-banner::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}

/* =======================
   Datenschutz / Consent
   ======================= */
.tk-consent.hidden{ display:none }

.tk-consent{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: grid; place-items: end center; /* Bottom-Sheet auf Mobile */
  padding: 16px; z-index: 9999;
}

/* Box: auf Mobile Bottom-Sheet, auf Desktop zentriert & kleiner */
.tk-consent-box{
  background: #fff;
  width: 100%;
  max-width: 900px;
  border-radius: 14px 14px 0 0;
  padding: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

/* Desktop: mittig statt Bottom-Sheet */
@media (min-width: 860px){
  .tk-consent{ place-items: center }
  .tk-consent-box{ border-radius: 14px; padding: 24px 26px }
}

#tk-consent-title{
  margin: 0 0 10px;
  font-size: clamp(18px, 1.2vw + 14px, 26px);
}

#tk-consent-form p{ margin: 0 0 10px; color: #444 }

.consent-row{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid #eee;
}
.consent-row:first-of-type{ border-top: 0 }
.consent-row input{ transform: translateY(1px) }

.consent-actions{
  display: flex; flex-wrap: wrap;
  gap: 10px; margin-top: 12px;
}
.consent-note{
  color: #666; font-size: .92rem; margin-top: 6px;
}

/* Button-Optik angleichen */
.tk-consent .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:10px 14px; cursor:pointer; font-weight:700;
}
.tk-consent .btn.secondary{
  background:#f0f0f0; color:#222;
}

/* Embed-Container (Karte etc.) */
.tk-map{ margin: 26px 0 8px }
.tk-embed{ position:relative; min-height:420px; border-radius:10px; overflow:hidden; background:#f4f4f4 }
.tk-embed iframe{ display:block; width:100%; height:100%; border:0 }

/* Overlay über gesperrten Inhalten */
.tk-embed .consent-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center;
  background:rgba(255,255,255,.92);
  padding: 18px;
}


/* Honeypot-Feld vollständig verstecken (verhindert die „zusätzliche Zeile“) */
.honeypot{
  position: absolute !important;
  left: -10000px !important;  /* außerhalb des Viewports */
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Runder Login-Button oben rechts – unabhängig vom restlichen Layout */
.auth-badge{
  position: fixed;
  right: 14px;
  top: 12px;
  z-index: 2147483647;         /* ganz oben */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #b10e0e;
  color: #fff;
  font-weight: 800;
  font-family: inherit;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.15);
  cursor: pointer;
  pointer-events: auto;        /* Klicks explizit erlauben */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.auth-badge:hover{ transform: translateY(-1px); filter: brightness(.97); }