/* Malerei Kranzelbinder, Wildon. Their two brand colours, as on the van since 1987: the ochre of the logo plate
   (header band and the call strip of the footer) and the dark green of its lettering (the accent for buttons,
   links and rules). Everything between header and footer sits on one ochre-tinted paper colour. */
:root {
  --ocker: #c8922f;       /* logo plate; text on it is near-black (6.0:1) */
  --papier: #fbf6ec;      /* the one page background, ochre-tinted */
  --linie: #dfcb9c;       /* rules (decorative) */
  --grau: #5f5646;        /* muted text: 6.7:1 on paper */
  --text: #1d1f1c;        /* 15.4:1 on paper */
  --gruen: #21382b;       /* accent from the logo lettering: 11.7:1 on paper */
  --gruen-hell: #375a45;  /* call button on hover and focus, no motion: white on it 7.75:1 */
  --weiss: #ffffff;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* scale 1.25 from 17px; content text never below 16px (--t-klein), only labels use 14px (--t-1) */
  --t-1: 14px; --t-klein: 16px; --t0: 17px; --t1: 21px; --t2: 26px; --t3: 33px; --t4: 42px; --t5: 52px;
  --gutter: 20px;
  --abschnitt: 48px;
  --zeit: 180ms;

  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--text); font: 400 var(--t0)/1.6 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }

p, ul, ol, dl, figure, blockquote { margin: 0; }
p, dd, figcaption, blockquote { max-width: 68ch; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gruen); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
/* fluid frame: the layout uses the full width of every screen, the gutters grow with it */
.rahmen { padding-left: var(--gutter); padding-right: var(--gutter); }
.ziel { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; }
.pfeil { display: inline-block; }

/* ---- Malerarbeit. Every painterly shape is drawn here with clip-path; no image files, nothing in the markup
   but empty hooks. The brush: a loaded start on the left, a wavy top and bottom, a dry, split end. */
:root { --pinsel: polygon(1% 42%, 4% 17%, 12% 9%, 29% 15%, 48% 7%, 67% 14%, 85% 6%, 96% 13%, 100% 25%, 95% 37%,
  99% 49%, 94% 61%, 98% 75%, 91% 89%, 73% 93%, 54% 98%, 33% 91%, 15% 97%, 5% 91%, 0% 71%); }

/* one word of every main heading sits on a stroke of their ochre (dark text on ochre 6.0:1) */
.angestrichen { position: relative; isolation: isolate; white-space: nowrap; }
.angestrichen::before { content: ""; position: absolute; z-index: -1; left: -0.12em; right: -0.2em; top: 0.42em;
  bottom: -0.04em; background: var(--ocker); clip-path: var(--pinsel); transform-origin: left center; }

/* photos hang on two strips of masking tape (Malerkrepp), kept inside the photo's width */
/* the wrapper has a definite width (never sized from the image), so the photo's box is known before it loads */
.foto { position: relative; width: 100%; max-width: 100%; }
.foto img { width: 100%; }
.hoch .foto, .tagebuch .foto { max-width: 420px; }
.foto::before, .foto::after { content: ""; position: absolute; z-index: 1; top: -10px; width: clamp(52px, 22%, 88px);
  height: 22px; background: rgba(223, 203, 156, 0.9); pointer-events: none; transform: rotate(var(--dreh));
  clip-path: polygon(0 14%, 6% 0, 32% 9%, 61% 2%, 94% 7%, 100% 0, 97% 42%, 100% 74%, 96% 100%, 63% 91%, 31% 100%,
    5% 93%, 0 100%, 3% 58%); }
.foto::before { --dreh: -7deg; left: 12px; }
.foto::after { --dreh: 6deg; right: 12px; }

/* the two specialities are one link each; a see-through ochre glaze with a wet edge rolls over the photo
   and the right strip of tape lifts. Keyboard focus shows the same. */
