/* Archivo als eine Datei je Zeichensatz.
   Google liefert fuer alle vier Schnitte dieselbe Datei aus, weil Archivo
   eine variable Schrift ist. Vier Mal dasselbe herunterzuladen waere
   200 kB umsonst, deshalb liegt hier je Zeichensatz genau eine Datei und
   font-weight deckt den ganzen Bereich ab.
   Lokal statt von Google: schneller, und die IP des Besuchers geht nicht
   an einen Dritten. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(schrift/archivo-latin-ext.woff2) format("woff2");
  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: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(schrift/archivo-latin.woff2) format("woff2");
  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;
}


/* ══════════════════════════════════════════════════════════════════════════
   Dalipi Ges.m.b.H. — Stylesheet der gesamten Website.

   Eine einzige Datei fuer alle dreissig Seiten. Beim ersten Aufruf wird sie
   geladen, danach liegt sie im Cache des Browsers. Waere das CSS in jeder
   Seite eingebettet, muesste der Besucher es dreissig Mal herunterladen.

   Farbwelt: das Blau vom Firmenschild, dazu Weiss, Papier und ein tiefes
   Blau fuer dunkle Flaechen. Eine Farbe, konsequent gesetzt: sie markiert,
   was angeklickt oder gelesen werden soll. Waere alles blau, waere nichts
   mehr wichtig. Gelb und Rot stehen zwar auch auf dem Schild, kommen aber
   nur im nachgebauten Logo vor, sonst nirgends.

   Typografie: Archivo in zwei Schnitten. Ueberschriften werden nicht
   getrennt (hyphens: none), weil "Thermen-wartung" mitten im Titel wie ein
   Fehler aussieht. Im Fliesstext ist Trennung erlaubt, dort hilft sie.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Hausfarbe ist das Blau vom Firmenschild in der Rueppgasse. Anders als
     Gelb traegt es sowohl als Flaeche mit weisser Schrift als auch selbst
     als Schrift auf Hell, deshalb kommt die Seite mit einer Farbe aus.
       #0e3fa6 auf Weiss   9,1:1     weiss auf #0e3fa6  9,1:1
       #0e3fa6 auf Papier  8,3:1     weiss auf #06214f 15,7:1
     Auf dunklem Grund ist dasselbe Blau zu dunkel, dafuer gibt es --marke-hell
     mit 7,0:1 auf Schwarz. Gelb und Rot vom Schild kommen nur im Logo vor. */
  --marke:      #0e3fa6;
  --marke-dunkel:#0a2e78;
  --marke-tief: #06214f;   /* dunkle Flaechen, statt reinem Schwarz */
  --marke-hell: #6f9dff;   /* Schrift und Akzente auf dunklem Grund */
  --marke-blass:#eef3fd;
  --schwarz:    #141414;
  --schwarz-2:  #0b0b0b;
  --schwarz-3:  #222020;
  --weiss:      #ffffff;
  --papier:     #f6f5f2;
  --papier-2:   #ecebe6;
  --text:       #1a1a1a;
  --text-2:     #56534e;      /* geprueft 7,0:1 auf Papier */
  --text-hell:  #ffffff;
  --text-hell-2:rgba(255,255,255,.72);
  --linie:      #e0dfd9;
  --linie-dunkel: rgba(255,255,255,.16);
  --rot:        #c62828;      /* nur fuer den Notdienst, sonst nirgends */
  /* Dasselbe Rot traegt auf der fast schwarzen Notleiste nur 3,5:1.
     Fuer Schrift auf dunklem Grund deshalb ein aufgehellter Ton, 6,2:1. */
  --rot-hell:   #ff5252;

  --ease:       cubic-bezier(.22,1,.36,1);
  --ease-weich: cubic-bezier(.4,0,.2,1);

  --z-kopf: 60; --z-menue: 70; --z-leiste: 80;
  --rand: clamp(1.1rem, 4vw, 2rem);
  --breit: 1240px;
  --schmal: 760px;
}

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

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

body {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg { max-width: 100%; display: block; }
/* Ein Inline-SVG ohne Groessenangabe waechst auf die volle Breite seines
   Behaelters. Diese Zeile ist die Bremse dafuer, falls irgendwo eine
   speziellere Regel fehlt. */
a svg, button svg, .mehr svg { width: 1em; height: 1em; flex: 0 0 auto; }
img { height: auto; background: var(--papier-2); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--marke); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible, .buehne :focus-visible, .seitenkopf :focus-visible,
.fuss :focus-visible, .blaugrund :focus-visible, .rufleiste :focus-visible,
.notband :focus-visible { outline-color: #ffffff; }

/* ── Typografie ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  hyphens: none;                 /* keine Trennung in Ueberschriften */
  overflow-wrap: break-word;     /* nur als Notnagel bei Extremfaellen */
  text-wrap: balance;            /* verteilt die Zeilen gleichmaessig, statt
                                    ein einzelnes Wort haengen zu lassen */
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 1.04; letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.24; }
h4 { font-size: 1.05rem; }
p  { text-wrap: pretty; }
strong, b { font-weight: 700; }

.lede { font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.6; color: var(--text-2); }
.klein { font-size: .88rem; }
.gross-versal {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── Raster ─────────────────────────────────────────────────────────────── */
.wrap   { width: min(100% - var(--rand) * 2, var(--breit)); margin-inline: auto; }
.eng    { width: min(100% - var(--rand) * 2, var(--schmal)); margin-inline: auto; }
.block  { padding-block: clamp(3.4rem, 7vw, 6rem); }
.block-eng { padding-block: clamp(2.4rem, 5vw, 4rem); }
/* Folgen zwei Bloecke mit demselben Grund aufeinander, addieren sich ihre
   Innenabstaende zum doppelten Wert. Dann traegt der obere den Abstand. */
.block.papier + .block.papier,
.block:not(.papier):not(.dunkel) + .block:not(.papier):not(.dunkel) { padding-top: 0; }
.kopf-block { max-width: 46rem; }
.kopf-block .lede { margin-top: 1rem; }

.dunkel { background: var(--schwarz); color: var(--text-hell); }
.dunkel p, .dunkel .lede { color: var(--text-hell-2); }
.papier { background: var(--papier); }

/* ── Knoepfe ────────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem;
  font-weight: 700; font-size: .97rem; letter-spacing: -.01em;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  font-family: inherit;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .14s var(--ease);
}
.knopf:active { transform: scale(.975); }
.knopf svg { width: 17px; height: 17px; flex: 0 0 auto; }
.mehr svg { width: 16px; height: 16px; }
.k-blau   { background: var(--marke); color: var(--weiss); }
.k-blau:hover { background: var(--marke-dunkel); }
.k-schwarz { background: var(--schwarz); color: var(--weiss); }
.k-schwarz:hover { background: var(--schwarz-3); }
.k-linie  { border-color: var(--schwarz); color: var(--schwarz); }
.k-linie:hover { background: var(--schwarz); color: var(--weiss); }
.k-linie-hell { border-color: rgba(255,255,255,.45); color: var(--weiss); }
.k-linie-hell:hover { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }

/* ── Notdienstband, ganz oben auf jeder Seite ───────────────────────────── */
.notband {
  background: var(--schwarz-2); color: var(--weiss);
  font-size: .84rem; letter-spacing: .01em;
}
.notband .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem 1.4rem; flex-wrap: wrap; padding-block: .52rem;
}
.notband a { text-decoration: none; font-weight: 700; white-space: nowrap; }
.notband .puls {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--marke-hell); font-weight: 700;
}
/* Der Notdienst ist das eine, was sofort ins Auge fallen soll. Deshalb hier
   Rot statt Blau, dazu etwas mehr Groesse und eine weitere Laufweite. */
