/* Kraus + Kübrich Blitzschutzbau, gemeinsames Stylesheet der SEO-Seiten.
   Seiteneigene Sektionen stehen bewusst im <style> der jeweiligen Seite,
   damit die Seiten sich im Aufbau voneinander unterscheiden.

   Farbsystem: Weiß trägt die Seite, Rot führt und handelt, Gelb gehört dem
   Telefon, Dunkel bleibt auf Kopf, Fuß und Cookie-Banner beschränkt.
   Umbruchpunkte im ganzen Projekt: 1100 / 860 / 620 / 480. Keine anderen. */
:root{
  /* Marke, Handlung */
  --rot:#e4012f;
  --rot-d:#c00128;
  --rot-t:#c4153b;          /* Rot als Textfarbe auf Weiß, Kartentitel */
  --rot-soft:#fdeaee;       /* getönte Kleinfläche, ersetzt jedes bisherige Grau in Kästen */

  /* Akzent, streng limitiert */
  --accent:#ffed00;         /* nur Telefon und Blitzsymbol */
  --accent-d:#e0d000;
  --accent-soft:#fffce0;    /* nur Icon-Kachel und Listen-Hover auf der 404 */

  /* Grund */
  --bg:#ffffff;
  --soft-3:#fafafa;         /* einzige helle Absetzfläche, höchstens einmal pro Seite */

  /* Text */
  --ink:#2a2b2d;
  --grey:#707173;
  --grey-2:#95969a;

  /* Linien */
  --line:#dcdcdd;
  --line-stark:#c9c9cb;     /* Trennlinie zwischen zwei weißen Sektionen */
  --bild-lade:#eceded;      /* nur Ladegrund hinter img, nie sichtbar */

  /* Dunkel, ausschließlich Kopf, Fuß, Cookie-Banner */
  --dark:#2b2c2f;
  --dark-2:#3a3b3f;
  --dark-3:#4a4b50;
  --line-2:#4d4e53;

  --err:#c8352a;
  --radius:12px;
  --radius-s:10px;
  --wrap:1280px;
  --sek-y:clamp(38px,4.4vw,58px);

  --fs-h1:clamp(32px,4.4vw,46px);
  --fs-h2:clamp(24px,3.2vw,34px);
  --fs-h3:clamp(19px,2.2vw,23px);
  --fs-lead:clamp(18px,2.1vw,20.5px);
  --fs-text:17px;
  --fs-klein:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.65;font-size:var(--fs-text);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot)}
a:hover{color:var(--rot-d)}
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:800}
h1{font-size:var(--fs-h1);line-height:1.18}
h2{font-size:var(--fs-h2);line-height:1.22}
h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em}
h4{line-height:1.3}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em 1.15em}
li{margin-bottom:.45em}

