/* ==========================================================================
   Malermeisterin Ott, Melsungen — Portfolio-Seite 4 von 4 zur Agenturseite
   `handwerk` (Eberhard Media). Erfundener Betrieb, erfundene Person.

   DIE THESE: Die Seite ist ein Anstrich. Ordnung machen nicht Karten,
   Kästen oder Schatten, sondern FLÄCHEN — jeder Abschnitt ist ein Band
   über die volle Breite (Gelb, Weiß, Creme, Schwarz), und der Wechsel der
   Fläche ist der Abschnittswechsel. Es gibt in dieser Datei keinen
   `box-shadow` und keine Karte; die einzige Rundung sind 4 px auf Knöpfen
   und Feldern. Bewegung gibt es genau eine: Farbe streicht sich über etwas
   (Held, Überschriften, Baustellenfotos, Wand in der Farbberatung).

   ABGRENZUNG zu den drei Geschwisterseiten — was hier bewusst FEHLT:
   kein Video und kein Anthrazit (dach), keine Karten, Pillen, Schatten
   und kein Blau (elektro), keine Serife, kein Papierton und kein
   waagerechtes Band (tischlerei), kein eigener Zeiger und kein Laufband
   (die Agenturseite selbst).

   Reihenfolge: Werte · Schriften · Grundlage · Kopf · Held · Bänder ·
   Leistungen · Baustellen · Farbberatung · Über mich · Stimmen ·
   Termin (Streifen + Formular) · Fuß · Pflichtseiten · Erscheinen ·
   Ruhe-Fassung.
   ========================================================================== */

/* --- Schriften (selbst gehostet, CSP font-src 'self') ---------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/portfolio/maler/assets/fonts/bricolage-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/portfolio/maler/assets/fonts/bricolage-var-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("/portfolio/maler/assets/fonts/dmsans-var-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("/portfolio/maler/assets/fonts/dmsans-var-latin-ext.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Werte ---------------------------------------------------------------- */
:root {
  --weiss: #ffffff;
  --gelb: #f2c230;          /* FLÄCHE, nicht Akzent. Kommt aus der Attrappe
                                auf der Agenturseite und ist dort schon Ott. */
  --gelb-tief: #d9a916;     /* nur Ränder und Zustände auf Gelb */
  --schwarz: #111111;       /* Schrift, Knöpfe, das eine dunkle Band */
  /* --creme (#fbf6ea) war bis zum 2026-09-10 die zweite Fläche unter den
     Baustellen. Seither sind alle hellen Bänder weiß und das Terminband gelb;
     die Farbe wird nirgends mehr gebraucht. */
  --grau: #6b6b6b;          /* 5,3:1 auf Weiß — nicht heller setzen */
  --linie: #e6e1d6;

  /* Die Farbkarte der Beratung. Sonst kommt keine weitere Farbe vor. */
  --salbei: #9ba88d;
  --terrakotta: #c4714f;
  --graublau: #7f93a6;
  --sand: #d9c7a3;
  --nachtblau: #2f3a4f;

  --titel: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --mass: 720px;            /* Textbreite. Eine Spalte, sonst nichts. */
  --breit: 1240px;          /* nur Held, Leistungen, Farbberatung, Über mich */
  --rand: clamp(1.25rem, 6vw, 4.5rem);
  --kopf: 68px;
  --luft: clamp(84px, 10vw, 128px);   /* Innenabstand eines Bands. Zwischen
                                          zwei Bändern liegt NICHTS — der
                                          Farbwechsel ist die Trennung. */
  --rund: 4px;
  --kurve: cubic-bezier(.2, .8, .3, 1);
}

/* ==========================================================================
   Grundlage
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:focus-within { scroll-padding-top: calc(var(--kopf) + 16px); }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--schwarz);
  outline-offset: 3px;
}
.held__farbe :focus-visible { outline-color: currentColor; }

h1, h2, h3 {
  font-family: var(--titel);
  font-weight: 700;
  font-stretch: 90%;
  letter-spacing: -0.015em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-stretch: 95%; line-height: 1.2; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.kicker {
  font-family: var(--text);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}

.springen {
  position: absolute;
  left: -9999px;
  background: var(--schwarz);
  color: var(--weiss);
  padding: .75rem 1rem;
  z-index: 100;
}
.springen:focus { left: 1rem; top: 1rem; }

/* Knöpfe. Eckig bis auf 4 px, nie mit Schatten. */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 1.05rem 1.6rem;
  border: 2px solid var(--schwarz);
  border-radius: var(--rund);
  background: var(--schwarz);
  color: var(--weiss);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--kurve), color .18s var(--kurve);
}
.knopf:hover { background: transparent; color: var(--schwarz); }
.knopf--offen { background: transparent; color: var(--schwarz); }
.knopf--offen:hover { background: var(--schwarz); color: var(--weiss); }