.notband .puls.warn {
  color: var(--rot-hell); font-size: .92rem; letter-spacing: .02em;
}
.notband .punkt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--marke-hell);
  flex: 0 0 auto;
}
.notband .puls.warn .punkt {
  width: 9px; height: 9px; background: var(--rot-hell);
  box-shadow: 0 0 0 0 rgba(255,82,82,.55);
}
html.js .notband .puls.warn .punkt { animation: puls-warn 2s var(--ease-weich) infinite; }
@keyframes puls-warn {
  0%      { box-shadow: 0 0 0 0 rgba(255,82,82,.62); transform: scale(1); }
  55%     { box-shadow: 0 0 0 9px rgba(255,82,82,0); transform: scale(1.18); }
  80%     { transform: scale(1); }
  100%    { box-shadow: 0 0 0 0 rgba(255,82,82,0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .notband .puls.warn .punkt { animation: none !important; }
}
html.js .notband .punkt { animation: puls 2.4s var(--ease-weich) infinite; }
@keyframes puls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}
@media (prefers-reduced-motion: reduce) { .notband .punkt { animation: none !important; } }
.notband .oeff { color: rgba(255,255,255,.62); }
@media (max-width: 719px) { .notband .oeff { display: none; } }

/* ── Kopf mit Menue ─────────────────────────────────────────────────────── */
.kopf-huelle { position: sticky; top: 0; z-index: var(--z-kopf); }
.kopf {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow .3s var(--ease);
}
.kopf.fest { box-shadow: 0 10px 30px rgba(0,0,0,.09); }
/* Bezugspunkt fuer das Aufklappmenue. Haengt es am Menuepunkt selbst, ragt
   es bei fuenf Spalten links aus dem Bild, weil der Punkt links im Kopf steht. */
.kopf { position: relative; }
.kopf-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .8rem;
}
.marke { display: inline-block; text-decoration: none; }

.menue { display: none; align-items: center; gap: .3rem; }
@media (min-width: 1060px) { .menue { display: flex; } }
.menue > li { list-style: none; }
.menue a, .menue button {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .62rem .78rem; font-size: .93rem; font-weight: 600;
  text-decoration: none; color: var(--text); background: none; border: 0;
  cursor: pointer; font-family: inherit; letter-spacing: -.01em;
  transition: color .16s var(--ease);
}
.menue a:hover, .menue button:hover { color: var(--marke); }
.menue [aria-current="page"] { color: var(--marke); }
.menue .pfeil { width: 11px; height: 11px; transition: transform .22s var(--ease); }
.menue [aria-expanded="true"] .pfeil { transform: rotate(180deg); }

/* Aufklappmenue der Leistungen. Ohne JS bleibt es zu, dafuer gibt es die
   Kategorieseiten, die dieselben Links noch einmal als Kacheln zeigen. */
