/* QM-Praxiswerk, Stylesheet. Schrift: IBM Plex Sans (SIL Open Font License). */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/schrift/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/schrift/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/schrift/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
/* QM-Praxiswerk, Schwester von KI-Praxiswerk. Gleiche Bauweise, umgekehrte Gewichtung der Logofarben:
   Petrol trägt die großen Flächen (Kopf, Preise, Abschluss), Nachtblau setzt Schrift, Kernangebot und Fuß.
   Erkennungszeichen ist die Ampel aus dem System-Check (Rot, Gelb, Grün), nie ohne Wort daneben. */
:root {
  --ink: #0F172A;
  --petrol: #264253;
  --petrol-tief: #1B3341;
  --stahl: #52707E;
  --grau: #9DB8C2;
  --grau-lesen: #B3CAD2;
  --text: #3E4A58;
  --flaeche: #EDF2F4;
  --linie: #D5DFE3;
  --weiss: #FFFFFF;
  --leise: #556574;
  --ampel-rot: #C8463D;
  --ampel-gelb: #B57A0E;
  --ampel-gruen: #2F8A5B;
  --ampel-rot-hell: #F2907F;
  --ampel-gelb-hell: #F2C65A;
  --ampel-gruen-hell: #7DD3A3;
  --aus: cubic-bezier(0, 0, .3, 1);
  --breite: 1200px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.62 'IBM Plex Sans', system-ui, sans-serif; color: var(--text); background: var(--weiss); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { color: var(--ink); font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
@media (min-width: 1600px) { :root { --breite: 1360px; } }
.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.zweiton { display: block; color: var(--stahl); }
.dunkel .zweiton { color: var(--grau); }
.marke { display: inline-flex; align-items: center; gap: .55rem; font-size: .875rem; font-weight: 500; color: var(--ink); letter-spacing: .01em; }
.marke::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--petrol); }
.dunkel .marke { color: var(--grau-lesen); }
.dunkel .marke::before { background: var(--grau); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
.dunkel :focus-visible, .held :focus-visible, .band :focus-visible, .fuss :focus-visible, .schluss__karte :focus-visible, .normen :focus-visible, .seitenkopf :focus-visible { outline-color: var(--weiss); }
.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--ink); color: var(--weiss); padding: .75rem 1rem; border-radius: 6px; text-decoration: none; font-weight: 500; }
.sprung:focus { top: 1rem; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .85rem 1.5rem; border-radius: 6px; font: 500 1rem/1.2 inherit; font-family: inherit; text-decoration: none; transition: background-color .25s var(--aus), color .25s var(--aus), box-shadow .3s var(--aus), transform .3s var(--aus); }
.knopf--petrol { background: var(--petrol); color: var(--weiss); }
.knopf--petrol:hover { background: var(--petrol-tief); box-shadow: 0 14px 28px -14px rgba(26, 51, 64, .7); transform: translateY(-1px); }
.knopf--weiss { background: var(--weiss); color: var(--ink); }
.knopf--weiss:hover { background: #E6EDEF; transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); }
.knopf:active { transform: scale(.985); transition-duration: .08s; }
.pfeil-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; text-decoration: none; }
.pfeil-link svg { transition: transform .35s var(--aus); }
.pfeil-link:hover svg { transform: translateX(4px); }
.pfeil-link:hover span { text-decoration: underline; text-underline-offset: .25em; }

/* Kopfzeile */
.kopf { position: relative; z-index: 5; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 76px; }
.kopf__logo img { height: 22px; width: auto; }
.kopf nav .nav { display: flex; align-items: center; gap: 2rem; }
.kopf nav a { text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--ink); padding: .5rem 0; border-bottom: 2px solid transparent; transition: border-color .25s var(--aus); }
.kopf nav a:hover { border-bottom-color: var(--petrol); }
.kopf .knopf { min-height: 2.75rem; padding: .6rem 1.15rem; font-size: .95rem; }
.menueknopf { display: none; }

/* Held */
.held { position: relative; color: var(--weiss); background: var(--petrol); overflow: hidden; }
.held__bild { position: absolute; inset: 0; }
.held__bild img { position: absolute; top: 0; left: 0; width: 124%; max-width: none; height: 100%; object-fit: cover; object-position: 0 44%; }
/* Große Bildschirme: Bild weniger stark vergrößern, damit beide Personen ganz im Bild bleiben */
@media (min-width: 1600px) { .held__bild img { width: 110%; } }
.held__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(38, 66, 83, .96) 0%, rgba(38, 66, 83, .86) 36%, rgba(38, 66, 83, .4) 56%, rgba(38, 66, 83, .08) 70%, rgba(38, 66, 83, 0) 82%), linear-gradient(0deg, rgba(27, 51, 65, .6) 0%, rgba(27, 51, 65, 0) 42%); }
.held .huelle { position: relative; min-height: clamp(620px, 86vh, 840px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 7rem; padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.held__kennung { font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .92); margin-bottom: 1.5rem; }
.held h1 { color: var(--weiss); font-weight: 400; font-size: clamp(3rem, 6.2vw, 5.75rem); line-height: 1; letter-spacing: -.03em; max-width: 6.5em; }
.held h1 span { color: var(--grau); }
.held__text { max-width: 32rem; margin-top: 1.75rem; font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.held__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; }
.held__aktion .pfeil-link { color: var(--weiss); min-height: 3.25rem; }
.held__belege { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.5rem; }
.held__belege li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem .45rem .7rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; font-size: .875rem; color: rgba(255, 255, 255, .9); background: rgba(27, 51, 65, .3); }
.held__belege svg { flex: none; color: var(--grau); }

/* Normleiste */
.normen { background: var(--petrol-tief); border-top: 1px solid rgba(255, 255, 255, .08); }
.normen ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .75rem 3rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.normen li { font-size: 1rem; font-weight: 500; color: var(--grau-lesen); white-space: nowrap; letter-spacing: .01em; }
.normen a { display: inline-block; padding: .15rem 0; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(179, 202, 210, .32); transition: color .25s var(--aus), border-color .25s var(--aus); }
.normen a:hover { color: var(--weiss); border-bottom-color: currentColor; }

/* Abschnitte */
.abschnitt { padding: clamp(5rem, 10vw, 8.5rem) 0; }
.abschnitt--flaeche { background: var(--flaeche); }
.dunkel { background: var(--petrol-tief); color: rgba(255, 255, 255, .8); }
.dunkel h2, .dunkel h3 { color: var(--weiss); }
h2 { font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -.022em; overflow-wrap: break-word; hyphens: auto; }
.kopfzeile { display: grid; gap: 1.25rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }

/* Ausgangslage */
.lage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: start; }
.lage p { font-size: 1.125rem; max-width: 30rem; }
.lage__text p + p { margin-top: 1rem; }
.wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); align-items: stretch; }
.weg { background: var(--flaeche); border-radius: 12px; padding: 2rem 1.75rem 1.75rem; min-height: 15rem; display: flex; flex-direction: column; }
.weg h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 500; margin-bottom: .85rem; }
.weg p { font-size: 1rem; }
.weg .norm { margin-top: auto; padding-top: 1.5rem; font-size: .875rem; font-weight: 500; color: var(--stahl); }

/* Vorgehen (dunkel) */
.vorgehen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem 5rem; align-items: center; }
.vorgehen h2 { font-size: clamp(2rem, 3.3vw, 3rem); }
.schritte { margin-top: 2.75rem; position: relative; }
.schritte li { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1.1rem; padding-bottom: 1.9rem; }
.schritte li:not(:last-child)::before { content: ""; position: absolute; left: calc(1.125rem - .5px); top: 2.4rem; bottom: .3rem; width: 1px; background: rgba(255, 255, 255, .18); }
.schritte .nr { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(143, 168, 179, .6); color: var(--grau); display: grid; place-items: center; font-size: .9rem; font-weight: 500; }
.schritte li:first-child .nr { background: var(--grau); color: var(--ink); border-color: var(--grau); }
.schritte h3 { font-size: 1.25rem; font-weight: 500; margin: .35rem 0 .4rem; }
.schritte p { font-size: 1rem; max-width: 27rem; }
.bildkarte { position: relative; }
.bildkarte > img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: 12px; }
.eintrag { margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .22); font-size: .9375rem; color: rgba(255, 255, 255, .78); }
.eintrag__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; }
.eintrag__titel { font-weight: 500; font-size: 1rem; color: var(--weiss); }
.eintrag__marke { font-size: .875rem; color: var(--grau); }
.eintrag dl { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.eintrag dt, .eintrag dd { padding: .6rem 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.eintrag dt { color: rgba(255, 255, 255, .66); padding-right: 1.5rem; }
.eintrag dd { text-align: right; color: var(--weiss); }

/* Leistungen: Kernangebot und Übersicht */
.kern { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 4.5rem; padding: clamp(2rem, 4.5vw, 3.5rem); border-radius: 14px; background: var(--petrol-tief); color: rgba(255, 255, 255, .84); background-image: radial-gradient(110% 100% at 0% 0%, rgba(38, 66, 83, .95), rgba(38, 66, 83, 0) 62%); }
.kern__kopf { min-width: 0; }
.kern__art { font-size: .9rem; font-weight: 500; color: var(--grau-lesen); }
.kern h3 { margin: .6rem 0 0; font-size: clamp(1.55rem, 2.3vw, 1.85rem); line-height: 1.15; letter-spacing: -.015em; font-weight: 400; }
.kern h3 a { color: var(--weiss); text-decoration: none; }
.kern h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.kern__text { margin-top: 1rem; font-size: 1.05rem; max-width: 26rem; }
.kern__preis { margin-top: 1.75rem; color: var(--weiss); font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kern__preis small { display: block; margin-top: .55rem; font-size: .95rem; letter-spacing: 0; line-height: 1.45; color: rgba(255, 255, 255, .84); }
.kern__preis small + small { margin-top: .15rem; }
.kern .pfeil-link { margin-top: 1.75rem; color: var(--weiss); min-height: 2.75rem; }
.kern :focus-visible { outline-color: var(--weiss); }
.kern__norm { margin-top: 1.5rem; font-size: .85rem; font-weight: 500; color: var(--grau-lesen); }
.kern__titel { font-size: .9rem; font-weight: 500; color: var(--grau-lesen); }
.kern__inhalt ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.25rem; margin-top: .4rem; }
.kern__inhalt li { padding: 1.15rem 0 1.25rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .975rem; line-height: 1.55; }
.kern__inhalt strong { display: block; margin-bottom: .3rem; color: var(--weiss); font-weight: 500; font-size: 1.05rem; }
.weiter-titel { margin-top: clamp(3.25rem, 6vw, 4.5rem); font-size: 1.25rem; font-weight: 500; }
.angebote { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 2rem; margin-top: 1.25rem; }
.angebote li { position: relative; display: flex; flex-direction: column; padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.angebote h4 { margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.angebote h4 a { text-decoration: none; }
.angebote h4 a::after { content: ""; position: absolute; inset: 0; }
.angebote li:hover h4 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.angebote li > p { margin-top: .55rem; font-size: .975rem; }
.angebote li > .angebote__preis { margin-top: auto; padding-top: 1.1rem; color: var(--ink); font-size: 1.1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.angebote__preis small { display: block; margin-top: .15rem; font-size: .875rem; font-weight: 400; color: var(--leise); }
.angebote__fuss { margin-top: 2rem; font-size: .9rem; color: var(--leise); }
.angebote__fuss a { color: var(--petrol); text-underline-offset: .2em; }
.weitere { margin-top: clamp(3.5rem, 6vw, 4.5rem); border-top: 1px solid var(--linie); }
.weitere a { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 11rem; gap: 1rem 2rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.weitere em { text-align: right; transition: color .25s var(--aus); }
.weitere a:hover em { color: var(--petrol); }
.weitere a:hover strong { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.weitere strong { color: var(--ink); font-weight: 500; font-size: 1.25rem; }
.weitere span { font-size: 1rem; }
.weitere em { font-style: normal; font-size: .875rem; font-weight: 500; color: var(--stahl); white-space: nowrap; }

/* Fotoband */
.band { position: relative; color: var(--weiss); overflow: hidden; background: var(--petrol-tief); }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 51, 65, .94) 0%, rgba(27, 51, 65, .74) 42%, rgba(27, 51, 65, .12) 76%); }
.band .huelle { position: relative; z-index: 1; min-height: clamp(460px, 62vh, 620px); display: flex; flex-direction: column; justify-content: center; }
.band h2 { color: var(--weiss); max-width: 12em; }
.band p { max-width: 30rem; margin-top: 1.4rem; color: rgba(255, 255, 255, .86); font-size: 1.1rem; }
.band .pfeil-link { margin-top: 2rem; color: var(--weiss); }

/* Preise */
.stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.stufe { padding: 2.25rem 2rem 2.5rem; display: flex; flex-direction: column; }
.stufe + .stufe { border-left: 1px solid var(--linie); }
.stufe--mitte { background: var(--petrol); color: rgba(255, 255, 255, .84); background-image: radial-gradient(130% 90% at 50% 0%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 65%); }
.stufe--mitte h3, .stufe--mitte .preis { color: var(--weiss); }
.stufe h3 { font-size: 1.25rem; font-weight: 500; }
.stufe .preis { margin: 1.25rem 0 1rem; color: var(--ink); font-size: 2.25rem; line-height: 1; font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stufe--mitte .preis, .stufe--mitte .preis span { color: var(--weiss); }
.stufe .preis small { display: block; margin-top: .5rem; font-size: .95rem; letter-spacing: 0; color: inherit; opacity: .8; }
@media (min-width: 861px) { .stufe h3 { min-height: calc(2em * 1.62); } }
.stufe p { font-size: 1rem; }
.stufe ul { margin-top: 1.5rem; display: grid; gap: .55rem; font-size: .95rem; }
.stufe li { position: relative; padding-left: 1.6rem; }
.stufe li svg { position: absolute; left: 0; top: .32em; color: var(--petrol); }
.stufe--mitte li svg { color: var(--grau-lesen); }
.stufen__hinweis { margin-top: 1.5rem; font-size: 1rem; }
.stufen__hinweis a, .projekte__link { color: var(--petrol); }
.projekte__link { display: inline-flex; margin-top: 1.25rem; }
.rollen-satz { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--linie); font-size: 1.0625rem; max-width: 46rem; }
.rollen-satz a { color: var(--petrol); }
.platzhalter { color: var(--stahl); }

/* Person */
.person { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem 4.5rem; align-items: start; }
.person figure { max-width: 13rem; padding-top: .5rem; }
.person figure img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--weiss); }
.person figcaption { margin-top: .85rem; font-size: .875rem; color: var(--leise); white-space: nowrap; }
.person p { margin-top: 1.5rem; font-size: 1.1rem; max-width: 36rem; }
.quali { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; border-top: 1px solid var(--linie); }
.quali li { padding: .9rem 0; border-bottom: 1px solid var(--linie); font-size: .95rem; color: var(--ink); }
.quali li span { display: block; color: var(--leise); font-size: .85rem; }
.person .pfeil-link { margin-top: 2rem; color: var(--petrol); }

/* Fachbeiträge */
.beitraege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
.beitrag { text-decoration: none; display: block; }
.beitrag__bild { overflow: hidden; border-radius: 12px; }
.beitrag img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; transition: transform .6s var(--aus); }
.beitrag:hover img { transform: scale(1.03); }
.beitrag .marke { margin-top: 1.4rem; }
.beitrag h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 500; margin-top: .7rem; }
.beitrag:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.kopfzeile--zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }

