/*
 * Dachfehlersuche - Theme-Styles
 *
 * Uebernommen aus der freigegebenen Layout-Vorlage
 * (dachfehlersuche-homepage.html). Abweichungen sind einzeln kommentiert.
 */

:root{
  --ink:#14171A;
  --soft-ink:#4B4F53;
  --surface:#E7E9E6;
  --surface-2:#DADCD7;
  --paper:#F7F7F4;
  --paper-2:#EDEDE9;
  --line:#DCDDD8;
  --steel:#8A9195;
  --teal:#00747F;
  --teal-deep:#005960;
  --gold:#AD8A54;
  --gold-deep:#8C6E3E;
  --radius:2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:'Source Sans 3', sans-serif; color:var(--ink);
  background:var(--paper); line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:0.01em;
  line-height:1.08; margin:0; font-weight:600;
}
.mono{font-family:'Roboto Mono', monospace; letter-spacing:0.02em;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:'Roboto Mono', monospace; text-transform:uppercase; letter-spacing:0.14em;
  font-size:12.5px; color:var(--teal); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--teal);}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
  font-family:'Roboto Mono', monospace; font-size:13.5px; letter-spacing:0.04em; text-transform:uppercase;
  border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:hover{background:var(--teal-deep); transform:translateY(-1px);}
.btn-ghost{border-color:var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:#fff;}

/* ---------- header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50; background:rgba(231,233,230,0.96);
  backdrop-filter:blur(6px); border-bottom:1px solid rgba(20,23,26,0.08);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:96px;}
.logo{display:flex; align-items:center; gap:14px;}
.logo-seal{width:40px; height:40px; flex-shrink:0; object-fit:contain;}
footer .logo-seal{width:46px; height:46px;}
.logo-text{display:flex; flex-direction:column; line-height:1;}
.logo-text .name{font-family:'Oswald'; font-weight:700; font-size:19px; letter-spacing:0.02em; color:var(--ink);}
.logo-text .sub{font-family:'Roboto Mono'; font-size:10px; letter-spacing:0.1em; color:var(--soft-ink); margin-top:4px;}
nav.primary{display:flex; align-items:center; gap:38px;}
nav.primary ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:38px;}
nav.primary a{color:var(--soft-ink); font-size:14.5px; font-weight:500; position:relative; padding:6px 0;}
nav.primary a:hover{color:var(--ink);}
nav.primary a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--teal); transition:width .2s ease;}
nav.primary a:hover::after{width:100%;}
.header-cta{display:flex; align-items:center; gap:22px;}
/* Zweiter Aufruf, der nur im aufgeklappten Mobilmenue erscheint - siehe
   Media-Query bei 620px. */
.nav-cta{display:none;}
.menu-toggle{display:none; background:none; border:0; cursor:pointer; padding:6px;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .2s ease, opacity .2s ease;}
.menu-toggle:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

/* ---------- hero ---------- */
.hero{background:var(--surface); color:var(--ink); position:relative; overflow:hidden; padding:0;}
.hero .wrap{display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; position:relative;}
.hero-content{position:relative; z-index:2; padding:110px 0 70px;}
.hero h1{font-size:clamp(32px,4.2vw,52px); color:var(--ink); max-width:600px;}
.hero h1 em{color:var(--teal); font-style:normal;}
.hero p.lead{font-size:17px; color:var(--soft-ink); max-width:520px; margin-top:22px;}
.hero-actions{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}
.hero-illustration{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;}
/* Grossschreibung hier per CSS statt im Text - die Vorlage hatte sie fest
   im Markup, so bleiben die Inhalte in content.php lesbar. */
.seal-caption{margin-top:18px; font-family:'Roboto Mono'; font-size:12px; letter-spacing:0.08em; color:var(--soft-ink); text-align:center; text-transform:uppercase;}

.trust-bar{background:var(--surface-2); border-top:1px solid rgba(20,23,26,0.08);}
.trust-bar .wrap{display:flex; justify-content:space-between; align-items:center; padding:22px 32px; flex-wrap:wrap; gap:16px;}
.trust-item{display:flex; align-items:center; gap:10px; color:var(--soft-ink); font-family:'Roboto Mono'; font-size:13px; letter-spacing:0.02em;}
.trust-item .dot{width:6px; height:6px; background:var(--gold); border-radius:50%; flex-shrink:0;}

section{padding:104px 0;}
.section-head{max-width:640px; margin-bottom:60px;}
.section-head h2{font-size:clamp(28px,3.4vw,42px); color:var(--ink);}
.section-head p{margin-top:16px; font-size:16.5px; color:var(--soft-ink); max-width:540px;}
.section-alt{background:var(--paper-2);}
.section-dark{background:var(--surface);}
.section-dark .section-head h2{color:var(--ink);}
.section-dark .section-head p{color:var(--soft-ink);}

/* ---------- services ---------- */
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.service-card{background:var(--paper); padding:38px 32px; min-height:220px; display:flex; flex-direction:column;}
.service-card .icon{width:40px; height:40px; margin-bottom:22px;}
.service-card h3{font-size:19px; color:var(--ink); margin-bottom:12px;}
.service-card p{font-size:14.8px; color:var(--soft-ink); flex-grow:1;}
.service-card .num{font-family:'Roboto Mono'; font-size:12px; color:var(--teal); margin-bottom:10px; letter-spacing:0.06em;}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:center; margin-bottom:20px;}
/* height:auto ist hier kein Beiwerk: Ohne die Angabe schlaegt das
   height-Attribut aus dem HTML als Praesentationshinweis durch und verzerrt
   das Bild, sobald die Breite skaliert. */