/* Raster */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,3vw,40px)}
.narrow{max-width:900px}
.sek{padding:var(--sek-y) 0}
.sek-kopf{max-width:860px;margin-bottom:clamp(22px,2.4vw,32px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopf */
.top{background:var(--dark);color:#f5f5f5;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line-2)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
/* Firmenlogo. Auf dem dunklen Kopf läuft die helle Fassung, in der der graue
   Schriftzug und der Hausumriss nach Weiß gekippt sind. Die dunkle Fassung
   logo-kuk-440.webp bleibt für helle Flächen liegen. */
.brand{display:flex;align-items:center;text-decoration:none;color:inherit;flex:0 0 auto}
.brand img{height:38px;width:auto;display:block}
.topnav{display:flex;align-items:center;gap:22px}
.topnav a{color:#d2d2d3;text-decoration:none;font-size:var(--fs-text);font-weight:600}
.topnav a:hover{color:#fff}
/* Der Selektor muss .topnav a schlagen, sonst erbt der Button dessen helle Schriftfarbe
   und die Telefonnummer steht hellgrau auf Gelb. */
.topnav a.topcall,.topcall{display:inline-flex;align-items:center;gap:8px;background:var(--accent);
  color:var(--ink);padding:10px 16px;border-radius:9px;font-weight:800;font-size:var(--fs-text);
  text-decoration:none;white-space:nowrap}
.topnav a.topcall:hover,.topcall:hover{background:var(--accent-d);color:var(--ink)}

/* Buttons */
/* Rot ist die Handlungsfarbe, Gelb bleibt dem Telefonknopf vorbehalten.
   So sind Formular und Anruf auf einen Blick auseinanderzuhalten. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:var(--radius-s);
  padding:15px 26px;font-size:var(--fs-text);font-weight:800;cursor:pointer;font-family:inherit;text-decoration:none;
  background:var(--rot);color:#fff;transition:background .12s}
.btn:hover{background:var(--rot-d);color:#fff}
.btn-gelb{background:var(--accent);color:var(--ink)}
.btn-gelb:hover{background:var(--accent-d);color:var(--ink)}
.btn-line{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
/* Auf roter Fläche trägt der weiße Knopf die Handlung, Rot auf Rot fällt weg. */
.btn-weiss{background:#fff;color:var(--rot)}
.btn-weiss:hover{background:var(--rot-soft);color:var(--rot-d)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btnrow{display:flex;gap:13px;flex-wrap:wrap}

/* Bausteine */
.kicker{display:inline-block;font-size:var(--fs-klein);line-height:1.5;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--rot);margin-bottom:12px}
.lead{font-size:var(--fs-lead);color:var(--grey);line-height:1.6}
.klein{font-size:var(--fs-klein);line-height:1.5}
.klein{color:var(--grey)}
.note{background:var(--rot-soft);border-left:4px solid var(--rot);border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:18px 20px;margin:0 0 1.4em}
.note p:last-child{margin-bottom:0}
/* Die gelb-grau-rote Diagonale des Logos als waagerechtes Band, Verhältnis 46:24:98
   vom Schnitt durch das Logo übernommen. Grau hier aufgehellt, damit es neben Rot nicht kippt. */
.marke-band{height:6px;background:linear-gradient(90deg,
  var(--accent) 0 27%,#adadaf 27% 41%,var(--rot) 41% 100%)}
.fakten{display:flex;flex-wrap:wrap;gap:10px}
.fakten span{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 16px;
  font-size:var(--fs-klein);line-height:1.5;color:var(--grey)}
.fakten b{color:var(--rot);font-weight:800}

/* Die eine erlaubte rote Vollbahn je Seite, am Punkt der Handlung. */
.cta-bahn{background:var(--rot);color:#fff;padding:clamp(34px,3.6vw,48px) 0}
.cta-bahn h2,.cta-bahn h3,.cta-bahn .kicker{color:#fff}
.cta-bahn p,.cta-bahn .lead,.cta-bahn li{color:#ffe3e9}
.cta-bahn a{color:#fff}
.cta-bahn .btn{background:#fff;color:var(--rot)}
.cta-bahn .btn:hover{background:var(--rot-soft);color:var(--rot-d)}
.cta-bahn .btn-gelb{background:var(--accent);color:var(--ink)}
.cta-bahn .btn-gelb:hover{background:var(--accent-d);color:var(--ink)}

/* Echte Bilder. width und height stehen am img-Tag, damit beim Nachladen
   nichts springt, das Seitenverhältnis hält die Fläche frei. */
figure.bild{margin:0}
figure.bild img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);background:var(--bild-lade)}
figure.bild.hoch img{aspect-ratio:4/5}
figure.bild figcaption{font-size:var(--fs-klein);line-height:1.5;color:var(--grey);margin-top:10px}

/* Tabelle */
.tbl-scroll{overflow-x:auto;margin:0 0 1.4em;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--fs-text)}
th,td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--rot);color:#fff;font-weight:800;font-size:var(--fs-klein);line-height:1.5;
  letter-spacing:.2px;border-bottom:none}
tbody tr:last-child td{border-bottom:none}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:var(--radius-s);margin-bottom:10px;background:var(--bg)}
.faq summary{cursor:pointer;padding:17px 20px;font-weight:700;font-size:var(--fs-text);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4em;font-weight:600;color:var(--grey-2);line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:17px 20px 4px;color:var(--grey)}
.faq .a p:last-child{margin-bottom:1em}

/* Formular */
.form-card{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  padding:clamp(26px,2.6vw,34px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06)}
.form-card h2,.form-card h3{color:var(--ink)}
.form-card .lead{color:var(--grey)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fld{margin-bottom:14px}
.fld label{display:block;font-weight:700;font-size:var(--fs-klein);line-height:1.5;margin-bottom:6px;color:var(--ink)}
.fld label .opt-tag{color:var(--grey-2);font-weight:500}
.fld input,.fld select,.fld textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-s);
  padding:13px 14px;font-size:var(--fs-text);font-family:inherit;color:var(--ink);background:var(--bg);outline:none}
.fld textarea{min-height:112px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:var(--grey-2)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--rot);box-shadow:0 0 0 3px rgba(228,1,47,.15)}
.fld .err{color:var(--err);font-size:var(--fs-klein);line-height:1.5;font-weight:600;margin-top:5px;display:none}
.chkrow{display:flex;align-items:flex-start;gap:11px;margin:4px 0 16px;cursor:pointer}
.chkrow input{width:21px;height:21px;flex:0 0 auto;margin-top:2px;accent-color:var(--rot)}
.chkrow span{font-size:var(--fs-klein);line-height:1.5;color:var(--grey)}
.chkrow span a{color:var(--rot)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-hint{font-size:var(--fs-klein);color:var(--grey);margin-top:12px;line-height:1.55}
.form-msg{display:none;border-radius:var(--radius-s);padding:14px 16px;font-size:var(--fs-text);font-weight:600;margin-top:14px}
.form-msg.ok{display:block;background:#eaf7f0;border:1px solid #2c9d6c;color:#166647}
.form-msg.bad{display:block;background:#fdecea;border:1px solid var(--err);color:#8e241b}

/* Fuß */
.foot{background:var(--dark);color:#b6b7b9;padding:52px 0 0;font-size:var(--fs-text);overflow:hidden;overflow:clip}
.foot a{color:#d2d2d3;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot h4{color:#fff;font-size:var(--fs-klein);letter-spacing:.8px;text-transform:uppercase;margin-bottom:14px}
.foot-logo{height:33px;width:auto;margin-bottom:9px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
.foot ul{list-style:none;margin:0}
.foot li{margin-bottom:9px}
/* Die Rechtszeile läuft als rote Bahn aus dem dunklen Block heraus über die volle
   Fensterbreite. Die negativen Ränder heben das .wrap-Raster auf, das Polster holt
   den Text exakt auf die Rasterkante zurück. !important, weil drei Seiten padding-top
   per Inline-Style auf 0 setzen und die Bahn ihr Polster trotzdem braucht. */
.foot-bar{background:var(--rot);color:#fff;border-top:none;
  margin:34px calc(50% - 50vw) 0;padding:15px calc(50vw - 50%)!important;
  display:flex;justify-content:space-between;align-items:center;gap:8px 22px;flex-wrap:wrap;
  font-size:var(--fs-klein);line-height:1.5}
.foot-bar a{color:#fff;text-decoration:underline}
.foot-bar a:hover{color:#fff}

/* Sprungmarke */
.skip{position:absolute;left:-9999px;background:var(--accent);color:var(--dark);padding:12px 18px;
  border-radius:8px;font-weight:800;z-index:200}
.skip:focus{left:14px;top:12px}

/* Umbrüche: 1100 / 860 / 620 / 480 */
@media(max-width:860px){
  .brand img{height:31px}
  .topnav a{display:none}
  .top .wrap{min-height:62px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:620px){
  .fgrid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .brand img{height:27px}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:6px}
}