/* ============================================================
   kesanelektro – Template-Stylesheet
   Palette:  Anthrazit #16181D · Schaltgrau #F4F5F3 · Phasengelb #F5B500
             Kupfer #B4622F · Leitungsgrau #5B6068
   Typo:     Barlow Condensed (Display) · Barlow (Text) – lokal, DSGVO-konform
   ============================================================ */

@font-face {
	font-family: 'Barlow';
	font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal; font-weight: 600; font-display: swap;
	src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal; font-weight: 600; font-display: swap;
	src: url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal; font-weight: 700; font-display: swap;
	src: url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}

:root {
	--ink:      #16181D;   /* Anthrazit wie "EK" im Logo */
	--ink-soft: #2A2E36;
	--paper:    #F4F5F3;
	--card:     #FFFFFF;
	--phase:    #D10012;   /* Signalrot aus dem Logo */
	--phase-dk: #A5000E;   /* dunkleres Rot fuer Hover/Tiefe */
	--copper:   #A5000E;
	--line:     #D8DAD5;
	--muted:    #5B6068;
	--display:  'Barlow Condensed', 'Arial Narrow', sans-serif;
	--body:     'Barlow', 'Segoe UI', Arial, sans-serif;
	--shell:    1180px;
	--r:        10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
	margin: 0;
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
}
img { max-width: 100%; height: auto; }
a { color: var(--copper); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--phase); outline-offset: 2px; }

.ke-shell { max-width: var(--shell); margin: 0 auto; padding: 0 22px; }

.ke-skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--phase); color: var(--ink); padding: 10px 16px; z-index: 300;
}
.ke-skip:focus { left: 12px; top: 12px; }

/* ---------- Typo-Grundlagen ---------- */
h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: .01em;
	margin: 0 0 .45em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); text-transform: uppercase; }
h3 { font-size: 1.35rem; }
p  { margin: 0 0 1em; }

/* Eyebrow mit Klemmen-Marke (L1/L2/L3/N/PE) */
.ke-eyebrow {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--display); font-weight: 600; font-size: 1.05rem;
	text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
	margin: 0 0 .6em;
}
.ke-klemme {
	display: inline-grid; place-items: center;
	min-width: 34px; height: 26px; padding: 0 6px;
	background: var(--ink); color: var(--phase);
	font-weight: 700; letter-spacing: .05em; font-size: .95rem;
	border-radius: 4px;
}

/* ---------- Header ---------- */
.ke-header {
	position: sticky; top: 0; z-index: 200;
	background: rgba(22, 24, 29, .97);
	color: #fff;
	border-bottom: 3px solid var(--phase);
}
.ke-header-inner {
	display: flex; align-items: center; gap: 26px;
	min-height: 68px;
}
.ke-brand {
	display: flex; align-items: center; gap: 10px;
	color: #fff; text-decoration: none;
	font-family: var(--display); font-weight: 700; font-size: 1.5rem;
	text-transform: uppercase; letter-spacing: .04em;
}
.ke-logo { height: 46px; width: auto; display: block; }
.ke-brand-mark { color: var(--phase); display: grid; place-items: center; }
.ke-nav { margin-left: auto; }
.ke-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.ke-nav a {
	display: block; padding: 10px 14px;
	color: #E7E8E5; text-decoration: none;
	font-family: var(--display); font-weight: 600; font-size: 1.12rem;
	text-transform: uppercase; letter-spacing: .06em;
	border-bottom: 3px solid transparent;
}
.ke-nav a:hover { color: var(--phase); }
.ke-nav .active > a, .ke-nav .current > a { color: var(--phase); border-bottom-color: var(--phase); }
.ke-header-tel {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--phase); color: #fff !important;
	font-weight: 600; text-decoration: none;
	padding: 9px 16px; border-radius: 999px; white-space: nowrap;
}
.ke-header-tel:hover { background: var(--phase-dk); }
.ke-burger { display: none; }

/* ---------- Inhalt (Unterseiten) ---------- */
.ke-content { padding: 56px 22px 72px; }
.ke-sub .ke-content h1 { margin-bottom: .6em; }
.ke-content .ke-lead { font-size: 1.2rem; color: var(--muted); max-width: 62ch; }

/* Startseite: Sektionen kommen aus dem Artikel, volle Breite */
.ke-content-home { padding: 0; }

