:root {
  color-scheme: light;
  --farbe-hintergrund: #f6f4f0;
  --farbe-flaeche: #fdfcfb;
  --farbe-flaeche-warm: #ece7df;
  --farbe-text: #22262b;
  --farbe-text-gedaempft: #66686a;
  --farbe-text-hell: #e6e7e9;
  --farbe-text-hell-gedaempft: #b5bac0;
  --farbe-primaer: #2b3a4a;
  --farbe-primaer-dunkel: #1c2833;
  --farbe-akzent: #b5532a;
  --farbe-akzent-hell: #d2734a;
  --farbe-akzent-dunkel: #8e3f1e;
  --farbe-akzent-flaeche: #f6e8e0;
  --farbe-rand: #d6d5d2;
  --farbe-fehler: #a3231c;
  --farbe-fehler-flaeche: #fdecea;
  --schrift: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --schrift-titel: Fraunces, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --radius: 6px;
  --radius-gross: 12px;
  --schatten-flach: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.05);
  --schatten-hebung: 0 2px 6px rgba(0, 0, 0, 0.07), 0 14px 40px rgba(0, 0, 0, 0.16);
  --seite-breit: 1120px;
}
/* Schriften der Vorlage „werkbank“ – selbst gehostet, subsettet, variabel.
   Erzeugt aus `schriften.dateien` in vorlage.mjs; die Dateien liegen unter schriften/. */
