/* ==========================================================================
   Malerwerkstatt Ahlers · Ossenbeck
   Entwurf Studio Siemering, 04.08.2026

   Leitidee
   --------
   Die Referenzfotos zeigen fast nur eines: helle Altbaufassaden mit
   weissem Stuck, dazu vier Innenraeume mit einer ruhigen gruenen Wand.
   Das ist die Handschrift des Betriebs, also ist es auch die der Seite:
   Weiss auf Weiss, feine Schattenkanten wie Stuckprofile, und die Farbe
   genau dort, wo sie hingehoert.

   Der Winkel 27,56 Grad ist nicht gewaehlt, sondern aus dem Logo
   gemessen (Ausgleichsgerade ueber 85 Bildspalten des dreifarbigen
   Streifens, siehe ../Malerwerkstatt Ahlers Quellen/winkel.txt).
   Er kehrt wieder: im Band ganz oben, in den Abschnittsmarken, im
   Unterstrich der Kopfzeile, in der Ecke jeder Farbkarte.

   Die vier Logofarben sind aus der Datei gemessen, nicht geschaetzt:
   Gruen #207B42, Blau #347BBD, Gelb #F9F00D, Rot #DE4638.
   ========================================================================== */

/* --- Schriften ---------------------------------------------------------- */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  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: "Familjen Grotesk";
  src: url("../fonts/familjen-latin-ext.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  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: "Public Sans";
  src: url("../fonts/public-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Grundwerte --------------------------------------------------------- */

:root {
  /* Flaechen */
  --grund:       #F7F4EF;   /* grundierte Wand */
  --grund-tief:  #EFEAE0;   /* zweite Flaeche */
  --papier:      #FFFFFF;
  --linie:       #E1DACC;
  --linie-fein:  #EDE7DC;

  /* Schrift */
  --tinte:       #191C19;
  --tinte-leis:  #56594F;

  /* Logofarben, gemessen */
  --gruen:       #207B42;
  --gruen-tief:  #175A31;
  --blau:        #347BBD;
  --gelb:        #F9F00D;
  --rot:         #DE4638;

  /* Der gemessene Winkel */
  --winkel:      27.56deg;
  --streifen:    152.44deg;   /* Verlaufsrichtung fuer Streifen im Winkel */

  --schrift-titel: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --schrift-text:  "Public Sans", "Segoe UI", system-ui, sans-serif;

  --breit:  1160px;
  --schmal: 66ch;
  --rund:   3px;

  --schatten-fein: 0 1px 0 rgba(255,255,255,.9) inset,
                   0 1px 2px rgba(25,28,25,.05),
                   0 8px 24px -14px rgba(25,28,25,.30);
  --schatten-hoch: 0 1px 0 rgba(255,255,255,.9) inset,
                   0 2px 4px rgba(25,28,25,.06),
                   0 20px 40px -22px rgba(25,28,25,.40);
}

/* --- Zuruecksetzen ------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.1rem); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); font-weight: 600; letter-spacing: -.012em; }
h4 { font-size: 1.05rem; font-weight: 600; }

/* Luft unter Ueberschriften. Ohne sie klebt der erste Absatz an der
   Zeile darueber, und das faellt auf jeder Seite gleichzeitig auf. */
h1, h2 { margin-bottom: 1.15rem; }
h3 { margin-bottom: .5rem; }
h4 { margin-bottom: .85rem; }

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

/* Kein Gedankenstrich in der Seite. Wo getrennt wird, trennt ein Punkt.
   Er nimmt die Farbe seiner Umgebung: eine feste helle Farbe wird auf
   dem hellen Anstrich im Kopfbereich unsichtbar, und uebrig bleibt
   eine Luecke, die wie ein Satzfehler aussieht. */
.punkt { color: inherit; opacity: .45; padding: 0 .3em; }

/* --- Bausteine ---------------------------------------------------------- */

.innen {
  width: min(100% - 2.4rem, var(--breit));
  margin-inline: auto;
}
@media (max-width: 40rem) { .innen { width: min(100% - 1.8rem, var(--breit)); } }

.band { padding-block: clamp(3.5rem, 7vw, 6.5rem); position: relative; }
.band--hell  { background: var(--papier); }
.band--tief  { background: var(--grund-tief); }
.band--eng   { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

.spalte { max-width: var(--schmal); }

/* Der dreifarbige Streifen aus dem Logo, im gemessenen Winkel.
   Reihenfolge Blau, Gelb, Rot wie in der Datei. */
.streifen {
  height: 7px;
  background: repeating-linear-gradient(
    var(--streifen),
    var(--blau)  0 10px,
    var(--gelb) 10px 17px,
    var(--rot)  17px 26px,
    transparent 26px 46px
  ), var(--gruen);
}

/* Abschnittsmarke: kleines Wort mit dem Winkel davor */
.marke {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--schrift-titel);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leis);
  margin-bottom: 1.1rem;
}
.marke::before {
  content: "";
  width: 26px;
  height: 14px;
  flex: none;
  background: repeating-linear-gradient(
    var(--streifen),
    var(--gruen) 0 3px,
    transparent 3px 7px
  );
}
.marke--auf-farbe { color: rgba(255,255,255,.82); }
.marke--auf-farbe::before {
  background: repeating-linear-gradient(
    var(--streifen),
    rgba(255,255,255,.85) 0 3px,
    transparent 3px 7px
  );
}

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247,244,239,.92);
  border-bottom: 1px solid var(--linie);
}
@supports (backdrop-filter: blur(8px)) {
  .kopf { backdrop-filter: blur(10px) saturate(1.4); background: rgba(247,244,239,.78); }
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 4.4rem;
}