.tel-link {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
}

/* ==========================================================================
   Kopf — weiß, Haarlinie, klebt. Kein Burger: die Anker stehen als Zeile.
   ========================================================================== */
.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  max-width: var(--breit);
  margin: 0 auto;
  padding: 0 var(--rand);
  height: var(--kopf);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.marke {
  font-family: var(--titel);
  font-weight: 700;
  font-stretch: 92%;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.marke__fleck {
  width: 14px;
  height: 14px;
  background: var(--gelb);
  flex: none;
}
.marke b { font-weight: 700; }
.marke span { font-weight: 400; color: var(--grau); }

.nav { margin-left: auto; position: relative; overflow-x: clip; } /* der Strich steht außerhalb der scrollenden Liste; ohne Clip machte er die Seite auf dem Telefon 60 px breiter, sobald „Termin" aktiv war (2026-09-12) */
.nav ul {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  padding: .35rem 0;
  display: block;
  color: var(--grau);
  transition: color .18s var(--kurve);
}
.nav a:hover { color: var(--schwarz); }
.nav a[aria-current="true"] { color: var(--schwarz); font-weight: 700; }

/* Der gelbe Unterstrich wandert. Ohne Skript steht er nicht — dann trägt
   der aktive Punkt nur sein Fettgewicht. */
.nav__strich {
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 4px;
  width: var(--u-b, 0);
  translate: var(--u-x, 0) 0;
  background: var(--gelb);
  transition: translate .3s var(--kurve), width .3s var(--kurve);
  pointer-events: none;
}

.kopf__tel { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.kopf__tel .tel-link { border-bottom-width: 2px; }

/* ==========================================================================
   Held — der Bildschirm ist zur Hälfte gestrichen.
   ========================================================================== */
.held {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: calc(100svh - var(--kopf));
  position: relative;
  isolation: isolate;
}

.held__flaeche { position: relative; display: flex; }

/* Das Farbfeld selbst. Der Clip liegt auf DIESEM Kind, nie auf einem
   Rahmen, den der IntersectionObserver beobachtet (Chromium rechnet einen
   clip-path in die Sichtbarkeit ein — ein geclipptes Element käme nie an). */
.held__farbe {
  position: absolute;
  inset: 0;
  background: var(--gelb);
  z-index: -1;
}
.held__inhalt {
  padding: clamp(2.5rem, 6vw, 5rem) var(--rand);
  max-width: calc(var(--breit) / 2 + var(--rand));
  margin-left: auto;
  align-self: center;
  width: 100%;
}
.held h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-stretch: 90%;
  font-weight: 700;
  margin: 0 0 1.5rem;
  max-width: 12ch;
}
.held__satz {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  max-width: 34ch;
  margin-bottom: 2.25rem;
  font-weight: 500;
}
.held__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
}
.held__aktion .knopf:hover { color: var(--schwarz); background: transparent; }
.held__marke {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2.5rem;
  font-size: .875rem;
  font-weight: 500;
}
.held__marke b { font-weight: 700; }

.held__bild { position: relative; overflow: hidden; }
.held__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 28%;
}

/* Der Anstrich beim Laden: das Gelb rollt von links nach rechts, mit einer
   leicht unruhigen rechten Kante — eine Rollerbahn, kein Wisch. Die Kante
   entsteht aus dem Polygon, nicht aus einer Maske; die Bahn selbst ist die
   registrierte Eigenschaft --strich, die sich animieren lässt.

   Fällt @property aus, ist `clip-path` ungültig und damit `none`: das Gelb
   steht sofort ganz da. Das ist genau die richtige Ersatzfassung. */
