/* ==========================================================================
   Technikhilfe Rieger — Stylesheet
   Neutrales Graphit/Grau, ein Akzent in Stahlblau, Inhalte auf Glasflächen.
   Schriften sind selbst gehostet. Keine Anfrage an Google, kein Abmahnrisiko.
   ========================================================================== */

@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Grundfarben */
  --grund: #e9ecef;          /* kühles Hellgrau, Seitenhintergrund */
  --graphit: #1f2833;        /* Text, Hauptknöpfe, Fußzeile */
  --gedaempft: #5a6672;      /* Nebentext */
  --akzent: #3c6e91;         /* Stahlblau: Links, Haken, Markierungen */
  --akzent-hell: #dfe8ef;
  --linie: rgba(31, 40, 51, .12);

  /* Glas */
  --glas: rgba(255, 255, 255, .5);
  --glas-rand: rgba(255, 255, 255, .75);
  --glas-schatten: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 32px -12px rgba(31, 40, 51, .18);
  --unschaerfe: blur(18px) saturate(150%);
  --radius: 20px;

  --spalte: 70rem;
  --rand: clamp(1rem, 5vw, 3rem);
  --text-schrift: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --titel-schrift: "Archivo", var(--text-schrift);
}

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

html {
  font-size: 18px;           /* bewusst groß: viele Besucher sind über 60 */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Weiche Farbflächen hinter dem Glas. Scrollen mit, damit es auf dem Handy flüssig bleibt. */
body {
  margin: 0;
  color: var(--graphit);
  font-family: var(--text-schrift);
  font-size: 1rem;
  line-height: 1.62;
  background-color: var(--grund);
  background-image:
    radial-gradient(40rem 32rem at 90% 3rem, rgba(92, 140, 178, .62), transparent 70%),
    radial-gradient(32rem 28rem at 4% 24rem, rgba(206, 184, 152, .62), transparent 70%),
    radial-gradient(36rem 30rem at 98% 56rem, rgba(124, 164, 156, .55), transparent 70%),
    radial-gradient(38rem 30rem at 0% 96rem, rgba(92, 140, 178, .5), transparent 70%),
    radial-gradient(32rem 28rem at 94% 140rem, rgba(206, 184, 152, .55), transparent 70%),
    radial-gradient(36rem 30rem at 6% 186rem, rgba(124, 164, 156, .5), transparent 70%);
  background-repeat: no-repeat;
}

h1, h2, h3 {
  font-family: var(--titel-schrift);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
  hyphens: auto;
}
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.45rem, 3.2vw, 2rem); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; max-width: 62ch; }

a { color: var(--akzent); text-underline-offset: 3px; }
a:hover { color: var(--graphit); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }

main { overflow-wrap: break-word; }
.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.spalte { max-width: var(--spalte); margin-inline: auto; padding-inline: var(--rand); }

/* --- Glas ---------------------------------------------------------------- */
.glas {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.glas-dunkel {
  background: rgba(31, 40, 51, .9);
  border-color: rgba(255, 255, 255, .14);
  color: #eef1f4;
}
/* Ohne Unschärfe-Unterstützung: deckender, damit Text lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { background: rgba(255, 255, 255, .9); }
  .glas-dunkel { background: var(--graphit); }
}

/* --- Kopfzeile ----------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(233, 236, 239, .62);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  border-bottom: 1px solid var(--glas-rand);
}
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.2rem; }
.wortmarke {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--titel-schrift); font-weight: 700; font-size: 1.05rem;
  color: var(--graphit); text-decoration: none; letter-spacing: -0.01em;
}
.wortmarke:hover { color: var(--graphit); }
.wortmarke img { width: 40px; height: 40px; display: block; border-radius: 10px; box-shadow: 0 2px 8px -2px rgba(4, 26, 56, .45); }
.wortmarke span small { display: block; font-family: var(--text-schrift); font-weight: 400; font-size: .72rem; color: var(--gedaempft); letter-spacing: 0; }
.kopf-rechts { display: flex; align-items: center; gap: 1.4rem; }
.navi { display: flex; gap: 1.4rem; }
.navi a { color: var(--graphit); text-decoration: none; font-weight: 600; font-size: .95rem; }
.navi a:hover, .navi a[aria-current] { color: var(--akzent); }
@media (max-width: 760px) { .navi { display: none; } }

/* --- Knöpfe -------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.3rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem; text-decoration: none; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.knopf-haupt { background: var(--graphit); color: #fff; }
.knopf-haupt:hover { background: #33404d; color: #fff; }
.knopf-glas {
  background: rgba(255,255,255,.5); color: var(--graphit); border-color: var(--glas-rand);
  -webkit-backdrop-filter: var(--unschaerfe); backdrop-filter: var(--unschaerfe);
}
.knopf-glas:hover { background: rgba(255,255,255,.8); color: var(--graphit); }
.knopf-rand { background: transparent; color: var(--graphit); border-color: rgba(31,40,51,.35); }
.knopf-rand:hover { background: var(--graphit); color: #fff; }
.knopf-hell { background: #fff; color: var(--graphit); }
.knopf-hell:hover { background: var(--akzent-hell); color: var(--graphit); }
.knopf-glas-hell { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.knopf-glas-hell:hover { background: rgba(255,255,255,.18); color: #fff; }
.knopf-kopf .kurz { display: none; }
@media (max-width: 520px) {
  .wortmarke { font-size: .98rem; white-space: nowrap; }
  .wortmarke span small { display: none; }
  .knopf-kopf { padding: .6rem 1rem; }
  .knopf-kopf .lang { display: none; }
  .knopf-kopf .kurz { display: inline; }
}

/* --- Aufmacher ----------------------------------------------------------- */
.aufmacher { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3.5rem); }
.aufmacher-raster { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .aufmacher-raster { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; } }
.aufmacher h1 { white-space: pre-line; margin-bottom: .5em; }
.aufmacher p { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--gedaempft); max-width: 44ch; }
.aufmacher-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }

