:root{

  /* A1 Rot */
  --a1-red-1:#FDC9C4;
  --a1-red-2:#FA8A80;
  --a1-red-3:#FF372D;
  --a1-red-4:#EB140A;
  --a1-red-5:#B90A05;
  --a1-red-6:#820000;
  --a1-red-7:#460000;

  /* Neutral */
  --a1-white:#FFFFFF;
  --a1-light:#F2F2F2;
  --a1-gray:#BCBCBC;
  --a1-gray-2:#999999;
  --a1-dark:#333333;
  --a1-dark-2:#4F4F4F;
  --a1-black:#000000;

  /* Schriftfamilien – Namen und Fallback-Stack identisch zu
     assets/css/kurs.css am Marketing-Root. Die Namen MÜSSEN exakt den
     @font-face-Namen in fonts.css entsprechen ("A1 Sans"/"A1 Serif" MIT
     Leerzeichen) – ein Mismatch fällt nicht auf, sondern rendert lautlos
     mit dem Fallback. */
  --a1-font-serif:"A1 Serif", Georgia, serif;
  --a1-font-sans:"A1 Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ------------------------------------------------ */
/* Grundlayout */
/* ------------------------------------------------ */

body{
  margin:0;
  padding:0;
  background:var(--a1-white);
  color:var(--a1-dark);
  font-family:var(--a1-font-sans);
  line-height:1.5;   /* angeglichen an kurs.css (war 1.6) */
  font-size:24px;
}

.container{
  max-width:1000px;
  margin:56px auto;
  padding:32px;
  background:var(--a1-white);
  border:1px solid var(--a1-gray);
  border-radius:6px;
}

/* ------------------------------------------------ */
/* Typografie */
/* ------------------------------------------------ */

/* Überschriften-Format projektweit identisch zu assets/css/kurs.css
   (Marketing-Root). Bewusst abweichend: margin-bottom bleibt bei 18px
   statt 50px – die h1 sitzt hier in einer 32px-gepolsterten .container-Box
   direkt über dem Formular, 50px reißen dort eine Lücke. */
h1{
  margin:0 0 18px 0;
  font-family:var(--a1-font-serif);
  font-weight:400;
  font-size:48px;
  line-height:1.3;
  color:var(--a1-dark);
}

h2{
  margin:32px 0 16px 0;
  font-family:var(--a1-font-serif);
  font-weight:600;
  font-size:26px;
  line-height:1.15;
  color:var(--a1-dark);
}

/* Tablet-Zwischenstufe für die h1, angeglichen an assets/css/kurs.css
   (dort: 48px Desktop / 42px ab 1024px / 32px ab 768px). Ohne diese Stufe
   sprang die h1 bei 769px direkt von 32 auf 48px.

   Bewusst als BEIDSEITIG begrenzte Query, nicht als max-width:1024px wie
   in kurs.css: dort steht der Tablet-Block vor dem Handy-Block, hier läge
   er hinter dem 768er-Block und würde ihn bei gleicher Spezifität wieder
   überschreiben. Die begrenzte Form ist reihenfolge-unabhängig und bleibt
   auch dann korrekt, wenn später weitere Regeln angehängt werden. */
@media (min-width:769px) and (max-width:1024px){
  h1{
    font-size:42px;
  }
}

p{
  margin:0 0 14.4px 0;
}

/* ------------------------------------------------ */
/* Links */
/* ------------------------------------------------ */

a{
  color:var(--a1-red-4);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
  color:var(--a1-red-5);
}

/* ------------------------------------------------ */
/* Formular */
/* ------------------------------------------------ */

form{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:18px;
  row-gap:18px;
}

/* E Mail über volle Breite */
#email{
  grid-column:1 / -1;
}

input,
select{
  width:100%;
  box-sizing:border-box;
  padding:16px 16px;
  font-size:24px;
  border:1px solid var(--a1-gray);
  border-radius:4px;
  background:var(--a1-white);
  color:var(--a1-black);
  font-family:inherit;
}