.klapp {
  position: absolute; left: 50%; translate: -50% 0; top: 100%;
  z-index: var(--z-menue);
  width: min(94vw, 1010px);
  background: var(--weiss); border: 1px solid var(--linie);
  box-shadow: 0 24px 60px rgba(0,0,0,.16);
  padding: 1.6rem 1.8rem;
  display: none;
  /* Fuenf Gruppen, fuenf Spalten. Mit auto-fit wurden daraus drei plus zwei
     und rechts blieb eine Luecke. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.4rem 1.6rem;
}
.klapp.offen { display: grid; }
html.js .klapp.offen { animation: klappauf .2s var(--ease); }
@keyframes klappauf { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .klapp.offen { animation: none; } }
.klapp-gruppe > a.gruppe-titel {
  display: block; padding: 0 0 .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--marke);
  border-bottom: 2px solid var(--marke); margin-bottom: .55rem;
}
.klapp-gruppe ul { list-style: none; display: grid; gap: .1rem; }
.klapp-gruppe li a { padding: .3rem 0; font-size: .92rem; font-weight: 500; display: block; }
.klapp-gruppe li a:hover { color: var(--marke); }

.kopf-tel { display: none; }
@media (min-width: 860px) { .kopf-tel { display: inline-flex; } }

/* Menue am Handy */
.burger {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  background: var(--schwarz); border: 0; cursor: pointer;
}
@media (min-width: 1060px) { .burger { display: none; } }
.burger span { display: block; width: 20px; height: 2px; background: var(--weiss); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--weiss);
  transition: transform .22s var(--ease), top .22s var(--ease);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.handy-menue {
  display: none; background: var(--weiss); border-bottom: 1px solid var(--linie);
  max-height: min(78vh, 640px); overflow-y: auto;
}
.handy-menue.offen { display: block; }
/* Wer am Handy das Menue offen laesst und dann das Fenster dreht oder
   vergroessert, haette es sonst weiter offen unter dem Kopf haengen. */
@media (min-width: 1060px) { .handy-menue, .handy-menue.offen { display: none; } }
.handy-menue ul { list-style: none; }
.handy-menue > .wrap > ul > li { border-bottom: 1px solid var(--linie); }
.handy-menue a { display: block; padding: .85rem 0; text-decoration: none; font-weight: 600; }
.handy-menue .unter { padding: 0 0 .7rem .9rem; }
.handy-menue .unter a { padding: .42rem 0; font-weight: 500; font-size: .94rem; color: var(--text-2); }

/* ── Buehne der Startseite ──────────────────────────────────────────────── */
.buehne { position: relative; background: var(--schwarz); color: var(--text-hell); overflow: hidden; }
.buehne-bild { position: absolute; inset: 0; }
.buehne-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.buehne-bild::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.62) 42%, rgba(10,10,10,.9) 100%),
    linear-gradient(100deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.3) 70%);
}
.buehne-in {
  position: relative; z-index: 1;
  padding-block: clamp(3.6rem, 9vw, 7rem);
}
.buehne-text { max-width: 42rem; }
.buehne h1 { color: var(--weiss); }
.buehne h1 .mark {
  background: var(--marke); color: var(--weiss);
  padding: 0 .22em; margin-inline: -.06em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  /* Der markierte Teil bleibt in einer Zeile. Sonst reisst er am Handy
     auseinander und es sieht aus wie zwei getrennte Markierungen. */
  white-space: nowrap;
}
.buehne .lede { color: rgba(255,255,255,.82); margin-top: 1.25rem; max-width: 34rem; }
.buehne-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.buehne-marker {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  margin-top: 2.1rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.86);
}
.buehne-marker span { display: inline-flex; align-items: center; gap: .5rem; }
.buehne-marker span::before {
  content: ""; width: 9px; height: 9px; background: var(--marke-hell); flex: 0 0 auto;
}

/* Die beiden Schwerpunkte sitzen direkt in der Buehne, damit sie ohne
   Scrollen zu sehen sind. Das war die ausdrueckliche Vorgabe. */