@property --strich {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
.js .held__farbe {
  clip-path: polygon(
    0 0,
    calc(var(--strich) + 9px) 0%,
    calc(var(--strich) - 7px) 14%,
    calc(var(--strich) + 12px) 30%,
    calc(var(--strich) - 9px) 47%,
    calc(var(--strich) + 10px) 63%,
    calc(var(--strich) - 6px) 80%,
    calc(var(--strich) + 11px) 100%,
    0 100%
  );
  animation: streichen 900ms cubic-bezier(.42, 0, .18, 1) both;
}
@keyframes streichen {
  from { --strich: 0%; }
  /* 103 %, nicht 100 %: die unruhige Kante zieht einzelne Punkte um bis zu
     9 px nach links, und bei genau 100 % bliebe davon eine Kerbe am rechten
     Rand des Farbfelds stehen. */
  to   { --strich: 103%; }
}
/* Der Text kommt nach dem Anstrich, 200 ms versetzt, Zeile für Zeile. Die
   Verzögerung steht als nth-child in der Datei, nicht als style-Attribut —
   die CSP lässt keinen Inline-Stil zu. */
.js .held__inhalt > * { animation: auf-steigen 620ms var(--kurve) both; }
.js .held__inhalt > :nth-child(1) { animation-delay: 700ms; }
.js .held__inhalt > :nth-child(2) { animation-delay: 790ms; }
.js .held__inhalt > :nth-child(3) { animation-delay: 870ms; }
.js .held__inhalt > :nth-child(4) { animation-delay: 950ms; }
.js .held__inhalt > :nth-child(5) { animation-delay: 1030ms; }
.js .held__bild img { animation: bild-auf 900ms 700ms var(--kurve) both; }

@keyframes auf-steigen {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes bild-auf {
  from { opacity: 0; scale: 1.04; }
  to   { opacity: 1; scale: 1; }
}

/* ==========================================================================
   Bänder — die einzige Ordnung dieser Seite.
   ========================================================================== */
.band { padding: var(--luft) 0; }
.band--weiss { background: var(--weiss); }
.band--gelb  { background: var(--gelb); }
.band--gelb .kicker { color: inherit; }
.band--weiss .kicker { color: var(--grau); }

.spur { max-width: var(--mass); margin: 0 auto; padding: 0 var(--rand); }
.spur--breit { max-width: var(--breit); }

.band__kopf { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.band__kopf p { color: var(--grau); max-width: 46ch; margin-top: 1.25rem; }
.band--gelb .band__kopf p { color: inherit; }

/* Die Überschrift wird freigegeben: ein gelber Balken zieht sich über die
   Zeile und lässt den Text stehen. Der Clip liegt auf dem inneren <span>,
   nie auf dem Rahmen, den der Observer beobachtet. */
/* Etwas Luft oben und unten, damit `overflow: hidden` keine Unterlänge
   abschneidet; der Rand wird per negativem margin wieder eingezogen. */
.h2 {
  position: relative;
  display: block;
  overflow: hidden;
  padding: .06em 0 .14em;
  margin: -.06em 0 -.14em;
}
.h2 > span { display: block; }
.h2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gelb);
  translate: -101% 0;
  pointer-events: none;
}
.band--gelb .h2::after { background: var(--schwarz); }

.js.hat-io .h2 > span { clip-path: inset(0 100% 0 0); }
.ist-da .h2 > span { animation: text-frei 420ms 180ms var(--kurve) forwards; }
.ist-da .h2::after { animation: balken 620ms var(--kurve) forwards; }
@keyframes text-frei {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 -.2em 0 0); }
}
@keyframes balken {
  0%   { translate: -101% 0; }
  38%  { translate: 0 0; }
  62%  { translate: 0 0; }
  100% { translate: 101% 0; }
}

/* ==========================================================================
   „Was ich mache" — links klebt das gelbe Quadrat mit der Nummer.
   ========================================================================== */
.machen {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.machen__marke {
  position: sticky;
  top: calc(var(--kopf) + clamp(2rem, 6vw, 5rem));
}
.machen__quadrat {
  width: 148px;
  height: 148px;
  background: var(--gelb);
  display: grid;
  place-items: center;
  font-family: var(--titel);
  font-weight: 700;
  font-stretch: 88%;
  font-size: 4.25rem;
  line-height: 1;
  color: var(--schwarz);
  font-variant-numeric: tabular-nums;
}
.machen__wort {
  margin-top: 1rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
}

.leistung {
  display: grid;
  /* Nummer · Text · Foto. Das Foto ist randlos wie überall hier — kein
     Rahmen, kein Schatten, nur die Fläche. */
  grid-template-columns: 3.5rem minmax(0, 1fr) clamp(190px, 22vw, 300px);
  gap: 0 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--linie);
  align-items: start;
}
.leistung:last-child { border-bottom: 1px solid var(--linie); }
.leistung__nr {
  font-family: var(--titel);
  font-weight: 700;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  color: var(--grau);
  padding-top: .3rem;
}
.leistung h3 { margin-bottom: .5rem; }
.leistung p { color: var(--grau); max-width: 48ch; }
.leistung__bild { margin: 0; overflow: hidden; }
.leistung__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.92);
  transition: filter .5s var(--kurve), scale .5s var(--kurve);
}
.leistung.ist-dran .leistung__bild img { filter: saturate(1.06); }
.leistung__linie {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--gelb);
  margin-top: 1.25rem;
  width: 0;
  transition: width .5s var(--kurve);
}
.leistung.ist-dran .leistung__linie { width: 4rem; }
.leistung.ist-dran .leistung__nr { color: var(--schwarz); }

