/* Malermeister Michael Reiners GmbH – Aussehen aller Seiten.
   Fassung 4 (31.10.2026, Marc: „noch zu verspielt und nicht passend zu einem Traditionsunternehmen“): Überschriften in
   Serifenschrift (Source Serif 4, lokal), Weiß und Logo-Blau, Gelb/Rot nur als feine Akzente, kein Beige mehr.
   Fassung 2 (31.10.2026, Marc: „ok, aber nicht der Wahnsinn“): kräftiger, plakativer, Logo-Streifen als Bildsprache,
   große Typografie, Laufband, Bewegung nur per CSS (kein JavaScript, siehe _headers). */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --blau: #28348b;
  --nacht: #121947;      /* tiefes Logo-Blau für dunkle Flächen */
  --gelb: #fcd116;
  --rot: #d10a11;
  --creme: #f5f6f9;      /* helles, kühles Grau für Wechselflächen (vorher Beige, Marc: woher kommt das?) */
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;  /* nur noch eine Schrift (Marc 31.10.2026: „viel zu unruhig“) */
  --text: #16181d;
  --grau: #61646b;
  --linie: rgba(18,25,71,.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
       color: var(--text); background: #fff; font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--blau); text-decoration: none; font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
.breite { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.schmal { max-width: 760px; margin: 0 auto; padding: 0 24px; }
section { padding: 130px 0; position: relative; }
.mitte { text-align: center; }

/* Kopfleiste */
header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.88);
         backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
         border-bottom: 1px solid rgba(0,0,0,.06); }
header .breite { display: flex; align-items: center; height: 72px; }
header .logo img { height: 46px; width: auto; }
/* Oben das volle Logo „Michael Reiners Malermeister“, beim Scrollen nur noch die Dreiecke (kopf.js setzt .klein) */
header .logo { display: grid; align-items: center; }
header .logo > img { grid-area: 1 / 1; transition: opacity .3s ease, transform .3s ease; transform-origin: left center; }
header .logo .logo-voll { height: 52px; width: auto; }
header .logo .logo-zeichen { height: 40px; width: auto; opacity: 0; transform: scale(.85); }
header.klein .logo .logo-voll { opacity: 0; transform: scale(.85); pointer-events: none; }
header.klein .logo .logo-zeichen { opacity: 1; transform: none; }
header .logo img[src="/logo-reiners.svg"] { height: 46px; }
nav { display: flex; gap: 30px; font-size: 15px; margin-left: auto; margin-right: 26px; }
nav a { color: var(--text); font-weight: 400; position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--gelb); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
nav a:hover::after { transform: scaleX(1); }
header .logo + .knopf-klein { margin-left: auto; }
/* Telefon oben als schlichter Text statt Kasten (Marc 31.10.2026: „Der Kasten ist nicht schön“) */
.knopf-klein { font-size: 16px; font-weight: 600; color: var(--nacht); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.knopf-klein::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("/telefon.svg") center / contain no-repeat; mask: url("/telefon.svg") center / contain no-repeat; }
.knopf-klein:hover { color: var(--blau); }
/* Erster Kontakt per E-Mail (Marc 31.10.2026: Anrufe erreichen uns auf der Baustelle und gehen unter) */
.knopf-klein.mail::before { -webkit-mask-image: url("/mail.svg"); mask-image: url("/mail.svg"); }
.streifen { height: 6px; background: linear-gradient(90deg, var(--blau) 0 50%, var(--gelb) 50% 88%, var(--rot) 88%); }

/* Typografie */
.ueber { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--blau); margin-bottom: 14px; }
.ueber::before { content: ""; width: 24px; height: 2px; background: var(--gelb); }
h1, h2 { color: var(--nacht); font-family: var(--serif); font-weight: 600; letter-spacing: -0.025em; }
h1 { font-size: clamp(56px, 10vw, 148px); line-height: .92; }
h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; }
.lead { font-size: clamp(19px, 2vw, 23px); line-height: 1.45; color: var(--grau); font-weight: 400; }

