/* ==========================================================================
   BRUSK AG
   Dunkler Grund, Gold als einziger Akzent, feine Linien statt Schatten.
   Keine Fotos: die Seite traegt sich ueber Typografie und Zeichnung.
   ========================================================================== */

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

:root {
  --grund:    #0A0A0C;
  --grund-2:  #101116;
  --grund-3:  #16181E;
  --linie:    rgba(255, 255, 255, .09);
  --linie-2:  rgba(198, 166, 100, .28);
  --gold:     #C6A664;
  --gold-h:   #E0C68F;
  /* Fuer kleine Beschriftungen. #8E7642 kam auf allen drei Gruenden nur auf
     4,3 bis 4,5 zu 1 und fiel damit durch die Kontrastpruefung. */
  --gold-d:   #A4884E;
  --text:     #EDEDEF;
  --text-2:   #A8ABB2;

  --rand:     1200px;
  --radius:   4px;
  --schrift:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif:    'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --weich:    cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.1; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  background: var(--gold); color: #0A0A0C; padding: 10px 18px; font-weight: 600;
}
.skip:focus { left: 12px; }

.rahmen { width: min(100% - 48px, var(--rand)); margin-inline: auto; }
@media (max-width: 620px) { .rahmen { width: min(100% - 32px, var(--rand)); } }

/* ---------- wiederkehrende Bausteine ---------- */
.vorzeile {
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.h2 { font-size: clamp(28px, 4vw, 46px); }
.h3 { font-size: clamp(20px, 2.2vw, 26px); }
.lead { color: var(--text-2); font-size: clamp(16px, 1.3vw, 18px); margin-top: 20px; max-width: 62ch; }
.kopfzeile { max-width: 780px; margin-bottom: 56px; }

.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: 15px; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s var(--weich), color .2s var(--weich),
              border-color .2s var(--weich), transform .2s var(--weich);
}
.knopf svg { width: 18px; height: 18px; flex: none; }
.knopf--gold { background: var(--gold); color: #0A0A0C; }
.knopf--gold:hover { background: var(--gold-h); transform: translateY(-2px); }
.knopf--rand { border-color: var(--linie-2); color: var(--text); }
.knopf--rand:hover { border-color: var(--gold); color: var(--gold-h); transform: translateY(-2px); }

/* ============================== KOPF ============================== */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 12, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen { display: flex; align-items: center; gap: 28px; height: 84px; }

.marke { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.marke__zeichen { display: block; width: 42px; height: 42px; color: var(--text); flex: none; }
.marke__zeichen svg { display: block; width: 100%; height: 100%; }
.marke__zeichen--klein { width: 34px; height: 34px; }
.marke__wort { display: grid; gap: 1px; }
.marke__wort b {
  font-family: var(--serif); font-weight: 600; font-size: 19px;
  letter-spacing: .16em; line-height: 1;
}
.marke__wort i {
  font-style: normal; font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}

.nav { display: none; gap: 30px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.nav a { position: relative; padding: 6px 0; transition: color .2s var(--weich); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--weich);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }

.kopf__tel {
  display: none; align-items: center; gap: 9px;
  padding: 11px 20px; border: 1px solid var(--linie-2); border-radius: var(--radius);
  font-size: 14.5px; font-weight: 600; color: var(--gold-h);
  transition: border-color .2s var(--weich), background .2s var(--weich);
}
.kopf__tel svg { width: 16px; height: 16px; }
.kopf__tel:hover { border-color: var(--gold); background: rgba(198, 166, 100, .08); }

.burger {
  display: grid; gap: 5px; width: 44px; height: 44px; padding: 12px 10px;
  background: none; border: 1px solid var(--linie); border-radius: var(--radius); cursor: pointer;
}
.burger span { display: block; height: 1.6px; background: var(--text); border-radius: 2px; }

/* Das Menue haengt am Attribut hidden. Ohne diese Ausnahme sticht die Regel
   darunter die Vorgabe des Browsers aus und das Menue steht dauerhaft offen. */
.menue[hidden] { display: none; }
.menue {
  display: grid; gap: 2px; padding: 10px 24px 22px;
  border-top: 1px solid var(--linie); background: var(--grund);
}
.menue a { padding: 13px 2px; border-bottom: 1px solid var(--linie); font-weight: 500; }
.menue__tel {
  margin-top: 14px; text-align: center; background: var(--gold); color: #0A0A0C;
  border: 0 !important; border-radius: var(--radius); font-weight: 600;
}

@media (min-width: 1000px) {
  .nav, .kopf__tel { display: flex; }
  .burger, .menue { display: none; }
}

/* ============================== HERO ============================== */
.held { position: relative; overflow: hidden; border-bottom: 1px solid var(--linie); }
.held__raster {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(198, 166, 100, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 166, 100, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 72%);
}
.held__schein {
  position: absolute; top: -260px; left: 38%; width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(198, 166, 100, .11), transparent 64%);
  pointer-events: none;
}
.held__innen {
  position: relative;
  display: grid;
  column-gap: clamp(30px, 4vw, 56px);
  row-gap: 0;
  padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 8vw, 92px);
  /* Auf dem Handy: erst die Aussage, dann das Foto, dann die Knoepfe. Diese
     Folge steht schon so im HTML, hier wird sie nur benannt. */
  grid-template-areas: "text" "bild" "knoepfe" "punkte";
}
.held__innen > * { min-width: 0; }
.held__spalte  { grid-area: text; }
.held__bild    { grid-area: bild; }
.held__knoepfe { grid-area: knoepfe; }
.held__punkte  { grid-area: punkte; }