.zeichen { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.zeichen img { width: 44px; height: 48px; }
.zeichen__wort {
  display: grid;
  font-family: var(--schrift-titel);
  line-height: 1.15;
}
.zeichen__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; }
.zeichen__zusatz {
  font-size: .67rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinte-leis);
}
@media (max-width: 26rem) { .zeichen__zusatz { display: none; } }

.menue { display: flex; align-items: center; gap: .2rem; }
.menue__link {
  position: relative;
  padding: .55rem .8rem;
  font-family: var(--schrift-titel);
  font-size: .94rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--rund);
}
/* Der Unterstrich traegt den Winkel */
.menue__link::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: .3rem;
  height: 5px;
  opacity: 0;
  background: repeating-linear-gradient(
    var(--streifen),
    var(--gruen) 0 3px,
    transparent 3px 6px
  );
  transition: opacity .18s ease;
}
.menue__link:hover::after { opacity: .55; }
.menue__link[aria-current="page"]::after { opacity: 1; }

.ruf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem 1.05rem;
  background: var(--gruen);
  color: #fff;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: .94rem;
  text-decoration: none;
  border-radius: var(--rund);
  white-space: nowrap;
}
.ruf:hover { background: var(--gruen-tief); }
.ruf svg { width: 17px; height: 17px; flex: none; }

/* Menueschalter fuers Handy */
.schalter {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--linie);
  background: var(--papier);
  border-radius: var(--rund);
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.schalter span, .schalter span::before, .schalter span::after {
  content: "";
  display: block;
  width: 19px; height: 2px;
  background: var(--tinte);
  transition: transform .22s ease, opacity .18s ease;
}
.schalter span::before { transform: translateY(-6px); }
.schalter span::after  { transform: translateY(4px); }
.schalter[aria-expanded="true"] span { background: transparent; }
.schalter[aria-expanded="true"] span::before { transform: rotate(45deg); }
.schalter[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

@media (max-width: 62rem) {
  .schalter { display: inline-flex; }
  .menue {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    padding: .5rem 1.2rem 1.1rem;
    box-shadow: 0 24px 32px -28px rgba(25,28,25,.6);
    /* Der Abstand von oben wird gemessen, nicht geschaetzt: -100% waere
       die eigene Hoehe, nicht der Weg bis ueber den Kopf. */
    transform: translateY(-115%);
    opacity: 0;
    visibility: hidden;
    transition: transform .26s ease, opacity .2s ease, visibility .26s;
  }
  .menue[data-offen="ja"] { transform: translateY(0); opacity: 1; visibility: visible; }
  .menue__link { padding: .8rem .2rem; font-size: 1.05rem; border-bottom: 1px solid var(--linie-fein); }
  .menue__link::after { left: .2rem; right: auto; width: 40px; bottom: .55rem; }
}
@media (max-width: 30rem) {
  .ruf span { display: none; }
  .ruf { padding: .62rem .8rem; }
}

/* --- Kopfbereich der Startseite ----------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3.2rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

/* Der erste Anstrich: eine helle Flaeche, deren untere Kante im
   gemessenen Winkel laeuft. Kein Kasten, sondern eine Rollenkante. */
.hero__anstrich {
  position: absolute;
  inset: 0 -12% 0 -12%;
  background: linear-gradient(180deg, #EDF1EA 0%, #E7EDE6 100%);
  clip-path: polygon(0 0, 100% 0, 100% 46%, 0 88%);
  z-index: 0;
  /* Die Kante der Rolle. Ein Rahmen ginge nicht, der folgt dem
     Rechteck und nicht dem Beschnitt; drop-shadow folgt der Form. */
  filter: drop-shadow(0 3px 0 rgba(32,123,66,.20));
}
.hero__anstrich::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    var(--streifen),
    rgba(32,123,66,.055) 0 2px,
    transparent 2px 9px
  );
}
.hero__innen { position: relative; z-index: 1; }