/* Schwester */
.schwester { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.schwester .huelle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding-top: 2.25rem; padding-bottom: 2.25rem; }
.schwester__name { font-weight: 600; font-size: 1.15rem; color: var(--ink); letter-spacing: -.01em; }
.schwester__name span { color: #264253; }
.schwester p { font-size: 1rem; max-width: 40rem; }
.schwester .pfeil-link { color: var(--petrol); }

/* Schluss */
.schluss { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.schluss__karte { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); background: var(--petrol); border-radius: 12px; overflow: hidden; color: rgba(255, 255, 255, .86); background-image: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%); }
.schluss__text { padding: clamp(2.5rem, 6vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; }
.schluss h2 { color: var(--weiss); }
.schluss p { margin-top: 1.4rem; max-width: 30rem; font-size: 1.1rem; }
.schluss .knopf { margin-top: 2.25rem; align-self: flex-start; }
.schluss__bild img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; object-position: 55% 50%; }

/* Fuß */
.fuss { background: var(--ink); color: rgba(255, 255, 255, .74); padding: clamp(4rem, 7vw, 5.5rem) 0 2rem; }
.fuss__oben { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem; }
.fuss a[href^="mailto"] { white-space: nowrap; }
.fuss__marke img { width: min(100%, 22rem); height: auto; }
.fuss__marke p { margin-top: 1.5rem; max-width: 22rem; font-size: .98rem; }
.fuss h2 { font-size: .9rem; font-weight: 500; color: var(--grau-lesen); letter-spacing: .01em; margin-bottom: 1rem; }
.fuss li { padding: .3rem 0; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; text-underline-offset: .22em; }
.fuss__unten { margin-top: 4rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.fuss__unten ul { display: flex; gap: 1.75rem; }

/* Mittlere Breiten */
@media (max-width: 1080px) {
  .kern { grid-template-columns: minmax(0, 1fr); }
  .angebote { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kopf nav { display: none; }
  .menueknopf { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss); color: var(--ink); cursor: pointer; }
  .kopf .knopf { display: none; }
  .kopf.offen nav { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--weiss); border-bottom: 1px solid var(--linie); }
  .kopf.offen nav .nav { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem clamp(1.25rem, 4vw, 2.5rem) 1.25rem; }
  .kopf.offen nav a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--linie); }
  .vorgehen, .person { grid-template-columns: minmax(0, 1fr); }
  .person figure { max-width: 9.5rem; padding-top: 0; }
  .fuss__oben { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .lage,   .wege, .beitraege { grid-template-columns: minmax(0, 1fr); }
  .weg:nth-child(2), .weg:nth-child(3) { margin-top: 0; }
  .weg { min-height: 0; }
  .stufen { grid-template-columns: minmax(0, 1fr); }
  .stufe + .stufe { border-left: 0; border-top: 1px solid var(--linie); }
  .weitere a { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .weitere em { text-align: left; }
  .schwester .huelle { grid-template-columns: minmax(0, 1fr); }
  .schluss__karte { grid-template-columns: minmax(0, 1fr); }
  .schluss__bild { order: -1; }
  .schluss__bild img { min-height: 15rem; max-height: 20rem; }
  .kopfzeile--zeile { grid-template-columns: minmax(0, 1fr); }
  .quali { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .held__bild { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; max-height: 72vh; }
  .held__bild img { position: static; width: 100%; object-position: 60% 45%; }
  .held__bild::after { background: linear-gradient(0deg, var(--petrol) 0%, rgba(38, 66, 83, .6) 20%, rgba(38, 66, 83, 0) 42%); }
  .held .huelle { min-height: 0; padding-top: 0; margin-top: -3rem; padding-bottom: 4rem; }
  .band::after { background: linear-gradient(90deg, rgba(27, 51, 65, .94) 0%, rgba(27, 51, 65, .78) 55%, rgba(27, 51, 65, .58) 80%, rgba(27, 51, 65, .12) 100%); }
}
@media (max-width: 640px) {
  .kern__inhalt ul { grid-template-columns: minmax(0, 1fr); }
  .angebote { grid-template-columns: minmax(0, 1fr); }
      .held__bild { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 62vh; }
  .held__bild img { position: static; width: 100%; object-position: 60% 50%; }
  .held__bild::after { background: linear-gradient(0deg, var(--petrol) 0%, rgba(38, 66, 83, 0) 32%); }
  .held .huelle { min-height: 0; padding-top: 0; margin-top: -2.5rem; padding-bottom: 3rem; }
  .held h1 { font-size: clamp(2.75rem, 13vw, 3.75rem); }
  .held__aktion .knopf { width: 100%; }
  .normen ul { justify-content: flex-start; gap: .75rem 1.5rem; }
  .normen li { font-size: .9rem; }
  .eintrag dl { grid-template-columns: minmax(0, 1fr); }
  .eintrag dt { border-bottom: 0; padding-bottom: 0; font-size: .82rem; }
  .eintrag dd { text-align: left; padding-top: .15rem; border-top: 0; }
  .bildkarte { margin-bottom: 0; }
  .fuss__oben { grid-template-columns: minmax(0, 1fr); }
  .band .huelle { min-height: 540px; justify-content: flex-end; padding-bottom: 3rem; }
  .band::after { background: linear-gradient(0deg, rgba(27, 51, 65, .96) 0%, rgba(27, 51, 65, .74) 50%, rgba(27, 51, 65, .12) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== Navigation mit Untermenü ===== */
.kopf nav .nav { display: flex; align-items: center; gap: 2rem; }
.nav__gruppe { position: relative; }
.nav__auf { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 0; border: 0; border-bottom: 2px solid transparent; background: none; font-family: inherit; font-size: .95rem; font-weight: 500; line-height: 1.62; color: var(--ink); cursor: pointer; transition: border-color .25s var(--aus); }
.nav__auf:hover { border-bottom-color: var(--petrol); }
.nav__auf svg { transition: transform .3s var(--aus); }
.nav__gruppe.offen .nav__auf svg { transform: rotate(180deg); }
.nav__unter { position: absolute; top: calc(100% + .9rem); left: -1.25rem; z-index: 30; min-width: 17.5rem; padding: .6rem 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 24px 48px -28px rgba(14, 12, 25, .45); display: none; }
.nav__gruppe.offen .nav__unter { display: block; }
html:not(.js) .nav__gruppe:hover .nav__unter, html:not(.js) .nav__gruppe:focus-within .nav__unter { display: block; }
.kopf nav .nav__unter { flex-direction: column; gap: 0; }
.kopf nav .nav__unter a { display: block; padding: .6rem 1.25rem; border-bottom: 0; font-weight: 400; }
.kopf nav .nav__unter a:hover { background: var(--flaeche); }
.kopf nav a[aria-current="page"], .kopf nav a[aria-current="true"] { border-bottom-color: var(--petrol); }
.menueknopf__zu, .kopf.offen .menueknopf__auf { display: none; }
.kopf.offen .menueknopf__zu { display: block; }
@media (min-width: 1081px) { .nav__gruppe:has(a[aria-current="page"]) > .nav__auf { border-bottom-color: var(--petrol); } }
.kopf nav .nav__unter a[aria-current="page"] { color: var(--petrol); font-weight: 500; background: none; }

/* ===== Seitenkopf der Unterseiten ===== */
.seitenkopf { position: relative; overflow: hidden; background: var(--petrol); color: rgba(255, 255, 255, .84); padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.75rem); }
.seitenkopf::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 88% 0%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(27, 51, 65, 0) 55%, rgba(27, 51, 65, .5) 100%); pointer-events: none; }
.seitenkopf .huelle { position: relative; }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .875rem; color: var(--grau-lesen); }
.brotkrumen li + li::before { content: "/"; margin-right: .6rem; color: rgba(255, 255, 255, .32); }
.brotkrumen a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: none; }
.brotkrumen a:hover { color: var(--weiss); text-decoration: underline; text-underline-offset: .22em; }
.seitenkopf h1 { margin-top: 1.75rem; max-width: 15em; color: var(--weiss); font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.04; letter-spacing: -.026em; }
.seitenkopf h1 span { color: var(--grau); }
.seitenkopf .huelle > h1:first-child { margin-top: 0; }
.seitenkopf__text { max-width: 38rem; margin-top: 1.5rem; font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.seitenkopf__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; }
.seitenkopf .pfeil-link { color: var(--weiss); min-height: 3.25rem; }
.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2.75rem, 5vw, 3.75rem); border-top: 1px solid rgba(255, 255, 255, .14); }
.fakten > div { padding: 1.25rem 1.5rem 0 0; }
.fakten > div + div { padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.fakten dt { font-size: .875rem; font-weight: 500; color: var(--grau-lesen); }
.fakten dd { margin-top: .35rem; font-size: 1.125rem; line-height: 1.4; color: var(--weiss); }

/* ===== Unterseiten: Abschnitte und Text ===== */
.unterseite .abschnitt { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.unterseite main h2 { font-size: clamp(1.9rem, 3.3vw, 2.75rem); line-height: 1.1; }
.text2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.75rem 5rem; align-items: start; }
.text2 > div > :first-child { margin-top: 0; }
.fliess { font-size: 1.0625rem; }
.fliess p, .fliess ul, .fliess ol { max-width: 42rem; }
.fliess p + p, .fliess p + ul, .fliess ul + p, .fliess p + ol, .fliess ol + p { margin-top: 1rem; }
.fliess h3 { margin: 2rem 0 .6rem; font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.fliess a, .hinweis a, .antwort a, .tabelle a, .tabelle-hinweis a, .karte > p a, .karte .liste a { color: var(--petrol); text-underline-offset: .2em; }
.fliess strong { color: var(--ink); font-weight: 500; }
.einleitung { font-size: 1.15rem; color: var(--ink); }
.liste { display: grid; gap: .6rem; }
.liste li { position: relative; padding-left: 1.5rem; }
.liste li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--petrol); }
.liste--nein li::before { background: none; border: 1.5px solid var(--stahl); width: .5rem; height: .5rem; top: .58em; left: .1rem; }
.dunkel .liste li::before { background: var(--grau); }

/* Kartenraster für Varianten und Zielgruppen */
.raster { display: grid; grid-template-columns: repeat(var(--spalten, 2), minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.karte { background: var(--flaeche); border-radius: 12px; padding: 2rem 1.85rem 1.85rem; display: flex; flex-direction: column; }
.abschnitt--flaeche .karte { background: var(--weiss); }
.karte h3 { font-size: 1.3rem; line-height: 1.25; font-weight: 500; }
.karte > p { margin-top: .8rem; font-size: 1rem; }
.karte .liste { margin-top: 1.1rem; font-size: 1rem; }
.karte__fuss { margin-top: auto; padding-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; }
.karte__preis { font-size: 1.5rem; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.karte__preis small { font-size: .9rem; color: var(--text); }
.karte .pfeil-link { color: var(--petrol); }
.karte[id], .zwischen[id] { scroll-margin-top: 1.5rem; }
.karte:target { box-shadow: 0 0 0 2px var(--petrol); }

/* Tabelle mit Spalte Rechtsgrundlage */
.tabelle-rahmen { margin-top: clamp(2.25rem, 4vw, 3rem); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.tabelle caption { text-align: left; }
.tabelle th { text-align: left; vertical-align: top; padding: 0 1.5rem .85rem 0; border-bottom: 1px solid var(--ink); font-size: .875rem; font-weight: 500; color: var(--stahl); }
.tabelle td { vertical-align: top; padding: 1.1rem 1.5rem 1.1rem 0; border-bottom: 1px solid var(--linie); }
.tabelle th:last-child, .tabelle td:last-child { padding-right: 0; }
.tabelle td:first-child { color: var(--ink); font-weight: 500; }
.tabelle .nr { width: 2.5rem; color: var(--stahl); font-variant-numeric: tabular-nums; }
.tabelle .norm { font-size: .9rem; font-weight: 500; color: var(--stahl); }
.tabelle--breit .norm { min-width: 13rem; }
.tabelle .ja { color: var(--ink); }
.tabelle .nein { color: var(--leise); }
.tabelle-hinweis { margin-top: 1rem; font-size: .9rem; color: var(--leise); max-width: 46rem; }

/* Ablauf auf hellem Grund */
.ablauf { counter-reset: schritt; margin-top: clamp(2.5rem, 5vw, 3.25rem); display: grid; grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); gap: 2rem 1.75rem; }
.ablauf li { position: relative; padding-top: 3.25rem; }
.ablauf li::before { counter-increment: schritt; content: counter(schritt); position: absolute; top: 0; left: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--petrol); color: var(--petrol); display: grid; place-items: center; font-size: .9rem; font-weight: 500; }
.ablauf li::after { content: ""; position: absolute; top: 1.125rem; left: 3rem; right: -1rem; height: 1px; background: var(--linie); }
.ablauf li:last-child::after { display: none; }
.ablauf h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.3; }
.ablauf p { margin-top: .55rem; font-size: 1rem; }
.ablauf__dauer { margin-top: .75rem; font-size: .875rem; font-weight: 500; color: var(--stahl); }

.zwischen { margin-top: clamp(2.5rem, 5vw, 3.25rem); font-size: 1.35rem; font-weight: 500; line-height: 1.3; }
.zwischen + .ablauf, .zwischen + .tabelle-rahmen { margin-top: 1.75rem; }
.ablauf--3 { --spalten: 3; }
@media (min-width: 1081px) { .ablauf--3 li:nth-child(3n)::after { display: none; } }

/* Preisbaustein */
.preisbaustein { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 4rem; margin-top: clamp(2.25rem, 4vw, 3rem); padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: 12px; background: var(--petrol); color: rgba(255, 255, 255, .86); background-image: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%); }
.preisbaustein h3 { color: var(--weiss); font-size: 1.25rem; font-weight: 500; }
.preisbaustein__betrag { margin-top: 1rem; color: var(--weiss); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.preisbaustein__betrag small { display: block; margin-top: .6rem; font-size: 1rem; line-height: 1.4; letter-spacing: 0; opacity: .85; }
.preisbaustein__richtwert { margin-top: 1rem; font-size: .975rem; }
.preisbaustein .liste li::before { background: var(--grau-lesen); }
.preisbaustein .liste { font-size: 1rem; }
.preisbaustein .pfeil-link { margin-top: 1.5rem; color: var(--weiss); }
.preisbaustein :focus-visible { outline-color: var(--weiss); }
.preisbaustein + .preisbaustein { margin-top: 1.25rem; }

/* Hinweis */
.hinweis { margin-top: clamp(2rem, 4vw, 2.75rem); padding: 1.6rem 1.85rem; border-radius: 12px; background: var(--flaeche); font-size: 1rem; max-width: 52rem; }
.abschnitt--flaeche .hinweis { background: var(--weiss); }
.hinweis strong { color: var(--ink); font-weight: 500; }

/* Häufige Fragen */
.fragen { margin-top: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--linie); max-width: 54rem; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary h3 { font-size: 1.15rem; line-height: 1.4; font-weight: 500; }
.fragen summary::after { content: ""; flex: none; width: 1rem; height: 1rem; margin-top: .35rem; color: var(--petrol); background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .3s var(--aus); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.antwort { padding: 0 2.5rem 1.6rem 0; max-width: 46rem; }
.antwort p + p, .antwort p + ul, .antwort ul + p { margin-top: .85rem; }

/* Über mich */
.ich { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem 4.5rem; align-items: center; }
.ich figure img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--weiss); }
.quali--breit { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Kontakt */
.kontaktwege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.25rem, 4vw, 3rem); }
.kontaktweg { background: var(--flaeche); border-radius: 12px; padding: 2rem 1.85rem; }
.kontaktweg h3 { font-size: 1.2rem; font-weight: 500; }
.kontaktweg p { margin-top: .6rem; font-size: 1rem; }
.kontaktweg .gross { display: inline-block; margin-top: 1rem; font-size: clamp(1.2rem, 2.2vw, 1.45rem); color: var(--petrol); font-weight: 500; text-underline-offset: .22em; overflow-wrap: anywhere; }