@media (min-width: 1000px) {
  /* Am Rechner holt das Raster die Knoepfe zurueck unter den Text, das Foto
     steht daneben und ueberspannt beide Zeilen. */
  .held__innen {
    grid-template-columns: 1.06fr .94fr;
    grid-template-areas:
      "text    bild"
      "knoepfe bild"
      "punkte  punkte";
    align-items: start;
  }
  .held__bild { align-self: center; }
}

/* Das Foto bringt seinen eigenen dunklen Grund mit. Die Maske laesst die
   Kanten auslaufen, damit es in die Seite uebergeht statt als Kachel zu enden.
   Ohne mask-composite greift nur die erste Maske, das faellt kaum auf. */
.held__bild { margin: 0; }
.held__bild img {
  display: block; width: 100%; height: auto;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 24%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 24%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
@media (max-width: 999px) {
  .held__bild { margin-top: 36px; }
  .held__bild img {
    height: min(58vw, 400px); object-fit: cover; object-position: 74% 0;
    mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  }
}
.held__punkte { grid-column: 1 / -1; }

.held__titel {
  display: grid; gap: 2px;
  font-size: clamp(34px, 7vw, 66px); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1.02;
}
/* Neben dem Foto ist die Spalte schmaler. Jede Zeile soll trotzdem als Ganzes
   stehen, deshalb hier kleiner und ohne Umbruch. */
@media (min-width: 1000px) {
  .held__titel { font-size: clamp(34px, 4.3vw, 56px); }
  .held__titel span { white-space: nowrap; }
}
.held__titel em { font-style: normal; color: var(--gold); }

.held__band {
  display: inline-block; margin-top: 26px;
  background: var(--gold); color: #0A0A0C;
  padding: 9px 20px; border-radius: 2px;
  font-size: clamp(15px, 1.9vw, 21px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.held__text { margin-top: 30px; max-width: 60ch; color: var(--text-2); font-size: clamp(16px, 1.35vw, 18.5px); }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
/* Auf schmalen Geraeten volle Breite: groessere Trefferflaeche fuer den Daumen. */
@media (max-width: 520px) {
  .held__knoepfe { display: grid; gap: 12px; }
  .held__knoepfe .knopf { justify-content: center; }
}

.held__punkte {
  display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 46px;
  padding-top: 26px; border-top: 1px solid var(--linie);
  font-size: 13.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2);
}
.held__punkte li { display: flex; align-items: center; gap: 12px; }
.held__punkte li::before {
  content: ""; width: 6px; height: 6px; flex: none;
  background: var(--gold); transform: rotate(45deg);
}

/* ============================== BAHNEN ============================== */
.bahn { padding: clamp(72px, 9vw, 118px) 0; border-bottom: 1px solid var(--linie); }
.bahn--akzent { background: var(--grund-2); }

/* Stoppuhr als Zeichnung im Hintergrund von «Über uns».
   Sie haengt am Inhaltsrahmen, nicht am Fenster: feste Groesse, fester Abstand
   zur rechten Kante des Rahmens. Dadurch behaelt sie ihre Stelle im Layout,
   egal wie breit das Fenster gezogen wird. Prozente oder vw waeren hier falsch,
   die liessen sie beim Ziehen wandern und wachsen. */
#ueber-uns { position: relative; overflow: hidden; }
#ueber-uns > .rahmen { position: relative; }
#ueber-uns .kopfzeile,
#ueber-uns .werte,
#ueber-uns .schweiz { position: relative; z-index: 1; }

.stoppuhr {
  position: absolute;
  z-index: 0;
  top: 6px;
  right: -44px;
  width: 360px;
  color: var(--gold);
  opacity: .13;
  pointer-events: none;
}
.stoppuhr svg { display: block; width: 100%; height: auto; }

.zwei { display: grid; gap: clamp(40px, 5vw, 76px); align-items: start; }
@media (min-width: 900px) { .zwei { grid-template-columns: 1.05fr .95fr; } }
@media (min-width: 900px) { .zwei--kontakt { grid-template-columns: .9fr 1.1fr; } }
.zwei > * { min-width: 0; }

/* Nur fuer Vorleseprogramme. Der Titel steht sichtbar im Bild, im Text waere er
   ein zweites Mal da; als Ueberschrift wird er hier trotzdem gebraucht. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Leistungskarten ---------- */
/* Die Karten liegen in einer waagrechten Bahn, die von Hand gewischt und von
   selbst weitergeschoben wird. Das Scrollen uebernimmt der Browser, deshalb
   funktioniert Wischen auf dem Handy ohne eigenes Zutun. */
.slider { position: relative; }
.karten.slider__bahn {
  /* Bezugspunkt fuer die absolut gesetzten Vorlese-Ueberschriften in den Karten.
     Ohne das haengen sie am .slider, entkommen dem overflow und ziehen die
     ganze Seite auf dem Handy nach rechts auf. */
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.karten.slider__bahn::-webkit-scrollbar { display: none; }
.karten.slider__bahn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.slider__bahn .karte { scroll-snap-align: start; }

@media (min-width: 620px) { .karten.slider__bahn { grid-auto-columns: calc((100% - 1px) / 2); } }
@media (min-width: 980px) { .karten.slider__bahn { grid-auto-columns: calc((100% - 2px) / 3); } }

.slider__steuerung {
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px;
}
.slider__knopf {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px;
  background: none; border: 1px solid var(--linie-2); border-radius: var(--radius);
  color: var(--text); cursor: pointer;
  transition: border-color .2s var(--weich), color .2s var(--weich), background .2s var(--weich);
}
.slider__knopf svg { width: 20px; height: 20px; }
.slider__knopf:hover { border-color: var(--gold); color: var(--gold-h); background: rgba(198,166,100,.08); }
.slider__knopf[disabled] { opacity: .32; cursor: default; }

.slider__punkte { display: flex; flex-wrap: wrap; gap: 2px; margin-right: auto; }
/* Der sichtbare Strich ist schmal, die Taste selbst muss aber gross genug zum
   Antippen sein. Deshalb sitzt der Strich als Pseudoelement in einer Flaeche
   von 44 mal 26 Pixeln. */
.slider__punkt {
  display: grid; place-items: center;
  width: 44px; height: 26px; padding: 0; border: 0;
  background: none; cursor: pointer;
}
.slider__punkt::before {
  content: ""; display: block; width: 24px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.20);
  transition: background .25s var(--weich), width .25s var(--weich);
}
.slider__punkt:hover::before { background: rgba(255,255,255,.42); }
.slider__punkt[aria-current="true"]::before { background: var(--gold); width: 36px; }

.slider__pause {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 0 16px; height: 46px;
  background: none; border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: border-color .2s var(--weich), color .2s var(--weich);
}
.slider__pause:hover { border-color: var(--gold); color: var(--gold-h); }
.slider__zeichen { width: 15px; height: 15px; }
.slider__pause .slider__zeichen--start { display: none; }
.slider__pause.ist-angehalten .slider__zeichen--pause { display: none; }
.slider__pause.ist-angehalten .slider__zeichen--start { display: block; }

@media (max-width: 560px) {
  .slider__pausetext { display: none; }
  .slider__pause { padding: 0 14px; }
  /* Die Punkte bekommen eine eigene Zeile, sonst quetschen sie sich zwischen
     die Pfeile und brechen unschoen um. */
  .slider__steuerung { flex-wrap: wrap; }
  .slider__punkte { order: 3; width: 100%; margin-right: 0; justify-content: center; }
}

.karte {
  min-width: 0; display: flex; flex-direction: column;
  background: var(--grund); transition: background .25s var(--weich);
}
.bahn--akzent .karte { background: var(--grund-2); }
.karte:hover { background: var(--grund-3); }
.karte__bild {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-bottom: 1px solid var(--linie);
}
.karte__inhalt { padding: 26px 26px 32px; }
.karte__nr {
  display: block; font-family: var(--serif); font-size: 15px; font-weight: 500;
  letter-spacing: .1em; color: var(--gold); margin-bottom: 12px;
}
.karte p { color: var(--text-2); font-size: 15px; line-height: 1.62; }

/* ---------- Visualisierung ---------- */
.haken { display: grid; gap: 13px; margin-top: 30px; }
.haken li { display: flex; gap: 13px; color: var(--text-2); font-size: 15.5px; }
.haken li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 4px;
  background: var(--gold); opacity: .9;
  clip-path: polygon(14% 46%, 4% 58%, 38% 90%, 96% 22%, 86% 12%, 38% 68%);
}
.zwei .knopf { margin-top: 34px; }

.riss { border: 1px solid var(--linie); background: var(--grund); padding: 20px; }
.bahn--akzent .riss { background: rgba(10, 10, 12, .55); }
.riss svg { display: block; width: 100%; height: auto; }
.riss__mass {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie);
  font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-d); text-align: center;
}

