/* Maler Beck – Entwurf von Seetalwebsites
   Idee: das Turmdach aus dem Logo ist ein Farbfächer. Fünf Dachfarben für fünf Leistungen,
   auf einer frisch gestrichenen violetten Wand. */

:root {
  --wand: #7238C4;
  --wand-dunkel: #5E2BA8;
  --kreide: #F3F1F6;
  --kreide-2: #E8E4EF;
  --linie: #D6D0E0;
  --tinte: rgb(27 21 48 / .92);
  --tinte-2: rgb(27 21 48 / .68);
  --tinte-3: rgb(27 21 48 / .48);
  --hell: rgb(243 241 246 / .96);
  --hell-2: rgb(243 241 246 / .80);
  --hell-3: rgb(243 241 246 / .62);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --rand: 20px;
  --abschnitt: 72px;
  --radius: 6px;
  --lang: 270px;          /* Länge eines Fächer-Streifens */
  --breit: 58px;          /* Breite eines Fächer-Streifens */

  --expo: cubic-bezier(0.19, 1, 0.22, 1);
  --schrift: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 900px) {
  :root { --rand: 40px; --abschnitt: 128px; --lang: min(52vh, 470px); --breit: min(9.5vh, 86px); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--kreide);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, dt, figure, ol, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--wand); outline-offset: 3px; }

