/* Elektrotechnik Hölter GmbH – Aussehen aller Seiten (seit 31.10.2026, statt IONOS MyWebsite).
   Fassung 2 (31.10.2026, Marc: „ein bisschen moderner so wie die Seite von Wienen“): schwarzer Grund, weiße Schrift,
   dunkle Kacheln mit runden Ecken, runde weiße Knöpfe, die roten Lichtstreifen der Fahrzeuge randlos ins Schwarz
   ausgeblendet, Logo groß im Start und baut sich einmal auf. Weiter ruhig: nur Inter, Gewichte 400/600, kein JavaScript,
   keine Cookies, nichts von Drittanbietern (siehe _headers). */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  color-scheme: dark;
  --schwarz: #000;
  --grund-2: #0b0b0b;    /* zweite Fläche für den Wechsel der Abschnitte */
  --kachel: #151515;
  --text: #f5f5f7;
  --grau: #a1a1a6;
  --grau-hell: #d2d2d7;
  --linie: rgba(255,255,255,.1);
  --rot: #951209;        /* Logo-Rot */
  --rot-hell: #f0503f;   /* Logo-Rot, aufgehellt für Schrift und Zeichen auf Schwarz */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; background: var(--schwarz); }
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
       color: var(--text); background: var(--schwarz); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--rot-hell); text-decoration: none; font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--rot); color: #fff; }
.breite { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.schmal { max-width: 760px; margin: 0 auto; padding: 0 24px; }
section { padding: 130px 0; position: relative; }

/* Kopfleiste: schwarz, durchscheinend */
header { position: sticky; top: 0; z-index: 20; background: rgba(0,0,0,.72);
         backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
         border-bottom: 1px solid rgba(255,255,255,.08); }
header .breite { display: flex; align-items: center; height: 72px; }
header .logo img { height: 38px; width: auto; }
header nav { display: flex; gap: 32px; font-size: 14.5px; margin-left: auto; margin-right: 30px; }
header nav a { color: var(--grau-hell); font-weight: 400; transition: color .2s; }
header nav a:hover { color: #fff; }
header .logo + .tel-oben { margin-left: auto; }
.tel-oben { font-size: 14.5px; font-weight: 600; color: #000; background: #fff; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; transition: background .2s; }
.tel-oben::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("/telefon.svg") center / contain no-repeat; mask: url("/telefon.svg") center / contain no-repeat; }
.tel-oben:hover { background: var(--grau-hell); }
/* Erster Kontakt per E-Mail (Marc 31.10.2026: Anrufe erreichen uns auf der Baustelle und gehen unter) */
.tel-oben.mail::before { -webkit-mask-image: url("/mail.svg"); mask-image: url("/mail.svg"); width: 15px; height: 15px; }

/* Typografie */
.ueber { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--rot-hell); margin-bottom: 18px; }
/* Der Schalter aus dem „Ö“ als kleines Zeichen vor jeder Überzeile */
.ueber::before { content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("/zeichen.svg") center / contain no-repeat; mask: url("/zeichen.svg") center / contain no-repeat; }
h1, h2 { color: var(--text); font-weight: 600; letter-spacing: -0.035em; }
h1 { font-size: clamp(40px, 5.4vw, 74px); line-height: 1.04; }
h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; }
/* Große Überschriften mit leichtem Verlauf von Weiß nach Grau */
h1, h2 { background: linear-gradient(180deg, #fff 40%, #c7c7cc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
h3 { font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; color: var(--text); }
.lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--grau); font-weight: 400; }
.kopfzeile { max-width: 760px; }
.kopfzeile .lead { margin-top: 22px; }