/* Schmale Bildschirme */
@media (max-width: 1080px) {
  .kopf.offen nav .nav { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem clamp(1.25rem, 4vw, 2.5rem) 1.25rem; }
  .kopf.offen nav .nav > li > a, .kopf.offen .nav__auf { display: flex; width: 100%; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--linie); }
  .nav__unter { position: static; min-width: 0; padding: .25rem 0 .5rem; border: 0; border-radius: 0; box-shadow: none; }
  .kopf nav .nav__unter a { padding: .65rem 0 .65rem 1rem; border-bottom: 1px solid var(--flaeche); }
  .kopf.offen nav .kontakt-mobil { display: block; }
  .ablauf { --spalten: 2; }
  .ablauf li:nth-child(2n)::after { display: none; }
}
@media (min-width: 1081px) { .kontakt-mobil { display: none; } }
@media (max-width: 860px) {
  .text2, .preisbaustein, .ich { grid-template-columns: minmax(0, 1fr); }
  .ich figure { max-width: 11rem; }
  .raster, .kontaktwege { grid-template-columns: minmax(0, 1fr); }
  .fakten { grid-template-columns: minmax(0, 1fr); }
  .fakten > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 1rem; }
  .quali--breit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle tr { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
  .tabelle tr:first-child { border-top: 1px solid var(--ink); }
  .tabelle td { padding: .2rem 0; border: 0; }
  .tabelle td[data-label]::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 500; color: var(--stahl); margin-top: .5rem; }
  .tabelle td:first-child[data-label]::before { margin-top: 0; }
  .tabelle td.nr { display: none; }
  .tabelle--breit .norm { min-width: 0; }
}
@media (max-width: 640px) {
  .ablauf { --spalten: 1; }
  .ablauf li::after { display: none; }
  .seitenkopf__aktion .knopf { width: 100%; }
  .antwort { padding-right: 0; }
}
@media print {
  .kopf, .fuss, .sprung, .schluss__bild, .seitenkopf__aktion { display: none !important; }
  .seitenkopf, .dunkel, .preisbaustein, .stufe--mitte { background: none !important; color: #000 !important; }
  .seitenkopf h1, .preisbaustein h3, .preisbaustein__betrag { color: #000 !important; }
  .stufe--mitte, .stufe--mitte h3, .stufe--mitte .preis, .stufe--mitte p, .preiszeilen strong, .preisbaustein, .preisbaustein p { color: #000 !important; }
  .fragen details > .antwort { display: block; }
}

/* Sicherheitsnetz: lange Wörter umbrechen statt über den Rand ragen (weiche Trennstellen setzt bau.py) */
main { overflow-wrap: break-word; }
.nw { white-space: nowrap; }
/* Bilder tragen width und height gegen Layoutsprünge; die Höhe ergibt sich aus Breite und Seitenverhältnis */
img { height: auto; }
/* Überschriften nur an den gesetzten Trennstellen trennen (Wortfugen statt „beauf-tragter“) */
h1, h2, h3 { hyphens: manual; }

/* ===== Fachbeiträge: Artikelseite ===== */
.seitenkopf--artikel { padding-bottom: clamp(6.5rem, 12vw, 10rem); }
.seitenkopf--artikel h1 { max-width: 20em; font-size: clamp(2.15rem, 4.1vw, 3.5rem); line-height: 1.08; }
.seitenkopf--artikel .seitenkopf__text { max-width: 42rem; }
.artikel-meta { display: flex; flex-wrap: wrap; gap: .45rem 0; margin-top: 2rem; font-size: .9rem; color: var(--grau-lesen); }
.artikel-meta li { padding-right: 1.25rem; }
.artikel-meta li + li { padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, .2); }
.artikel-meta li:first-child { color: var(--weiss); font-weight: 500; }
.artikel-bild { position: relative; margin-top: clamp(-8rem, -9vw, -4.5rem); }
.artikel-bild img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px; background: var(--flaeche); }
.artikel-bild picture { display: block; }
.artikel { display: grid; grid-template-columns: minmax(0, 44rem) minmax(15rem, 18.5rem); justify-content: space-between; gap: 3rem 4rem; align-items: start; padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.artikel__seite { order: 2; position: sticky; top: 1.5rem; display: grid; gap: 1.75rem; }
@media (max-height: 859px) { .artikel__seite { position: static; } }
.artikel__text { order: 1; min-width: 0; font-size: 1.0625rem; }

/* Inhaltsverzeichnis */
.inhalt { border-top: 1px solid var(--ink); }
.inhalt summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0 .5rem; font-size: .875rem; font-weight: 500; color: var(--stahl); }
.inhalt summary::-webkit-details-marker { display: none; }
.inhalt summary::after { content: ""; flex: none; width: .8rem; height: .8rem; color: var(--petrol); background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .3s var(--aus); }
.inhalt[open] summary::after { transform: rotate(45deg); }
.inhalt ol { padding-bottom: .5rem; }
.inhalt a { display: block; padding: .38rem 0; font-size: .925rem; line-height: 1.4; color: var(--text); text-decoration: none; transition: color .2s var(--aus); }
.inhalt a:hover { color: var(--petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.artikel__leistung { padding: 1.3rem 1.4rem 1.4rem; border: 1px solid var(--linie); border-radius: 12px; }
.artikel__leistung-art { font-size: .8rem; font-weight: 500; color: var(--stahl); }
.artikel__leistung-titel { display: block; margin-top: .35rem; font-size: 1.1rem; font-weight: 500; line-height: 1.3; color: var(--ink); text-decoration: none; }
.artikel__leistung-titel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.artikel__leistung-text { margin-top: .4rem; font-size: .925rem; line-height: 1.5; }
.artikel__leistung-preis { margin-top: .6rem; font-size: .925rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Fließtext im Beitrag */
.artikel__text > * + * { margin-top: 1rem; }
main .artikel__text h2 { margin-top: 3.25rem; font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.15; letter-spacing: -.015em; scroll-margin-top: 1.5rem; }
.artikel__text h3 { margin-top: 2rem; font-size: 1.2rem; font-weight: 500; line-height: 1.3; }
.artikel__text > h2 + *, .artikel__text > h3 + * { margin-top: .85rem; }
.artikel__text a { color: var(--petrol); text-underline-offset: .2em; }
.artikel__text strong { color: var(--ink); font-weight: 500; }
.artikel__text > .liste { margin-top: 1rem; }
.kurz { padding: 1.6rem 1.75rem 1.75rem; border-radius: 12px; background: var(--flaeche); }
.kurz h2, .artikel__text .kurz h2 { margin: 0; font-size: 1.15rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.kurz .liste { margin-top: 1rem; font-size: 1rem; }
.artikel__text > .definition { margin-top: 2rem; padding: 1.35rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--linie); font-size: 1.15rem; line-height: 1.55; color: var(--ink); }
.definition dfn { font-style: normal; font-weight: 500; }
.schrittfolge { counter-reset: schritt; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
.artikel__text > .schrittfolge { margin-top: 1.4rem; }
.schrittfolge li { position: relative; padding-left: 3.1rem; min-height: 2.1rem; }
.schrittfolge li::before { counter-increment: schritt; content: counter(schritt); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--petrol); color: var(--petrol); display: grid; place-items: center; font-size: .875rem; font-weight: 500; }
.artikel__text > .beispiel { margin-top: 1.75rem; padding: 1.4rem 1.6rem 1.5rem; border: 1px solid var(--linie); border-radius: 12px; }
.beispiel__titel { font-size: .85rem; font-weight: 500; color: var(--stahl); }
.beispiel p + p { margin-top: .5rem; }
.artikel__text > .tabelle-rahmen { margin-top: 1.75rem; }
.artikel__text .tabelle { font-size: .975rem; }
.artikel__text > .fragen { margin-top: 1.25rem; }
.artikel__text .fragen summary h3 { margin: 0; }
.quellen { counter-reset: quelle; display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; font-size: .9rem; line-height: 1.5; color: var(--leise); }
.quellen li { position: relative; padding-left: 2rem; overflow-wrap: anywhere; }
.quellen li::before { counter-increment: quelle; content: counter(quelle) "."; position: absolute; left: 0; color: var(--stahl); font-variant-numeric: tabular-nums; }
.artikel__text > .autor { margin-top: 3rem; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding-top: 1.75rem; border-top: 1px solid var(--linie); }
.autor img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; }
.autor__name { color: var(--ink); font-weight: 500; }
.autor p { font-size: .95rem; }
.autor p + p { margin-top: .35rem; }

/* Beitragskarten */
.beitrag__anriss { display: block; margin-top: .55rem; font-size: 1rem; color: var(--text); }
.beitrag .marke { display: inline-flex; }

main .weiterlesen h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }

@media (max-width: 1080px) {
  .artikel { grid-template-columns: minmax(0, 44rem); gap: 2rem; }
  .artikel__seite { order: 0; position: static; max-width: 44rem; }
}
@media (min-width: 1081px) {
  .inhalt summary { cursor: default; pointer-events: none; }
  .inhalt summary::after { display: none; }
}
@media (max-width: 860px) {
  .artikel-bild img { aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
  .artikel-meta { flex-direction: column; gap: .2rem; }
  .artikel-meta li, .artikel-meta li + li { padding: 0; border-left: 0; }
  .kurz { padding: 1.35rem 1.25rem 1.5rem; }
  .schrittfolge li { padding-left: 2.75rem; }
  .artikel__text { hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}

/* Fachbeiträge: Bildausschnitt und Karten. Senkrechter Bildschwerpunkt als Klasse statt style-Attribut (CSP ohne
   'unsafe-inline'); bau.py setzt fokus-NN aus "bild_fokus" der Beitragsdaten, erlaubt sind die Stufen hier.
   Gilt für das Foto im Beitragskopf und für die Grundlagen der Blogübersicht. */
img.fokus-0 { object-position: 50% 0%; }
img.fokus-5 { object-position: 50% 5%; }
img.fokus-10 { object-position: 50% 10%; }
img.fokus-15 { object-position: 50% 15%; }
img.fokus-20 { object-position: 50% 20%; }
img.fokus-25 { object-position: 50% 25%; }
img.fokus-30 { object-position: 50% 30%; }
img.fokus-35 { object-position: 50% 35%; }
img.fokus-40 { object-position: 50% 40%; }
img.fokus-45 { object-position: 50% 45%; }
img.fokus-50 { object-position: 50% 50%; }
img.fokus-55 { object-position: 50% 55%; }
img.fokus-60 { object-position: 50% 60%; }
img.fokus-70 { object-position: 50% 70%; }
main .beitrag h2, main .beitrag h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 500; margin-top: .7rem; letter-spacing: 0; }
.beitrag__bild { display: block; }
.beitrag:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.beitraege--liste { gap: 3.25rem 1.75rem; }
.kopfzeile .pfeil-link { color: var(--petrol); }

/* Übersicht der Fachbeiträge: der erste Beitrag als breite Leitkarte, die übrigen füllen volle Reihen */
@media (min-width: 861px) {
  .beitraege--liste .beitrag:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .beitraege--liste .beitrag:first-child .beitrag__bild { grid-column: 1; grid-row: 1 / -1; }
  .beitraege--liste .beitrag:first-child .marke { grid-column: 2; grid-row: 2; margin-top: 0; }
  .beitraege--liste .beitrag:first-child h2 { grid-column: 2; grid-row: 3; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.2; margin-top: .9rem; }
  .beitraege--liste .beitrag:first-child .beitrag__anriss { grid-column: 2; grid-row: 4; margin-top: .9rem; font-size: 1.0625rem; }
  /* Sechs Spuren: drei Karten je Reihe. Geht die Zahl nach der Leitkarte nicht in Dreiern auf, schließen Paare ab,
     damit keine Karte allein in der letzten Reihe steht (Rest 1: die letzten vier als zwei Paare, Rest 2: die letzten zwei). */
  .beitraege--liste { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .beitraege--liste .beitrag { grid-column: span 2; }
  .beitraege--liste .beitrag:first-child { grid-column: 1 / -1; }
  .beitraege--liste:has(> .beitrag:last-child:nth-child(3n+2)) .beitrag:nth-last-child(-n+4):not(:first-child),
  .beitraege--liste:has(> .beitrag:last-child:nth-child(3n)) .beitrag:nth-last-child(-n+2):not(:first-child) { grid-column: span 3; }
}
/* Richtwerttabellen: Beträge nicht über die ganze Breite verteilen */
.tabelle-rahmen--richtwerte { max-width: 50rem; }
.tabelle-rahmen--richtwerte td { font-variant-numeric: tabular-nums; }

/* Richtwerttabellen am Telefon als echte, kompakte Tabelle (unter 360 px bleibt der Kartenstapel) */
@media (min-width: 360px) and (max-width: 760px) {
  .tabelle-rahmen--richtwerte { overflow-x: auto; }
  .tabelle-rahmen--richtwerte .tabelle { display: table; font-size: .9rem; }
  .tabelle-rahmen--richtwerte .tabelle thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: table-header-group; }
  .tabelle-rahmen--richtwerte .tabelle tbody { display: table-row-group; }
  .tabelle-rahmen--richtwerte .tabelle tr { display: table-row; padding: 0; border: 0; }
  .tabelle-rahmen--richtwerte .tabelle th { padding: 0 .5rem .6rem 0; font-size: .75rem; }
  .tabelle-rahmen--richtwerte .tabelle td { display: table-cell; width: auto; padding: .65rem .5rem .65rem 0; border-bottom: 1px solid var(--linie); }
  .tabelle-rahmen--richtwerte .tabelle td[data-label]::before { content: none; }
  .tabelle-rahmen--richtwerte .tabelle td:first-child { white-space: nowrap; }
}
/* Kernangebot der Startseite auf dem Tablet quer zweispaltig, ohne leere Petrolfläche */
@media (min-width: 861px) and (max-width: 1080px) {
  .kern { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3rem; }
  .kern__inhalt ul { grid-template-columns: minmax(0, 1fr); }
}

/* Bausteine der Beitragsformate ab Oktober 2026: Empfehlung (Entscheidungsvorlage), Steckbrief (Fall und Urteil),
   Stand-Zeile und Statusmarken (Fristen). Rahmen statt Randstreifen, Zustand über Form und Text, nie nur über Farbe. */
.artikel__text > .empfehlung { margin-top: 1.5rem; padding: 1.5rem 1.75rem 1.6rem; border: 1px solid var(--petrol); border-radius: 12px; }
.empfehlung__titel { font-size: .85rem; font-weight: 500; color: var(--petrol); }
.empfehlung p + p, .empfehlung p + .liste, .empfehlung .liste + p { margin-top: .6rem; }
.artikel__text > .steckbrief { margin-top: 2rem; border-top: 1px solid var(--ink); }
.steckbrief > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .35rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--linie); }
.steckbrief dt { font-size: .9rem; font-weight: 500; color: var(--stahl); }
.steckbrief dd { color: var(--ink); }
.artikel__text > .stand { margin-top: 1.5rem; font-size: .95rem; color: var(--stahl); }
.status { display: inline-block; padding: .1rem .6rem; border: 1px solid var(--linie); border-radius: 999px; font-size: .85rem; font-weight: 500; line-height: 1.5; color: var(--stahl); white-space: nowrap; }
.status--gilt { background: var(--petrol); border-color: var(--petrol); color: var(--weiss); }
.status--beschlossen { border-color: var(--petrol); color: var(--petrol); }
.status--vorschlag { border-style: dashed; }
.tabelle td:first-child time { white-space: nowrap; }
@media (max-width: 640px) {
  .steckbrief > div { grid-template-columns: minmax(0, 1fr); }
  .artikel__text > .empfehlung { padding: 1.35rem 1.25rem 1.5rem; }
}

/* ===== QM-Praxiswerk: eigene Bausteine ===== */
/* Ausgangslage: der Kernsatz als ruhige Aussage, nicht als Zitatkasten */
.lage__satz { margin-top: 1.5rem !important; padding-top: 1.25rem; border-top: 1px solid var(--ink); color: var(--ink); font-size: 1.25rem !important; line-height: 1.45; max-width: 30rem; }

/* Kernangebot als Rolle (Petrol tief mit Petrollicht; vorher Nachtblau, wirkte zu hart, Christian 14.10.2026) */
.kern--rolle { align-items: start; }
.kern--rolle h2 { margin-top: .6rem; color: var(--weiss); font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; }
.kern--rolle .kern__inhalt p { font-size: 1.075rem; max-width: 36rem; }
.kern__satz { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .18); color: var(--weiss); font-size: 1.2rem; line-height: 1.45; }
.kern--rolle .pfeil-link { margin-top: 1.75rem; color: var(--weiss); }