.rahmen { width: 100%; max-width: calc(1200px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kopf (liegt auf der Wand) ---------- */
.kopf {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  max-width: calc(1200px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand);
  height: 72px; display: flex; align-items: center; gap: var(--s4);
  color: var(--hell);
}
.marke { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; font-stretch: 108%; }
.marke__dach { width: 30px; height: 21px; }
.kopf__nav { display: none; gap: var(--s4); }
.kopf__nav a { text-decoration: none; font-size: 15px; color: var(--hell-2); transition: color .15s ease-out; }
.kopf__nav a:hover { color: var(--hell); }
@media (min-width: 900px) { .kopf__nav { display: flex; } }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s3);
  border: 0; border-radius: 999px;
  font-size: 16px; font-weight: 550; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease-out, transform .15s ease-out;
}
.knopf:active { transform: scale(.98); }
.knopf--kreide { background: var(--kreide); color: #2E1259; }
.knopf--kreide:hover { background: #FFFFFF; }
.knopf--violett { background: var(--wand); color: var(--kreide); }
.knopf--violett:hover { background: var(--wand-dunkel); }
.knopf--klein { min-height: 44px; padding: 0 var(--s2); font-size: 15px; }
.textlink { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- 1 · Wand ---------- */
.wand {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--wand); color: var(--hell);
}
.wand__inhalt { position: relative; z-index: 2; padding-top: 112px; }
.wand__titel {
  font-weight: 520; font-stretch: 108%;
  font-size: clamp(40px, 10.6vw, 124px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin-left: -0.04em;
}
.zeile { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.zeile > span { display: block; }
.zeile--ort { color: var(--hell-2); }
.wand__satz { margin-top: var(--s3); max-width: 30em; color: var(--hell-2); }
.wand__aktion { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.wand__fakt { font-size: 14px; line-height: 1.45; color: var(--hell-3); }

/* Der Fächer: fünf Streifen drehen um einen Niet */
.faecher {
  position: relative; flex: none;
  height: calc(var(--lang) + var(--s4));
  margin-top: auto;
  pointer-events: none;
}
.niet {
  position: absolute; right: calc(var(--rand) + var(--breit) / 2 - 7px); bottom: calc(var(--s3) - 7px);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--kreide); box-shadow: inset 0 0 0 3px #9B9AA8; z-index: 6;
}
.streifen {
  position: absolute; right: var(--rand); bottom: var(--s3);
  width: var(--breit); height: var(--lang);
  display: flex; flex-direction: column;
  border-radius: var(--radius) var(--radius) calc(var(--breit) / 2) calc(var(--breit) / 2);
  overflow: hidden;
  transform-origin: 50% calc(100% - var(--breit) / 2);
  transform: rotate(var(--a));
  box-shadow: 0 0 0 1px rgb(27 21 48 / .18), 0 6px 16px rgb(27 21 48 / .16);
}
.streifen i { flex: 1; border-bottom: 1px solid rgb(243 241 246 / .7); }
.streifen i:nth-child(1) { flex: 1.5; background: color-mix(in srgb, var(--c) 22%, var(--kreide)); }
.streifen i:nth-child(2) { background: color-mix(in srgb, var(--c) 48%, var(--kreide)); }
.streifen i:nth-child(3) { background: color-mix(in srgb, var(--c) 74%, var(--kreide)); }
.streifen i:nth-child(4) { background: var(--c); border-bottom: 0; }
.streifen b {
  position: absolute; top: 10px; left: 50%;
  writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1;
  color: #1B1530; white-space: nowrap;
}
/* Die zwei flachen Streifen links: Schrift nicht auf dem Kopf */
.streifen:nth-child(-n+2) b { transform: translateX(-50%); }
@media (min-width: 900px) {
  .wand__inhalt { padding-top: 168px; max-width: calc(1200px + 2 * var(--rand)); }
  .wand__satz { font-size: 19px; line-height: 1.5; max-width: 28em; }
  .faecher { position: absolute; inset: auto 0 0 0; height: 100%; max-width: calc(1200px + 2 * var(--rand)); margin: 0 auto; }
  .streifen { bottom: var(--s5); }
  .niet { bottom: calc(var(--s5) - 7px); }
  .streifen b { font-size: 14px; top: 16px; }
}

/* ---------- Abschnitte ---------- */
.block { padding: var(--abschnitt) 0; }
.block--rand { background: var(--kreide-2); }
h2 { font-weight: 500; font-stretch: 106%; font-size: clamp(36px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }
.kopfzeile { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.kopfzeile__text { color: var(--tinte-2); max-width: 30em; }
@media (min-width: 900px) {
  .kopfzeile { grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: var(--s5); }
  .kopfzeile__text { justify-self: end; max-width: 26em; }
}

/* ---------- 2 · Leistungen: jede Zeile mit ihrem Streifen ---------- */
.liste { list-style: none; border-bottom: 1px solid var(--linie); }
.posten { display: grid; gap: var(--s1); padding: var(--s3) 0 var(--s4); border-top: 1px solid var(--linie); }
.posten__muster {
  display: block; height: 12px; width: min(100%, 320px); margin-bottom: var(--s2);
  border-radius: 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c) 22%, var(--kreide)) 0 25%,
    color-mix(in srgb, var(--c) 48%, var(--kreide)) 0 50%,
    color-mix(in srgb, var(--c) 74%, var(--kreide)) 0 75%,
    var(--c) 0);
}
.posten h3 { font-weight: 500; font-stretch: 104%; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.posten p { color: var(--tinte-2); max-width: 34em; }
@media (min-width: 900px) {
  .posten { grid-template-columns: 5fr 7fr; column-gap: var(--s5); padding: var(--s4) 0; align-items: baseline; }
  .posten__muster { grid-column: 1 / -1; }
}

/* ---------- 3 · Arbeiten: ehrliche Platzhalter ---------- */
.platzhalter { display: grid; gap: var(--s4); }
.ph__flaeche {
  aspect-ratio: 3 / 2; display: grid; place-items: center;
  border: 2px dashed color-mix(in srgb, var(--c) 70%, var(--kreide));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c) 10%, var(--kreide));
}
.ph__flaeche span { font-size: 15px; font-weight: 550; color: var(--tinte-2); }
.ph figcaption { margin-top: var(--s2); font-size: 14px; color: var(--tinte-3); }
@media (min-width: 900px) {
  .platzhalter { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .ph__flaeche { aspect-ratio: 4 / 5; }
}

/* ---------- 4 · Ihr Stadtmaler ---------- */
.stadt { display: grid; gap: var(--s4); }
.enthuellen { overflow: hidden; border-radius: var(--radius); background: var(--kreide-2); }
.enthuellen img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.stadt__bild figcaption { margin-top: var(--s2); font-size: 14px; color: var(--tinte-3); }
.stadt__text { display: grid; gap: var(--s3); align-content: start; }
.gross { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.02em; color: var(--tinte); max-width: 22em; }
.stadt__text > p:not(.gross) { color: var(--tinte-2); max-width: 32em; }
.fakten { display: grid; margin-top: var(--s2); border-top: 1px solid var(--linie); }
.fakten > div { display: grid; grid-template-columns: 8em 1fr; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 16px; }
.fakten dt { color: var(--tinte-3); }
@media (min-width: 900px) {
  .stadt { grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: center; }
  .stadt__text h2 { margin-bottom: var(--s1); }
}

/* ---------- 5 · Kontakt ---------- */
.kontakt { background: var(--wand); color: var(--hell); padding: var(--abschnitt) 0; }
.kontakt__titel { color: var(--hell-2); }
.kontakt__mail {
  display: inline-block; margin-top: var(--s2);
  font-weight: 520; font-stretch: 108%;
  font-size: clamp(38px, 8.6vw, 116px); line-height: 1.02; letter-spacing: -0.04em;
  text-decoration: none; color: var(--hell);
  padding-bottom: 6px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat;
  transition: background-size .6s var(--expo);
}
.kontakt__mail:hover { background-size: 100% 2px; }
.kontakt__raster { display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 900px) { .kontakt__raster { grid-template-columns: 7fr 4fr; gap: var(--s6); } }

.anfrage { display: grid; gap: var(--s3); }
.anfrage legend { font-size: 15px; color: var(--hell-2); margin-bottom: var(--s2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 var(--s2) 0 12px;
  border: 1px solid rgb(243 241 246 / .4); border-radius: 999px;
  font-size: 15px; color: var(--hell);
  transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
.chip span::before { content: ""; width: 18px; height: 10px; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1px rgb(243 241 246 / .5); }
.chip:hover span { border-color: var(--hell); }
.chip input:checked + span { background: var(--kreide); color: #2E1259; border-color: transparent; }
.chip input:focus-visible + span { outline: 2px solid var(--kreide); outline-offset: 2px; }

.felder { display: grid; gap: var(--s3); }
@media (min-width: 600px) { .felder { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: var(--s1); min-width: 0; }
.feld > span { font-size: 14px; color: var(--hell-2); }
.feld input, .feld textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: rgb(243 241 246 / .1); color: var(--hell);
  border: 1px solid rgb(243 241 246 / .35); border-radius: var(--radius);
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.feld textarea { resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--kreide); background: rgb(243 241 246 / .16); }
.feld ::placeholder { color: rgb(243 241 246 / .55); }
.anfrage .knopf { justify-self: start; }
.anfrage__hinweis { font-size: 14px; color: var(--hell-3); }

.adresse { display: grid; gap: var(--s2); align-content: start; color: var(--hell-2); font-style: normal; }
.adresse strong { color: var(--hell); font-weight: 600; }
.adresse__klein { font-size: 14px; color: var(--hell-3); }

/* ---------- Fuss ---------- */
.fuss { padding: var(--s4) 0 calc(var(--s6) + env(safe-area-inset-bottom)); font-size: 14px; color: var(--tinte-3); }
.fuss__inhalt { display: grid; gap: var(--s2); }
.fuss__logo { width: 64px; height: auto; }
.fuss a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--tinte-2); text-underline-offset: 4px; }
@media (min-width: 900px) {
  .fuss { padding-bottom: var(--s5); }
  .fuss__inhalt { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); }
}

/* ---------- Schwebende Leiste (erst nach dem Einstieg) ---------- */
.dock {
  position: fixed; left: 50%; bottom: calc(var(--s2) + env(safe-area-inset-bottom)); z-index: 50;
  display: flex; align-items: center; gap: var(--s3);
  padding: 6px 6px 6px var(--s2);
  background: #1B1530; color: var(--hell); border-radius: 999px;
  box-shadow: 0 8px 24px rgb(27 21 48 / .28);
  transform: translate(-50%, calc(100% + var(--s4)));
  transition: transform .6s var(--expo);
  white-space: nowrap;
}
.dock.ist-sichtbar { transform: translate(-50%, 0); }
.dock__marke { display: flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-weight: 600; font-size: 15px; font-stretch: 108%; }
.dock__marke svg { width: 26px; height: 18px; }

/* ---------- Bewegung (nur mit JS und ohne reduzierte Bewegung) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .zeile > span { transform: translateY(105%); }
  .js .wand__satz, .js .wand__aktion { opacity: 0; transform: translateY(12px); }
  .js .streifen { transform: rotate(2deg); }
  .ist-bereit .zeile > span { transform: none; transition: transform .9s var(--expo); }
  .ist-bereit .zeile:nth-child(2) > span { transition-delay: .09s; }
  .ist-bereit .wand__satz, .ist-bereit .wand__aktion { opacity: 1; transform: none; transition: opacity .6s ease-out .25s, transform .9s var(--expo) .25s; }
  .ist-bereit .streifen { transform: rotate(var(--a)); transition: transform 1.4s var(--expo) calc(.3s + var(--i) * .09s); }

  .js .posten__muster { transform: scaleX(0); }
  .js .posten.ist-da .posten__muster { transform: none; transition: transform 1s var(--expo); }

  .js .enthuellen { clip-path: inset(100% 0 0 0); }
  .js .enthuellen img { transform: scale(1.15); }
  .js .enthuellen.ist-da { clip-path: inset(0); transition: clip-path 1.1s var(--expo); }
  .js .enthuellen.ist-da img { transform: none; transition: transform 1.4s var(--expo); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dock, .kontakt__mail { transition: none; }
}