.hero__oben {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--schrift-titel);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gruen-tief);
  margin-bottom: 1.4rem;
}
.hero__oben::before {
  content: "";
  width: 34px; height: 16px; flex: none;
  background: repeating-linear-gradient(
    var(--streifen),
    var(--blau) 0 3px,
    var(--gelb) 3px 6px,
    var(--rot)  6px 9px,
    transparent 9px 15px
  );
}

/* Der Abstand nach unten kommt hier von .hero__unter, deshalb keiner
   von der Ueberschrift selbst. Sonst stuende er zweimal da. */
.hero h1 { max-width: 16ch; margin-bottom: 0; }
.hero__unter {
  max-width: 46ch;
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  color: var(--tinte-leis);
}
.hero__tasten { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.taste {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .82rem 1.35rem;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--rund);
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.taste svg { width: 18px; height: 18px; flex: none; }
.taste--voll { background: var(--gruen); color: #fff; }
.taste--voll:hover { background: var(--gruen-tief); }
.taste--rand { background: var(--papier); color: var(--tinte); border-color: var(--linie); }
.taste--rand:hover { border-color: var(--tinte); }

/* Das Mannschaftsbild sitzt am unteren Rand des Anstrichs und ragt
   nach rechts aus dem Satzspiegel. Kein Kasten neben Kasten. */
.hero__bild {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.5rem, 5vw, 3.8rem);
  margin-right: clamp(-1.2rem, -4vw, -5rem);
  background: var(--papier);
  padding: 10px;
  box-shadow: var(--schatten-hoch);
  border-radius: var(--rund);
}
.hero__bild img { width: 100%; border-radius: 1px; }
.hero__bild figcaption {
  font-size: .82rem;
  color: var(--tinte-leis);
  padding: .7rem .2rem .1rem;
}

/* --- Zahlenzeile -------------------------------------------------------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1px;
  background: var(--linie);
  border-block: 1px solid var(--linie);
}
.zahlen__feld { background: var(--grund); padding: 1.6rem 1.4rem; }
.zahlen__wert {
  font-family: var(--schrift-titel);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  display: block;
}
.zahlen__wort {
  display: block;
  margin-top: .5rem;
  font-size: .89rem;
  color: var(--tinte-leis);
  line-height: 1.45;
}

/* --- Der Faecher: zehn Leistungen als Musterkarten ---------------------- */

.faecher {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 1.15rem;
  margin-top: 2.6rem;
  list-style: none;
  padding: 0;
}
/* Alle Karten einer Zeile sind gleich hoch. Der Faecher entsteht im
   Inneren, ueber die wechselnde Hoehe des Farbfeldes. Ohne das enden
   die Karten auf verschiedenen Hoehen, und das sieht nicht nach
   Absicht aus, sondern nach Fehler. */
.faecher li { display: flex; }
.faecher li > .karte { flex: 1; }

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--linie-fein);
  border-radius: var(--rund);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--schatten-fein);
  transition: transform .2s ease, box-shadow .2s ease;
}
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }

