/* ==================================================================
   Gold-Fassung — alle Abschnitte
   ================================================================== */

/* ------------------------------------------------------------ Kopf ---- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: height var(--d-base) var(--ease), background-color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}
.kopf.ist-kompakt {
  height: var(--header-h-compact);
  background: rgba(10, 10, 11, 0.9);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.kopf__innen {
  width: 100%; max-width: var(--page-max); margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.kopf__rechts { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.5rem); }

.marke { display: flex; align-items: center; gap: 0.8rem; line-height: 1; min-height: 44px; }
.marke__loewe {
  width: clamp(34px, 4vw, 44px); height: auto;
  transition: transform var(--d-slow) var(--ease-out);
}
.marke:hover .marke__loewe { transform: scale(1.05); }
.marke__name {
  display: block;
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.1rem);
  font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text);
}
.marke__rolle {
  display: block; margin-top: 0.42em;
  font-size: var(--t-mark); font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--au-500);
}

/* Sprachwahl */
.sprachen { display: flex; align-items: center; gap: 1px; }
.sprachen__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 40px;   /* bequem antippbar */
  padding: 0.5rem 0.6rem;
  font-size: var(--t-mark); font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim);
  border-bottom: 1px solid transparent;
  transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.sprachen__knopf:hover { color: var(--text); }
.sprachen__knopf[aria-pressed="true"] { color: var(--au-400); border-bottom-color: var(--au-600); }
.kopf__anruf { display: none; }
@media (min-width: 720px) { .kopf__anruf { display: inline-flex; } }

/* -------------------------------------------------------- Schalter ---- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.7rem; padding: 0.95rem 1.5rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--t-small); font-weight: 500; letter-spacing: 0.02em;
  color: var(--text); overflow: hidden; isolation: isolate;
  transition: border-color var(--d-base) var(--ease), color var(--d-base) var(--ease),
              background-color var(--d-base) var(--ease);
}
.btn--gross { padding: 1.15rem 1.8rem; font-size: 1rem; }

/* Gold nur als Rahmen und Schrift, die Füllung kommt ruhig beim Überfahren */
.btn--gold { border-color: var(--au-600); color: var(--au-300); }
.btn--gold::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--au-500); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--d-slow) var(--ease-out);
}
.btn--gold:hover, .btn--gold:focus-visible { color: var(--ink-900); border-color: var(--au-500); }
.btn--gold:hover::before, .btn--gold:focus-visible::before { transform: scaleY(1); }

.btn--rand { border-color: var(--ink-600); color: var(--text); }
.btn--rand:hover, .btn--rand:focus-visible { border-color: var(--ag-400); }

/* ------------------------------------------------------------ Start ---- */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.6rem + 4vw, 5.5rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

/* Die Wortmarke als grosses, sehr zurückgenommenes Wappen.
   Sie füllt die Fläche, ohne mit der Schrift zu konkurrieren. */
.hero__wappen {
  position: absolute;
  z-index: 0;
  right: clamp(-4rem, -6vw, 0rem);
  top: 50%;
  width: clamp(19rem, 40vw, 34rem);
  height: auto;
  transform: translateY(-46%);
  opacity: 0.10;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 55% 50%, #000 42%, transparent 82%);
          mask-image: radial-gradient(ellipse at 55% 50%, #000 42%, transparent 82%);
}

.hero__grid { position: relative; z-index: 1; }
.hero__text { max-width: 34rem; }

.hero__ort {
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  color: var(--au-500);
}
.hero__ort::before { content: ''; width: clamp(26px, 4vw, 52px); height: 1px; background: var(--au-700); }
.hero__titel { margin-bottom: clamp(1.2rem, 1rem + 1.2vw, 1.8rem); }
.hero__titel .zeile { display: block; }
.hero__titel .gold { color: var(--au-400); }
.hero__lead {
  font-size: var(--t-lead); line-height: 1.6; color: var(--text-muted);
  max-width: 27rem; margin-bottom: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
}
.hero__aktionen { display: grid; gap: 0.8rem; }
@media (min-width: 480px) { .hero__aktionen { grid-auto-flow: column; justify-content: start; } }

@media (min-width: 900px) {
  .hero { display: flex; align-items: center; min-height: max(560px, 76svh); }
  .hero > .wrap { width: 100%; }
  .hero__text { max-width: 38rem; }
}

/* --------------------------------------------------------- Zusagen ---- */
.zusagen { border-block: 1px solid var(--line); position: relative; z-index: 1; }
.zusagen__liste { display: grid; }
.zusagen__liste > li {
  display: grid; gap: 0.4rem;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem) 0;
}
.zusagen__liste > li + li { border-top: 1px solid var(--line); }
.zusagen__nr {
  font-family: var(--f-serif); font-size: 0.95rem; letter-spacing: 0.1em;
  color: var(--au-600);
}
.zusagen__liste b {
  font-family: var(--f-serif); font-size: var(--t-h3); font-weight: 400;
  letter-spacing: var(--ls-head); color: var(--text);
}
.zusagen__liste span:last-child { font-size: var(--t-small); color: var(--text-dim); max-width: 34ch; }
@media (min-width: 780px) {
  .zusagen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
  .zusagen__liste > li + li { border-top: 0; border-left: 1px solid var(--line); padding-left: var(--gutter); }
}

