/* ==========================================================================
   Klaus Schliebner Unterhaltungselektronik — statischer 1:1-Nachbau
   Werte aus dem Joomla-Original (SP Page Builder / Helix Ultimate, page-1.css).
   Alles lokal: kein CDN, keine Web-Fonts, keine Live-Karten.
   ========================================================================== */

:root{
  --c-header:        #333333;   /* --sppb-header-bg-color */
  --c-text:          #252525;   /* --sppb-text-color */
  --c-bg:            #ffffff;   /* --sppb-bg-color */
  --c-link:          #0345bf;   /* --sppb-link-color */
  --c-link-hover:    #044cd0;   /* --sppb-link-hover-color */
  --c-blue:          #1f5b94;   /* Kartenblau (page-1.css) */
  --c-btn:           #0080FE;
  --c-btn-hover:     #de6906;
  --c-footer:        #171717;   /* --sppb-footer-bg-color */
  --c-footer-link:   #a2a2a2;
  --c-grey-bg:       rgba(0,0,0,.05);
  --c-border:        #cccccc;
  --wrap:            1320px;    /* @media(min-width:1400px){max-width:1320px} */
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.5;
  color:var(--c-text);
  background:var(--c-bg);
  overflow-wrap:break-word;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--c-link); text-decoration:none; }
a:hover, a:focus{ color:var(--c-link-hover); text-decoration:underline; }

h1,h2,h3{ margin:0 0 .6em; font-weight:700; }
p{ margin:0 0 1em; }
.u{ text-decoration:underline; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:15px; }