.schwerpunkt { position: relative; }
.schwerpunkt .ziel::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.foto--lasur { width: 100%; justify-self: stretch; overflow: visible; }
.lasur { position: absolute; inset: 0; background: rgba(200, 146, 47, 0.38); border-right: 6px solid rgba(200, 146, 47, 0.85);
  mix-blend-mode: multiply; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.schwerpunkt:focus-within .lasur { transform: scaleX(1); }
.schwerpunkt:focus-within .foto::after { transform: rotate(16deg) translate(4px, -6px); }

/* links: a brush stroke paints in under the words; at rest the plain underline stays, so links stay links */
.wort { position: relative; isolation: isolate; }
.wort::before { content: ""; position: absolute; z-index: -1; left: -0.2em; right: -0.25em; top: 0.55em; bottom: -0.1em;
  background: var(--ocker); clip-path: var(--pinsel); transform: scaleX(0); transform-origin: left center; }
.ziel:focus-visible .wort::before { transform: scaleX(1); }
.ziel:focus-visible { text-decoration-color: transparent; }

/* call button */
.anruf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s4);
  background: var(--gruen); color: var(--weiss); font-weight: 700; text-decoration: none; border-radius: 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* no motion on the call buttons: on hover and focus the green just turns a shade lighter, at once */
.anruf:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; background: var(--gruen-hell); }
.ruf .anruf { min-height: 52px; font-size: var(--t1); }
.ruf__wann { margin-top: var(--s2); color: var(--grau); font-size: var(--t-klein); }

/* Kopf: the logo plate's ochre, the logo sits in it like the lettering on their van */
.kopf { background: var(--ocker); border-bottom: 3px solid var(--gruen); }
.kopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-top: var(--s2); padding-bottom: var(--s2); }
.marke { display: block; flex: 0 0 auto; line-height: 0; }
.marke img { width: clamp(150px, 20vw, 240px); height: auto; }
.marke:focus-visible { outline-color: var(--text); }
.kopf nav ul { list-style: none; padding: 0; display: flex; gap: var(--s5); border-top: 1px solid rgba(29, 31, 28, 0.25); }
.kopf nav a { display: flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 700;
  position: relative; isolation: isolate; }
.kopf nav a:focus-visible { outline-color: var(--text); }
/* the current page is marked with a green brush stroke below the word, the others get it on hover or focus */
.kopf nav a::before { content: ""; position: absolute; z-index: -1; left: -4px; right: -6px; bottom: 4px; height: 7px;
  background: var(--gruen); clip-path: var(--pinsel); transform: scaleX(0); transform-origin: left center; }
.kopf nav a[aria-current="page"]::before, .kopf nav a:focus-visible::before { transform: scaleX(1); }
.kopf nav a[aria-current="page"], .kopf nav a:focus-visible { text-decoration-color: transparent; }

/* Einstieg */
.einstieg { padding-top: var(--s6); padding-bottom: var(--abschnitt); overflow-x: clip; }   /* the tape never scrolls the page */
.einstieg h1 { font-size: var(--t3); max-width: 20ch; }
.satz { margin-top: var(--s4); }
.ruf { margin-top: var(--s5); }
.eckdaten { margin-top: var(--s5); display: grid; gap: var(--s3); border-left: 3px solid var(--ocker);
  padding-left: var(--s4); }
.eckdaten dt { color: var(--grau); font-size: var(--t-1); }
.eckdaten dd { margin: 0; font-variant-numeric: tabular-nums; }
.vertrauen { list-style: none; padding: var(--s4) 0 0; margin-top: var(--s5); display: flex; flex-wrap: wrap;
  gap: var(--s4) var(--s6); border-top: 1px solid var(--linie); }
/* phones: one row per fact, value then label; from 768 px three side by side */
.vertrauen li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s3); row-gap: 0; flex: 1 1 100%; }
.vertrauen strong { font-family: var(--serif); font-size: var(--t1); line-height: 1.15; }
.vertrauen span { color: var(--grau); font-size: var(--t-klein); }
.einstieg__bild { margin-top: var(--s6); }
figcaption { margin-top: var(--s2); color: var(--grau); font-size: var(--t-klein); }
figcaption time { color: var(--text); font-weight: 700; }

/* Leistungen: the two specialities with a photo first, then the other three as a list */
/* sections are parted by a rule and space, never by a change of background */
.leistungen, .bewertungen { border-top: 1px solid var(--linie); padding-top: var(--abschnitt); padding-bottom: var(--abschnitt); }
.leistungen > .rahmen > h2 { font-size: var(--t2); }
.schwerpunkte { list-style: none; padding: 0; margin-top: var(--s5); display: grid; gap: var(--s6); }
.schwerpunkt { display: grid; gap: var(--s3); align-content: start; justify-items: start; }
.schwerpunkt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.schwerpunkt .bezeichnung { color: var(--grau); font-size: var(--t-1); }
.schwerpunkt h3 { font-size: var(--t2); }
.liste { list-style: none; padding: 0; margin-top: var(--s7); border-top: 2px solid var(--gruen); }
.liste li { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--linie); }
.liste h3 { font-size: var(--t1); }
.ablauf { margin-top: var(--s5); color: var(--grau); }
.ablauf p + p { margin-top: var(--s2); }