.machen__fuss {
  margin-top: 2.5rem;
  color: var(--grau);
  font-size: .9375rem;
  grid-column: 2;
}

/* ==========================================================================
   Drei Baustellen — randlose Fotos nebeneinander, zwei Zeilen darunter.
   Bis zum 2026-09-11 standen die drei untereinander, jedes über die volle
   Breite; auf Wunsch von Maxim stehen sie jetzt in einer Reihe. Unter 800 px
   wieder untereinander — drei Fotos auf je 250 px zeigen keine Baustelle.
   ========================================================================== */
.baustellen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: start; }
@media (max-width: 800px) { .baustellen { grid-template-columns: 1fr; gap: clamp(3rem, 6vw, 5rem); } }
.baustelle { margin: 0; }
.baustelle__bild { overflow: hidden; }
.baustelle__bild img { width: 100%; }
.js.hat-io .baustelle__bild img { clip-path: inset(100% 0 0 0); }
.ist-da .baustelle__bild img { animation: bild-frei 700ms var(--kurve) forwards; }
@keyframes bild-frei {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* Zwei Zeilen, wie im Brief: Was steht oben links, Wo steht auf derselben
   Höhe am rechten Bildrand, die Dauer darunter. */
.baustelle__zeilen {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem 2rem;
  align-items: baseline;
  padding-top: 1.25rem;
}
.baustelle__zeilen h3 { grid-column: 1; }
.baustelle__zeilen p { color: var(--grau); font-size: .9375rem; margin: 0; grid-column: 1; }
.baustelle__zeilen .baustelle__wo {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  color: var(--schwarz);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Signatur 1: die Farbberatung. Sechs Fotos derselben Wand, eines je Farbe,
   übereinander; die gewählte Farbe blendet über die vorige.

   Bis zum 2026-09-11 lag hier eine Farbebene in `mix-blend-mode: multiply`
   über einem weißen Foto, beschnitten auf ein von Hand abgemessenes Polygon
   um das Sofa. Das Polygon traf die Silhouette nie ganz — hinter Rückenlehne
   und Armlehnen blieb ein weißer Saum stehen, und genau den hat Maxim
   beanstandet. Jetzt ist jede Farbe ein eigenes Foto, in dem die Wand
   wirklich gestrichen ist, samt Schatten hinter dem Sofa. Wie die sechs
   entstanden sind, steht in assets/img/ERZEUGUNG.md.
   ========================================================================== */
.beratung {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.wand { position: relative; overflow: hidden; }
.wand__bild { position: relative; width: 100%; opacity: 0; transition: opacity .5s var(--kurve); }
.wand__bild:not(:first-child) { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.wand__bild.ist-aktiv { opacity: 1; z-index: 2; }
/* Das vorige Foto bleibt voll stehen, bis das neue darüber angekommen ist —
   sonst schiene für einen Moment der Grund durch zwei halbe Bilder. */
.wand__bild.war-aktiv { opacity: 1; z-index: 1; transition: none; }
.wand__hinweis {
  margin-top: .75rem;
  font-size: .8125rem;
  color: var(--grau);
}

.karte { display: grid; gap: 0; }
.karte__feld {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 1.25rem;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--linie);
  padding: 1rem 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.karte__feld:last-child { border-bottom: 1px solid var(--linie); }
.karte__probe {
  width: 3.25rem;
  height: 3.25rem;
  background: var(--probe);
  grid-row: span 2;
  transition: outline-offset .18s var(--kurve);
  outline: 2px solid transparent;
}
.karte__feld[aria-pressed="true"] .karte__probe { outline-color: var(--schwarz); outline-offset: 3px; }
.karte__feld b { font-weight: 700; font-family: var(--titel); font-stretch: 95%; font-size: 1.0625rem; }
.karte__feld span { color: var(--grau); font-size: .9375rem; }
.karte__feld:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Die sechs Proben. Als Klassen, nicht als style-Attribut — die CSP
   verbietet Inline-Stil, und ein Verstoß fällt lokal nicht auf. */
.probe--salbei { --probe: var(--salbei); }
.probe--terrakotta { --probe: var(--terrakotta); }
.probe--graublau { --probe: var(--graublau); }
.probe--sand { --probe: var(--sand); }
.probe--nachtblau { --probe: var(--nachtblau); }
.probe--gelb { --probe: var(--gelb); }

/* ==========================================================================
   Über mich — Gelb, Porträt links, fünf Sätze rechts.
   ========================================================================== */
.ueber {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
/* Das Porträt steht auf der Unterkante des gelben Bands und wird von ihr
   abgeschnitten. Ohne das säße ein weißes Rechteck im Gelb — und ein
   weißes Rechteck auf einer Fläche ist genau die Karte, die es auf dieser
   Seite nicht geben soll.

   Gemacht wird das nicht mit einem negativen margin am Bild, sondern indem
   das Band unten gar keine Polsterung hat und die Textspalte ihre eigene
   mitbringt. Ein negativer margin hätte an einem Rasterelement nur die
   Zeilenhöhe verkleinert, das Bild aber nicht über die Bandkante gezogen. */
.band--anschnitt { padding-bottom: 0; }
.ueber__bild { align-self: end; }
.ueber > :last-child { align-self: center; padding-bottom: var(--luft); }
.ueber__bild img { width: 100%; }
.ueber__saetze { list-style: none; margin: 0; padding: 0; }
.ueber__saetze li {
  font-family: var(--titel);
  font-weight: 600;
  font-stretch: 95%;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  line-height: 1.35;
  padding: 1rem 0;
  border-top: 1px solid rgba(17, 17, 17, .22);
}
.ueber__saetze li:last-child { border-bottom: 1px solid rgba(17, 17, 17, .22); }
.ueber__unter {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  font-size: .9375rem;
  font-weight: 500;
}

/* ==========================================================================
   Stimmen — drei Zitate, Haarlinien, Sterne-Attrappe.
   ========================================================================== */
.stimmen { list-style: none; margin: 0; padding: 0; }
.stimme {
  padding: 2rem 0;
  border-top: 1px solid var(--linie);
}
.stimme:last-child { border-bottom: 1px solid var(--linie); }
.stimme figure { margin: 0; }
.stimme blockquote {
  margin: 0 0 .85rem;
  font-family: var(--titel);
  font-weight: 600;
  font-stretch: 95%;
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  line-height: 1.3;
}
.stimme figcaption { color: var(--grau); font-size: .9375rem; }
.sterne { display: inline-flex; gap: 2px; vertical-align: -2px; margin-right: .5rem; }
.sterne svg { width: 15px; height: 15px; fill: var(--gelb-tief); }
/* Auf Gelb ist das dunklere Gelb der Sterne nicht mehr zu sehen — dort sind
   sie schwarz, wie jeder andere Text auf dieser Fläche. */
.held__inhalt .sterne svg,
.band--gelb .sterne svg { fill: var(--schwarz); }
.google {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9375rem;
  color: var(--grau);
}

/* ==========================================================================
   Signatur 2: der Zwei-Wochen-Streifen. Vierzehn Tage, heute markiert,
   der erste freie Tag gelb — die Zusage aus der Schlagzeile als Bild.
   Kein Kalender, keine Buchung.
   ========================================================================== */
.streifen {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.tag {
  border: 1px solid rgba(17, 17, 17, .3);
  border-radius: var(--rund);
  padding: .6rem .5rem .7rem;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-size: .8125rem;
  line-height: 1.2;
}
.tag__wt { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; font-size: .6875rem; }
.tag__zahl { font-family: var(--titel); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tag__wort { margin-top: auto; font-size: .6875rem; opacity: .75; }

.tag--belegt {
  /* Schraffur wie in einem Bauzeitenplan; SVG als data:-URI, deshalb steht
     `data:` in der img-src-Regel der CSP. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2 L2 -2 M0 8 L8 0 M6 10 L10 6' stroke='%23111111' stroke-opacity='.28' stroke-width='1.4'/%3E%3C/svg%3E");
  color: rgba(17, 17, 17, .58);
  border-color: rgba(17, 17, 17, .2);
}
.tag--heute { border-color: var(--schwarz); border-width: 2px; }
/* Auf gelbem Grund ist der erste freie Tag die umgekehrte Fläche: schwarz
   gefüllt, gelbe Schrift. Bis zum 2026-09-10 lag das Band auf Schwarz, da war
   es andersherum. */
.tag--frei-ab {
  background: var(--schwarz);
  border-color: var(--schwarz);
  color: var(--gelb);
}
.tag--frei-ab .tag__wt { opacity: .75; }
.tag--frei-ab .tag__wort { opacity: 1; font-weight: 700; }
.streifen__legende {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: .8125rem;
  opacity: .78;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.streifen__legende span { display: inline-flex; align-items: center; gap: .5rem; }
.streifen__legende i { width: 14px; height: 14px; border: 1px solid rgba(17, 17, 17, .4); display: block; }
.streifen__legende i.ist-markiert { background: var(--schwarz); border-color: var(--schwarz); }

/* --- Formular. Felder sind Linien, keine Kästen. -------------------------- */
.formular { display: grid; gap: 1.75rem 1.5rem; grid-template-columns: 1fr 1fr; }
.feld { display: flex; flex-direction: column; gap: .4rem; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-size: .875rem; font-weight: 700; }
.feld input,
.feld select,
.feld textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(17, 17, 17, .38);
  border-radius: 0;
  padding: .6rem 0;
  transition: border-color .18s var(--kurve);
}
.feld textarea { resize: vertical; min-height: 4.5rem; }
.feld select option { color: var(--schwarz); }
.feld input:focus,
.feld select:focus,
.feld textarea:focus { border-bottom-color: var(--schwarz); outline: none; }
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 4px; }
.feld__hilfe { font-size: .8125rem; opacity: .65; }
.feld ::placeholder { color: rgba(17, 17, 17, .48); opacity: 1; }

.fotofeld {
  border: 1px dashed rgba(17, 17, 17, .38);
  border-radius: var(--rund);
  padding: 1rem 1.15rem;
  font-size: .875rem;
  opacity: .8;
}
.formular__fuss {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.formular__fuss p { font-size: .8125rem; opacity: .7; margin: 0; max-width: 44ch; }
.antwort {
  grid-column: 1 / -1;
  border-left: 4px solid var(--schwarz);
  padding: .85rem 0 .85rem 1.15rem;
  font-size: .9375rem;
}
.antwort[hidden] { display: none; }

.preis-zeile {
  margin-top: 2rem;
  font-size: .875rem;
  opacity: .7;
}

/* ==========================================================================
   Fuß
   ========================================================================== */
.fuss {
  background: var(--weiss);
  border-top: 1px solid var(--linie);
  padding: clamp(3rem, 6vw, 4.5rem) 0 3rem;
  font-size: .9375rem;
}
.fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2.5rem;
}
.fuss h2 {
  font-size: .8125rem;
  font-family: var(--text);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: .9rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .35rem; }
.fuss a { text-decoration: none; border-bottom: 1px solid var(--linie); }
.fuss a:hover { border-bottom-color: var(--schwarz); }
.fuss__unten {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  display: grid;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--grau);
}

/* Die untere Leiste auf dem Telefon. Gelb anrufen, schwarz Termin. */
.leiste { display: none; }

/* ==========================================================================
   Pflichtseiten (Impressum, Datenschutz, 404) — dasselbe Band, nur schmal.
   ========================================================================== */
.recht { padding: clamp(3rem, 7vw, 5.5rem) 0 var(--luft); }
.recht h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 1.5rem; }
.recht h2 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); margin: 2.5rem 0 .75rem; }
.recht h3 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; }
.recht p, .recht li { color: #3a3a3a; }
.recht ul { padding-left: 1.2rem; }
.hinweis {
  background: var(--gelb);
  padding: 1.15rem 1.35rem;
  border-radius: var(--rund);
  margin-bottom: 2rem;
  font-weight: 500;
}
.hinweis p { color: var(--schwarz); }

.fehler {
  background: var(--gelb);
  min-height: calc(100svh - var(--kopf));
  display: grid;
  align-content: center;
  padding: var(--luft) 0;
}
.fehler h1 { font-size: clamp(2.75rem, 8vw, 6rem); margin-bottom: 1.25rem; }
.fehler p { max-width: 44ch; font-size: 1.125rem; }
.fehler .knopf { margin-top: 2rem; margin-right: .75rem; }

/* ==========================================================================
   Erscheinen. Animation, nicht Übergang — und nach dem Lauf abgelegt,
   sonst hielte `forwards` das translate fest und jeder spätere Hover-
   Übergang auf demselben Element käme nie an.
   ========================================================================== */
.js.hat-io .zeig { opacity: 0; }
.js.hat-io .zeig.ist-da { animation: auf-steigen 420ms var(--kurve) forwards; }
.js.hat-io .zeig.ist-fertig { animation: none; opacity: 1; }

/* ==========================================================================
   Telefon und schmale Fenster
   ========================================================================== */
@media (max-width: 1000px) {
  .beratung { grid-template-columns: 1fr; }
  /* Gestapelt liegt der Text unter dem Bild — dann trägt wieder das Band
     die Polsterung, nicht die Textspalte. Und das Porträt geht über die
     ganze Breite des Bands: ein weißes Rechteck mitten im Gelb sähe aus
     wie eine Karte, ein Streifen von Kante zu Kante nicht. */
  .ueber { grid-template-columns: 1fr; align-items: stretch; }
  .ueber__bild {
    margin: 0 calc(var(--rand) * -1);
  }
  .ueber__bild img {
    height: 58svh;
    max-height: 420px;
    object-fit: cover;
    object-position: 50% 20%;
  }
  .ueber > :last-child { padding-bottom: 0; }
  .band--anschnitt { padding-bottom: var(--luft); }
  .machen { grid-template-columns: 1fr; }
  .machen__marke { display: none; }
  .machen__fuss { grid-column: 1; }
}

@media (max-width: 800px) {
  :root { --kopf: 108px; }

  .kopf__innen {
    display: block;
    height: auto;
    padding: .7rem var(--rand) 0;
  }
  .kopf__tel { display: none; }
  .nav { margin: .55rem calc(var(--rand) * -1) 0; }
  /* Fünf Punkte, 493 px breit, auf einem 390-px-Telefon: die Zeile scrollt,
     und das muss man sehen. Ohne Hinweis endet sie hart an der Kante, „Über
     mich" ist halbiert und „Termin" existiert für den Leser nicht. Der weiche
     Rand rechts sagt: hier geht es weiter. Die Reserve im padding ist genau
     so breit wie er, damit am rechten Anschlag kein Punkt darunter liegt.
     (Kein scroll-getriebenes Ein- und Ausblenden: Firefox kennt bis heute
     keine Scroll-Timelines, der Hinweis stünde dort nie.) */
  .nav ul {
    gap: 1.15rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 calc(var(--rand) + 26px) .55rem var(--rand);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .nav__strich { bottom: 0; }

  /* Held: Gelb oben, Foto darunter. */
  .held { grid-template-columns: 1fr; min-height: 0; }
  .held__flaeche { min-height: 60svh; }
  .held__inhalt { max-width: none; margin: 0; }
  .held__bild { height: 40svh; }
  .held h1 { max-width: none; }

  .formular { grid-template-columns: 1fr; }
  /* minmax(0, …) statt 1fr: `auto` als Untergrenze wäre die Breite von
     „Wochenende" am Stück, und vier davon passen auf ein 320-px-Telefon
     nicht nebeneinander — der Streifen schöbe die ganze Seite seitwärts. */
  .streifen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tag__wort { overflow-wrap: anywhere; }
  /* Ohne das klebende Quadrat braucht die Nummer keine 3,5 rem mehr. */
  .leistung { grid-template-columns: 2.25rem 1fr; gap: 0 .9rem; }
  .leistung__bild { grid-column: 2; margin-top: 1.25rem; }

  /* Fixierte Leiste unten: anrufen oder Termin. */
  .leiste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    border-top: 1px solid var(--schwarz);
  }
  .leiste a {
    padding: .95rem 1rem;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: .9375rem;
  }
  .leiste__anruf { background: var(--gelb); color: var(--schwarz); }
  .leiste__termin { background: var(--schwarz); color: var(--weiss); }
  .cookie:not([hidden]) ~ .leiste { display: none; } /* solange das Cookie-Banner offen ist, gibt es die Leiste nicht — es lag ohnehin darüber */
  body { padding-bottom: 52px; }
}

@media (max-width: 520px) {
  .baustelle__zeilen { display: block; }
  .baustelle__zeilen p { margin-top: .35rem; }
  .karte__feld { grid-template-columns: 2.5rem 1fr; }
  .karte__probe { width: 2.5rem; height: 2.5rem; }
}

/* ==========================================================================
   Ruhe-Fassung — alles steht, nichts bewegt sich.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .js .held__farbe { clip-path: none; }
  .js.hat-io .zeig { opacity: 1; }
  .js.hat-io .h2 > span,
  .js.hat-io .baustelle__bild img { clip-path: none; }
  .h2::after { display: none; }
}

/* --- Cookie-Banner (seit 2026-09-11) ---------------------------------------
   Das Markup baut cookies.js — dieselbe Datei auf allen fünf Handwerk-Seiten.
   Hier nur das Aussehen, in der Sprache dieser Seite: eine gelbe Fläche mit
   schwarzer Kante und ohne Schatten (die Seite hat keinen einzigen),
   Bricolage im Titel, schwarze Knöpfe wie `.knopf`.
   „Alle akzeptieren" und „Nur notwendige" sind gleich stark — Ablehnen darf
   nicht mühsamer sein als Zustimmen. Unten links, auf dem Telefon unten über
   die volle Breite. `[hidden]` braucht bei `.cookie__details` eine eigene
   Regel, weil `display: grid` die des Browsers schlägt. */
.cookie { position: fixed; z-index: 300; left: var(--rand); bottom: 1.25rem; width: min(30rem, calc(100% - 2 * var(--rand))); background: var(--gelb); color: var(--schwarz); border: 2px solid var(--schwarz); border-radius: var(--rund); font-family: var(--text); opacity: 0; translate: 0 1rem; transition: opacity .35s var(--kurve), translate .35s var(--kurve); }
.cookie--da { opacity: 1; translate: 0 0; }
/* Die Absatzabstände der Seite gelten hier nicht — das Raster setzt sie. */
.cookie p { margin: 0; }
.cookie__innen { display: grid; gap: .85rem; padding: 1.4rem 1.5rem 1.2rem; max-height: calc(100svh - 2.5rem); overflow-y: auto; }
.cookie__titel { font-family: var(--titel); font-weight: 800; font-size: 1.35rem; line-height: 1.05; letter-spacing: -.02em; }
.cookie__text { font-size: .92rem; line-height: 1.55; }
.cookie__text a { color: var(--schwarz); font-weight: 700; }
.cookie__details { display: grid; border-top: 2px solid var(--schwarz); }
.cookie__details[hidden] { display: none; }
.cookie__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding-block: .75rem; border-bottom: 1px solid var(--gelb-tief); }
label.cookie__zeile { cursor: pointer; }
.cookie__art b { display: block; font-weight: 700; font-size: .92rem; }
.cookie__art span { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.45; }
.cookie__immer { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cookie__schalter { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 2.6rem; height: 1.45rem; margin: 0; border: 2px solid var(--schwarz); border-radius: 999px; background: var(--weiss); cursor: pointer; transition: background-color .18s var(--kurve); }
.cookie__schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.45rem - 8px); height: calc(1.45rem - 8px); border-radius: 50%; background: var(--schwarz); transition: translate .18s var(--kurve), background-color .18s var(--kurve); }
.cookie__schalter:checked { background: var(--schwarz); }
.cookie__schalter:checked::after { translate: 1.15rem 0; background: var(--gelb); }
.cookie__schalter:focus-visible, .cookie__knopf:focus-visible, .cookie__text a:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }
.cookie__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie__knopf { flex: 1 1 9rem; padding: .9rem 1rem; border: 2px solid var(--schwarz); border-radius: var(--rund); background: var(--schwarz); color: var(--weiss); font: inherit; font-weight: 700; font-size: .92rem; line-height: 1; cursor: pointer; transition: background-color .18s var(--kurve), color .18s var(--kurve); }
.cookie__knopf:hover { background: transparent; color: var(--schwarz); }
.cookie__knopf--leise { flex: 0 0 auto; background: transparent; border-color: transparent; color: var(--schwarz); text-decoration: underline; text-underline-offset: .25em; }
.cookie--offen .cookie__knopf--leise { flex: 1 1 100%; border-color: var(--schwarz); text-decoration: none; }
.cookie__prototyp { font-size: .75rem; line-height: 1.45; }
@media (max-width: 600px) {
  .cookie { left: 0; right: 0; bottom: 0; width: auto; border-width: 2px 0 0; border-radius: 0; }
  .cookie__innen { padding: 1.2rem var(--rand) 1rem; max-height: 85svh; }
}
.cookie-link { appearance: none; padding: 0; border: 0; border-bottom: 1px solid var(--linie); background: none; font: inherit; color: inherit; cursor: pointer; }
.cookie-link:hover { border-bottom-color: var(--schwarz); }