/* Stufen als Verweise auf Modelle und Preise */
a.stufe--link { text-decoration: none; transition: background-color .3s var(--aus); }
a.stufe--link:not(.stufe--mitte) { color: var(--text); }
a.stufe--link:not(.stufe--mitte):hover { background: var(--flaeche); }
a.stufe--link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.stufe--mitte:focus-visible { outline-color: var(--petrol); }

/* Projekte zum Festpreis: Zeilen mit Preis, kein Kartenraster */
.projekte { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1.5rem 4rem; margin-top: clamp(3.5rem, 7vw, 5rem); padding-top: 2.25rem; border-top: 1px solid var(--ink); }
.projekte__kopf h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.projekte__kopf p { margin-top: .75rem; font-size: 1rem; max-width: 22rem; }
.projekte__liste li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.projekte__liste li:first-child { padding-top: .2rem; }
.projekte__liste a { color: var(--ink); font-size: 1.15rem; font-weight: 500; text-decoration: none; }
.projekte__liste a:hover { color: var(--petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.projekte__liste span { flex: none; color: var(--petrol); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.projekte .projekte__link { grid-column: 2; margin-top: .25rem; color: var(--petrol); }

/* System-Check mit Prüfspiegel: die Ampel aus dem Managementbericht */
.pruefung { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem 5rem; align-items: center; }
.pruefung__text p + p { margin-top: 1rem; }
.pruefung__text .einleitung { margin-top: 1.5rem; }
.pruefung__text .pfeil-link { margin-top: 1.75rem; color: var(--petrol); }
.pruefspiegel { margin: 0; padding: 1.6rem 1.75rem 1.4rem; background: var(--weiss); border-radius: 12px; box-shadow: 0 1px 0 var(--linie), 0 30px 60px -40px rgba(15, 23, 42, .45); }
.pruefspiegel__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .9rem; border-bottom: 2px solid var(--ink); font-size: .85rem; font-weight: 500; color: var(--stahl); }
.pruefspiegel__kopf span:last-child { color: var(--ink); white-space: nowrap; }
.pruefspiegel__tabelle { width: 100%; border-collapse: collapse; }
.pruefspiegel__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.pruefspiegel__tabelle th, .pruefspiegel__tabelle td { padding: .95rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
.pruefspiegel__tabelle th { font-weight: 500; color: var(--ink); font-size: 1.05rem; }
.pruefspiegel__tabelle td { width: 4.6rem; text-align: left; white-space: nowrap; }
.pruefspiegel__tabelle .nr { display: inline-block; width: 1.75rem; color: var(--stahl); font-variant-numeric: tabular-nums; font-weight: 400; }
.ampel { display: inline-flex; align-items: center; gap: .55rem; font-size: .95rem; font-weight: 500; color: var(--ink); }
.ampel::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--flaeche); }
.ampel--rot::before { background: var(--ampel-rot); }
.ampel--gelb::before { background: var(--ampel-gelb); }
.ampel--gruen::before { background: var(--ampel-gruen); }
.pruefspiegel__fuss { margin-top: 1rem; font-size: .875rem; line-height: 1.55; color: var(--leise); }
.pruefspiegel__fuss a { color: var(--petrol); text-underline-offset: .2em; }

/* Arbeitsweise: zwei Grundsätze und die Person */
.arbeitsweise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 2.5rem 3rem; }
.arbeitsweise__block { padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.arbeitsweise h3 { font-size: 1.3rem; font-weight: 500; line-height: 1.25; }
.arbeitsweise p { margin-top: .75rem; font-size: 1rem; }
.arbeitsweise__person { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; border-radius: 12px; background: var(--flaeche); }
.arbeitsweise__person img { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; }
.arbeitsweise__person .pfeil-link { margin-top: 1rem; color: var(--petrol); }

/* Leistungen als Verzeichnis */
.leistungsliste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; border-top: 1px solid var(--ink); }
.leistungsliste li { border-bottom: 1px solid var(--linie); }
.leistungsliste a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.75rem; padding: 1rem 0; color: var(--ink); font-size: 1.1rem; font-weight: 500; line-height: 1.35; text-decoration: none; }
.leistungsliste a::after { content: ""; flex: none; width: .55rem; height: .55rem; border-top: 1.6px solid var(--petrol); border-right: 1.6px solid var(--petrol); transform: rotate(45deg); transition: transform .35s var(--aus); }
.leistungsliste a:hover { color: var(--petrol); }
.leistungsliste a:hover::after { transform: translateX(3px) rotate(45deg); }

/* Für wen: Text und Foto */
.zielgruppe { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.5rem 5rem; align-items: center; }
.zielgruppe__text p { margin-top: 1.5rem; font-size: 1.1rem; max-width: 36rem; }
.zielgruppe__bild img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 55% 40%; border-radius: 12px; }

@media (max-width: 1080px) {
  .pruefung, .projekte { grid-template-columns: minmax(0, 1fr); }
  .projekte .projekte__link { grid-column: 1; }
  .arbeitsweise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arbeitsweise__person { grid-column: 1 / -1; }
  .leistungsliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .zielgruppe { grid-template-columns: minmax(0, 1fr); }
  .zielgruppe__bild { order: -1; }
}
@media (max-width: 640px) {
  .arbeitsweise, .leistungsliste { grid-template-columns: minmax(0, 1fr); }
  .arbeitsweise__person { grid-template-columns: minmax(0, 1fr); }
  .pruefspiegel { padding: 1.25rem 1.1rem 1.1rem; }
  .projekte__liste li { flex-direction: column; gap: .2rem; }
}