.about-photo img{width:100%; height:auto; display:block; border-radius:2px; border:1px solid var(--line);}

/* ---------- why ---------- */
.usp-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:36px 48px; max-width:920px;}
.usp-list li{display:flex; gap:20px;}
.usp-list .mark{
  width:30px; height:30px; border:2px solid var(--teal); border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--teal); font-family:'Roboto Mono'; font-size:13px; margin-top:2px;
}
.usp-list h4{font-size:16.5px; color:var(--ink); text-transform:none; font-family:'Source Sans 3'; font-weight:700;}
.usp-list p{font-size:14.8px; color:var(--soft-ink); margin-top:6px;}

/* ---------- process ---------- */
.process-rail{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.process-rail::before{content:""; position:absolute; top:19px; left:0; right:0; height:2px; background:var(--line);}
.process-step{padding:0 24px; position:relative;}
.process-step:first-child{padding-left:0;}
.process-step .node{
  width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:'Roboto Mono'; font-size:13px; position:relative; z-index:2; margin-bottom:26px;
}
.process-step h4{font-size:16.5px; color:var(--ink); font-family:'Source Sans 3'; text-transform:none; font-weight:700; margin-bottom:8px;}
.process-step p{font-size:14.3px; color:var(--soft-ink);}

/* ---------- facts ---------- */
.facts-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(20,23,26,0.1);}
.fact{background:var(--surface); padding:34px 26px;}
.fact .val{font-family:'Oswald'; font-size:26px; color:var(--teal); font-weight:600; text-transform:uppercase; line-height:1.15;}
.fact .label{font-family:'Roboto Mono'; font-size:12px; color:var(--soft-ink); margin-top:12px; letter-spacing:0.03em; text-transform:uppercase;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 0.85fr; gap:60px;}
.form-group{margin-bottom:20px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
label{display:block; font-family:'Roboto Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--steel); margin-bottom:8px;}
input,textarea{width:100%; padding:13px 14px; border:1px solid var(--line); background:#fff; font-family:'Source Sans 3'; font-size:15px; border-radius:var(--radius); color:var(--ink);}
input:focus,textarea:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}
textarea{resize:vertical; min-height:120px;}
.contact-info{background:var(--surface); color:var(--ink); padding:42px; display:flex; flex-direction:column; gap:28px; border:1px solid var(--line);}
.contact-info .item{display:flex; gap:16px;}
.contact-info .item .ic{width:22px; height:22px; flex-shrink:0; margin-top:2px;}
.contact-info h4{font-family:'Roboto Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--soft-ink); margin-bottom:6px;}
.contact-info p{font-size:15px; color:var(--ink); margin:0;}

/* Ergaenzung: Einwilligung, Honeypot und Statusmeldungen - im Entwurf war das
   Formular nur Attrappe (onsubmit="return false"), hier verschickt es echt. */
.form-consent{display:flex; gap:12px; align-items:flex-start; margin-bottom:24px;}
.form-consent input[type="checkbox"]{width:auto; margin-top:4px; flex-shrink:0; accent-color:var(--teal);}
.form-consent label{text-transform:none; font-family:'Source Sans 3'; font-size:14px; letter-spacing:0; color:var(--soft-ink); margin:0; line-height:1.5;}
.form-consent a{text-decoration:underline;}
.dfs-hp{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden;}
.form-notice{padding:16px 18px; margin-bottom:28px; border-left:3px solid var(--teal); background:var(--surface); font-size:15px;}
.form-notice.is-error{border-left-color:#B3261E; color:#7A1B15;}
.form-notice ul{margin:8px 0 0; padding-left:20px;}
.field-error{border-color:#B3261E;}

/* ---------- footer ---------- */
footer.site-footer{background:var(--surface); color:var(--soft-ink); padding:70px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(20,23,26,0.1);}
footer h5{font-family:'Roboto Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink); margin-bottom:20px;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
footer ul a{font-size:14.5px; color:var(--soft-ink);}
footer ul a:hover{color:var(--teal);}
footer p.desc{font-size:14.5px; max-width:280px; color:var(--soft-ink);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:13px; color:var(--soft-ink); flex-wrap:wrap; gap:12px;}
.footer-bottom a{color:var(--soft-ink);}
.footer-bottom a:hover{color:var(--ink);}
.footer-links{display:flex; gap:24px;}

.skip-link{position:absolute; left:-999px; top:0; background:var(--teal); color:#fff; padding:12px 20px; z-index:100;}
.skip-link:focus{left:12px; top:12px;}

/* ---------- Inhaltsseiten (Impressum, Datenschutz, ...) ---------- */
.page-content{max-width:760px;}
.page-content h1{font-size:clamp(28px,3.4vw,42px); margin-bottom:32px;}
.page-content h2{font-size:24px; margin:40px 0 14px;}
.page-content h3{font-size:19px; margin:28px 0 10px;}
.page-content p,.page-content li{font-size:16px; color:var(--soft-ink);}
.page-content p{margin:0 0 16px;}
.page-content ul,.page-content ol{padding-left:22px; margin:0 0 16px;}
.page-content li{margin-bottom:8px;}
.page-content a{color:var(--teal); text-decoration:underline;}
.page-content strong{color:var(--ink);}

@media (max-width: 980px){
  nav.primary{display:none;}
  /* Ergaenzung: Aufklapp-Zustand als Klasse statt per Inline-Style aus dem JS. */
  nav.primary.is-open{
    display:flex; position:absolute; top:96px; left:0; right:0; background:var(--surface);
    flex-direction:column; align-items:flex-start; padding:20px 32px; gap:18px;
    border-bottom:1px solid rgba(20,23,26,0.08);
  }
  nav.primary.is-open ul{flex-direction:column; align-items:flex-start; gap:18px;}
  .menu-toggle{display:block;}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .about-grid{grid-template-columns:1fr; text-align:left;}
  .about-photo{max-width:220px;}
  .hero .wrap{grid-template-columns:1fr;}
  .hero-illustration{display:none;}
  .services-grid{grid-template-columns:1fr;}
  .process-rail{grid-template-columns:repeat(2,1fr); row-gap:40px;}
  .process-rail::before{display:none;}
  .facts-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 620px){
  /* Logo + Button + Burger passen nebeneinander nicht mehr in 390px - in der
     Vorlage lief die Seite dadurch horizontal ueber. Der Aufruf wandert ins
     Menue, damit er nicht verlorengeht. */
  .header-cta .btn{display:none;}
  nav.primary.is-open .nav-cta{display:inline-flex;}
  .wrap{padding:0 20px;}
  section{padding:72px 0;}
  .services-grid,.facts-grid{grid-template-columns:1fr;}
  .usp-list{grid-template-columns:1fr;}
  .process-rail{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .trust-bar .wrap{justify-content:flex-start;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}