.schwerpunkte { display: grid; gap: 1rem; margin-top: 2.6rem; }
@media (min-width: 780px) { .schwerpunkte { grid-template-columns: 1fr 1fr; gap: 1.2rem; } }
.schwerpunkt {
  display: block; text-decoration: none; padding: 1.5rem 1.5rem 1.4rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  transition: background-color .24s var(--ease), border-color .24s var(--ease),
              transform .24s var(--ease);
}
.schwerpunkt:hover { background: rgba(255,255,255,.13); border-color: var(--marke-hell); transform: translateY(-3px); }
.schwerpunkt .marker { color: var(--marke-hell); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.schwerpunkt b { display: block; font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; margin-top: .5rem; color: var(--weiss); }
.schwerpunkt p { font-size: .95rem; color: rgba(255,255,255,.75); margin-top: .45rem; }
.schwerpunkt .mehr { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-weight: 700; font-size: .9rem; color: var(--marke-hell); }
.schwerpunkt.rot { border-color: rgba(255,255,255,.3); }
.schwerpunkt.rot .marker { color: #ff9a9a; }

/* ── Zahlenband ─────────────────────────────────────────────────────────── */
.zahlen { background: var(--marke); color: var(--weiss); }
.zahlen-gitter { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.6rem 1rem; padding-block: clamp(2rem, 4vw, 3rem); }
@media (min-width: 820px) { .zahlen-gitter { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.zahl b { display: block; font-size: clamp(2.2rem, 5vw, 3.3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.zahl span { display: block; font-size: .84rem; font-weight: 600; line-height: 1.35; margin-top: .5rem; max-width: 22ch; }

/* ── Text-Bild-Wechsel ──────────────────────────────────────────────────── */
.paar { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
@media (min-width: 900px) {
  .paar { grid-template-columns: 1fr 1fr; }
  .paar.bild-links > .paar-bild { order: -1; }
  .paar.schmal-text { grid-template-columns: 1.05fr .95fr; }
}
.paar-bild img { width: 100%; }
/* Fliesstext im Abschnitt: ein Wert fuer alle Abstaende, damit die Seite
   ueberall denselben Takt hat. Abschnitte ohne Bild hatten vorher gar keine
   Regel, dort klebte der erste Absatz an der Ueberschrift. */
.paar-text > * + *, .fliess > * + * { margin-top: 1.05rem; }
/* Nach einer Ueberschrift eine Spur mehr Luft als zwischen zwei Absaetzen.
   Sonst liest sich der erste Absatz wie eine Fortsetzung der Zeile darueber. */
.paar-text > h2 + *, .fliess > h2 + *,
.paar-text > h3 + *, .fliess > h3 + * { margin-top: 1.25rem; }
.paar-text ul { list-style: none; display: grid; gap: .6rem; margin-top: 1.2rem; }
.paar-text li { padding-left: 1.9rem; position: relative; color: var(--text-2); }
.paar-text li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 11px; height: 3px; background: var(--marke);
}
.dunkel .paar-text li { color: var(--text-hell-2); }
.dunkel .paar-text li::before { background: var(--marke-hell); }

/* ── Kachelraster ───────────────────────────────────────────────────────── */
.kacheln { display: grid; gap: 1.1rem; margin-top: 2.6rem; }
@media (min-width: 620px) { .kacheln { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .kacheln.drei { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.kachel {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--weiss); border: 1px solid var(--linie);
  overflow: hidden;
  transition: border-color .26s var(--ease), transform .26s var(--ease), box-shadow .26s var(--ease);
}
.kachel:hover { border-color: var(--schwarz); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.1); }
/* Feste Proportion fuer alle Kacheln. Die Motive haben verschiedene
   Seitenverhaeltnisse, ohne diese Vorgabe waere jede Kachel anders hoch und
   die Ueberschriften stuenden auf verschiedenen Linien. */
.kachel-bild { overflow: hidden; background: var(--papier-2); aspect-ratio: 16 / 10; display: block; }
.kachel-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.kachel:hover .kachel-bild img { transform: scale(1.045); }
.kachel-text { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.kachel h3 { letter-spacing: -.025em; }
.kachel p { font-size: .95rem; color: var(--text-2); margin-top: .55rem; }
.kachel .mehr {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: auto; padding-top: 1.1rem;
  font-weight: 700; font-size: .9rem; color: var(--schwarz);
}
.kachel .mehr svg { transition: transform .24s var(--ease); }
.kachel:hover .mehr svg { transform: translateX(4px); }
.kachel .mehr::before { content: ""; }

/* Liste statt Kachel: fuer Unterseiten einer Kategorie */
.leistungsliste { display: grid; gap: .8rem; margin-top: 2.2rem; }
@media (min-width: 760px) { .leistungsliste { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.leistungslink {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.3rem; text-decoration: none;
  background: var(--weiss); border: 1px solid var(--linie);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.leistungslink:hover { border-color: var(--schwarz); transform: translateX(4px); }
.leistungslink b { font-weight: 700; letter-spacing: -.02em; }
.leistungslink span { display: block; font-size: .88rem; color: var(--text-2); margin-top: .15rem; }
.leistungslink .pfeil-rund {
  margin-left: auto; flex: 0 0 auto;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--marke); color: var(--weiss);
}
.leistungslink .pfeil-rund svg { width: 15px; height: 15px; }

/* ── Ablauf in Schritten ────────────────────────────────────────────────── */
.schritte { display: grid; gap: 1.4rem; margin-top: 2.6rem; counter-reset: schritt; }
@media (min-width: 760px)  { .schritte { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .schritte.vier { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.schritt { counter-increment: schritt; padding-top: 1.3rem; border-top: 3px solid var(--marke); }
.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  display: block; font-size: .9rem; font-weight: 700; color: var(--marke);
  letter-spacing: .06em; margin-bottom: .55rem;
}
.dunkel .schritt::before { color: var(--marke-hell); }
.schritt h3 { font-size: 1.1rem; }
.schritt p { font-size: .94rem; color: var(--text-2); margin-top: .5rem; }
.dunkel .schritt p { color: var(--text-hell-2); }

/* ── Notdienstblock ─────────────────────────────────────────────────────── */
.notblock {
  background: var(--schwarz); color: var(--weiss);
  /* Signalstreifen ueber die volle Breite statt Balken an der Seite.
     Ein Streifen oben liest sich wie ein Hinweisband am Bau, ein Balken
     links wie ein beliebiger Hinweiskasten. */
  border-top: 4px solid var(--marke);
}
.notblock-in { display: grid; gap: 1.6rem; align-items: center; padding-block: clamp(2.2rem, 4.5vw, 3.4rem); }
@media (min-width: 880px) { .notblock-in { grid-template-columns: 1fr auto; gap: 2.6rem; } }
.notblock h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.notblock p { color: var(--text-hell-2); margin-top: 1rem; max-width: 44ch; }
.notblock .tel-gross {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em;
  color: var(--marke-hell); text-decoration: none; white-space: nowrap;
}
.notblock .tel-gross:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ── Fragen ─────────────────────────────────────────────────────────────── */
.frage { border-bottom: 1px solid var(--linie); }
.frage:first-of-type { border-top: 1px solid var(--linie); }
.frage summary {
  list-style: none; cursor: pointer; padding: 1.15rem 0;
  display: flex; gap: 1.2rem; align-items: baseline; justify-content: space-between;
  font-weight: 700; font-size: 1.04rem; letter-spacing: -.015em;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; flex: 0 0 auto; font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--marke); transition: transform .24s var(--ease);
}
.frage[open] summary::after { transform: rotate(45deg); }
.frage p { padding-bottom: 1.25rem; color: var(--text-2); max-width: 64ch; }
html.js .frage[open] p { animation: aufklappen .28s var(--ease); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .frage[open] p { animation: none; } }

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.kontakt-gitter { display: grid; gap: 2.4rem; margin-top: 2.4rem; }
@media (min-width: 940px) { .kontakt-gitter { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.kontaktdaten { list-style: none; display: grid; gap: 1.3rem; }
.kontaktdaten li { display: grid; gap: .2rem; }
.kontaktdaten b { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.kontaktdaten a { font-weight: 700; font-size: 1.1rem; text-decoration: none; letter-spacing: -.02em; }
.kontaktdaten a:hover { color: var(--marke); }
.zeiten { width: 100%; border-collapse: collapse; margin-top: 1.6rem; }
.zeiten th, .zeiten td { text-align: left; padding: .58rem 0; border-bottom: 1px solid var(--linie); font-size: .95rem; }
.zeiten th { font-weight: 500; color: var(--text-2); }
.zeiten td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.karte { border: 1px solid var(--linie); background: var(--papier-2); }
/* Kein eingebetteter Kartendienst, sondern ein Bild mit Link. Eine Einbettung
   wuerde beim Seitenaufruf ungefragt Daten an einen Dritten uebertragen und
   dazu mehrere hundert Kilobyte nachladen. Der Link tut beides nicht. */
.karte-link { display: block; position: relative; text-decoration: none; overflow: hidden; }
.karte-link img { width: 100%; height: 100%; object-fit: cover; min-height: 260px;
  transition: transform .6s var(--ease); }
.karte-link:hover img { transform: scale(1.04); }
.karte-hinweis {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.9) 60%);
  color: var(--weiss); padding: 3rem 1.3rem 1.2rem;
}
.karte-hinweis b { display: block; font-size: 1.06rem; letter-spacing: -.02em; }
.karte-hinweis > span {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .35rem;
  font-size: .9rem; font-weight: 700; color: var(--marke);
}
.karte-hinweis svg { width: 15px; height: 15px; }

/* Formular */
.formular { display: grid; gap: .9rem; margin-top: 1.6rem; }
.feld { display: grid; gap: .35rem; }
.feld label { font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.feld input, .feld select, .feld textarea {
  font-family: inherit; font-size: 1rem; padding: .82rem .9rem;
  border: 1px solid var(--linie); background: var(--weiss); color: var(--text);
  border-radius: 0;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 0; border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-blass);
}
.feld textarea { min-height: 120px; resize: vertical; }
.formular .zeile { display: grid; gap: .9rem; }
@media (min-width: 640px) { .formular .zeile { grid-template-columns: 1fr 1fr; } }
.formular .hinweis { font-size: .8rem; color: var(--text-2); }

/* ── Seitenkopf der Unterseiten ─────────────────────────────────────────── */
.seitenkopf { position: relative; background: var(--schwarz); color: var(--text-hell); overflow: hidden; }
.seitenkopf-bild { position: absolute; inset: 0; }
.seitenkopf-bild img { width: 100%; height: 100%; object-fit: cover; }
.seitenkopf-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(10,10,10,.94) 12%, rgba(10,10,10,.6) 68%, rgba(10,10,10,.75) 100%);
}
.seitenkopf-in { position: relative; z-index: 1; padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.seitenkopf h1 { max-width: 20ch; }
.seitenkopf .lede { color: rgba(255,255,255,.82); margin-top: 1.1rem; max-width: 46ch; }
.seitenkopf .knopf { margin-top: 1.8rem; }

/* Brotkrumen */
.krumen { font-size: .82rem; margin-bottom: 1.1rem; }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .55rem; }
.krumen li { display: flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.6); }
.krumen li + li::before { content: "›"; opacity: .55; }
.krumen a { color: rgba(255,255,255,.82); text-decoration: none; }
.krumen a:hover { color: var(--marke-hell); }
.krumen [aria-current="page"] { color: var(--marke-hell); }
/* Auf Impressum und Datenschutz stehen die Brotkrumen auf weissem Grund. */
.krumen-hell li { color: var(--text-2); }
.krumen-hell a { color: var(--text-2); }
.krumen-hell a:hover { color: var(--text); }
.krumen-hell [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ── Nachbarn am Seitenende ─────────────────────────────────────────────── */
.nachbarn { display: grid; gap: .8rem; margin-top: 2rem; }
@media (min-width: 700px) { .nachbarn { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.nachbar {
  display: block; padding: 1rem 1.15rem; text-decoration: none;
  border: 1px solid var(--linie); background: var(--weiss);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.nachbar:hover { border-color: var(--schwarz); transform: translateY(-2px); }
.nachbar span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-2); }
.nachbar b { display: block; font-weight: 700; margin-top: .25rem; letter-spacing: -.02em; }

/* ── Fuss ───────────────────────────────────────────────────────────────── */
.fuss { background: var(--schwarz); color: rgba(255,255,255,.7); padding-block: clamp(2.8rem, 5vw, 4rem) 1.6rem; font-size: .93rem; }
.fuss-gitter { display: grid; gap: 2.2rem; }
@media (min-width: 760px)  { .fuss-gitter { grid-template-columns: 1.5fr 1fr 1fr; gap: 2.6rem; } }
@media (min-width: 1040px) { .fuss-gitter { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.fuss h4 { color: var(--weiss); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; }
.fuss ul { list-style: none; display: grid; gap: .42rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--marke-hell); }
.fuss-text { margin-top: 1rem; max-width: 40ch; }
.fuss-unten {
  margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--linie-dunkel);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  font-size: .82rem; color: rgba(255,255,255,.5);
}
.fuss-unten a { color: rgba(255,255,255,.72); }

/* ── Feste Anrufleiste am Handy ─────────────────────────────────────────── */
.rufleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-leiste);
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--schwarz); padding-bottom: env(safe-area-inset-bottom);
}
.rufleiste a {
  padding: .95rem .6rem; text-align: center; text-decoration: none;
  font-weight: 700; font-size: .95rem; color: var(--weiss);
}
.rufleiste a.haupt { background: var(--marke); color: var(--weiss); }
@media (min-width: 860px) { .rufleiste { display: none; } }
@media (max-width: 859px) { body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); } }

/* ── Rechtstexte ────────────────────────────────────────────────────────── */
.rechtstext > * + * { margin-top: 1.05rem; }
.rechtstext h2 { font-size: 1.4rem; margin-top: 2.6rem; }
.rechtstext h3 { font-size: 1.08rem; margin-top: 1.8rem; }
.rechtstext ul { margin-left: 1.2rem; display: grid; gap: .4rem; }
.rechtstext li { padding-left: .3rem; }
.rechtstext .platzhalter {
  background: var(--marke-blass); border: 1px solid var(--marke);
  padding: 1rem 1.2rem; font-size: .94rem;
}
.rechtstext .platzhalter b { display: block; margin-bottom: .3rem; }
.rechtstext dl { display: grid; gap: .5rem 1.4rem; }
@media (min-width: 640px) { .rechtstext dl { grid-template-columns: max-content 1fr; } }
.rechtstext dt { font-weight: 700; }

/* ── Einblenden beim Scrollen ───────────────────────────────────────────── */
html.js .auf { opacity: 0; transform: translateY(22px); }
html.js .auf.da {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ease), transform .62s var(--ease);
}
html.js .auf.da.v2 { transition-delay: .08s; }
html.js .auf.da.v3 { transition-delay: .16s; }
html.js .auf.da.v4 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html.js .auf { opacity: 1 !important; transform: none !important; }
}

/* Bilder schieben sich beim Erscheinen frei. Nur transform und clip-path,
   beides laeuft auf der Grafikkarte und kostet kein Neuberechnen des Layouts. */
html.js .bildauf { clip-path: inset(0 0 100% 0); }
html.js .bildauf.da {
  clip-path: inset(0 0 0 0);
  transition: clip-path .85s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html.js .bildauf { clip-path: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Ergaenzungen: Schnellanfrage im Kopf, Bewertungen, Team, Vollbildbanner
   und die Karte auf der Startseite.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Buehne mit Formular ────────────────────────────────────────────────── */
@media (min-width: 1020px) {
  .buehne-in.mit-formular {
    display: grid; grid-template-columns: minmax(0, 1fr) 27rem;
    gap: 3rem; align-items: center;
  }
}
.schnellanfrage {
  background: var(--marke); color: var(--weiss);
  padding: 1.6rem 1.5rem 1.4rem; margin-top: 2.4rem;
}
@media (min-width: 1020px) { .schnellanfrage { margin-top: 0; } }
.schnellanfrage h2 { font-size: 1.5rem; letter-spacing: -.025em; }
.schnellanfrage > p { font-size: .92rem; margin-top: .4rem; line-height: 1.45; }
.schnellanfrage .formular { margin-top: 1.1rem; gap: .65rem; }
.schnellanfrage input, .schnellanfrage textarea {
  border-color: transparent; font-size: .97rem; padding: .78rem .85rem;
}
.schnellanfrage input::placeholder, .schnellanfrage textarea::placeholder { color: #6b6b66; }
.schnellanfrage textarea { min-height: 88px; }
.schnellanfrage .knopf { width: 100%; justify-content: center; margin-top: .2rem; }
.schnellanfrage .darunter { font-size: .84rem; margin-top: .7rem; }
.schnellanfrage .darunter a { font-weight: 700; }

/* Die zwei Schwerpunkte liegen jetzt als eigener Streifen unter der Buehne,
   weil im Kopf das Formular steht. */
.streifen { background: var(--schwarz-2); color: var(--weiss); }
.streifen-in { display: grid; gap: 1px; background: rgba(255,255,255,.14); }
@media (min-width: 780px) { .streifen-in { grid-template-columns: 1fr 1fr; } }
.streifen a {
  display: block; text-decoration: none; background: var(--schwarz-2);
  padding: 1.7rem clamp(1.1rem, 3vw, 2.2rem);
  transition: background-color .24s var(--ease);
}
.streifen a:hover { background: #171717; }
.streifen .marker { color: var(--marke-hell); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; }
.streifen b { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em;
  margin-top: .45rem; }
.streifen p { font-size: .95rem; color: rgba(255,255,255,.74); margin-top: .4rem; max-width: 44ch; }
.streifen .mehr { display: inline-flex; align-items: center; gap: .45rem; margin-top: .85rem;
  font-weight: 700; font-size: .9rem; color: var(--marke-hell); }

/* ── Bewertungen ────────────────────────────────────────────────────────── */
.bewertungen-kopf { display: grid; gap: 1.6rem; align-items: end; }
@media (min-width: 880px) {
  .bewertungen-kopf { grid-template-columns: minmax(0, 1fr) auto; gap: 2.6rem; }
  .bewertungen-steuer { justify-self: end; }
}
.note-zeile { display: flex; align-items: baseline; gap: .8rem; margin-top: 1.1rem; }
.note-zeile b { font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums; }
.note-zeile .sterne { color: var(--marke); font-size: 1.15rem; letter-spacing: .1em; }
.note-zeile span { font-size: .92rem; color: var(--text-2); }
.bewertungen-steuer { display: flex; gap: .5rem; }
.pfeiltaste {
  width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  background: var(--weiss); border: 1px solid var(--linie); color: var(--schwarz);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .14s var(--ease);
}
.pfeiltaste:hover { border-color: var(--schwarz); background: var(--papier); }
.pfeiltaste:active { transform: scale(.94); }
.pfeiltaste svg { width: 16px; height: 16px; }

.bewertungsbahn {
  display: flex; gap: 1.1rem; margin-top: 2rem; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .3rem;
}
.bewertungsbahn::-webkit-scrollbar { display: none; }
.bewertung {
  flex: 0 0 86%; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--linie);
  padding: 1.6rem 1.5rem 1.3rem;
  transition: border-color .24s var(--ease);
}
@media (min-width: 720px)  { .bewertung { flex-basis: calc((100% - 1.1rem) / 2); } }
@media (min-width: 1040px) { .bewertung { flex-basis: calc((100% - 2.2rem) / 3); } }
.bewertung:hover { border-color: var(--schwarz); }
.bewertung .sterne { color: var(--marke); font-size: 1.05rem; letter-spacing: .08em; }
.bewertung p { margin-top: .85rem; font-size: .98rem; }
.bewertung footer {
  margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--linie);
  display: flex; align-items: center; gap: .7rem; font-size: .88rem;
}
.bewertung .kuerzel {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--marke); color: var(--weiss); font-weight: 700; font-size: .9rem;
}
.bewertung footer b { font-weight: 700; }
.bewertung footer span { color: var(--text-2); }
.bewertung.platzhalter { background: var(--papier); border-style: dashed; }

/* ── Team ───────────────────────────────────────────────────────────────── */
.team { background: var(--marke); color: var(--weiss); }
.team .lede { color: rgba(255,255,255,.82); }
/* Zehn Namen, solange keine Fotos da sind. Flache Kacheln: der Kreis mit dem
   Anfangsbuchstaben und der Vorname daneben. Zwei Spalten am Handy, drei am
   Tablet, fuenf am Rechner, dann stehen zehn Namen als zwei saubere Reihen. */
.team-gitter {
  display: grid; gap: 1px; margin-top: 2.4rem; background: rgba(255,255,255,.28);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) { .team-gitter { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 900px) { .team-gitter { grid-template-columns: repeat(5, minmax(0,1fr)); } }
/* Die Kacheln sind weiss und liegen auf dem blauen Band, deshalb setzen sie
   ihre Textfarbe selbst. Ohne das erben sie das Weiss vom Band. */
.kopf-kachel {
  background: var(--weiss); color: var(--text);
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; min-height: 68px;
}
.kopf-kachel .initial {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--marke-blass); color: var(--marke);
  font-weight: 700; font-size: .95rem; line-height: 1;
}
.kopf-kachel b { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.team-note { margin-top: 1.1rem; color: rgba(255,255,255,.72); }

/* ── Vollbildbanner ─────────────────────────────────────────────────────── */
.banner { position: relative; color: var(--weiss); overflow: hidden; }
.banner-bild { position: absolute; inset: 0; }
.banner-bild img { width: 100%; height: 100%; object-fit: cover; }
.banner-bild::after {
  content: ""; position: absolute; inset: 0;
  /* Blau statt Schwarz: der Verlauf brandet und dunkelt zugleich. Er liegt
     als Ellipse in der Mitte, wo der Text steht. Zu den Raendern hin wird er
     duenn, dort bleibt das Bad zu sehen. Ein gleichmaessiger Verlauf, der
     stark genug fuer den Text ist, macht aus dem Foto eine graue Flaeche. */
  background: radial-gradient(ellipse 62% 86% at 50% 50%,
              rgba(6,33,79,.90) 0%, rgba(6,33,79,.88) 38%, rgba(6,33,79,.34) 100%);
}
.banner-in {
  position: relative; z-index: 1; text-align: center;
  padding-block: clamp(3.6rem, 9vw, 6.5rem);
  max-width: 46rem; margin-inline: auto;
}
.banner .marke-zeile {
  display: inline-flex; align-items: center; gap: .7rem;
  color: #a8c4ff; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.banner .marke-zeile::before { content: ""; width: 26px; height: 3px; background: #a8c4ff; }
.banner h2 { margin-top: 1rem; font-size: clamp(1.8rem, 4vw, 3rem); }
.banner p { margin-top: 1.1rem; color: rgba(255,255,255,.82); }
.banner .knopf { margin-top: 1.9rem; }

/* ── Karte auf der Startseite ───────────────────────────────────────────── */
/* Feste Proportion statt Hoehe vom Elternteil: das Feld steht jetzt ueber
   dem Formular in einer Spalte, die sich nach ihrem Inhalt richtet. Mit
   min-height: 100% waere es dort null Pixel hoch, und der Knopf schwebte
   ueber dem Formular. */
/* Feste Proportion, damit beim Nachladen der Karte nichts springt. */
.kartenfeld {
  position: relative; aspect-ratio: 16 / 10; min-height: 260px;
  background: var(--marke-tief); overflow: hidden;
}
@media (min-width: 940px) { .kartenfeld { aspect-ratio: 16 / 9; } }
.kartenfeld iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Kontaktblock: Formular gehoert rechts unter die Adresse ─────────────── */
@media (min-width: 940px) {
  .kontakt-gitter.zweispaltig { grid-template-columns: 1fr 1fr; align-items: start; }
}
.kontakt-rechts { display: grid; gap: 1.6rem; }

/* Beschriftung nur fuer Screenreader. Die Schnellanfrage arbeitet mit
   Platzhaltern, ein Feld ohne Beschriftung waere trotzdem ein Fehler. */
.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Gruende ────────────────────────────────────────────────────────────
   Wie die Schritte aufgebaut, aber ohne Zahl davor. Eine Nummerierung
   wuerde eine Reihenfolge behaupten, die es hier nicht gibt. */
.gruende { display: grid; gap: 1.4rem 2.6rem; margin-top: 2.6rem; }
@media (min-width: 760px) { .gruende { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.grund { padding-top: 1.3rem; border-top: 3px solid var(--marke); }
.grund h3 { font-size: 1.1rem; }
.grund p { font-size: .94rem; color: var(--text-2); margin-top: .5rem; max-width: 42ch; }
.dunkel .grund p { color: var(--text-hell-2); }

/* Note als Sterne. 4,2 von 5 heisst vier vollen Sterne und ein Rest, nicht
   fuenf. Der graue Satz liegt unten, der goldene daruber und wird auf den
   Anteil beschnitten. */
.sterne-teil {
  position: relative; display: inline-block; color: #cfcdc4;
  font-size: 1.15rem; letter-spacing: .1em;
}
.sterne-teil > span {
  position: absolute; inset: 0; overflow: hidden; width: var(--anteil);
  color: var(--marke); white-space: nowrap;
}

/* Quelle ohne Namen: keine Initiale, sonst stuende dort ein Buchstabe,
   der zu niemandem gehoert. */
.bewertung .quelle { color: var(--text-2); }

/* Schnellanfrage liegt auf der Hausfarbe, deshalb dreht der Knopf um:
   weisse Flaeche, blaue Schrift. */
.schnellanfrage .knopf, .schnellanfrage button {
  background: var(--weiss); color: var(--marke);
}
.schnellanfrage .knopf:hover, .schnellanfrage button:hover { background: var(--marke-blass); }

/* ── Wortmarke und Firmenschild ─────────────────────────────────────────
   Dieselbe Marke in drei Groessen: klein im Kopf und im Fuss, gross auf der
   nachgezeichneten Tafel im Betriebsabschnitt. Kursiv gestellt und eng
   gesperrt wie beim Schildermacher, aber sauber gesetzt. Das Gelb steht auf
   Weiss zu schwach, deshalb bekommt es dieselbe dunkelblaue Kontur wie auf
   dem Original. */
.wortmarke { display: block; line-height: 0; }
/* img traegt global einen Platzhaltergrund, damit Fotos beim Laden nicht
   weiss aufblitzen. Beim freigestellten Logo scheint der aber dauerhaft
   durch und legt eine graue Kachel dahinter. */
.wortmarke img { width: 100%; height: auto; display: block; background: none; }
.wortmarke.klein { width: 250px; }
@media (max-width: 700px) { .wortmarke.klein { width: 190px; } }
@media (max-width: 420px) { .wortmarke.klein { width: 158px; } }
.wortmarke.gross { width: min(100%, 460px); margin-inline: auto; }

/* Im Fuss ist der Grund dunkel. Das echte Schild ist eine weisse Tafel,
   also bekommt die Marke dort auch eine. */
.fuss-marke { display: inline-block; margin-bottom: 1.1rem; }

.schild { margin-top: 1.2rem; }
.schild-tafel {
  background: var(--weiss); border: 3px solid #d7d7d2;
  box-shadow: 0 6px 20px rgba(0,0,0,.09);
  padding: clamp(1rem, 2.6vw, 1.5rem) clamp(1.1rem, 3vw, 2rem);
  text-align: center; overflow: hidden;
}
.schild-netz {
  display: block; margin-top: .35rem; transform: skewX(-9deg);
  font-size: clamp(.7rem, 1.9vw, .92rem); font-style: italic;
  font-weight: 600; color: var(--text-2); letter-spacing: .08em;
}

/* ── Fabrikate, die betreut werden ──────────────────────────────────────────
   Eine Reihe gleich grosser Felder, damit kein Hersteller wichtiger aussieht
   als der andere. Die Namen stehen als Schrift, nicht als fremde Bildmarke. */
.fabrikate { background: var(--papier); }
/* Trennlinien liegen an den Feldern, nicht im Raster. Neun Namen gehen in
   keiner Spaltenzahl glatt auf, und ein Raster mit Linienhintergrund zeigt
   die leeren Spuren der letzten Reihe als graue Flaeche. */
.fabrikatliste {
  list-style: none; margin: 2.2rem 0 0; padding: 1px 0 0 1px;
  display: grid; gap: 0;
  /* Feste Spaltenzahl statt auto-fit. minmax(min(100%,190px),1fr) laesst sich
     beim Ermitteln der Eigenbreite nicht aufloesen, der Browser rechnet dann
     mit 190px je Spalte und macht das Raster breiter als der Bildschirm.
     Am Handy lief dadurch die ganze Seite ueber den rechten Rand hinaus. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fabrikatliste li {
  background: var(--weiss); display: grid; place-items: center;
  min-height: 104px; padding: 1.1rem 1rem;
  border: 1px solid var(--linie); margin: -1px 0 0 -1px;
}
/* Alle Logos liegen im selben Kasten und sind darin schon optisch
   ausgeglichen. Hier nur noch die Breite deckeln, damit sie auf schmalen
   Kacheln nicht an den Rand stossen. Kein Platzhaltergrund: die Dateien sind
   freigestellt, sonst laege ein graues Feld dahinter. */
.fabrikatliste img {
  width: 100%; max-width: 188px; height: auto; background: none;
}
@media (min-width: 560px) { .fabrikatliste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fabrikatliste { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fabrikat-note { margin-top: 1.1rem; color: var(--text-2); }

/* ── Referenzen: eigene Projektfotos ────────────────────────────────────────
   Zwei Projekte, jedes mit einem grossen Bild und drei kleineren daneben.
   Das grosse traegt die Bildunterschrift, die kleinen sind Ausschnitte. */
.referenzen { background: var(--weiss); }
.projekt { margin-top: 2.6rem; }
.projekt + .projekt { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.projekt-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--linie);
}
.projekt-kopf h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.projekt-kopf .ort { color: var(--text-2); font-size: .93rem; }
.projekt-gitter { display: grid; gap: .7rem; margin-top: 1.1rem; }
@media (min-width: 760px) {
  /* stretch statt start: das grosse Bild nimmt die Hoehe der rechten Spalte
     an, statt darueber hinauszuschiessen. Vorher endete es weit unter den
     beiden kleinen Bildern und liess rechts eine leere Flaeche stehen. */
  .projekt-gitter { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .projekt-neben { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
  /* Das Bild liegt absolut im Rahmen. Nur so geht seine Eigenhoehe nicht in
     die Zeilenhoehe ein, und die Zeile richtet sich allein nach der rechten
     Spalte. Mit height:100% allein blieb das Bild zu hoch. */
  .projekt-haupt { position: relative; height: 100%; min-height: 340px;
    overflow: hidden; }
  .projekt-haupt img {
    position: absolute; inset: 0;
    height: 100%; width: 100%; object-fit: cover; aspect-ratio: auto;
  }
}
.projekt figure { margin: 0; overflow: hidden; }
.projekt img { width: 100%; height: auto; display: block; border-radius: 2px; }
.projekt figcaption {
  margin-top: .5rem; font-size: .88rem; color: var(--text-2);
}
/* Dieselbe Hakenliste wie in den Abschnitten mit Bild, damit die Seite
   nicht plaetzlich runde Aufzaehlungspunkte bekommt. */
.projekt ul.haken {
  list-style: none; display: grid; gap: .6rem; margin: 1.3rem 0 0; padding: 0;
}
.projekt ul.haken li { padding-left: 1.9rem; position: relative; color: var(--text-2); }
.projekt ul.haken li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 11px; height: 2px; background: var(--marke);
}
.projekt-gitter > div > p { color: var(--text-2); }
.projekt-neben { margin-top: 1.4rem; }
.projekt-neben img { aspect-ratio: 3/4; object-fit: cover; }
@media (min-width: 760px) {
  .projekt-haupt img { aspect-ratio: 3/4; object-fit: cover; }
}