/*
 Theme Name:   Twenty Twenty-Five Child
 Theme URI:    https://kfz-hambuechen.de
 Description:  Child Theme für Twenty Twenty-Five (Landingpage KFZ-Hambüchen)
 Author:       KFZ-Hambüchen
 Author URI:   https://kfz-hambuechen.de
 Template:     twentytwentyfive
 Version:      1.0.0
 Text Domain:  twentytwentyfive-child
*/

/* === Layout & Spacing =================================================== */
:root{
  --kfz-primary:#cc0000; --kfz-dark:#1f1f1f; --kfz-light:#f7f7f7; --kfz-border:#ececec;
  --kfz-radius:14px; --kfz-shadow:0 6px 18px rgba(0,0,0,.08);
}

.section{padding:72px 20px; margin:0 auto; max-width:1200px;}
.section .wp-block-heading{margin:0 0 24px; letter-spacing:.2px;}
.section p{margin:0 0 12px;}
/* dezente Abschnittstrennung */
.section + .section{border-top:1px solid var(--kfz-border);}
.section:nth-of-type(odd){background:transparent;}
.section:nth-of-type(even){background:#fff; border-top:none;}

/* === Hero kompakter & lesbarer ========================================= */
.wp-block-group.hero{
  position:relative; padding:140px 20px; text-align:center; color:#fff;
  background-size:cover; background-position:center;
  background-image:url('https://xn--kfz-hambchen-klb.de/wp-content/uploads/2025/08/ham-hero2-scaled.webp');
}
.wp-block-group.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.35));}
.wp-block-group.hero>*{position:relative;z-index:1}
.wp-block-group.hero h1{font-weight:800;margin-bottom:10px}
.wp-block-group.hero p{opacity:.95;margin-bottom:18px}
.wp-block-group.hero .wp-block-button__link{background:var(--kfz-primary);border-radius:12px;padding:14px 26px;font-weight:700}

/* === Leistungen als moderne Karten ===================================== */
.section.features ul{
  list-style:none; padding:0; margin:16px 0 0;
  display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.section.features li{
  background:#fff; border-radius:var(--kfz-radius); padding:16px 18px;
  box-shadow:var(--kfz-shadow); transition:transform .25s ease, box-shadow .25s ease;
  display:flex; align-items:center; gap:12px; min-height:64px;
}
.section.features li:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.12);}
.section.features li::marker{content:""}

/* --- ICONS: Basis (über Pseudo-Element) --- */
.section.features li::before{
  content:"";
  flex:0 0 45px; height:45px;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  background-color:transparent; border:none;
}

/* --- ICONS: Bild-URLs nach Reihenfolge der Liste -----------------------
   -> Diese 7 URLs bitte durch deine echten Mediathek-Links ersetzen
------------------------------------------------------------------------- */

/* 1) HU & AU täglich */
.section.features li:nth-child(1)::before{
  background-image:url('https://xn--kfz-hambchen-klb.de/wp-content/uploads/2025/08/ham-hu.webp');
}

/* 2) Inspektion nach Herstellervorgaben */
.section.features li:nth-child(2)::before{
  background-image:url('https://xn--kfz-hambchen-klb.de/wp-content/uploads/2025/08/ham-inspektion.png');
}

/* 3) Bremsenservice */
.section.features li:nth-child(3)::before{
  background-image:url('https://xn--kfz-hambchen-klb.de/wp-content/uploads/2025/08/ham-bremsen.webp');
}

/* 4) Reifenservice */
.section.features li:nth-child(4)::before{
  background-image:url('https://xn--kfz-hambchen-klb.de/wp-content/uploads/2025/08/ham-reifenservice.webp');
}

/* 5) Klimawartung & Instandsetzung */
.section.features li:nth-child(5)::before{
  background-image:url('https://xn--kfz-hambchen-klb.de/wp-content/uploads/2025/08/ham-klima.webp');
}

/* 6) Karosserie & Lackierung */
.section.features li:nth-child(6)::before{
  background-image:url('https://xn--kfz-hambchen-klb.de/wp-content/uploads/2025/08/ham-lackierung.webp');
}

/* 7) Reparaturen für alle Marken */
.section.features li:nth-child(7)::before{
  background-image:url('https://xn--kfz-hambchen-klb.de/wp-content/uploads/2025/08/ham-repatur.webp');
}

/* === Über uns zweispaltig, ohne Block-Bastelei ========================= */
.section.about{display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start;}
.section.about .section-title{grid-column:1}
.section.about p{grid-column:2;}
@media (max-width:900px){ .section.about{grid-template-columns:1fr; } .section.about p{grid-column:1;} }

/* === Werte (Schnell/Hilfsbereit/Fair) als Kacheln ======================= */
.section.values .wp-block-columns{gap:22px}
.section.values .wp-block-column{
  background:#fff; border-radius:var(--kfz-radius); padding:20px;
  box-shadow:var(--kfz-shadow); transition:transform .25s ease, box-shadow .25s ease;
}
.section.values .wp-block-column:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.15);}
.section.values h3{margin:0 0 6px; color:var(--kfz-dark)}