/* Knöpfe: Weiß auf Schwarz, rund */
.knoepfe { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.knopf { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #000; font-size: 16px; font-weight: 600; padding: 15px 28px; border-radius: 999px; transition: background .2s, color .2s; }
.knopf:hover { background: var(--grau-hell); }
.knopf svg { width: 18px; height: 18px; }
.knopf.hell { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.knopf.hell:hover { background: rgba(255,255,255,.16); }

/* ---------- Start: rote Lichtstreifen wie auf den Fahrzeugen, randlos rechts, ins Schwarz ausgeblendet ---------- */
.start { min-height: min(86vh, 820px); display: flex; align-items: center; padding: 90px 0 110px; overflow: hidden; }
.start-bild { position: absolute; top: 0; right: 0; width: 64%; height: 100%; object-fit: cover; object-position: 70% 40%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 50%), linear-gradient(to top, transparent 0%, #000 30%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 50%), linear-gradient(to top, transparent 0%, #000 30%); mask-composite: intersect; }
/* Schalter auf den Streifen (wie in Fassung 1 im Kasten): zeichnet sich einmal auf */
.start-schalter { position: absolute; top: 50%; right: max(6vw, calc((100vw - 1200px) / 2 + 60px)); width: clamp(180px, 19vw, 280px); transform: translateY(-50%); }
.start-schalter svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 8px 30px rgba(0,0,0,.45)); }
.start-schalter .ring { stroke-dasharray: 880; animation: ring 1.5s cubic-bezier(.6,0,.2,1) both .6s; }
.start-schalter .stab { transform-box: fill-box; transform-origin: top; animation: stab .6s cubic-bezier(.3,0,.2,1) both 1.9s; }
@keyframes ring { from { stroke-dashoffset: 880; } }
@keyframes stab { from { transform: scaleY(0); } }
.start .breite { position: relative; width: 100%; }
.start-text { max-width: 640px; }
.start .lead { margin-top: 28px; max-width: 560px; color: var(--grau-hell); }
.fakten { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 46px; font-size: 14px; color: var(--grau-hell); }
.fakten li { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }

/* ---------- Leistungen: dunkle Kacheln mit Symbol, die sechste Kachel mit den Streifen ---------- */
.leistungen { background: var(--grund-2); }
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.karte { background: var(--kachel); border: 1px solid rgba(255,255,255,.06); border-radius: 22px; padding: 30px 28px 32px; transition: border-color .25s, transform .25s; }
.karte:hover { border-color: rgba(255,255,255,.16); transform: translateY(-3px); }
.karte .symbol { width: 50px; height: 50px; padding: 12px; border-radius: 14px; margin-bottom: 26px; color: var(--rot-hell); background: rgba(240,80,63,.14); }
.karte h3 { margin-bottom: 10px; }
.karte p { color: var(--grau); font-size: 16px; }
.karte.anruf { display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; border-color: rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.6)), #2a0302 url("/bilder/streifen.jpg") 80% 40% / cover; }
.karte.anruf p { color: var(--grau-hell); }
.karte.anruf .knopf { align-self: flex-start; margin-top: 20px; }

/* ---------- Über uns ---------- */
.ueber-uns .breite { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.portraet img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; }
.ueber-uns h2 { font-size: clamp(32px, 3.8vw, 50px); }
.ueber-uns .text p:not(.ueber) { color: var(--grau); font-size: 18px; margin-top: 20px; max-width: 600px; }
.zitat { margin-top: 38px; padding: 26px 28px; background: var(--kachel); border: 1px solid rgba(255,255,255,.06); border-radius: 22px; max-width: 560px; }
.zitat blockquote { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.45; color: var(--text); letter-spacing: -0.01em; }
.zitat cite { display: block; margin-top: 18px; font-style: normal; font-size: 15px; color: var(--grau); }
.zitat cite b { color: var(--text); font-weight: 600; }

/* ---------- Kontakt: Schwarz mit leichtem rotem Schein ---------- */
.kontakt { background: radial-gradient(900px 480px at 88% 0%, rgba(149,18,9,.45), transparent 65%), var(--schwarz); border-top: 1px solid rgba(255,255,255,.08); }
.kontakt .lead { margin-top: 22px; max-width: 620px; }
.telefon { display: inline-block; margin-top: 40px; font-size: clamp(40px, 6.4vw, 84px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: #fff; }
.telefon:hover { color: var(--grau-hell); }
.mail-gross { display: inline-block; margin-top: 40px; font-size: clamp(28px, 5vw, 64px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: #fff; overflow-wrap: anywhere; }
.mail-gross:hover { color: var(--grau-hell); }
.kontakt .knoepfe { margin-top: 32px; }
.kontakt .qr { margin-top: 28px; }
.speichern { margin-top: 40px; }
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.weg { display: block; background: var(--kachel); border: 1px solid rgba(255,255,255,.07); border-radius: 22px; padding: 26px 26px 28px; color: #fff; transition: border-color .25s; }
.weg span { display: block; font-size: 13px; color: var(--grau); font-weight: 600; margin-bottom: 10px; }
.weg b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.weg small { display: block; margin-top: 6px; font-size: 15px; color: var(--grau); font-weight: 400; }
a.weg:hover { border-color: rgba(255,255,255,.22); }
/* Kontakt speichern: am Computer der QR-Code zur Visitenkarten-Seite, am Handy der Knopf (wie MT KI, Reiners, Wienen) */
.qr { display: none; align-items: center; gap: 18px; margin: 0; }
.qr img { width: 104px; height: 104px; background: #fff; padding: 8px; border-radius: 12px; }
.qr figcaption { color: var(--grau); font-size: 14.5px; max-width: 200px; margin: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  .nur-handy { display: none; }
  .qr { display: flex; }
}

/* Rechtliches (Impressum, Datenschutz, 404) */
.recht { padding: 80px 0 120px; }
.recht h1 { font-size: clamp(40px, 5.6vw, 60px); margin-bottom: 30px; }
.recht h2 { font-size: 20px; letter-spacing: -0.01em; margin: 36px 0 10px; font-weight: 600; background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
.recht p, .recht li { font-size: 16px; color: var(--grau-hell); margin-bottom: 10px; }
.recht strong { color: #fff; }
.recht ul { padding-left: 22px; }
.recht.mitte { text-align: center; }
.recht.mitte .knoepfe { justify-content: center; }
.stand { margin-top: 30px; color: var(--grau) !important; }

/* Fußzeile */
footer { background: var(--schwarz); border-top: 1px solid rgba(255,255,255,.08); padding: 40px 0 44px; font-size: 14px; color: var(--grau); }
footer .breite { display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; align-items: center; }
footer .fuss-logo { height: 30px; width: auto; }
footer nav { display: flex; gap: 22px; }
footer nav a { color: var(--grau-hell); font-weight: 400; }
footer nav a:hover { color: #fff; }

/* ---------- Bewegung wie bei Wienen und Reiners: das Logo im Start baut sich einmal auf ----------
   HÖLTER kommt Buchstabe für Buchstabe von unten, dann ELEKTROTECHNIK, zuletzt „schaltet“ der rote Strich im Ö ein.
   Nur „from“-Zustände, damit ohne Animation (Bewegung reduzieren) sofort das fertige Logo steht. */
.logo-start { display: block; width: clamp(240px, 28vw, 380px); height: auto; margin-bottom: 44px; overflow: visible; }
.logo-start .lz-b, .logo-start .lz-ring { transform-box: fill-box; animation: lz-buchstabe .65s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.15s + var(--i) * .08s); }
@keyframes lz-buchstabe { from { opacity: 0; transform: translateY(40%); } }
.logo-start .lz-k { animation: lz-einblenden .4s ease both; animation-delay: calc(.7s + var(--i) * .05s); }
@keyframes lz-einblenden { from { opacity: 0; } }
.logo-start .lz-stab { transform-box: fill-box; transform-origin: top; animation: lz-schalten .5s cubic-bezier(.3,0,.2,1) both 1.5s; }
@keyframes lz-schalten { from { transform: scaleY(0); } }
/* Der Rest des Startbereichs folgt dem Logo */
.start-text > :not(.logo-start) { animation: lz-hoch .8s cubic-bezier(.2,.7,.2,1) both; }
.start-text > .ueber { animation-delay: .4s; }
.start-text > h1 { animation-delay: .5s; }
.start-text > .lead { animation-delay: .7s; }
.start-text > .knoepfe { animation-delay: .85s; }
.start-text > .fakten { animation-delay: 1s; }
@keyframes lz-hoch { from { opacity: 0; transform: translateY(24px); } }
/* Streifen zoomen langsam auf ihre Größe */
.start-bild { animation: lz-zoom 9s cubic-bezier(.15,.6,.2,1) both; transform-origin: 70% 40%; }
@keyframes lz-zoom { from { transform: scale(1.1); opacity: 0; } 15% { opacity: 1; } }
/* Auf der Startseite erscheint das Logo oben in der Leiste erst beim Scrollen (das große steht ja im Start) */
@supports (animation-timeline: scroll()) {
 @media (min-width: 961px) {
  .startseite header .logo { animation: lz-kopf linear both; animation-timeline: scroll(root); animation-range: 120px 320px; }
  @keyframes lz-kopf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
 }
}

/* Einblenden beim Scrollen (nur wo der Browser es kann, sonst sofort sichtbar) */
@supports (animation-timeline: view()) {
  .auftauchen { animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
  @keyframes auftauchen { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}

/* Handy und Tablet */
@media (max-width: 960px) {
  header nav { display: none; }
  header .breite { height: 62px; }
  header .logo img { height: 32px; }
  header .tel-oben { margin-left: auto; }
  section { padding: 90px 0; }
  /* Start: Streifen oben über die volle Breite, unten ins Schwarz ausgeblendet, Text darunter */
  .start { display: block; min-height: 0; padding: 0 0 80px; }
  .start-bild { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 2.6;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%); mask-image: linear-gradient(to top, transparent 0%, #000 45%); -webkit-mask-composite: source-over; mask-composite: add; }
  .start .breite { margin-top: -70px; }
  .start-schalter { top: 0; left: 0; right: 0; width: auto; aspect-ratio: 4 / 2.6; transform: none; display: grid; place-items: center; padding-bottom: 16%; }
  .start-schalter svg { width: 26%; }
  .logo-start { width: 230px; margin-bottom: 32px; }
  .ueber-uns .breite { grid-template-columns: 1fr; gap: 44px; }
  .karten { grid-template-columns: 1fr 1fr; }
  .wege { grid-template-columns: 1fr; }
  .portraet { max-width: 460px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .breite { padding: 0 20px; }
  header .tel-oben { font-size: 0; gap: 0; padding: 10px; }  /* am Handy nur das Telefonzeichen im weißen Kreis */
  header .tel-oben::before { width: 18px; height: 18px; }
  .karten { grid-template-columns: 1fr; }
  .knopf { width: 100%; justify-content: center; }
  .karte.anruf .knopf { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Visitenkarten-Seite /kontakt (Ziel des QR-Codes) */
body.visitenkarte { background: radial-gradient(700px 420px at 50% 0%, rgba(149,18,9,.4), transparent 70%), var(--schwarz); min-height: 100vh; }
.vk { max-width: 420px; margin: 0 auto; padding: 56px 24px 40px; text-align: center; }
.vk-logo { width: 240px; margin: 0 auto 32px; }
.vk h1 { font-size: 24px; letter-spacing: -0.02em; }
.vk-ort { color: var(--grau); font-size: 16px; margin-top: 6px; }
.aktionen { display: grid; gap: 10px; margin-top: 34px; }
.aktionen a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; background: var(--kachel);
  color: var(--text); font-size: 17px; font-weight: 600; border: 1px solid rgba(255,255,255,.08); }
.aktionen a.haupt { background: #fff; color: #000; border-color: #fff; }
.aktionen svg { width: 20px; height: 20px; }
.vk-fuss { margin-top: 34px; font-size: 13px; color: var(--grau); }
.vk-fuss a { font-weight: 400; color: var(--grau); }