/* Leere Option (Platzhalter) hellgrau, gewählte Option schwarz */
select.placeholder-shown,
select:has(option[value=""]:checked){
  color:var(--a1-gray-2);
}
select.placeholder-shown option,
select option{
  color:var(--a1-black);
}

input:focus,
select:focus{
  outline:none;
  border-color:var(--a1-dark);
}

input::placeholder{
  color:var(--a1-gray-2);
}

/* Leeres Datumsfeld grau darstellen */
input[type="date"]:invalid{
  color:var(--a1-gray-2);
}

/* Sobald ein Datum gewählt ist, schwarz */
input[type="date"]:valid{
  color:var(--a1-black);
}

/* ------------------------------------------------ */
/* Buttons */
/* ------------------------------------------------ */

button,
.btn-check,
.f-check {
  grid-column: auto;
  justify-self: end;
  align-self: start;
  width: auto;
  padding: 12px 20px;
  font-size: 21px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
}

/* Chevron */
button::after{
  content:"›";
  font-size:24px;
  line-height:1;
}

/* Nur "Daten ändern": Chevron links */
button.btn-edit::before{
  content:"‹";
  font-size:24px;
  line-height:1;
}

button.btn-edit::after{
  content:"";
}

/* Outline Button */
button[type="button"]{
  background:transparent;
  color:var(--a1-red-4);
  border:2px solid var(--a1-red-4);
}

button[type="button"]:hover{
  color:var(--a1-red-3);
  border-color:var(--a1-red-3);
}

/* ------------------------------------------------ */
/* Datenanzeige "Daten prüfen" */
/* ------------------------------------------------ */

.data-box{
  margin-top:18px;
  border:1px solid var(--a1-gray);
  border-radius:4px;
  background:var(--a1-white);
}

.data-row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:12px;
  padding:14px 16px;
  border-top:1px solid var(--a1-gray);
}

.data-row:first-child{
  border-top:none;
}

.data-label{
  color:var(--a1-dark-2);
  font-size:24px;
}

.data-value{
  color:var(--a1-black);
  font-size:24px;
  overflow-wrap:anywhere;
}

/* ------------------------------------------------ */
/* Zwei Buttons nebeneinander */
/* ------------------------------------------------ */

.button-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:22px;
}

.inline-form{
  margin:0;
}

/* Inline Forms in der Button Row dürfen nicht das globale Form Grid übernehmen */
.button-row .inline-form{
  display:inline-block;
  width:auto;
  grid-template-columns:none;
  column-gap:0;
  row-gap:0;
  margin:0;
}

.button-row button{
  grid-column:auto;
}

/* Nur "Daten ändern" rechts im Buttonblock */
.button-row .inline-form-right{
  margin-left:auto;
}

.button-row .inline-form-right button{
  justify-self:end;
}

/* ------------------------------------------------ */
/* Hinweisbox */
/* ------------------------------------------------ */

.info-box{
  margin-top:22px;
  padding:16px;
  background:var(--a1-white);
  border:1px solid var(--a1-gray);
  border-radius:4px;
}

/* ------------------------------------------------ */
/* Fehlermeldung */
/* ------------------------------------------------ */

.error-message{
  grid-column:1 / -1;
  font-size:24px;
  line-height:1.35;
  color:var(--a1-red-4);
  margin-top:-10px;
  margin-bottom:-10px;
}

/* Default: leere Meldung nimmt optisch keinen Platz, bleibt aber im Grid */
.error-message:empty{
  margin-top:0;
  margin-bottom:0;
}

/* Fehlerrahmen generisch für alle Eingabefelder */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"]{
  border-color:var(--a1-red-4);
}

input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus{
  border-color:var(--a1-red-4);
  outline:none;
}

/* ------------------------------------------------ */
/* Index: Feldnahe Fehlermeldungen wie in register.php */
/* Voraussetzung in index.php:
   err_first direkt nach Vorname
   err_last direkt nach Nachname
   err_email direkt nach E Mail */
/* ------------------------------------------------ */