/* Knöpfe */
.knoepfe { display: flex; gap: 14px; margin-top: 42px; flex-wrap: wrap; }
.knopf { display: inline-flex; align-items: center; gap: 10px; background: var(--nacht); color: #fff; font-size: 16px; font-weight: 600; padding: 15px 28px; border-radius: 4px; transition: transform .2s, background .2s; }
.knopf:hover { background: var(--blau); }
.knopf.hell { background: transparent; color: var(--nacht); box-shadow: inset 0 0 0 2px var(--nacht); }
.knopf.hell:hover { background: var(--nacht); color: #fff; }

/* ---------- Startbereich: ruhig, volles Logo mit Spruch mittig, oben in der Leiste nur das Zeichen
   (Marc 31.10.2026: „sehr unruhig … zu viel Banner“, Laufband, Siegel und Streifenmuster entfernt) ---------- */
.start { background: #fff; padding: 70px 0 110px; border-bottom: 1px solid var(--linie); }
.jubilaeum { display: inline-block; font-size: 13px; font-weight: 600; color: var(--blau); letter-spacing: .18em; text-transform: uppercase; }
.jubilaeum b { font-weight: 600; }
/* Logo-Film (langer Film werkstatt.mp4 aus Reiners Planung: Zeichen dreht sich, dann schreibt sich der Name mit Spruch,
   gekürzt auf 22 Sekunden, Hintergrund aufgehellt); er bleibt am Ende auf dem fertigen Logo stehen. Das SVG-Logo
   erscheint nur bei „Bewegung reduzieren“. Kleiner als früher (Marc 31.10.2026: „zu groß und präsent“). */
.logo-buehne { width: min(100%, 540px); margin: 10px auto 28px; }
.film { display: block; width: 100%; height: auto;
  /* „multiply“ rechnet den Film in die Seite ein: Weiß bleibt exakt Seiten-Weiß, auch wenn ein Handy-Display Videos
     sonst heller darstellt (Marc 31.10.2026: auf dem Screenshot sauber, „in der Anzeige nicht“) */
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
.marke { display: none; width: 100%; }
.start h1 { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; font-weight: 400; color: var(--grau); letter-spacing: 0; max-width: 900px; margin: 0 auto; }
.start .lead { margin-top: 18px; }
.start .knoepfe { justify-content: center; }

/* ---------- Leistungen als große Liste ---------- */
.leistungen .breite { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.leistungen .kopf { position: sticky; top: 120px; }
.leistungen .kopf .lead { margin-top: 26px; }
.liste { list-style: none; border-top: 1px solid var(--nacht); }
.liste li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 6px 18px; padding: 28px 18px 28px 6px; border-bottom: 1px solid var(--linie); isolation: isolate; }
.liste .nr { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--grau); padding-top: 6px; grid-row: span 2; }
.liste h3 { font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); letter-spacing: -0.01em; font-weight: 600; color: var(--nacht); }
.liste p { color: var(--grau); font-size: 16.5px; max-width: 560px; }

/* ---------- Zahlen ---------- */
.zahlen { background: #fff; padding: 100px 0; border-top: 1px solid var(--linie); }
.zahlen .breite { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.zahl b { display: block; font-family: var(--serif); font-size: clamp(44px, 5vw, 68px); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--nacht); }
.zahl span { display: block; margin-top: 14px; font-size: 17px; color: var(--grau); font-weight: 400; border-top: 1px solid var(--linie); padding-top: 14px; }

/* ---------- Geschichte ---------- */
.geschichte { background: var(--creme); padding-top: 0; }
.buehne { position: relative; height: min(78vh, 720px); overflow: hidden; }
.buehne img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(.85) contrast(1.05); }
.buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,25,71,.05) 30%, rgba(18,25,71,.88)); }
.buehne .ueberschrift { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 2; color: #fff; }
.buehne .ueber { color: var(--gelb); }
.buehne h2 { color: #fff; max-width: 900px; }
.zeitleiste { list-style: none; margin-top: 90px; }
.zeitleiste li { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 34px 0; border-top: 1px solid var(--linie); align-items: baseline; }
.zeitleiste .jahr { font-family: var(--serif); font-size: clamp(42px, 4.4vw, 60px); font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: var(--nacht); }
.zeitleiste h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--nacht); margin-bottom: 8px; letter-spacing: -0.02em; }
.zeitleiste p { color: var(--grau); font-size: 17.5px; max-width: 640px; }

/* Archiv */
.archiv-kopf { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 56px; flex-wrap: wrap; }
.archiv-kopf .lead { max-width: 420px; }
.archiv { columns: 4; column-gap: 20px; }
.archiv figure { break-inside: avoid; margin-bottom: 20px; background: #fff; padding: 10px 10px 12px; border: 1px solid var(--linie); }
.archiv figure:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(18,25,71,.2); z-index: 2; position: relative; }
.archiv img { border-radius: 2px; width: 100%; }
figcaption { font-size: 14px; color: var(--grau); margin-top: 12px; font-weight: 400; }