/* ---------- Header (#333333, sticky, Logo links / Menü rechts) ---------- */
.site-header{
  background:var(--c-header);
  color:#fff;
  position:sticky;
  top:0;
  z-index:99;
}
.header-inner{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.logo{ display:flex; align-items:baseline; gap:10px; }
.brand{
  color:#fff;
  font-size:22px;
  text-decoration:none;
}
.brand:hover, .brand:focus{ color:#fff; text-decoration:none; }
.logo-slogan, .site-header .slogan{ color:#fff; padding-left:10px; font-size:14px; }

.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.25rem 1.1rem; }
.site-nav a{
  color:#fff;
  font-family:Arial, sans-serif;
  font-size:16px;
  text-decoration:none;
  white-space:nowrap;
  padding:.25rem 0;
}
.site-nav a:hover,
.site-nav a:focus{ color:#fff; text-decoration:underline; }
.site-nav a[aria-current="page"]{ text-decoration:underline; }

/* Anker treffen unter dem sticky Header (60px) auf, nicht dahinter */
#unternehmen, #kontakt{ scroll-margin-top:70px; }

/* ---------- Hero (section-id-1651251911325): laden.jpg, Parallax, Box in 8/12 ---------- */
.hero{
  position:relative;
  height:600px;
  max-height:600px;
  padding:70px 0 50px;
  color:#fff;
  background-image:url("../img/laden.jpg");
  background-repeat:no-repeat;
  background-size:contain;
  background-attachment:fixed;      /* Parallax wie Original */
  /* Original lädt SP-PB-Parallax (data-sppb-parallax="on") → Bild oben am Viewport,
     effektiv 50% 9px. Reines CSS "0 100%" (page-1.css) verankert es am Viewport-
     UNTEN → auf hohen Fenstern entsteht ein großer weißer Streifen überm Foto. */
  background-position:50% 9px;
}
.hero-row{
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:15px;
  height:100%;
  display:flex;
  align-items:center;              /* sppb-align-center */
}
.hero-side{ flex:0 0 16.6667%; max-width:16.6667%; }
.hero-mid{ flex:0 0 66.6667%; max-width:66.6667%; }

.hero-box{
  background-color:rgba(0,0,0,.70);
  padding:20px;
  margin:50px;
  text-align:center;
}
.hero-title{ font-size:36px; font-weight:500; line-height:1.2; margin:0 0 30px; }
.hero-sub{ font-size:32px; font-weight:100; line-height:1.2; margin:0 0 30px; }

.divider{ border:0; border-bottom:1px solid var(--c-border); margin:30px 0; }

/* ---------- Intro (section-id-1651256152882): grau, weiß + blau 50/50 ---------- */
.section--intro{ background-color:var(--c-grey-bg); border-radius:10px; padding:50px 0; }

.row{ display:flex; flex-wrap:wrap; }
.row--intro{ gap:30px; }                              /* Abstand zwischen weißer und blauer Karte */
.row--intro > .col{ flex:0 0 calc(50% - 15px); max-width:calc(50% - 15px); }

.card{ padding:30px; }
.card--white{ background-color:#fff; border:2px solid var(--c-border); }
.row--intro .card--white{ border-radius:0; }          /* Original: border-radius:10 (ungültig) */
.row--intro .card--blue{
  background-color:var(--c-blue);
  color:#fff;
  border-radius:10px;
  text-align:center;
  display:flex;                /* Text vertikal zentrieren */
  flex-direction:column;
  justify-content:center;
}
.row--intro .card--blue > .reveal{ width:100%; }
.card--blue a{ color:#fff; text-decoration:underline; }
.card--blue .lead,
.card--blue .note{ font-size:16pt; }                  /* „Wir freuen uns …" = 16pt wie der Einleitungssatz */
.card--blue .phone{ font-size:24pt; line-height:1.2; margin-top:1.5em; }

/* ---------- Unternehmen (#unternehmen): kfz.jpg + helles Overlay ---------- */
.section--unternehmen{
  position:relative;
  padding:50px 0;
  background-image:url("../img/kfz.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;      /* Parallax wie im Original (#unternehmen data-sppb-parallax="on") */
  background-position:0 0;
}
.section--unternehmen::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:rgba(255,255,255,.40);
  pointer-events:none;
}
.section--unternehmen > .wrap{ position:relative; z-index:1; }

.profile-card{
  background:#fff;
  border:2px solid var(--c-border);
  border-radius:10px;
  padding:30px;
  margin:0 0 50px;
}
.profile-card h2,
.profile-card h3{ text-align:center; font-weight:100; margin:0 0 30px; }
.profile-text{ text-align:center; }

.row--boxes{ gap:30px; }                                   /* Original: 15px Spalten-Gutter je Seite → 30px zwischen den Karten */
.row--boxes > .col{ flex:0 0 calc(50% - 15px); max-width:calc(50% - 15px); }
.row--boxes .card--white{ background:#fff; border:2px solid var(--c-border); border-radius:10px; padding:30px; }
.row--boxes h3{ text-align:center; font-weight:100; margin:0 0 30px; }

.list{ margin:0 0 1em; padding-left:1.2rem; }
.list li{ margin:.25rem 0; }

/* ---------- Kontakt (#kontakt): 3 gleich breite Karten, keine Karte ---------- */
.section--kontakt{ padding:50px 0; }
.section--kontakt > .wrap > h2{ text-align:center; font-weight:100; margin:0 0 30px; }

.row--kontakt{ gap:30px; align-items:stretch; }
.row--kontakt > .col--feature{ flex:0 0 calc(33.333% - 20px); max-width:calc(33.333% - 20px); }

.feature{
  height:100%;
  display:flex;
  flex-direction:column;
  text-align:center;
  background:#fff;
  border:2px solid var(--c-border);
  border-radius:10px;
  padding:30px 24px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.feature:hover{
  transform:translateY(-3px);
  border-color:var(--c-blue);
  box-shadow:0 8px 20px rgba(31,91,148,.15);
}
.feature__icon{
  color:var(--c-blue);
  line-height:1;
  width:60px; height:60px;
  margin:0 auto 16px;
  border-radius:50%;
  background:rgba(31,91,148,.08);
  display:flex; align-items:center; justify-content:center;
}
.feature__icon svg{ display:block; }
.feature h3{
  color:#4A4A4A;
  font-weight:700; font-size:16px; line-height:22px;
  margin:0 0 12px;
  padding-bottom:12px;
  position:relative;
}
.feature h3::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  width:36px; height:2px;
  transform:translateX(-50%);
  background:var(--c-blue);
}
.feature p{ margin:0; line-height:1.7; }
.feature p a{ color:var(--c-link); text-decoration:none; }
.feature p a:hover{ color:var(--c-link-hover); text-decoration:underline; }

/* ---------- Footer (#171717) ---------- */
.site-footer{
  background:var(--c-footer);
  color:#fff;
  padding:1.5rem 0;
  font-size:14px;
}
.site-footer a{ color:var(--c-footer-link); }
.site-footer a:hover{ color:#fff; }
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.site-footer b{ color:#fff; }

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.section--legal{ padding:50px 0; }
.section--legal .legal-inner{ max-width:900px; }
.section--legal h1{ font-size:30px; }
.section--legal h2{ font-size:22px; margin-top:1.6em; }
.section--legal h3{ font-size:18px; margin-top:1.3em; }

/* ---------- „Nach oben"-Button ---------- */
.to-top{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:200;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:var(--c-blue);
  color:#fff;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.to-top.is-visible{ opacity:1; visibility:visible; }
.to-top svg{ width:20px; height:20px; display:block; margin:auto; }

/* ---------- Reveal (Original: animate.css „fadeInRight") ---------- */
/* Die Einblendung schiebt Elemente um 30px nach rechts. Ohne Clipping entsteht dabei eine
   horizontale Scrollbar. `clip` + `overflow-clip-margin` verhindert das Scrollen, ohne die
   Karte während der Animation anzuschneiden (kein Scroll-Container → sticky Header bleibt). */
.hero,
.section--intro,
.section--unternehmen,
.section--kontakt{ overflow-x:clip; overflow-clip-margin:40px; }
@supports not (overflow: clip){
  .hero,
  .section--intro,
  .section--unternehmen,
  .section--kontakt{ overflow-x:hidden; }
}

.js-reveal .reveal{ opacity:0; transform:translateX(30px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
/* Kontaktkarten: nach dem Einblenden kurze Hover-Transition (nicht die 0.8s des Reveals) */
.js-reveal .feature.is-visible{ transition:opacity .3s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .to-top{ transition:none; }
}
@media print{ .reveal{ opacity:1 !important; transform:none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .row--intro > .col,
  .row--boxes > .col{ flex:0 0 100%; max-width:100%; }
  .row--intro{ gap:1.5rem; }                          /* gestapelt: gap statt margin-top (nicht doppelt) */
  .row--boxes{ gap:1.5rem; }

  .hero{ height:auto; min-height:350px; padding:40px 0; background-attachment:scroll; }
  .hero-box{ margin:0; }

  .row--kontakt{ gap:1.5rem; }
  .row--kontakt > .col--feature{ flex:0 0 100%; max-width:100%; }
}
@media (max-width: 575.98px){
  .hero-title{ font-size:24px; }
  .hero-sub{ font-size:18px; }
  .brand{ font-size:18px; }
}