/* Website 2.0: Unterseiten (Übersichten, Artikel, Rechtstexte, StartBereit, Datenaudit, Erstgespräch, 404) im Bauhaus-Stil
   der Plug-in-Seiten, dazu Cookie-Banner und Kontakt-Dialog für alle Unterseiten und das Kontaktformular der Startseite.
   Baut auf plugins/plugin-seite.css auf (Farben, Kopf, Fuß). Keine Rundungen, keine Schatten. */
:root { --f-head: "Jost", system-ui, sans-serif; --rule: 1.5px solid var(--ink, #172226); }

/* ---------- Kopfzeile: Kontakt-Knopf neben "Termin buchen" ---------- */
.pg-top__contact { background: none; border: 0; padding: .55rem .2rem; font: 500 .95rem/1 var(--f-head); color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.pg-foot button.js-consent-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }

/* ---------- Seitenkopf der Unterseiten ---------- */
.sp-hero { padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(1.8rem, 4vw, 2.6rem); border-bottom: var(--rule); }
.sp-hero h1 { font: 500 clamp(2.1rem, 5vw, 3.4rem)/1.04 var(--f-head); letter-spacing: -.03em; text-transform: lowercase; margin: 0 0 1rem; max-width: 22ch; }
.sp-hero p.sp-lead { font-size: 1.15rem; max-width: 62ch; margin: 0; color: var(--slate); }
.sp-main { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }

/* ---------- Übersichten (Use Cases, Plug-ins) ---------- */
.sp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); border-top: var(--rule); border-left: var(--hair); }
.sp-card { border-right: var(--hair); border-bottom: var(--hair); }
.sp-card a { display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1.4rem 1.4rem 1.6rem; text-decoration: none; color: var(--ink); transition: background .2s; }
.sp-card a:hover, .sp-card a:focus-visible { background: var(--cream); }
.sp-card__meta { font: 500 .75rem/1.2 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ui); }
.sp-card__title { font: 500 1.25rem/1.25 var(--f-head); margin: 0; }
.sp-card__text { margin: 0; font-size: .97rem; color: var(--muted); }
.sp-card__price { margin-top: auto; font: 500 1rem/1.2 var(--f-head); }
.sp-card__more { margin-top: auto; font: 500 .95rem/1 var(--f-head); }

/* ---------- Artikel (Inhalt wie die Leseansicht der Startseite) ---------- */
.ar { max-width: 760px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 24px clamp(3rem, 7vw, 5rem); }
.ar__art { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 0 1.6rem; }
.ar__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font: 500 .8rem/1.2 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ui); margin: 0 0 1.2rem; }
.ar__meta time { color: var(--muted); }
.ar h1 { font: 500 clamp(2rem, 5vw, 3.3rem)/1.02 var(--f-head); letter-spacing: -.03em; text-transform: lowercase; margin: 0 0 1rem; }
.ar__stand { color: var(--muted); font-size: .95rem; border-bottom: var(--rule); padding-bottom: 1.4rem; margin: 0 0 1.8rem; }
.ar__lead { font-size: 1.2rem; line-height: 1.55; margin: 0 0 2rem; }
.ar__body img { max-width: 100%; height: auto; }
.ar__body table { border-collapse: collapse; width: 100%; font-size: .95rem; display: block; overflow-x: auto; }
.ar__body th, .ar__body td { border: var(--hair); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.ar__body details { border-top: var(--hair); padding: .9rem 0; }
.ar__cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; background: var(--slate); color: #fff; padding: 1.4rem 1.6rem; margin: 3rem 0 2rem; }
.ar__cta p { margin: 0; font: 500 1.4rem/1.2 var(--f-head); text-transform: lowercase; }
.ar__next { display: block; border-top: var(--rule); padding: 1.2rem 0 0; text-decoration: none; color: var(--ink); font: 500 1.15rem/1.3 var(--f-head); }
.ar__next span { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ui); margin-bottom: .4rem; }
.ar__back { display: inline-block; margin-top: 1.4rem; font: 500 .95rem/1 var(--f-head); }

