/* =========================================================================
   implantat-berater.de — Design 90 „Ruhe und Orientierung"
   Freigegeben von Stefan Benerowski am 01.09.2026.
   Kein Baukasten-Design: eigenes Stylesheet für das Patientenportal.

   Grundgedanke: die Seite ist ein Nachschlagewerk für verunsicherte Patienten,
   kein Werbeauftritt. Warmes Papierweiß statt Reinweiß, große Schrift, weiter
   Zeilenabstand, kurze Zeilen. Serifen für Überschriften (redaktioneller,
   seriöser Klang), Grotesk für Bedienelemente. Das Marineblau der Marke ist
   der Anker, das Blau ausschließlich Handlungsfarbe.
   ========================================================================= */

:root {
  --marine:      #222955;
  --marine-tief: #171c3c;
  --blau:        #0061ad;
  --blau-hell:   #e8f1f9;
  --gruen:       #2f6b52;
  --grund:       #faf9f6;
  --flaeche:     #ffffff;
  --linie:       #e4e1d9;
  --linie-kraeftig: #cfcbc0;
  --text:        #1c2033;
  --leise:       #5c6172;
  --schatten:      0 1px 2px rgba(28,32,51,.05), 0 8px 24px -12px rgba(28,32,51,.18);
  --schatten-tief: 0 2px 4px rgba(28,32,51,.06), 0 20px 44px -20px rgba(28,32,51,.28);
  --radius: 14px;
  --radius-klein: 9px;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bahn: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 18px/1.7 var(--sans);
}
img { max-width: 100%; height: auto; }
a { color: var(--blau); text-underline-offset: 3px; }
a:hover { color: var(--marine); }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.22; color: var(--marine); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 1.25rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.95rem); margin-top: 1.9em; }
h3 { font-size: 1.22rem; margin-top: 1.7em; }
p  { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: .4em; }

.ib-bahn, .container { width: min(100% - 2.5rem, var(--bahn)); margin-inline: auto; }