/* Das Farbfeld. Die Hoehe schwankt, damit zehn Karten einen Faecher
   ergeben und nicht zehnmal dasselbe Rechteck. */
.karte__ton {
  position: relative;
  background: var(--ton);
  height: var(--tonhoehe, 7rem);
  flex: none;
}
/* Die Ecke im gemessenen Winkel, wie die Kante eines abgezogenen
   Klebebands. 68 zu 35,5 Punkte ergibt genau 27,56 Grad. */
.karte__ton::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 68px; height: 35.5px;
  background: var(--papier);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.karte__nr {
  position: absolute;
  left: .85rem; top: .7rem;
  font-family: var(--schrift-titel);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--tonschrift, rgba(255,255,255,.85));
}
.karte__text { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.karte__name {
  font-family: var(--schrift-titel);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.karte__was {
  margin-top: .5rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tinte-leis);
  flex: 1;
}
.karte__mehr {
  margin-top: .9rem;
  font-size: .87rem;
  font-weight: 600;
  font-family: var(--schrift-titel);
  color: var(--gruen);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.karte:hover .karte__mehr { gap: .6rem; }

/* Die zehn Toene. Ein Faecher vom Markengruen ueber Kalk und Ocker
   bis ins Blau. Alle vier Logofarben stecken darin, keine dominiert. */
/* Die Nummer auf dem Farbfeld ist kleine Schrift und braucht 4,5 zu 1.
   Drei Toene sind dafuer nachgedunkelt worden (02, 07, 09), bei den
   hellen traegt die Nummer Tinte statt Weiss. Nachgemessen, nicht
   nach Augenmass: siehe ../Malerwerkstatt Ahlers Quellen/kontrast.txt */
.karte--01 { --ton: #207B42; }                                  /* weiss 5,29 */
.karte--02 { --ton: #527F57; }                                  /* weiss 4,63 */
.karte--03 { --ton: #94A88A; --tonschrift: #30392C; }           /* dunkel 4,71 */
.karte--04 { --ton: #C9BFA6; --tonschrift: #4A4539; }
.karte--05 { --ton: #E6DFCE; --tonschrift: #5C584F; }
.karte--06 { --ton: #DFA92B; --tonschrift: #563C00; }
.karte--07 { --ton: #B35C34; }                                  /* weiss 4,67 */
.karte--08 { --ton: #BE3A2C; }                                  /* weiss 5,48 */
.karte--09 { --ton: #4A78A3; }                                  /* weiss 4,66 */
.karte--10 { --ton: #2F4A63; }                                  /* weiss 9,21 */

.karte--01 .karte__ton { --tonhoehe: 6.5rem; }
.karte--02 .karte__ton { --tonhoehe: 8.2rem; }
.karte--03 .karte__ton { --tonhoehe: 7.1rem; }
.karte--04 .karte__ton { --tonhoehe: 9rem; }
.karte--05 .karte__ton { --tonhoehe: 6.8rem; }
.karte--06 .karte__ton { --tonhoehe: 8.6rem; }
.karte--07 .karte__ton { --tonhoehe: 7.4rem; }
.karte--08 .karte__ton { --tonhoehe: 9.4rem; }
.karte--09 .karte__ton { --tonhoehe: 6.9rem; }
.karte--10 .karte__ton { --tonhoehe: 8.3rem; }

@media (max-width: 34rem) {
  .karte__ton { --tonhoehe: 5.5rem !important; }
}

/* --- Leistungen ausfuehrlich -------------------------------------------- */

/*
 * Ein Abschnitt je Leistung.
 *
 * Auf breiten Schirmen laeuft die Ueberschrift in einer eigenen
 * Spalte links mit; Bild und Text stehen rechts. Damit steht der Satz
 * nicht als schmale Saeule in einem 1160 Punkte breiten Feld, und
 * beim Rollen bleibt sichtbar, wovon gerade die Rede ist.
 */
.leistung {
  scroll-margin-top: 6rem;
  padding-block: clamp(2.4rem, 4vw, 3.6rem);
  border-top: 1px solid var(--linie);
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.leistung:first-of-type { border-top: 0; padding-top: 0; }
@media (max-width: 62rem) {
  .leistung { grid-template-columns: 1fr; gap: 0; }
}

.leistung__kopf { position: sticky; top: 6rem; }
@media (max-width: 62rem) {
  .leistung__kopf { position: static; margin-bottom: 1.4rem; }
}
.leistung__nr {
  font-family: var(--schrift-titel);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--tinte-leis);
  margin-bottom: .7rem;
}
.leistung__nr::before {
  content: "";
  display: block;
  width: 34px; height: 9px;
  margin-bottom: .6rem;
  background: var(--ton, var(--gruen));
}
.leistung__kopf h2 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  margin-bottom: 0;
}
.leistung__bild {
  margin: 0 0 1.6rem;
  background: var(--papier);
  padding: 9px;
  border-radius: var(--rund);
  box-shadow: var(--schatten-fein);
  max-width: 715px;
}
.leistung__bild img { width: 100%; }
.leistung__bild figcaption { font-size: .78rem; color: var(--tinte-leis); padding: .55rem .2rem 0; }

/* --- Galerie ------------------------------------------------------------ */

/*
 * Die Galerie.
 *
 * Alle Bilder sind quadratisch, weil sie aus einem Pflegefeld mit
 * einem gemeinsamen Zielmass kommen. Damit wird aus der Galerie ein
 * ruhiges Raster statt einer ausgefransten Reihe, und ein hochkant
 * aufgenommenes Handyfoto kann sie nicht zerlegen.
 *
 * Warum das Quadrat: Von den siebzehn Ausgangsbildern liegen zwoelf
 * hochkant und fuenf quer. Bei einem gemeinsamen Mass nimmt das
 * Quadrat beiden am wenigsten weg. Am Bild geprueft, nicht geraten.
 */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Damit alle Karten einer Zeile gleich hoch sind, auch wenn eine
   Bildunterschrift zwei Zeilen braucht. */
.galerie > li { display: flex; }
.galerie > li > .stueck { flex: 1; }
/* Der Auszug auf der Startseite: die ersten fuenf Arbeiten
   nebeneinander. Feste Spaltenzahl, damit die Reihe nicht mit einem
   einzelnen Bild in der zweiten Zeile endet. */
.galerie--auszug {
  grid-template-columns: repeat(5, 1fr);
  margin-top: 2.4rem;
}
@media (max-width: 62rem) { .galerie--auszug { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 34rem) { .galerie--auszug { grid-template-columns: repeat(2, 1fr); } }

.stueck {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--papier);
  padding: 8px;
  border-radius: var(--rund);
  box-shadow: var(--schatten-fein);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stueck img {
  width: 100%;
  border-radius: 1px;
  background: var(--grund-tief);
}

.stueck button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 1px;
}
.stueck:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.stueck figcaption { font-size: .8rem; color: var(--tinte-leis); padding: .6rem .2rem .1rem; }

/* Lupe */
.lupe {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 1.2rem;
  background: rgba(16,19,16,.88);
}
.lupe[data-offen="ja"] { display: grid; }
.lupe img {
  max-width: min(100%, 900px);
  max-height: 84vh;
  width: auto;
  background: var(--papier);
  padding: 8px;
  border-radius: var(--rund);
}
.lupe__wort {
  color: rgba(255,255,255,.8);
  font-size: .88rem;
  text-align: center;
  margin-top: .9rem;
  max-width: 60ch;
}
.lupe__zu, .lupe__weiter {
  position: absolute;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.lupe__zu { top: 1.2rem; right: 1.2rem; }
.lupe__weiter[data-richtung="zurueck"] { left: 1.2rem; top: 50%; }
.lupe__weiter[data-richtung="vor"] { right: 1.2rem; top: 50%; }
.lupe__zu:hover, .lupe__weiter:hover { background: rgba(255,255,255,.24); }

/* --- Auszeichnung ------------------------------------------------------- */

.auszeichnung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: start;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--gruen);
  border-radius: var(--rund);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--schatten-fein);
}
.auszeichnung__zeichen {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--grund-tief);
  border-radius: 50%;
  flex: none;
}
.auszeichnung__zeichen svg { width: 25px; height: 25px; }
.auszeichnung h3 { margin-bottom: .45rem; }
.auszeichnung p { font-size: .96rem; }
@media (max-width: 34rem) {
  .auszeichnung { grid-template-columns: 1fr; }
}

/* --- Zwei Spalten ------------------------------------------------------- */

.paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}
.paar--breit-links { grid-template-columns: 1.25fr 1fr; }
@media (max-width: 52rem) { .paar--breit-links { grid-template-columns: 1fr; } }

.rahmen {
  background: var(--papier);
  padding: 10px;
  border-radius: var(--rund);
  box-shadow: var(--schatten-fein);
  /* justify-self wuerde den Rahmen auf den Inhalt schrumpfen lassen,
     solange das Bild noch nicht geladen ist. Deshalb ohne. */
}
.rahmen img { width: 100%; }
.rahmen figcaption { font-size: .8rem; color: var(--tinte-leis); padding: .6rem .2rem .1rem; }

/* --- Urlaubsservice ----------------------------------------------------- */

.dienst {
  position: relative;
  background: var(--gruen);
  color: #fff;
  border-radius: var(--rund);
  padding: clamp(1.8rem, 4vw, 3rem);
  overflow: hidden;
}
.dienst::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    var(--streifen),
    rgba(255,255,255,.055) 0 3px,
    transparent 3px 12px
  );
  pointer-events: none;
}
.dienst > * { position: relative; z-index: 1; }
.dienst h2 { color: #fff; }
.dienst p { color: rgba(255,255,255,.9); max-width: 54ch; }
.dienst .taste--rand { background: #fff; border-color: #fff; }

/* --- Kontakt ------------------------------------------------------------ */

.angaben { display: grid; gap: 1.4rem; margin: 0; }
.angabe { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; align-items: start; }
.angabe__zeichen {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}
.angabe__zeichen svg { width: 17px; height: 17px; }
.angabe dt {
  font-family: var(--schrift-titel);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte-leis);
  margin-bottom: .18rem;
}
.angabe dd { margin: 0; font-size: 1.06rem; }
.angabe dd a { text-decoration-color: #A9B7AD; text-underline-offset: 3px; }
.angabe dd a:hover { text-decoration-color: var(--gruen); }

/* Sichtbare Luecke: was noch niemand weiss, bleibt sichtbar leer. */
.luecke {
  display: inline-block;
  font-size: .95rem;
  color: #7C6A3C;
  background: #FBF4DF;
  border: 1px dashed #D9C48A;
  border-radius: var(--rund);
  padding: .3rem .6rem;
}

.zeiten { width: 100%; border-collapse: collapse; font-size: .98rem; }
.zeiten th, .zeiten td { text-align: left; padding: .5rem .2rem; border-bottom: 1px solid var(--linie-fein); }
.zeiten th { font-weight: 500; color: var(--tinte-leis); }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 0; }

/* --- Formular ----------------------------------------------------------- */

.formular { display: grid; gap: 1.1rem; }
.feld { display: grid; gap: .38rem; }
.feld label {
  font-family: var(--schrift-titel);
  font-size: .86rem;
  font-weight: 600;
}
.feld .noetig { color: var(--rot); }
.feld input, .feld textarea, .feld select {
  font: inherit;
  font-size: 1rem;
  padding: .72rem .85rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--papier);
  color: var(--tinte);
  width: 100%;
}
.feld textarea { min-height: 8.5rem; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  border-color: var(--gruen);
  outline: 2px solid rgba(32,123,66,.25);
  outline-offset: 0;
}
.feld__hilfe { font-size: .84rem; color: var(--tinte-leis); }
.feld--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 34rem) { .feld--zwei { grid-template-columns: 1fr; } }

/* Falle fuer Maschinen. Nicht display:none, das fuellen manche trotzdem. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.haken { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.haken input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--gruen); }
.haken label { font-size: .92rem; font-weight: 400; font-family: var(--schrift-text); line-height: 1.5; }

.meldung {
  padding: .9rem 1.1rem;
  border-radius: var(--rund);
  font-size: .95rem;
  border: 1px solid;
}
.meldung--fehler { background: #FDF1EF; border-color: #E9B7B0; color: #8C2B1E; }
.meldung--gut    { background: #EEF6F0; border-color: #A8CDB5; color: #14512D; }

/* --- Hinweisband -------------------------------------------------------- */

.hinweisband {
  background: var(--gruen-tief);
  color: #fff;
  font-size: .95rem;
  padding: .7rem 0;
}
.hinweisband .innen { display: flex; align-items: center; gap: .7rem; }
.hinweisband svg { width: 18px; height: 18px; flex: none; }

/* --- Fuss --------------------------------------------------------------- */

.fuss {
  background: #141815;
  color: rgba(255,255,255,.72);
  padding-block: clamp(2.6rem, 5vw, 4rem) 2rem;
  font-size: .94rem;
}
.fuss a { color: rgba(255,255,255,.9); }
.fuss__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2rem;
}
.fuss h4 {
  color: #fff;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .9rem;
  font-weight: 600;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fuss__unten {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  font-size: .87rem;
  color: rgba(255,255,255,.55);
}
.fuss__unten nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* --- Entwurfsband ------------------------------------------------------- */

.entwurf {
  margin: 0;
  padding: .6rem 1.2rem;
  background: #2A2E29;
  color: rgba(255,255,255,.86);
  font-size: .84rem;
  text-align: center;
}
.entwurf b { color: #fff; }

/* --- Sprungleiste (Leistungen) ------------------------------------------ */

.sprungleiste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2.2rem;
}
.sprungleiste__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem .45rem .6rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 100px;
  font-size: .9rem;
  font-family: var(--schrift-titel);
  font-weight: 500;
  text-decoration: none;
}
.sprungleiste__link:hover { border-color: var(--tinte); }
.sprungleiste__punkt {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ton, var(--gruen));
  flex: none;
}

/* --- Werdegang ---------------------------------------------------------- */

.lauf { list-style: none; margin: 2rem 0; padding: 0; }
.lauf__punkt {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linie);
}
.lauf__punkt:last-child { border-bottom: 1px solid var(--linie); }
.lauf__jahr {
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  color: var(--gruen-tief);
  padding-top: .1rem;
}
.lauf__punkt p { margin: 0; }
@media (max-width: 34rem) {
  .lauf__punkt { grid-template-columns: 1fr; gap: .3rem; }
}

/* --- Grundsätze --------------------------------------------------------- */

.grundsaetze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.2rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}
.grundsaetze li {
  background: var(--papier);
  border: 1px solid var(--linie-fein);
  border-radius: var(--rund);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--schatten-fein);
  position: relative;
  overflow: hidden;
}
/* Die Kante oben traegt den gemessenen Winkel */
.grundsaetze li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    var(--streifen),
    var(--gruen) 0 3px,
    transparent 3px 8px
  );
}
.grundsaetze h3 { margin-bottom: .5rem; }
.grundsaetze p { font-size: .96rem; color: var(--tinte-leis); }

