/* ═══════════════════════════════════════════
   SCHÖNESEIFFEN – style.css
   Externe Stylesheet-Datei für einfache Anpassungen
   Stand: April 2026
   ═══════════════════════════════════════════ */

/* ── LOKALE FONTS (DSGVO-konform, kein Google-CDN) ──
   Font-Dateien liegen im Ordner /fonts/
   ══════════════════════════════════════════════════ */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-serif-display-v17-latin-regular.woff2') format('woff2');
}
:root {
  --ff: 'DM Sans', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fd: 'DM Serif Display', Georgia, 'Times New Roman', serif;
}


/* ═══ FARBEN (hier zentral anpassen) ═══ */
:root {
  --r:   #C22828;   /* Hauptrot */
  --r2:  #9B1E1E;   /* Rot dunkel */
  --r3:  #E84444;   /* Rot hell / Akzent */
  --g9:  #141414;   /* Fast Schwarz */
  --g8:  #1E1E1E;   /* Dunkelgrau */
  --g7:  #333;
  --g6:  #555;
  --g5:  #777;
  --g4:  #999;
  --g3:  #BBB;
  --g2:  #DDD;
  --g1:  #EFEFEF;
  --g0:  #F7F7F7;   /* Hintergrund hell */
  --w:   #fff;
}


/* ═══ RESET & BASIS ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { font-family: var(--ff); color: var(--g8); background: var(--w); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }


/* ═══ NAVIGATION ═══ */
.nav { list-style: none; position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--g1); height: 64px; display: flex; align-items: center; }
.nav-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { height: 42px; }
.nm { display: flex; align-items: center; gap: 4px; }
.nm a { padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--g6); border-radius: 6px; transition: .2s; }
.nm a:hover, .nm a.on { color: var(--r); background: rgba(194,40,40,.06); }
.nm .tel { background: var(--r) !important; color: var(--w) !important; font-weight: 700; border-radius: 99px !important; padding: 9px 20px !important; box-shadow: 0 2px 12px rgba(194,40,40,.25); }
.nm .tel:hover { background: var(--r2) !important; }

/* Dropdown */
.dd { position: relative; }
.dd > .sub { position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; background: var(--w); border: 1px solid var(--g1); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.1); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s; z-index: 110; }
.dd:hover > .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sub a { display: block; padding: 9px 14px; font-size: 13px; border-radius: 6px; }
.sub a:hover { background: var(--g0); color: var(--r); }

/* Burger / Mobile */
.bur { display: none; border: 0; background: 0; cursor: pointer; width: 32px; height: 32px; position: relative; }
.bur span { display: block; width: 20px; height: 2px; background: var(--g8); position: absolute; left: 6px; transition: .3s; }
.bur span:nth-child(1) { top: 10px; } .bur span:nth-child(2) { top: 16px; } .bur span:nth-child(3) { top: 22px; }
.bur.on span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.bur.on span:nth-child(2) { opacity: 0; }
.bur.on span:nth-child(3) { top: 16px; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .bur { display: block; }
  .nm { position: fixed; top: 64px; left: 0; right: 0; background: var(--w); flex-direction: column; align-items: stretch; padding: 12px 20px; gap: 2px; transform: translateX(100%); transition: .35s; z-index: 99; border-bottom: 1px solid var(--g1); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
  .nm.open { transform: translateX(0); }
  .nm a { font-size: 15px; padding: 12px 14px; }
  .nm .tel { text-align: center; margin-top: 6px; }
  .dd > .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px; max-height: 0; overflow: hidden; transition: max-height .3s; }
  .dd.open > .sub { max-height: 300px; }
}