/* Bewertungen: the rating beside the quotes, on the same paper as the rest */
.bewertungen__raster { display: grid; gap: var(--s6); }
.note h2 { font-size: var(--t2); }
.note__zahl { margin-top: var(--s4); font-family: var(--serif); font-weight: 700; font-size: var(--t5); line-height: 1;
  color: var(--gruen); font-variant-numeric: tabular-nums; }
.note__text { margin-top: var(--s2); }
.note .ziel { margin-top: var(--s2); }
.zitate { list-style: none; padding: 0; border-top: 2px solid var(--gruen); }
.zitate li { padding: var(--s4) 0; border-bottom: 1px solid var(--linie); }
.zitate blockquote { font-family: var(--serif); font-size: var(--t0); line-height: 1.5; }
.zitate .wer { margin-top: var(--s2); color: var(--grau); font-size: var(--t-1); }

/* inner pages */
.seite { padding-top: var(--s6); padding-bottom: var(--abschnitt); }
.seite h1 { font-size: var(--t3); max-width: 22ch; }
.seite h2 { font-size: var(--t2); margin-bottom: var(--s3); }
.seite section { margin-top: var(--s7); }
.seite section p + p, .seite section p + blockquote { margin-top: var(--s3); }
.seite figure { margin-top: var(--s5); }
.hoch img { width: 100%; max-width: 420px; }
.schritte { margin-top: var(--s4); padding-left: var(--s5); }
.schritte li + li { margin-top: var(--s2); }
.schritte + p { margin-top: var(--s4); }
.einzelzitat { margin-top: var(--s5); border-left: 3px solid var(--ocker); padding-left: var(--s4); }
.einzelzitat blockquote { font-family: var(--serif); font-size: var(--t1); line-height: 1.4; }
.einzelzitat > p { margin-top: var(--s2); color: var(--grau); font-size: var(--t-1); }
.trenner { border-top: 2px solid var(--gruen); padding-top: var(--s5); }

/* Arbeiten: a dated work log */
.tagebuch { list-style: none; padding: 0; margin-top: var(--s6); border-top: 2px solid var(--gruen); }
.tagebuch > li { padding: var(--s5) 0; border-bottom: 1px solid var(--linie); display: grid; gap: var(--s3); }
.tagebuch time { color: var(--grau); font-size: var(--t-1); font-variant-numeric: tabular-nums; }
.tagebuch h2 { font-size: var(--t1); margin: 0; }
.tagebuch .text { display: grid; gap: var(--s3); align-content: start; justify-items: start; }
.tagebuch figure { margin: 0; padding-top: var(--s2); }   /* room for the tape above the photo */
.tagebuch img { width: 100%; max-width: 420px; }

/* Kontakt: a contact sheet */
.blatt { margin-top: var(--s6); display: grid; gap: var(--s6); align-items: start; border-top: 2px solid var(--gruen);
  padding-top: var(--s5); }
.wege { display: grid; gap: var(--s4); }
.wege dt { color: var(--grau); font-size: var(--t-1); }
.wege dd { margin: 0; overflow-wrap: anywhere; }
.zeiten { border-collapse: collapse; font-variant-numeric: tabular-nums; width: 100%; max-width: 24rem; }
.zeiten caption { text-align: left; color: var(--grau); font-size: var(--t-1); padding-bottom: var(--s2); }
.zeiten th, .zeiten td { text-align: left; padding: var(--s2) 0; border-bottom: 1px solid var(--linie); }
.zeiten th { font-weight: 400; padding-right: var(--s5); }