#anmeldung{
  grid-template-areas:
    "first last"
    "err_first err_last"
    "email email"
    "err_email err_email"
    "check check";
  row-gap:0;
}

/* Felder */
#anmeldung #first{ grid-area:first; }
#anmeldung #last{  grid-area:last; }
#anmeldung #email{ grid-area:email; }

/* Fehlercontainer */
#anmeldung #err_first{ grid-area:err_first; }
#anmeldung #err_last{  grid-area:err_last; }
#anmeldung #err_email{ grid-area:err_email; }

/* Abstand unter den Eingabefeldern (row-gap ist hier bewusst 0, s.o.) */
#anmeldung input{ margin-bottom:18px; }

/* Honeypot-Feld: für Menschen unsichtbar, für Bots weiterhin im DOM */
.hp-field{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Button */
#anmeldung button[type="submit"]{
  grid-area:check;
  justify-self:end;
  width:auto;
}

/* Desktop: leere Meldung komplett ausblenden, damit kein Grid Abstandsproblem entsteht */
@media (min-width:769px){
  #anmeldung .error-message{
    margin-top:6px;
    margin-bottom:18px;
  }
  #anmeldung .error-message:empty{
    display:none;
    margin:0;
  }
}

/* ------------------------------------------------ */
/* Responsive */
/* ------------------------------------------------ */

@media (max-width:768px){

  /* Mobil-Größen projektweit identisch zu assets/css/kurs.css. */
  body{
    font-size:20px;
  }

  .container{
    margin:28px auto;
    padding:22px 16px;
    border-radius:6px;
  }

  h1{
    font-size:32px;
  }

  h2{
    font-size:22px;
    line-height:1.2;
  }

  /* register.php auf Mobile als Stack, unabhängig von Grid Areas */
  #registerForm{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  #registerForm .error-message{
    display:block;
    margin-top:6px;
    margin-bottom:0;
  }

  /* Index: ebenfalls Stack, damit Meldung immer direkt unter dem Feld sitzt */
  #anmeldung{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  #anmeldung .error-message{
    display:block;
    margin-top:6px;
    margin-bottom:0;
  }

  #anmeldung .error-message:empty{
    display:none;
    margin:0;
  }

  /* andere Formulare bleiben Grid, nur 1 Spalte */
  form:not(#registerForm):not(#anmeldung){
    grid-template-columns:1fr;
  }

  .data-row{
    grid-template-columns: max-content 1fr;
    gap: 10px;
  }

  .button-row{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
  }

  .button-row button{
    width:auto;
  }

  #registerForm .radio-group{
    flex-wrap:wrap;
  }

  #registerForm .mobile-only{
    display:block;
  }
}

/* ------------------------------------------------ */
/* A1 Send Animation */
/* ------------------------------------------------ */

.a1-send{
  margin-top:20px;
  text-align:center;
  padding:0 24px;
}

.a1-send svg{
  overflow:visible;
}

.a1-send .mail{
  transform-box:view-box;
  transform-origin:0 0;
  animation:sendMail 2.9s linear infinite;
  will-change:transform, opacity;
}

@keyframes sendMail{
  0%   {transform:translateX(-52px);opacity:0}
  8%   {transform:translateX(-52px);opacity:1}
  55%  {transform:translateX(44px);opacity:1}
  70%  {transform:translateX(60px);opacity:1}
  82%  {transform:translateX(60px);opacity:1}
  88%  {transform:translateX(60px);opacity:0}
  89%  {transform:translateX(-52px);opacity:0}
  100% {transform:translateX(-52px);opacity:0}
}

/* Schreibendes Blatt Animation */
.a1-writing{
  margin-top:20px;
  text-align:center;
  padding:0 24px;
}

.a1-writing svg{
  overflow:visible;
}

.a1-writing .line1{ animation:writeLine 2.4s ease-in-out infinite; }
.a1-writing .line2{ animation:writeLine 2.4s ease-in-out infinite 0.4s; }
.a1-writing .line3{ animation:writeLine 2.4s ease-in-out infinite 0.8s; }
.a1-writing .line4{ animation:writeLineShort 2.4s ease-in-out infinite 1.2s; }