/* -------------------------------------------------- Abschnittstitel ---- */
.sec-titel { margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); max-width: 20ch; }

/* -------------------------------------------------------- Schritte ---- */
.schritte__liste { display: grid; gap: clamp(2rem, 1.4rem + 2.4vw, 3rem); counter-reset: s; }
.schritte__liste > li { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.schritte__nr {
  display: block; margin-bottom: 0.9rem;
  font-family: var(--f-serif); font-size: var(--t-numeral); font-weight: 300;
  line-height: 0.9; color: var(--au-600);
}
.schritte__liste h3 { margin-bottom: 0.5rem; }
.schritte__liste p { color: var(--text-muted); max-width: 30ch; }
@media (min-width: 760px) { .schritte__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }

/* ------------------------------------------------------------ Team ---- */
.team__block { display: grid; gap: clamp(2rem, 1.5rem + 2.4vw, 3.5rem); }
.team__personen { display: grid; gap: var(--s-6); align-content: start; }
.team__person { padding-top: 1.1rem; border-top: 1px solid var(--au-800); }
.team__name {
  font-family: var(--f-serif); font-size: var(--t-h3); font-weight: 400;
  color: var(--text); margin-bottom: 0.5rem;
}
.team__tel {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-serif); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  color: var(--au-300);
  text-decoration: underline; text-decoration-color: var(--au-800); text-underline-offset: 5px;
  transition: color var(--d-base) var(--ease), text-decoration-color var(--d-base) var(--ease);
}
.team__tel:hover, .team__tel:focus-visible { color: var(--text); text-decoration-color: var(--au-600); }

@media (min-width: 760px) {
  .team__personen { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
}
@media (min-width: 960px) {
  .team__block { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
  .team__text     { grid-column: 1 / span 5; }
  .team__personen { grid-column: 7 / span 6; padding-top: 0.4rem; }
}

/* ---------------------------------------------------------- Fragen ---- */
.akk { border-top: 1px solid var(--line); }
.akk__item { border-bottom: 1px solid var(--line); }
.akk__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  padding: clamp(1.2rem, 1rem + 0.8vw, 1.7rem) 0;
  cursor: pointer; list-style: none;
  font-family: var(--f-serif); font-size: var(--t-h3); font-weight: 400; line-height: 1.3;
  transition: color var(--d-base) var(--ease);
}
.akk__item summary::-webkit-details-marker { display: none; }
.akk__item summary:hover { color: var(--accent-text); }
.akk__zeichen { position: relative; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 0.42em; }
.akk__zeichen::before, .akk__zeichen::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 1px;
  background: currentColor; opacity: 0.85; transition: transform var(--d-base) var(--ease);
}
.akk__zeichen::after { transform: rotate(90deg); }
.akk__item[open] .akk__zeichen::after { transform: rotate(0deg); }
.akk__inhalt { overflow: hidden; }
.akk__inhalt > div { padding-bottom: clamp(1.2rem, 1rem + 0.8vw, 1.7rem); max-width: 56ch; color: var(--text-muted); }

/* --------------------------------------------------------- Kontakt ---- */
.kontakt { text-align: center; }
.kontakt__innen { max-width: 62rem; margin-inline: auto; }
.kontakt__titel { margin-bottom: 1rem; }
.kontakt .lead { margin-inline: auto; margin-bottom: clamp(2.25rem, 1.8rem + 2.4vw, 3.5rem);
                 font-size: var(--t-lead); color: var(--text-muted); max-width: 34rem; }
.kontakt__wege { display: grid; gap: 1rem; }
.weg {
  display: grid; justify-items: center; gap: 0.5rem;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) 1.25rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--text);
  transition: border-color var(--d-base) var(--ease), background-color var(--d-base) var(--ease);
}
.weg svg { color: var(--au-500); }
.weg__label { color: var(--text-dim); }
.weg__wert { font-family: var(--f-serif); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }
.weg__wert--klein { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem); overflow-wrap: anywhere; }
.weg:hover, .weg:focus-visible { border-color: var(--au-600); background: rgba(201, 164, 76, 0.06); }
.weg--gold { border-color: var(--au-700); }
.weg__wert, .fuss__tel, .team__tel { font-variant-numeric: tabular-nums; }
.kontakt__adresse {
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  font-style: normal; font-size: var(--t-small); color: var(--text-dim); line-height: 1.8;
}
.kontakt__routetitel { margin-top: 1.2rem; font-size: var(--t-small); color: var(--text-dim); }
.kontakt__routen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.6rem; }
.kontakt__routen svg { color: var(--au-500); }
@media (min-width: 620px) { .kontakt__wege { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); } }

/* -------------------------------------------------------- Fußzeile ---- */
.fuss { padding-block: var(--section-y-sm); border-top: 1px solid var(--line); background: var(--ink-850); }
.fuss__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.fuss__tel { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin-top: 0.4rem;
  font-size: var(--t-small); color: var(--text-dim); }