/* --- Länder- und Servicezeile -------------------------------------------- */
.ib-laenderleiste { background: var(--marine-tief); color: #b9c0d8; font: 500 13.5px/1 var(--sans); padding: 10px 0; }
.ib-laenderleiste .ib-bahn { display: flex; gap: 1.3rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ib-laender { display: flex; gap: .35rem; margin-right: auto; }
.ib-laender a { color: #cdd3e6; text-decoration: none; padding: 4px 10px; border-radius: 99px; border: 1px solid transparent; font-weight: 600; letter-spacing: .04em; }
.ib-laender a[aria-current] { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22); }
.ib-dienst { color: #b9c0d8; text-decoration: none; }
.ib-dienst:hover { color: #fff; }

/* --- Kopf ---------------------------------------------------------------- */
.ib-kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 40; }
.ib-kopf-oben { display: flex; align-items: center; gap: 1.6rem; min-height: 82px; }
.ib-kopf-navi { border-top: 1px solid var(--linie); position: relative; }

.ib-wortmarke { display: block; text-decoration: none; line-height: 1.1; }
.ib-zeile { display: block; font-family: var(--serif); font-size: 1.62rem; letter-spacing: -.02em; white-space: nowrap; }
.ib-a { color: var(--marine); font-weight: 700; }
.ib-b { color: var(--blau); font-weight: 400; font-style: italic; }
.ib-de { color: var(--marine); font-weight: 400; }
.ib-claim { display: block; margin-top: .3rem; font: 600 11.5px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--leise); white-space: nowrap; }

/* Zwei Wege aus dem Kopf: Patienten suchen eine Praxis, Praxen wollen sich
   eintragen. Der zweite Knopf steht als Umriss daneben, damit er sichtbar ist,
   dem Hauptweg aber nicht die Aufmerksamkeit nimmt. */
.ib-kopf-knoepfe { margin-left: auto; display: flex; align-items: center; gap: .55rem; }

.ib-knopf-kopf {
  display: inline-flex; align-items: center; background: var(--blau); color: #fff;
  text-decoration: none; padding: 11px 18px; border-radius: 99px; font: 600 15px/1 var(--sans);
  box-shadow: 0 6px 16px -8px rgba(0,97,173,.9); white-space: nowrap;
}
.ib-knopf-kopf:hover { background: var(--marine); color: #fff; }
.ib-knopf-kopf-linie {
  background: transparent; color: var(--blau); border: 1px solid var(--linie-kraeftig);
  box-shadow: none;
}
.ib-knopf-kopf-linie:hover { background: var(--blau); color: #fff; border-color: var(--blau); }

.burger-btn { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger-btn span { display: block; width: 24px; height: 2px; background: var(--marine); margin: 5px 0; border-radius: 2px; }

/* --- Hauptnavigation (Markup kommt aus global_menue_inc.php) -------------- */
.site-nav > ul { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.site-nav > ul > li { position: static; margin: 0; }
.site-nav > ul > li > a {
  position: relative; display: block; padding: 15px 15px 16px;
  font: 600 14.5px/1.35 var(--sans); color: var(--leise); text-decoration: none; white-space: nowrap;
}
.site-nav > ul > li > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: transparent;
}
.site-nav > ul > li > a:hover { color: var(--blau); }
.site-nav > ul > li > a:hover::after { background: var(--linie-kraeftig); }
.site-nav > ul > li.aktiv > a, .site-nav > ul > li > a.aktiv { color: var(--marine); }
.site-nav > ul > li.aktiv > a::after, .site-nav > ul > li > a.aktiv::after { background: var(--blau); }

/* Klappebene über die volle Breite — auch elf Unterpunkte müssen Platz haben. */
.site-nav > ul > li > ul {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  /* Papierton statt Weiss: die Klappebene faellt ueber den Inhalt und soll sich
     vom weissen Kopfbereich darueber absetzen, damit erkennbar ist, wo sie
     anfaengt. Derselbe Ton wie die Abschnittsbaender der Seite. */
  background: var(--grund); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  box-shadow: var(--schatten-tief); padding: 1.7rem calc((100vw - min(100vw - 2.5rem, var(--bahn))) / 2) 1.9rem;
  z-index: 50; list-style: none; margin: 0; columns: 3; column-gap: 2.6rem;
}
.site-nav > ul > li:hover > ul, .site-nav > ul > li:focus-within > ul { display: block; }
.site-nav > ul > li:hover > a { color: var(--marine); }
.site-nav > ul > li:hover > a::after { background: var(--blau); }
.site-nav > ul > li > ul > li { break-inside: avoid; margin: 0 0 .12rem; }
.site-nav > ul > li > ul > li > a {
  display: block; padding: 8px 10px; border-radius: var(--radius-klein);
  font: 400 15.5px/1.45 var(--sans); color: var(--text); text-decoration: none;
}
.site-nav > ul > li > ul > li > a:hover { background: var(--blau-hell); color: var(--marine); }
.site-nav .mobile-only { display: none; }

/* --- Brotkrumen ---------------------------------------------------------- */
.breadcrumb { background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: .9rem 0; font-size: .92rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; color: var(--leise); }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; padding-right: .5rem; color: var(--linie-kraeftig); }
.breadcrumb a { color: var(--leise); text-decoration: none; }
.breadcrumb a:hover { color: var(--marine); text-decoration: underline; }

/* --- Inhaltsbereich ------------------------------------------------------ */
main { display: block; background: var(--flaeche); }
/* main traegt selbst einen Grund, damit zwischen zwei Baendern oder vor dem Fussbereich
   nirgends der warme Seitenhintergrund durchscheinen kann. */
main .container { padding-block: clamp(2.2rem, 4.5vw, 3.6rem); }
main .container > h1:first-child, main .container > h2:first-child { margin-top: 0; }

.content_text, .cms_inhalt { max-width: 82ch; }
.contentbox_wrapper img, .cms_inhalt img { border-radius: var(--radius); }

.icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }

/* --- Fuß ----------------------------------------------------------------- */
/* Kein margin-top: durch den Abstand schien der warme Seitenhintergrund durch und erzeugte
   auf JEDER Seite einen leeren beigen Streifen zwischen letztem Abschnitt und Fussbereich.
   Den noetigen Abstand bringen die Abschnitte ueber ihr eigenes padding schon mit. */
.ib-fuss { background: var(--marine-tief); color: #aeb6d2; padding: clamp(2.6rem, 5vw, 4rem) 0 2rem; font-size: .97rem; }
.ib-fuss-raster { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.ib-fuss h3 { color: #fff; font-family: var(--sans); font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; font-weight: 700; }
.ib-fuss ul { list-style: none; margin: 0; padding: 0; }
.ib-fuss li { margin-bottom: .55rem; }
.ib-fuss a { color: #c3cae2; text-decoration: none; }
.ib-fuss a:hover { color: #fff; text-decoration: underline; }
.ib-marke-fuss { font-family: var(--serif); font-size: 1.4rem; color: #fff; margin-bottom: .8rem; }
.ib-marke-fuss em { color: #8fb8dd; font-style: italic; }
.ib-anschrift { line-height: 1.75; }
.ib-fuss-unten { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.4rem; padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; color: #8e97b8; }

/* --- Baukasten-Reste, die hier nicht gebraucht werden --------------------- */
.box-wrapper { display: none !important; }

/* --- Schmale Bildschirme ------------------------------------------------- */
@media (max-width: 1180px) {
  .site-nav > ul > li > ul { columns: 2; }
  .site-nav > ul > li > a { padding: 14px 11px 15px; font-size: 14px; }
  .site-nav > ul > li > a::after { left: 9px; right: 9px; }
}
@media (max-width: 1040px) {
  /* Kein overflow-x auf .ib-kopf-navi: das Element ist der Bezugsrahmen der Klappebenen, und
     ein Overflow-Container beschneidet absolut positionierte Nachfahren — die Klappebene
     erschien dadurch als schmaler Scrollstreifen statt als Panel. Stattdessen scrollt die
     Liste selbst. Auf diesen Breiten öffnen die Klappebenen nicht mehr; der Hauptpunkt führt
     direkt auf die Rubrikseite, die ihre Unterseiten selbst auflistet. */
  .site-nav { overflow-x: auto; }
  .site-nav > ul { flex-wrap: nowrap; }
  .site-nav > ul > li > a { white-space: nowrap; }
  .site-nav > ul > li:hover > ul, .site-nav > ul > li:focus-within > ul { display: none; }
  .pfeilchen { display: none; }
}
@media (max-width: 900px) {
  .ib-fuss-raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  .ib-kopf-oben { min-height: 66px; gap: .7rem; }
  .ib-zeile { font-size: 1.3rem; }
  .ib-claim { font-size: 10px; letter-spacing: .06em; }
  .ib-knopf-kopf { padding: 9px 13px; font-size: 13.5px; }
  /* Auf schmalen Geraeten zaehlt der Hauptweg. Der Eintragsknopf wandert dort in
     die Servicezeile mit und braucht im Kopf keinen Platz zu belegen. */
  .ib-knopf-kopf-linie { display: none; }
  .burger-btn { display: block; }
  .ib-kopf-navi { display: none; }
  .ib-kopf-navi.offen { display: block; overflow: visible; }
  .ib-kopf-navi.offen .site-nav > ul { flex-direction: column; }
  .ib-kopf-navi.offen .site-nav > ul > li > ul { position: static; display: block; columns: 1; box-shadow: none; border: 0; padding: 0 0 .6rem 1rem; }
  .ib-kopf-navi.offen .site-nav .mobile-only { display: list-item; }
  .ib-laenderleiste .ib-bahn { justify-content: center; gap: .9rem; font-size: 12.5px; }
  .ib-laender { margin-right: 0; }
  .ib-fuss-raster { grid-template-columns: 1fr; }
}

/* =========================================================================
   Seitenkopf: Bühne der Startseite, Artikelkopf der Unterseiten
   ========================================================================= */
.ib-buehne { position: relative; background: var(--marine); overflow: hidden; }
.ib-buehne::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--ib-kopfbild); background-size: cover; background-position: center 42%;
  opacity: .5;
}
.ib-buehne::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(23,28,60,.95) 0%, rgba(23,28,60,.78) 46%, rgba(23,28,60,.2) 100%);
}
.ib-buehne > .ib-bahn { position: relative; z-index: 2; }
.ib-buehne-gross > .ib-bahn { padding: clamp(3.4rem, 8vw, 6.4rem) 0 clamp(4.6rem, 9vw, 7.4rem); }
.ib-buehne-flach > .ib-bahn { padding: clamp(2.4rem, 5.5vw, 4.2rem) 0 clamp(2.2rem, 5vw, 3.6rem); }
.ib-buehne h1 { color: #fff; max-width: 20ch; margin-bottom: .35em; }
.ib-buehne-gross h1 { max-width: 17ch; }
.ib-vorspann-kopf { color: #d7dcee; max-width: 52ch; font-size: 1.1rem; margin: 0; }
.ib-augenmarke { color: #8fb8dd; font: 600 13px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; margin: 0 0 1rem; }
.ib-buehne .ib-krumen { margin-bottom: 1rem; font-size: .92rem; color: #9aa3c4; }
.ib-buehne .ib-krumen a { color: #9aa3c4; text-decoration: none; }
.ib-buehne .ib-krumen a:hover { color: #fff; text-decoration: underline; }
.ib-buehne .ib-krumen span { padding: 0 .45em; color: rgba(255,255,255,.32); }
.ib-buehne .ib-krumen .ib-hier { padding: 0; color: #c9cfe4; }

/* Suchkarte, halb über die Bühne geschoben */
.ib-buehne-suche { margin-top: clamp(-72px, -6vw, -40px); position: relative; z-index: 5; }
.ib-suchhinweis { color: var(--leise); font-size: .95rem; margin: -.4rem 0 1.1rem; }

/* =========================================================================
   Inhaltsbereich
   ========================================================================= */
main .container { padding-block: clamp(2.6rem, 5vw, 4.2rem); }

/* Kacheln — die Contentboxen der Startseite als Themeneinstiege */
.contentbox_wrapper { max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.contentbox_wrapper > * { min-width: 0; }
.contentbox, .contentbox_item {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; height: 100%;
}
.contentbox:hover, .contentbox_item:hover { border-color: var(--blau); box-shadow: var(--schatten); }
.contentbox h2, .contentbox h3, .contentbox_item h2, .contentbox_item h3 { margin-top: 0; font-size: 1.16rem; }
.contentbox img, .contentbox_item img { border-radius: var(--radius-klein); margin-bottom: .9rem; }
.icons img { width: 46px; height: 46px; object-fit: contain; }

/* Fließtext lesbar halten */
.cms_inhalt, .content_text, .inhaltstext { max-width: 82ch; }
.cms_inhalt img, .content_text img { border-radius: var(--radius); margin: 1.6rem 0; }

blockquote {
  border-left: 4px solid var(--blau); background: var(--blau-hell); margin: 2rem 0;
  padding: 1.2rem 1.4rem; border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
blockquote p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; margin: 1.6rem 0; }
th, td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--linie); }
th { background: var(--flaeche); font-weight: 600; color: var(--marine); }

@media (max-width: 700px) {
  .ib-buehne-suche { margin-top: -28px; }
  .contentbox_wrapper { grid-template-columns: 1fr; }
}

/* =========================================================================
   Formulare, Meldungen, Praxiszugang
   ========================================================================= */
.ib-formular { display: grid; gap: 1.1rem; }
.ib-formular h2 { margin-top: 0; }
.ib-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ib-formular label { display: block; font: 600 13.5px/1 var(--sans); color: var(--leise); margin-bottom: .45rem; }
.ib-formular input[type=text], .ib-formular input[type=email], .ib-formular input[type=tel],
.ib-formular input[type=password], .ib-formular select, .ib-formular textarea {
  width: 100%; padding: 13px 14px; font: 400 17px/1.45 var(--sans); color: var(--text);
  background: var(--grund); border: 1.5px solid var(--linie-kraeftig); border-radius: var(--radius-klein);
}
.ib-formular input:focus, .ib-formular select:focus, .ib-formular textarea:focus { border-color: var(--blau); background: #fff; outline: none; }
.ib-formular textarea { resize: vertical; min-height: 160px; }
.ib-formular abbr { color: var(--blau); text-decoration: none; }
.ib-zustimmung { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .97rem; }
.ib-zustimmung input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--blau); }
.ib-zustimmung label { font: inherit; color: var(--text); margin: 0; }
.ib-pflicht { font-size: .9rem; color: var(--leise); margin: 0; }
.ib-formular button, .ib-knopf {
  justify-self: start; display: inline-block; padding: 14px 30px; border: 0; cursor: pointer;
  font: 600 17px/1 var(--sans); color: #fff; background: var(--marine);
  border-radius: 99px; text-decoration: none; text-align: center;
}
.ib-formular button:hover, .ib-knopf:hover { background: var(--blau); color: #fff; }
.form-feld-fehler { border-color: #c0392b !important; }
.form-feld-fehler-text { color: #c0392b; font-size: .9rem; }

.form-meldung, .ib-meldung { padding: 1rem 1.2rem; border-radius: var(--radius-klein); margin: 0; }
.form-meldung:empty { display: none; }
.form-meldung.erfolg, .ib-meldung-gut { background: #eef5f1; border-left: 4px solid var(--gruen); color: #24503e; }
.form-meldung.fehler, .ib-meldung-schlecht { background: #fdeeec; border-left: 4px solid #c0392b; color: #8c2b20; }
.ib-meldung { margin-bottom: 1.6rem; }
.ib-meldung p:last-child { margin-bottom: 0; }

.ib-kontakt-raster, .ib-anmelde-raster { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 1.8rem; align-items: start; }
.ib-praxisbereich { max-width: 720px; }

@media (max-width: 900px) {
  .ib-kontakt-raster, .ib-anmelde-raster { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ib-paar { grid-template-columns: 1fr; }
}

/* =========================================================================
   Erfahrungsberichte
   ========================================================================= */
.ib-berichtliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.ib-berichtkarte { margin: 0; }
.ib-berichtkarte a {
  display: flex; flex-direction: column; height: 100%; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: var(--text);
}
.ib-berichtkarte a:hover { border-color: var(--blau); box-shadow: var(--schatten); }
.ib-berichtkarte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.ib-berichtkarte h2 { font-size: 1.16rem; margin: 1.2rem 1.3rem .5rem; }
.ib-berichtkarte p { margin: 0 1.3rem 1rem; color: var(--leise); font-size: .97rem; line-height: 1.6; }
.ib-weiter { margin: auto 1.3rem 1.3rem; color: var(--blau); font-weight: 600; font-size: .95rem; }

.ib-bericht { max-width: 68ch; }
.ib-berichtdatum { color: var(--leise); font-size: .93rem; margin-bottom: 1rem; }
.ib-berichtbild { margin: 0 0 1.8rem; }
.ib-berichtbild img { border-radius: var(--radius); width: 100%; }
.ib-berichttext > *:first-child { margin-top: 0; }

/* =========================================================================
   News
   ========================================================================= */
.ib-newsliste, ul.ib-newsliste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.3rem; }
.ib-newskarte { margin: 0; list-style: none; }
.ib-newskarte a {
  display: flex; flex-direction: column; height: 100%; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: var(--text);
}
.ib-newskarte a:hover { border-color: var(--blau); box-shadow: var(--schatten); }
.ib-newskarte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.ib-newstext { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.3rem 1.3rem; }
.ib-newsdatum { color: var(--leise); font-size: .9rem; margin: 0 0 .4rem; }
.ib-newskarte h2 { font-size: 1.14rem; margin: 0 0 .55rem; }
.ib-newsteaser { color: var(--leise); font-size: .97rem; line-height: 1.6; margin: 0 0 1rem; }
.ib-newstext .ib-weiter { margin-top: auto; }

.ib-newsartikel { max-width: 68ch; }
.ib-newsbild img { border-radius: var(--radius); width: 100%; margin-bottom: 1.6rem; }
.ib-newsinhalt > *:first-child { margin-top: 0; }
.ib-newspdf { margin-top: 1.8rem; }

/* Die Newsliste steht ohne umschliessende <ul> im Markup des uebernommenen Moduls —
   deshalb greift das Raster auch auf einem beliebigen Elternelement. */
.ib-newskarte + .ib-newskarte { margin-top: 0; }

/* --- Sitemap-Seite -------------------------------------------------------- */
.ib-sitemapseite { columns: 2; column-gap: 3rem; }
.ib-sitemapgruppe { break-inside: avoid; margin-bottom: 2rem; }
.ib-sitemapgruppe h2 { font-size: 1.2rem; margin: 0 0 .6rem; padding-bottom: .35rem; border-bottom: 2px solid var(--linie); }
.ib-sitemapgruppe h2 a { color: var(--marine); text-decoration: none; }
.ib-sitemapgruppe h2 a:hover { color: var(--blau); }
.ib-sitemapgruppe ul { list-style: none; margin: 0; padding: 0; }
.ib-sitemapgruppe li { margin-bottom: .3rem; }
.ib-sitemapgruppe a { text-decoration: none; }
.ib-sitemapgruppe a:hover { text-decoration: underline; }
@media (max-width: 700px) { .ib-sitemapseite { columns: 1; } }

/* =========================================================================
   Inhaltsbereich: Bahn und Lesebreite
   ========================================================================= */
/* Der Hauptinhalt ist das erste Band der Seite und traegt deshalb selbst einen Ton — sonst
   beginnt der Wechsel erst beim zweiten Abschnitt und der Seitenanfang wirkt flach. */
.ib-inhalt { padding: clamp(2.4rem, 5vw, 4rem) 0; background: var(--flaeche); }
/* Leerer Inhaltsblock (Startseite: der Text steckt dort in einem eigenen Abschnitt) darf
   keinen Leerraum zwischen Suchkarte und erstem Abschnitt erzeugen. :empty greift nicht,
   weil zwischen den Tags Zeilenumbrueche stehen - deshalb ueber :has auf Kindelemente. */
.ib-inhalt:not(:has(.ib-bahn > *)) { display: none; }
.ib-inhalt:empty { display: none; }
.ib-inhalt > .ib-bahn > * { max-width: 100%; }

/* Fließtext auf Lesebreite halten. Gilt für die direkten Textkinder des Inhalts —
   Raster, Listen und Karten bleiben davon unberührt, die brauchen die volle Bahn. */
.ib-inhalt > .ib-bahn > p,
.ib-inhalt > .ib-bahn > h2,
.ib-inhalt > .ib-bahn > h3,
.ib-inhalt > .ib-bahn > h4,
.ib-inhalt > .ib-bahn > ul:not([class]),
.ib-inhalt > .ib-bahn > ol:not([class]),
.ib-inhalt > .ib-bahn > blockquote,
.ib-inhalt .cms_inhalt > p,
.ib-inhalt .cms_inhalt > h2,
.ib-inhalt .cms_inhalt > h3,
.ib-inhalt .cms_inhalt > ul:not([class]),
.ib-inhalt .cms_inhalt > ol:not([class]) { max-width: 82ch; }

/* =========================================================================
   FAQ-Akkordeon
   Das Design des Baukastens brachte keine Regeln dafür mit: die Fragen sahen aus wie
   Fließtext, alle Antworten standen offen, und Klicken bewirkte nichts Sichtbares.
   ========================================================================= */
.faq-liste, [role="list"].faq-liste { list-style: none; margin: 0; padding: 0; }
.faq-item {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein);
  margin-bottom: .7rem; overflow: hidden;
}
.faq-item:has(.faq-frage[aria-expanded="true"]) { border-color: var(--blau); }
.faq-frage {
  display: flex; align-items: flex-start; gap: .9rem; width: 100%;
  padding: 1.15rem 1.3rem; background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 1.06rem/1.45 var(--serif); color: var(--marine);
}
.faq-frage::before {
  content: "+"; flex: 0 0 auto; width: 1.4em; height: 1.4em; margin-top: .05em;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--blau-hell); color: var(--blau); font: 700 1rem/1 var(--sans);
}
.faq-frage[aria-expanded="true"]::before { content: "–"; background: var(--blau); color: #fff; }
.faq-frage:hover { color: var(--blau); }
.faq-antwort { padding: 0 1.3rem 1.2rem 3.6rem; color: var(--text); }
.faq-antwort > div[style] { display: none; }   /* Abstandshalter aus dem Altmarkup */
.faq-item:not(.offen) .faq-antwort { display: none; }
.faq-item.offen .faq-antwort { display: block; }
@media (max-width: 620px) {
  .faq-antwort { padding-left: 1.3rem; }
}

/* --- Wegweiser innerhalb der Rubrik --------------------------------------- */
/* Der Grundton kommt aus dem PHP (grund-weiss / grund-papier) und richtet sich nach dem
   Band darueber - ohne das stiessen zweimal dieselbe Farbe aneinander und der Wegweiser
   sah aus wie ein angehaengter Rest der vorigen Section. Der Rahmen oben faellt damit weg,
   die Kante entsteht jetzt durch den Farbwechsel selbst. */
.verwandte-themen-section { padding: clamp(2.2rem, 4.5vw, 3.4rem) 0; }
.verwandte-themen-section.grund-papier .verwandte-themen-karte { background: var(--flaeche); }
.verwandte-themen-section.grund-weiss  .verwandte-themen-karte { background: var(--grund); }
.verwandte-themen-section .container { width: min(100% - 2.5rem, var(--bahn)); margin-inline: auto; }
.verwandte-themen-section h2 { margin: 0 0 1.2rem; font-size: 1.45rem; }
.verwandte-themen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: .9rem; }
.verwandte-themen-karte {
  display: flex; align-items: center; justify-content: space-between; gap: .9rem; min-height: 62px;
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius-klein);
  padding: 1rem 1.2rem; text-decoration: none; color: var(--marine); font-weight: 600;
}
.verwandte-themen-karte:hover { border-color: var(--blau); background: var(--blau-hell); }
.verwandte-themen-titel { flex: 1 1 auto; line-height: 1.35; }
.verwandte-themen-karte i { flex: 0 0 auto; color: var(--blau); font-style: normal; }
.verwandte-themen-karte i::before { content: "→"; }

/* =========================================================================
   Eingebettete Videos
   Der Altbestand nutzt einen Trick von früher: ein durchsichtiges Bild von placehold.it gibt
   das Seitenverhältnis vor, das iframe liegt darüber. Der Dienst existiert nicht mehr — das
   Bild war kaputt und das Video schrumpfte auf die Browser-Vorgabe von 300×150 Pixeln.
   Das Seitenverhältnis kommt jetzt aus dem Stylesheet, das Platzhalterbild bleibt verborgen.
   ========================================================================= */
.h_iframe { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 860px; margin: 1.8rem 0; border-radius: var(--radius); overflow: hidden; background: #000; }
.h_iframe img.ratio { display: none; }
.h_iframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Seit die Filme selbst ausgeliefert werden, steht hier ein <video> statt
   eines iframes. Gleiche Flaeche, gleicher Rahmen - der Unterschied ist,
   dass nichts mehr an YouTube geht. */
.h_iframe video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }
.wrapper3, .wrapper_klein { max-width: 100%; }

/* --- Lageskizze und Schwerpunkte auf der Praxisseite ---------------------- */
.ib-schwerpunkte { list-style: none; margin: 0 0 1rem; padding: 0; }
.ib-schwerpunkte li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.ib-schwerpunkte li:last-child { border-bottom: 0; }
.ib-bez-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); flex: 0 0 auto; }

/* --- Themeneinstiege der Startseite --------------------------------------- */
.ib-fragenkacheln { padding: clamp(2.6rem, 5vw, 4rem) 0 0; }
.ib-fragenkacheln h2 { margin-top: 0; }
.ib-augenmarke-dunkel { color: var(--blau); }
.ib-kachelliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ib-kachelliste li { margin: 0; }
.ib-kachelliste a {
  display: block; height: 100%; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.5rem 1.3rem 1.35rem; text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ib-kachelliste a:hover { border-color: var(--blau); transform: translateY(-3px); box-shadow: var(--schatten); }
.ib-kachelliste img { width: 46px; height: 46px; object-fit: contain; margin-bottom: 1rem; }
.ib-kachelliste strong { display: block; font-family: var(--serif); font-size: 1.12rem; color: var(--marine); margin-bottom: .3rem; line-height: 1.3; }
.ib-kachelliste span { display: block; font-size: .95rem; color: var(--leise); line-height: 1.55; }

/* =========================================================================
   Abschnitte (Folgeseiten)
   Jede Folgeseite ist ein eigener Abschnitt mit eigenem Hintergrund. Die Töne wechseln
   sich ab, damit eine Seite mit mehreren Abschnitten Rhythmus bekommt statt als eine
   Textwand zu erscheinen.
   ========================================================================= */
.ib-abschnitt { padding: clamp(2.6rem, 5.5vw, 4.4rem) 0; }
/* Achtung: seit der Umstellung des Bandwechsels traegt "ton-hell" den warmen Papierton und
   "ton-warm" das Weiss - die Namen kommen aus der urspruenglichen Reihenfolge. */
.ib-abschnitt.ton-hell { background: var(--grund); }
.ib-abschnitt.ton-warm { background: var(--flaeche); }
.ib-abschnitt.ton-hell + .ib-abschnitt.ton-hell { padding-top: 0; }
.ib-abschnitt h2 { margin-top: 0; }
.ib-abschnitt h2:empty { display: none; }

.ib-abschnitt-raster { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
.ib-abschnitt.hat-bild .ib-abschnitt-raster { grid-template-columns: 1.1fr .9fr; }
.ib-abschnitt.hat-bild.bild-links .ib-abschnitt-text { order: 2; }
.ib-abschnitt.hat-bild.bild-links .ib-abschnitt-bild { order: 1; }
.ib-abschnitt.ohne-bild .ib-abschnitt-bild { display: none; }
figure.ib-abschnitt-bild { margin: 0; }
figure.ib-abschnitt-bild img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--schatten); display: block; }
/* Lesebreite nur fuer Fliesstext. Kartenraster (Boxen, News, Downloads, Icons) sind hier
   ausdruecklich ausgenommen - sie sollen die ganze Bahn nutzen. Genau daran lag es, dass
   drei Boxen nebeneinander standen und rechts ein breiter Streifen leer blieb. */
.ib-abschnitt-text > p,
.ib-abschnitt-text > ul:not([class]),
.ib-abschnitt-text > ol:not([class]) { max-width: 82ch; }
.ib-abschnitt.ohne-bild .ib-abschnitt-text { max-width: none; }

@media (max-width: 900px) {
  .ib-abschnitt.hat-bild .ib-abschnitt-raster { grid-template-columns: 1fr; }
  .ib-abschnitt.hat-bild.bild-links .ib-abschnitt-text,
  .ib-abschnitt.hat-bild.bild-links .ib-abschnitt-bild { order: initial; }
  figure.ib-abschnitt-bild img { max-height: 340px; object-fit: contain; }
}

/* --- Icon-Kacheln aus dem Altbestand ("Hier finden Sie Experten in Ihrer Nähe!") ---------
   Im Inhalt stehen <div class="icons"> mit Bild, <br> und Beschriftung. Ohne Regeln dafür
   standen sie als nackte Liste untereinander. */
.contentbox_wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; max-width: none; margin: 1.6rem 0 0; }
.icons { margin: 0; }
.icons a {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; height: 100%;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.4rem 1.25rem 1.3rem; text-decoration: none; color: var(--marine);
  font: 600 1.03rem/1.4 var(--serif);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ton-hell .icons a { background: var(--flaeche); }
.ton-warm .icons a { background: var(--grund); }
.icons a:hover { border-color: var(--blau); transform: translateY(-3px); box-shadow: var(--schatten); }
.icons img { width: 46px; height: 46px; object-fit: contain; margin-bottom: .85rem; }
.icons br { display: none; }

/* --- News-Anriss in Abschnitten ---------------------------------------------------------- */
.ib-abschnitt .ib-newsliste { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ib-abschnitt .ib-newskarte a { background: var(--flaeche); }
.ton-hell .ib-newskarte a { background: var(--flaeche); }

/* Newskarten ohne eigenes Motiv: der Altbestand setzt dann grafik/spacer.gif ein — ein
   1×1-Pixel-Bild, das als aufgezogener grauer Balken erscheinen würde. Lieber gar kein Bild. */
.ib-newskarte img[src$="spacer.gif"], .ib-newskarte img[src="/grafik/spacer.gif"] { display: none; }

/* Contentboxen als Kachelraster */
.contentbox_wrapper .contentbox,
.contentbox_wrapper > div:not(.icons) {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.ton-hell .contentbox_wrapper > div:not(.icons) { background: var(--grund); }
.contentbox_wrapper img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 0; margin: 0 0 1rem; }

/* --- Contentboxen --------------------------------------------------------- */
.ib-boxliste { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.3rem; }
.ib-box { margin: 0; }
.ib-box > a, .ib-box-innen {
  display: flex; flex-direction: column; height: 100%; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: var(--text);
}
.ton-hell .ib-box > a, .ton-hell .ib-box-innen { background: var(--flaeche); }
.ib-box > a:hover { border-color: var(--blau); box-shadow: var(--schatten); transform: translateY(-3px); }
.ib-box > a { transition: border-color .15s, box-shadow .15s, transform .15s; }
.ib-box img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; margin: 0; }
.ib-boxtext { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.3rem 1.3rem; }
.ib-boxtext h3 { margin: 0 0 .5rem; font-size: 1.14rem; }
.ib-boxbeschreibung { color: var(--leise); font-size: .97rem; line-height: 1.6; }
.ib-boxbeschreibung p:last-child { margin-bottom: 0; }
.ib-boxtext .ib-weiter { margin-top: auto; padding-top: .9rem; }

/* --- Downloads ------------------------------------------------------------ */
.ib-downloadliste { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; }
.ib-download { margin: 0; }
.ib-download a {
  display: flex; flex-direction: column; height: 100%; gap: .35rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.3rem 1.35rem; text-decoration: none; color: var(--text);
}
.ton-hell .ib-download a { background: var(--flaeche); }
.ib-download a:hover { border-color: var(--blau); box-shadow: var(--schatten); }
.ib-download-art { font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--blau); }
.ib-download-titel { font-family: var(--serif); font-size: 1.1rem; color: var(--marine); font-weight: 600; line-height: 1.35; }
.ib-download-text { color: var(--leise); font-size: .95rem; line-height: 1.55; }
.ib-download .ib-weiter { margin-top: auto; padding-top: .7rem; }

/* --- Lexikon: Buchstabenleiste -------------------------------------------- */
.ib-lexikonnavi { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1.6rem; }
.ib-lexikonnavi a {
  display: inline-block; min-width: 40px; text-align: center; padding: 9px 8px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche);
  text-decoration: none; color: var(--marine); font-weight: 700; font-size: .98rem;
}
.ib-lexikonnavi a:hover { border-color: var(--blau); background: var(--blau-hell); }
.ib-lexikonnavi a[aria-current] { background: var(--marine); border-color: var(--marine); color: #fff; }


/* =========================================================================
   Kartenraster nutzen immer die ganze Bahn
   ========================================================================= */
.ib-boxliste, .ib-newsliste, .ib-downloadliste, .contentbox_wrapper,
.ib-berichtliste, .themenliste, .verwandte-themen-grid { max-width: none !important; width: 100%; }

/* Abschnittsbild: hoehenbegrenzt, damit ein hochkantes Motiv nicht die halbe Seite fuellt. */
figure.ib-abschnitt-bild img { max-height: 420px; width: auto; max-width: 100%; margin-inline: auto; }
.ib-abschnitt.hat-bild .ib-abschnitt-raster { grid-template-columns: 1.25fr .75fr; }

/* =========================================================================
   Kachelliste — Aufbau exakt wie im freigegebenen Entwurf
   ========================================================================= */
.ib-kachelliste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: none;
}
.ib-kachelliste li { margin: 0; }
.ib-kachelliste a {
  display: block; height: 100%; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.5rem 1.3rem 1.35rem; text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ton-warm .ib-kachelliste a { background: var(--flaeche); }
.ton-hell .ib-kachelliste a { background: var(--grund); }
.ib-kachelliste a:hover { border-color: var(--blau); transform: translateY(-3px); box-shadow: var(--schatten); }
.ib-kachelliste img { width: 46px; height: 46px; object-fit: contain; margin: 0 0 1rem; border-radius: 0; }
.ib-kachelliste strong { display: block; font-family: var(--serif); font-size: 1.12rem; color: var(--marine); font-weight: 600; margin-bottom: .3rem; line-height: 1.3; }
.ib-kachelliste span { display: block; font-size: .95rem; color: var(--leise); line-height: 1.55; }

/* Augenmarke innerhalb eines Abschnitts, wie im Entwurf über der Überschrift */
.ib-abschnitt .ib-augenmarke { color: var(--blau); margin-bottom: .6rem; }
.ib-abschnitt-text > .ib-augenmarke:first-child { margin-top: -.2rem; }

/* Der Icon-Block des Altbestands wird nicht mehr gebraucht — seine Inhalte stecken jetzt in
   der Kachelliste oben. Falls er irgendwo noch vorkommt, bleibt er wenigstens ordentlich. */


/* Der letzte Block vor dem Fussbereich schliesst buendig an - kein durchscheinender
   Seitenhintergrund mehr. */
main { padding-bottom: 0; }
main > *:last-child { margin-bottom: 0; }
.verwandte-themen-section:empty { display: none; }

/* =========================================================================
   Sprunglink „Zum Inhalt springen"
   Er stand sichtbar ganz oben auf jeder Seite, weil das Design keine Regeln dafür mitbrachte.
   Er gehört nicht ins Bild — aber löschen wäre falsch: Wer mit der Tastatur navigiert,
   springt damit an den Menüs vorbei direkt zum Inhalt. Deshalb außerhalb des Sichtfelds
   geparkt und nur eingeblendet, solange er den Fokus hat.
   ========================================================================= */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--marine); color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: 0 0 var(--radius-klein) 0;
  font: 600 15px/1 var(--sans);
}
.skip-link:focus, .skip-link:focus-visible { left: 0; }

/* =========================================================================
   INHALTSVORLAGEN
   Das CMS bringt in admin/tpl/vorlage/ 28 fertige Abschnittsbausteine mit: nur Text,
   zweispaltig, Bild links/rechts, drei Boxen, sechs Boxen, Zitat, Kennzahlen und so
   weiter. Sie waren nutzbar, hatten im Design 90 aber keine Formatierung - die Klassen
   stammen aus einem anderen Design. Hier bekommen sie die Gestalt des Implantatberaters.
   Ab jetzt kann jeder neue Abschnitt in der Verwaltung aus einer Vorlage gebaut werden.

   Grundtoene werden bewusst benannt statt durchnummeriert. Die aelteren Klassen ton-hell
   und ton-warm tragen aus historischen Gruenden die jeweils andere Farbe - dieser Fehler
   soll sich hier nicht fortsetzen.
   ========================================================================= */
.grund-weiss  { background: var(--flaeche); }
.grund-papier { background: var(--grund); }
.grund-blau   { background: var(--blau-hell); }
.grund-marine { background: var(--marine); color: #e9ecf5; }
.grund-marine h2, .grund-marine h3, .grund-marine h4 { color: #fff; }
.grund-marine a { color: #a8c8ea; }

/* --- gemeinsame Bausteine ------------------------------------------------- */
.textblock-section,
.bildspalten-section,
.gruppen-section,
.highlight-section,
.natur-zitat-section,
.schnellinfos-section { padding: clamp(2.6rem, 5.5vw, 4.4rem) 0; }

.textblock-linie, .section-linie {
  width: 62px; height: 3px; border-radius: 2px; background: var(--blau);
  margin: .85rem 0 1.4rem;
}
.section-header { max-width: 62ch; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.section-header .section-linie { margin-inline: 0; }
.section-label {
  display: block; font-size: .82rem; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 600; color: var(--blau);
}
.section-label-hell { color: #9fc4e8; }
.section-header h2 { margin: 0; }
.section-header p { color: var(--leise); margin: .8rem 0 0; }
.grund-marine .section-header p, .highlight-section .section-header p { color: #c3cade; }

.textblock-section h2, .bildspalten-section h2 { margin-top: 0; }

/* --- Vorlage: Text einspaltig --------------------------------------------- */
.textblock-einspaltig .textblock-inhalt { max-width: 82ch; }

/* --- Vorlage: Text zweispaltig (eine oder zwei Ueberschriften) ------------- */
.textblock-spalten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start;
}
.textblock-spalte > *:first-child { margin-top: 0; }
.textblock-spalte > *:last-child  { margin-bottom: 0; }
.textblock-spalte h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
/* Die Lesebreite gilt in Spalten nicht - die Spalte ist die Begrenzung. */
.textblock-spalte p, .textblock-spalte ul, .textblock-spalte ol { max-width: none; }

/* --- Vorlage: Bild links / Bild rechts, zweispaltig ------------------------ */
.bildspalten-grid, .bildspalten-grid-reverse {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center;
}
.bildspalten-grid-reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.bildspalten-grid-reverse .bildspalten-bild { order: 2; }
.bildspalten-grid-reverse .bildspalten-text { order: 1; }
.bildspalten-bild img {
  display: block; width: 100%; height: auto; max-height: 430px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.bildspalten-text > *:first-child { margin-top: 0; }
.bildspalten-text > *:last-child  { margin-bottom: 0; }
.bildspalten-text p, .bildspalten-text ul, .bildspalten-text ol { max-width: none; }

/* --- Vorlage: drei bzw. sechs Boxen ---------------------------------------
   Die Spaltenzahl ist fest, nicht auto-fit. Bei auto-fit entscheidet der Browser, und
   genau daraus entstanden die Umbrueche, bei denen zwei Boxen nebeneinander standen und
   die dritte darunter rutschte. Drei Boxen bleiben zu dritt, bis die Bahn wirklich zu
   schmal wird - dann in einem Schritt untereinander.
   ------------------------------------------------------------------------- */
.gruppen-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem); max-width: none; list-style: none; margin: 0; padding: 0;
}
.gruppe-karte {
  display: flex; flex-direction: column; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.grund-papier .gruppe-karte, .grund-blau .gruppe-karte { background: var(--flaeche); }
.grund-weiss  .gruppe-karte { background: var(--grund); }
.gruppe-karte:hover { border-color: var(--blau); box-shadow: var(--schatten); transform: translateY(-3px); }
.gruppe-bild { position: relative; }
.gruppe-bild img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; margin: 0; }
.gruppe-bild-icon {
  position: absolute; right: .9rem; bottom: -1.1rem; width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center; border-radius: 50%; background: var(--blau);
  color: #fff; box-shadow: var(--schatten);
}
.gruppe-inhalt { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.35rem 1.35rem; }
.gruppe-inhalt h3 { margin: 0 0 .55rem; font-size: 1.14rem; }
.gruppe-inhalt p { color: var(--leise); font-size: .97rem; line-height: 1.6; margin: 0; max-width: none; }
.gruppe-mehr {
  margin-top: auto; padding-top: 1rem; font-weight: 600; font-size: .95rem;
  color: var(--blau); text-decoration: none; align-self: flex-start;
}
.gruppe-mehr::after { content: " \2192"; }
.gruppe-mehr:hover { text-decoration: underline; }

/* --- Vorlage: Highlights (dunkles Band mit Vorteilen) ---------------------- */
.highlight-section { background: var(--marine); color: #dbe0ee; }
.highlight-section h2, .highlight-section h4 { color: #fff; }
.vorteile-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.vorteil-item > *:last-child { margin-bottom: 0; }
.vorteil-icon {
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.11); color: #fff; margin-bottom: .9rem;
}
.vorteil-item h4 { margin: 0 0 .45rem; font-size: 1.06rem; }
.vorteil-item p { color: #c3cade; font-size: .95rem; line-height: 1.6; margin: 0; max-width: none; }

/* --- Vorlage: Kennzahlen vor Hintergrundbild ------------------------------ */
.praxis-section {
  position: relative; isolation: isolate; padding: clamp(3.2rem, 7vw, 5.4rem) 0;
  background-size: cover; background-position: 50% 50%; color: #fff;
}
.praxis-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(23,28,60,.92) 0%, rgba(23,28,60,.74) 100%);
}
.praxis-section h2 { color: #fff; margin-top: 0; }
.praxis-section p { color: #d5dae9; max-width: 60ch; }
.parallax-helper-img { display: none; }
.praxis-fakten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem);
}
.praxis-fakt-zahl { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.6rem); color: #fff; line-height: 1.1; }
.praxis-fakt-text { font-size: .93rem; color: #c3cade; margin-top: .3rem; }

/* --- Vorlage: Zitat -------------------------------------------------------- */
.natur-zitat-section { background: var(--blau-hell); }
.zitat-inhalt { max-width: 68ch; margin-inline: auto; text-align: center; position: relative; }
.zitat-anfuehrung {
  display: block; font-family: var(--serif); font-size: 3.4rem; line-height: 1;
  color: var(--blau); opacity: .35;
}
.zitat-text { font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.55; color: var(--marine); margin: .4rem 0 0; max-width: none; }
.zitat-quelle { font-size: .93rem; color: var(--leise); margin: 1rem 0 0; }

/* --- Vorlage: Schnellinfos ------------------------------------------------- */
.schnellinfos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.schnellinfo-item { display: flex; gap: .85rem; align-items: flex-start; }
.schnellinfo-icon { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--blau-hell); color: var(--blau); }
.schnellinfo-text strong { display: block; color: var(--marine); }

/* --- Schaltflaechen -------------------------------------------------------- */
.btn, a.btn {
  display: inline-block; padding: .95rem 1.7rem; border-radius: var(--radius-klein);
  background: var(--blau); color: #fff; text-decoration: none; font-weight: 600;
  border: 1px solid var(--blau); line-height: 1.25;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.btn:hover, a.btn:hover { background: var(--marine); border-color: var(--marine); color: #fff; transform: translateY(-2px); box-shadow: var(--schatten); }
.btn-hell, a.btn-hell { background: #fff; color: var(--marine); border-color: #fff; }
.btn-hell:hover, a.btn-hell:hover { background: var(--blau-hell); color: var(--marine); border-color: var(--blau-hell); }
.btn-linie, a.btn-linie { background: transparent; color: var(--blau); border-color: var(--linie-kraeftig); }
.btn-linie:hover, a.btn-linie:hover { background: var(--blau); color: #fff; border-color: var(--blau); }
.btn-gross, a.btn-gross { padding: 1.1rem 2.2rem; font-size: 1.05rem; }
.btn-zeile { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.btn-zeile > *:only-child { margin-top: 0; }

/* Die Vorlagen setzen Pfeile und Symbole als Font-Awesome-Zeichen. Dieses Design bindet
   Font Awesome nicht ein - ohne die Schrift bliebe ein leeres Kaestchen stehen. Die
   Symbole werden deshalb ausgeblendet; wo ein Pfeil gemeint ist, setzt ihn das
   Stylesheet selbst (siehe .gruppe-mehr::after). */
.gruppen-section i[class^="fa"], .gruppen-section i[class*=" fa"],
.textblock-section i[class^="fa"], .textblock-section i[class*=" fa"],
.bildspalten-section i[class^="fa"], .bildspalten-section i[class*=" fa"] { display: none; }
.highlight-section i[class^="fa"], .schnellinfos-section i[class^="fa"] { font-style: normal; }

/* --- Umbruchverhalten ------------------------------------------------------ */
@media (max-width: 1040px) {
  .vorteile-grid, .praxis-fakten, .schnellinfos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .gruppen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bildspalten-grid, .bildspalten-grid-reverse { grid-template-columns: 1fr; }
  .bildspalten-grid-reverse .bildspalten-bild,
  .bildspalten-grid-reverse .bildspalten-text { order: 0; }
  .bildspalten-bild img { max-height: 340px; }
  .textblock-spalten { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .gruppen-grid { grid-template-columns: 1fr; }
  .vorteile-grid, .praxis-fakten, .schnellinfos-grid { grid-template-columns: 1fr; }
}

/* Freigestelltes Motiv (Karte, Grafik, Illustration): nicht beschneiden, sondern ganz
   zeigen. Ein Zuschnitt auf Formatfuellung wuerde einer Landkarte die Raender nehmen. */
.bildspalten-bild.bild-frei img {
  object-fit: contain; background: var(--flaeche); padding: 1.2rem;
  max-height: 400px; width: 100%;
}
.textblock-spalte h3 { margin: 0 0 .6rem; font-size: 1.12rem; color: var(--marine); }
.textblock-spalte h3 + p { margin-top: 0; }
/* Die Augenmarke steht auch ausserhalb der alten Abschnittsklassen ueber der Ueberschrift. */
.bildspalten-text > .ib-augenmarke:first-child,
.textblock-section > .container > .ib-augenmarke:first-child { color: var(--blau); margin: 0 0 .6rem; }

/* Abschnitte des Standardbausatzes bekommen denselben Akzentstrich unter der Ueberschrift
   wie die Abschnitte aus den Inhaltsvorlagen. Sonst haetten auf einer Seite zwei Sorten
   Ueberschrift nebeneinander gestanden. */
.ib-abschnitt-text > h2:first-child::after {
  content: ""; display: block; width: 62px; height: 3px; border-radius: 2px;
  background: var(--blau); margin: .85rem 0 1.4rem;
}

/* Die Vorlagenabschnitte bringen ihren Abstand nach oben und unten selbst mit. Die
   allgemeine Regel "main .container" legt noch einmal denselben Abstand drauf - zusammen
   waeren es rund 130 Pixel Luft an jeder Bandkante. Hier gilt nur der Abstand der Section. */
.textblock-section > .container,
.bildspalten-section > .container,
.gruppen-section > .container,
.highlight-section > .container,
.praxis-section > .container,
.natur-zitat-section > .container,
.schnellinfos-section > .container { padding-block: 0; }

/* Der Pfeil vor "Weitere Informationen zum Thema ..." ist ein altes Inhaltsbild mit
   height="18". Die allgemeine Bildregel setzt height:auto und blies ihn auf mehr als das
   Doppelte auf. Hier bekommt er wieder Zeilenhoehe und steht buendig zum Text. */
a > img[src$="arrow.png"] {
  width: 1.1em; height: 1.1em; vertical-align: -.2em; margin: 0 .4em 0 0;
  border-radius: 0; display: inline-block;
}

/* Kartenraster mit fester Spaltenzahl. Die Zahl steht im Markup, nicht in einer
   Automatik - so entscheidet der Redakteur, ob vier kurze Karten in einer Reihe stehen
   oder als 2x2 umbrechen, und nicht der Browser nach verfuegbarer Breite. */
.gruppen-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gruppen-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gruppen-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gruppen-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .gruppen-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .gruppen-grid--3, .gruppen-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .gruppen-grid--2, .gruppen-grid--3, .gruppen-grid--4, .gruppen-grid--6 { grid-template-columns: 1fr; }
}
/* In einer Karte ohne Bild darf der Text mehrere Absaetze haben. */
.gruppe-inhalt > p + p { margin-top: .7rem; }
.gruppe-inhalt ul, .gruppe-inhalt ol { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .97rem; color: var(--leise); }

/* Band fuer Abschnitte aus tpl/content_vorlage_modul.tpl.htm. Grundton kommt als
   Inline-Farbe aus dem Feld "Hintergrundfarbe" der Folgeseite. */
.ib-vorlagenband { padding: clamp(2.6rem, 5.5vw, 4.4rem) 0; }
.ib-vorlagenband > .container { padding-block: 0; }
.ib-vorlagenband > .container > *:first-child { margin-top: 0; }
.ib-vorlagenband > .container > *:last-child  { margin-bottom: 0; }
.ib-vorlagenband p, .ib-vorlagenband ul, .ib-vorlagenband ol { max-width: 82ch; }
.ib-vorlagenband .wrapper, .ib-vorlagenband .seitenbild_wrap { max-width: 820px; margin-inline: auto; }

/* =========================================================================
   Kostenuebersicht
   Die Gliederung war im Inhalt schon angelegt (Ueberschrift je Gruppe, Leistung und
   Betrag je Absatz), nur sichtbar war sie nicht - alles lief als Fliesstext unter-
   einander. Jetzt steht die Leistung links, der Betrag rechts, in Gruppen gefasst.
   ========================================================================= */
.ib-kostenliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.ib-kostengruppe {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.5rem;
}
.grund-weiss .ib-kostengruppe { background: var(--grund); }
.ib-kostengruppe h3 { margin: 0 0 .9rem; font-size: 1.08rem; color: var(--marine); }
.ib-preisliste { margin: 0; }
.ib-preiszeile {
  display: grid; grid-template-columns: 1fr auto; gap: .6rem 1.2rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px dotted var(--linie-kraeftig);
}
.ib-preiszeile:last-child { border-bottom: 0; padding-bottom: 0; }
.ib-preiszeile dt { margin: 0; font-size: .96rem; line-height: 1.45; }
.ib-preiszeile dd {
  margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--marine);
  white-space: nowrap; text-align: right; font-size: .95rem;
}
.ib-preisnotiz { font-size: .92rem; color: var(--leise); margin: .8rem 0 0; line-height: 1.55; max-width: none; }
.ib-preisnotiz + .ib-preisliste { margin-top: .8rem; }
.ib-preisfuss { font-size: .93rem; color: var(--leise); margin-top: 1.6rem; max-width: 78ch; }
/* Die Gesamtkosten stehen am Ende und tragen die laengsten Bezeichnungen - sie bekommen
   die volle Breite, damit die Betraege nicht an den Text gedraengt werden. */
.ib-kostengruppe:last-child { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .ib-kostenliste { grid-template-columns: 1fr; }
  .ib-preiszeile { grid-template-columns: 1fr; }
  .ib-preiszeile dd { text-align: left; }
}
/* Kurzer Zwischentitel innerhalb einer Kostengruppe ("Knochenaufbau" ueber mehreren
   Varianten). Er stand im Altbestand als eigene Zeile vor den Posten. */
.ib-preismarke { margin: 1rem 0 .2rem; font-weight: 600; color: var(--marine); font-size: .97rem; max-width: none; }
.ib-preismarke:first-child { margin-top: 0; }

/* =========================================================================
   Bildergalerie
   Der Baustein war im Design 90 nicht formatiert - die Bilder standen deshalb
   untereinander in voller Bahnbreite, ein einzelnes Motiv fuellte die halbe Seite.
   Eine Lightbox ist nicht eingebunden; ein Klick oeffnet das Bild in voller Groesse,
   das genuegt und spart eine weitere Bibliothek.
   ========================================================================= */
/* Die Galerie steht im Inhaltsbereich und damit bereits in der Bahn - sie bekommt
   deshalb keine eigene Breitenbegrenzung, sonst waere sie zweimal eingerueckt. */
.galerie { padding: clamp(1.8rem, 3.5vw, 2.8rem) 0 0; }
.galerie .section-header { margin-bottom: 1.2rem; max-width: none; }
.galerie .section-header h2 { margin: 0; }
.galerie-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  max-width: none !important; width: 100%;
}
.galerie-item {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--linie); background: var(--flaeche); line-height: 0;
}
.galerie-bild { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.galerie-overlay {
  position: absolute; inset: 0; background: rgba(34,41,85,0);
  transition: background .15s;
}
.galerie-item:hover { border-color: var(--blau); }
.galerie-item:hover .galerie-overlay { background: rgba(34,41,85,.12); }
@media (max-width: 860px) { .galerie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .galerie-grid { grid-template-columns: 1fr; } }


/* =========================================================================
   Karte auf der Praxisseite
   Leaflet liegt im Haus (openmaps/), die Kacheln kommen ueber den eigenen
   Zwischenspeicher openmaps/tiles.php - der Browser des Besuchers spricht also nicht
   mit einem fremden Kartendienst.
   ========================================================================= */
.ib-karte {
  height: clamp(260px, 34vw, 380px); width: 100%;
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  background: var(--blau-hell);
  /* Leaflet vergibt intern z-index bis 1000 - Kacheln 200, Marker 600,
     Sprechblase 700, Bedienelemente 800. Der Kopfbereich liegt bei 40 und
     waere damit beim Scrollen von der Karte ueberdeckt worden.

     position + z-index machen aus der Karte einen eigenen Stapelbereich:
     alles darin bleibt unterhalb dieser einen Zahl, egal wie hoch Leaflet
     intern zaehlt. Eine Zahl am Kopf hochzudrehen haette nur so lange
     gehalten, bis die naechste Bibliothek eine noch hoehere waehlt. */
  position: relative;
  z-index: 0;
}
/* Leaflet setzt eigene Schriftgroessen; die Bedienknoepfe sollen zum Design passen. */
.ib-karte .leaflet-control-zoom a {
  color: var(--marine); font-weight: 700; border-radius: var(--radius-klein);
}
.ib-karte .leaflet-control-zoom a:hover { background: var(--blau-hell); color: var(--blau); }
.ib-karte .leaflet-bar { border: 1px solid var(--linie-kraeftig); box-shadow: var(--schatten); }
.ib-karte .leaflet-popup-content { font: 400 .95rem/1.55 var(--sans); color: var(--text); margin: .8rem 1rem; }
.ib-karte .leaflet-popup-content strong { font-family: var(--serif); color: var(--marine); font-size: 1.02rem; }
.ib-karte .leaflet-popup-content a { color: var(--blau); }
.ib-karte .leaflet-container { font-family: var(--sans); }

/* =========================================================================
   Bildschirmfoto der Praxis-Internetseite
   ========================================================================= */
/* Bild links, Text rechts. Ueber die ganze Spaltenbreite war die Aufnahme das
   schwerste Element der Seite, obwohl sie der Nebenschauplatz ist. */
.ib-webvorschau-raster {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}
a.ib-webvorschau {
  display: block; border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; line-height: 0; transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.ib-webvorschau:hover { border-color: var(--blau); box-shadow: var(--schatten); transform: translateY(-2px); }

/* 16:9. Die Aufnahmen entstehen in genau diesem Verhaeltnis, der Ausschnitt
   schneidet also nichts weg - object-fit steht nur als Rueckfall fuer die
   Altbestaende, die noch 800 x 640 sind. */
a.ib-webvorschau img {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  margin: 0; border-radius: 0;
  object-fit: cover; object-position: top center;
}

.ib-webvorschau-text { min-width: 0; }
.ib-weburl { margin: 0 0 .5rem; font-weight: 600; word-break: break-word; }
.ib-weburl a { color: var(--blau); }

@media (max-width: 620px) {
  .ib-webvorschau-raster { grid-template-columns: 1fr; gap: .9rem; }
}
}

/* =========================================================================
   Trefferkarte der Arztsuche
   Sitzt wie die Suchkarte der Startseite in der Buehne und ueberlappt deren Unterkante.
   Die Nadeln tragen die laufende Nummer des Eintrags in der Liste darunter.
   ========================================================================= */
/* Weniger Ueberlappung als bei der Suchkarte der Startseite: der Kopf der Trefferseite ist
   die flache Variante, ein Ueberstand von 72 Pixeln verdeckte dort die zweite Zeile des
   Vorspanns. */
.ib-buehne-karte { margin-top: clamp(-34px, -2.5vw, -18px); position: relative; z-index: 5; }
.ib-kartenkarte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten-tief); padding: 1rem 1rem .9rem;
}
.ib-karte-treffer { height: clamp(300px, 40vw, 460px); }
.ib-kartenhinweis { margin: .8rem .3rem 0; font-size: .9rem; color: var(--leise); max-width: none; }

/* Nadel: ein Tropfen mit der Nummer darin. Als divIcon gebaut - so braucht es keine
   hundert vorbereiteten Bilddateien wie im Altauftritt, und die Farbe kommt aus dem Design.
   Der Tropfen entsteht durch eine um 45 Grad gedrehte Form mit drei runden Ecken; die Zahl
   darin wird gegengedreht, sonst stuende sie schraeg. */
.ib-stift { background: none; border: 0; }
.ib-stift-tropfen {
  display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--blau); border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(28, 32, 51, .45);
}
.ib-stift-tropfen > i {
  transform: rotate(45deg); font: 700 13px/1 var(--sans); font-style: normal; color: #fff;
}
.leaflet-marker-icon.ib-stift:hover .ib-stift-tropfen { background: var(--marine); }

.ib-popup-km { color: var(--leise); font-size: .9rem; }
.ib-popup-knoepfe { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
/* Kleine Fassung der Schaltflaeche - in einer Sprechblase von 280 Pixeln waere die
   normale zu wuchtig. */
.btn-klein, a.btn-klein { padding: .5rem .9rem; font-size: .88rem; border-radius: var(--radius-klein); }
/* In der Sprechblase faerbt eine allgemeine Regel alle Verweise blau. Auf der blauen
   Schaltflaeche stand die Beschriftung dadurch blau auf blau, also unsichtbar. */
.ib-karte .leaflet-popup-content a.btn { color: #fff; text-decoration: none; }
.ib-karte .leaflet-popup-content a.btn:hover { color: #fff; }
.ib-karte .leaflet-popup-content a.btn-linie { color: var(--blau); }
.ib-karte .leaflet-popup-content a.btn-linie:hover { color: #fff; }



/* Rueckweg aus einem Eintrag in die Trefferliste. Steht ganz oben im Eintrag und
   erscheint nur, wenn im Seitenbesuch wirklich eine Suche gelaufen ist. */
.ib-zurueck { margin: 0 0 1.4rem; }
.ib-zurueck a {
  display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .6rem 1.1rem; border: 1px solid var(--linie-kraeftig); border-radius: 999px;
  background: var(--flaeche); color: var(--marine); font-weight: 600; font-size: .95rem;
  text-decoration: none; transition: border-color .15s, background .15s;
}
.ib-zurueck a:hover { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); }
.ib-zurueck-zusatz { font-weight: 400; color: var(--leise); font-size: .9rem; }

/* =========================================================================
   "Das Wichtigste auf einen Blick"
   Steht als vorletzter Abschnitt jeder Themenseite. Fuer Leser die Kurzfassung, fuer
   Suchsysteme der Absatz, aus dem sie zitieren. Deshalb bewusst als Liste kurzer,
   fuer sich verstaendlicher Saetze - jeder Punkt muss auch ohne die anderen tragen.
   ========================================================================= */
.ib-wichtigstes { padding: clamp(2.6rem, 5.5vw, 4.4rem) 0; }
.ib-wichtigstes-karte {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem;
  background: var(--blau-hell); border: 1px solid #cfe0f0; border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem);
}
.ib-wichtigstes-zeichen {
  width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--blau); color: #fff; font: 700 1.3rem/1 var(--serif);
}
.ib-wichtigstes h2 { margin: .1rem 0 1rem; font-size: clamp(1.3rem, 2.4vw, 1.62rem); }
.ib-wichtigstes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; max-width: 78ch; }
.ib-wichtigstes li { position: relative; padding-left: 1.6rem; line-height: 1.6; margin: 0; }
.ib-wichtigstes li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--blau);
}
@media (max-width: 620px) {
  .ib-wichtigstes-karte { grid-template-columns: 1fr; gap: .9rem; }
}

/* =========================================================================
   FAQ-Abschnitt
   Letzter Abschnitt jeder Themenseite. Die Fragen stehen so da, wie Menschen sie
   stellen - das ist keine Stilfrage, sondern der Grund, warum ein Suchsystem sie als
   Antwort auf eine echte Nutzerfrage wiederfindet.
   ========================================================================= */
.faq-section { padding: clamp(2.6rem, 5.5vw, 4.4rem) 0; background: var(--grund); }
.faq-section > .container { padding-block: 0; }
.faq-section .section-header { margin-bottom: 1.4rem; }
.faq-section .section-header h2 { margin: 0; }

/* =========================================================================
   Autorenseite (/autor.html)
   Der Baustein bringt Klassen aus dem Baukasten mit, die es im Design 90 nicht gibt -
   ohne Regeln blieb vom Bild ein roter Kreis uebrig und der Kasten trug einen roten
   Rand. Hier bekommen die Klassen die Gestalt des Implantatberaters.
   ========================================================================= */
.autor-block { padding: clamp(2.2rem, 4.5vw, 3.4rem) 0; }
.autor-profile__header {
  display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 2.6rem); align-items: start;
}
.autor-profile__left {
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.4rem; text-align: center;
}
.autor-profile__photo, .autor-profile__avatar {
  width: 100%; max-width: 180px; aspect-ratio: 1; margin: 0 auto .9rem;
  border-radius: 50%; overflow: hidden; background: var(--blau-hell);
  display: grid; place-items: center;
}
.autor-profile__photo img, .autor-profile__avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0;
}
/* Ohne hinterlegtes Foto liefert der Baustein ein leeres Platzhalterbild. Statt einer
   leeren Flaeche stehen dort die Initialen - das wirkt gewollt, nicht kaputt. */
.autor-profile__photo img[src$="leer.gif"], .autor-profile__avatar img[src$="leer.gif"] { display: none; }
.autor-profile__photo::after, .autor-profile__avatar::after {
  content: "\2014"; font: 400 2rem/1 var(--serif); color: var(--blau); opacity: .3;
}
.autor-profile__photo:has(img:not([src$="leer.gif"]))::after,
.autor-profile__avatar:has(img:not([src$="leer.gif"]))::after { content: none; }
.autor-profile__content > h1, .autor-profile__content > h2:first-child { margin-top: 0; }
.autor-profile__credentials { color: var(--leise); margin: .2rem 0 1.2rem; font-size: 1.02rem; }
.autor-profile__list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.autor-profile__list li { position: relative; padding-left: 1.4rem; margin: 0; }
.autor-profile__list li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: .45rem; height: .45rem;
  border-radius: 50%; background: var(--blau);
}
.autor-profile__social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.autor-profile__social a { color: var(--blau); font-weight: 600; }
.summary-box {
  background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--blau);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; margin: 1.4rem 0;
}
.summary-box__header { font-weight: 600; color: var(--marine); margin-bottom: .5rem; }
.summary-box h2 { font-size: 1.2rem; margin: .8rem 0 .5rem; }
.summary-box h2:first-of-type { margin-top: 0; }
.section--tinted { background: var(--grund); }
/* Der Knopf steht in autor-profile__left, nicht in autor-block - deshalb beide Wege. */
a.btn--outline, a.btn--sm, .autor-profile__left a.btn {
  display: inline-block; padding: .6rem 1.2rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie-kraeftig); background: var(--flaeche); color: var(--marine);
  text-decoration: none; font-weight: 600; font-size: .93rem;
}
a.btn--outline:hover, a.btn--sm:hover, .autor-profile__left a.btn:hover {
  border-color: var(--blau); background: var(--blau-hell); color: var(--blau);
}
.autor-block i[class^="fa"], .autor-block i[class*=" fa"] { display: none; }
@media (max-width: 760px) {
  .autor-profile__header { grid-template-columns: 1fr; }
  .autor-profile__left { max-width: 260px; }
}

/* ---------------------------------------------------------------------------
   FAQ-Gesamtuebersicht
   Das Themenband am Seitenende benutzt die Klassen von "Diese Rubrik im
   Ueberblick" (.verwandte-themen-*) - derselbe Zweck, dieselbe Gestalt, kein
   zweites Aussehen fuer dieselbe Sache. Hier bleibt nur, was dort fehlt.
   --------------------------------------------------------------------------- */

/* Beim Sprung soll die Ueberschrift nicht unter dem Kopfbereich verschwinden. */
.faq-section h2.faq-rubrik {
  scroll-margin-top: 110px;
  margin-top: 46px;
}

/* =========================================================================
   Suche
   ========================================================================= */

/* --- Eingabefeld in der Laenderleiste ------------------------------------
   Sitzt zwischen Laenderwahl und Servicelinks. Die Laenderleiste ist flex mit
   justify-content:flex-end; das margin-right:auto wandert deshalb von
   .ib-laender hierher, sonst kleben Suche und Dienste als ein Block rechts. */
.ib-laender { margin-right: 0 !important; }
.ib-suchform {
  display: flex; align-items: center; gap: 0;
  margin-right: auto;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 99px;
  overflow: hidden;
  transition: background .15s, border-color .15s, width .2s;
}
.ib-suchform:focus-within {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.34);
}
.ib-suchform input {
  width: 132px;
  background: transparent; border: 0; outline: 0;
  color: #fff; font: 500 13px/1 var(--sans);
  padding: 6px 4px 6px 14px;
  transition: width .2s;
}
/* Beim Tippen mehr Platz - im Ruhezustand soll das Feld nicht auffallen. */
.ib-suchform:focus-within input { width: 208px; }
.ib-suchform input::placeholder { color: #98a2c0; }
/* Das Kreuzchen, das Chrome und Safari in Suchfelder setzen, passt nicht in
   die dunkle Leiste - es erscheint als heller Kasten. */
.ib-suchform input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ib-suchform button {
  background: transparent; border: 0; cursor: pointer;
  color: #cdd3e6; padding: 6px 13px 6px 8px; line-height: 1;
  font-size: 13px;
}
.ib-suchform button:hover, .ib-suchform button:focus { color: #fff; }

/* Nur fuer Vorleseprogramme: die Beschriftung, die sehend niemand braucht,
   weil der Platzhalter dasselbe sagt. */
.ib-nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Ergebnisseite ------------------------------------------------------- */
.ib-suchseite { max-width: 780px; }
.ib-suchseite-form { margin: 0 0 2.4rem; }
.ib-suchseite-form label {
  display: block; font-size: .84rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--leise); margin-bottom: .5rem;
}
.ib-suchseite-zeile { display: flex; gap: .7rem; }
.ib-suchseite-zeile input {
  flex: 1 1 auto; min-width: 0;
  padding: .8rem 1rem; font: 400 1rem/1.4 var(--sans);
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--marine);
}
.ib-suchseite-zeile input:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }

.ib-suchzahl { color: var(--leise); margin: 0 0 1.4rem; }
.ib-suchliste { list-style: none; margin: 0; padding: 0; }
.ib-suchtreffer { padding: 1.3rem 0; border-top: 1px solid var(--linie); }
.ib-suchtreffer:first-child { border-top: 0; padding-top: 0; }
.ib-suchtreffer-art {
  margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--leise);
}
.ib-suchtreffer h2 { font-size: 1.14rem; margin: 0 0 .45rem; }
.ib-suchtreffer h2 a { color: var(--marine); text-decoration: none; }
.ib-suchtreffer h2 a:hover { color: var(--blau); text-decoration: underline; }
.ib-suchtreffer-text { margin: 0; color: var(--leise); line-height: 1.65; }
.ib-suchtreffer-mehr { margin: .5rem 0 0; }
.ib-suchtreffer-mehr a {
  color: var(--blau); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.ib-suchtreffer-mehr a:hover, .ib-suchtreffer-mehr a:focus { text-decoration: underline; }
.ib-suchtreffer-mehr span { display: inline-block; transition: transform .15s; }
.ib-suchtreffer:hover .ib-suchtreffer-mehr span { transform: translateX(3px); }
.ib-suchtreffer mark { background: #fff2b8; color: inherit; padding: 0 .1em; border-radius: 2px; }
.ib-suchhinweis { color: var(--leise); line-height: 1.7; }

@media (max-width: 820px) {
  /* Auf schmalen Geraeten wandert die Leiste in die Mitte und das Feld
     nimmt die volle Breite - dort ist Zurueckhaltung fehl am Platz. */
  .ib-suchform { margin-right: 0; order: 10; flex: 1 1 100%; }
  .ib-suchform input, .ib-suchform:focus-within input { width: 100%; }
}

/* Die weisse Suchkarte ragt aus der Buehne heraus und lag mit ihrer unteren
   Haelfte auf dem weissen MAIN - dadurch entstand zwischen Buehne und dem
   Abschnitt "Die fuenf Fragen" ein weisser Streifen, der die obere
   Seitenhaelfte in mehr Streifen zerlegte, als sie Themen hat.

   Der Streifen bekommt jetzt denselben Papierton wie der Abschnitt darunter,
   sodass die weisse Karte darauf liegt statt darin zu verschwinden - so wie
   im freigegebenen Entwurf.

   Der Startpunkt ist genau die Unterkante der Buehne: die Karte wird ueber
   margin-top: clamp(-72px, -6vw, -40px) nach oben gezogen, also endet die
   Buehne clamp(40px, 6vw, 72px) unterhalb des Kartenanfangs. Dieselbe Formel,
   nur mit umgekehrtem Vorzeichen - laeuft die eine, laeuft auch die andere. */
.ib-buehne-suche::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: clamp(40px, 6vw, 72px);
  /* Bis unter den Aussenabstand der Karte: dessen 2rem fallen aus dem
     Umschlag heraus (Rand-Kollaps) und blieben sonst als weisser Streifen
     zwischen zwei Papierflaechen stehen. Der Wert haengt an
     .ib-suchkarte { margin-bottom: 2rem } - aendert sich der eine, muss der
     andere mit. */
  bottom: -2rem;
  background: var(--grund);
  z-index: -1;
}

/* =========================================================================
   Symbole
   Font Awesome wird auf dieser Seite gar nicht geladen - die <i class="fa ...">
   im Quelltext blieben deshalb unsichtbar: die Sprechblasen an der
   Sprachauswahl, die Lupe im Suchfeld und die Pfeile auf den Themenkarten.

   Statt die ganze Bibliothek nachzuruesten (rund 100 KB samt Schriftdateien
   fuer vier Symbole) sind die vier hier als Maske hinterlegt. Vorteile: keine
   zusaetzliche Anfrage, keine fremde Quelle, und die Symbole nehmen ueber
   currentColor automatisch die Textfarbe an.

   Die Schreibweise im Quelltext bleibt unveraendert, damit nichts angefasst
   werden muss. Symbole, die hier nicht stehen, bleiben unsichtbar wie bisher -
   sie kommen auf den ausgelieferten Seiten auch nicht vor.
   ========================================================================= */
/* Nur die vier Symbole ansprechen, die auch hinterlegt sind. Eine allgemeine
   Regel auf alle .fa-Elemente waere spezifischer als die Einzelregeln darunter
   gewesen und haette deren Masken ueberschrieben - uebrig blieben gefuellte
   Kaestchen. Symbole ohne Maske bleiben so unangetastet und damit unsichtbar
   wie bisher. */
.fa-search, .fa-comments, .fa-arrow-right, .fa-arrow-up {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

.fa-search {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>');
}
.fa-comments {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.8 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.8 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z"/></svg>');
}
.fa-arrow-right {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>');
}
.fa-arrow-up {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>');
}

/* =========================================================================
   Seitenmenue des Rubrikzweigs

   Zeigt auf jeder Unterseite, wo man steht und was daneben liegt. Vorher war
   beides nur ueber das Klappmenue zu ahnen; wer ueber die Suche einstieg, sah
   eine Seite ohne Zusammenhang.

   Das Raster haengt an :has() - ohne Menue bleibt der Inhalt einspaltig, es
   entsteht keine leere Spalte. Auf schmalen Fenstern wandert das Menue ueber
   den Text, statt ihn auf ein Drittel zu quetschen.
   ========================================================================= */
.ib-bahn:has(> .ib-seitenmenue) {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}
.ib-seitenmenue { position: sticky; top: 1.5rem; font-size: .95rem; }
.ib-seitenmenue ul { list-style: none; margin: 0; padding: 0; }
.ib-seitenmenue li { margin: 0; }
.ib-seitenmenue a {
  display: block; padding: .42rem .7rem; border-radius: var(--radius-klein);
  color: var(--text); text-decoration: none; border-left: 2px solid transparent;
}
.ib-seitenmenue a:hover { background: var(--blau-hell); color: var(--blau); }

/* Ebene 1: die Wurzel des Zweigs, als Ueberschrift gesetzt. */
.ib-menue-e1 > a {
  font: 600 1.02rem/1.3 var(--serif); color: var(--marine);
  padding-left: 0; margin-bottom: .4rem; border-bottom: 1px solid var(--linie);
  border-radius: 0; padding-bottom: .5rem;
}
.ib-menue-e2 > a { padding-left: .7rem; }
.ib-menue-e3 > a { padding-left: 1.6rem; font-size: .92rem; color: var(--leise); }

/* Der Ast, in dem man steht, und die Seite selbst. */
.ib-menue-offen > a { font-weight: 600; color: var(--marine); }
.ib-menue-hier > a {
  background: var(--blau-hell); color: var(--blau); font-weight: 600;
  border-left-color: var(--blau);
}

@media (max-width: 900px) {
  .ib-bahn:has(> .ib-seitenmenue) { grid-template-columns: 1fr; }
  .ib-seitenmenue { position: static; margin-bottom: 1.4rem; }
  .ib-menue-e3 { display: none; }   /* auf dem Telefon nur bis zur Rubrik */
}

/* Oben buendig: das Seitenmenue beginnt am oberen Rand, der Inhalt daneben
   brachte ueber sein erstes .container-Element einen eigenen Innenabstand mit
   (main .container { padding-block: … }). Dadurch stand die Ueberschrift
   deutlich tiefer als das Menue. Nur der Abstand NACH OBEN faellt weg, der
   nach unten bleibt - sonst klebten die Abschnitte aneinander. */
/* Der Abstand sitzt nicht immer am ersten Kind: die Abschnitte sind
   verschachtelt (ib-vorlagenband > container > bildspalten-section), und der
   Innenabstand haengt am innersten. Deshalb die ersten drei Glieder der Kette. */
.ib-bahn:has(> .ib-seitenmenue) .ib-spalte-inhalt > *:first-child,
.ib-bahn:has(> .ib-seitenmenue) .ib-spalte-inhalt > *:first-child > *:first-child,
.ib-bahn:has(> .ib-seitenmenue) .ib-spalte-inhalt > *:first-child > *:first-child > *:first-child
  { margin-top: 0; padding-top: 0; }
.ib-bahn:has(> .ib-seitenmenue) .ib-spalte-inhalt > *:first-child > .container,
.ib-bahn:has(> .ib-seitenmenue) .ib-spalte-inhalt > .container:first-child { padding-top: 0; }
.ib-bahn:has(> .ib-seitenmenue) .ib-spalte-inhalt > *:first-child :is(h1,h2,h3):first-child { margin-top: 0; }