@keyframes writeLine{
  0%   { stroke-dashoffset:60; opacity:0; }
  10%  { opacity:1; }
  40%  { stroke-dashoffset:0;  opacity:1; }
  80%  { stroke-dashoffset:0;  opacity:1; }
  100% { stroke-dashoffset:0;  opacity:1; }
}

@keyframes writeLineShort{
  0%   { stroke-dashoffset:40; opacity:0; }
  10%  { opacity:1; }
  40%  { stroke-dashoffset:0;  opacity:1; }
  80%  { stroke-dashoffset:0;  opacity:1; }
  100% { stroke-dashoffset:0;  opacity:1; }
}

/* Frage links im Grid */
.form-label{
  align-self:center;
  font-size:24px;
  color:var(--a1-dark);
}

/* Webinarliste über volle Breite */
#webinar{
  grid-column:1 / -1;
}

/* Select Placeholder wie Placeholder Text */
select:required:invalid{
  color:var(--a1-gray-2);
}

select option{
  color:var(--a1-black);
}

/* Box rechts: Frage plus Auswahl in einer Zelle */
.nextfree-wrap{
  box-sizing:border-box;
  padding:16px 16px;
  border:1px solid var(--a1-gray);
  border-radius:4px;
  background:var(--a1-white);
  color:var(--a1-black);
  font-family:inherit;
}

.nextfree-question{
  font-size:24px;
  line-height:1.35;
  margin:0 0 10px 0;
}

.nextfree-question sup{
  font-size:12px;
  vertical-align:top;
}

/* Radio ohne Rahmen */
.radio-group{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}

.radio-option{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  padding:0;
  border:none;
  background:transparent;
}

.radio-option input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--a1-red-4);
  cursor:pointer;
}

/* Kursliste: immer einspaltig */
.course-fieldset .course-option{
  display:flex;
  margin-bottom:8px;
}

@media (max-width:768px){
  .radio-option{
    margin-bottom:8px;
  }
  .course-fieldset .course-option{
    margin-bottom:16px;
  }
}

/* Deaktivierter Kurs (keine Termine) */
.course-option--disabled{
  opacity:0.45;
  cursor:not-allowed;
}
.course-option--disabled input{
  cursor:not-allowed;
}

/* Kein-Termine-Hinweis neben dem Kursnamen */
.course-no-dates{
  font-size:0.9em;
  color:var(--a1-gray-2);
  margin-left:6px;
}

/* Termin-Fieldset: gleicher Stil wie Kurs-Fieldset, oben etwas Abstand */
.termin-fieldset{
  margin-top:20px;
}

/* Fußnoten Box unter dem Button */
.footnote-box{
  grid-column:1 / -1;
  margin-top:6px;
}

.footnote-box p{
  margin:0;
  font-size:16px;
  line-height:1.4;
}

/* ------------------------------------------------ */
/* NEU: Eingabeformular Zeile 4 und 5, Prüfseite bleibt unverändert */
/* ------------------------------------------------ */

/* Zeile 4: Frage über volle Breite */
.nextfree-question-row{
  grid-column:1 / -1;
}

/* Zeile 5: links Radios in Spalte 1 */
.nextfree-radio-cell{
  grid-column:1 / 2;
  align-self:center;
}

/* Zeile 5: rechts Prüfen Button in Spalte 2 */
#registerForm .btn-check{
  grid-column:2 / 3;
  justify-self:end;
}

/* ------------------------------------------------ */
/* Buttons: Scope statt globaler Submit Logik */
/* ------------------------------------------------ */

/* Inline Form Buttons auf anmeldung.php und ähnliche Seiten */
.inline-form button[type="submit"]{
  background:var(--a1-red-4);
  color:var(--a1-white);
  pointer-events:auto;
  opacity:1;
}

.inline-form button[type="submit"]:hover{
  background:var(--a1-red-3);
}