/* === Kontakt CTA-Box ==================================================== */
.section.contact{ text-align:center; border-radius:0;}
.section.contact p{margin:6px 0}
.section.contact a[href^="tel"], .section.contact a[href^="mailto"]{
  display:inline-block; margin-top:8px; background:var(--kfz-primary); color:#fff; text-decoration:none;
  padding:12px 22px; border-radius:12px; font-weight:700; box-shadow:var(--kfz-shadow);
}
/* === Kontakt Footer Links (Impressum & Datenschutz) ==================== */
.section.contact p a {
  color: #666;
  font-size: 14px;
  text-decoration: none;
  transition: color .25s ease;
}

.section.contact p a:hover {
  color: var(--kfz-primary);
  text-decoration: underline;
}
/* ===== Sticky CTA (mobile) ===== */
.kfz-sticky{
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px; justify-content: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); 
  background: #fff; border-top: 1px solid #ececec;
  box-shadow: 0 -8px 24px rgba(0,0,0,.08);
  z-index: 9999; transform: translateY(110%); transition: transform .35s ease, opacity .35s ease;
  opacity: 0;
}
.kfz-sticky.visible{ transform: translateY(0); opacity: 1; }
.kfz-sticky.hidden{ transform: translateY(110%); opacity: 0; }

.kfz-btn{
  font-weight: 700; text-decoration: none; border-radius: 12px; padding: 12px 16px; 
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.kfz-btn--primary{ background: var(--kfz-primary, #cc0000); color: #fff; }
.kfz-btn--ghost{ background: #fff; color: #111; border: 2px solid #ddd; }

/* === Scroll-Reveal Animation (mit Reduced-Motion Support) =============== */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible{opacity:1; transform:none; transition:none;}
}
@media (min-width: 900px){
  .kfz-sticky{ display:none; } /* nur mobil sichtbar */
}
/* ====== Legal Pages (Impressum/Datenschutz) ========================== */
.legal-page{
  max-width: 900px;
  margin: 0 auto;
  padding: 0px 20px;
  line-height: 1.7;
}
.legal-page h1{
  font-size: clamp(28px, 3.5vw, 36px);
  margin: 0 0 18px;
}
.legal-page h2{
  font-size: clamp(20px, 2.4vw, 24px);
  margin: 28px 0 10px;
}
.legal-page p{ margin: 10px 0; }
.legal-page a{ color: var(--kfz-primary); text-decoration: none; }
.legal-page a:hover{ text-decoration: underline; }

/* Definition List clean */
.legal-dl{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 6px 16px;
  margin: 10px 0 16px;
}
.legal-dl dt{
  font-weight: 600;
  color: #222;
}
.legal-dl dd{
  margin: 0;
  color: #333;
}
@media (max-width: 700px){
  .legal-dl{ grid-template-columns: 1fr; }
  .legal-dl dt{ margin-top: 8px; }
}

/* Aktualisierungszeile */

.legal-updated{
  margin-top: 0px;
  font-size: 14px;
  color: #666;
}
/* Impressum (ID 23) – Header/Footer + WP-Seitentitel ausblenden */
.page-id-23 header,
.page-id-23 footer,
.page-id-23 .wp-block-template-part[aria-label="Header"],
.page-id-23 .wp-block-template-part[aria-label="Footer"],
.page-id-23 .wp-block-post-title,
.page-id-23 h1.wp-block-post-title,
.page-id-23 .entry-title{
  display:none !important;
}

/* Datenschutz (ID 31) – Header/Footer + WP-Seitentitel ausblenden */
.page-id-31 header,
.page-id-31 footer,
.page-id-31 .wp-block-template-part[aria-label="Header"],
.page-id-31 .wp-block-template-part[aria-label="Footer"],
.page-id-31 .wp-block-post-title,
.page-id-31 h1.wp-block-post-title,
.page-id-31 .entry-title{
  display:none !important;
}
/* === Kontaktbereich ==================================================== */
.section.contact{ border-radius:0; }

/* Überschrift im Kontaktbereich linksbündig */
.section.contact .section-title{
  grid-column: 1 / -1; /* volle Breite über beiden Spalten */
  text-align: left;
  margin-bottom: 20px;
}

/* Kontaktbereich zweispaltig */
.contact-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start; /* jetzt oben ausrichten */
}

/* Überschrift und Adresse/Beschreibung sollen linksbündig stehen */
.section.contact .section-title{
  text-align: left;
  margin-bottom: 20px;
}

/* Info-Text & Buttons */
.contact-info{
  font-size: 16px;
  text-align: left;
}
/* === Buttons Hover-Farbe fixieren === */
.section.contact a[href^="tel"]:hover,
.section.contact a[href^="mailto"]:hover {
  color: #fff !important; /* bleibt weiß */
  background: #a00000;    /* optional: leicht dunkleres Rot als Feedback */
}

/* Karte */
.contact-map iframe{
  width:100%;
  min-height:300px; /* etwas höher für mehr Präsenz */
  border:0;
  border-radius:12px;
}

@media (max-width: 800px){
  .contact-columns{ 
    grid-template-columns:1fr; 
  }
  .contact-map{ 
    margin-top:20px; 
  }
}