/* ═══ HERO ═══ */
.hero { padding: 120px 24px 80px; background: var(--g9); position: relative; overflow: hidden; min-height: 92vh; display: flex; align-items: center; }
.hero::before { content: ''; position: absolute; inset: 0; background: url('../img/slide1.jpg') center/cover; opacity: .18; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(20,20,20,.95) 30%, rgba(20,20,20,.6)); }
.hero-in { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero-sub { color: var(--r3); font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
.hero h1 { font-family: var(--fd); font-size: clamp(36px, 5.5vw, 64px); color: var(--w); line-height: 1.1; margin-bottom: 20px; }
.hero h1 span { color: var(--r3); }
.hero-p { color: var(--g3); font-size: 16px; line-height: 1.7; margin-bottom: 32px; max-width: 480px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-img { position: relative; }
.hero-img img { border-radius: 16px; width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.hero-badge { position: absolute; top: -12px; right: -12px; background: var(--r); color: var(--w); padding: 14px 18px; border-radius: 12px; font-family: var(--fd); font-size: 28px; line-height: 1; box-shadow: 0 4px 16px rgba(194,40,40,.4); }
.hero-badge small { display: block; font-family: var(--ff); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }

@media (max-width: 800px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-img { max-width: 420px; }
  .hero-badge { top: -8px; right: -4px; font-size: 22px; padding: 10px 14px; }
}


/* ═══ BUTTONS ═══ */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 99px; font-weight: 700; font-size: 15px; font-family: var(--ff); border: none; cursor: pointer; transition: .25s; }
.btn-r { background: var(--r); color: var(--w); box-shadow: 0 4px 20px rgba(194,40,40,.35); }
.btn-r:hover { background: var(--r2); transform: translateY(-2px); }
.btn-o { background: transparent; color: var(--w); border: 1.5px solid rgba(255,255,255,.25); }
.btn-o:hover { border-color: var(--w); }
.btn-g { background: var(--g0); color: var(--g7); border: 1px solid var(--g2); }
.btn-g:hover { background: var(--g1); }


/* ═══ SECTIONS ═══ */
.sec { padding: 80px 24px; }
.sec-in { max-width: 1200px; margin: 0 auto; }
.sec-tag { color: var(--r); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.sec-h { font-family: var(--fd); font-size: clamp(26px, 3.5vw, 40px); line-height: 1.15; margin-bottom: 12px; }
.sec-p { color: var(--g5); font-size: 15px; max-width: 520px; line-height: 1.7; }


/* ═══ PAGE HEADER (Unterseiten) ═══ */
.pg-hd { padding: 110px 24px 50px; background: var(--g9); text-align: center; position: relative; overflow: hidden; }
.pg-hd-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .12; }
.pg-hd::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,20,20,.6), rgba(20,20,20,.95)); }
.pg-hd * { position: relative; z-index: 2; }
.pg-hd h1 { font-family: var(--fd); font-size: clamp(30px, 4.5vw, 50px); color: var(--w); margin-bottom: 8px; }
.pg-hd p { color: var(--g4); font-size: 15px; }
.bc { font-size: 13px; margin-bottom: 10px; }
.bc a { color: var(--r3); }
.bc span { color: var(--g5); }


/* ═══ SERVICE CARDS ═══ */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; margin-top: 40px; }
.svc { background: var(--w); border: 1px solid var(--g1); border-radius: 14px; overflow: hidden; transition: .3s; display: block; }
.svc:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); transform: translateY(-4px); }
.svc-img { height: 200px; overflow: hidden; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }
.svc:hover .svc-img img { transform: scale(1.06); }
.svc-bd { padding: 24px; }
.svc-bd h3 { font-family: var(--fd); font-size: 20px; margin-bottom: 8px; }
.svc-bd p { color: var(--g5); font-size: 14px; line-height: 1.65; margin-bottom: 14px; }
.svc-lk { color: var(--r); font-weight: 600; font-size: 13px; }
.svc-lk::after { content: ' →'; }

@media (max-width: 800px) { .svc-grid { grid-template-columns: 1fr; } }


/* ═══ DETAIL GRID ═══ */
.det { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 40px; }
.det.rv .det-txt { order: -1; }
.det-img { border-radius: 14px; overflow: hidden; }
.det-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.det-txt h2 { font-family: var(--fd); font-size: clamp(22px, 3vw, 32px); margin-bottom: 14px; }
.det-txt p { color: var(--g6); font-size: 15px; line-height: 1.75; margin-bottom: 12px; }
.det-txt ul { margin: 14px 0 20px; list-style: none; }
.det-txt ul li { padding: 6px 0 6px 20px; position: relative; color: var(--g6); font-size: 14px; border-bottom: 1px solid var(--g0); }
.det-txt ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--r); }

@media (max-width: 800px) { .det { grid-template-columns: 1fr; } .det.rv .det-txt { order: 0; } }


/* ═══ BEWERTUNGEN ═══ */
.rev-sec { background: var(--g9); color: var(--w); }
.rev-sec .sec-tag { color: var(--r3); }
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 36px; }
.rev { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 28px; }
.rev-st { color: var(--r3); font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; }
.rev q { display: block; color: var(--g3); font-size: 14px; line-height: 1.7; font-style: italic; margin-bottom: 14px; }
.rev cite { font-style: normal; font-weight: 700; font-size: 13px; }