/* ===== QM-Praxiswerk: Leistungsseite ===== */
.seitenkopf__text--zusatz { margin-top: .9rem; font-size: 1.05rem; color: rgba(255, 255, 255, .78); }
.kopfzeile__text { max-width: 40rem; font-size: 1.1rem; }
.aufgaben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 2.5rem; }
.aufgabe { padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.aufgabe h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.aufgabe p { margin-top: .7rem; font-size: 1rem; }
.aufgabe a { color: var(--petrol); text-underline-offset: .2em; }
.stufen--weiss { background: var(--weiss); border-radius: 12px; border: 0; overflow: hidden; }
.stufen--weiss .stufe + .stufe { border-left-color: var(--linie); }
.preisbaustein--qm { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.preiszeilen dt { font-size: .9rem; font-weight: 500; color: var(--grau-lesen); }
.preiszeilen dd p { margin-top: .9rem; font-size: 1.1rem; color: rgba(255, 255, 255, .84); }
.preiszeilen strong { display: inline-block; min-width: 11.5rem; color: var(--weiss); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 400; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.preisbaustein--qm :focus-visible { outline-color: var(--weiss); }
.bedingungen { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--ink); }
.bedingungen > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: .5rem 3rem; padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
.bedingungen dt { color: var(--ink); font-weight: 500; font-size: 1.05rem; }
.bedingungen dd p { max-width: 46rem; font-size: 1rem; }
.bedingungen dd p + p { margin-top: .75rem; }
.bedingungen a, .bedingungen__fuss a { color: var(--petrol); text-underline-offset: .2em; }
.bedingungen__fuss { margin-top: 1.5rem; font-size: .95rem; color: var(--leise); }
.lesetipps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.lesetipp { display: block; padding: 1.75rem 1.75rem 1.85rem; border: 1px solid var(--linie); border-radius: 12px; text-decoration: none; transition: border-color .3s var(--aus), background-color .3s var(--aus); }
.lesetipp:hover { border-color: var(--petrol); background: var(--flaeche); }
.lesetipp h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.35; }
.lesetipp:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.lesetipp p { margin-top: .7rem; font-size: 1rem; }

/* ===== QM-Praxiswerk: Fachbeitrag ===== */
/* Kapitelziffern wie in einem Handbuch, aus der Gliederung des Beitrags gezählt */
.artikel__text { counter-reset: kapitel; }
.artikel__text > h2[id]:not(#fragen):not(#quellen):not(#weiterlesen) { counter-increment: kapitel; }
.artikel__text > h2[id]:not(#fragen):not(#quellen):not(#weiterlesen)::before { content: counter(kapitel, decimal-leading-zero); display: block; margin-bottom: .55rem; font-size: .95rem; font-weight: 500; letter-spacing: .02em; color: var(--petrol); font-variant-numeric: tabular-nums; }
.artikel__text > .einleitung { font-size: 1.15rem; line-height: 1.6; color: var(--ink); }
.artikel__text > .einleitung + .kurz { margin-top: 1.75rem; }
.schrittfolge--titel h3 { margin: 0; font-size: 1.1rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.schrittfolge--titel p { margin-top: .3rem; }
.liste--nummern { list-style: decimal; padding-left: 1.25rem; }
.liste--nummern li { padding-left: .25rem; }
.liste--nummern li::before { content: none; }
.tabelle tbody th { text-align: left; vertical-align: top; padding: 1.1rem 1.5rem 1.1rem 0; border-bottom: 1px solid var(--linie); color: var(--ink); font-size: inherit; font-weight: 500; }
.weiterlesen-liste { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.weiterlesen-liste li { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.weiterlesen-liste a { color: var(--ink); font-weight: 500; font-size: 1.1rem; text-decoration: none; }
.weiterlesen-liste a:hover { color: var(--petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.weiterlesen-liste span { display: block; margin-top: .3rem; font-size: 1rem; }

@media (max-width: 1080px) {
  .aufgaben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lesetipps { grid-template-columns: minmax(0, 1fr); }
  .preisbaustein--qm { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .bedingungen > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tabelle tbody th { display: block; width: 100%; padding: .2rem 0; border: 0; }
}
@media (max-width: 640px) {
  .aufgaben { grid-template-columns: minmax(0, 1fr); }
  .preiszeilen strong { display: block; min-width: 0; }
}
.preisbaustein__aktion { align-self: end; }

/* Startseite: Foto nach rechts, damit Gesichter nicht unter dem Text liegen; Gelb klarer, mit feiner Kante */
@media (min-width: 1101px) { .startseite .held__bild img { left: 9%; width: 115%; object-position: 50% 42%; } }
.ampel--gelb::before { background: #D99A0B; box-shadow: 0 0 0 4px var(--flaeche), inset 0 0 0 1px rgba(15, 23, 42, .18); }
@media (min-width: 1101px) { .startseite .held__bild::after { background: linear-gradient(90deg, rgba(38, 66, 83, 1) 0%, rgba(38, 66, 83, 1) 12%, rgba(38, 66, 83, .86) 36%, rgba(38, 66, 83, .4) 56%, rgba(38, 66, 83, .08) 70%, rgba(38, 66, 83, 0) 82%), linear-gradient(0deg, rgba(27, 51, 65, .6) 0%, rgba(27, 51, 65, 0) 42%); } }

/* ===== Umzug 10/2026: Bausteine der Fachbeiträge (aus den Live-Blöcken qmp-pull, qmp-darkblock, qmp-kf, qmp-leitgedanke …) ===== */
.seitenkopf--ohne-bild { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.artikel__text > .merksatz { margin-top: 2.25rem; margin-bottom: .5rem; padding: 1.35rem 0 1.4rem; border-top: 2px solid var(--petrol); border-bottom: 1px solid var(--linie); }
.merksatz p { font-size: clamp(1.2rem, 1.9vw, 1.4rem); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.merksatz p + p { margin-top: .6rem; }
.artikel__text > .hinweisblock { margin-top: 2rem; padding: 1.2rem 1.4rem; border-radius: 12px; background: var(--flaeche); font-size: .95rem; line-height: 1.55; }
.hinweisblock p + p { margin-top: .5rem; }
.artikel__text > .kennzahl { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .4rem 1.75rem; align-items: baseline; padding: 1.35rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--linie); }
.kennzahl__wert { font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1.1; font-weight: 500; letter-spacing: -.01em; color: var(--petrol); font-variant-numeric: tabular-nums; max-width: 14ch; }
.kennzahl__text { font-size: 1rem; line-height: 1.55; }
.kennzahl__quelle { grid-column: 1 / -1; font-size: .85rem; color: var(--leise); }
@media (max-width: 640px) { .artikel__text > .kennzahl { grid-template-columns: minmax(0, 1fr); } .kennzahl__wert { max-width: none; } }
.artikel__text > .leitgedanke { margin-top: 2.25rem; padding: 1.5rem 1.7rem 1.6rem; border-radius: 12px; background: var(--petrol); color: var(--weiss); }
.leitgedanke p { font-size: 1.1rem; line-height: 1.55; }
.leitgedanke p + p { margin-top: .6rem; }
.leitgedanke a, .artikel__text .leitgedanke a { color: var(--weiss); }
.leitgedanke strong, .artikel__text .leitgedanke strong { color: var(--weiss); }
.leitgedanke :focus-visible { outline-color: var(--weiss); }
.lesehilfe { font-size: .95rem; color: var(--leise); }
.definition--folge { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.artikel__text > .checkliste { margin-top: 1.75rem; }
.checkliste h3 { margin-top: 0; }
.checkliste__liste { display: grid; gap: .7rem; margin-top: .9rem; }
.checkliste__liste li { position: relative; padding-left: 2rem; }
.checkliste__liste li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.05rem; height: 1.05rem; border: 1.5px solid var(--petrol); border-radius: 3px; }
.quellen-text { font-size: .9rem; color: var(--leise); }
.artikel__text > .qmp-insel { margin-top: 2rem; }
.artikel__text > .qmp-insel + * { margin-top: 2rem; }
.tabelle .schluessel { color: var(--ink); font-weight: 500; }
.tabelle tbody th { text-align: left; vertical-align: top; padding: 1.1rem 1.5rem 1.1rem 0; border-bottom: 1px solid var(--linie); font-size: inherit; font-weight: 500; color: var(--ink); }
/* Karten statt Tabelle: immer bei .tabelle--karten (live qmp-rt-immer), sonst unter 760 px */
.tabelle--karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tabelle--karten, .tabelle--karten tbody, .tabelle--karten tr, .tabelle--karten td, .tabelle--karten tbody th { display: block; width: 100%; }
.tabelle--karten tr { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.tabelle--karten tr:first-child { border-top: 1px solid var(--ink); }
.tabelle--karten td, .tabelle--karten tbody th { padding: .2rem 0; border: 0; }
.tabelle--karten td[data-label]::before, .tabelle--karten tbody th[data-label]::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 500; color: var(--stahl); margin-top: .5rem; }
.tabelle--karten tr > :first-child[data-label]::before { margin-top: 0; }
@media (max-width: 760px) {
  .tabelle tbody th { display: block; width: 100%; padding: .2rem 0; border: 0; }
  .tabelle tbody th[data-label]::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 500; color: var(--stahl); }
}

/* ===== Blogübersicht (Liste aus bau.py, Filter und Suche in werkzeuge/blog.js) ===== */
.blogliste { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--ink); }
.blogliste__eintrag { border-bottom: 1px solid var(--linie); }
.blogliste__eintrag[hidden] { display: none; }
.blogliste__link { display: grid; gap: .35rem; padding: 1.4rem 0 1.5rem; color: inherit; text-decoration: none; }
.blogliste__marke { font-size: .85rem; font-weight: 500; color: var(--stahl); }
.blogliste__titel { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; font-weight: 500; color: var(--ink); max-width: 46rem; text-wrap: pretty; }
.blogliste__anriss { max-width: 46rem; font-size: 1rem; line-height: 1.55; }
.blogliste__link:hover .blogliste__titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.blogliste__link:focus-visible { outline-offset: 4px; }
.begriffe { display: grid; gap: .55rem; margin-top: .85rem; }
.begriffe dt { display: inline; font-weight: 500; color: var(--ink); }
.begriffe dd { display: inline; margin: 0; }
.begriffe > div { line-height: 1.55; }
.artikel__text > .definition-zusatz { margin-top: 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linie); font-size: 1rem; }
.artikel__text > .definition:has(+ .definition-zusatz) { border-bottom: 0; padding-bottom: .5rem; }
.schritt__titel { font-weight: 500; color: var(--ink); }
.schrittfolge li > p + p { margin-top: .35rem; }
.kurz p + p, .kurz .liste + p, .kurz p + .liste { margin-top: .75rem; }
.beispiel > * + * { margin-top: .5rem; }
.beispiel .liste { font-size: 1rem; }
.merksatz .liste, .hinweisblock .liste, .leitgedanke .liste { margin-top: .6rem; }
.leitgedanke .liste li::before { background: var(--weiss); }
.weiterlesen-titel, .quellen-titel { margin-top: 3rem !important; font-size: 1.15rem; font-weight: 500; color: var(--ink); scroll-margin-top: 1.5rem; }
.weiterlesen-titel + *, .quellen-titel + * { margin-top: .85rem !important; }

/* --- datenschutz.css --- */
/* Datenschutzerklärung: dasselbe Register wie das Impressum (.bedingungen.im-register aus impressum.css).
   Ergänzt nur, was das Impressum nicht hat: Unterüberschriften in der Lesespalte (Abschnitt 6). Sie bleiben
   kleiner als die Abschnittsüberschrift in der Randspalte, die erste beginnt ohne Abstand auf der Linie der Zeile. */
.ds-register .fliess h3 { margin: 1.75rem 0 .4rem; font-size: 1.0625rem; line-height: 1.45; }
.ds-register .fliess > h3:first-child { margin-top: 0; }

/* --- gewaltschutzkonzept.css --- */
/* Leistungsseite Schutz- und Gewaltschutzkonzepte (/gewaltschutzkonzept/). Alle Klassen mit dem Kürzel gsk-.
   Die Seite erzählt zwei Wege (überprüfen, entwickeln): erst als Wahl, dann als Abfolge nebeneinander, dann als zwei Preise. */

/* Seitenkopf: der erste Schritt als Satz, der Link darin deutlich */
.gsk-erstgespraech a { color: var(--weiss); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.gsk-erstgespraech a:hover { text-decoration-thickness: 2px; }

/* Zwei Wege: Ausgangslage über dem Weg, darunter „Nach dem Projekt“ in der Flucht der Karten */
.raster.gsk-wahl { margin-top: 0; }
.karte > .gsk-fall { margin: 0 0 1.15rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); font-size: .9rem; font-weight: 500; line-height: 1.4; color: var(--petrol); }
.gsk-danach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.gsk-danach h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.gsk-danach p { max-width: 36rem; font-size: 1.0625rem; }
.gsk-danach a { color: var(--petrol); text-underline-offset: .2em; }
@media (min-width: 861px) { .gsk-danach > * { padding: 0 1.85rem; } }

/* Rechtslage: Tabelle je Arbeitsfeld, die Art der Vorgabe als Marke vor dem Text (Form und Wort, nie nur Farbe) */
.tabelle-rahmen.gsk-recht { margin-top: clamp(2.5rem, 5vw, 4rem); }
.gsk-recht .tabelle thead th:first-child { width: 27%; }
.gsk-recht .tabelle thead th:nth-child(2) { width: 22%; }
.gsk-recht .tabelle .norm { line-height: 1.5; }
.gsk-unter { display: block; margin-top: .3rem; font-size: .9rem; font-weight: 400; line-height: 1.45; color: var(--text); }
.gsk-art { position: relative; margin-bottom: .45rem; padding-left: 1.35rem; font-size: .9rem; font-weight: 500; line-height: 1.4; color: var(--leise); }
.gsk-art::before { content: ""; position: absolute; left: 0; top: .3em; width: .72rem; height: .72rem; border-radius: 50%; border: 1.5px solid var(--stahl); }
.gsk-art--pflicht { color: var(--ink); }
.gsk-art--pflicht::before { background: var(--petrol); border-color: var(--petrol); }
.gsk-hinweis { max-width: 54rem; }

/* Was im Konzept steht: Überschrift und Einordnung links, die sieben Bausteine rechts als ruhige Gliederung */
.gsk-vorspann { margin-top: 1.5rem; max-width: 30rem; font-size: 1.0625rem; }
.gsk-bausteine { border-top: 1px solid var(--ink); }
.gsk-bausteine > div { padding: 1.3rem 0 1.4rem; border-bottom: 1px solid var(--linie); }
.gsk-bausteine h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.3; }
.gsk-bausteine p { margin-top: .5rem; max-width: 42rem; font-size: 1rem; }
.gsk-bausteine a { color: var(--petrol); text-underline-offset: .2em; }
@media (min-width: 1081px) and (min-height: 760px) { .gsk-bausteine-kopf { position: sticky; top: 2rem; } }

/* Vorgehen: beide Wege als Abfolge nebeneinander, Schritte durch eine feine Linie verbunden */
.gsk-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.25rem clamp(2.5rem, 5vw, 5rem); align-items: start; }
.gsk-weg h3 { margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ink); font-size: 1.35rem; font-weight: 500; line-height: 1.3; }
.gsk-weg .schrittfolge { gap: 1.6rem; }
.gsk-weg .schrittfolge li { font-size: 1rem; }
.gsk-weg .schrittfolge li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.05rem - .5px); top: 2.3rem; bottom: -1.4rem; width: 1px; background: var(--linie); }
.gsk-weg li > strong { display: block; margin-bottom: .15rem; color: var(--ink); font-weight: 500; }
.gsk-weg a { color: var(--petrol); text-underline-offset: .2em; }

/* Preis: zwei Beträge mit langer Beschreibung, Betrag und Text in zwei Spalten, damit der Text nicht unter den Betrag läuft */
.gsk-preis .preiszeilen dd p { display: grid; grid-template-columns: 11.5rem minmax(0, 46rem); gap: .3rem 1.5rem; align-items: baseline; }
.gsk-preis .preiszeilen dd p + p { margin-top: 1.1rem; }
.gsk-preis .preiszeilen strong { min-width: 0; }

/* Weiterlesen: Karte als Ganzes klickbar, Linktext bleibt der Titel */
.gsk-lesetipp { position: relative; }
.gsk-lesetipp h3 a { text-decoration: none; }
.gsk-lesetipp h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }

@media (max-width: 860px) {
  .gsk-danach, .gsk-wege { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gsk-preis .preiszeilen dd p { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .gsk-recht .tabelle tbody th { font-size: 1.1rem; line-height: 1.35; }
  .gsk-recht .tabelle td.norm { margin-top: .35rem; }
}

/* --- impressum.css --- */
/* Impressum: die Pflichtangaben als Register wie die Bedingungen auf der Seite Externer QMB.
   Überschriften stehen in der Randspalte, der Text in einer ruhigen Lesespalte. */
.bedingungen.im-register { margin-top: 0; }
.im-register > div { align-items: baseline; row-gap: .7rem; }
.unterseite main .im-register h2 { font-size: 1.15rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--ink); }
.im-register .fliess p { max-width: 40rem; }
/* Telefon und E-Mail: Trefferfläche über 24 px, ohne den Zeilenabstand zu verändern und ohne Überlappung */
.im-register a { padding: .15rem 0; }
@media (max-width: 640px) {
  .im-register .fliess { hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}

/* --- internes-audit.css --- */
/* ===== Internes Audit (Kürzel .ia-) =====
   Der Musteraufbau des Auditberichts liegt als ein weißes Blatt auf der Fläche, wie der Prüfspiegel der Startseite.
   Ampel mit .ampel aus dem Prüfspiegel (Punkt und Wort), nie nur Farbe. */

/* Ablauf: die Kopfzeile bringt den Abstand schon mit */
.ia-ablauf { margin-top: 0; }
@media (min-width: 861px) and (max-width: 1080px) {
  .ia-ablauf { --spalten: 3; }
  .ia-ablauf li:not(:last-child)::after { display: block; }
}
/* Schmal: senkrechte Folge, Ziffer links, Verbindungslinie nach unten */
@media (max-width: 860px) {
  .ia-ablauf { --spalten: 1; gap: 0; }
  .ia-ablauf li { padding: 0 0 2rem 3.25rem; }
  .ia-ablauf li:last-child { padding-bottom: 0; }
  .ia-ablauf li::before { top: -.15rem; }
  .ia-ablauf li:not(:last-child)::after { display: block; top: 2.5rem; bottom: .5rem; left: 1.125rem; right: auto; width: 1px; height: auto; }
  .ia-ablauf p { max-width: 36rem; }
}

/* Der Bericht als Blatt */
.ia-bericht { padding: clamp(1.25rem, 4vw, 3.25rem); background: var(--weiss); border-radius: 12px; box-shadow: 0 1px 0 var(--linie), 0 30px 60px -40px rgba(15, 23, 42, .45); }
.ia-bericht__oben { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.75rem 4.5rem; align-items: start; }
.ia-bericht > .ia-teil { margin-top: clamp(3rem, 5.5vw, 4.25rem); }
.ia-teil h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.ia-teil > p { margin-top: .6rem; max-width: 40rem; font-size: 1rem; }

/* Nummerierte Zeilen: Gliederung und Auditbereiche (die Ziffern stehen im Text, wie im Bericht) */
.ia-gliederung, .ia-bereiche { margin-top: 1.15rem; border-top: 1px solid var(--ink); }
.ia-gliederung li, .ia-bereiche li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--linie); }
.ia-nr { color: var(--stahl); font-variant-numeric: tabular-nums; }
.ia-punkt { color: var(--ink); font-weight: 500; line-height: 1.45; }
.ia-unter { display: block; margin-top: .15rem; font-size: .95rem; font-weight: 400; color: var(--text); }
.ia-bereiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }

/* Ampel: Stufe und Kriterium, bleibt auch am Telefon eine Tabelle */
.ia-ampeln { width: 100%; margin-top: 1.15rem; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.ia-ampeln thead th { text-align: left; vertical-align: bottom; padding: 0 1rem .7rem 0; border-bottom: 1px solid var(--ink); font-size: .875rem; font-weight: 500; color: var(--stahl); }
.ia-ampeln tbody th, .ia-ampeln td { text-align: left; vertical-align: top; padding: .95rem 1rem .95rem 0; border-bottom: 1px solid var(--linie); }
.ia-ampeln tbody th { width: 6.25rem; white-space: nowrap; font-weight: 500; }
.ia-ampeln td { padding-right: 0; }
.ia-ampeln .ampel { line-height: 1.5; }

/* Maßnahmenplan: breit als Tabelle, darunter je Befund ein Eintrag mit beschrifteten Feldern */
.ia-plan-rahmen { margin-top: 1.4rem; }
.ia-plan { font-size: .975rem; }
.ia-plan .ampel { display: flex; margin-bottom: .45rem; }
@media (min-width: 1081px) {
  .ia-plan thead th:nth-child(1) { width: 25%; }
  .ia-plan thead th:nth-child(2) { width: 26%; }
  .ia-plan thead th:nth-child(3), .ia-plan thead th:nth-child(4) { width: 14%; }
}
@media (max-width: 1080px) {
  .ia-plan thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ia-plan, .ia-plan tbody { display: block; width: 100%; }
  .ia-plan tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; padding: 1.35rem 0 1.4rem; border-bottom: 1px solid var(--linie); }
  .ia-plan tbody tr:first-child { border-top: 1px solid var(--ink); }
  .ia-plan td { display: block; width: auto; padding: 0; border: 0; }
  .ia-plan td:first-child { grid-column: 1 / -1; font-size: 1.05rem; }
  .ia-plan td[data-label]::before { content: attr(data-label); display: block; margin: 0 0 .2rem; font-size: .8rem; font-weight: 500; color: var(--stahl); }
  .ia-plan td:first-child::before { content: none; }
}
@media (max-width: 600px) {
  .ia-plan tr { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
}

/* Preis: Betrag links, Erläuterung hängend rechts daneben, auch wenn sie umbricht */
.ia-preis .preiszeilen dd p { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline; }
.ia-preis .preiszeilen strong { min-width: 0; }
@media (max-width: 640px) {
  .ia-preis .preiszeilen dd p { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .ia-bericht__oben { grid-template-columns: minmax(0, 1fr); }
  .ia-bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ia-bereiche { grid-template-columns: minmax(0, 1fr); }
  .ia-ampeln tbody th { width: 5.25rem; }
}

/* --- kontakt.css --- */
/* ===== Kontakt (Kürzel kt-) ===== */
/* Anfrage: links, was für die Vorbereitung hilft und wie mit der Nachricht umgegangen wird, rechts das Formular.
   Reihenfolge im Quelltext wie live: Hinweise, Datenschutz, Formular. */
.kt-anfrage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 5rem; align-items: start; }
.kt-anfrage__hinweise { padding-top: .35rem; }
.kt-vorbereitung { max-width: 30rem; font-size: 1.15rem; line-height: 1.6; color: var(--ink); }
.kt-datenschutz { max-width: 30rem; margin-top: 2rem; padding-top: 1.35rem; border-top: 1px solid var(--linie); font-size: .95rem; line-height: 1.6; color: var(--leise); scroll-margin-top: 1.5rem; }
.kt-datenschutz strong { color: var(--ink); font-weight: 500; }
.kt-datenschutz a { color: var(--petrol); text-underline-offset: .2em; }

/* Formular auf ruhiger Fläche, Felder weiß mit Rahmen in Stahl (Kontrast zur Fläche über 3:1) */
.kt-formular { max-width: 42rem; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: 12px; background: var(--flaeche); scroll-margin-top: 1.5rem; }
.kt-feld + .kt-feld { margin-top: 1.4rem; }
.kt-feld label { display: block; margin-bottom: .45rem; font-size: .95rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.kt-feld input, .kt-feld textarea { display: block; width: 100%; min-height: 3.25rem; margin: 0; padding: .8rem 1rem; border: 1px solid var(--stahl); border-radius: 6px; background: var(--weiss); color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.5; transition: border-color .2s var(--aus), box-shadow .2s var(--aus); }
.kt-feld textarea { min-height: 12.5rem; resize: vertical; }
.kt-feld input:hover, .kt-feld textarea:hover { border-color: var(--ink); }
.kt-feld input:focus-visible, .kt-feld textarea:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; border-color: var(--petrol); }
/* Fehlendes oder ungültiges Feld: doppelt so starker Rahmen, dazu die Meldung oben im Formular (nie nur Farbe) */
.kt-feld [aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kt-formular .knopf { margin-top: 1.9rem; border: 0; font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2; cursor: pointer; }
.kt-formular .knopf[aria-disabled="true"] { cursor: progress; }

/* Rückmeldungen: Assistent (WebMCP) als leise Zeile, Versand als Kasten. Erfolg in Petrol, Fehler mit Rahmen;
   die Aussage steht immer im Text. Leere Zeilen nehmen keinen Platz ein, bleiben aber Live-Regionen. */
.kt-formular .qmp-webmcp-status:not(:empty) { margin-bottom: 1.25rem; font-size: .95rem; font-weight: 500; line-height: 1.55; color: var(--petrol); }
.kt-status { scroll-margin-top: 1.5rem; }
.kt-status[data-art] { margin-bottom: 1.75rem; padding: 1rem 1.25rem; border-radius: 6px; font-weight: 500; line-height: 1.55; }
.kt-status[data-art="ok"] { background: var(--petrol); color: var(--weiss); }
.kt-status[data-art="fehler"] { border: 1px solid var(--ink); background: var(--weiss); color: var(--ink); }
.kt-status[data-art="ok"]:focus-visible { outline-color: var(--ink); }
/* Ohne JavaScript: senden.php leitet mit #formstatus zurück, dann erscheint der Hinweis mit der Adresse */
.kt-status__ohne-js { display: none; }
#formstatus:target .kt-status__ohne-js { display: block; margin-bottom: 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--ink); border-radius: 6px; background: var(--weiss); color: var(--ink); font-weight: 500; line-height: 1.55; }
/* WebMCP: Rahmen, solange ein Assistent das Formular bearbeitet (Browser ohne WebMCP übergehen die Regeln) */
.kt-formular:tool-form-active { outline: 3px solid var(--petrol); outline-offset: 6px; }
.kt-formular .knopf:tool-submit-active { outline: 3px solid var(--petrol); outline-offset: 3px; }

/* Direkter Kontakt: Person links, Adresse und Arbeitsweise rechts */
.kt-direkt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 5rem; align-items: start; }
.kt-person { display: grid; justify-items: start; gap: 1.1rem; }
.kt-person img { width: 10rem; height: 10rem; border-radius: 50%; object-fit: cover; background: var(--weiss); }
.kt-person figcaption { display: grid; gap: .2rem; font-size: .95rem; line-height: 1.45; color: var(--leise); }
.kt-person strong { font-size: 1.15rem; font-weight: 500; color: var(--ink); }
.kt-mail { margin-top: 1.4rem; font-size: clamp(1.35rem, 3vw, 2.25rem); line-height: 1.25; letter-spacing: -.012em; overflow-wrap: anywhere; }
.kt-mail a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-thickness .2s var(--aus); }
.kt-mail a:hover { text-decoration-thickness: 2px; }
.kt-orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.kt-ort { padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.kt-ort h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.kt-ort p { margin-top: .7rem; font-size: 1rem; }
.kt-ort strong { color: var(--ink); font-weight: 500; }

@media (max-width: 860px) {
  .kt-anfrage, .kt-direkt { grid-template-columns: minmax(0, 1fr); }
  .kt-anfrage__hinweise { padding-top: 0; }
  .kt-person { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 1.25rem; }
  .kt-person img { width: 5.5rem; height: 5.5rem; }
}
@media (max-width: 640px) {
  .kt-formular { padding: 1.5rem 1.25rem; }
  .kt-formular .knopf { width: 100%; }
  .kt-orte { grid-template-columns: minmax(0, 1fr); }
}

/* --- leistungen.css --- */
/* ===== Leistungsübersicht (/leistungen/): Kürzel .ls- =====
   Die sechs Leistungen als Verzeichnis in Zeilen (Art und Name, Beschreibung, Preis), keine Kartenreihe.
   Der externe QMB als laufende Rolle liegt auf Petrol, wie Stufe 2 und das Kernangebot der Startseite. */
.ls-verzeichnis { border-top: 1px solid var(--ink); }
.ls-leistung { position: relative; display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 5fr) minmax(18.5rem, 3.2fr); gap: .75rem 3rem; align-items: start; padding: 2rem 0 2.1rem; border-bottom: 1px solid var(--linie); }
.ls-leistung__art { font-size: .875rem; font-weight: 500; color: var(--stahl); }
.ls-leistung h3 { margin-top: .35rem; font-size: 1.45rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.ls-leistung__text { font-size: 1rem; max-width: 34rem; }
.ls-leistung__betrag { color: var(--ink); font-size: 1.35rem; line-height: 1.25; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ls-leistung__fuer { margin-top: .3rem; font-size: .9rem; line-height: 1.45; color: var(--leise); }
.ls-leistung .pfeil-link { margin-top: .9rem; min-height: 2.75rem; color: var(--petrol); }
/* Die ganze Zeile führt zur Leistungsseite, wie live die ganze Karte */
.ls-leistung .pfeil-link::after { content: ""; position: absolute; inset: 0; }
.ls-leistung:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ls-leistung:hover .pfeil-link span { text-decoration: underline; text-underline-offset: .25em; }
.ls-leistung:hover .pfeil-link svg { transform: translateX(4px); }

.ls-leistung--kern { --ls-einzug: clamp(.75rem, 3vw, 1.75rem); margin: -1px calc(-1 * var(--ls-einzug)) 0; padding: 2.25rem var(--ls-einzug) 2.35rem; border-bottom: 0; border-radius: 12px; background: var(--petrol); color: rgba(255, 255, 255, .86); background-image: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%); }
.ls-leistung--kern h3, .ls-leistung--kern .ls-leistung__betrag, .ls-leistung--kern .pfeil-link { color: var(--weiss); }
.ls-leistung--kern .ls-leistung__art { color: var(--grau-lesen); }
.ls-leistung--kern .ls-leistung__fuer { color: rgba(255, 255, 255, .8); }
.ls-leistung--kern :focus-visible { outline-color: var(--weiss); }

.ls-fuss { margin-top: 2rem; max-width: 46rem; }
.ls-fuss p:first-child { font-size: .95rem; color: var(--leise); }
.ls-fuss .pfeil-link { margin-top: .75rem; min-height: 2.75rem; color: var(--petrol); }

/* Mit Zertifikat oder ohne: Wege als Verweiszeilen in den Karten */
.ls-pfade { margin-top: 1.5rem; border-top: 1px solid var(--linie); }
.ls-pfade li { border-bottom: 1px solid var(--linie); }
.ls-pfade a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: .75rem 0; color: var(--ink); font-weight: 500; line-height: 1.4; text-decoration: none; }
.ls-pfade a::after { content: ""; flex: none; width: .5rem; height: .5rem; margin-right: .2rem; border-top: 1.6px solid var(--petrol); border-right: 1.6px solid var(--petrol); transform: rotate(45deg); transition: transform .35s var(--aus); }
.ls-pfade a:hover { color: var(--petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ls-pfade a:hover::after { transform: translateX(3px) rotate(45deg); }

/* Projekt oder laufende Begleitung: drei Einstiege als Zeilen */
.fliess .ls-wege { margin-top: 2rem; max-width: none; border-top: 1px solid var(--ink); }
.ls-wege li { border-bottom: 1px solid var(--linie); }
.ls-wege a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; padding: 1.35rem 0 1.4rem; color: inherit; text-decoration: none; }
.ls-wege strong { grid-column: 1; color: var(--ink); font-size: 1.2rem; font-weight: 500; line-height: 1.3; }
.ls-wege span { grid-column: 1; margin-top: .35rem; font-size: 1rem; }
.ls-wege a::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: .55rem; height: .55rem; margin-right: .2rem; border-top: 1.6px solid var(--petrol); border-right: 1.6px solid var(--petrol); transform: rotate(45deg); transition: transform .35s var(--aus); }
.ls-wege a:hover strong { color: var(--petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ls-wege a:hover::after { transform: translateX(3px) rotate(45deg); }
.ls-weiter { margin-top: 1.75rem !important; font-size: 1rem; }

@media (max-width: 1080px) {
  .ls-leistung { grid-template-columns: minmax(0, 1fr) minmax(0, 18.5rem); gap: .9rem 2.5rem; }
  .ls-leistung__kopf { grid-column: 1; grid-row: 1; }
  .ls-leistung__text { grid-column: 1; grid-row: 2; }
  .ls-leistung__preis { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  .ls-leistung { grid-template-columns: minmax(0, 1fr); gap: .7rem; padding: 1.6rem 0 1.5rem; }
  .ls-leistung__preis { grid-column: 1; grid-row: auto; margin-top: .4rem; }
  .ls-leistung--kern { padding: 1.75rem var(--ls-einzug) 1.6rem; }
  .ls-leistung h3 { font-size: 1.3rem; }
  .ls-leistung .pfeil-link { margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-leistung:hover .pfeil-link svg { transform: none; }
}

/* --- modell.css --- */
/* ===== Modelle & Preise (/modell/), Kürzel mo- =====
   Die Übersicht folgt dem Satz der Seite: zwei Wege der Zusammenarbeit nebeneinander, der System-Check als
   Bestandsaufnahme, die bei Bedarf vorausgeht, als eigene Zeile darunter. Keine drei gleichen Karten. */
.mo-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.mo-weg { display: flex; flex-direction: column; padding: 2.25rem 2rem 2rem; border-radius: 12px; background: var(--flaeche); color: var(--text); text-decoration: none; transition: box-shadow .3s var(--aus), border-color .3s var(--aus); }
.mo-weg h3 { font-size: 1.3rem; font-weight: 500; line-height: 1.25; }
.mo-weg__preis { margin-top: 1.25rem; color: var(--ink); font-size: 2.25rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mo-weg__preis small { display: block; margin-top: .5rem; font-size: .95rem; letter-spacing: 0; color: var(--leise); }
.mo-weg__text { margin-top: 1.1rem; font-size: 1rem; max-width: 32rem; }
/* Verweis als Fließtext, damit der Pfeil auch nach einem Zeilenumbruch am letzten Wort bleibt */
.mo-weg__mehr { display: block; margin-top: auto; padding-top: 1.75rem; color: var(--petrol); font-weight: 500; }
.mo-weg__mehr svg { display: inline-block; margin-left: .5rem; vertical-align: -.2em; transition: transform .35s var(--aus); }
.mo-weg:hover .mo-weg__mehr span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.mo-weg:hover .mo-weg__mehr svg { transform: translateX(4px); }
.mo-weg:hover { box-shadow: inset 0 0 0 1px var(--linie); }
/* Laufende Begleitung: das Kernangebot in Petrol, wie Stufe 2 */
.mo-weg--haupt { background: var(--petrol); color: rgba(255, 255, 255, .86); background-image: radial-gradient(130% 90% at 50% 0%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 65%); }
.mo-weg--haupt h3, .mo-weg--haupt .mo-weg__preis, .mo-weg--haupt .mo-weg__mehr { color: var(--weiss); }
.mo-weg--haupt .mo-weg__preis small { color: rgba(255, 255, 255, .84); }
.mo-weg--haupt:hover { box-shadow: 0 14px 28px -18px rgba(26, 51, 64, .7); }
/* System-Check: vorgelagert, deshalb Rahmen statt Fläche und quer über beide Spalten */
.mo-weg--vorab { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; grid-template-areas: "titel text mehr" "preis text mehr"; column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; padding: 2rem; background: var(--weiss); border: 1px solid var(--linie); }
.mo-weg--vorab h3 { grid-area: titel; }
.mo-weg--vorab .mo-weg__preis { grid-area: preis; }
.mo-weg--vorab .mo-weg__text { grid-area: text; margin-top: 0; padding-top: .15rem; }
.mo-weg--vorab .mo-weg__mehr { grid-area: mehr; align-self: end; padding-top: 0; white-space: nowrap; }
.mo-weg--vorab:hover { box-shadow: none; border-color: var(--petrol); }

/* Laufende Begleitung: Spannen statt ab-Preise, deshalb etwas kleiner als auf der Startseite */
.mo-stufen .preis { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; }
@media (min-width: 861px) and (max-width: 1080px) { .mo-stufen .stufe { padding-left: 1.6rem; padding-right: 1.6rem; } }
/* Bedingungen der laufenden Begleitung: gleiche Zeilen wie „Gilt für“ auf der Seite Externer QMB, mit Überschriften wie live */
.mo-bedingungen h3 { color: var(--ink); font-weight: 500; font-size: 1.05rem; line-height: 1.45; }
.mo-bedingungen p { max-width: 46rem; font-size: 1rem; }
.mo-bedingungen > div[id], .mo-rahmen { scroll-margin-top: 1.5rem; }
.bedingungen.mo-bedingungen--oben { margin-top: 0; }
.mo-rahmen { margin-top: clamp(4.5rem, 9vw, 6.5rem); }

/* Was die Stufen enthalten: drei Spalten in der Reihenfolge der Stufen */
.mo-umfang .aufgabe p { max-width: 34rem; }
.mo-umfang .liste { margin-top: 1.1rem; font-size: 1rem; }
@media (min-width: 1081px) { .mo-umfang h3 { min-height: calc(2em * 1.3); } }

/* Preistabelle der Projekte */
.mo-preistabelle .mo-sp-projekt { width: 26%; }
.mo-preistabelle .mo-sp-preis { width: 12%; }
.mo-preistabelle .mo-sp-richtwert { width: 19%; }
.mo-preistabelle td.mo-preis { color: var(--ink); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mo-preistabelle td.mo-richtwert { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mo-preistabelle td.mo-offen { color: var(--ink); font-weight: 500; }
/* Am Telefon: Preis für einen Standort und Richtwert nebeneinander, damit beide Beträge vergleichbar bleiben (unter 360 px gestapelt) */
@media (min-width: 360px) and (max-width: 760px) {
  .mo-preistabelle .tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 1.25rem; align-items: end; }
  .mo-preistabelle .tabelle tr > th, .mo-preistabelle .tabelle tr > td:not(.mo-preis):not(.mo-richtwert) { grid-column: 1 / -1; }
}

/* System-Check: Preis im Preisbaustein wie auf der Seite Externer QMB */
.mo-check__preis { max-width: 40rem; font-size: 1.1rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.mo-check__preis strong { display: block; margin-bottom: .75rem; color: var(--weiss); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mo-check .pfeil-link { margin-top: 0; min-height: 2.75rem; }

@media (max-width: 1080px) {
  .mo-weg--vorab { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "titel text" "preis mehr"; }
  .mo-weg--vorab .mo-weg__mehr { padding-top: 1.25rem; }
  .mo-umfang { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .mo-umfang { max-width: none; }
  .mo-umfang .aufgabe { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 2.5rem; align-items: start; }
  .mo-umfang .aufgabe h3 { grid-row: 1 / span 2; }
  .mo-umfang .aufgabe p { margin-top: 0; }
}
@media (max-width: 860px) {
  .mo-wege { grid-template-columns: minmax(0, 1fr); }
  .mo-weg--vorab { display: flex; flex-direction: column; padding: 2.25rem 2rem 2rem; }
  .mo-weg--vorab .mo-weg__text { margin-top: 1.1rem; padding-top: 0; }
  .mo-weg--vorab .mo-weg__mehr { align-self: flex-start; padding-top: 1.75rem; white-space: normal; }
}
@media (max-width: 640px) {
  .mo-weg, .mo-weg--vorab { padding: 1.75rem 1.4rem 1.6rem; }
  .mo-weg__preis { font-size: 2rem; }
}
/* Druck: Petrolflächen verlieren ihren Hintergrund, deshalb weiße Schrift auf Schwarz umstellen */
@media print {
  .mo-weg--haupt { background: none !important; color: #000 !important; box-shadow: inset 0 0 0 1px #000; }
  .mo-weg--haupt h3, .mo-weg--haupt .mo-weg__preis, .mo-weg--haupt .mo-weg__preis small, .mo-weg--haupt .mo-weg__mehr,
  .mo-check__preis, .mo-check__preis strong, .mo-check .pfeil-link { color: #000 !important; }
}

/* --- qm-handbuch.css --- */
/* ===== Leistungsseite QM-Handbuch (/qm-handbuch/), Kürzel hb- ===== */

/* Muster der Gliederung: das Inhaltsverzeichnis als Blatt, daneben Titel und Einleitung */
.hb-muster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 5rem; align-items: start; }
.hb-muster__text .einleitung { margin-top: 1.5rem; max-width: 26rem; }
.hb-blatt { padding: clamp(1.5rem, 3.4vw, 2.6rem) clamp(1.25rem, 3.6vw, 2.85rem) clamp(1.35rem, 3vw, 2.1rem); background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .45); }
.hb-gliederung { border-top: 2px solid var(--ink); }
.hb-gliederung li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; padding: .95rem 0 1rem; border-bottom: 1px solid var(--linie); }
.hb-gliederung__nr { color: var(--petrol); font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.hb-gliederung__titel { color: var(--ink); font-size: 1.075rem; font-weight: 500; line-height: 1.4; }
.hb-gliederung__unter { display: block; margin-top: .2rem; color: var(--leise); font-size: .95rem; font-weight: 400; line-height: 1.5; }
.hb-blatt__fuss { margin-top: 1.15rem; font-size: .95rem; color: var(--leise); }

/* Fünf Schritte: die Ziffer steht im Wortlaut der Überschrift und wird als Kreis gesetzt (statt des Zählers) */
.hb-ablauf li::before { content: none; }
.hb-ablauf .hb-nr { position: absolute; top: 0; left: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--petrol); color: var(--petrol); display: grid; place-items: center; font-size: .9rem; font-weight: 500; line-height: 1; }
.hb-ablauf p { max-width: 24rem; }

/* Weiterlesen: Liste rechts neben dem Titel */
.hb-lesen { max-width: 42rem; }

@media (max-width: 1080px) {
  .hb-muster { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hb-blatt { max-width: 44rem; }
}
@media (max-width: 640px) {
  .hb-gliederung li { grid-template-columns: 2rem minmax(0, 1fr); }
}

/* --- system-check.css --- */
/* ===== System-Check (/system-check/) =====
   Seitenkopf: der erste Schritt als Satz mit Link, wie live. Ablauf als Zeitachse, die Nummer steht im Titel
   (live „1. Bestandsaufnahme“), deshalb Punkte statt gezählter Kreise. Musteraufbau als Berichtsblatt wie der
   Prüfspiegel der Startseite, Ampel mit .ampel aus komponenten.css, Maßnahmenplan bei jeder Breite als Karten. */

/* Seitenkopf */

/* Maßstab: Sprungziel vieler Seiten, als ruhige Fläche im Fließtext */
.fliess .sc-massstab { margin-top: 1.75rem; margin-bottom: 1.75rem; scroll-margin-top: 1.5rem; }
.sc-massstab:target { box-shadow: 0 0 0 2px var(--petrol); }

/* Preis: ein einziger Festpreis, deshalb als Preisschild neben der Überschrift statt als leeres Band */
.sc-preiskopf { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); align-items: end; gap: 1.75rem 3rem; }
.sc-preiskopf .preisbaustein { justify-self: start; margin-top: 0; padding: 1.6rem 2rem 1.75rem; }
.sc-preis .preiszeilen dd p { margin-top: .6rem; }
.sc-preis .preiszeilen strong { min-width: 0; margin-right: .35rem; }

/* Ablauf: drei Schritte auf einer Achse */
.sc-ablauf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; }
.sc-ablauf li { position: relative; padding-top: 2.4rem; }
.sc-ablauf li::before { content: ""; position: absolute; top: 0; left: 0; width: .8rem; height: .8rem; border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 5px var(--flaeche); }
.sc-ablauf li::after { content: ""; position: absolute; top: calc(.4rem - .5px); left: 1.6rem; right: -2.4rem; height: 1px; background: var(--grau); }
.sc-ablauf li:last-child::after { display: none; }
.sc-ablauf h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.sc-ablauf__nr { color: var(--stahl); font-variant-numeric: tabular-nums; }
.sc-ablauf p { margin-top: .65rem; font-size: 1rem; max-width: 34rem; }

/* Musteraufbau schließt an den Ablauf an (Schritt 3 ist der Bericht) und teilt dessen Fläche */
.unterseite .sc-anschluss { padding-top: 0; }

/* Berichtsblatt */
.sc-bericht { padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4.5vw, 3.5rem) clamp(1.75rem, 4vw, 3rem); background: var(--weiss); border-radius: 12px; box-shadow: 0 1px 0 var(--linie), 0 30px 60px -40px rgba(15, 23, 42, .45); }
.sc-bericht__teil { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1.25rem 4rem; padding: 2rem 0 2.25rem; border-top: 1px solid var(--linie); }
.sc-bericht__teil:first-child { padding-top: 1.6rem; border-top: 2px solid var(--ink); }
.sc-bericht__teil:last-child { padding-bottom: 0; }
.sc-bericht h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.sc-bericht__kopf p { margin-top: .6rem; max-width: 22rem; font-size: 1rem; }
.sc-bericht .tabelle-rahmen { margin-top: 0; min-width: 0; }

/* Gliederung und Prüfbereiche: Nummer, Titel, Erläuterung wie die Zeilen im Prüfspiegel */
.sc-liste li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding: .85rem 0 .9rem; border-bottom: 1px solid var(--linie); }
.sc-liste li:first-child { padding-top: .1rem; }
.sc-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.sc-liste__nr { color: var(--stahl); font-variant-numeric: tabular-nums; line-height: 1.5; }
.sc-liste__titel { color: var(--ink); font-size: 1.05rem; font-weight: 500; line-height: 1.5; }
.sc-liste__text { display: block; margin-top: .1rem; color: var(--text); font-size: .95rem; font-weight: 400; line-height: 1.5; }

/* Ampel: Stufe als Wort mit Punkt, Kriterium daneben */
.sc-ampel thead th:first-child { width: 8rem; }
.sc-ampel tbody th { white-space: nowrap; }
.sc-ampel tbody tr:last-child th, .sc-ampel tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }

/* Maßnahmenplan: jede Zeile eine Karte, Befund oben, die vier Felder darunter */
.tabelle.sc-plan tbody { display: grid; gap: .85rem; }
.tabelle.sc-plan tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; padding: 1.3rem 1.5rem 1.4rem; border: 0; border-radius: 10px; background: var(--flaeche); }
.tabelle.sc-plan td { padding: 0; }
.tabelle.sc-plan td:first-child { grid-column: 1 / -1; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.tabelle.sc-plan td[data-label]::before { margin: 0 0 .2rem; }
.sc-plan .ampel { margin-right: .5rem; vertical-align: -.05em; }
.sc-plan .ampel::before { box-shadow: 0 0 0 3px var(--weiss); }

@media (max-width: 1080px) {
  /* Achse senkrecht, sobald drei Spalten zu schmal für die Texte werden */
  .sc-ablauf { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .sc-ablauf li { padding: 0 0 0 2.25rem; }
  .sc-ablauf li::before { top: .45rem; }
  .sc-ablauf li::after { top: 1.85rem; bottom: -1.85rem; left: calc(.4rem - .5px); right: auto; width: 1px; height: auto; }
  .sc-ablauf p { max-width: 42rem; }
  /* Berichtsblatt einspaltig, damit der Maßnahmenplan die volle Blattbreite bekommt */
  .sc-bericht__teil { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .sc-bericht__kopf p { max-width: 36rem; }
}
@media (max-width: 860px) {
  .sc-preiskopf { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sc-ampel tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .sc-ampel td[data-label]::before { margin-top: .6rem; }
}
@media (max-width: 640px) {
  .sc-bericht { padding: 1.25rem 1rem 1.5rem; }
  .tabelle.sc-plan tr { grid-template-columns: minmax(0, 1fr); gap: .85rem; padding: 1.1rem 1rem 1.2rem; }
}
@media print {
  .sc-bericht { box-shadow: none; border: 1px solid var(--linie); }
}

/* --- ueber-mich.css --- */
/* ===== Über mich (/ueber-mich/), Kürzel .um- =====
   Porträt neben dem Namen im Seitenkopf. Die Qualifikationen stehen als Verzeichnis in drei Gruppen auf derselben
   Achse wie die Textabschnitte (5 : 7): Bereich links, Abschlüsse rechts. Weitere Angebote als leise Zeile. */

/* Seitenkopf: Name, Satz und Ort links, Porträt rechts */
.um-kopf__raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: center; }
/* Der feine Ring sitzt außerhalb des Bildes; der Außenabstand hält ihn auf der Satzkante */
.um-kopf__bild { width: clamp(9rem, 16vw, 14rem); margin: 1.75rem .7rem 0; }
.um-kopf__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--weiss); outline: 1px solid rgba(255, 255, 255, .26); outline-offset: .6rem; }
.um-kopf__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 2.5rem; max-width: 38rem; margin-top: 2rem; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.um-kopf__ort { font-size: 1rem; color: var(--grau-lesen); }
.seitenkopf.um-kopf .pfeil-link { min-height: 2.75rem; }

/* Qualifikationen */
.um-quali { border-top: 1px solid var(--ink); }
.um-quali__gruppe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 5rem; align-items: baseline; padding: 1.6rem 0 1.85rem; border-bottom: 1px solid var(--linie); }
.um-quali__bereich { color: var(--ink); font-size: 1.2rem; font-weight: 500; line-height: 1.35; }
.um-quali__liste { display: grid; gap: 1.15rem; }
.um-quali__titel, .um-quali__beleg { display: block; }
.um-quali__titel { color: var(--ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
.um-quali__beleg { margin-top: .15rem; font-size: .95rem; line-height: 1.5; color: var(--leise); }
.um-quali__fuss { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 5rem; margin-top: 1.75rem; }
.um-quali__fuss > p { grid-column: 2; }
.fliess.um-quali__fuss p + p { margin-top: 1.25rem; }
.um-quali__nachweis { color: var(--ink); }

/* So arbeite ich und weitere Angebote in einem Abschnitt, die weiteren Angebote leiser */
.um-weitere { align-items: baseline; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--linie); }
.unterseite main .um-weitere h2 { font-size: clamp(1.4rem, 2vw, 1.65rem); line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }

@media (max-width: 860px) {
  .um-quali__gruppe, .um-quali__fuss { grid-template-columns: minmax(0, 1fr); }
  .um-quali__fuss > p { grid-column: 1; }
}
@media (max-width: 640px) {
  .um-kopf__raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .um-kopf__bild { order: -1; width: 7.5rem; }
  .um-kopf__zeile { gap: 0 2rem; }
}

/* --- zertifizierung-iso-9001-azav.css --- */
/* ===== Leistungsseite Zertifizierung vorbereiten (/zertifizierung-iso-9001-azav/), Kürzel zv- =====
   Drei Verfahren, eine Abfolge, drei Preise. Die Verfahren stehen als Zeilen im Raster der Textabschnitte
   (5 zu 7), der Ablauf als senkrechte Folge; der letzte Schritt ist ein Angebot auf Wunsch und deshalb gestrichelt. */

/* Drei Verfahren: links Verfahren und für wen es gedacht ist, rechts was Sie erhalten */
.zv-verfahren { border-top: 1px solid var(--ink); }
.zv-verfahren__zeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem 5rem; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; border-bottom: 1px solid var(--linie); }
.zv-verfahren__kopf h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.zv-verfahren__kopf p { margin-top: .8rem; max-width: 26rem; font-size: 1.0625rem; }
.zv-verfahren__titel { font-size: .9rem; font-weight: 500; color: var(--stahl); }
.zv-verfahren__inhalt .zv-verfahren__titel + .liste { margin-top: .7rem; }
.zv-verfahren__inhalt .liste + .zv-verfahren__zusatz { margin-top: 1.25rem; }

/* Ablauf in fünf Schritten: die Ziffer aus der Überschrift im Kreis, die Schritte durch eine feine Linie verbunden */
.zv-ablauf li { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: .5rem 5rem; padding: 1.5rem 0 1.65rem; }
.zv-ablauf li + li::before { content: ""; position: absolute; top: 0; left: 3.25rem; right: 0; height: 1px; background: var(--linie); }
.zv-ablauf li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.125rem - .5px); top: 4.1rem; bottom: -1.15rem; width: 0; border-left: 1px solid var(--grau); }
.zv-ablauf li:has(+ .zv-ablauf__wahl)::after { border-left-style: dashed; }
.zv-ablauf h3 { position: relative; min-height: 2.25rem; padding: .3rem 0 0 3.25rem; font-size: 1.2rem; font-weight: 500; line-height: 1.35; }
.zv-nr { position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--petrol); background: var(--weiss); color: var(--petrol); display: grid; place-items: center; font-size: .9rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.zv-ablauf__wahl .zv-nr { border-style: dashed; }
.zv-ablauf p { padding-top: .3rem; max-width: 40rem; font-size: 1.0625rem; }
.zv-ablauf a { color: var(--petrol); text-underline-offset: .2em; }

/* Preisbaustein: Beträge in eigener Spalte, der Festpreis nach dem System-Check als Wort statt Zahl */
.zv-preis .preiszeilen dd p { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: 1.5rem; align-items: baseline; }
.zv-preis .preiszeilen strong { min-width: 0; }
.zv-preis .preiszeilen .zv-preis__wort { font-size: clamp(1.2rem, 1.7vw, 1.35rem); line-height: 1.3; letter-spacing: 0; }

@media (max-width: 860px) {
  .zv-verfahren__zeile { grid-template-columns: minmax(0, 1fr); }
  .zv-verfahren__kopf p { max-width: 40rem; }
  .zv-ablauf li { grid-template-columns: minmax(0, 1fr); }
  .zv-ablauf p { padding-left: 3.25rem; padding-top: 0; }
}
@media (max-width: 640px) {
  .zv-preis .preiszeilen dd p { grid-template-columns: minmax(0, 1fr); row-gap: .25rem; }
  .zv-ablauf h3 { padding-left: 3rem; }
  .zv-ablauf p { padding-left: 3rem; }
  .zv-ablauf li + li::before { left: 3rem; }
}

/* --- zz-inseln-global.css --- */
/* Globale Regeln für die Werkzeug-Inseln, übernommen aus dem Live-Feinschliff (Divi-Kopf, Stand 24.09.2026),
   Selektoren auf .qmp-insel umgeschrieben. Erzeugt von werkzeuge/umzug/inseln_global.py, nicht von Hand ändern. */
/* a) Links im Fließtext der Werkzeuge: sichtbarer Unterstrich (live über a.qmp-il) */
.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(p, li, td, th, dd, figcaption, label, span, div) > a[href]:not([class]):not([role]) {
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: rgba(38, 66, 83, 0.6) !important;
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent) !important;
  text-decoration-thickness: max(1px, 0.08em) !important;
  text-underline-offset: 0.18em !important;
}
.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(p, li, td, th, dd, figcaption, label, span, div) > a[href]:not([class]):not([role]):is(:hover, :focus-visible) { text-decoration-color: currentColor !important; }

/* f) Druckansicht: nur der Inhalt, schwarz auf weiss, oben Titel und Adresse.
      Werkzeuge drucken ihren aktuellen Zustand. Konvention fuer alle Seiten:
      .qmp-druck-weg entfaellt im Druck, .qmp-druck-nur erscheint nur im Druck.
      Aktionsknoepfe ohne aria-pressed entfallen, gedrueckte Auswahlknoepfe
      bleiben angekreuzt, nicht gedrueckte entfallen. Eingabefelder drucken
      ihren Wert, verborgene Ergebnisse bleiben verborgen. Ueber jedem Werkzeug
      steht eine Zeile mit Datum und Adresse (Text setzt das Skript im Kopf).
      Diese Regeln tragen die ID viermal, damit sie auch gegen die dreifache
      ID der Grundregeln gewinnen. */
@media not print {
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel .qmp-druck-nur { display: none !important; }
}
@media print {
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel,
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel * {
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Ausblenden: Inhaltsverzeichnis, Kontaktkaesten, Knoepfe, Suche, Formular */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-toc, .qmp-blog-cta, .qmp-final-cta, .qmp-about-cta, div.qmp-cta, a.qmp-cta, .qmp-btn:not([aria-pressed="true"]), .qmp-btn-group, .qmp-blog-item-cta, .qmp-card-more, .qmp-search-wrap, .qmp-form-wrap, .qmp-sc-print, .qmp-cl-print, .qmp-card-tog, .qmp-faq-ic, .qmp-faq-ico) {
    display: none !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel .qmp-druck-weg { display: none !important; }

  /* Werkzeuge im aktuellen Zustand. Neue Werkzeuge tragen an der Wurzel die
     Klasse qmp-werkzeug (oder eine der bestehenden Klassen). Wo alle
     Auswahlknoepfe Inhalt sind (etwa Zellen einer Matrix), setzt das Werkzeug
     qmp-druck-alle: Dann bleiben auch die nicht gewaehlten stehen. */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 12pt 0 !important;
    padding: 8pt 10pt !important;
    overflow: visible !important;
    background: none !important;
    border: 1px solid #6B7280 !important;
    border-radius: 0 !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug)::before {
    content: var(--qmp-druck-werkzeug, "Werkzeug, online: qm-praxiswerk.de") !important;
    display: block !important;
    position: static !important;
    margin: 0 0 6pt !important;
    padding: 0 0 4pt !important;
    border: 0 !important;
    border-bottom: 1px solid #6B7280 !important;
    background: none !important;
    color: #6B7280 !important;
    font-size: 8.5pt !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    overflow-wrap: anywhere;
    break-after: avoid;
    page-break-after: avoid;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) * {
    color: #111827 !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
    outline: none !important;
  }
  /* Balken, deren Laenge einen Wert zeigt, bleiben als graue Flaeche */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) :is([class$="-fill"], [class*="-fill "], [class*="-bar-f"]) {
    background-color: #6B7280 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Aktionsknoepfe und nicht gewaehlte Auswahlknoepfe entfallen */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) :is(:is(button, [role="button"], [role="tab"], [role="switch"], input[type="button"], input[type="submit"], input[type="reset"]):not([aria-pressed], [aria-expanded="true"], [aria-selected="true"], [aria-checked="true"], [aria-checked="mixed"]), :is([aria-pressed="false"], [role="tab"][aria-selected="false"], [role="switch"][aria-checked="false"]):not(.qmp-druck-alle *)) {
    display: none !important;
  }
  /* Gewaehltes: angekreuzt, gerahmt, fett. Zierzeichen darin entfallen. */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) :is(:is([aria-pressed="true"], [aria-pressed="mixed"], [role="tab"][aria-selected="true"], [role="switch"][aria-checked="true"]), :is(input[type="radio"], input[type="checkbox"]):checked + :is(label, span), label:has(> :is(input[type="radio"], input[type="checkbox"]):checked):not(:has(> input + :is(label, span)))) {
    color: #111827 !important;
    background: none !important;
    border: 1.5pt solid #111827 !important;
    font-weight: 700 !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) :is(:is([aria-pressed="true"], [aria-pressed="mixed"], [role="tab"][aria-selected="true"], [role="switch"][aria-checked="true"]), :is(input[type="radio"], input[type="checkbox"]):checked + :is(label, span), label:has(> :is(input[type="radio"], input[type="checkbox"]):checked):not(:has(> input + :is(label, span))))::before {
    content: "\2612\00a0" !important;
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    transform: none !important;
    opacity: 1 !important;
    font-weight: 400 !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) :is([aria-pressed="true"], [aria-pressed="mixed"], [role="tab"][aria-selected="true"], [role="switch"][aria-checked="true"]) [aria-hidden="true"] {
    display: none !important;
  }
  /* Eingabefelder zeigen ihren Wert, keinen Platzhalter; lange Texte ganz */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) :is(input, select, textarea) {
    color: #111827 !important;
    background: none !important;
    border: 1px solid #6B7280 !important;
    box-shadow: none !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) :is(input, textarea)::placeholder {
    color: transparent !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) textarea {
    field-sizing: content;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    resize: none !important;
  }
  /* Breite Teile nicht abschneiden (Tabellen: allgemeine Regel weiter unten) */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) :is([class*="-wrap"], [class*="scroll"], [class$="-tw"], [class$="-mw"], [role="region"][tabindex]) {
    max-width: 100% !important;
    overflow: visible !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-calc, .qmp-tree, .qmp-amp, .qmp-zv, .qmp-tr, .qmp-sz, .qmp-sort, .qmp-sim, .qmp-rb, .qmp-pl, .qmp-nv, .qmp-nk, .qmp-mx, .qmp-mf, .qmp-gen, .qmp-fp, .qmp-fb, .qmp-bk, .qmp-ampel, .qmp-sc, .qmp-check, .qmp-cmp, .qmp-werkzeug) :is(.qmp-field, fieldset, tr, li, [role="group"]) {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* FAQ und aufklappbare Erlaeuterungen: alles ausgeklappt */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel .qmp-faq-a[hidden] { display: block !important; }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-card-exp, .qmp-step-body, .qmp-block-body, .qmp-chain-body, .qmp-pmap-body) {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel details::details-content {
    content-visibility: visible !important;
    display: block !important;
  }

  /* Dunkle Kaesten und Flaechen: schwarz auf weiss mit duennem Rahmen */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-darkblock, .qmp-def, .qmp-leitgedanke, .qmp-highlight, .qmp-price-card.featured, .qmp-cl-head, .qmp-pmap-head, .qmp-block-head, .qmp-grade--d) {
    background: none !important;
    color: #111827 !important;
    border: 1px solid #6B7280 !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-darkblock, .qmp-def, .qmp-leitgedanke, .qmp-highlight, .qmp-price-card.featured, .qmp-cl-head, .qmp-pmap-head, .qmp-block-head, .qmp-grade--d) * {
    background: none !important;
    color: #111827 !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-tag, .qmp-blog-item-tag, .qmp-step-n, .qmp-step-num, .qmp-vs-cell, .qmp-art-pflicht, .qmp-qual-dot, .qmp-chain-arrow, .qmp-maturity-seg.active, .qmp-vs-header span) {
    background: none !important;
    color: #111827 !important;
    border: 1px solid #6B7280 !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel th {
    background: none !important;
    color: #111827 !important;
    border-bottom: 1.5px solid #111827 !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel th * { color: #111827 !important; }

  /* Linkadresse nur in den Quellenlisten */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-src, .qmp-quellen) a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  /* Tabellen duerfen nicht abgeschnitten werden: Die Mindestbreite fuer das
     Wischen auf dem Handy entfaellt, die Zellen brechen um. */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(.qmp-tw, .qmp-tablewrap) { overflow: visible !important; }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :has(> table) { overflow: visible !important; }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(td, th) {
    white-space: normal !important;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel thead { display: table-header-group !important; }

  /* Seitenumbrueche */
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(h1, h2, h3, h4, .qmp-label, .qmp-sh) {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(tr, figure, img, .qmp-sh, .qmp-faq-i, .qmp-def, .qmp-darkblock, .qmp-aside, .qmp-pull, .qmp-bsp, .qmp-price-card, .qmp-card, .qmp-block, .qmp-chain-step, .qmp-pmap-level, .qmp-step, .qmp-steps > li, .qmp-kf, .qmp-author) {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel :is(p, li, dd) {
    orphans: 3;
    widows: 3;
  }
}

/* j) Das hidden-Attribut wirkt im Inhalt immer, auch gegen Seitenregeln mit
      display und !important (etwa die Absatz-Grundregel oder einen Filter).
      Einzige Ausnahme: Im Druck erscheinen die FAQ-Antworten aufgeklappt
      (Regel mit vier IDs in Abschnitt f). */
.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel.qmp-insel [hidden]:not([hidden="until-found" i]) {
  display: none !important;
}