/* Unterseiten: Seitenkopf, Raster, Inhaltsverzeichnis, Info-Karte, Referenz-Hero, Formular */
.page-head--bg{background:radial-gradient(50% 70% at 90% 20%,rgba(105,222,170,.14),rgba(105,222,170,0) 70%),linear-gradient(180deg,#fff,var(--bg-2));border-bottom:1px solid var(--line)}
.page-head .eyebrow{margin-top:.5rem}
.page-grid{display:grid;gap:2.5rem;min-width:0}
.page-grid>*{min-width:0}
@media (min-width:1024px){.page-grid{grid-template-columns:240px minmax(0,1fr) 300px;gap:3rem;align-items:start}.page-grid__side{position:sticky;top:calc(var(--nav-h) + 1.5rem)}.page-grid:not(:has(.page-grid__side)){grid-template-columns:minmax(0,1fr) 320px}}
@media (max-width:1023px){.page-grid__side{order:-1}}
/* Drei Spalten erst ab 1180px. Bei 1024px blieben der Textspalte sonst 308px,
   also 27 Zeichen pro Zeile — schmaler als auf dem Handy. Darunter steht das
   Inhaltsverzeichnis oben, wie unterhalb von 1024px auch. */
@media (min-width:1024px) and (max-width:1179px){.page-grid{grid-template-columns:minmax(0,1fr) 300px}.page-grid__side{grid-column:1/-1;position:static}}
.toc__label{font-size:var(--fs-0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.75rem}
.toc ol{display:grid;gap:.15rem;border-left:2px solid var(--line)}
.toc a{display:block;padding:.3rem .75rem;font-size:var(--fs-0);line-height:1.4;color:var(--ink-2);text-decoration:none;border-left:2px solid transparent;margin-left:-2px;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.toc a:hover,.toc a.is-active{color:var(--navy);border-left-color:var(--mint)}
@media (max-width:1023px){.toc ol{display:flex;flex-wrap:wrap;gap:.5rem;border:0}.toc a{border:1px solid var(--line);border-radius:var(--r-pill);padding:.4rem .8rem;margin:0}}
.prose>h2:first-child{margin-top:0}
.aside-card{position:sticky;top:calc(var(--nav-h) + 1.5rem);padding:1.5rem;border-radius:var(--r-3);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1);font-size:var(--fs-1)}
.aside__row{display:grid;gap:.25rem;padding:.9rem 0;border-top:1px solid var(--line)}
.aside__row:first-of-type{margin-top:.75rem}
.aside__row span{font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.aside__row a{color:var(--navy);font-weight:700;text-decoration:none;padding-block:3px}
.aside__row a:hover{text-decoration:underline}
.notice{margin-top:1.5rem;padding:1rem 1.25rem;border-radius:var(--r-2);background:#FFF4E5;border:1px solid #FFD9A8;color:#7A4B00;font-size:var(--fs-1);max-width:70ch}
.ref-hero{padding-top:clamp(2rem,1.5rem + 2vw,3.5rem);padding-bottom:clamp(2rem,1.5rem + 2vw,3.5rem);background:linear-gradient(180deg,#fff,var(--bg-2));border-bottom:1px solid var(--line)}
.ref-hero__grid{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.ref-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem}}
.ref-hero__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1rem;font-size:var(--fs-0);color:var(--ink-3)}
.ref-hero__meta b{color:var(--navy)}
.ref-hero h1{max-width:18ch;margin-top:.75rem;font-size:clamp(2.125rem,1.5rem + 2.4vw,3.5rem)}
.ref-hero .lead{margin-top:1rem}
.ref-hero__media{border-radius:var(--r-3);overflow:hidden;box-shadow:var(--shadow-2);aspect-ratio:4/5;background:var(--bg-3)}
.ref-hero__media img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.ref-hero__media{aspect-ratio:4/5;max-height:440px;margin-left:auto;width:min(100%,360px)}}
.hub-group+.hub-group{margin-top:3.5rem}
.hub-group .sec-head{margin-bottom:1.25rem}
.form{padding:clamp(1.25rem,1rem + 2vw,2rem);min-width:0;border-radius:var(--r-3);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.form__grid{display:grid;gap:1.25rem}
@media (min-width:640px){.form__grid{grid-template-columns:1fr 1fr}.field--full{grid-column:1/-1}}
/* align-content:start, damit ein Feld nicht mitwaechst, wenn das Nachbarfeld
   derselben Rasterzeile eine Fehlermeldung bekommt (Telefon wurde 67px statt 53px).
   order sorgt dafuer, dass die Fehlermeldung direkt unter dem Feld steht und nicht
   hinter den Hinweistexten (beim Nachrichtenfeld waren es 88px Abstand). */
.field{display:grid;gap:.4rem;min-width:0;align-content:start}
.field .error{order:1}
.field .hint{order:2}
.field input,.field select,.field textarea{width:100%;min-width:0}
.field label{font-weight:700;font-size:var(--fs-1);color:var(--navy)}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:#fff;border:1.5px solid #7F8299;border-radius:var(--r-2);padding:.75rem .9rem;min-height:48px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.field :is(input,select,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--navy);box-shadow:none}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#C8321F}
.field .error{color:#B02A1A;font-size:var(--fs-0)}
/* Ohne Breitenbegrenzung lief der Hinweistext im Formular auf 108 bis 118 Zeichen
   pro Zeile, und das in der kleinsten Schrift der Seite. */
.hint{font-size:var(--fs-0);color:var(--ink-3);line-height:var(--lh-base);max-width:56ch}
.hint a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){.hint a:hover{color:var(--navy-700);text-decoration-thickness:2px}}
.form__actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.5rem}
.form__status{margin-top:1rem;font-weight:700;color:var(--navy)}
.form__status.is-error{color:#B02A1A}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}