/* ---------- Ablauf ---------- */
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 70px; counter-reset: schritt; }
.schritt { padding: 30px 28px 10px 0; border-top: 1px solid var(--nacht); margin-right: 20px; }
.schritt::before { counter-increment: schritt; content: counter(schritt) "."; display: block; font-family: var(--serif); font-size: 22px; color: var(--grau); margin-bottom: 12px; }
.schritt h3 { font-family: var(--serif); font-weight: 600; font-size: 23px; color: var(--nacht); margin-bottom: 10px; }
.schritt p { color: var(--grau); font-size: 16.5px; }

/* ---------- Werte ---------- */
.werte-band { background: var(--creme); }
.werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 64px; }
.wert { background: #fff; border-top: 2px solid var(--nacht); padding: 34px 30px 36px; }
.wert h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--nacht); margin-bottom: 12px; }
.wert p { color: var(--grau); font-size: 16.5px; }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--nacht); color: #fff; overflow: hidden; }
.kontakt h2 { color: #fff; }
.kontakt .ueber { color: var(--gelb); }
.kontakt .lead { color: rgba(255,255,255,.72); margin-top: 24px; max-width: 620px; }
.telefon { display: inline-block; margin-top: 44px; font-family: var(--serif); font-size: clamp(40px, 6vw, 80px); font-weight: 400; letter-spacing: -0.01em; line-height: 1; color: #fff; position: relative; }
.mail-gross { font-size: clamp(30px, 5vw, 64px); overflow-wrap: anywhere; }
.telefon.mail-gross:hover { color: var(--gelb); }
.speichern .mail-knopf { margin: 0 10px 10px 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 961px) { .speichern .knopf.mail-knopf { display: inline-flex; margin-bottom: 26px; } }
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 70px; position: relative; }
.weg { display: block; border-top: 1px solid rgba(255,255,255,.25); padding-top: 22px; color: #fff; }
.weg span { display: block; font-size: 13px; color: var(--gelb); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.weg b { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.weg small { display: block; margin-top: 6px; font-size: 15px; color: rgba(255,255,255,.6); font-weight: 400; }
a.weg:hover b { color: var(--gelb); }

/* Rechtliches (Impressum, Datenschutz, 404) */
.recht { padding: 80px 0 110px; }
.recht h1 { font-size: clamp(40px, 6vw, 64px); margin-bottom: 30px; }
.recht h2 { font-size: 21px; letter-spacing: -0.01em; margin: 34px 0 10px; color: var(--text); font-weight: 600; }
.recht p, .recht li { font-size: 16px; color: #333; margin-bottom: 10px; }
.recht ul { padding-left: 22px; }
.stand { margin-top: 30px; color: var(--grau) !important; }

/* Fußzeile */
footer { background: #0b102f; padding: 34px 0 40px; font-size: 13.5px; color: rgba(255,255,255,.55); }
footer .breite { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
footer nav { display: flex; margin: 0; font-size: 13.5px; }
footer nav a { color: rgba(255,255,255,.75); }

/* 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 22%; }
  @keyframes auftauchen { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  .buehne img { animation: zoomen linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes zoomen { from { transform: scale(1.12); } to { transform: scale(1); } }
}

/* Handy und Tablet */
@media (max-width: 960px) {
  header nav { display: none; }
  header .breite { height: 64px; }
  header .logo .logo-voll { height: 42px; }
  header .logo .logo-zeichen { height: 32px; }
  header .knopf-klein { font-size: 0; gap: 0; padding: 10px; }  /* am Handy nur das Telefonzeichen, sonst stößt es an den Namen */
  header .knopf-klein::before { width: 22px; height: 22px; }
  header .knopf-klein { margin-left: auto; }
  section { padding: 90px 0; }
  .start { padding: 40px 0 80px; }
  .logo-buehne { margin: 26px auto 30px; }
  .leistungen .breite { grid-template-columns: 1fr; gap: 40px; }
  .leistungen .kopf { position: static; }
  .zahlen .breite { grid-template-columns: 1fr; gap: 30px; }
  .zeitleiste li { grid-template-columns: 1fr; gap: 10px; }
  .archiv { columns: 2; column-gap: 14px; }
  .schritte, .werte, .wege { grid-template-columns: 1fr; }
  .schritte { gap: 24px; }
  .buehne { height: 70vh; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .liste li { grid-template-columns: 40px 1fr; padding: 22px 6px; }
  .knopf { padding: 15px 24px; font-size: 16px; }
  .archiv figure:nth-child(n) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .film { display: none; }
  .marke { display: block; }
}

/* Kontakt speichern (vCard) und QR-Code zur Visitenkarten-Seite /kontakt (Marc 31.10.2026: „Genauso wie bei MT KI“).
   Am Computer der QR-Code, am Handy der Knopf. */
.speichern { margin-top: 44px; }
.knopf.hell-auf-dunkel { background: #fff; color: var(--nacht); }
.knopf.hell-auf-dunkel:hover { background: var(--gelb); }
.qr { display: none; align-items: center; gap: 22px; }
.qr img { width: 132px; height: 132px; background: #fff; padding: 10px; border-radius: 6px; }
.qr figcaption { color: rgba(255,255,255,.75); font-size: 15px; max-width: 260px; margin: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  .speichern .knopf { display: none; }
  .qr { display: flex; }
}
/* Visitenkarten-Seite */
body.visitenkarte { background: var(--creme); }
.vk { max-width: 420px; margin: 0 auto; padding: 56px 24px 40px; text-align: center; }
.vk-logo { width: 260px; margin: 0 auto 30px; }
.vk h1 { font-size: 24px; letter-spacing: -0.02em; }
.vk-ort { color: var(--grau); font-size: 16px; margin-top: 6px; }
.aktionen { display: grid; gap: 12px; margin-top: 34px; }
.aktionen a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 8px; background: #fff;
  color: var(--text); font-size: 17px; font-weight: 600; border: 1px solid var(--linie); }
.aktionen a.haupt { background: var(--nacht); color: #fff; border-color: var(--nacht); }
.aktionen svg { width: 20px; height: 20px; }
.vk-fuss { margin-top: 34px; font-size: 13px; color: var(--grau); }

/* Häufige Fragen (aufklappbar ohne JavaScript) */
.faq { margin-top: 48px; max-width: 860px; border-top: 1px solid rgba(40,52,139,.18); }
.faq details { border-bottom: 1px solid rgba(40,52,139,.18); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 44px 24px 0; position: relative; font-size: 20px; font-weight: 600; color: var(--nacht); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 400; color: var(--blau); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 44px 26px 0; max-width: 720px; }
@media (max-width: 760px) { .faq summary { font-size: 18px; } }

/* Betriebsfoto nach dem Start */
.betrieb { padding: 0; }
.betrieb .buehne img { object-position: center 62%; filter: none; }
.betrieb .buehne::after { background: linear-gradient(180deg, rgba(18,25,71,0) 45%, rgba(18,25,71,.75)); }
/* Handy: ganzes Foto ohne Zuschnitt, Text darunter (Marc: „blöder Ausschnitt“) */
@media (max-width: 760px) {
  .betrieb .buehne { height: auto; background: var(--nacht); }
  .betrieb .buehne img { height: auto; animation: none; }
  .betrieb .buehne::after { display: none; }
  .betrieb .buehne .ueberschrift { position: static; padding: 26px 0 30px; }
}

/* Vorher/Nachher Dach (31.10.2026) */
.vorher-nachher { padding: 90px 0; }
.vorher-nachher .paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; max-width: 900px; }
.vorher-nachher figure { margin: 0; position: relative; }
.vorher-nachher img { width: 100%; height: auto; display: block; border-radius: 10px; aspect-ratio: 3/4; object-fit: cover; }
.vorher-nachher figcaption { position: absolute; left: 12px; top: 12px; background: rgba(0,0,0,.65); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; }
@media (max-width: 520px) { .vorher-nachher .paar { gap: 8px; } }

/* Vorher/Nachher zum Schieben (vergleich.js, Marc 31.10.2026) */
.vergleich { --pos: 50%; position: relative; max-width: 620px; margin-top: 32px; border-radius: 20px; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; aspect-ratio: 3 / 4; }
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vergleich .vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vergleich .griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.35); }
.vergleich .griff::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #121947; display: grid; place-items: center; font-weight: 600; font-size: 20px; letter-spacing: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.vergleich .schild { position: absolute; top: 16px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.92); color: #121947; font-size: 14px; font-weight: 600; }
.vergleich .schild.links { left: 16px; } .vergleich .schild.rechts { right: 16px; }
.vergleich:focus-visible { outline: 3px solid #fcd116; outline-offset: 3px; }
.hinweis { max-width: 620px; text-align: center; color: #8a8ea0; font-size: 14px; margin-top: 14px; }