@font-face {
  font-family: "Inter";
  src: url("schriften/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  /* SIL Open Font License 1.1 – LIZENZ-Inter-OFL.txt liegt daneben und wird mit ausgeliefert */
}

@font-face {
  font-family: "Fraunces";
  src: url("schriften/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  /* SIL Open Font License 1.1 – LIZENZ-Fraunces-OFL.txt liegt daneben und wird mit ausgeliefert */
}

/* Bewegung der Vorlage „werkbank“ – erzeugt aus dem Block `bewegung` in vorlage.mjs. */

:root {
  --bewegung-dauer: 180ms;
  --bewegung-kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
  --uebergang: var(--bewegung-dauer) var(--bewegung-kurve);
}

/* Seitenwechsel: die sechs Seiten wechseln ineinander statt hart umzuschlagen.
   Zwei Zeilen CSS, kein Skript; wo der Browser sie nicht kennt, bleibt es beim harten Wechsel. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: var(--bewegung-kurve);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Choreografie der Buehne: der Signature-Moment vieler praemierter Seiten, einmal beim
   Laden. Oberzeile, Unterzeile und Knopf blenden nacheinander ein; Titel und Bild werden nur
   angehoben, nie ausgeblendet -- sie sind das groesste Element der Seite (LCP), und ein Titel,
   der beim Laden unsichtbar ist, verschiebt die gemessene Ladezeit um seine Animation.
   Nur transform und opacity, jede Zeit unter der Grenze, bei weniger Bewegung gar nicht. */
@keyframes buehne-auftreten {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes buehne-heben {
  from {
    transform: translateY(10px);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .buehne h1,
  .buehne img {
    animation: buehne-heben 220ms var(--bewegung-kurve) both;
  }

  .buehne .oberzeile,
  .buehne .unterzeile,
  .buehne .buehne-aktionen {
    animation: buehne-auftreten 220ms var(--bewegung-kurve) both;
  }

  .buehne img,
  .buehne .unterzeile {
    animation-delay: 60ms;
  }

  .buehne .buehne-aktionen {
    animation-delay: 120ms;
  }
}

/* Einblenden beim Scrollen: jeder Abschnitt ausser dem ersten. Der erste bleibt
   unberuehrt -- ueber dem Falz wird nichts eingeblendet, was der Besucher schon lesen will.
   Scrollgetrieben, also ohne Dauer: Der Fortschritt haengt am Scrollstand. Ein Abschnitt, der
   beim Laden schon sichtbar ist, steht dadurch von selbst am Ende der Bewegung -- es gibt
   keinen Moment, in dem er unsichtbar waere. */
@keyframes einblenden {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section + section {
      animation: einblenden both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/*
 * Gemeinsame Grundlage aller Vorlagen: Nullstellung, Schrift und Farben aus den Variablen,
 * Tastaturfokus, Sprunglink, Aufbau-Hinweis, Platzhalter, Honigfeld. Alles, was eine Seite
 * lesbar und bedienbar macht, bevor eine Vorlage ihr ein Gesicht gibt.
 *
 * Diese Datei kennt keinen Kundenwert und keine Gestaltung: Beides kommt aus dem
 * :root-Block davor (Palette, Schriften, Masse) und aus `vorlagen/<name>/stil.css` danach.
 */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/*
 * Der Notausgang der Bewegungsebene: Wer im Betriebssystem weniger Bewegung eingestellt
 * hat, bekommt keine. Die Regel steht hier und nicht in einer Vorlage, weil sie auch fuer
 * die Vorlage gelten muss, die ihre eigenen Uebergaenge mitbringt, und fuer jede Zeile, die
 * spaeter dazukommt -- deshalb der Stern und deshalb `!important`. Was die Vorlage steuert,
 * steht in ihrem Block `bewegung` (werkstatt/bewegung.mjs); dieser Block schaltet ab.
 *
 * Nicht auf null: Eine Dauer von 0 unterdrueckt das `transitionend`-Ereignis, an dem
 * Bedienlogik haengen kann. 0,01 ms laeuft ab, ohne sichtbar zu sein.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--schrift);
  color: var(--farbe-text);
  background-color: var(--farbe-hintergrund);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
}

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

/* Sprunglink: nur fuer Tastatur und Vorleseprogramme sichtbar */
.sprunglink {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--farbe-primaer-dunkel);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}

.sprunglink:focus {
  left: 1rem;
  top: 1rem;
}

.aufbau-hinweis {
  background: var(--farbe-akzent-flaeche);
  color: var(--farbe-akzent-dunkel);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Fehlende Pflichtangabe: faellt auf, statt zu fehlen */
.platzhalter {
  background: var(--farbe-fehler-flaeche);
  color: var(--farbe-fehler);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  font-weight: 600;
}

/* Honigfeld des Formulars: fuer Menschen unsichtbar, fuer Massenversender ein Koeder */
.formular .honig {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/*
 * Vorlage "Werkbank": solide, warm, handwerklich. Serifen in den Ueberschriften, dunkler
 * Kopf und dunkle Buehne auf der Primaerfarbe, Karten auf heller Flaeche.
 *
 * Alle Farben, Schriften und Masse kommen aus dem :root-Block, den `bauen.mjs` voranstellt;
 * diese Datei kennt nur die Variablen, nie einen Kundenwert. Die Nullstellung und alles,
 * was eine Seite bedienbar macht, steht in `werkstatt/grundlage.css`.
 */

h1,
h2,
h3 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.15;
  color: var(--farbe-primaer-dunkel);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin: 0 0 0.5em;
}

h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 0.6em;
}

h3 {
  font-size: 1.15rem;
  margin: 0 0 0.4em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--farbe-akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
  color: var(--farbe-akzent-dunkel);
}

.innen {
  max-width: var(--seite-breit);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Kopf */
.kopf {
  background: var(--farbe-primaer-dunkel);
  color: var(--farbe-text-hell);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopf-innen {
  max-width: var(--seite-breit);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.marke {
  font-family: var(--schrift-titel);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.navigation {
  display: flex;
  gap: 0.25rem 1.1rem;
  flex-wrap: wrap;
}

.navigation a {
  color: var(--farbe-text-hell);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.navigation a:hover,
.navigation a:focus-visible,
.navigation a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--farbe-akzent-hell);
}

/* Buehne -- Variante "text-bild" */
.buehne {
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell);
  padding: clamp(2.5rem, 7vw, 5.5rem) 0;
}

.buehne-innen {
  max-width: var(--seite-breit);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 2rem;
  align-items: center;
}

.buehne.mit-bild .buehne-innen {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

@media (max-width: 760px) {
  .buehne.mit-bild .buehne-innen {
    grid-template-columns: 1fr;
  }
}

.buehne h1 {
  color: #fff;
}

.buehne .oberzeile {
  color: var(--farbe-akzent-hell);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.buehne .unterzeile {
  font-size: 1.15rem;
  max-width: 38rem;
  color: var(--farbe-text-hell);
}

.buehne img {
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hebung);
}

.knopf {
  display: inline-block;
  background: var(--farbe-akzent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  border: 0;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--uebergang), transform var(--uebergang);
}

.knopf:hover,
.knopf:focus-visible {
  background: var(--farbe-akzent-dunkel);
  color: #fff;
}

/* Das Anheben nur dort, wo es einen Mauszeiger gibt: Auf einem Touchgeraet loest eine
   Beruehrung :hover aus und laesst ihn stehen -- der Knopf bliebe angehoben, bis der
   Besucher woanders hintippt. */
@media (hover: hover) {
  .knopf:hover {
    transform: translateY(-1px);
  }
}

.knopf.leise {
  background: transparent;
  color: var(--farbe-text-hell);
  border: 1px solid var(--farbe-text-hell-gedaempft);
  margin-left: 0.5rem;
}

.buehne-aktionen {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Abschnitte */
.abschnitt {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.abschnitt.warm {
  background: var(--farbe-flaeche-warm);
}

.abschnitt .oberzeile {
  color: var(--farbe-akzent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.einleitung {
  font-size: 1.1rem;
  max-width: 44rem;
  color: var(--farbe-text-gedaempft);
}

/* Leistungen -- Variante "karten" */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  padding: 1.5rem;
  box-shadow: var(--schatten-flach);
}

.karte h3 {
  margin-top: 0;
}

.karte p:last-child {
  margin-bottom: 0;
}

.karte .weiter {
  font-weight: 600;
  text-decoration: none;
}

.leistung {
  padding: 2rem 0;
  border-top: 1px solid var(--farbe-rand);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.5rem;
}

@media (max-width: 760px) {
  .leistung {
    grid-template-columns: 1fr;
  }
}

.leistung:first-of-type {
  border-top: 0;
}

/* Vorstellung -- Variante "zweispaltig" */
.zweispaltig {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2rem;
}

.faktenliste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faktenliste li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--farbe-rand);
}

.orte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
  margin: 1rem 0 0;
}

.orte li {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.95rem;
}

/* Kontakt -- Variante "karte" */
.kontakt-karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  padding: 1.5rem;
  box-shadow: var(--schatten-flach);
}

.kontakt-karte a {
  font-weight: 600;
}

.formular {
  display: grid;
  gap: 1rem;
}

.formular label {
  display: grid;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.formular input,
.formular textarea {
  font: inherit;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}

.formular textarea {
  min-height: 8rem;
  resize: vertical;
}

.formular-hinweis {
  font-size: 0.9rem;
  color: var(--farbe-text-gedaempft);
}

/* Die Bitte des Betriebs, bestimmte Angaben nicht zu machen (siehe vorlagen/ruhe/stil.css).
   Sie steht ueber dem Formular und darf nicht aussehen wie das Kleingedruckte darunter. */
.formular-bitte {
  font-size: 0.95rem;
  color: var(--farbe-text);
  background: var(--farbe-flaeche-warm);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 0 0 1.5rem;
}

/* Rechtstexte */
.rechtstext {
  max-width: 46rem;
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
  margin: 0 auto;
}

.rechtstext h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
}

.rechtstext h3 {
  font-size: 1.05rem;
  margin-top: 1.25rem;
}

/* Fuss */
.fuss {
  background: var(--farbe-primaer-dunkel);
  color: var(--farbe-text-hell-gedaempft);
  padding: 2rem 0;
  font-size: 0.9rem;
}

.fuss-innen {
  max-width: var(--seite-breit);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.fuss a {
  color: var(--farbe-text-hell);
}

.fuss-firma strong {
  color: #fff;
}

.fuss-jahr {
  float: right;
}

@media (max-width: 600px) {
  .fuss-jahr {
    float: none;
    display: block;
    margin-top: 0.5rem;
  }
}

/* Signatur -- Variante "prozess": So laeuft ein Auftrag. Nummerierte Schritte in einer Reihe,
   jede Nummer als Kreis in der Akzentfarbe mit einer Linie, die zum naechsten Schritt fuehrt;
   am Handy untereinander, die Linie dann senkrecht am linken Rand. Die Linie endet innerhalb
   des eigenen Kastens, damit sie beim Umbruch auf zwei Zeilen nirgends ins Leere laeuft. */
.signatur-prozess {
  background: var(--farbe-hintergrund);
}

.schritte {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem 1.5rem;
}

.schritt {
  position: relative;
  padding-top: 3.5rem;
}

.schritt::before {
  content: "";
  position: absolute;
  top: calc(1.25rem - 1px);
  left: 2.5rem;
  right: 0;
  height: 2px;
  background: var(--farbe-rand);
}

.schritt:last-child::before {
  display: none;
}

.schritt-nummer {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--farbe-akzent);
  color: #fff;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  box-shadow: var(--schatten-flach);
}

.schritt h3 {
  margin-top: 0;
}

.schritt p {
  color: var(--farbe-text-gedaempft);
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .schritte {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .schritt {
    padding-top: 0;
    padding-left: 3.5rem;
    min-height: 2.5rem;
  }

  .schritt::before {
    top: 2.5rem;
    bottom: -1.75rem;
    left: calc(1.25rem - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }
}