.fuss__tel a { display: inline-flex; align-items: center; min-height: 44px; color: var(--au-400); }
.fuss__tel a:hover, .fuss__tel a:focus-visible { color: var(--au-300); }
.fuss__nav { display: flex; flex-wrap: wrap; column-gap: 1.5rem; font-size: var(--t-small); }
.fuss__nav a { white-space: nowrap; }
.fuss__nav a { display: inline-flex; align-items: center; min-height: 44px;
               color: var(--text-dim); text-decoration: underline; text-decoration-color: transparent;
               text-underline-offset: 4px;
               transition: color var(--d-base) var(--ease), text-decoration-color var(--d-base) var(--ease); }
.fuss__nav a:hover { color: var(--au-400); text-decoration-color: var(--au-700); }

/* Ab 900 px schwebt unten rechts der WhatsApp-Knopf – die Fußzeile lässt ihm Platz,
   damit er den Link „Datenschutz“ nicht überdeckt. */
@media (min-width: 900px) {
  .fuss { padding-bottom: max(var(--section-y-sm), calc(60px + clamp(1rem, 2.5vw, 2rem) + 0.75rem)); }
}

/* ------------------------------------------ Feste Leiste auf dem Handy -- */
.schnell {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(101%);
  visibility: hidden;
  transition: transform var(--d-base) var(--ease), visibility 0s linear var(--d-base);
}
.schnell[hidden] { display: none; }
.schnell.ist-sichtbar { transform: none; visibility: visible; transition-delay: 0s; }
.schnell__btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 58px; font-size: var(--t-small); font-weight: 500; color: var(--text);
}
.schnell__btn + .schnell__btn { border-left: 1px solid var(--line); }
.schnell__btn--gold { color: var(--au-300); }
@media (min-width: 900px) { .schnell { display: none !important; } }
@media (max-width: 899px) {
  .fuss { padding-bottom: calc(2.5rem + 58px + env(safe-area-inset-bottom)); }
  /* Mit der Tastatur angesteuerte Elemente landen nie unter der festen Leiste. */
  html { scroll-padding-bottom: calc(58px + env(safe-area-inset-bottom) + 1rem); }
}

/* ==================================================================
   Schmale Geräte: die Kopfzeile bleibt einzeilig und ruhig.
   Der Anruf-Schalter entfällt dort — unten steht die feste Leiste.
   ================================================================== */
@media (max-width: 719px) {
  .kopf .kopf__anruf { display: none; }
  .marke { gap: 0.6rem; }
  .marke__loewe { width: 32px; }
  .marke__name { font-size: 0.9rem; letter-spacing: 0.07em; white-space: nowrap; }
  .marke__rolle { display: none; }
  .sprachen__knopf { padding: 0.5rem 0.4rem; min-width: 44px; }
  .kopf__innen { gap: 0.75rem; }
}
@media (max-width: 380px) {
  .marke__name { font-size: 0.82rem; }
  .marke__loewe { width: 28px; }
}

/* ==================================================================
   WhatsApp — offizielles Zeichen und der ständige Begleiter
   Das Grün ist die Markenfarbe von WhatsApp und bleibt unverändert,
   damit der Knopf sofort als das erkannt wird, was er ist.
   ================================================================== */
:root { --wa: #25D366; --wa-dunkel: #25D366; }  /* offizielles WhatsApp-Grün, weißes Zeichen */

.wa-zeichen { flex: 0 0 auto; }

.wa-knopf {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 60px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--wa);
  color: #FFFFFF;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease-out),
              background-color var(--d-base) var(--ease), gap var(--d-base) var(--ease),
              padding var(--d-base) var(--ease), visibility 0s linear var(--d-base);
}
.wa-knopf.ist-da { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.wa-knopf:hover, .wa-knopf:focus-visible { background: var(--wa-dunkel); }

/* Die Beschriftung klappt beim Überfahren auf — sonst bleibt es ein ruhiger Kreis. */
.wa-knopf__text {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--t-small);
  font-weight: 500;
  opacity: 0;
  transition: max-width var(--d-slow) var(--ease-out), opacity var(--d-base) var(--ease);
}
.wa-knopf:hover .wa-knopf__text,
.wa-knopf:focus-visible .wa-knopf__text { max-width: 14rem; opacity: 1; margin-inline-start: 0.7rem; }
.wa-knopf:hover, .wa-knopf:focus-visible { padding-inline-end: 22px; }


/* Auf dem Handy trägt die feste Leiste unten bereits Anrufen und WhatsApp —
   dort würde ein zweiter Knopf nur im Weg stehen. */
@media (max-width: 899px) { .wa-knopf { display: none; } }

/* Das Zeichen in Schaltern und Kacheln übernimmt die Markenfarbe */
.btn--rand .wa-zeichen,
.weg .wa-zeichen,
.schnell__btn .wa-zeichen { color: var(--wa); }

@media (prefers-reduced-motion: reduce) {
  .wa-knopf { transition: opacity 120ms linear; transform: none; }
  .wa-knopf__text { transition: none; }
}