/* Fuß: an ochre call strip, then small aligned columns */
.fuss__ruf { background: var(--ocker); }
.fuss__ruf .rahmen { padding-top: var(--s6); padding-bottom: var(--s6); display: grid; gap: var(--s3); justify-items: start; }
.fuss__ruf h2 { font-size: var(--t2); }
.fuss__ruf .ruf__wann { color: var(--text); margin-top: 0; }
.fuss__info { background: var(--papier); border-top: 3px solid var(--gruen); font-size: var(--t-klein); }
.fuss__spalten { padding-top: var(--s6); padding-bottom: var(--s5); display: grid; gap: var(--s5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fuss__marke, .fuss__spalten > div:nth-child(2) { grid-column: 1 / -1; }
.fuss__marke { display: grid; gap: var(--s2); justify-items: start; align-content: start; }
.fuss__marke img { width: 140px; height: auto; }
.fuss__titel { font-family: var(--sans); font-size: var(--t-1); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--grau); margin-bottom: var(--s2); }
.fuss__liste { list-style: none; padding: 0; display: grid; gap: 0; }
.fuss__liste li { min-height: 32px; display: flex; align-items: center; overflow-wrap: anywhere; }
.zusammen { white-space: nowrap; }
.fuss__liste a { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; }
.rechtliches { padding-top: var(--s4); padding-bottom: var(--s6); border-top: 1px solid var(--linie); color: var(--grau);
  font-size: var(--t-1); display: grid; gap: var(--s1); }

/* hover states only on devices that really hover (on touch screens a tap just follows the link); every one of
   them has a keyboard-focus twin above, and none hides anything */
@media (hover: hover) {
  .anruf:hover { background: var(--gruen-hell); }
  .schwerpunkt:hover .lasur { transform: scaleX(1); }
  .schwerpunkt:hover .foto::after { transform: rotate(16deg) translate(4px, -6px); }
  .ziel:hover .wort::before, .kopf nav a:hover::before { transform: scaleX(1); }
  .ziel:hover, .kopf nav a:hover { text-decoration-color: transparent; }
}

/* motion, only when the visitor allows it. On load just two things: the headline word is painted, then the tape
   goes onto the façade photo. The call buttons never move. Everything else moves only when touched: 200 ms on,
   150 ms off. Transform and opacity only; without motion every effect simply shows its end state. Nothing
   reacts to scrolling. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @keyframes auftragen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes ankleben { from { opacity: 0; transform: rotate(var(--dreh)) scale(1.2); }
    to { opacity: 1; transform: rotate(var(--dreh)) scale(1); } }
  .angestrichen::before { animation: auftragen 200ms ease-out 120ms both; }
  .einstieg__bild .foto::before { animation: ankleben 150ms ease-out 300ms both; }
  .einstieg__bild .foto::after { animation: ankleben 150ms ease-out 380ms both; }
  .lasur, .foto::after, .wort::before, .kopf nav a::before { transition: transform 150ms ease-out; }
  .schwerpunkt:hover .lasur, .schwerpunkt:focus-within .lasur, .schwerpunkt:hover .foto::after,
  .schwerpunkt:focus-within .foto::after, .ziel:hover .wort::before, .ziel:focus-visible .wort::before,
  .kopf nav a:hover::before, .kopf nav a:focus-visible::before { transition-duration: 200ms; }
  .pfeil { transition: transform var(--zeit) ease-out; }
  .ziel:hover .pfeil, .ziel:focus-visible .pfeil { transform: translateX(4px); }
  .marke img { transition: transform var(--zeit) ease-out; }
  .marke:hover img { transform: translateY(-1px); }
  .fuss__liste a { transition: opacity var(--zeit) ease-out; }
  .fuss__liste a:hover { opacity: 0.75; }
}

/* small phones: logo and the full +43 number side by side inside the 20 px margins */
@media (max-width: 479px) {
  .kopf__zeile { gap: var(--s3); }
  .kopf__zeile .anruf { padding: 0 var(--s3); }
}
/* the smallest phones (320 px): the call button moves under the logo instead of being cut off */
@media (max-width: 359px) {
  .kopf__zeile { flex-wrap: wrap; }
}

@media (min-width: 768px) {
  :root { --t0: 18px; --t1: 22px; --t2: 28px; --t3: 35px; --t4: 44px; --t5: 55px; --gutter: 32px; --abschnitt: 80px; }
  .kopf nav ul { border-top: 0; gap: var(--s6); }
  .einstieg { padding-top: var(--s8); }
  .einstieg h1 { font-size: var(--t4); }
  .schwerpunkte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7); }
  .liste li { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); column-gap: var(--s5); align-items: baseline; }
  .vertrauen li { display: grid; gap: var(--s1); align-content: start; flex: 1 1 8rem; }
  .zitate blockquote { font-size: var(--t1); line-height: 1.4; }
  .seite h1 { font-size: var(--t4); }
  .seite .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: var(--s7);
    align-items: start; }
  .seite .zwei figure { margin-top: 0; }
  .tagebuch > li { grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 360px); column-gap: var(--s6); align-items: start; }
  .blatt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); }
  .fuss__ruf .rahmen { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s6); }
  .fuss__ruf .ruf__wann { grid-column: 1; }
  .fuss__ruf .anruf { grid-column: 2; grid-row: 1 / span 2; }
  .fuss__spalten { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--s6); }
  .fuss__marke, .fuss__spalten > div:nth-child(2) { grid-column: auto; }
}