/* Register: Prüfen Button immer aktiv */
#registerForm button[type="submit"]{
  background:var(--a1-red-4);
  color:var(--a1-white);
  pointer-events:auto;
  opacity:1;
}

#registerForm button[type="submit"]:hover{
  background:var(--a1-red-3);
}

/* ------------------------------------------------ */
/* Register: Layout stabil (Desktop), keine Seiteneffekte */
/* ------------------------------------------------ */

#registerForm{
  grid-template-areas:
    "first last"
    "webinar webinar"
    "err_webinar err_webinar"
    "termin termin"
    "err_termin err_termin"
    "phone bundesland"
    "err_phone err_bundesland"
    "check check";
  row-gap:0;
}

/* Zuordnung der Bereiche */
#registerForm .f-first{ grid-area:first; }
#registerForm .f-last{ grid-area:last; }
#registerForm .f-webinar{ grid-area:webinar; }
#registerForm .f-termin{ grid-area:termin; }
#registerForm .f-phone{ grid-area:phone; }
#registerForm .f-bundesland{ grid-area:bundesland; }
#registerForm .f-check{ grid-area:check; }


/* Register: gleichmäßige vertikale Abstände (Desktop) */
#registerForm .f-first,
#registerForm .f-last,
#registerForm .f-webinar,
#registerForm .f-termin,
#registerForm .f-phone,
#registerForm .f-bundesland,
#registerForm .f-check{
  margin-bottom:18px;
}

/* Register: Fehlermeldung sitzt nahe am Feld und hält den normalen Abstand zum nächsten Feld */
@media (min-width:769px){
  #registerForm .error-message{
    grid-column:1 / -1;
    margin-top:6px;
    margin-bottom:18px;
  }
  #registerForm .error-message:empty{
    display:none;
    margin:0;
  }
}

/* Feldnahe Fehlermeldungen korrekt platzieren */
#registerForm #err_webinar{ grid-area:err_webinar; }
#registerForm #err_termin{ grid-area:err_termin; }
#registerForm #err_phone{ grid-area:err_phone; }
#registerForm #err_bundesland{ grid-area:err_bundesland; }

/* Register: Radio Container stabil, kein Layout Sprung bei Fehler */
#registerForm .nextfree-radio-cell{
  box-sizing:border-box;
  padding:12px;
  border-radius:6px;
  display:flex;
  flex-direction:column;
}

/* Default: mobile-only aus */
@media (min-width:769px){
  #registerForm .mobile-only{
    display:none;
  }
}

/* A1 Standard-Button Rot (red-4) */

.btn-check,
.f-check {
  background: var(--a1-red-4);
  color: #ffffff;
  text-decoration: none;
  transition: background .2s ease;
}

.btn-check:hover,
.f-check:hover {
  background: var(--a1-red-3);
  color: #ffffff;
  text-decoration: none;
}
/* ── Buchungsart-Auswahl (Summary-Schritt) ─────────────────────────────── */

.booking-intent-block {
  margin: 1.5rem 0 1rem;
}

#err_booking_intent:not(:empty) {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.booking-intent-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.2rem 0;
  margin-bottom: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
  line-height: 1.45;
}

/* Nativer Radio-Button verstecken */
.booking-intent-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom Radio-Button */
.booking-intent-option .radio-custom {
  flex-shrink: 0;
  margin-top: 0.2rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--a1-gray);
  background: var(--a1-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease;
}

.booking-intent-option input[type="radio"]:checked + .radio-custom {
  border-color: var(--a1-red-4);
  background: var(--a1-white);
}

.booking-intent-option .radio-custom::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background .15s ease;
}

.booking-intent-option input[type="radio"]:checked + .radio-custom::after {
  background: var(--a1-red-4);
}

/* Hinweis-Block: Nur telefonisch */

.phone-booking-hint {
  margin: 1rem 0;
  padding: 1.1rem 1.2rem;
  border-left: 4px solid var(--a1-red-4);
  font-size: 24px;
  line-height: 1.5;
}

.phone-booking-hint p {
  margin: 0 0 0.5rem;
}