/* ---------- Ablauf ---------- */
.schritte { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 620px)  { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px)  { .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .schritte { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.schritte li { min-width: 0; background: var(--grund); padding: 30px 22px 34px; }
.bahn--akzent .schritte li { background: var(--grund-2); }
.schritte__nr {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 18px;
  border: 1px solid var(--linie-2); border-radius: 50%;
  font-family: var(--serif); font-size: 16px; color: var(--gold);
}
.schritte h3 { font-size: 16px; }
.schritte p { margin-top: 9px; color: var(--text-2); font-size: 14px; line-height: 1.55; }

.satz {
  margin-top: 46px; padding: 26px 20px; text-align: center;
  border: 1px solid var(--linie-2);
  font-size: clamp(16px, 2vw, 22px); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.satz em { font-style: normal; color: var(--gold); }

/* ---------- Werte ---------- */
.werte { display: grid; gap: 26px; }
@media (min-width: 860px) { .werte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.werte article { min-width: 0; border: 1px solid var(--linie); padding: 32px 28px 36px; background: var(--grund); }
.werte__zeichen { display: block; width: 34px; height: 34px; color: var(--gold); margin-bottom: 20px; }
.werte__zeichen svg { display: block; width: 100%; height: 100%; }
.werte h3 { font-size: 18px; }
.werte p { margin-top: 12px; color: var(--text-2); font-size: 15px; }

.schweiz {
  display: grid; gap: 26px; align-items: center; margin-top: 26px;
  border: 1px solid var(--linie-2); padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(100deg, rgba(198, 166, 100, .10), transparent 62%);
}
@media (min-width: 860px) { .schweiz { grid-template-columns: 1fr auto; } }
.schweiz > * { min-width: 0; }
.schweiz p:last-of-type { margin-top: 14px; color: var(--text-2); max-width: 66ch; }

/* ---------- Kontakt ---------- */
.angaben { display: grid; gap: 1px; margin-top: 40px; background: var(--linie); border: 1px solid var(--linie); }
.angaben li {
  display: grid; gap: 4px; padding: 18px 22px; background: var(--grund);
}
.angaben__label {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-d);
}
.angaben a { font-size: 17px; font-weight: 500; transition: color .2s var(--weich); }
.angaben a:hover { color: var(--gold-h); }

.formularkasten { border: 1px solid var(--linie); background: var(--grund-2); padding: clamp(26px, 3.4vw, 44px); }
.formular { display: grid; gap: 18px; margin-top: 26px; }
.feldreihe { display: grid; gap: 18px; }
@media (min-width: 620px) { .feldreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feld { display: grid; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.feld > span { color: var(--text-2); }
.feld b { color: var(--gold); }
.feld input, .feld select, .feld textarea {
  box-sizing: border-box; width: 100%; min-width: 0;
  font: inherit; font-size: 15.5px; font-weight: 400;
  color: var(--text); background: var(--grund);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 13px 14px;
  transition: border-color .2s var(--weich), background .2s var(--weich);
}
.feld textarea { resize: vertical; min-height: 128px; }
.feld select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8ABB2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px 17px;
}
.feld select:has(option[value=""]:checked) { color: var(--text-2); }
.feld input::placeholder, .feld textarea::placeholder { color: #6E727C; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--gold); background-color: var(--grund-3);
}
.feld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formular__fehler {
  margin: 0; padding: 12px 15px; border: 1px solid rgba(224, 122, 95, .5);
  background: rgba(224, 122, 95, .08); color: #EFA898; font-size: 14.5px; font-weight: 500;
}
.formular__fuss { display: grid; gap: 16px; align-items: center; }
@media (min-width: 760px) { .formular__fuss { grid-template-columns: auto 1fr; } }
.formular__hinweis { color: var(--text-2); font-size: 13px; line-height: 1.5; }
.formular__hinweis a { color: var(--gold-h); text-decoration: underline; text-underline-offset: 2px; }

.formular__erledigt[hidden] { display: none; }
.formular__erledigt { display: grid; justify-items: start; gap: 8px; padding: 34px 0 8px; }
.formular__haken {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px;
  border: 1px solid var(--linie-2); border-radius: 50%; color: var(--gold);
}
.formular__haken svg { width: 24px; height: 24px; }
.formular__erledigt h4 { font-size: 21px; }
.formular__erledigt p { color: var(--text-2); }
.formular__erledigt a { color: var(--gold-h); font-weight: 600; }

/* ============================== FUSS ============================== */
.fuss { padding: clamp(56px, 7vw, 84px) 0 0; }
.fuss__innen { display: grid; gap: 40px; }
@media (min-width: 760px)  { .fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fuss__innen { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.fuss__innen > * { min-width: 0; }
.fuss__marke .marke__zeichen { color: var(--text); margin-bottom: 16px; }
.fuss__marke b { font-family: var(--serif); font-weight: 600; letter-spacing: .14em; font-size: 17px; }
.fuss__klein { margin-top: 14px; color: var(--text-2); font-size: 14px; max-width: 34ch; }

.fuss__spalte { display: grid; gap: 10px; align-content: start; }
.fuss__titel {
  font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.fuss__spalte a { color: var(--text-2); font-size: 15px; transition: color .2s var(--weich); }
.fuss__spalte a:hover { color: var(--text); }

.fuss__zeile {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  margin-top: clamp(44px, 6vw, 68px); padding: 22px 0 26px;
  border-top: 1px solid var(--linie);
  color: #7A7E88; font-size: 13px;
}
.fuss__zeile p { margin: 0; }

/* ========================= Rechtsseiten ========================= */
.rechtskopf { padding: clamp(56px, 8vw, 96px) 0 clamp(30px, 4vw, 44px); border-bottom: 1px solid var(--linie); }
.rechtstext { padding: clamp(46px, 6vw, 76px) 0 clamp(60px, 8vw, 96px); }
.rechtstext .rahmen { max-width: 760px; }
.rechtstext h2 {
  font-size: clamp(20px, 2.4vw, 26px); margin-top: 44px; padding-top: 26px;
  border-top: 1px solid var(--linie);
}
.rechtstext h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.rechtstext h3 { font-size: 17px; margin-top: 26px; }
.rechtstext p, .rechtstext li { color: var(--text-2); margin-top: 12px; font-size: 15.5px; }
.rechtstext ul { list-style: disc; padding-left: 22px; margin-top: 8px; }
.rechtstext li { margin-top: 6px; }
.rechtstext a { color: var(--gold-h); text-decoration: underline; text-underline-offset: 2px; }
.rechtstext b { color: var(--text); }

/* Sichtbar markiert, was der Kunde noch liefern muss. Vor dem Aufschalten
   entweder ausfuellen oder die Stelle samt Auszeichnung entfernen. */
.platzhalter {
  background: rgba(198, 166, 100, .16); color: var(--gold-h);
  border-bottom: 1px dashed var(--gold); padding: 1px 5px; font-weight: 600;
}


/* ---------- Team ---------- */
/* Achtung: .kopf ist die Kopfzeile der Seite. Die Personenkarten heissen
   deshalb .person, sonst erben sie deren sticky-Verhalten. */
.teamzeile { margin-top: clamp(46px, 6vw, 76px); max-width: 720px; }
.teamzeile .h3 { margin-top: 4px; }
.teamzeile .lead { margin-top: 14px; }

.personen { display: grid; gap: 20px; margin-top: 34px; }
@media (min-width: 560px)  { .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .personen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .personen { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.person {
  min-width: 0; text-align: center;
  border: 1px solid var(--linie); background: var(--grund);
  padding: 22px 16px 24px;
}
.person__bild {
  display: block; width: 100%; max-width: 168px; margin: 0 auto 16px;
  aspect-ratio: 1; height: auto; object-fit: cover;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, rgba(198,166,100,.16), rgba(198,166,100,.04) 70%);
}
.person__bild--kuerzel {
  display: grid; place-items: center; height: 168px;
  border: 1px solid var(--linie-2);
  font-family: var(--serif); font-size: 34px; letter-spacing: .06em; color: var(--gold);
}
.person h3 { font-size: 16.5px; }
.person p { margin-top: 5px; color: var(--text-2); font-size: 14px; }

/* ---------- Einsatzorte ---------- */
.orte {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.orte li {
  padding: 5px 12px; border: 1px solid var(--linie);
  border-radius: 999px; font-size: 13px; color: var(--text-2);
}
.orte__fuss { margin-top: 16px; color: var(--text-2); font-size: 14px; }

/* ---------- Kundenstimmen ---------- */
.wertung {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 30px; padding: 16px 22px;
  border: 1px solid var(--linie-2);
}
.wertung__sterne { color: var(--gold); font-size: 19px; letter-spacing: .16em; }
.wertung p { color: var(--text-2); font-size: 15px; }
.wertung b { color: var(--text); }

.stimmen { display: grid; gap: 20px; }
@media (min-width: 760px)  { .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stimme {
  min-width: 0; margin: 0; display: flex; flex-direction: column;
  border: 1px solid var(--linie); background: var(--grund-2); padding: 28px 26px 24px;
}
.stimme blockquote { margin: 0; flex: 1; }
.stimme blockquote::before {
  content: "«"; display: block; font-family: var(--serif); font-size: 40px;
  line-height: .6; color: var(--gold); margin-bottom: 14px;
}
.stimme p { color: var(--text-2); font-size: 15px; line-height: 1.62; }
.stimme figcaption {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie);
  font-size: 14px; font-weight: 600;
}
.stimme figcaption span {
  display: block; margin-top: 3px; font-weight: 500; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-d);
}

/* ---------- Offene Stellen ---------- */
.stellen { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.stellen li { min-width: 0; background: var(--grund-2); padding: 24px 26px 26px; }
.stellen h3 { font-size: 17px; }
.stellen p { margin-top: 9px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }

.verweis { color: var(--gold-h); text-decoration: underline; text-underline-offset: 2px; }