.versprechen { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.versprechen li { display: flex; align-items: flex-start; gap: .7rem; font-weight: 600; }
.versprechen li::before {
  content: ""; flex: none; width: 1.35rem; height: 1.35rem; margin-top: .12rem; border-radius: 50%;
  background: var(--akzent) no-repeat center / .8rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.aufmacher-fakten { margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--linie); display: grid; gap: .8rem; }
.aufmacher-fakten dt { font-size: .8rem; color: var(--gedaempft); }
.aufmacher-fakten dd { margin: 0; font-weight: 600; }

/* --- Abschnitte ---------------------------------------------------------- */
.abschnitt { padding-block: clamp(2rem, 5vw, 3.5rem); }
.abschnitt > .spalte > h2 { margin-bottom: .6rem; }
.vorspann { color: var(--gedaempft); font-size: 1.06rem; max-width: 56ch; }

/* --- Leistungsliste ------------------------------------------------------ */
.leistungsliste { margin-top: 1.6rem; padding-block: .4rem; }
.leistungszeile {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: 1.25rem .25rem; border-bottom: 1px solid var(--linie);
  text-decoration: none; color: inherit;
}
.leistungszeile:last-child { border-bottom: 0; }
.leistungszeile:hover { color: inherit; }
.leistungszeile:hover .leistungszeile-titel { color: var(--akzent); }
.leistungszeile-titel { font-family: var(--titel-schrift); font-weight: 700; font-size: 1.3rem; display: block; margin-bottom: .15rem; letter-spacing: -0.01em; }
.leistungszeile-kurz { color: var(--gedaempft); font-size: .98rem; }
.leistungszeile-pfeil {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(255,255,255,.7); border: 1px solid var(--glas-rand);
  display: grid; place-items: center; color: var(--graphit);
  transition: background-color .15s ease, color .15s ease;
}
.leistungszeile:hover .leistungszeile-pfeil { background: var(--graphit); color: #fff; }
.preishinweis { font-size: .9rem; color: var(--gedaempft); margin: 1.1rem 0 0; }

/* --- Ablauf (echte Reihenfolge, deshalb nummeriert) ---------------------- */
.ablauf { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 780px) { .ablauf { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.ablauf-nummer {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--graphit); color: #fff;
  font-family: var(--titel-schrift); font-weight: 700; font-size: .9rem; margin-bottom: .9rem;
}
.ablauf h3 { margin-bottom: .35em; }
.ablauf p { font-size: .97rem; color: var(--gedaempft); margin: 0; }

/* --- Einzugsgebiet ------------------------------------------------------- */
.zonen { display: grid; gap: 1rem; margin-top: 1.6rem; }
@media (min-width: 780px) { .zonen { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.zone h3 { margin-bottom: .3em; }
.zone-orte { color: var(--gedaempft); font-size: .95rem; margin: 0 0 1rem; }
.zone-aufschlag {
  display: inline-block; margin: 0; padding: .3rem .8rem; border-radius: 999px;
  background: var(--akzent-hell); color: #264a63; font-weight: 600; font-size: .9rem;
}

.ueber-mich { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 820px) { .ueber-mich { grid-template-columns: 1fr 15rem; gap: 3rem; } }
.ueber-mich-logo { width: 100%; max-width: 15rem; height: auto; border-radius: 16px; box-shadow: 0 16px 36px -16px rgba(4, 26, 56, .55); }
.ueber-mich p:last-child { margin-bottom: 0; }

/* --- Unterseiten --------------------------------------------------------- */
.seitenkopf { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1rem, 3vw, 1.5rem); }
.seitenkopf h1 { white-space: pre-line; }
.seitenkopf p { color: var(--gedaempft); font-size: 1.08rem; }
.brotkrumen { font-size: .9rem; margin-bottom: 1.2rem; color: var(--gedaempft); }
.brotkrumen a { color: var(--gedaempft); }

.inhalt-raster { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .inhalt-raster { grid-template-columns: 1.7fr 1fr; gap: 1.5rem; align-items: start; } }
.inhalt-haupt h2 { font-size: 1.4rem; }

.hakenliste { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .75rem; }
.hakenliste li { display: flex; gap: .75rem; align-items: flex-start; }
.hakenliste li::before {
  content: ""; flex: none; width: 1.2rem; height: 1.2rem; margin-top: .25rem; border-radius: 50%;
  background: var(--akzent) no-repeat center / .72rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hinweisliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.hinweisliste li { padding: .8rem 1rem; border-radius: 12px; background: rgba(255,255,255,.55); color: var(--gedaempft); font-size: .97rem; }

.eckdaten { position: sticky; top: 5.5rem; }
.eckdaten dl { margin: 0; display: grid; gap: 1rem; }
.eckdaten dt { font-size: .82rem; color: var(--gedaempft); margin-bottom: .1rem; }
.eckdaten dd { margin: 0; font-family: var(--titel-schrift); font-weight: 600; font-size: 1.08rem; }
.eckdaten dd a { font-weight: 600; }
.eckdaten .preishinweis { margin: 1.2rem 0 0; font-size: .85rem; }
.eckdaten .knopf { margin-top: 1.2rem; width: 100%; }
@media (max-width: 899px) { .eckdaten { position: static; } }

.faq { margin-top: 2.2rem; }
.faq details { border-bottom: 1px solid var(--linie); padding: 1rem 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { font-family: var(--titel-schrift); font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--akzent); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .8rem 0 0; color: var(--gedaempft); }

/* --- Kontaktblock -------------------------------------------------------- */
.kontaktblock { display: grid; gap: 1.25rem; }
@media (min-width: 780px) { .kontaktblock { grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } }
.kontaktdaten { margin: 0; display: grid; gap: 1.3rem; }
.kontaktdaten dt { font-size: .82rem; color: var(--gedaempft); }
.kontaktdaten dd { margin: .15rem 0 0; font-family: var(--titel-schrift); font-weight: 600; font-size: 1.2rem; }
.kontaktdaten a { text-decoration: none; }

/* --- Abschlussaufruf ----------------------------------------------------- */
.aufruf { padding-block: clamp(2rem, 5vw, 3.5rem); }
.aufruf-karte { padding: clamp(1.75rem, 5vw, 3rem); }
.aufruf h2 { color: #fff; }
.aufruf p { color: #c3ccd5; }
.aufruf-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.aufruf .knopf-haupt { background: #fff; color: var(--graphit); }
.aufruf .knopf-haupt:hover { background: var(--akzent-hell); }

/* --- Fußzeile ------------------------------------------------------------ */
.fuss { background: var(--graphit); color: #aab4be; padding-block: 3rem 2rem; font-size: .94rem; margin-top: clamp(1rem, 3vw, 2rem); }
.fuss-raster { display: grid; gap: 2rem; }
@media (min-width: 780px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h3 { color: #fff; font-size: .95rem; margin-bottom: .8em; }
.fuss a { color: #d3dae1; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fuss-unten { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; font-size: .88rem; }

/* --- Rechtstexte --------------------------------------------------------- */
.rechtstext { padding-block: clamp(2rem, 6vw, 3.5rem); overflow-wrap: anywhere; hyphens: auto; }
.rechtstext h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.rechtstext h2 { font-size: 1.3rem; margin-top: 2rem; }
.rechtstext h3 { font-size: 1.05rem; margin-top: 1.5rem; }
.rechtstext p, .rechtstext li { max-width: 68ch; }

@media print {
  body { background: #fff; }
  .kopf, .aufruf, .aufmacher-knoepfe, [data-assistent] { display: none; }
  .glas { background: #fff; box-shadow: none; border: 1px solid #ccc; backdrop-filter: none; }
}

/* ==========================================================================
   Farbverlauf Blau → Türkisgrün
   Alles in diesem Block. Zum Zurückstellen einfach den Block löschen.
   ========================================================================== */
:root {
  --tuerkis: #2f9e93;
  --tuerkis-hell: #d6efeb;
  --verlauf: linear-gradient(135deg, #3c6e91 0%, #2f9e93 100%);
  --verlauf-knopf: linear-gradient(135deg, #2c5a80 0%, #1f7d74 100%);
}
body {
  background-image:
    radial-gradient(40rem 32rem at 90% 3rem, rgba(92, 140, 178, .62), transparent 70%),
    radial-gradient(32rem 28rem at 4% 26rem, rgba(95, 190, 176, .5), transparent 70%),
    radial-gradient(36rem 30rem at 98% 58rem, rgba(110, 196, 184, .5), transparent 70%),
    radial-gradient(38rem 30rem at 0% 96rem, rgba(92, 140, 178, .45), transparent 70%),
    radial-gradient(32rem 28rem at 94% 140rem, rgba(95, 190, 176, .5), transparent 70%),
    radial-gradient(36rem 30rem at 6% 186rem, rgba(92, 140, 178, .42), transparent 70%);
}
.kopf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--verlauf); opacity: .55;
}
.versprechen li::before, .hakenliste li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 60%,
    var(--verlauf);
}
.ablauf-nummer { background: var(--verlauf); }
.zone-aufschlag { background: linear-gradient(90deg, #dfe8ef, var(--tuerkis-hell)); color: #1f5560; }
.knopf-haupt { background: var(--verlauf-knopf); }
.knopf-haupt:hover { background: var(--verlauf-knopf); filter: brightness(1.1); }
.leistungszeile:hover .leistungszeile-pfeil { background: var(--verlauf); border-color: transparent; }
.leistungszeile:hover .leistungszeile-titel { color: #2b7f87; }
.glas-dunkel { background: linear-gradient(135deg, rgba(31, 40, 51, .93) 0%, rgba(20, 76, 82, .92) 100%); }
.fuss { background: linear-gradient(135deg, #1f2833 0%, #173a40 100%); }

/* --- Kontaktformular ------------------------------------------------------ */
.formularkarte { align-self: start; }
.formular { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.feld { display: grid; gap: .35rem; }
.feld-paar { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .feld-paar { grid-template-columns: 1fr 1fr; } }
.feld label { font-weight: 600; font-size: .95rem; }
.feld label small, .feld > small { font-weight: 400; color: var(--gedaempft); font-size: .85rem; }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem; color: var(--graphit);
  padding: .7rem .8rem; border: 1px solid rgba(31, 40, 51, .22); border-radius: 12px;
  background: rgba(255, 255, 255, .8); width: 100%;
}
.feld textarea { resize: vertical; min-height: 6rem; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 3px solid var(--tuerkis); outline-offset: 1px; border-color: transparent;
}
.feld input:user-invalid, .feld select:user-invalid { border-color: #b3261e; }
.ankreuzen { display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; align-items: start; font-size: .93rem; color: var(--gedaempft); }
.ankreuzen input { width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; accent-color: var(--tuerkis); }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .knopf { justify-self: start; }
.pflichtfeld { font-size: .85rem; color: var(--gedaempft); margin: -.4rem 0 0; }
[hidden] { display: none !important; }
.meldung { border-radius: 14px; padding: .9rem 1.1rem; margin-top: 1.2rem; font-size: .97rem; display: grid; gap: .2rem; }
.meldung-ok { background: linear-gradient(135deg, #e3f1ea, var(--tuerkis-hell)); color: #14514c; }
.meldung-fehler { background: #fdeceb; color: #8c1d18; }
@media (min-width: 780px) { .kontaktblock { align-items: start; } }

/* Internet-Check-Marke und Rückruf-Block */
.marke { display: inline-block; vertical-align: middle; margin-left: .4rem; padding: .1rem .55rem; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent); font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.rueckruf { border: 1px solid var(--linie); border-radius: 14px; padding: .9rem 1rem 1rem; margin: 0; display: grid; gap: .8rem; }
.rueckruf legend { font-weight: 600; font-size: .95rem; padding: 0 .35rem; }
.rueckruf legend small { font-weight: 400; color: var(--gedaempft); }