.phone-booking-hint p:last-child {
  margin-bottom: 0;
}

.phone-number-display {
  text-align: center;
  margin: 0.6rem 0;
}

.phone-number-display .phone-number-text {
  color: var(--a1-red-4);
  font-weight: 700;
  font-size: 1.15rem;
}

/* Desktop: Nummer als Text */
.phone-number-display .phone-link-mobile {
  display: none;
}

/* Mobile: Nummer als Button */
@media (max-width: 768px) {
  .phone-booking-hint {
    border-left: 4px solid var(--a1-red-4);
  }
  .phone-number-display .phone-number-text {
    display: none;
  }
  .phone-number-display .phone-link-mobile {
    display: inline-block;
    background: var(--a1-red-4);
    color: var(--a1-white);
    text-decoration: none;
    padding: 0.55rem 1.2rem;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    border: none;
    cursor: pointer;
  }
  .phone-number-display .phone-link-mobile:hover,
  .phone-number-display .phone-link-mobile:active {
    background: var(--a1-red-5);
  }
}

.phone-booking-hint-change {
  font-size: 24px;
  color: var(--a1-dark-2);
}

/* ------------------------------------------------ */
/* Seitenfußlink (Info und Datenschutz) */
/* ------------------------------------------------ */

.footer-link {
  max-width: 1000px;
  margin: 8px auto 0;
  padding: 0 32px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .footer-link { padding: 0 16px; }
}

/* ------------------------------------------------ */
/* Utility-Klassen                                   */
/* Ersatz für wiederkehrende Inline-Styles (CSP-      */
/* Umbau). Bewusst generisch statt semantisch, weil   */
/* die Werte kontextfrei sind (reine Sichtbarkeit/    */
/* Abstand), nicht an ein bestimmtes Bauteil gebunden. */
/* ------------------------------------------------ */

.is-hidden{ display:none; }

.mt-6{  margin-top:6px;  }
.mt-10{ margin-top:10px; }
.mt-14{ margin-top:14px; }
.mt-16{ margin-top:16px; }
.mt-18{ margin-top:18px; }
.mt-22{ margin-top:22px; }
.mt-24{ margin-top:24px; }   /* entspricht 1.5rem bei Standard-16px-Root */

.mb-14{ margin-bottom:14px; }
.mb-19{ margin-bottom:19.2px; } /* entspricht 1.2rem bei Standard-16px-Root */

.d-block{ display:block; }

.text-brand-red{ color:var(--a1-red-4); }

/* ------------------------------------------------ */
/* Info- und Datenschutzseite (info.php)             */
/* Aus info.php ausgelagert (CSP-Umbau).             */
/* ALLES unter .page-info gescoped – ohne diesen     */
/* Scope würden h1/h2/.container GLOBAL auf jeder    */
/* Seite verkleinert werden, nicht nur hier.         */
/* ------------------------------------------------ */

/* Schriftgrößen: alles auf 0.75 des Basis-Designs */
.page-info .container {
  font-size: 18px;
}
.page-info h1 {
  font-size: 36px;   /* war 48px */
  margin-bottom: 0;
}
.page-info h2 {
  font-family: var(--a1-font-serif);
  font-weight: 400;
  font-size: 27px;   /* offen: 0,75 von der globalen h2 (26px) wären 20px */
  line-height: 1.2;
  color: var(--a1-black);
  margin: 0 0 14px 0;
}
@media (max-width: 768px) {
  .page-info h1 { font-size: 27px; }
  .page-info h2 { font-size: 21px; }
}

/* Seitenheader: h1 links, Zurück-Button rechts */
.page-info .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.page-info .page-header h1 {
  margin: 0;
}

/* Graue Box um Textbereiche */
.page-info .text-section {
  border: 1px solid var(--a1-gray);
  border-radius: 4px;
  padding: 20px 24px;
  margin-top: 16px;
}
.page-info .text-section p:last-child {
  margin-bottom: 0;
}

.page-info .back-row {
  margin-top: 24px;
}