@media (min-width: 1024px) {
  /* one header row: logo, the three links, the call button */
  .kopf .rahmen { display: flex; align-items: center; gap: var(--s6); padding-top: var(--s2); padding-bottom: var(--s2); }
  .kopf__zeile { display: contents; }
  .kopf nav { order: 1; margin-left: auto; }
  .kopf__zeile .anruf { order: 2; }
  /* the rating beside the quotes only once the rating column is wide enough for its heading and link */
  .bewertungen__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s8); align-items: start; }
  /* the opening splits the screen in two; the photo runs to the right edge of the window */
  .einstieg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7);
    align-items: center; padding-right: 0; }
  .einstieg__bild { margin-top: 0; grid-row: 1; grid-column: 2; }
  .einstieg__bild img { width: 100%; aspect-ratio: 3 / 2; max-height: 76vh; object-fit: cover; }
  .einstieg__bild figcaption { padding-right: var(--gutter); }
  /* the opening's text column is narrow again until 1440 px: the trust facts go back to one row each */
  .vertrauen li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s3); flex: 1 1 100%; }
}

@media (min-width: 1120px) {
  :root { --gutter: 48px; }
}

@media (min-width: 1280px) {
  /* inner pages: text and photo take half the width each */
  .seite .zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); }
  .seite .zwei figure img { width: 100%; }
  .seite .zwei .hoch img, .seite .zwei .hoch .foto { max-width: 560px; }
  .tagebuch > li { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 560px); column-gap: var(--s7); }
  /* the figure gets a definite width too, so the right-aligned photo never waits for the image to size itself */
  .tagebuch figure { justify-self: end; width: 100%; max-width: 560px; }
  .tagebuch figure.hoch { max-width: 360px; }
  .tagebuch img, .tagebuch .foto { max-width: 560px; }
  .tagebuch .hoch img, .tagebuch .hoch .foto { max-width: 360px; }
  /* Kontakt: the contact sheet on the left, how it works and who comes on the right */
  .kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); align-items: start; }
  .kontakt__mehr { grid-column: 2; grid-row: 1 / span 2; }
  .kontakt__mehr > section:first-child { margin-top: 0; }
  /* in the left half the sheet is too narrow for two columns until 1920 px: contacts above the hours */
  .kontakt .blatt { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1440px) {
  :root { --gutter: 64px; }
  .einstieg h1 { font-size: var(--t5); }
  .vertrauen li { display: grid; gap: var(--s1); align-content: start; flex: 1 1 8rem; }
  /* Leistungen in three columns: the two specialities, then the other three and how it works */
  .leistungen > .rahmen { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--s8);
    grid-template-rows: auto auto 1fr; align-items: start; }
  .leistungen > .rahmen > h2 { grid-column: 1 / -1; }
  .schwerpunkte { grid-column: 1; grid-row: 2 / span 2; }
  .liste { grid-column: 2; grid-row: 2; margin-top: var(--s5); }
  .liste li { grid-template-columns: none; }
  .ablauf { grid-column: 2; grid-row: 3; }
  /* Bewertungen: the three quotes side by side */
  .bewertungen__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .zitate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); border-top: 0; }
  .zitate li { border-top: 2px solid var(--gruen); border-bottom: 0; padding-top: var(--s4); }
}

@media (min-width: 1920px) {
  :root { --gutter: 96px; }
  .kontakt .blatt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}