/* ═══ CTA ═══ */
.cta { background: var(--r); padding: 60px 24px; text-align: center; }
.cta h2 { font-family: var(--fd); font-size: clamp(24px, 4vw, 38px); color: var(--w); margin-bottom: 8px; }
.cta p { color: rgba(255,255,255,.75); margin-bottom: 24px; }
.cta-tel { display: inline-block; background: var(--w); color: var(--r); padding: 16px 36px; border-radius: 99px; font-family: var(--fd); font-size: 22px; box-shadow: 0 4px 20px rgba(0,0,0,.15); transition: .25s; }
.cta-tel:hover { transform: translateY(-2px) scale(1.02); }


/* ═══ KONTAKT ═══ */
.cb { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.cc { background: var(--g0); border-radius: 14px; padding: 36px; text-align: center; }
.cc h3 { font-family: var(--fd); font-size: 22px; margin-bottom: 8px; }
.cc p { color: var(--g5); font-size: 14px; margin-bottom: 20px; }
.c-tel { font-family: var(--fd); font-size: 24px; color: var(--r); }
@media (max-width: 600px) { .cb { grid-template-columns: 1fr; } }


/* ═══ TEAM ═══ */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 32px; }
.tc { background: var(--g0); border-radius: 12px; padding: 28px 20px; text-align: center; }
.tc h4 { font-family: var(--fd); font-size: 18px; margin-bottom: 4px; }
.tc span { font-size: 13px; color: var(--g5); }


/* ═══ TAGS ═══ */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { background: var(--g0); border: 1px solid var(--g1); padding: 6px 16px; border-radius: 99px; font-size: 13px; color: var(--g6); }


/* ═══ FOOTER ═══ */
.ft { background: var(--g9); color: rgba(255,255,255,.6); padding: 48px 24px 0; }
.ft-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.ft h4 { color: var(--w); font-family: var(--fd); font-size: 18px; margin-bottom: 12px; }
.ft-lk { display: flex; flex-direction: column; gap: 6px; }
.ft-lk a { font-size: 14px; transition: .2s; }
.ft-lk a:hover { color: var(--r3); }
.ft-bt { border-top: 1px solid rgba(255,255,255,.06); margin-top: 32px; padding: 18px 0; font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ft-bt a { margin-left: 12px; }
.ft-bt a:hover { color: var(--r3); }
@media (max-width: 700px) { .ft-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ft-in { grid-template-columns: 1fr; } }


/* ═══ GO TO TOP ═══ */
.top { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; background: var(--r); color: var(--w); border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(194,40,40,.3); opacity: 0; transform: translateY(16px); transition: .3s; z-index: 90; }
.top.on { opacity: 1; transform: translateY(0); }
.top:hover { background: var(--r2); transform: translateY(-3px) !important; }


/* ═══ LEGAL PAGES ═══ */
.legal { max-width: 780px; margin: 0 auto; padding: 40px 24px 60px; }
.legal h2 { font-family: var(--fd); font-size: 22px; margin: 28px 0 10px; }
.legal h3 { font-size: 16px; font-weight: 600; margin: 20px 0 6px; }
.legal p, .legal li { color: var(--g6); font-size: 14px; line-height: 1.75; margin-bottom: 8px; }
.legal ul { margin: 8px 0 12px 20px; list-style: disc; }
.legal table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.legal td { padding: 6px 10px; border-bottom: 1px solid var(--g1); font-size: 14px; color: var(--g6); }


/* ═══ COOKIE BANNER ═══ */
.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--g9);
  color: rgba(255,255,255,.8);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  z-index: 200;
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
  transform: translateY(100%);
  transition: transform .4s ease;
}
.cookie-bar.show {
  transform: translateY(0);
}
.cookie-bar p {
  max-width: 600px;
  line-height: 1.6;
  margin: 0;
}
.cookie-bar a {
  color: var(--r3);
  text-decoration: underline;
}
.cookie-ok {
  background: var(--r);
  color: var(--w);
  border: 0;
  padding: 10px 24px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--ff);
  transition: .2s;
  white-space: nowrap;
}
.cookie-ok:hover {
  background: var(--r2);
}