/* ---------- Übernommene Inhalte (Rechtstexte, Datenaudit, FR-Seite) ---------- */
.sp-text { max-width: 820px; }
.sp-text h1 { font: 500 clamp(2rem, 5vw, 3.1rem)/1.05 var(--f-head); letter-spacing: -.03em; margin: 0 0 1rem; }
.sp-text h2 { font: 500 clamp(1.35rem, 2.6vw, 1.8rem)/1.2 var(--f-head); margin: 2.4rem 0 .8rem; padding-top: 1rem; border-top: var(--hair); }
.sp-text h3 { font: 500 1.2rem/1.3 var(--f-head); margin: 1.8rem 0 .5rem; }
.sp-text p, .sp-text li { max-width: 72ch; }
.sp-text ul, .sp-text ol { padding-left: 1.2rem; }
.sp-text li::marker { color: var(--orange); }
.sp-text a { text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp-text table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 1rem 0 1.4rem; display: block; overflow-x: auto; }
.sp-text th, .sp-text td { border: var(--hair); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.sp-text th { background: var(--cream); font-weight: 600; }
.sp-text code { font-size: .9em; background: var(--cream); padding: .05em .35em; }
.sp-text details { border-top: var(--hair); padding: .9rem 0; }
.sp-text summary { cursor: pointer; font: 500 1.05rem/1.4 var(--f-head); }
.sp-text svg { max-width: 28px; max-height: 28px; vertical-align: middle; }
.sp-text section { margin-bottom: 1.8rem; }
.sp-text section + section { border-top: var(--rule); padding-top: 1.6rem; }
.sp-text .sp-cta-link, .sp-text a.sp-btn { display: inline-block; padding: .9rem 1.3rem; background: var(--orange); color: var(--ink); text-decoration: none; font-weight: 600; }

/* ---------- Formulare (Kontakt, Erstgespräch, StartBereit, Dialog) ---------- */
.fa-form { display: grid; gap: .9rem; }
.fa-form label { display: grid; gap: .35rem; font: 500 .95rem/1.3 var(--f-head); }
.fa-form input, .fa-form textarea, .fa-form select { font: 400 1rem/1.4 "IBM Plex Sans", system-ui, sans-serif; padding: .8rem .9rem; border: var(--rule); border-radius: 0; background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; }
.fa-form input:focus, .fa-form textarea:focus, .fa-form select:focus { outline: 3px solid var(--orange); outline-offset: 0; }
.fa-form .fa-check { display: flex; gap: .6rem; align-items: flex-start; font: 400 .9rem/1.45 "IBM Plex Sans", sans-serif; }
.fa-form .fa-check input { width: 18px; height: 18px; flex: none; margin-top: .15rem; accent-color: var(--orange); }
.fa-form .fa-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .9rem; }
.fa-btn { justify-self: start; padding: .95rem 1.4rem; font: 600 1rem/1.2 "IBM Plex Sans", sans-serif; border: 0; border-radius: 0; cursor: pointer; }
.fa-btn--orange { background: var(--orange); color: var(--ink); }
.fa-btn--orange:hover { background: var(--ink); color: #fff; }
.fa-btn--line { background: none; box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; }
.fa-hint { margin: 0; font-size: .93rem; color: var(--muted); min-height: 1.2em; }
.fa-hint.is-error { color: #B3261E; }
.fa-hint a { color: inherit; }
.fa-done { border: var(--rule); background: var(--cream); padding: 1.4rem 1.6rem; font: 500 1.2rem/1.4 var(--f-head); }

.fa-dialog { border: var(--rule); border-radius: 0; padding: clamp(24px, 4vw, 40px); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: #fff; color: var(--ink); }
.fa-dialog::backdrop { background: rgba(23, 34, 38, .6); }
.fa-dialog__x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.7rem; cursor: pointer; color: var(--ink); }
.fa-dialog__title { font: 500 1.8rem/1.1 var(--f-head); text-transform: lowercase; margin: 0 0 1rem; }

/* Kontaktformular auf der Startseite */
.contact { padding: clamp(3rem, 7vw, 5rem) 0; border-top: 1.5px solid #172226; background: #fff; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(1.6rem, 5vw, 4rem); align-items: start; }
.contact__grid h2 { font: 500 clamp(2rem, 4.5vw, 3rem)/1.04 "Jost", system-ui, sans-serif; letter-spacing: -.03em; text-transform: lowercase; margin: 0 0 1rem; }
.contact__grid p { margin: 0 0 .8rem; max-width: 46ch; }
.contact .fa-form label { font-family: "Jost", system-ui, sans-serif; }
@media (max-width: 760px) { .contact__grid { grid-template-columns: 1fr; } }

/* Perspektiven auf der Startseite: Zeile ist jetzt ein Link auf die Artikelseite */
.idx__row h3 a { color: inherit; text-decoration: none; }
.idx__row h3 a::after { content: ""; position: absolute; inset: 0; }
.idx__row { position: relative; }
.idx__row:hover h3 a, .idx__row h3 a:focus-visible { text-decoration: underline; text-decoration-color: #FA5302; text-underline-offset: 5px; }

/* ---------- StartBereit ---------- */
.sb-blocks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: var(--rule); border-left: var(--hair); }
.sb-blocks > li { border-right: var(--hair); border-bottom: var(--hair); padding: 1.3rem 1.3rem 1.5rem; }
.sb-blocks h3 { font: 500 1.15rem/1.25 var(--f-head); margin: .4rem 0 .5rem; }
.sb-blocks p { margin: 0 0 .6rem; font-size: .97rem; }
.sb-blocks ul { margin: 0; padding-left: 1.1rem; font-size: .95rem; }
.sb-no { font: 500 2rem/1 var(--f-head); color: var(--orange); }
.sb-sec { margin: 0 0 clamp(2.4rem, 6vw, 4rem); }
.sb-sec > h2 { font: 500 clamp(1.6rem, 3.4vw, 2.3rem)/1.1 var(--f-head); letter-spacing: -.02em; text-transform: lowercase; margin: 0 0 .7rem; }
.sb-sec > p { max-width: 70ch; }
.sb-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sb-tags li { border: var(--rule); padding: .45rem .8rem; font: 500 .95rem/1 var(--f-head); }
.sb { background: var(--slate); color: #fff; padding: clamp(1.4rem, 4vw, 2.4rem); }
.sb h2 { color: #fff; }
.sb .fa-form label { color: #fff; }
.sb .fa-form input, .sb .fa-form select { border-color: #fff; }
.sb-label { font: 500 .8rem/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin: 0 0 1rem; }
.sb-q { font: 500 1.4rem/1.3 var(--f-head); margin: 0 0 .4rem; }
.sb-multi { margin: 0 0 .8rem; opacity: .75; font-size: .95rem; }
.sb-opts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }
.sb-opts button, .sb-cms button { font: 500 1rem/1.2 "IBM Plex Sans", sans-serif; padding: .75rem 1rem; border: 1.5px solid #fff; background: transparent; color: #fff; cursor: pointer; border-radius: 0; }
.sb-opts button[aria-pressed="true"], .sb-cms button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.sb-cms { display: flex; flex-wrap: wrap; gap: .5rem; }
.sb-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }
.sb .fa-hint { color: rgba(255,255,255,.8); margin-top: .8rem; }
.sb .fa-hint.is-error { color: #FFB4A8; }
.sb .fa-done { color: var(--ink); }

/* ---------- Cookie-Banner auf Unterseiten (Startseite nutzt das eigene) ---------- */
.pg .consent { position: fixed; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); z-index: 60; background: var(--cream); color: var(--ink); border: var(--rule); padding: 22px; font-size: .95rem; box-sizing: border-box; }
.pg .consent[hidden] { display: none; }
.pg .consent__title { font: 500 1.2rem/1.2 var(--f-head); margin: 0 0 .5rem; }
.pg .consent p { margin: 0; }
.pg .consent .check { display: flex; gap: .6rem; align-items: center; margin-top: .7rem; font-size: .92rem; }
.pg .consent .check input { width: 18px; height: 18px; accent-color: var(--orange); }
.pg .consent__btns { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.pg .consent .btn { font: 600 .95rem/1 "IBM Plex Sans", sans-serif; border: 0; border-radius: 0; padding: .8rem 1rem; cursor: pointer; background: var(--slate); color: var(--cream); }

/* ---------- 404 ---------- */
.nf { padding: clamp(4rem, 12vw, 8rem) 0; }
.nf__no { font: 500 clamp(5rem, 18vw, 11rem)/.9 var(--f-head); color: var(--orange); margin: 0; }

/* Handy: Kopfzeile passt in 375 px – Zurück-Link weicht (Logo führt zur Startseite), Kontakt bleibt erreichbar */
@media (max-width: 560px) {
  .pg-top__back { display: none; }
  .pg-top__contact { font-size: .88rem; }
}
/* übernommene Inhalte: nebeneinanderstehende Links/Labels nicht zusammenkleben */
.sp-text a + a, .sp-text span + span { margin-left: .9rem; }

/* aus assets/bauhaus.css (.reader__body), erzeugt von _website20/bauen.py */
.reader__body h2 { font: 500 clamp(1.4rem, 3vw, 1.9rem)/1.15 var(--f-head); letter-spacing: -.02em; margin: 3rem 0 1rem; padding-top: 1.2rem; border-top: var(--hair); }
.reader__body h3 { font: 500 1.2rem/1.3 var(--f-head); margin: 2rem 0 .6rem; }
.reader__body p, .reader__body ul, .reader__body ol { margin: 0 0 1.1rem; }
.reader__body li { margin-bottom: .45rem; }
.reader__body ul li::marker { color: var(--orange); }
.reader__body a { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.reader__body figure { margin: 2rem 0; }
.reader__body img { max-width: 100%; height: auto; display: block; }
.reader__body figcaption, .reader__body .ar-cap { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.reader__body .ar-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; background: var(--ink); padding: clamp(1.5rem, 5vw, 3rem); margin: 0 0 2rem; }
.reader__body .ar-hero img { max-height: 280px; width: auto; max-width: 100%; }
.reader__body .ar-hero img:only-child { max-height: 120px; }
.reader__body .ar-sub { font-size: 1.2rem; color: var(--slate); }
.reader__body blockquote { margin: 2rem 0; padding: 1.6rem 1.8rem; background: var(--slate); color: #fff; position: relative; }
.reader__body blockquote::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 100%; background: var(--orange); }
.reader__body blockquote cite { display: block; font-style: normal; font-size: .9rem; opacity: .8; margin-top: .6rem; }
.reader__body blockquote p:last-of-type { margin-bottom: 0; }
.reader__body .ar-pull { font: 500 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--f-head); letter-spacing: -.02em; border-left: 8px solid var(--orange); padding: .2rem 0 .2rem 1.2rem; margin: 2.2rem 0; }
.reader__body .ar-box { border: var(--rule); padding: 1.2rem 1.4rem; margin: 1.8rem 0; background: #F4F6F6; }
.reader__body .ar-box p:last-child { margin-bottom: 0; }
.reader__body .ar-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-top: var(--rule); border-left: var(--hair); margin: 1.6rem 0 2rem; }
.reader__body .ar-card { padding: 1rem 1.1rem 1.2rem; border-right: var(--hair); border-bottom: var(--hair); font-size: .95rem; line-height: 1.5; }
.reader__body .ar-card.is-sel { background: #FFF1EA; box-shadow: inset 0 3px 0 var(--orange); }
.reader__body .ar-card p { margin: 0 0 .5rem; color: var(--slate); }
.reader__body .ar-card ul { padding-left: 1.1rem; margin: .4rem 0 0; }
.reader__body .ar-card img { max-height: 120px; margin: 0 0 .8rem; }
.reader__body .ar-card__l { display: block; font: 500 .75rem/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ui); margin-bottom: .5rem; }
.reader__body .ar-card__t { display: block; font: 500 1.15rem/1.25 var(--f-head); margin-bottom: .4rem; color: var(--ink); }
.reader__body details { border-top: var(--hair); padding: .9rem 0; }
.reader__body details:last-of-type { border-bottom: var(--hair); }
.reader__body summary { cursor: pointer; font: 500 1.05rem/1.4 var(--f-head); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.reader__body summary::after { content: "+"; color: var(--orange); font-size: 1.4rem; line-height: 1; }
.reader__body details[open] summary::after { content: "–"; }
.reader__body details p { margin: .7rem 0 0; color: var(--slate); }
.reader__body .ar-sources { font-size: .85rem; color: var(--muted); }