.abstand-oben { margin-top: 2.4rem; }

/* --- Rechtstexte -------------------------------------------------------- */

.recht { max-width: 74ch; }
.recht h2 { margin-top: 2.4rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); }
.recht h3 { margin-top: 1.6rem; font-size: 1.1rem; }
.recht ul { padding-left: 1.2rem; }
.recht li { margin-bottom: .4rem; }
.recht address { font-style: normal; }

/* --- Sprungmarke -------------------------------------------------------- */

.sprung {
  position: absolute;
  left: .75rem;
  top: -4rem;
  z-index: 100;
  background: var(--tinte);
  color: var(--grund);
  padding: .7rem 1.1rem;
  border-radius: var(--rund);
  text-decoration: none;
  font-family: var(--schrift-titel);
  font-weight: 600;
  transition: top .18s ease;
}
.sprung:focus { top: .75rem; }

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Einblenden --------------------------------------------------------- */
/* Ruhezustand ist sichtbar. Erst wenn das Skript laeuft, wird verdeckt,
   sonst bliebe ohne JavaScript die halbe Seite leer. */

html[data-bewegt] .einblenden {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
html[data-bewegt] .einblenden[data-sichtbar="ja"] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-bewegt] .einblenden { opacity: 1; transform: none; transition: none; }
}

/* Druck */
@media print {
  .kopf, .fuss__gitter, .lupe, .hero__anstrich, .schalter { display: none; }
  body { background: #fff; }
  .band { padding-block: 1rem; }
}