/* ---------- Hero ---------- */
.ke-hero {
	background:
		linear-gradient(115deg, rgba(22,24,29,.96) 46%, rgba(22,24,29,.78) 100%),
		repeating-linear-gradient(90deg, transparent 0 118px, rgba(245,181,0,.10) 118px 120px);
	color: #fff;
	padding: 88px 0 84px;
	position: relative;
	overflow: hidden;
}
.ke-hero .ke-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.ke-hero .ke-eyebrow { color: var(--phase); }
.ke-hero .ke-eyebrow .ke-klemme { background: var(--phase); color: #fff; }
.ke-hero h1 em { font-style: normal; color: var(--phase); }
.ke-hero p { max-width: 56ch; font-size: 1.18rem; color: #D8DAD5; }
.ke-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Schaltplan-Grafik rechts im Hero */
.ke-hero-schema svg { width: 100%; height: auto; display: block; }
.ke-schema-line { stroke: #3B404A; stroke-width: 2.5; fill: none; }
.ke-schema-hot  { stroke: var(--phase); stroke-width: 2.5; fill: none; }
.ke-schema-dot  { fill: var(--phase); }
.ke-schema-lbl  { fill: #8B909A; font-family: var(--display); font-size: 13px; letter-spacing: .08em; }

/* ---------- Buttons ---------- */
.ke-btn {
	display: inline-block; cursor: pointer;
	font-family: var(--display); font-weight: 600; font-size: 1.1rem;
	text-transform: uppercase; letter-spacing: .07em; text-decoration: none;
	padding: 13px 26px; border-radius: 6px; border: 2px solid transparent;
	transition: background .15s, color .15s, border-color .15s;
}
.ke-btn-solid { background: var(--phase); color: #fff !important; }
.ke-btn-solid:hover { background: var(--phase-dk); }
.ke-btn-line { background: transparent; color: #fff !important; border-color: #fff; }
.ke-btn-line:hover { border-color: var(--phase); color: var(--phase) !important; }
.ke-btn-dark { background: var(--ink); color: #fff !important; }
.ke-btn-dark:hover { background: var(--ink-soft); }
.ke-btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.ke-btn-ghost:hover { color: var(--ink); border-color: var(--muted); }

/* ---------- Sektionen ---------- */
.ke-section { padding: 76px 0; }
.ke-section-dark { background: var(--ink); color: #fff; }
.ke-section-dark .ke-eyebrow { color: #9BA0AA; }
.ke-section-intro { max-width: 64ch; color: var(--muted); font-size: 1.13rem; }
.ke-section-dark .ke-section-intro { color: #C6C9CE; }

/* Leistungs-Karten */
.ke-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 38px; }
.ke-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 4px solid var(--phase);
	border-radius: var(--r);
	padding: 28px 26px 24px;
	display: flex; flex-direction: column;
}
.ke-card h3 { margin-top: .4em; }
.ke-card p { color: var(--muted); }
.ke-card ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.ke-card li { margin-bottom: 6px; }
.ke-card-icon { color: var(--phase-dk); }
.ke-card-icon svg { width: 40px; height: 40px; }

/* Angebots-Seite: zweispaltige Leistungsblöcke */
.ke-offer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 30px; }
.ke-offer .ke-card { border-top-color: var(--copper); }

/* Warum-wir */
.ke-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 38px; }
.ke-why-item { border-left: 3px solid var(--phase); padding-left: 20px; }
.ke-why-item h3 { color: #fff; }
.ke-why-item p { color: #C6C9CE; margin: 0; }
.ke-why-item .ke-klemme { margin-bottom: 12px; }

/* CTA-Band */
.ke-cta {
	background: var(--phase);
	color: #fff;
	padding: 60px 0;
}
.ke-cta .ke-shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.ke-cta h2 { margin: 0; }
.ke-cta p { margin: 6px 0 0; font-size: 1.1rem; }

/* ---------- Galerie ---------- */
.ke-gallery-band { padding: 76px 0 60px; }
.ke-gallery {
	display: flex; gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 26px 22px 14px;
	scrollbar-color: var(--phase) var(--line);
}
.ke-gallery-item {
	flex: 0 0 min(420px, 82vw);
	scroll-snap-align: start;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}
.ke-gallery-item img { width: 100%; height: 260px; object-fit: cover; display: block; background: #E7E8E5; }
.ke-gallery-item figcaption {
	padding: 12px 16px;
	font-family: var(--display); font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; font-size: 1rem; color: var(--muted);
}
.ke-gallery-ctrls { display: flex; gap: 10px; justify-content: flex-end; }
.ke-gal-btn {
	width: 44px; height: 44px; border-radius: 50%;
	border: 2px solid var(--ink); background: transparent;
	font-size: 1.2rem; cursor: pointer;
}
.ke-gal-btn:hover { background: var(--phase); border-color: var(--phase); color: #fff; }

/* ---------- Footer ---------- */
.ke-footer { background: var(--ink); color: #C6C9CE; margin-top: 0; }
.ke-footer a { color: #E7E8E5; text-decoration: none; }
.ke-footer a:hover { color: var(--phase); }
.ke-footer-grid {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 34px;
	padding-top: 56px; padding-bottom: 40px;
}
.ke-footer-logo { height: 60px; width: auto; display: block; margin-bottom: 6px; }
.ke-footer-brand strong {
	font-family: var(--display); font-size: 1.4rem; text-transform: uppercase;
	letter-spacing: .04em; color: #fff; display: inline-block; margin-left: 8px; vertical-align: middle;
}
.ke-footer-brand .ke-brand-mark { color: var(--phase); display: inline-grid; vertical-align: middle; }
.ke-footer-brand p { margin-top: 10px; }
.ke-footer h3 {
	color: #fff; font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase;
	border-bottom: 2px solid var(--phase); display: inline-block; padding-bottom: 4px;
}
.ke-footer nav ul { list-style: none; margin: 0; padding: 0; }
.ke-footer nav li { margin-bottom: 8px; }
.ke-footer-bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
	border-top: 1px solid #2A2E36;
	padding-top: 18px; padding-bottom: 22px; font-size: .95rem;
}
.ke-cookie-reopen {
	background: none; border: none; cursor: pointer;
	color: #E7E8E5; font: inherit; text-decoration: underline; padding: 0;
}
.ke-cookie-reopen:hover { color: var(--phase); }

/* ---------- Cookie-Banner ---------- */
.ke-cookie {
	position: fixed; inset: auto 0 0 0; z-index: 400;
	padding: 18px;
	background: rgba(22,24,29,.55);
	backdrop-filter: blur(2px);
}
.ke-cookie[hidden] { display: none; }
.ke-cookie-box {
	max-width: 720px; margin: 0 auto;
	background: var(--card); color: var(--ink);
	border-radius: var(--r); border-top: 4px solid var(--phase);
	padding: 24px 26px 22px;
	box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.ke-cookie-box h2 { font-size: 1.4rem; margin-bottom: .3em; }
.ke-cookie-box p { color: var(--muted); font-size: .98rem; }
.ke-cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ke-cookie-actions .ke-btn { font-size: 1rem; padding: 10px 18px; }
.ke-cookie-actions .ke-btn-line { color: var(--ink) !important; border-color: var(--ink); }
.ke-cookie-actions .ke-btn-line:hover { border-color: var(--phase); }

/* ---------- Kontaktseite / com_contact ---------- */
.com-contact .contact-form, .com-contact form { max-width: 640px; }
.com-contact legend { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; }
.com-contact label { display: block; font-weight: 600; margin: 16px 0 6px; }
.com-contact input[type=text], .com-contact input[type=email], .com-contact textarea {
	width: 100%; padding: 12px 14px;
	border: 1px solid var(--line); border-radius: 6px;
	font: inherit; background: var(--card);
}
.com-contact input:focus, .com-contact textarea:focus { border-color: var(--phase); outline: none; box-shadow: 0 0 0 3px rgba(245,181,0,.25); }
.com-contact .btn, .com-contact button[type=submit] {
	margin-top: 20px;
	background: var(--ink); color: #fff; border: none; cursor: pointer;
	font-family: var(--display); font-weight: 600; font-size: 1.1rem;
	text-transform: uppercase; letter-spacing: .07em;
	padding: 13px 28px; border-radius: 6px;
}
.com-contact .btn:hover, .com-contact button[type=submit]:hover { background: var(--phase); color: var(--ink); }
.ke-contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
.ke-contact-info {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
	border-top: 4px solid var(--phase); padding: 26px;
}

/* ---------- Rechtstexte ---------- */
.ke-legal { max-width: 76ch; }
.ke-legal h2 { font-size: 1.5rem; margin-top: 1.6em; }
.ke-legal h3 { font-size: 1.15rem; margin-top: 1.3em; }
.ke-platzhalter {
	background: #FFF3CC; border: 1px dashed var(--phase-dk);
	padding: 2px 6px; border-radius: 4px; font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.ke-hero .ke-shell { grid-template-columns: 1fr; }
	.ke-hero-schema { display: none; }
	.ke-cards, .ke-why { grid-template-columns: 1fr 1fr; }
	.ke-footer-grid { grid-template-columns: 1fr 1fr; }
	.ke-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.ke-header-tel { display: none; }
	.ke-burger {
		display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
		margin-left: auto; background: none; border: none; cursor: pointer; padding: 10px;
	}
	.ke-burger span { width: 26px; height: 3px; background: var(--phase); border-radius: 2px; transition: transform .2s, opacity .2s; }
	.ke-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.ke-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.ke-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
	.ke-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--ink); border-bottom: 3px solid var(--phase);
		margin: 0; padding: 8px 0 14px;
	}
	.ke-nav.open { display: block; }
	.ke-nav ul { flex-direction: column; }
	.ke-nav a { padding: 12px 24px; font-size: 1.25rem; }
	.ke-cards, .ke-why, .ke-offer, .ke-footer-grid { grid-template-columns: 1fr; }
	.ke-section { padding: 54px 0; }
	.ke-hero { padding: 62px 0; }
}