/* =====================================================================
   AM BASE  ·  Design-Basis ankaufmilitaria (Staging)
   Palette komplett über Tokens -> spätere Umstellung = nur diese Werte.
   ===================================================================== */
:root{
  /* ---- STANDARD: PALETTE 4 · Grafit & Stahl (Entscheidung 13.08.) ----
     Ohne Buntfarbe: Weiß, Grau, Schwarz. Die früheren Bronze-Werte stehen
     unverändert als data-am-palette="1" weiter zur Auswahl. */
  --am-bg:        #f1f2f3;   /* Grundfläche */
  --am-surface:   #ffffff;   /* helle Sektionen */
  --am-surface-2: #e3e5e7;   /* dritter Flächenton — trennt Sektionen sichtbar */
  --am-text:      #1f2225;
  --am-heading:   #101315;
  --am-muted:     #4d5257;   /* auf --am-surface-2 muss 4,5:1 halten */
  --am-border:    #d5d8db;
  --am-accent:    #454b52;
  --am-accent-2:  #2c3136;
  --am-accent-ink:#ffffff;
  --am-ink:       #191c1f;   /* dunkle Flächen */
  --am-ink-text:  #f1f2f3;   /* Text auf dunklen Flächen */
  --am-ink-muted: #b3b8bd;
  --am-ink-link:  #dfe3e7;
  --am-ink-accent:#c4cad0;   /* Akzent AUF dunkel — --am-accent hält dort keine 4,5:1 */
  --am-focus:     #1f6feb;
/* ---- Schriftgroessen: eine Skala fuer die ganze Seite ----------------
   Reihenfolge von klein nach gross. Wer eine Groesse braucht, nimmt das
   naechstliegende Token - keine neuen Zwischenwerte in Einzelregeln.
     label-sm / label : Sperrsatz-Etiketten (Eyebrow, Rolle, Flag)
     xs / sm          : Hinweise, Meta, sekundaerer Text
     base             : Fliesstext
     nav              : Hauptmenue und Header-Knopf (Divi-Overrides)
     md / lg          : hervorgehobener Text, kleine Ueberschriften
     lead             : Intro-Absatz unter einer H1
     h3 / h2 / h1     : Ueberschriften
     display          : grosse Ziffern (Ablaufschritte)                    */
  --am-fs-label-sm: .66rem;
  --am-fs-label:    .74rem;
  --am-fs-xs:       .82rem;
  --am-fs-sm:       .93rem;
  --am-fs-base:     1rem;
  --am-fs-nav:      .875rem;
  --am-fs-md:       1.14rem;
  --am-fs-lg:       1.32rem;
  --am-fs-lead:     clamp(1.08rem, 2vw, 1.28rem);
  --am-fs-h3:       clamp(1.2rem, 2.2vw, 1.5rem);
  --am-fs-h2:       clamp(1.5rem, 3vw, 2.1rem);
  --am-fs-h1:       clamp(1.9rem, 4.4vw, 3rem);
  --am-fs-display:  2.4rem;
  /* ---- Layout-Tokens ----
     Radius bewusst klein: Antiquitäten-/Archiv-Anmutung statt App-Optik. */
  --am-maxw: 1400px;
  --am-radius: 2px;
}

/* =====================================================================
   DESIGN-VARIANTEN (Auswahl für Thomas)
   Umschaltung über data-am-palette am <html> — rein clientseitig, damit
   der Seitencache nicht die Farbwahl anderer Besucher ausliefert.
   Ohne Attribut greift der Standard oben (Grafit & Stahl).
   ===================================================================== */
html[data-am-palette="1"]{   /* Bronze & Umbra — der frühere Standard */
  --am-bg:#f1ece1; --am-surface:#ffffff; --am-surface-2:#e3d9c6;
  --am-text:#22282d; --am-heading:#161b1f; --am-muted:#4c5660; --am-border:#ded5c6;
  --am-accent:#7d6228; --am-accent-2:#5f4b1e;
  --am-ink:#2a2521; --am-ink-text:#f3efe6; --am-ink-muted:#bdb4a5; --am-ink-link:#e7c98a;
  --am-ink-accent:#c9a961;
}
html[data-am-palette="2"]{   /* Feldgrau & Messing — gedecktes Oliv, Messing als Akzent */
  --am-bg:#edefe8; --am-surface:#ffffff; --am-surface-2:#dce0d2;
  --am-text:#262a24; --am-heading:#171a15; --am-muted:#585e51; --am-border:#d3d9c8;
  --am-accent:#7f6a24; --am-accent-2:#63521b;
  --am-ink:#333a2e; --am-ink-text:#f1f2ea; --am-ink-muted:#b5bba9; --am-ink-link:#d8c684;
  --am-ink-accent:#cbb464;
}
html[data-am-palette="3"]{   /* Marine & Stahl — Kieler Marineblau, stahlblauer Akzent */
  --am-bg:#eceff3; --am-surface:#ffffff; --am-surface-2:#d9e1e9;
  --am-text:#1e262e; --am-heading:#111820; --am-muted:#556270; --am-border:#ccd6e0;
  --am-accent:#1f5675; --am-accent-2:#164056;
  --am-ink:#16222e; --am-ink-text:#eef2f6; --am-ink-muted:#a6b4c1; --am-ink-link:#9fc4dd;
  --am-ink-accent:#7fb4d6;
}
html[data-am-palette="4"]{   /* Grafit & Stahl — ohne Buntfarbe: Weiss, Grau, Schwarz */
  --am-bg:#f1f2f3; --am-surface:#ffffff; --am-surface-2:#e3e5e7;
  --am-text:#1f2225; --am-heading:#101315; --am-muted:#4d5257; --am-border:#d5d8db;
  --am-accent:#454b52; --am-accent-2:#2c3136;
  --am-ink:#191c1f; --am-ink-text:#f1f2f3; --am-ink-muted:#b3b8bd; --am-ink-link:#dfe3e7;
  --am-ink-accent:#c4cad0;
}

/* Bedienelement (nur Staging – dient der Auswahl, fliegt vor Live raus) */
.am-palette-switch{ position:fixed; left:16px; bottom:16px; z-index:99999; font-family:"Open Sans",Arial,sans-serif;
  background:#fff; border:1px solid #dcd7cc; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.16); overflow:hidden; }
.am-palette-switch__head{ display:flex; align-items:center; gap:.5rem; width:100%; cursor:pointer;
  background:#232a2f; color:#fff; border:none; padding:.6rem .85rem; font-size:var(--am-fs-label); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; }
.am-palette-switch__head::after{ content:""; margin-left:auto; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-135deg) translate(-2px,2px); }
.am-palette-switch.is-closed .am-palette-switch__head::after{ transform:rotate(45deg) translate(-1px,-1px); }
.am-palette-switch__body{ padding:.55rem; display:flex; flex-direction:column; gap:.2rem; }
.am-palette-switch.is-closed .am-palette-switch__body{ display:none; }
.am-palette-opt{ display:flex; align-items:center; gap:.6rem; width:100%; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:7px; padding:.5rem .6rem;
  font-size:var(--am-fs-xs); color:#232a2f; text-align:left; }
.am-palette-opt:hover{ background:#f4f1ea; }
.am-palette-opt[aria-pressed="true"]{ border-color:#232a2f; background:#f4f1ea; font-weight:700; }
.am-palette-dot{ flex:0 0 16px; height:16px; width:16px; border-radius:50%; border:1px solid rgba(0,0,0,.18); }
.am-palette-switch__note{ padding:0 .75rem .6rem; margin:0; font-size:var(--am-fs-label); color:#7b7365; max-width:210px; line-height:1.4; }
@media print{ .am-palette-switch{ display:none; } }
@media(max-width:600px){   /* auf kleinen Displays kompakter, damit er den Inhalt nicht verdeckt */
  .am-palette-switch{ left:10px; bottom:10px; }
  .am-palette-switch__head{ padding:.5rem .7rem; font-size:var(--am-fs-label); }
  .am-palette-opt{ font-size:var(--am-fs-label); padding:.42rem .5rem; }
  .am-palette-switch__note{ display:none; }
}

/* ---------- Grund ---------- */
html body, #page-container{ background:var(--am-bg) !important; }
#page-container #main-content{ color:var(--am-text); }
#sidebar{ display:none !important; }
.et_right_sidebar #left-area,.et_left_sidebar #left-area{ width:100% !important; padding:0 !important; float:none !important; }
#main-content h1,#main-content h2,#main-content h3,#main-content h4{ color:var(--am-heading); line-height:1.2; }
#main-content{ line-height:1.65; }
/* Fliesstext leichter als Divis body-Default (500). 400 ist der leichteste
   Schnitt, den die lokal ausgelieferte Open Sans mitbringt. Vererbt an alles
   in .am-page/.am-footer; Knoepfe, Eyebrows und Zahlen setzen ihr Gewicht
   selbst und bleiben unberuehrt. */
.am-page, .am-footer{ font-weight:400; }
/* Lange Absaetze bekommen etwas mehr Zeilenabstand - leichtere Schrift
   vertraegt ihn und liest sich damit ruhiger. */
.am-section > .am-container > p,
.am-section > .am-container > ul,
.am-section > .am-container > ol,
.am-detail-body p,
.am-faq-a p{ line-height:1.72; }
/* GH-Typografie: Serif-Headings (Playfair Display) + Open-Sans-Body – analog german-historica.de */
html body,#page-container{ font-family:"Open Sans",Helvetica,Arial,sans-serif; }
#main-content h1,#main-content h2,#main-content h3,#main-content h4,
.am-hero h1,.am-persons h2,.am-cats h2,.am-steps-sec h2,.am-person-body h3,
.am-action-title,.am-legal h2{ font-family:"Playfair Display",Georgia,"Times New Roman",serif; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--am-focus) !important; outline-offset:2px !important; border-radius:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }
/* Skip-Link (BFSG): unsichtbar bis Tastatur-Fokus */
.am-skip{ position:fixed; left:8px; top:-60px; z-index:100001; background:var(--am-accent); color:#fff !important;
  padding:.7em 1.2em; border-radius:0 0 6px 6px; text-decoration:none !important; font-weight:600; transition:top .15s; }
.am-skip:focus{ top:0; }
#main-content:focus{ outline:none !important; } /* Skip-Ziel: kein Rahmen um gesamten Content */

/* ---------- Buttons ---------- */
.am-btn{ display:inline-block; background:var(--am-accent); color:var(--am-accent-ink) !important; padding:.7em 1.5em;
  border-radius:var(--am-radius); text-decoration:none !important; font-weight:600; line-height:1.2; border:1px solid var(--am-accent-2); transition:background .15s;
  /* Groesse explizit: als <a> erbte der Knopf 14 px, als <button> nahm er den
     Browser-Default 13,33 px - derselbe Knopf sah je nach Element anders aus. */
  font-size:var(--am-fs-base); font-family:inherit; }
.am-btn:hover{ background:var(--am-accent-2); color:#fff !important; }
.am-btn-lg{ padding:.85em 1.9em; font-size:var(--am-fs-base); }
.am-btn-ghost{ background:transparent; color:var(--am-accent-ink) !important; border-color:rgba(255,255,255,.6); }
.am-btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff !important; }
/* Ghost-Variante für HELLE Flächen (der normale Ghost-Button ist für dunkle gedacht
   und wäre hier weiß auf weiß). !important, weil Divi Buttonfarben sonst überschreibt. */
.am-btn-ghost--dark{ background:transparent; color:var(--am-accent) !important; border-color:var(--am-accent); }
.am-btn-ghost--dark:hover{ background:var(--am-accent); color:#fff !important; border-color:var(--am-accent-2); }

/* =====================================================================
   STARTSEITE – Komponenten
   ===================================================================== */
/* Basis-Schriftgroesse fuer alles, was AM ausgibt. Ohne diese Regel erbt der
   Fliesstext Divis 14 px, waehrend jede Regel mit einem Token auf 16 px steht -
   genau daher kamen die uneinheitlichen Groessen (31.08.). */
.am-page, .am-footer{ font-size:var(--am-fs-base); }

#main-content .am-page{ /* reset Divi-Innenabstände */ }
/* Kein FOUC/„Snap": volle Breite der am-*-Sektion schon in der render-blockierenden am-base.css
   erzwingen (Divi legt width:100%/padding:0 sonst erst im verzögerten Dynamic-CSS an → Hero springt).
   Scoped via :has(.am-page), damit Alt-Seiten (z. B. SH mit 90%-Rows) unberührt bleiben. */
.et_pb_section:has(> .et_pb_row .am-page),
.et_pb_section:has(.am-page){ padding-top:0 !important; padding-bottom:0 !important; }
.et_pb_row:has(.am-page){ width:100% !important; max-width:100% !important; padding:0 !important; margin:0 auto !important; }
.et_pb_column:has(.am-page){ width:100% !important; margin:0 !important; }
.et_pb_module:has(.am-page){ margin:0 !important; }
.am-container{ max-width:var(--am-maxw); margin:0 auto; padding:0 clamp(16px,4vw,32px); }
/* Divi erzwingt list-style-type:disc für Listen im Content — bei unseren eigenen
   Listen (eigene Marker) erschiene sonst zusätzlich ein Aufzählungspunkt. */
.am-ticks, .am-ticks li, .am-steps, .am-steps li,
.am-contact-list, .am-contact-list li,
.am-footer ul, .am-footer li, .am-fcontact, .am-fcontact li{ list-style:none !important; }
/* ---- Sektionsflaechen -------------------------------------------------
   Zwei Flaechen im Wechsel gliedern die Seite. Welche Flaeche eine Sektion
   bekommt, entscheidet allein der Modifikator - nie die Komponentenklasse.
   Faustregel beim Seitenbau: nach dem Hero mit --hell beginnen und dann
   konsequent abwechseln. Zwei gleiche Flaechen duerfen nie aneinandergrenzen. */
.am-section{ padding:clamp(2.5rem,6vw,4.5rem) 0; background:var(--am-bg); }
.am-section--hell{ background:var(--am-surface); }
.am-section--dunkel{ background:var(--am-ink); color:var(--am-ink-text); }
.am-section--dunkel h2, .am-section--dunkel h3{ color:var(--am-ink-text); }
.am-section--dunkel .am-muted{ color:var(--am-ink-muted); }
.am-section--dunkel a{ color:var(--am-ink-link); }

/* ---- Ausrichtung -----------------------------------------------------
   Zentriert sind die kurzen Elemente: Sektionstitel, die einleitende Zeile
   darunter, Auszeichnungssaetze und Handlungsaufrufe. Sie bestehen aus einer
   bis zwei Zeilen — dort traegt die Mittelachse.

   Mehrzeiliger Fliesstext steht linksbuendig (Vorgabe Lukas, 01.09.2026
   nachmittags — ersetzt die Zentrierung vom selben Tag). Grund: bei zwei-
   bis dreizeiligen Absaetzen beginnt jede Zeile an einer anderen Stelle,
   das Auge findet keine Kante und der Block wirkt unfertig. Der Block als
   Ganzes bleibt mittig in der Sektion, nur seine Zeilen richten sich links
   aus. */
.am-section > .am-container > h2,
.am-section > .am-container > .am-sec-intro,
.am-section > .am-container > .am-lead-text{ text-align:center; font-weight:400; line-height:1.6; }
.am-hero .am-lead{ font-weight:400; }
/* Fliesstext linksbuendig — explizit gesetzt, weil Divi an einigen Stellen
   eine zentrierte Ausrichtung vererbt. Karten (Detail-Koerper, FAQ-Antworten,
   Personen) waren nie zentriert und bleiben unberuehrt. */
.am-section > .am-container > p,
.am-section > .am-container > div > p,
.am-section > .am-container > ul,
.am-section > .am-container > ol{ text-align:left; }
/* Ausnahmen: kurze Zeilen, die ihre Mittelachse behalten. Die Selektoren
   sind absichtlich so lang - `.am-schluss p` allein verliert gegen
   `.am-section > .am-container > div > p` und der Handlungsaufruf rutscht
   nach links. */
.am-section > .am-container > .am-schluss p,
.am-section > .am-container > p.am-center,
.am-section > .am-container > div.am-center > p{ text-align:center; }
/* Der Trust-Abschluss ist eine Signaturflaeche, kein Lesetext: ein
   Zusagesatz, ein Knopf, der Rechtshinweis. Alles kurz und um die
   Mittelachse gebaut - linksbuendig bricht der Block auseinander (Satz
   links, Knopf mittig). */
.am-trust > .am-container > p{ text-align:center; }
/* Benannte Ausnahme fuer kurze, geschlossene Sektionen, die um ihre
   Mittelachse gebaut sind (Sektionstitel, ein bis vier kurze Absaetze,
   Knopf). Bewusst ein Modifikator an der Sektion und keine Klasse an
   einzelnen Absaetzen - so ist im Seitenquelltext sichtbar, dass die
   Sektion als Ganzes mittig steht. NICHT fuer Lesetextseiten verwenden. */
.am-section--mitte > .am-container > p,
.am-section--mitte > .am-container > div > p{ text-align:center; }
/* Rechtstexte durchgaengig linksbuendig — auch verschachtelt. Zentrierte
   Absaetze sind fuer Impressum, Datenschutz und die Rechtlichen Hinweise
   weder ueblich noch gut lesbar. */
.am-section > .am-container.am-legal p,
.am-section > .am-container.am-legal li{ text-align:left; }
/* Groesse gilt fuer jede H2 im AM-Bereich - auch fuer die in verschachtelten
   Bloecken (z. B. der CTA-Kasten), die sonst Divis 26 px erben. Die
   Zentrierung bleibt an der Regel darueber und damit an Sektionstiteln. */
.am-page h2{ font-size:var(--am-fs-h2); }
.am-section > .am-container > h2{ margin:0 0 .9rem; }
/* Satzbreite: Fliesstext einer Textsektion steht als Block mittig und
   ueberall gleich breit. Die farbige Sektionsflaeche laeuft weiter ueber die
   volle Breite - der Text selbst bleibt lesbar (sonst ~180 Zeichen je Zeile).
   Der Block ist zentriert, die Zeilen bleiben linksbuendig: zentrierter
   Flattersatz ueber mehrere Zeilen liest sich schlecht. */
.am-section > .am-container > .am-sec-intro,
.am-section > .am-container > .am-lead-text,
.am-section > .am-container > p,
.am-section > .am-container > ul,
.am-section > .am-container > ol,
.am-section > .am-container > .am-schluss,
.am-section > .am-container > .am-sprung{ max-width:900px;
  margin-left:auto; margin-right:auto; }
/* Rechtstexte behalten ihre linksbuendigen Zwischenueberschriften. */
.am-section > .am-container.am-legal > h2{ text-align:left; }
.am-center{ text-align:center; } .am-small{ font-size:var(--am-fs-sm); }
/* Zwei Knoepfe nebeneinander - dasselbe Muster wie im Hero und im
   Kontaktteaser. Umbricht auf schmalen Schirmen sauber untereinander. */
.am-btn-paar{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; align-items:center; }
.am-muted{ color:var(--am-muted); }
.am-eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:var(--am-fs-label); font-weight:700; color:var(--am-accent); margin:0 0 .6rem; }

/* Hero — flache Tiefenfarbe statt Verlauf (ruhiger, weniger „App") */
.am-hero{ background:var(--am-ink); color:var(--am-ink-text); padding:clamp(3rem,8vw,6rem) 0; text-align:center; }
.am-hero h1{ color:#fff !important; font-size:var(--am-fs-h1); margin:.2em 0 .4em; }
.am-hero .am-lead{ color:var(--am-ink-muted); font-size:var(--am-fs-lead); max-width:760px; margin:0 auto 1.6em; }
.am-hero-cta{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* ---------- Farben AUF dunklen Flaechen (Hero, Trust, Footer) ----------
   --am-accent (#7d6228 & Co.) ist fuer helle Flaechen gerechnet und erreicht
   auf dem dunklen Grundton nur 2,0-2,6:1 statt der geforderten 4,5:1.
   Auf dunklen Flaechen gilt deshalb --am-ink-accent, fuer gedaempften Text
   --am-ink-muted. Beides ist je Design-Variante eigens gesetzt. */
.am-hero .am-eyebrow, .am-trust .am-eyebrow, .am-footer .am-eyebrow{ color:var(--am-ink-accent); }
.am-hero .am-ph-text, .am-trust .am-ph-text, .am-footer .am-ph-text{ color:var(--am-ink-muted); }
.am-hero .am-muted, .am-hero .am-small.am-muted{ color:var(--am-ink-muted); }
.am-hero .am-ico, .am-trust .am-ico, .am-footer .am-ico{ color:var(--am-ink-accent); }

/* ---------- Sektions-Rhythmus ----------
   Reihenfolge Startseite: Hero dunkel -> Personen weiss -> Aktionen creme ->
   Kategorien weiss -> Ablauf creme -> Kontakt SAND -> Trust weiss -> Footer dunkel.
   Der Kontaktblock ist der einzige Sandton und hebt sich dadurch als Abschluss-CTA
   ab, ohne dunkel und schwer zu wirken. Nie zwei gleiche Toene nebeneinander.
   Vorher lagen bg (#f6f4ef) und surface (#fff) so dicht beieinander, dass die
   Sektionswechsel praktisch unsichtbar waren. */

/* ---------- Sektions-Kopf (einheitlich) ---------- */
.am-sec-intro{ text-align:center; max-width:660px; margin:0 auto 2.2rem; color:var(--am-muted); }

/* ---------- Personen / Ansprechpartner ----------
   Portraits sind Hochformat (ca. 0,82–0,91). Der frühere runde 96-px-Ausschnitt
   hat die Köpfe beschnitten. Jetzt 4:5-Hochformat (nah am Original) mit
   Bildausschnitt am oberen Rand — der Kopf bleibt vollständig sichtbar. */
/* Alle Strukturblöcke nutzen dieselbe Breite wie der Container (fluchten mit den
   Kategorie-Kacheln). Nur reiner Fließtext bleibt schmaler — Zeilen über ~80 Zeichen
   sind schlecht lesbar. */
.am-persons-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; max-width:none; margin:0 auto; }
/* Zweispaltig erst ab 1200 px. Eine Karte braucht 220 px Foto plus rund
   360 px Text, damit das Foto sein 4:5-Format behaelt statt zum Streifen
   zu werden — zwei davon nebeneinander brauchen knapp 1200 px. Darunter
   stehen die Karten untereinander und nutzen die volle Breite. */
@media(max-width:1199px){ .am-persons-grid{ grid-template-columns:1fr; } }
.am-person{ display:grid; grid-template-columns:220px 1fr; gap:0; align-items:stretch;
  background:var(--am-surface); border:1px solid var(--am-border); border-radius:var(--am-radius);
  overflow:hidden; }   /* keine Schlagschatten/Hover-Anhebung: ruhige, gedruckte Anmutung */
@media(max-width:480px){ .am-person{ grid-template-columns:1fr; } }
/* width:100% ist Pflicht: ohne sie rechnet aspect-ratio die Breite aus der
   Hoehe der Karte und sprengt die 220-px-Spalte (gemessen 413 px bei 860 px
   Fensterbreite). Die Spalte gibt die Breite vor, die Karte die Hoehe. */
.am-person-photo{ width:100%; aspect-ratio:4/5; min-height:100%;
  background:var(--am-border) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23a99f8d"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z"/></svg>') center/54px no-repeat; }
.am-person-photo--img{ background-size:cover !important; background-position:center 18% !important; background-repeat:no-repeat !important; }
@media(max-width:480px){ .am-person-photo{ aspect-ratio:16/10; } }
.am-person-body{ padding:1.5rem 1.6rem; display:flex; flex-direction:column; justify-content:center; }
.am-person-role{ text-transform:uppercase; letter-spacing:.12em; font-size:var(--am-fs-label); font-weight:700;
  color:var(--am-accent); margin:0 0 .4rem; }
.am-person-body h3{ margin:0 0 .6rem; font-size:var(--am-fs-lg); line-height:1.25; }
.am-person-body p{ margin:0; color:var(--am-muted); font-size:var(--am-fs-sm); line-height:1.6; }
.am-person-contact{ margin-top:.9rem !important; font-size:var(--am-fs-sm); }
.am-person-contact a{ color:var(--am-accent); text-decoration:underline; text-underline-offset:2px; }

/* Aktionen-Banner Platzhalter (Fallback, wird i. d. R. durch Slider ersetzt) */
.am-actions .am-placeholder{ border:2px dashed var(--am-accent); border-radius:var(--am-radius); padding:1.4rem; text-align:center; color:var(--am-accent-2); background:var(--am-bg); font-weight:600; }

/* --- Aktionen-Banner in voller Fensterbreite ---
   Der Container wird aufgehoben, die Pfeile wandern nach innen. Umschaltbar über
   die Klasse am-actions--full an der Sektion (in am_render_actions gesetzt). */
/* Die Steuerleiste des Sliders sitzt unter dem Vollbild auf der
   Sektionsflaeche - auf Grau ergab das einen Streifen unter dem Banner. */
.am-actions{ background:var(--am-surface); }
.am-actions--full{ padding:0; }
.am-actions--full .am-container{ max-width:none; padding:0; }
.am-actions--full .am-slider{ padding:0; }
.am-actions--full .am-slider-viewport{ border-radius:0; }
.am-actions--full .am-action{ min-height:clamp(320px,42vw,520px); }
.am-actions--full .am-action-inner{ max-width:var(--am-maxw); margin:0 auto; width:100%;
  padding-left:clamp(20px,5vw,64px); padding-right:clamp(20px,5vw,64px); }
.am-actions--full .am-prev{ left:clamp(8px,2vw,24px); }
.am-actions--full .am-next{ right:clamp(8px,2vw,24px); }
.am-actions--full .am-slider-controls{ margin-top:0; padding:1rem 0 0; }
.am-actions--full .am-actions-single .am-action{ border-radius:0; }

/* --- Aktionen-Slider (dynamisch: 1 = statisch, 2+ = Slider) --- */
.am-slider{ position:relative; padding:0 56px; }
.am-slider-viewport{ overflow:hidden; border-radius:var(--am-radius); }
.am-slider-track{ display:flex; transition:transform .5s ease; }
.am-action{ position:relative; flex:0 0 100%; min-height:340px; display:flex; align-items:center;
  text-decoration:none !important; color:#fff !important; background:var(--am-ink) center/cover no-repeat; }
.am-action--nobg{ background:var(--am-ink); }   /* flache Flaeche statt Verlauf, Ton der Variante */
.am-action-shade{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,24,28,.82) 0%,rgba(20,24,28,.5) 55%,rgba(20,24,28,.28) 100%); }
.am-action-inner{ position:relative; padding:clamp(1.6rem,4vw,2.8rem); max-width:820px; display:block; }
.am-action-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.14em; font-size:var(--am-fs-label); font-weight:700;
  color:#fff; background:var(--am-accent); padding:.32em .85em; border-radius:2px; margin-bottom:.75rem; }
.am-action-title{ display:block; font-size:var(--am-fs-h2); font-weight:700; line-height:1.2; margin-bottom:.5rem; color:#fff; }
.am-action-exc{ display:block; color:var(--am-ink-text); font-size:var(--am-fs-base); line-height:1.5; margin-bottom:.95rem; }
.am-action-more{ display:inline-block; font-weight:600; color:var(--am-ink-accent); }
.am-action:hover .am-action-more{ text-decoration:underline; }
.am-actions-single .am-action{ border-radius:var(--am-radius); overflow:hidden; }
/* Schlanke Chevrons ohne Kasten — die 44x44-Fläche bleibt als Klickziel erhalten
   (WCAG 2.5.8), sichtbar ist nur der feine Winkel. */
.am-slider-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; cursor:pointer;
  background:transparent; border:none; color:#fff; font-size:0; line-height:0;
  display:grid; place-items:center; z-index:2; padding:0; }
.am-slider-nav::before{ content:""; display:block; width:13px; height:13px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; opacity:.7; transition:opacity .15s; }
.am-prev::before{ transform:rotate(135deg); margin-left:5px; }
.am-next::before{ transform:rotate(-45deg); margin-right:5px; }
.am-slider-nav:hover::before{ opacity:1; }
.am-prev{ left:0; } .am-next{ right:0; }
/* Steuerzeile: Pause-/Play-Schalter + Dots (WCAG 2.2.2 – Autoplay anhaltbar) */
.am-slider-controls{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-top:1rem; }
.am-slider-toggle{ flex:0 0 auto; width:30px; height:30px; padding:0; cursor:pointer; border-radius:50%;
  border:1px solid var(--am-border); background:var(--am-surface); color:var(--am-heading);
  display:grid; place-items:center; transition:border-color .15s,color .15s; }
.am-slider-toggle:hover{ border-color:var(--am-accent); color:var(--am-accent); }
/* Icon rein geometrisch (keine Font-/Zeichensatz-Abhängigkeit): Pause = zwei Balken, Play = Dreieck */
.am-slider-toggle i{ display:block; width:8px; height:10px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.am-slider-toggle.is-paused i{ width:0; height:0; margin-left:2px; border:none;
  border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.am-slider-dots{ display:flex; gap:.25rem; justify-content:center; }
/* WCAG 2.5.8 (AA): Klickflaeche mindestens 24x24 px. Der Punkt bleibt optisch 10 px klein,
   die Schaltflaeche darum herum ist transparent und gross genug. */
.am-dot{ width:24px; height:24px; padding:0; border:none; background:transparent; cursor:pointer; position:relative; }
.am-dot::after{ content:""; position:absolute; inset:7px; border-radius:50%;
  background:var(--am-border); border:1px solid var(--am-border); transition:background .15s; }
.am-dot.is-active::after{ background:var(--am-accent); border-color:var(--am-accent); }
@media(max-width:600px){ .am-slider{ padding:0; } .am-slider-nav{ display:none; } .am-action{ min-height:280px; } }

/* Kategorie-Kacheln */
.am-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.4rem; }
/* Solange erst ein oder zwei Blogbeitraege je Kategorie da sind, sass die
   einzelne Kachel links im Dreierraster und wirkte wie ein Fehler. Bei
   wenigen Kacheln ruecken sie in die Mitte; ab drei greift wieder das
   volle Raster. */
.am-cat-blog .am-tiles:has(> :last-child:nth-child(-n+2)){
  grid-template-columns:repeat(auto-fit,minmax(0,380px)); justify-content:center; }
@media(max-width:900px){ .am-tiles{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .am-tiles{ grid-template-columns:1fr; } }
/* Die acht Ankauf-Kategorien in zwei Zeilen zu vier statt drei Zeilen zu
   drei. Betrifft nur das Kategorieraster; die Blogkacheln auf den
   Kategorieseiten bleiben dreispaltig. */
@media(min-width:1100px){ .am-cats .am-tiles{ grid-template-columns:repeat(4,1fr); } }
.am-tile{ display:block; text-decoration:none !important; border:1px solid var(--am-border);
  border-radius:var(--am-radius); overflow:hidden; background:var(--am-bg); transition:border-color .15s; }
.am-tile:hover{ border-color:var(--am-accent); }   /* statt Anheben nur die Kante betonen */
.am-tile-ph{ display:block; aspect-ratio:16/10; background:var(--am-surface-2) center/cover no-repeat; }
.am-tile-label{ display:block; padding:.9rem 1rem; font-weight:600; color:var(--am-heading) !important; }

/* ---------- Ankaufsprozess-Schritte ----------
   Karten statt Fließtext-Liste: gleiche Höhe (align-items:stretch), Nummer als
   eigenes Element, Titel einzeilig, Beschreibung darunter. Dadurch bleibt das
   Raster ruhig, auch wenn die Texte unterschiedlich lang sind. */
/* auto-fit statt fester 4 Spalten: passt sich der Schrittanzahl an
   (Kategorieseiten haben 3 Schritte, der Ankaufsprozess 4). */
.am-steps{ list-style:none; margin:0 auto; padding:0; max-width:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; align-items:stretch; }
/* Mittlere Breiten: feste 2 Spalten, sonst bliebe bei 4 Schritten der letzte
   allein in einer zweiten Zeile stehen (auto-fit ergäbe dort 3+1). */
@media(max-width:2319px) and (min-width:1150px){ .am-steps{ grid-template-columns:repeat(2,1fr); }
  /* Bei UNGERADER Schrittanzahl (Kategorieseiten haben 3) blieb der letzte Schritt
     halbbreit allein in der zweiten Zeile — dasselbe Waisenkind wie vorher bei 4.
     Er nimmt deshalb die ganze Zeile ein; der Inhalt ist ohnehin zentriert. */
  .am-steps > li:last-child:nth-child(odd){ grid-column:1 / -1; } }
@media(max-width:1149px){ .am-steps{ grid-template-columns:1fr; gap:1.2rem; } }
/* Kein Kasten-Look: nur eine feine Trennlinie oben, wie eine Spalte im Katalog. */
.am-steps li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  height:100%; background:transparent; border:none; padding:.4rem .2rem 0; position:relative; }
/* Ziffer, Titel und Text auf gemeinsamen Linien.
   Die vier Titel sind unterschiedlich lang („Erstkontakt" gegen „Persönliche
   Besichtigung & Bewertung") und brachen auf 1, 2 bzw. 3 Zeilen um. Dadurch
   begann jeder der vier Texte auf einer anderen Höhe — das war der eigentliche
   Bruch, nicht die Textlänge. Mit subgrid teilen sich alle Schritte dieselben
   drei Zeilen: Ziffernreihe, Titelreihe, Textreihe. Der Titel bekommt so viel
   Platz, wie der längste braucht, und alle Texte starten gleich.
   `text-wrap:balance` verteilt die Wörter eines mehrzeiligen Titels
   gleichmäßig, statt eine volle und eine kurze Zeile zu setzen. */
.am-step-t{ text-wrap:balance; }
@supports (grid-template-rows: subgrid){
  .am-steps{ grid-template-rows:auto auto 1fr; }
  .am-steps li{ display:grid; grid-row:span 3; grid-template-rows:subgrid;
    justify-items:center; align-content:start; gap:0; }
  /* Im Raster tragen die Elemente ihre Abstände selbst. */
  .am-steps li .am-step-n{ margin:0 0 .9rem; }
  .am-steps li .am-step-t{ align-self:start; margin:0 0 .5rem; }
  .am-steps li .am-step-d{ align-self:start; }
}
/* Einspaltig steht jeder Schritt für sich — dann bringt die gemeinsame
   Titelzeile nichts und würde nur Leerraum erzeugen. */
@media(max-width:520px){
  .am-steps{ grid-template-rows:none; }
  .am-steps li{ display:flex; grid-row:auto; }
}
/* feine Linie zwischen den Ziffernkreisen — zeichnet den Ablauf nach (nur einreihig) */
/* Ob „Fuer den ersten Kontakt empfehlen wir Ihnen unser Kontaktformular."
   ein- oder zweizeilig laeuft, haengt an der SPALTENBREITE, nicht an der
   Fensterbreite - die Spaltenzahl wechselt ja mit dem Layout (1/2/4).
   Eine Fenster-Query traefe es nur zufaellig. Deshalb eine Container-
   Query auf dem Schritt selbst: ab rund 470 px Spaltenbreite wuerde der
   Satz einzeilig, dort greift der weiche Umbruch und haelt alle vier
   Schritte zweizeilig. */
/* Die vier Saetze sind 65 bis 125 Zeichen lang. Eine Breite, bei der alle
   vier zweizeilig laufen, gibt es nicht: bei 425 px braucht der laengste
   noch drei Zeilen, bei 485 px kommt der kuerzeste schon mit einer aus.
   Deshalb zwei Massnahmen zusammen:
     1. Die Spalte wird nie breiter als 520 px - dort sind die Saetze 2,
        3 und 4 zweizeilig.
     2. Satz 1 bekommt einen weichen Umbruch, sobald die Spalte breit
        genug waere, ihn einzeilig zu setzen (Container-Query, denn das
        haengt an der Spalte, nicht am Fenster).
   Bei schmaleren Spalten - vier nebeneinander unter rund 2100 px - bleibt
   der laengste Satz laenger; das loest nur der Wortlaut. */
/* ACHTUNG: container-type:inline-size und justify-self:center vertragen
   sich nicht - das Item darf seine Breite dann nicht mehr vom Inhalt
   nehmen und kollabiert auf wenige Pixel (gemessen: 6 px). Das Item
   bleibt deshalb gestreckt; begrenzt wird der Textblock darin. */
.am-steps li{ container-type:inline-size; }
.am-step-d{ max-width:520px; margin-left:auto; margin-right:auto; }
.am-br-breit{ display:none; }
@container (min-width:470px){ .am-br-breit{ display:inline; } }
/* Im Viererlayout ist die Spalte rund 315 px breit. Der laengste Titel
   („Persoenliche Besichtigung & Bewertung") braucht in 16 px etwa 310 px
   - das kippt bei jeder Rundung. Eine Stufe kleiner (bestehendes Token,
   kein neuer Zwischenwert) schafft rund 40 px Reserve und ist bei
   schmaleren Spalten typografisch ohnehin richtig. */
@media(min-width:2320px){
  /* Eine Stufe spezifischer als die Grunddefinition weiter unten in dieser
     Datei - sonst gewinnt die spaetere Regel und die Groesse bleibt bei
     16 px. */
  .am-steps li .am-step-t{ font-size:var(--am-fs-sm); }
  .am-steps li:not(:last-child)::after{ content:""; position:absolute; top:1.85rem;
    left:calc(50% + 1.75rem); width:calc(100% - 1.7rem); height:1px; background:var(--am-border); }
}
/* Ziffer oben in einem feinen Kreis (nicht gefüllt — bleibt zurückhaltend),
   das Symbol steht vor dem Schritt-Titel. */
/* Schrift in --am-accent-2, Kreislinie im helleren --am-accent: Die Ziffer steht
   auf Sandflaechen, wo der helle Akzent nur 3,9-4,1:1 erreicht (Prüflauf 13.08.).
   Fuer die reine Linie genuegen 3:1, sie darf deshalb hell bleiben. */
.am-step-n{ display:grid; place-items:center; height:2.9rem; width:2.9rem; border-radius:50%;
  background:none; border:1px solid var(--am-accent); color:var(--am-accent-2);
  font-family:"Playfair Display",Georgia,serif; font-size:var(--am-fs-lg); line-height:1; font-weight:600;
  margin:0 0 .9rem; }
.am-step-t{ display:flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700;
  color:var(--am-heading); font-size:var(--am-fs-base); line-height:1.3; }

.am-step-d{ display:block; color:var(--am-muted); font-size:var(--am-fs-sm); line-height:1.55; }
.am-steps-sec .am-steps{ margin-bottom:1.9rem; }
/* Schlaegt die 900-px-Satzbreite fuer dieses Raster - aber nicht ins
   Uferlose: Das Raster ist immer nur so breit, wie seine Spalten es
   brauchen (je rund 560 px), und bleibt mittig. Lief es ueber die volle
   Bildschirmbreite, standen zwei Spalten mit 630 px Breite um einen nur
   307 px breiten Text - das riss die Sektion auseinander. */
.am-steps-sec > .am-container > .am-steps,
.am-cat-cta > .am-container > .am-steps{ max-width:580px; }
@media(min-width:1150px){
  .am-steps-sec > .am-container > .am-steps,
  .am-cat-cta > .am-container > .am-steps{ max-width:1180px; }
}
@media(min-width:2320px){
  .am-steps-sec > .am-container > .am-steps,
  .am-cat-cta > .am-container > .am-steps{ max-width:2380px; }
}
/* „Der Weg zum Verkauf" laeuft ueber die Bildschirmbreite, nicht nur ueber
   die 1400 px Inhaltsbreite: vier Schritte nebeneinander brauchen Platz,
   damit Titel und Text nicht umbrechen. Der Seitenrand waechst mit dem
   Schirm (3,5 vw), bleibt aber zwischen 20 und 72 px. Ueberschrift und
   Knopf sind zentriert und bleiben davon unberuehrt. */
.am-steps-sec > .am-container,
.am-cat-cta > .am-container{ max-width:none;
  padding-left:clamp(20px,3.5vw,72px); padding-right:clamp(20px,3.5vw,72px); }
/* Gleichmaessigere Zeilenverteilung statt einer vollen und einer
   kurzen Restzeile - wirkt bei vier Spalten nebeneinander sofort. */
.am-step-d{ text-wrap:balance; }

/* ---------- Ankaufsprozess: Schritte im Detail ---------- */
/* Als gesetzte Liste mit Trennlinien statt gestapelter Kästen */
.am-details{ max-width:none; margin:0 auto; display:flex; flex-direction:column; gap:1.4rem; }
/* Schritt-Details als aufklappbare Karten (details/summary = ohne JS bedienbar) */
/* Karte traegt jetzt Weiss + Rand statt Grau: so bleibt sie auf beiden
   Sektionsflaechen sichtbar (vorher verschwand sie auf grauem Grund). */
.am-detail{ background:var(--am-surface); border:1px solid var(--am-border);
  border-radius:var(--am-radius); overflow:hidden; }
.am-detail > summary{ display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem; align-items:center;
  cursor:pointer; list-style:none; padding:1.3rem 1.6rem; }
.am-detail > summary::-webkit-details-marker{ display:none; }
.am-detail > summary::after{ content:""; width:11px; height:11px; margin-right:.3rem;
  border-right:1.5px solid var(--am-accent); border-bottom:1.5px solid var(--am-accent);
  transform:translateY(-30%) rotate(45deg); transition:transform .15s; }
.am-detail[open] > summary::after{ transform:translateY(20%) rotate(225deg); }
.am-detail > summary h3{ margin:0; font-size:var(--am-fs-md); }
.am-detail-body{ padding:0 1.6rem 1.5rem; }
.am-detail-body > *:first-child{ margin-top:0; }

@media(max-width:560px){ .am-detail > summary{ grid-template-columns:auto 1fr; gap:.9rem; padding:1.1rem 1.1rem; }
  .am-detail > summary::after{ grid-column:2; justify-self:end; } .am-detail-body{ padding:0 1.1rem 1.2rem; } }
.am-detail-n{ height:auto; width:auto; border-radius:0; background:none; color:var(--am-accent);
  display:block; font-family:"Playfair Display",Georgia,serif; font-size:var(--am-fs-display); line-height:1; font-weight:600;
  min-width:2.2rem; }

.am-detail-body p{ margin:0 0 .9rem; color:var(--am-muted); }
/* Aufzählung mit feinem Strich statt Häkchen */
.am-ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.am-ticks li{ position:relative; padding-left:1.3rem; color:var(--am-text); font-size:var(--am-fs-sm); line-height:1.55; }
.am-ticks li::before{ content:""; position:absolute; left:0; top:.72em; width:.7rem; height:1px;
  background:var(--am-accent); }

/* ---------- Einstiegsblock (Startseite) ----------
   Eine Spalte, aber mit Rhythmus statt Textwand:
     Eroeffnung in der Serifenschrift  ->  die vier Fragen als leichte Reihe
     ->  drei Absaetze Fliesstext  ->  Zusage  ->  Handlungsaufruf
   Die Fragen sind der einzige gestaltete Einschub. Sie tragen ihr
   Fragezeichen im selben Kreis wie die Ziffern der Ablaufschritte, aber
   keine Kartenflaeche: der Kreis reicht als Anker, und die Sektion bleibt
   flach. Zwei Fragen nebeneinander, ab 720 px darunter. */
/* ---------- Einstiegsblock der Startseite ----------
   Sechs Absaetze am Stueck, Wortlaut gesetzt (§16). Gestaltet wird nur die
   Gewichtung, und die folgt der Dramaturgie des Textes:

     Auftakt (die Situation)      -> Lead, gross, mit Akzentkante
     die vier Fragen              -> Einschub, der einzige Rhythmuswechsel
     drei erklaerende Absaetze    -> ruhiger Fliesstext
     die Zusage                   -> Serifen-Auszeichnung, mittig
     Handlungsaufruf              -> .am-schluss

   Vorher trugen alle sechs Absaetze dasselbe Gewicht; der Block las sich
   wie ein Brief. Die Breitenausnahme von 1200 px ist mit der linksbuendigen
   Ausrichtung entfallen - bei 1200 px stehen ~110 Zeichen in einer Zeile,
   deutlich ueber der lesbaren Spanne. Es gilt wieder die Satzbreite der
   uebrigen Seite. */
.am-section > .am-container > .am-statement:first-child{ margin-top:0; }

/* Zentrierte Fassung des Einstiegsblocks (Sektion traegt zusaetzlich
   `am-section--mitte`). Zentrierter Fliesstext haelt nur unter zwei
   Bedingungen, beide hier gesetzt:
     1. ausgeglichener Umbruch - `text-wrap:balance` verteilt die Woerter
        gleichmaessig auf die Zeilen, statt die letzte als Rest stehen zu
        lassen. Genau dieser Rest liess den Block vorher unfertig wirken.
        Balance traegt die Satzbreite: die Zeilen werden von sich aus
        gleichmaessig, auch wenn der Block breiter laeuft.
     2. enge Abstaende (unten) - zentrierte Absaetze ohne linke Kante
        brauchen Naehe, sonst zerfaellt der Block in einzelne Inseln.
   Die Satzbreite ist die der uebrigen Seite (900 px). Eine Zwischenstufe
   mit 760 px war gesetzt, als der Umbruch noch nicht ausgeglichen war -
   mit `balance` ist die Verengung nicht mehr noetig, und der Abstand zur
   breiteren Fragenreihe faellt geringer aus. */
.am-einstieg-sec.am-section--mitte > .am-container > p,
.am-einstieg-sec.am-section--mitte > .am-container > .am-auftakt,
.am-einstieg-sec.am-section--mitte > .am-container > .am-statement{
  max-width:900px; text-wrap:balance; }
.am-einstieg-sec.am-section--mitte > .am-container > .am-auftakt{
  text-align:center !important; }

/* ---- Abstaende der Einstiegssektion ----
   Divi gibt jedem <p> ein `padding-bottom:1em` mit - 16 px, die zu jedem
   Rand noch dazukommen und in keiner margin-Angabe auftauchen. In dieser
   Sektion ist es abgeschaltet, damit die Abstaende hier wirklich das sind,
   was unten steht. Sonst laesst sich der Block nicht verdichten, ohne dass
   die Werte unplausibel klein werden.
   Die Abstufung folgt der Gliederung: innerhalb einer Gruppe eng, zwischen
   den Gruppen (Auftakt / Fragen / Erklaerung / Zusage+Aufruf) weiter. */
.am-einstieg-sec > .am-container > p,
.am-einstieg-sec .am-schluss p{ padding-bottom:0 !important; }
.am-einstieg-sec > .am-container > p{ margin-bottom:1.15rem; }
.am-einstieg-sec > .am-container > .am-auftakt{ margin-bottom:1.6rem; }
.am-einstieg-sec > .am-container > .am-einstieg-titel{ margin-bottom:.7rem !important; }
.am-einstieg-sec > .am-container > .am-fragen{ margin-bottom:1.9rem !important; }
.am-einstieg-sec > .am-container > .am-statement{ margin-top:2rem; margin-bottom:0; }
.am-einstieg-sec > .am-container > .am-schluss{ margin-top:1.6rem; }
.am-einstieg-sec .am-schluss p{ margin-bottom:.9rem; }

/* Auftakt: der Eroeffnungssatz traegt dieselbe Typografie wie die Zusage am
   Ende der Sektion (Serife, --am-fs-lg) - die beiden rahmen den Block als
   Frage und Antwort. Anders als die Zusage steht er linksbuendig: er ist
   vier Zeilen lang, zentriert liefe er auseinander.
   Eine senkrechte Akzentkante davor war probiert und wieder entfernt. */
.am-auftakt{ margin:0 auto 2.2rem; max-width:900px;
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:var(--am-fs-lg); line-height:1.45; color:var(--am-heading);
  text-align:left !important; }

/* Die Ueberleitung zu den Fragen bleibt beim Absatz, zu dem sie gehoert. */
.am-einstieg-titel{ margin:0 auto .9rem !important; }

/* Die vier Fragen: der einzige gestaltete Einschub der Sektion. Jede Frage
   steht in einem eigenen rechteckigen Feld, alle vier nebeneinander in einer
   Zeile. Dafuer bricht die Reihe aus der 900-px-Satzbreite aus - nebeneinander
   brauchen die vier Felder rund 1150 px. Leichte Grundflaeche mit Rand: auf
   der weissen Sektionsflaeche waeren weisse Felder nur ein Rahmen, und die
   Felder sind Auszeichnungen, keine Inhaltskarten (fuer die gilt weiterhin
   weiss mit Rand). Kaum gerundet - die Form bleibt rechteckig.
   Zuvor probiert und verworfen: Zweispaltenraster, schlichte Reihe ohne
   Kasten, alle vier in EINEM gemeinsamen Kasten. */
.am-fragen{ list-style:none !important; max-width:none !important;
  margin:0 auto 2.6rem !important; padding:0 !important;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:.7rem; }
.am-fragen li{ margin:0 !important;
  padding:.6rem 1rem; background:var(--am-bg);
  border:1px solid var(--am-border); border-radius:2px;
  font-size:var(--am-fs-sm); line-height:1.5; color:var(--am-heading); }
.am-fragen li::marker{ content:""; }
/* Passen die Felder nicht mehr nebeneinander, brechen sie um und bleiben
   dabei so breit wie ihr Text - eine Spalte gleich breiter Bloecke waere
   eine Liste, keine Reihe von Auszeichnungen. Sie bleiben auch dann
   zentriert: die Sektion steht auf ihrer Mittelachse, linksbuendig
   gestapelte Felder neben mittigem Text saehen wie ein Fehler aus. */
@media(max-width:1150px){
  .am-fragen{ max-width:900px !important; }
}

/* Die Zusage traegt jetzt die Serifen-Auszeichnung: ein Satz, zwei Zeilen -
   kurz genug, dass die Groesse ihn hebt statt ihn aufzublaehen. Sie ist der
   Wendepunkt vor dem Handlungsaufruf und braucht Luft davor. */
.am-statement{ margin:2.6rem auto 0; max-width:820px;
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:var(--am-fs-lg); line-height:1.4; color:var(--am-heading);
  text-align:center !important; }

/* ---------- Vertrauens-Punkte ---------- */
/* Spalten statt Karten: feine Oberlinie, kein Akzentstreifen, kein Kasten */
/* zentriert wie die Ablauf-Schritte */

/* ---------- Teaser-Sektion (Verweis auf eine Unterseite) ---------- */
/* Kein Callout-Kasten mit farbigem Balken, sondern ein ruhiges Feld, das oben und
   unten von feinen Linien gefasst wird — Anmutung einer Anzeige im Katalog. */
/* Kontakt-/Abschluss-Teaser ohne eigene Fläche (erbt die Grundfarbe) —
   die Abgrenzung übernehmen die feinen Linien oben und unten. */
.am-teaser-box{ display:grid; grid-template-columns:1.15fr .85fr; gap:2.8rem; align-items:center;
  max-width:none; margin:0 auto; background:transparent; border:none;
  border:none;
  padding:1.2rem .2rem 2rem; }
@media(max-width:820px){ .am-teaser-box{ grid-template-columns:1fr; gap:1.6rem; padding:2rem .2rem; } }
.am-teaser-box h2{ text-align:left !important; margin:0 0 .6rem !important; }
.am-teaser-box p{ margin:0 0 .5rem; color:var(--am-muted); }
.am-teaser-cta{ display:flex; flex-direction:column; gap:.8rem; }
.am-teaser-cta .am-btn{ text-align:center; }
.am-contact-list{ list-style:none; margin:.2rem 0 0; padding:0; }
.am-contact-list li{ margin:.45rem 0; display:flex; gap:.6rem; align-items:baseline; }
.am-contact-list .am-cl-label{ flex:0 0 5.2rem; color:var(--am-muted); font-size:var(--am-fs-sm); }
.am-contact-list a{ color:var(--am-accent); text-decoration:underline; text-underline-offset:2px; font-weight:600; }

/* Trust */
.am-trust{ color:var(--am-ink-text); text-align:center; }
.am-trust .am-muted{ color:var(--am-ink-muted); }
.am-trust a{ color:var(--am-ink-link); }

/* Links im Fliesstext unterstreichen: Farbe allein reicht nicht (WCAG 1.4.1),
   zumal der Kontrast zum umgebenden Text unter 3:1 liegt. Navigation und
   Buttons bleiben bewusst ohne Unterstreichung. */
.am-trust p a, .am-legalnote a, .am-legal p a, .am-legal li a, .am-faq-a a{
  text-decoration:underline; text-underline-offset:2px; }

/* Auffangregel fuer Textlinks: Ohne eigene Angabe erben Links Divis Akzentfarbe
   aus dem Klon (#681823, ein GH-Bordeaux) — die passt zu keiner der Varianten
   und war z. B. beim Link „Ausfuehrlich: So laeuft der Ankauf" sichtbar.
   Auf dunklen Flaechen gilt weiter die hellere ink-Variante. */
.am-page p a:not(.am-btn){ color:var(--am-accent); }
.am-hero p a:not(.am-btn), .am-trust p a:not(.am-btn),
.am-action p a:not(.am-btn){ color:var(--am-ink-link); }

/* Rechtstexte / Legal-Seiten (Impressum, Rechtliche Hinweise, Datenschutz) */
/* Gleiche Inhaltsbreite wie alle anderen statischen Seiten (31.08.).
   Impressum und Rechtliche Hinweise standen vorher auf 820 px, die
   Datenschutzseite daneben auf voller Breite - das fiel im Wechsel auf. */
.am-legal{ max-width:none; margin:0 auto; }
.am-legal h1,.am-legal h2,.am-legal h3{ color:var(--am-heading); }
.am-legal h2{ font-size:var(--am-fs-h3); margin:1.8rem 0 .5rem; }
.am-legal p{ margin:0 0 1rem; }
.am-legal ul{ margin:0 0 1.1rem 1.2rem; } .am-legal li{ margin:.35rem 0; }
.am-legal a{ color:var(--am-accent); }

/* =====================================================================
   OBERKATEGORIE-BLUEPRINT (Konzept §4)
   ===================================================================== */
/* Inhaltsbreite einheitlich mit dem Rest der Seite (Entscheidung Lukas, 31.08.):
   die fruehere 900-px-Verengung liess Textsektionen schmaler wirken als die
   Kachel- und Ablaufsektionen daneben. Breite kommt jetzt vom .am-container. */
.am-cat-blog .am-muted{ text-align:center; }
/* Artikel-Kacheln (Sektion 2) */
.am-tile-img{ display:block; aspect-ratio:16/10; background:var(--am-border) center/cover no-repeat; }
.am-tile-body{ display:block; padding:.9rem 1.1rem 1.2rem; }
.am-tile-exc{ display:block; margin-top:.4rem; font-size:var(--am-fs-sm); line-height:1.55; color:var(--am-muted); font-weight:400; }
/* CTA-Sektion */
.am-cat-cta .am-steps{ margin-bottom:1.8rem; }
/* FAQ-Akkordeon: <details>/<summary> ist ohne JavaScript tastaturbedienbar */
/* Zeilen mit Trennlinie statt einzelner Kästen */
.am-faq-item{ max-width:none; margin:0 auto .5rem; background:var(--am-surface); border:1px solid var(--am-border);
  border:none; border-radius:var(--am-radius); overflow:hidden; }

.am-faq-item summary{ cursor:pointer; padding:1.15rem 3rem 1.15rem 1.2rem; font-weight:600; color:var(--am-heading);
  position:relative; list-style:none; }
.am-faq-item summary::-webkit-details-marker{ display:none; }
.am-faq-item summary::after{ content:""; position:absolute; right:1.2rem; top:50%; width:9px; height:9px;
  border-right:2px solid var(--am-accent); border-bottom:2px solid var(--am-accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .15s; }
.am-faq-item[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.am-faq-item summary:hover{ color:var(--am-accent); }
.am-faq-a{ padding:0 1.2rem 1.2rem; }
.am-faq-a p{ margin:0; color:var(--am-text); }
/* §86a-Hinweis am Seitenende */
.am-legalnote{ padding:1.6rem 0 2.4rem; }
.am-legalnote p{ text-align:center; margin:0; }
.am-legalnote a{ color:var(--am-accent); }

/* =====================================================================
   ANKAUFSFORMULAR
   ===================================================================== */
.am-form{ max-width:760px; margin:0 auto; }
.am-field{ margin:0 0 1.15rem; }
.am-field label{ display:block; font-weight:600; color:var(--am-heading); margin:0 0 .35rem; }
.am-field input, .am-field select, .am-field textarea{
  width:100%; padding:.7em .85em; font:inherit; color:var(--am-text); background:var(--am-surface);
  border:1px solid var(--am-border); border-radius:var(--am-radius); }
.am-field textarea{ resize:vertical; min-height:9rem; }
.am-field input:focus, .am-field select:focus, .am-field textarea:focus{ border-color:var(--am-accent); }
.am-hint{ margin:.35rem 0 0; font-size:var(--am-fs-xs); color:var(--am-muted); }
.am-req{ color:var(--am-accent); }
.am-field.is-error input, .am-field.is-error select, .am-field.is-error textarea{ border-color:#a3282f; background:#fdf7f7; }
.am-form-error{ border:1px solid #c9a2a4; background:#fdf3f3; padding:.9rem 1.1rem; border-radius:var(--am-radius); margin:0 0 1.4rem; }
.am-form-ok{ border:none; background:var(--am-bg); border-radius:var(--am-radius);
  padding:2rem 2.2rem; max-width:760px; margin:0 auto; }
.am-form-ok h2{ margin:0 0 .5rem; }
.am-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
/* Divi blendet native Checkboxen site-weit aus (input[type=checkbox]{display:none}) —
   deshalb hier explizit zuruecksetzen und eigenen Haken zeichnen. */
.am-check label{ display:flex; align-items:flex-start; gap:.7rem; font-weight:400; line-height:1.5; }
.am-check input[type=checkbox]{
  display:inline-block !important; appearance:none !important; -webkit-appearance:none !important;
  flex:0 0 22px; width:22px !important; height:22px; margin:.15rem 0 0; padding:0; position:relative; cursor:pointer;
  background:var(--am-surface); border:2px solid var(--am-muted) !important; border-radius:4px; }
.am-check input[type=checkbox]:checked{ background:var(--am-accent); border-color:var(--am-accent) !important; }
.am-check input[type=checkbox]:checked::after{
  content:""; position:absolute; left:6px; top:2px; width:6px; height:12px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.am-check.is-error input[type=checkbox]{ border-color:#a3282f !important; }
.am-check a{ color:var(--am-accent); }

/* Easy-TOC-Box ausblenden (Konzept: kein TOC) */
#ez-toc-container,.ez-toc-v2,.ez-toc-container,div#ez-toc-container{ display:none !important; }

/* =====================================================================
   HEADER / Primärmenü  (hochwertiger, vertikal zentriert)
   ===================================================================== */
/* Der Header nimmt den Flaechenton der Design-Variante auf (statt immer weiss),
   damit die gewaehlte Farbwelt schon oben sichtbar ist. Bewusst der HELLE Ton:
   das aktuelle Logo hat keinen freigestellten Hintergrund (weisse Flaeche) und
   wuerde auf dunklem Grund als weisser Kasten erscheinen. Sobald ein
   freigestelltes Logo vorliegt, ist auch ein dunkler Header moeglich. */
/* Ohne Linie ueber dem Header (01.09.2026): der 2-px-Akzentstrich war ein
   Rest aus der ersten Fassung und passt nicht mehr zur Regel, dass
   Flaechen trennen und nicht Striche. */
#main-header{ border-top:none; border-bottom:none;
  box-shadow:none; background:var(--am-surface-2); }
/* Auf dem Sandton reicht --am-accent als TEXTfarbe nicht (3,9-4,1:1 statt 4,5:1).
   Fuer Schrift gilt im Header deshalb der dunklere --am-accent-2; die rein
   dekorativen Elemente (Unterstreichung, CTA-Flaeche) bleiben im Akzent, da
   dort 3:1 genuegt. */
/* Divis Header-Container ist auf 1080 px / 80 % begrenzt. Damit Logo und Menü exakt
   mit dem Seiteninhalt fluchten, bekommt er dieselbe Breite und dasselbe Innenmaß
   wie .am-container. */
#main-header .container{ max-width:var(--am-maxw) !important; width:100% !important;
  padding-left:clamp(16px,4vw,32px) !important; padding-right:clamp(16px,4vw,32px) !important; }
/* Divis Clearfix `.container::after` wird im Flex-Layout zu einem eigenen
   Flex-Element. Bei `justify-content:space-between` verteilt der Browser dann
   drei statt zwei Elemente — das Menü landete rund 240 px vor der rechten
   Inhaltskante. Ohne den Clearfix schliesst es buendig mit dem Seiteninhalt ab. */
#main-header .container::after,
#main-header .et_menu_container::after{ content:none !important; display:none !important; }
/* GLOBAL Logo-Begrenzung (alle Breiten, kein Überlauf) */
#main-header #logo{ max-height:60px !important; width:auto !important; }
/* ---------- Header-Marke: freigestelltes Zeichen + Wortmarke als Text ----------
   Die Wortmarke ist echter Text (nicht Teil einer Bilddatei): scharf in jeder
   Auflösung, markierbar, und der Screenreader liest den Markennamen einmal
   sauber vor — das Zeichen daneben ist deshalb dekorativ (alt="").
   Farben: der Name in --am-heading, die Endung in --am-accent-2. Bewusst NICHT
   --am-accent — der hält auf dem Sandton des Headers keine 4,5:1 (nur 3,9-4,1). */
#main-header .am-brand{ display:flex !important; align-items:center; gap:.6rem;
  text-decoration:none !important; line-height:1; }
#main-header .am-brand-mark{ display:block; flex:0 0 auto;
  height:46px !important; width:auto !important; max-height:46px !important; margin:0 !important; top:auto !important; }
#main-header .am-brand-text{ font-family:"Playfair Display",Georgia,serif;
  font-size:var(--am-fs-lg); font-weight:700; letter-spacing:.005em; white-space:nowrap;
  color:var(--am-heading); }
#main-header .am-brand-tld{ color:var(--am-accent-2); }
#main-header .am-brand:hover .am-brand-text{ color:var(--am-accent-2); }
/* Hamburger-Icon einheitlich im AM-Gold (alle Breiten) */
#main-header .mobile_menu_bar:before{ color:var(--am-accent-2) !important; }
@media(min-width:981px){
  /* Header-Zeile: Logo links, Menü+CTA rechts, alles vertikal zentriert */
  #main-header .et_menu_container{ display:flex !important; align-items:center; justify-content:space-between; min-height:104px; }
  #main-header .logo_container{ position:static !important; float:none !important; width:auto !important; height:auto !important; max-width:none; margin:0; }
  #main-header #logo{ max-height:64px !important; width:auto !important; margin:0; top:auto; }
  #et-top-navigation{ position:static !important; float:none !important; padding:0 !important; margin:0 !important;
    width:auto !important; display:flex; align-items:stretch; align-self:stretch; gap:.15em; }
  /* Divi schachtelt: #et-top-navigation > nav#top-menu-nav > ul#top-menu > li
     — alle drei Ebenen müssen strecken, sonst bleibt das li niedrig. */
  #top-menu-nav{ display:flex; align-items:stretch; align-self:stretch; float:none !important; }
  #top-menu{ display:flex; align-items:stretch; align-self:stretch; }
  /* volle Höhe je Menüpunkt: nur so landet das Untermenü mit top:100 % exakt
     an der Header-Unterkante (Divi rechnet sonst mit einem negativen top). */
  #top-menu > li{ display:flex; align-items:center; position:relative; }
  #top-menu > li > a{ font-size:var(--am-fs-nav) !important; letter-spacing:.07em; text-transform:uppercase; font-weight:600;
    color:var(--am-heading) !important; padding:0 !important; line-height:1.2; position:relative; white-space:nowrap; }
  #et-top-navigation{ flex-wrap:nowrap; }
  #top-menu{ flex-wrap:nowrap; }
  #top-menu > li > a:hover{ color:var(--am-accent-2) !important; }
  #top-menu > li > a::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px;
    background:var(--am-accent); transform:scaleX(0); transform-origin:left; transition:transform .18s; }
  #top-menu > li > a:hover::after, #top-menu > li.current-menu-item > a::after{ transform:scaleX(1); }
  #top-menu > li.current-menu-item > a{ color:var(--am-accent-2) !important; }
  /* CTA-Button einheitlich am Ende */
  #top-menu li.am-cta-menu{ margin-left:.7em; }
  #top-menu > li.am-cta-menu > a{ background:var(--am-accent); color:#fff !important; border-radius:var(--am-radius);
    padding:.72em 1.25em !important; border:1px solid var(--am-accent-2); white-space:nowrap; }
  #top-menu > li.am-cta-menu > a::after{ display:none !important; }
  #top-menu > li.am-cta-menu > a:hover{ background:var(--am-accent-2); color:#fff !important; }

  /* ---- Untermenü (Kategorien-Dropdown) ---- */
  #top-menu li.menu-item-has-children > a{ padding-right:1.1em !important; }
  /* WICHTIG: Divi benutzt für den Dropdown-Pfeil DASSELBE ::after (ETmodules-Icon,
     per top positioniert). Unsere Unterstreichung erbte dadurch Divis Position und
     saß ÜBER dem Text. Deshalb hier alle Pfeil-Eigenschaften explizit zurücksetzen —
     der eigene Chevron kommt aus ::before. */
  #top-menu > li.menu-item-has-children > a::after,
  #top-menu > li.menu-item-has-children > a:first-child::after{
    font-family:inherit !important; content:"" !important;
    top:auto !important; bottom:-7px !important; left:0 !important; right:1.1em !important;
    width:auto !important; height:2px !important; margin:0 !important; padding:0 !important;
    line-height:0 !important; font-size:0 !important;
    background:var(--am-accent) !important; color:transparent !important;
    transform:scaleX(0); transform-origin:left; transition:transform .18s; }
  #top-menu > li.menu-item-has-children > a:hover::after,
  #top-menu > li.menu-item-has-children.current-menu-item > a::after{ transform:scaleX(1); }
  #top-menu li.menu-item-has-children > a::before{ content:""; position:absolute; right:0; top:50%;
    width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:translateY(-70%) rotate(45deg); opacity:.6; }
  /* Das Untermenü beginnt direkt unter dem Menütext, nicht erst am Header-Rand.
     Bezug ist die Mitte des (auf volle Headerhöhe gestreckten) li — also die
     Textmitte — plus halbe Zeilenhöhe und etwas Abstand. */
  #top-menu > li > ul.sub-menu{ top:calc(50% + 2.1em) !important; left:0 !important; margin:0 !important; }
  /* Divi oeffnet das Untermenue ausschliesslich per Maus (JS-Klasse .et-hover).
     Fuer Tastaturnutzer waren die sechs Kategorie-Links damit unerreichbar und
     fuer Screenreader unsichtbar (visibility:hidden) — WCAG 2.1.1 Tastatur.
     Es oeffnet jetzt auch, wenn der Fokus im Menuepunkt steht; beim
     Weitertabben schliesst es von selbst. */
  #top-menu > li.menu-item-has-children:focus-within > ul.sub-menu{
    visibility:visible !important; opacity:1 !important; }
  #top-menu ul.sub-menu{ display:block; padding:.4rem 0 !important; width:auto !important; min-width:16rem;
    background:var(--am-surface) !important; border:none; border-top:2px solid var(--am-accent);
    box-shadow:0 10px 28px rgba(0,0,0,.10); border-radius:0 0 var(--am-radius) var(--am-radius); }
  #top-menu ul.sub-menu li{ display:block !important; width:100% !important; padding:0 !important; }
  #top-menu ul.sub-menu li a{ display:block; width:auto !important; white-space:nowrap;
    padding:.62rem 1.2rem !important; font-size:var(--am-fs-nav) !important; font-weight:600;
    text-transform:none; letter-spacing:.02em; color:var(--am-heading) !important;
    transition:background .15s, color .15s; }
  #top-menu ul.sub-menu li a::after{ display:none !important; }
  #top-menu ul.sub-menu li a:hover{ background:var(--am-bg); color:var(--am-accent) !important; opacity:1; }
  #top-menu ul.sub-menu li.current-menu-item a{ color:var(--am-accent) !important; }
  #et_top_search{ display:flex; align-items:center; margin-left:.4em; }
}
/* Engbereich 981–1199px: Logo + Menüpunkte + CTA passen nicht mehr nebeneinander
   -> früh auf Divis Hamburger-Menü umschalten (statt gedrängtem/umbrechendem Desktop-Menü) */
@media(min-width:981px) and (max-width:1339px){
  #main-header #top-menu-nav{ display:none !important; }
  #main-header #et_top_search{ display:none !important; }
  #main-header #et-top-navigation{ padding-right:0 !important; margin-left:auto !important; }
}

/* ---------- Hamburger: vertikal mittig im Header ----------
   Divi positioniert .mobile_nav/.mobile_menu_bar mit eigenen Abständen (padding-bottom,
   float, absolute) und schiebt das Icon dadurch aus der Mitte. Wir stellen die
   Kette #et_mobile_nav_menu > .mobile_nav > .mobile_menu_bar konsequent auf Flex um.
   WICHTIG: nur bis 1199 px — ab 1200 px gilt das Desktop-Menü und Divi blendet den
   Hamburger aus. Ohne diese Grenze stünde er zusätzlich neben dem Desktop-Menü. */
/* Unter 981 px hält Divi die Header-Höhe über padding-top an #et-top-navigation,
   weil das Logo absolut positioniert ist und selbst keine Höhe beiträgt. Der
   Hamburger sitzt dadurch unten statt mittig. Lösung: Logo zurück in den Fluss
   holen, Zeile als Flexbox zentrieren, Ersatz-Padding entfernen. */
@media(max-width:980px){
  #main-header .et_menu_container{ display:flex !important; align-items:center; justify-content:space-between;
    min-height:72px; padding-top:8px; padding-bottom:8px; }   /* Höhe kam vorher aus Divis Ersatz-Padding */
  #main-header .logo_container{ position:relative !important; float:none !important; width:auto !important;
    height:auto !important; max-width:none; }
  #main-header #logo{ max-height:52px !important; width:auto !important; max-width:210px; margin:0; top:auto; }
  /* Marke auf kleinen Schirmen etwas kompakter, damit neben dem 44-px-Hamburger
     auch bei 390 px Luft bleibt (Zeichen 36 + Wortmarke ~150 + Hamburger 44). */
  #main-header .am-brand{ gap:.45rem; }
  #main-header .am-brand-mark{ height:36px !important; max-height:36px !important; }
  #main-header .am-brand-text{ font-size:var(--am-fs-md); }
  /* Divi setzt #et-top-navigation per JS ein INLINE padding-left in Logo-Breite
     (hier 192 px). In der Flex-Zeile addiert sich das zur Logo-Breite und schob den
     Hamburger 25 px aus dem Bild -> horizontales Scrollen bei 390 px. Der Abstand
     ist hier ueberfluessig, margin-left:auto haelt die Zeile ohnehin auseinander. */
  #main-header #et-top-navigation{ padding:0 !important; margin-left:auto !important; float:none !important; }
}

@media(max-width:1339px){
  #main-header #et_mobile_nav_menu{ display:flex !important; align-items:center; float:none !important;
    margin:0 !important; padding:0 !important; height:auto; }
  #main-header #et_mobile_nav_menu .mobile_nav{ display:flex; align-items:center; position:static;
    padding:0 !important; margin:0 !important; background:transparent !important; }
  #main-header #et_mobile_nav_menu .select_page{ display:none !important; }
  #main-header .mobile_menu_bar{ display:flex !important; align-items:center; justify-content:center;
    position:static !important; padding:0 !important; margin:0 !important; line-height:1;
    min-width:44px; min-height:44px; }            /* zugleich ausreichend große Tippfläche */
  #main-header .mobile_menu_bar:before{ color:var(--am-accent-2) !important; font-size:32px; line-height:1;
    position:static !important; top:auto !important; margin:0 !important; }
}

/* ---------- Dropdown: Position ----------
   Divi berechnet für #mobile_menu ein eigenes `top` (hier -87 px). Weil wir .mobile_nav
   auf position:static gestellt haben (für die vertikale Zentrierung), fehlt der alte
   Ankerpunkt und das Menü rutschte nach OBEN aus dem Bild. Deshalb verankern wir es
   explizit an der Header-Zeile und begrenzen die Höhe, damit es auch in niedrigen
   Fenstern (z. B. halber Bildschirm) vollständig erreichbar bleibt. */
#main-header .et_menu_container{ position:relative; }
#main-header #mobile_menu{
  position:absolute !important; top:100% !important; left:0 !important; right:0 !important;
  width:100% !important; margin:0 !important;
  max-height:calc(100vh - 150px); overflow-y:auto; overscroll-behavior:contain; }
#main-header #mobile_menu{
  border:1px solid var(--am-border); border-top:3px solid var(--am-accent);
  border-radius:0 0 var(--am-radius) var(--am-radius);
  background:var(--am-surface); padding:.4rem 0; margin-top:0;
  box-shadow:0 8px 18px rgba(0,0,0,.08); }
#main-header #mobile_menu li{ border:none; }
#main-header #mobile_menu li a{
  color:var(--am-heading) !important; font-size:var(--am-fs-sm); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.95rem 1.4rem !important; border-bottom:none;
  transition:background .15s, color .15s; }

#main-header #mobile_menu li a:hover{ background:var(--am-bg); color:var(--am-accent) !important; opacity:1; }
#main-header #mobile_menu li.current-menu-item a{ color:var(--am-accent) !important; }
/* CTA-Punkt im Dropdown als echter Button, abgesetzt vom Rest */
#main-header #mobile_menu li.am-cta-menu{ margin:.55rem 1rem .35rem; }
#main-header #mobile_menu li.am-cta-menu a{
  background:var(--am-accent); color:#fff !important; border:1px solid var(--am-accent-2);
  border-radius:var(--am-radius); text-align:center; padding:.85rem 1.2rem !important; }
#main-header #mobile_menu li.am-cta-menu a:hover{ background:var(--am-accent-2); color:#fff !important; }

/* =====================================================================
   FOOTER (AM)  – ersetzt den alten Divi-Footer
   ===================================================================== */
#main-footer{ display:none !important; }
.am-footer{ background:var(--am-ink); color:var(--am-ink-text); padding:clamp(2.5rem,6vw,4rem) 0 0; margin-top:0; }
.am-footer a{ color:var(--am-ink-link); text-decoration:none; }
.am-footer a:hover{ text-decoration:underline; }
.am-footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2rem; }
@media(max-width:900px){ .am-footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .am-footer-grid{ grid-template-columns:1fr; } }
/* Spaltenueberschriften sind h2 (nicht h4): sonst springt die Ueberschriften-
   hierarchie von h2 auf h4 — Lighthouse/axe melden „heading-order invalid". */
.am-footer h2{ color:#fff; font-size:var(--am-fs-sm); text-transform:uppercase; letter-spacing:.07em; margin:0 0 .9rem;
  font-family:"Open Sans",Helvetica,Arial,sans-serif; font-weight:700; }
.am-footer ul{ list-style:none; margin:0; padding:0; } .am-footer li{ margin:.4rem 0; }
.am-flogo{ font-size:var(--am-fs-lg); font-weight:700; color:#fff; margin-bottom:.55rem; }
.am-flogo span{ color:var(--am-ink-accent); }  /* Footer ist dunkel -> ink-Akzent */
.am-footer .am-muted{ color:var(--am-ink-muted); }
.am-fcontact{ margin-top:.8rem; }
.am-footer .am-ph{ color:var(--am-ink-muted); font-style:italic; }  /* Platzhalter statt funktionslosem Link */
.am-footer-bottom{ border-top:none; margin-top:2.2rem; padding:.6rem 0 1.4rem; }
.am-footer-bottom .am-container{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--am-ink-muted); }
.am-footer-bottom p{ margin:0; }

/* =====================================================================
   STICKY FOOTER  – Footer bleibt bei wenig Inhalt am unteren Rand
   (body = Flex-Spalte; #page-container wächst, .am-footer sitzt unten)
   Fixe/absolute Elemente wie Admin-Bar, Float-Buttons, Cookie-Widget
   sind out-of-flow und daher unberührt.
   ===================================================================== */
body{ display:flex; flex-direction:column; min-height:100vh; }
body > #page-container{ flex:1 0 auto; }
body > .am-footer{ flex:0 0 auto; }
/* WP-Admin-Bar (nur eingeloggt) schiebt html um 32/46px -> min-height ausgleichen */
body.admin-bar{ min-height:calc(100vh - 32px); }
@media screen and (max-width:782px){ body.admin-bar{ min-height:calc(100vh - 46px); } }


/* =====================================================================
   ICON-SET
   SVG als CSS-Maske: das Icon nimmt über background-color:currentColor
   automatisch die Textfarbe an und passt damit zu jeder Design-Variante.
   Rein dekorativ -> im HTML immer mit aria-hidden="true".
   ===================================================================== */
.am-ico{ display:inline-block; width:1.5rem; height:1.5rem; flex:0 0 auto;
  background-color:currentColor; vertical-align:middle;
  -webkit-mask:var(--am-i) center/contain no-repeat; mask:var(--am-i) center/contain no-repeat; }
.am-ico--lg{ width:2.1rem; height:2.1rem; }
.am-ico--sm{ width:1.05rem; height:1.05rem; }
.am-ico--md{ width:1.7rem; height:1.7rem; }
.am-ico--mail{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='.5'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E"); }
.am-ico--lupe{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E"); }
.am-ico--auge{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.5 5.5 12 5.5 22.2 12 22.2 12 18.5 18.5 12 18.5 1.8 12 1.8 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.am-ico--muenze{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M15 9.2a4 4 0 100 5.6M8.6 12h5'/%3E%3C/svg%3E"); }
.am-ico--waage{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v17M6 20.5h12M4 8.5h16M4 8.5L1.8 14h4.4zM20 8.5L17.8 14h4.4z'/%3E%3C/svg%3E"); }
.am-ico--schloss{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='9.5' rx='.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 018 0v2.5'/%3E%3C/svg%3E"); }
.am-ico--schild{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.5 3v6c0 4.3-3.1 7.9-7.5 9.4-4.4-1.5-7.5-5.1-7.5-9.4v-6z'/%3E%3Cpath d='M8.8 12l2.2 2.2 4.2-4.4'/%3E%3C/svg%3E"); }
.am-ico--telefon{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.5h3l1.6 4-2 1.4a12 12 0 006.3 6.3l1.4-2 4 1.6v3a2 2 0 01-2.2 2A17.5 17.5 0 014.2 5.7a2 2 0 012-2.2z'/%3E%3C/svg%3E"); }
.am-ico--orden{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='15' r='5.2'/%3E%3Cpath d='M8.4 10.4L6.2 3.2h11.6l-2.2 7.2'/%3E%3Cpath d='M12 12.6l.9 1.9 2 .3-1.5 1.4.4 2-1.8-1-1.8 1 .4-2L9.1 14.8l2-.3z'/%3E%3C/svg%3E"); }
.am-ico--uniform{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.2l3 2.4 3-2.4 4.5 2.2-1.4 4.2-1.6-.6v11.8H7.5V9l-1.6.6L4.5 5.4z'/%3E%3C/svg%3E"); }
.am-ico--dokument{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.8h7.5L19 8.4v12.8H6z'/%3E%3Cpath d='M13.4 2.8v5.8H19M9 13h7M9 16.6h7'/%3E%3C/svg%3E"); }
.am-ico--helm{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 15.5a8.6 8.6 0 0117.2 0'/%3E%3Cpath d='M2.4 15.5h19.2v1.8a1.6 1.6 0 01-1.6 1.6H4a1.6 1.6 0 01-1.6-1.6z'/%3E%3Cpath d='M12 6.9v-2'/%3E%3C/svg%3E"); }
.am-ico--kiste{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 7.8L12 3.4l8.8 4.4v8.4L12 20.6l-8.8-4.4z'/%3E%3Cpath d='M3.2 7.8L12 12.2l8.8-4.4M12 12.2v8.4'/%3E%3C/svg%3E"); }
.am-ico--stern{ --am-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4l2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.9l6.1-.9z'/%3E%3C/svg%3E"); }


/* Icon über den Vertrauens-Punkten */
/* Icons in der Kontaktliste */
.am-contact-list .am-ico{ color:var(--am-accent); margin-right:.1rem; }
.am-contact-list li{ align-items:center; }
/* Kategorie-Kacheln: Symbol statt leerer Fläche */


/* =====================================================================
   PLATZHALTER-KENNZEICHNUNG
   Alles, was noch nicht von Thomas bestätigt ist, wird sichtbar markiert:
   ein kleines Label und/oder kursiver, gedämpfter Text. So ist auf einen
   Blick klar, was Entwurf ist und was steht. Vor dem Live-Gang fällt die
   Klasse zusammen mit den Texten weg.
   ===================================================================== */
.am-ph-tag{ display:inline-block; font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--am-fs-label-sm); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#7f651c; background:#f7edd2; border:1px solid #e3cf9a;
  padding:.18em .55em; border-radius:2px; vertical-align:middle; }
html[data-am-palette="2"] .am-ph-tag{ color:#7c6316; background:#f6eed7; border-color:#e0cf9f; }
html[data-am-palette="3"] .am-ph-tag{ color:#7e4a2c; background:#f6e8dc; border-color:#e3c9b2; }
html[data-am-palette="4"] .am-ph-tag{ color:#4a5056; background:#eceef0; border-color:#d3d7db; }
.am-ph-text{ font-style:italic; color:var(--am-muted); }
/* Label vor einer Überschrift: eigene Zeile, damit die Typografie ruhig bleibt */
.am-ph-line{ display:block; margin:0 0 .5rem; }
/* Platzhalter-Kacheln erkennbar machen */
/* Kacheln ohne eigenes Beitragsbild zeigen jetzt das Platzhalter-Motiv statt
   einer leeren Flaeche — das Etikett bleibt, damit klar ist, dass das Bild fehlt. */
.am-tile--ph .am-tile-ph,
.am-tile--ph .am-tile-img{ position:relative; }
.am-tile--ph .am-tile-ph::after,
.am-tile--ph .am-tile-img::after{ content:"Platzhalter-Bild"; position:absolute; left:8px; bottom:8px;
  font-family:"Open Sans",Arial,sans-serif; font-size:var(--am-fs-label-sm); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#f2ead6; background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.25); padding:.2em .5em; border-radius:2px; }
.am-tile--ph .am-tile-label{ color:var(--am-heading) !important; }

/* =====================================================================
   PLATZHALTER-BILDER
   Kein Stockfoto und kein Militaria-Motiv (die Auswahl gehört zu Thomas),
   sondern eine neutrale Textur mit deutlichem Label. Die Flächen zeigen
   damit schon die spätere Bildwirkung.
   ===================================================================== */
.am-ph-img{ position:relative; }
.am-ph-img::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px); pointer-events:none; }
.am-ph-img > *{ position:relative; z-index:1; }
.am-ph-img::after{ content:"Platzhalter-Bild"; position:absolute; z-index:2;
  left:12px; bottom:12px; font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--am-fs-label-sm); font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#f2ead6; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.28);
  padding:.22em .6em; border-radius:2px; pointer-events:none; }
/* Hero bekommt zusätzlich eine dezente Tiefenstruktur */
/* Hero mit Platzhalter-Motiv: Bild abgedunkelt, damit die Schrift lesbar bleibt */
.am-hero.am-ph-img{ background-position:center; background-size:cover; background-repeat:no-repeat; }
.am-hero.am-ph-img::before{ background-image:
  linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.72)),
  repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px);
  opacity:1; }
/* Slider-Folien ohne Beitragsbild */
.am-action--nobg.am-ph-img::after{ left:16px; bottom:16px; }

/* =====================================================================
   TEXTBAUSTEINE  (freigegebene Texte, 31.08.)
   Der Wortlaut ist gesetzt - gestaltet wird nur, wie er gruppiert und
   gewichtet ist. Bewusst wenige Bausteine: die Seiten sollen ruhig bleiben.
   ===================================================================== */

/* Einstiegsabsatz auf hellen Flaechen. Das vorhandene .am-lead ist auf die
   dunklen Hero-Flaechen abgestimmt (heller Text, zentriert). */
.am-lead-text{ font-size:var(--am-fs-lead); line-height:1.6; color:var(--am-text);
  margin:0 0 1.1rem; }


/* Sprungleiste auf die vier Prozessschritte. Kein Kasten, nur eine
   Trennlinie darueber - sie fuehrt weiter, sie will keine Aufmerksamkeit. */
.am-sprung{ margin:2.6rem 0 0; padding-top:0; }
.am-sprung-titel{ margin:0 0 .9rem; font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--am-fs-label); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--am-muted); }
.am-sprung-liste{ list-style:none !important; margin:0 !important; padding:0 !important;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.am-sprung-liste li::marker{ content:""; }
.am-sprung-liste a{ display:flex; align-items:baseline; gap:.6rem;
  text-decoration:none !important; color:var(--am-text) !important;
  font-size:var(--am-fs-sm); line-height:1.4;
  padding-top:.7rem; border-top:2px solid var(--am-border);
  transition:border-color .15s, color .15s; }
.am-sprung-liste a:hover, .am-sprung-liste a:focus-visible{
  border-top-color:var(--am-accent); color:var(--am-accent-2) !important; }
.am-sprung-nr{ font-family:"Playfair Display",Georgia,serif;
  font-size:var(--am-fs-md); font-weight:600; color:var(--am-accent);
  line-height:1; }
@media(max-width:820px){
  .am-sprung-liste{ grid-template-columns:repeat(2,1fr); gap:1rem; }
}
@media(max-width:480px){
  .am-sprung-liste{ grid-template-columns:1fr; }
}
/* Sprungziel nicht unter dem festen Kopf verstecken */
.am-detail[id]{ scroll-margin-top:120px; }

/* Abschlusszeile einer Textsektion. */
/* Abschlusszeile einer Textsektion: Abstand statt Linie. Die Sektionen
   trennt die Flaeche, nicht ein Strich. */
.am-schluss{ margin:2rem 0 0; padding-top:0; text-align:center; }
.am-schluss p{ margin:0 0 1.1rem; font-size:var(--am-fs-md);
  color:var(--am-heading); }
.am-schluss p:last-child{ margin-bottom:0; }

/* =====================================================================
   SCHWEBENDE KONTAKTLEISTE  (.am-quickbar)
   Ersetzt das Fremd-Plugin „Float Menu Lite" (graue Kacheln rechts mittig,
   Telefon ohne tel:-Link, Ziel auf german-historica.de).
   Desktop: rechts unten, ueber dem Cookie-Widget.
   Mobil:   Leiste am unteren Rand — verdeckt keinen Inhalt mehr.
   ===================================================================== */
.am-quickbar{ position:fixed; right:0; bottom:132px; z-index:9998;
  display:flex; flex-direction:column; gap:1px;
  font-family:"Open Sans",Arial,sans-serif; }
.am-quickbar-item{ display:flex; align-items:center; gap:.55rem;
  min-height:48px; padding:.6rem .9rem;
  text-decoration:none !important; font-size:var(--am-fs-xs); font-weight:600; line-height:1.15;
  border:1px solid var(--am-accent-2); border-right:none; border-radius:2px 0 0 2px;
  transition:background .15s; }
.am-quickbar-tel{ background:var(--am-surface); color:var(--am-accent) !important; }
.am-quickbar-tel:hover{ background:var(--am-surface-2); color:var(--am-accent-2) !important; }
.am-quickbar-wa{ background:var(--am-surface); color:var(--am-accent) !important; }
.am-quickbar-wa:hover{ background:var(--am-surface-2); color:var(--am-accent-2) !important; }
.am-quickbar-faq{ background:var(--am-surface); color:var(--am-accent) !important; }
.am-quickbar-faq:hover{ background:var(--am-surface-2); color:var(--am-accent-2) !important; }
/* Kurzbeschriftung nur auf dem Telefon (17.09.2026, vierter Knopf „FAQ" wie Gold) */
.am-qb-kurz{ display:none; }
.am-quickbar-cta{ background:var(--am-accent); color:var(--am-accent-ink) !important; }
.am-quickbar-cta:hover{ background:var(--am-accent-2); color:#fff !important; }
.am-quickbar-sub{ display:none; }        /* Nummer erst ab Tablet, sonst wird die Leiste breit */
/* Die Rufnummer stand frueher unter „Anrufen". Damit wuchs die Leiste auf
   rund 273 px und schob sich bis etwa 1450 px Fensterbreite ueber den
   Satzspiegel. Kompakt bleibt sie bei 165 px und laesst den Text ab
   1230 px frei. Die Nummer steht im Kopf, im Kontaktteaser und im Fuss. */
/* Unten statt rechts — bis 1279 px.
   Die rechte Leiste ist rund 165 px breit. Der Satzspiegel misst 900 px, ist
   also erst ab (900 + 2x165) = 1230 px frei; darunter lag die Leiste ueber dem
   Fliesstext. Gemessen am 01.09.2026 bei 1100 px: „militaerische Foto…" wurde
   von der Leiste abgeschnitten. Ab 1280 px bleibt links und rechts genug Rand,
   dort steht sie wieder rechts. */
@media(max-width:1279px){
  .am-quickbar{ right:0; left:0; bottom:0; flex-direction:row; gap:0; }
  .am-quickbar-item{ flex:1 1 25%; justify-content:center; min-height:52px;
    border:none; border-top:1px solid var(--am-accent-2); border-radius:0; }
  .am-quickbar-tel, .am-quickbar-wa, .am-quickbar-faq{ border-right:1px solid var(--am-accent-2); }
  .am-quickbar-sub{ display:none; }
  /* Platz schaffen, damit die Leiste nichts ueberdeckt. Der Abstand gehoert an
     den Footer, nicht an #page-container: der AM-Footer wird per wp_footer
     NACH dem page-container ausgegeben und bliebe sonst unter der Leiste.
     Die zusaetzlichen 40 px halten die letzte Footerzeile ausserdem frei vom
     Design-Umschalter (Staging-Element, faellt vor Live weg). */
  .am-footer-bottom{ padding-bottom:calc(1.4rem + 52px + 40px); }
  /* Die beiden anderen schwebenden Elemente daruebersetzen */
  .am-palette-switch{ bottom:62px; }
  .brlbs-cmpnt-widget{ bottom:60px !important; }
}
/* Telefon: vier Felder nebeneinander tragen nur Kurzbeschriftungen */
@media(max-width:560px){
  .am-qb-lang{ display:none; }
  .am-qb-kurz{ display:inline; }
  .am-quickbar-item{ gap:.35rem; padding:.6rem .45rem; }
}
@media(max-width:400px){
  .am-quickbar-item{ gap:.35rem; padding:.6rem .5rem; font-size:.74rem; }
}
@media print{ .am-quickbar{ display:none; } }

/* =====================================================================
   BLOGBEITRAG  ·  Einzelansicht (Standard- und Aktionsbeitraege)
   Divis Standardausgabe (Autorenname, Kommentarzaehler, volle Contentbreite)
   passt nicht zur Ankaufsseite. Der Beitrag bekommt hier Lesebreite,
   eine ruhige Kopfzeile und die festen Bausteine am Fuss.
   ===================================================================== */
.single-post #left-area{ padding-bottom:0 !important; }
/* Divi setzt oben 58 px Container- plus 30 px Content-Abstand. Unter dem Hero
   ergab das eine auffaellige Leerzone, bevor der Text beginnt. */
.single-post #main-content .container{ padding-top:clamp(1.6rem,4vw,2.6rem) !important;
  /* Divi begrenzt den Beitragsinhalt auf 1080 px - damit stand der Text schmaler
     als Hero, CTA und Fussnote derselben Seite (31.08.). */
  max-width:var(--am-maxw) !important; width:100% !important;
  padding-left:32px !important; padding-right:32px !important; }
.single-post .entry-content{ padding-top:0 !important; }
/* Divis Titelblock (H1, Standard-Meta „von Kronie224 | … | 0 Kommentare",
   Beitragsbild) entfaellt komplett — sein Inhalt steckt jetzt im Hero.
   Abschalten laesst er sich in Divi nur bei aktivem Page Builder, deshalb
   hier ueber CSS. */
.single-post .et_post_meta_wrapper{ display:none !important; }

/* ---------- Hero eines Beitrags ---------- */
.am-post-hero{ position:relative; background-position:center; background-size:cover;
  background-repeat:no-repeat; padding:clamp(3.5rem,9vw,6.5rem) 0; }
/* Abdunklung, damit der Text auf jedem Motiv sicher lesbar bleibt.
   NUR fuer echte Beitragsbilder: bei .am-ph-img ist ::after bereits das
   „Platzhalter-Bild"-Etikett, und die Abdunklung kommt dort aus der
   vorhandenen .am-hero.am-ph-img::before-Regel. */
.am-post-hero:not(.am-ph-img)::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.7)); }
/* Hero bleibt bewusst schmaler als der Inhalt: der zentrierte Titel
   ueber volle Breite riss auseinander (zurueckgenommen 31.08.). */
.am-post-hero > .am-container{ position:relative; z-index:2; max-width:900px; }
.am-post-hero h1{ margin:.1em 0 .5em; }
.am-post-hero .am-eyebrow{ margin-bottom:.9rem; }
/* Kategorie als Etikett statt als goldener Text: ueber einem Foto ist die
   Hintergrundhelligkeit unbekannt — Gold auf abgedunkeltem, aber hellem Motiv
   kommt nur auf rund 3:1. Das Etikett bringt seine eigene Flaeche mit und
   haelt damit in jeder Palette 5,3-8,8:1. Gleiche Form wie „Aktion". */
.am-hero-cat{ display:inline-block; text-decoration:none !important;
  font-size:var(--am-fs-label-sm); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--am-accent-ink) !important; background:var(--am-accent);
  padding:.35em .7em; border-radius:2px; }
.am-hero-cat:hover{ background:var(--am-accent-2); }
/* Spezifitaet ueber .am-post-hero: die allgemeine .am-post-meta-Regel steht
   weiter unten und wuerde die dunkle Textfarbe sonst zurueckholen — auf dem
   abgedunkelten Bild waere das Datum kaum lesbar. */
.am-post-hero .am-post-meta,
.am-post-hero .am-post-meta time{ justify-content:center; margin:0; color:var(--am-ink-text); }

/* ---------- Aktionsbeitrag: Hero als Akzentflaeche ----------
   Unterscheidet Aktionen/News auf einen Blick von den Fachbeitraegen, ohne
   eine zweite Bildsprache einzufuehren. Ein vorhandenes Beitragsbild liegt
   nur als Textur darunter: grau, gedaempft und mit `multiply` verrechnet —
   dadurch kann es die Flaeche nur abdunkeln, der Kontrast des weissen Textes
   also nie schlechter werden als auf der reinen Flaeche. */
.am-post-hero--aktion{ background-color:var(--am-accent-2); background-image:none; }
/* Das Beitragsbild bleibt sichtbar, ohne den Kontrast vom Motiv abhaengig zu
   machen: `brightness(.5)` deckelt die Helligkeit des Bildes, bevor es mit 38 %
   ueber die Akzentflaeche gelegt wird. Selbst ein rein weisses Motiv kommt so
   nur auf halbe Helligkeit — der weisse Text haelt dadurch immer ueber 6:1.
   (`mix-blend-mode:multiply` war der erste Versuch; bei dunklen Motiven
   multipliziert sich die Flaeche fast schwarz und die Farbwirkung ist weg.) */
.am-post-hero--aktion::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--am-hero-img); background-size:cover; background-position:center;
  opacity:.85; filter:grayscale(1) brightness(.62) contrast(1.1); mix-blend-mode:luminosity; }
.am-post-hero--aktion::after{ content:none; }   /* kein zusaetzliches Dunkel-Overlay */
/* Etikett invertiert: helle Flaeche auf dem farbigen Grund */
.am-post-hero--aktion .am-post-flag{ background:#fff; color:var(--am-accent-2); }
.am-post-hero--aktion .am-post-meta,
.am-post-hero--aktion .am-post-meta time{ color:rgba(255,255,255,.88); }
.single-post .comment-wrap,
.single-post #comment-wrap,
.single-post .et_pb_comments_module{ display:none !important; }

/* Divi zeichnet die Trennlinie zur (ausgeblendeten) Sidebar weiterhin —
   auf Beitraegen bleibt sonst ein senkrechter Strich mitten im Text stehen. */
.single-post #main-content .container::before{ display:none !important; }

/* Lesebreite: Titel, Kopfzeile und Text laufen auf derselben Spalte */
.single-post .entry-title{ text-align:center; }
.am-post-meta{ display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap;
  max-width:820px; margin:0 auto 1.8rem; font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--am-fs-xs); color:var(--am-muted); }
/* Blogtext auf derselben Inhaltsbreite wie alle anderen Seiten
   (Entscheidung Lukas, 31.08.) - die fruehere 820-px-Lesebreite fiel
   im Wechsel zu Hero, CTA und Fussnote auf. */
/* Gleiche Satzbreite wie in den Textsektionen (900 px). Die Flaechen
   ringsum - Hero, CTA, Fussnote - laufen weiter ueber die volle Breite. */
.am-post-body{ max-width:900px; margin-left:auto; margin-right:auto; }
.am-post-cat{ color:var(--am-accent) !important; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none !important; }
.am-post-cat:hover{ text-decoration:underline !important; }
.am-post-flag{ display:inline-block; font-size:var(--am-fs-label-sm); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--am-accent-ink); background:var(--am-accent);
  padding:.25em .6em; border-radius:2px; }
.am-post-body{ font-size:var(--am-fs-base); line-height:1.7; }
.am-post-body h2{ font-size:var(--am-fs-h2); margin:2rem 0 .8rem; }
.am-post-body h3{ font-size:var(--am-fs-md); margin:1.6rem 0 .6rem; }
.am-post-body p{ margin:0 0 1.1rem; }
.am-post-body a{ color:var(--am-accent) !important; text-decoration:underline; }
/* Sitzt INNERHALB der CTA-Flaeche, nur durch eine Haarlinie abgesetzt —
   als eigener heller Streifen zwischen zwei Flaechen wirkte er verloren. */
.am-post-back{ max-width:900px; margin:2.4rem auto 0; padding-top:0;
  text-align:center; font-family:"Open Sans",Arial,sans-serif; font-size:var(--am-fs-sm); }
/* --am-accent-2, nicht --am-accent: auf der Sandflaeche der CTA-Sektion
   erreicht der helle Akzent nur 4,11:1 (die am 12.08. notierte Kontrastfalle —
   sie schlaegt hier zu, seit der Link in dieser Flaeche sitzt). */
.am-post-back a{ color:var(--am-accent-2) !important; font-weight:600; text-decoration:none !important; }
.am-post-back a:hover{ text-decoration:underline !important; }
/* Gleiche Flaeche, gleiches Problem: der Verweis unter dem Button. */
.am-post-cta .am-small a{ color:var(--am-accent-2) !important; }
/* Unter dem Beitragstext blieb ein schmaler cremefarbener Streifen stehen
   (Rest des Divi-Containers). Auf Beitraegen laeuft die Flaeche deshalb weiss
   durch, bis die Sandflaeche des CTA beginnt. */
.single-post #page-container{ background:var(--am-surface) !important; }

/* CTA und Rechtshinweis laufen ueber die volle Breite, nicht in der Textspalte */
.single-post .am-post-cta{ background:var(--am-surface-2); margin-top:0;
  padding-top:clamp(2rem,5vw,3rem); padding-bottom:clamp(2rem,5vw,3rem); }
.single-post .am-post-cta h2{ text-align:center; margin:0 0 .6rem;
  font-size:var(--am-fs-h2); }
.single-post .am-post-cta > .am-container > p{ text-align:center; max-width:640px;
  margin-left:auto; margin-right:auto; }
/* Bewusst KEIN 100vw-Ausbruch: bei sichtbarer Scrollbar ist 100vw breiter als
   der Inhaltsbereich — das erzeugt genau das horizontale Scrollen, das wir
   auf 390 px schon einmal beseitigt haben. Die Sektionen bleiben in der
   Spaltenbreite und setzen sich ueber die Flaeche ab. */
.single-post .am-post-cta > .am-container,
.single-post .am-legalnote > .am-container{ padding-left:clamp(16px,4vw,32px); padding-right:clamp(16px,4vw,32px); }
.single-post .am-legalnote{ text-align:center; padding:1.6rem 0 2.2rem; }

/* §86a in Footer-Farbe, direkt vor dem Footer — auf jeder Seite derselbe
   Abschluss (zentral ueber wp_footer ausgegeben). */
.am-legalnote--dark{ background:var(--am-ink); color:var(--am-ink-text); }
/* Auf der Startseite schliesst er direkt an den ebenfalls dunklen
   Trust-Block an: dort kein doppelter Innenabstand. */
.home .am-legalnote--dark{ padding-top:0; }
.am-legalnote--dark p{ color:var(--am-ink-muted); }
.am-legalnote--dark a{ color:var(--am-ink-link) !important; }

/* Divi haengt unter jeden Beitrag 25 px Innen- und 60 px Aussenabstand.
   Das ergab unter dem Rechtshinweis einen beigen Streifen bis zum Footer —
   jetzt schliesst die dunkle Flaeche direkt an. */
.single-post article.et_pb_post{ padding-bottom:0 !important; margin-bottom:0 !important; }

/* =====================================================================
   ANFRAGE IN DREI SCHRITTEN
   Die Gruppen stehen ohne JavaScript untereinander (dann greift nur die
   Grundformatierung). Erst die Klasse .am-form--wizard, die das Skript
   setzt, macht daraus einen Ablauf mit einer sichtbaren Stufe.
   ===================================================================== */
.am-step{ border:none; margin:0 0 1.6rem; padding:0; }
.am-step legend{ display:flex; align-items:center; gap:.6rem; padding:0;
  font-family:"Playfair Display",Georgia,serif; font-size:var(--am-fs-lg); color:var(--am-heading); }
.am-step legend:focus{ outline:none; }
.am-step legend:focus-visible{ outline:3px solid var(--am-focus); outline-offset:3px; }
/* Ziffer in Serife, wie die Ablauf-Schritte auf den anderen Seiten */
.am-step-nr{ font-family:"Playfair Display",Georgia,serif; font-size:var(--am-fs-base);
  width:1.9rem; height:1.9rem; flex:0 0 1.9rem; border:1px solid var(--am-border);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--am-accent-2); background:var(--am-surface); }
.am-step-intro{ margin:.5rem 0 1.2rem; }
.am-form--wizard .am-step[hidden]{ display:none; }
.am-form--wizard .am-step{ margin-bottom:0; }

/* Fortschritt: Text fuer alle, Punkte als stille Zugabe */
.am-step-status{ margin:0 0 .5rem; font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--am-fs-label); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--am-accent-2); }
.am-form:not(.am-form--wizard) .am-step-status{ display:none; }   /* ohne JS irrefuehrend */
/* !important, weil Divi Listen global eine Zaehlung verpasst — sonst stehen
   „1. 2. 3." unter dem Fortschrittsbalken. */
.am-step-dots{ display:flex; gap:.4rem; list-style:none !important; margin:0 0 1.6rem; padding:0 !important; }
.am-step-dots li{ height:3px; flex:1 1 0; background:var(--am-border); border-radius:2px;
  list-style:none !important; }
.am-step-dots li::marker{ content:""; }
.am-step-dots li.is-active, .am-step-dots li.is-done{ background:var(--am-accent); }

.am-step-nav{ display:flex; gap:.8rem; align-items:center; margin-top:1.4rem; }
.am-step-nav .am-step-back{ order:0; }
.am-step-nav .am-step-next{ order:1; margin-left:auto; }
/* Der Absende-Knopf steht in der letzten Stufe ueber der Navigation */
.am-form--wizard .am-step .am-btn-lg{ margin-top:.4rem; }
.am-form-trust{ margin:2rem 0 0; padding-top:0; color:var(--am-muted); }
/* Unterstrichen, nicht nur eingefaerbt: gegenueber dem gedaempften Fliesstext
   der Zeile traegt die Farbe allein nur 1,3:1 (WCAG 1.4.1). */
.am-form-trust a{ color:var(--am-accent-2); text-decoration:underline; }

/* „So geht es weiter" auf der Bestaetigungsseite */
/* wie bei den Fortschrittspunkten: Divis Listenzaehlung ausschalten, sonst
   steht neben der Serifenziffer noch ein „1." */
.am-next-steps{ list-style:none !important; counter-reset:amn; margin:1.4rem 0 1.2rem; padding:0 !important;
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.am-next-steps li{ counter-increment:amn; padding-top:0;
  list-style:none !important; }
.am-next-steps li::marker{ content:""; }
.am-next-steps li::before{ content:counter(amn); display:block;
  font-family:"Playfair Display",Georgia,serif; font-size:var(--am-fs-md); color:var(--am-accent-2); margin-bottom:.2rem; }
.am-next-steps strong{ display:block; margin-bottom:.25rem; }
.am-next-steps .am-small{ display:block; }

/* ---------- Kachel-Auswahl (Schritt 1) ----------
   Ein Klick je Kachel statt Aufklappliste. Die Checkbox bleibt im Markup und
   fokussierbar (nur optisch verborgen) — Divi blendet native Checkboxen
   site-weit aus, deshalb hier bewusst position/opacity statt display:none. */
.am-field-label{ display:block; font-weight:600; color:var(--am-heading); margin:0 0 .35rem; }
.am-choices{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin:.5rem 0 0; }
.am-choice{ position:relative; display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1rem; border:1px solid var(--am-border); border-radius:var(--am-radius);
  background:var(--am-surface); cursor:pointer; font-weight:400 !important;
  color:var(--am-text); transition:border-color .15s, background .15s; }
.am-choice input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.am-choice-ico{ flex:0 0 auto; color:var(--am-accent-2); display:flex; }
.am-choice-txt{ line-height:1.3; }
.am-choice:hover{ border-color:var(--am-accent-2); background:var(--am-bg); }
.am-choice:focus-within{ outline:3px solid var(--am-focus); outline-offset:2px; }
/* Gewaehlt: Rahmen + Haken. `is-checked` setzt das Skript, :has() deckt den
   Fall ohne Skript ab (aeltere Browser ignorieren die Regel folgenlos). */
.am-choice.is-checked, .am-choice:has(input:checked){
  border-color:var(--am-accent); background:var(--am-surface-2); font-weight:600 !important; }
.am-choice.is-checked::after, .am-choice:has(input:checked)::after{
  content:""; position:absolute; right:.8rem; top:50%; width:.5rem; height:.9rem;
  border-right:2px solid var(--am-accent-2); border-bottom:2px solid var(--am-accent-2);
  transform:translateY(-60%) rotate(45deg); }
.am-choice.is-checked .am-choice-txt, .am-choice:has(input:checked) .am-choice-txt{ padding-right:1rem; }
.am-field.is-error .am-choices .am-choice{ border-color:#a3282f; }
@media(max-width:520px){
  .am-choices{ grid-template-columns:1fr; }
  .am-choice{ padding:.75rem .9rem; }
}
/* Nur fuer Screenreader: sichtbar ausgeblendet, aber vorgelesen und fokussierbar */
.am-sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* =====================================================================
   KONTAKTSEITE: Formular als Karte + Begleitspalte
   Das Formular stand vorher frei auf weissem Grund und wirkte dadurch
   verloren. Jetzt sitzt es als Karte auf einer ruhigen Flaeche, daneben
   die Angaben, die vor dem Absenden zaehlen.
   ===================================================================== */
/* Begleitspalte mittig zur Karte — sie ist deutlich kuerzer als das Formular
   und saesse oben angeschlagen unruhig. */
.am-form-wrap{ display:grid; gap:clamp(1.4rem,3vw,2.4rem); align-items:center;
  grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr); max-width:1120px; margin:0 auto; }
.am-form-card{ background:var(--am-surface); border:1px solid var(--am-border);
  border-radius:var(--am-radius); padding:clamp(1.4rem,3vw,2.4rem); }
.am-form-card .am-form{ max-width:none; }

.am-form-side{ display:flex; flex-direction:column; gap:1.4rem; }
.am-side-block h2{ font-size:var(--am-fs-md); margin:0 0 .7rem; }
.am-side-list{ list-style:none !important; margin:0; padding:0 !important; display:grid; gap:.8rem; }
.am-side-list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:var(--am-fs-sm);
  line-height:1.5; list-style:none !important; }
.am-side-list li::marker{ content:""; }
.am-side-ico{ flex:0 0 auto; color:var(--am-accent-2); margin-top:.1rem; display:flex; }
.am-side-kontakt{ padding-top:1.8rem; }
.am-side-tel{ margin:.2rem 0 .3rem; font-size:var(--am-fs-md); font-weight:600; }
.am-side-tel a, .am-side-kontakt a{ color:var(--am-accent-2); text-decoration:none; }
.am-side-tel a:hover, .am-side-kontakt a:hover{ text-decoration:underline; }
.am-side-person{ display:flex; gap:.9rem; align-items:flex-start;
  padding-top:1.8rem; }
.am-side-person img{ flex:0 0 82px; width:82px; height:102px; object-fit:cover;
  object-position:center top; border-radius:var(--am-radius); }
.am-side-person .am-eyebrow{ display:block; font-size:var(--am-fs-label-sm); margin-bottom:.2rem; color:var(--am-accent-2); }
.am-side-person strong{ display:block; font-family:"Playfair Display",Georgia,serif;
  font-size:var(--am-fs-base); margin-bottom:.25rem; }

@media(max-width:980px){
  /* Erst das Formular, die Begleitangaben darunter */
  .am-form-wrap{ grid-template-columns:1fr; }
  .am-form-side{ order:2; }
}

/* =====================================================================
   WORTMARKE IM KOPF  ·  Zeichen + Name + Claim (Entscheidung 13.08.)
   Der Name allein stand verloren im Kopf; die Zeile darunter gibt ihm
   Kontext, ohne den Kopf hoeher zu machen.
   ===================================================================== */
.am-brand-stack{ display:flex; flex-direction:column; justify-content:center; gap:.15rem; }
#main-header .am-brand-text{ line-height:1.05; }
.am-brand-claim{ font-family:"Open Sans",Arial,sans-serif; font-size:var(--am-fs-label-sm); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--am-muted); white-space:nowrap; }
@media(max-width:640px){   /* auf schmalen Displays braucht der Name den Platz allein */
  .am-brand-claim{ display:none; }
}

/* =====================================================================
   ARCHIV · SUCHE · 404
   Divis Standardausgabe dieser drei Ansichten entfaellt — der Inhalt kommt
   aus am-base.php (Hero + Kacheln). Divis Bereich bleibt im Markup, wird
   aber nicht mehr angezeigt.
   ===================================================================== */
body.error404 #main-content .container,
body.search #main-content .container,
body.archive #main-content .container{ display:none !important; }
/* Schmalerer Hero: hier traegt kein Bild, nur Text */
.am-hero--schmal{ padding:clamp(2.4rem,6vw,4rem) 0; }
.am-hero--schmal .am-lead{ margin-bottom:0; }
.am-wege{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem; }
@media(max-width:560px){
  .am-wege{ flex-direction:column; align-items:stretch; text-align:center; }
}
/* Einleitung ueber den drei Wegen (404 / leere Suche) */
.am-wege-intro{ max-width:640px; margin:0 auto; }
.am-wege-intro h2{ font-size:var(--am-fs-h3); margin:0 0 .5rem; }
.am-wege-intro p{ margin:0; }
/* 404 / leere Suche: der helle Bereich bekommt Hoehe, der Block sitzt mittig
   darin — sonst klebt er direkt unter dem Hero und der Rest bleibt leer. */
body.error404 #page-container .am-section:has(.am-wege),
body.search #page-container .am-section:has(.am-wege){
  min-height:46vh; display:flex; align-items:center; }
body.error404 #page-container .am-section:has(.am-wege) > .am-container,
body.search #page-container .am-section:has(.am-wege) > .am-container{ width:100%; }
/* Verweise auf Sandflaechen durchgaengig im dunkleren Akzent — der helle haelt
   dort in den Paletten 1 und 2 keine 4,5:1 (Prüflauf 13.08.). */
.am-cat-cta .am-small a,
.am-steps-sec .am-small a,
.am-legalnote:not(.am-legalnote--dark) a{ color:var(--am-accent-2) !important; }

/* ---------------------------------------------------------------------------
   Fachverlinkung (Grund-Arbeitsanweisung §10) — 07.09.2026
   Vier Verweise je Kategorie auf Fachbeitraege von militaria-kiel.de.
   Eigener Abschnitt unterhalb "Wissenswertes", oberhalb des Ankauf-CTA.
   --------------------------------------------------------------------------- */
.am-fachlinks-intro{ margin:.2rem 0 0; color:var(--am-muted); }

/* Vier Kacheln stehen als 2x2 ruhiger als 3+1. Ab 1200px vier nebeneinander. */
.am-tiles--vier{ grid-template-columns:repeat(2,1fr); }
@media(min-width:1200px){ .am-tiles--vier{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:560px){ .am-tiles--vier{ grid-template-columns:1fr; } }

/* Rolle im Schema: ordnet die Kachel ein, ohne wie eine Ueberschrift zu wirken. */
.am-tile-rolle{ display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--am-muted); font-weight:600; margin-bottom:.35rem; }

/* Die Verweise verlassen die Ankaufseite — das muss man sehen, bevor man klickt. */
.am-tile-quelle{ display:block; margin-top:.7rem; font-size:.8rem; color:var(--am-muted); }
.am-tile-quelle::before{ content:"↗ "; }
.am-tile--fach .am-tile-label{ font-size:1rem; line-height:1.35; }

/* Kachel ohne eigenes Beitragsbild: kein Ersatzmotiv, dafuer ein ruhiger
   Kopfbalken, damit sie im Raster nicht wie ein Fehler aussieht. */
.am-tile--textonly .am-tile-body{ padding-top:1.3rem; }
.am-tile--textonly{ background:var(--am-surface); border-top:3px solid var(--am-accent); }

/* ---------------------------------------------------------------------------
   Ablauf-Schritte: eine Reihe statt 2x2 — 07.09.2026
   Bisher standen die vier Schritte zwischen 1150 und 2319 px als 2x2-Block;
   die durchgehende Reihe mit Verbindungslinien griff erst ab 2320 px und war
   damit auf üblichen Bildschirmen nie zu sehen. Der Ablauf soll aber als
   Abfolge lesbar sein — vier Stationen nebeneinander, durch Linien verbunden.
   --------------------------------------------------------------------------- */
@media(min-width:1150px){
  /* Vier Spalten statt zwei. Der Mindestwert liegt unter der tatsächlichen
     Spaltenbreite, damit auch dreischrittige Abläufe einreihig bleiben. */
  .am-steps{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
  /* Das Waisenkind-Sonderrecht der 2x2-Fassung entfällt — in einer Reihe
     gibt es keine zweite Zeile, in der ein Schritt allein stehen könnte. */
  .am-steps > li:last-child:nth-child(odd){ grid-column:auto; }

  /* Breit über den Bildschirm, aber nicht randlos: 94 % der Breite, gedeckelt,
     damit die Zeile auf sehr großen Monitoren nicht auseinanderfällt. */
  .am-steps-sec > .am-container > .am-steps,
  .am-cat-cta > .am-container > .am-steps{ max-width:min(1700px, 94vw); }

  /* Verbindungslinie zwischen den Ziffernkreisen — zeichnet die Abfolge nach.
     Vorher nur ab 2320 px aktiv. */
  .am-steps li:not(:last-child)::after{ content:""; position:absolute; top:1.85rem;
    left:calc(50% + 1.75rem); width:calc(100% - 1.7rem); height:1px;
    background:var(--am-border); }

  /* Schmalere Spalte, längster Titel: „Persönliche Besichtigung & Bewertung"
     braucht in 16 px rund 310 px und kippt sonst. Eine Token-Stufe kleiner. */
  .am-steps li .am-step-t{ font-size:var(--am-fs-sm); }
}

/* =====================================================================
   GESAMTKONZEPT 17.09.2026  ·  Bausteine aus gold-ankauf-kiel.de
   ===================================================================== */
/* Hero der Startseite: „Was tun?" als eigene Zeile unter der Frage-H1 */
.am-hero .am-hero-frage{ font-family:"Playfair Display",Georgia,"Times New Roman",serif; font-style:italic;
  font-size:var(--am-fs-lead); line-height:1.35; margin:0 0 1em; }
/* Dritte Personenkarte (Oskar) ueber die volle Rasterbreite */
.am-person--breit{ grid-column:1 / -1; grid-template-columns:200px 1fr; }
.am-person--breit .am-person-photo{ aspect-ratio:1/1; background-position:center 35% !important; }
@media(max-width:480px){ .am-person--breit{ grid-template-columns:1fr; } }
/* Knopf unter der Fragenliste der Startseite */
.am-fragen-mehr{ margin-top:-.4rem; margin-bottom:1.8rem; }

/* ---------------------------------------------------------------------
   ANFRAGEFORMULAR nach Gold-Stand (17.09.2026): Zusammenfassung, Erlaeuterungs-
   zeilen, Mindestalter-Hinweis, Einleitung und Begleitspalte ohne Kaesten.
   Uebernommen aus gk-base.css, steht bewusst am Ende und ueberschreibt die
   aelteren Spaltenregeln.
   --------------------------------------------------------------------- */
.am-summary{ border:1px solid var(--am-border); border-radius:var(--am-radius);
  padding:1.1rem 1.2rem; margin:0 0 1.6rem; }
.am-summary__titel{ font-size:var(--am-fs-label-sm); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--am-muted); margin:0 0 .8rem; }
.am-summary__liste{ margin:0; display:grid; gap:.55rem .9rem; grid-template-columns:auto 1fr;
  align-items:baseline; }
.am-summary__liste dt{ margin:0; font-size:var(--am-fs-xs); color:var(--am-muted); }
.am-summary__liste dd{ margin:0; font-size:var(--am-fs-xs); line-height:1.5; }
.am-summary__liste dd.is-leer{ color:var(--am-muted); font-style:italic; }
/* „Ändern" ist ein Knopf, soll aber wie ein Verweis lesen — und niemals die
   Zeile umbrechen, in der er steht. */
.am-summary__aendern{ appearance:none; background:none; border:0; padding:0; margin-left:.55rem;
  font:inherit; color:var(--am-accent-2); text-decoration:underline; cursor:pointer;
  white-space:nowrap; }
.am-summary__aendern:hover{ text-decoration:none; }
@media(max-width:560px){
  /* Auf schmalen Displays untereinander: zwei Spalten pressen die Werte sonst
     auf ~140 px und brechen sie in Zwei-Wort-Zeilen. */
  .am-summary__liste{ grid-template-columns:1fr; gap:.15rem; }
  .am-summary__liste dd{ margin:0 0 .55rem; }
}
/* Begruendung unter einem Bestaetigungshaken — eingerueckt auf die Textspalte
   des Hakens (22 px Kaestchen + .7rem Abstand aus .am-check label), damit sie
   nicht unter das Kaestchen rutscht. */
.am-check-hint{ margin-left:calc(22px + .7rem); }
.am-step-mehr{ margin:0 0 .8rem; }
.am-step-mehr:last-of-type{ margin-bottom:1.6rem; }
.am-field .am-choice{ display:flex; align-items:center; margin:0; }
.am-field .am-choice--sub{ align-items:flex-start; }
.am-choices--sub{ grid-template-columns:1fr; }
.am-choice--sub{ align-items:flex-start; }
.am-choice--sub .am-choice-ico{ margin-top:.15rem; }
.am-choice-sub{ display:block; margin-top:.3rem; font-size:var(--am-fs-sm);
  line-height:1.45; color:var(--am-muted); font-weight:400 !important; }
.am-choice.is-checked .am-choice-sub,
.am-choice:has(input:checked) .am-choice-sub{ font-weight:400 !important; }
/* Ein Eingabefeld über die volle Spalte verspricht mehr Zeichen, als
   hineingehören — die PLZ bekommt deshalb ihre eigene Breite. */
.am-input-kurz{ max-width:12rem; }
.am-form-intro{ margin:0 0 1.6rem; padding:0 0 1.3rem; border-bottom:1px solid var(--am-border); }
#main-content .am-form-intro h2{ font-size:var(--am-fs-h3); margin:0 0 .6rem; }
.am-form-intro p{ margin:0 0 .5rem; padding-bottom:0; }
.am-form-intro p:last-child{ margin-bottom:0; }
.am-side-block h2{ font-size:var(--am-fs-md); margin:0 0 .45rem; }
/* Gliederung durch Linien und Etiketten statt Kaesten (14.09.2026).
   Zwei Anlaeufe mit Karten (mit und ohne Flaeche) verworfen: neben der
   Formularkarte ergaben vier weitere Kaesten fuenf gleichrangige Rahmen.
   Jetzt ist die Formularkarte der einzige Kasten; die Abschnitte der Spalte
   trennt je eine Haarlinie, die Ueberschriften stehen als kleine Etiketten
   in derselben Machart wie „Schritt 1 von 4" im Formular. */
.am-form-side{ gap:0; }
.am-form-side .am-side-block{ padding:1.15rem 0; }
.am-form-side .am-side-block:first-child{ padding-top:0; }
.am-form-side .am-side-block:last-child{ padding-bottom:0; }
.am-form-side .am-side-block + .am-side-block{ border-top:1px solid var(--am-border); }
.am-form-side .am-side-block > :last-child{ margin-bottom:0 !important; }
.am-form-side .am-side-block p{ padding-bottom:0; }
/* #main-content davor: `#main-content h2` setzt Playfair und die Ueberschriften-
   farbe und schlaegt per ID jede reine Klassenregel. Groesse --am-fs-xs statt
   --am-fs-label-sm: 10,5 px in Versalien war zu klein (Rueckmeldung Nutzer). */
#main-content .am-form-side .am-side-block h2{ font-family:"Open Sans",Arial,sans-serif; font-size:var(--am-fs-xs);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.3;
  color:var(--am-accent-2); margin:0 0 .75rem; }
.am-form-side .am-side-faq{ margin-top:.6rem !important; }
.am-side-list{ list-style:none !important; margin:0; padding:0 !important; display:grid; gap:.55rem; }
.am-side-list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:var(--am-fs-sm);
  line-height:1.5; list-style:none !important; }
.am-side-list li::marker{ content:""; }
.am-side-ico{ flex:0 0 auto; color:var(--am-accent-2); margin-top:.1rem; display:flex; }
.am-side-tel{ margin:.15rem 0 .1rem; font-size:var(--am-fs-md); font-weight:600; }
.am-side-tel a, .am-side-kontakt a{ color:var(--am-accent-2); text-decoration:none; }
.am-side-tel a:hover, .am-side-kontakt a:hover{ text-decoration:underline; }
.am-side-person{ display:flex; gap:.9rem; align-items:flex-start;
  padding-top:.4rem; }
.am-side-person img{ flex:0 0 82px; width:82px; height:102px; object-fit:cover;
  object-position:center top; border-radius:var(--am-radius); }
.am-side-person .am-eyebrow{ display:block; font-size:var(--am-fs-label-sm); margin-bottom:.2rem; color:var(--am-accent-2); }
.am-side-person strong{ display:block; font-family:"Playfair Display",Georgia,serif;
  font-size:var(--am-fs-base); margin-bottom:.25rem; }
/* Inhaber-Block seit 10.09.2026 (Thomas' Dokument „Ihre Anfrage an uns"):
   Portrait und Anschrift lesbar, die Pflichtangaben darunter zurückgenommen —
   sie sollen auffindbar sein, aber nicht mit dem Formular um Aufmerksamkeit
   ringen. Das padding-top von .am-side-person muss hier weg, weil das Bild
   direkt unter der Überschrift des Blocks steht und nicht unter einem
   Nachbarblock. */
.am-side-inhaber .am-side-person{ padding-top:0; margin-bottom:.7rem; }
.am-side-inhaber p{ margin:0 0 .45rem; line-height:1.5; }
.am-side-inhaber a{ color:var(--am-accent-2); text-decoration:none; }
.am-side-inhaber a:hover{ text-decoration:underline; }

/* SCHRIFTEN - LOKAL AUSGELIEFERT (17.09.2026, wie gold-ankauf-kiel.de).
   Variable Fonts, je Subset eine Datei; Pfade relativ zu dieser Datei,
   damit sie im Staging und auf Live gleichermassen stimmen. */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('am-fonts/open-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('am-fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:500 800;
  font-display:swap;
  src:url('am-fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:500 800;
  font-display:swap;
  src:url('am-fonts/playfair-display-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Kategorieseite Orden: ausklappbarer Langtext „Mehr über die Hintergründe erfahren" (17.09.2026) */
.am-mehr{ margin:1.6rem 0 0; }
.am-mehr > summary{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; list-style:none;
  font-weight:600; color:var(--am-accent-2); border:1px solid var(--am-accent-2); border-radius:2px;
  padding:.65rem 1.1rem; }
.am-mehr > summary::-webkit-details-marker{ display:none; }
.am-mehr > summary::after{ content:"\2193"; transition:transform .2s; }
.am-mehr[open] > summary::after{ transform:rotate(180deg); }
.am-mehr > summary:focus-visible{ outline:2px solid var(--am-focus); outline-offset:2px; }
.am-mehr-body{ margin-top:1.6rem; }
.am-mehr-body h3{ margin:2rem 0 .7rem; }
/* Zwischenueberschriften und der Aufklappblock stehen in derselben 900-px-Spalte
   wie der Fliesstext (Sichtpruefung 17.09.2026, Kategorieseite Orden). */
.am-section > .am-container > h3,
.am-section > .am-container > .am-mehr{ max-width:900px; margin-left:auto; margin-right:auto; }
.am-section > .am-container > h3{ margin-top:2.4rem; }
.am-section > .am-container > h2 + h3{ margin-top:0; }
/* Verweis unter der Einleitung eines Formularschritts als Link erkennbar */
.am-step-mehr a{ color:var(--am-accent-2); text-decoration:underline; }

/* =====================================================================
   BLOG-UEBERSICHT nach gold-ankauf-kiel.de (17.09.2026) — uebernommen aus gk-base.css
   ===================================================================== */
.am-hero--foto{ position:relative; background-position:center; background-size:cover;
  background-repeat:no-repeat; }
.am-hero--foto::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.72)),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px); }
.am-hero--foto > *{ position:relative; z-index:1; }


/* =====================================================================
   BLOG-UEBERSICHT /blog/  (15.09.2026)
   Thomas fand keine Blog-Seite: sie war nur im Footer verlinkt und sah
   wie eine blosse Liste aus. Aufgewertet um Foto-Hero, Aufmacher mit dem
   neuesten Beitrag, Karten mit Kategorie und Datum, einen Block zu den
   Autoren und einen Schluss mit Ankauf und FAQ. Nur is_home() - die
   Kategorie-Archive behalten ihre Kacheln.
   Fallen: beide Abschnitte unter dem Raster liegen ausserhalb
   #main-content, dort erbt h2 kein Playfair; zentrierte Absaetze brauchen
   hohe Spezifitaet gegen die site-weite Linksbuendigkeit.
   ===================================================================== */
.am-blog-hero .am-lead{ max-width:44rem; margin-left:auto; margin-right:auto; }
.am-blog-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem; margin:0 0 .55rem;
  font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; font-weight:600; color:var(--am-accent-2); }
.am-blog-meta time{ color:var(--am-muted); font-weight:500; letter-spacing:.04em; }
.am-blog-meta time::before{ content:"·"; margin-right:.6rem; color:var(--am-muted); }

.am-blog-lead{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0;
  background:var(--am-surface); border:1px solid var(--am-border); border-radius:var(--am-radius);
  overflow:hidden; text-decoration:none !important; color:var(--am-text) !important; margin:0 0 2.2rem;
  transition:border-color .15s, box-shadow .15s; }
.am-blog-lead:hover{ border-color:var(--am-accent); box-shadow:0 10px 30px rgba(0,0,0,.08); }
.am-blog-lead__img{ display:block; min-height:340px; background:var(--am-border) center/cover no-repeat; }
.am-blog-lead__body{ display:flex; flex-direction:column; justify-content:center; padding:clamp(1.4rem,3vw,2.6rem); }
.am-blog-lead__kicker{ display:inline-block; margin-bottom:.9rem; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700; color:var(--am-btn-fg); background:var(--am-btn-bg);
  padding:.25rem .6rem; border-radius:2px; align-self:flex-start; }
.am-blog-lead__title{ display:block; font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.5rem,2.4vw,2.1rem);
  line-height:1.2; font-weight:500; margin:0 0 .8rem; color:var(--am-heading, #14120f); }
.am-blog-lead__exc{ display:block; margin:0 0 1.2rem; color:var(--am-muted); line-height:1.65; }
.am-blog-more{ font-weight:600; font-size:var(--am-fs-sm); color:var(--am-accent-2); }
.am-blog-more::after{ content:" →"; }

.am-blog-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem; }
.am-blog-card{ display:flex; flex-direction:column; background:var(--am-surface); border:1px solid var(--am-border);
  border-radius:var(--am-radius); overflow:hidden; text-decoration:none !important; color:var(--am-text) !important;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
.am-blog-card:hover{ border-color:var(--am-accent); box-shadow:0 8px 24px rgba(0,0,0,.07); transform:translateY(-2px); }
.am-blog-card__img{ display:block; aspect-ratio:16/10; background:var(--am-border) center/cover no-repeat; }
.am-blog-card__body{ display:flex; flex-direction:column; flex:1; padding:1.1rem 1.25rem 1.3rem; }
.am-blog-card__title{ font-family:'Playfair Display',Georgia,serif; font-size:1.22rem; line-height:1.3; font-weight:500;
  margin:0 0 .55rem; color:var(--am-heading, #14120f);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.am-blog-card__exc{ margin:0 0 1rem; font-size:var(--am-fs-sm); line-height:1.6; color:var(--am-muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.am-blog-card .am-blog-more{ margin-top:auto; }
.am-blog-grid + .pagination, .am-blog-grid + .navigation{ margin-top:3rem !important; }

.am-blog-autoren__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; margin-top:1.6rem; }
.am-blog-autor{ display:flex; gap:1.1rem; align-items:center; padding:1.2rem 1.3rem; background:var(--am-surface);
  border:1px solid var(--am-border); border-radius:var(--am-radius); }
.am-blog-autor__foto{ flex:0 0 84px; width:84px; height:84px; border-radius:50%;
  background:var(--am-border) center 18%/cover no-repeat; }
.am-blog-autor h3{ margin:0 0 .2rem; font-size:1.1rem; }
.am-blog-autor__rolle{ margin:0 0 .35rem; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:var(--am-accent-2); }
.am-blog-autor p:last-child{ margin:0; font-size:var(--am-fs-sm); color:var(--am-muted); line-height:1.55; }
html body .am-section.am-blog-autoren .am-blog-intro,
html body .am-section.am-blog-autoren .am-eyebrow,
html body .am-section.am-blog-autoren h2{ text-align:center !important; }
html body .am-section.am-blog-autoren .am-blog-intro{ max-width:40rem; margin-left:auto; margin-right:auto; }
html body .am-section.am-blog-schluss h2,
html body .am-section.am-blog-schluss p{ text-align:center !important; }
html body .am-section.am-blog-schluss p{ max-width:40rem; margin-left:auto; margin-right:auto; }
.am-blog-autoren h2, .am-blog-schluss h2{ font-family:'Playfair Display',Georgia,serif; font-weight:500; }

@media(max-width:980px){
  .am-blog-lead{ grid-template-columns:1fr; }
  .am-blog-lead__img{ min-height:0; aspect-ratio:16/10; }
  .am-blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .am-blog-autoren__grid{ grid-template-columns:1fr; }
}
@media(max-width:600px){
  .am-blog-grid{ grid-template-columns:1fr; gap:1.2rem; }
  .am-chips--blog{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:.4rem;
    margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; scrollbar-width:none; }
  .am-chips--blog::-webkit-scrollbar{ display:none; }
  .am-chips--blog .am-chip{ flex:0 0 auto; }
  .am-blog-autor{ align-items:flex-start; }
  .am-blog-autor__foto{ flex-basis:64px; width:64px; height:64px; }
}

/* ---------------------------------------------------------------------
   BILDRAND IN KACHELN  (15.09.2026)
   Viele Beitragsbilder tragen einen dunklen Rahmen von 1 bis 3 px ringsum
   (gemessen an 22 Bildern). In der Kachel wird er hochskaliert und steht
   als schwarzer Balken oben und unten. Das Bild liegt deshalb in einem
   Pseudo-Element, das um 4,5 Prozent vergroessert und am Rand beschnitten
   wird; die Kachel selbst zeigt ihr eigenes Hintergrundbild nicht mehr.
   --------------------------------------------------------------------- */
.am-blog-card__img, .am-blog-lead__img, .am-tile-img{ position:relative; overflow:hidden; background-size:0 0 !important; }
.am-blog-card__img::before, .am-blog-lead__img::before, .am-tile-img::before{ content:""; position:absolute; inset:0;
  background-image:inherit; background-position:center; background-size:cover; background-repeat:no-repeat;
  transform:scale(1.045); }

/* ---------------------------------------------------------------------
   THEMEN-REITER  (Blog und Kategorie-Archive, 15.09.2026)
   Ersetzt die Chips (Auswahl Nutzer, Variante B). Versalien wie im
   Kopfmenue, aktives Thema mit goldener Linie auf der Grundlinie. Die
   Anzahl steht nur im Archiv klein links unter der Linie. Unter 1100 px
   wird die Zeile seitlich wischbar statt umzubrechen.
   --------------------------------------------------------------------- */
.am-tabs{ display:flex; justify-content:center; gap:1.9rem; border-bottom:1px solid var(--am-border); margin:0 0 2.4rem; }
.am-tab{ position:relative; padding:.3rem 0 .85rem; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; color:var(--am-muted) !important; text-decoration:none !important; white-space:nowrap; transition:color .15s; }
.am-tab:hover{ color:var(--am-text) !important; }
.am-tab.is-active{ color:var(--am-text) !important; }
.am-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--am-accent);
  transform:scaleX(0); transition:transform .2s; }
.am-tab:hover::after{ transform:scaleX(.4); }
.am-tab.is-active::after{ transform:scaleX(1); }
html body .am-section p.am-tabs-anzahl{ margin:-1.7rem 0 2rem; font-size:var(--am-fs-xs); color:var(--am-muted); text-align:left; }
@media(max-width:1100px){
  .am-tabs{ justify-content:flex-start; overflow-x:auto; scrollbar-width:none; gap:1.5rem;
    margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  .am-tabs::-webkit-scrollbar{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .am-tab::after{ transition:none; } }

/* ---------------------------------------------------------------------
   KOPFBEREICH BLOG  (Variante 2, 15.09.2026)
   Foto rechts unverdeckt, Text links auf einem Verlauf. Die gemeinsame
   Abdunklung aus .am-hero--foto::before wird hier ersetzt; die Zentrierung
   aus .am-hero ebenso. Mobil liegt der Text unten, das Foto darueber.
   --------------------------------------------------------------------- */
.am-hero.am-hero--foto.am-blog-hero2{ text-align:left; display:flex; align-items:center; min-height:440px;
  padding:clamp(3.5rem,8vw,6rem) 0; background-position:65% center; }
.am-hero.am-hero--foto.am-blog-hero2::before{ background-image:linear-gradient(90deg,
  rgba(22,20,17,.93) 0%, rgba(22,20,17,.78) 36%, rgba(22,20,17,.2) 70%, rgba(22,20,17,0) 100%); opacity:1; }
.am-blog-hero2 > .am-container{ width:100%; }
.am-blog-hero2__text{ max-width:34rem; }
html body .am-blog-hero2 .am-eyebrow,
html body .am-blog-hero2 h1,
html body .am-blog-hero2 .am-lead{ text-align:left !important; }
.am-blog-hero2 h1{ margin:.2em 0 .45em; }
.am-blog-hero2 .am-lead{ margin:0 0 1.8rem; max-width:30rem; }
html body .am-blog-hero2 p.am-blog-zahlen{ display:flex; flex-wrap:wrap; gap:1rem 2.2rem; margin:0; padding-top:1.1rem;
  border-top:1px solid rgba(217,182,74,.4); font-size:.8rem; color:#cfc6b5; text-align:left; }
.am-blog-zahlen span{ display:flex; flex-direction:column; }
.am-blog-zahlen b{ font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:1.6rem; line-height:1.15;
  color:#d9b64a; font-variant-numeric:tabular-nums; }
@media(max-width:760px){
  .am-hero.am-hero--foto.am-blog-hero2{ align-items:flex-end; min-height:0; padding:12rem 0 2rem; background-position:center top; }
  .am-hero.am-hero--foto.am-blog-hero2::before{ background-image:linear-gradient(180deg,
    rgba(22,20,17,0) 0%, rgba(22,20,17,.55) 38%, rgba(22,20,17,.95) 72%); }
  html body .am-blog-hero2 p.am-blog-zahlen{ gap:.8rem 1.6rem; }
  .am-blog-zahlen b{ font-size:1.3rem; }
}
/* Textbreite Blog-Kopf: bei 34rem brach die H1 auf 1440 px dreizeilig um („Uhren" allein). */
@media(min-width:761px){ .am-blog-hero2__text{ max-width:40rem; } }

/* ---------------------------------------------------------------------
   THEMEN-KOPF IM ARCHIV + GLEICHER KOPFBEREICH  (15.09.2026)
   Kategorie-Archive tragen denselben Kopf wie /blog/; die grosse Zeile ist
   dort ein Absatz im Stil der H1, die H1 steht als Thema unter den Reitern.
   Die Anzahl sitzt als dunkle Plakette neben Thema und Kurzbeschreibung.
   Alle Bloecke liegen ausserhalb #main-content: Schrift explizit setzen.
   --------------------------------------------------------------------- */
.am-blog-hero2 .am-hero-titel{ font-family:'Playfair Display',Georgia,'Times New Roman',serif; font-weight:500;
  font-size:var(--am-fs-h1); line-height:1.15; color:#fff; margin:.2em 0 .45em; }
html body .am-blog-hero2 p.am-hero-titel{ text-align:left !important; }

.am-thema-kopf{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.6rem; align-items:center; margin:0 0 2.6rem; }
html body .am-section p.am-thema-zahl{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:6.6rem; margin:0; padding:1rem 1.3rem .85rem; background:var(--am-ink); border-radius:var(--am-radius); text-align:center; }
.am-thema-zahl b{ font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:3rem; line-height:1; color:#d9b64a;
  font-variant-numeric:lining-nums tabular-nums; }
.am-thema-zahl span{ margin-top:.4rem; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:#e8dfcd; }
html body .am-section .am-thema-text .am-eyebrow{ margin:0 0 .15rem; color:var(--am-accent-2); text-align:left; }
html body .am-section .am-thema-text h1{ font-family:'Playfair Display',Georgia,serif; font-weight:500;
  font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.12; margin:0 0 .35rem; color:var(--am-heading, #14120f) !important; text-align:left; }
html body .am-section p.am-thema-satz{ margin:0; max-width:46rem; color:var(--am-muted); text-align:left; }
@media(max-width:600px){
  .am-thema-kopf{ gap:1rem; align-items:start; }
  html body .am-section p.am-thema-zahl{ min-width:4.8rem; padding:.75rem .8rem .65rem; }
  .am-thema-zahl b{ font-size:2.2rem; }
}

/* ---------------------------------------------------------------------
   THEMEN-REGISTER  (Blog und Kategorie-Archive, 15.09.2026, Variante D)
   Verzeichnis wie im Auktionskatalog: links die Themen mit Punktlinie zur
   Anzahl, auf dem Desktop mitlaufend; rechts Thema (H1 im Archiv),
   Aufmacher und Karten zweispaltig. Unter 981 px wird das Register zum
   Auswahlmenue. Reiter- und Plaketten-Regeln weiter oben sind seitdem
   ungenutzt. Alle Bloecke liegen ausserhalb #main-content.
   --------------------------------------------------------------------- */
.am-register-layout{ display:grid; grid-template-columns:15.5rem minmax(0,1fr); gap:clamp(1.8rem,3vw,3.2rem); align-items:start; }
.am-register{ position:sticky; top:130px; border-top:2px solid var(--am-ink); padding-top:.9rem; }
.admin-bar .am-register{ top:162px; }
html body .am-section summary.am-register__titel{ font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:1.3rem;
  line-height:1.2; margin:0 0 .45rem; padding:0; color:var(--am-heading, #14120f); text-align:left; list-style:none; display:block; }
html body .am-section summary.am-register__titel::-webkit-details-marker{ display:none; }
/* Ab Tablet steht die Liste offen, der Titel ist dann nur Ueberschrift. */
.am-register__lang{ display:none; }
html body .am-section ol.am-register__liste{ list-style:none; margin:0; padding:0; }
html body .am-section ol.am-register__liste li{ list-style:none; margin:0; padding:0; }
.am-register__eintrag{ display:flex; align-items:baseline; gap:.45rem; padding:.42rem 0; font-size:.9rem; line-height:1.35;
  color:var(--am-text) !important; text-decoration:none !important; }
.am-register__eintrag::before{ content:""; order:2; flex:1 1 auto; min-width:1rem; border-bottom:1px dotted #b9ae98; transform:translateY(-.28em); }
.am-register__name{ order:1; }
.am-register__zahl{ order:3; font-size:.82rem; color:var(--am-muted); font-variant-numeric:tabular-nums; }
.am-register__eintrag:hover .am-register__name{ color:var(--am-accent-2); }
.am-register__eintrag.is-active{ font-weight:700; }
.am-register__eintrag.is-active .am-register__name,
.am-register__eintrag.is-active .am-register__zahl{ color:var(--am-accent-2); }
.am-register__eintrag.is-active::before{ border-bottom-color:var(--am-accent-2); }
.am-register__wahl{ display:none; }

.am-register-thema{ margin:0 0 1.8rem; padding-bottom:1.2rem; border-bottom:1px solid var(--am-border); }
html body .am-section .am-register-thema .am-eyebrow{ margin:0 0 .15rem; color:var(--am-accent-2); text-align:left; }
html body .am-section .am-register-thema h1{ font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:clamp(1.9rem,3vw,2.5rem);
  line-height:1.1; margin:0 0 .35rem; padding:0; color:var(--am-heading, #14120f) !important; text-align:left; }
html body .am-section p.am-register-thema__satz{ margin:0; padding:0; max-width:46rem; color:var(--am-muted); text-align:left; }

.am-register-inhalt .am-blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.am-register-inhalt .am-blog-lead__img{ min-height:300px; }
.am-blog-card--breit{ grid-column:1 / -1; flex-direction:row; }
.am-blog-card--breit .am-blog-card__img{ flex:0 0 50%; aspect-ratio:auto; min-height:16rem; }
.am-blog-card--breit .am-blog-card__body{ justify-content:center; padding:1.6rem 1.8rem; }

/* Der Block, der hier bis 23.09.2026 auf das Auswahlmenue umstellte, ist in die
   Regeln weiter unten gewandert (Seitenleiste bis 760 px, darunter Klappfeld). */
@media(max-width:600px){
  .am-blog-card--breit{ flex-direction:column; }
  .am-blog-card--breit .am-blog-card__img{ flex:none; aspect-ratio:16/10; min-height:0; }
  .am-blog-card--breit .am-blog-card__body{ padding:1.1rem 1.25rem 1.3rem; }
}

/* Titelzeile im Archiv exakt wie die H1 auf /blog/: Zeilenhoehe 1 und dieselben
   10 px Innenabstand, die Divi jeder H1 gibt (sonst Sprung beim Themenwechsel). */
html body .am-blog-hero2 p.am-hero-titel{ line-height:1; padding:0 0 10px; }
/* Handy: das Zweispalten-Raster neben dem Register ist spezifischer als die
   allgemeine Einspalten-Regel - ohne diese Zeile standen bei 390 px zwei
   Karten von je 169 px nebeneinander. */
@media(max-width:600px){ .am-register-inhalt .am-blog-grid{ grid-template-columns:1fr; } }
/* Unter 981 px steht direkt ueber der Themen-Ueberschrift schon das beschriftete
   Auswahlmenue - das zweite „Thema" darunter war doppelt. */
@media(max-width:980px){ html body .am-section .am-register-thema .am-eyebrow{ display:none; } }

/* ---------------------------------------------------------------------
   BLOG BREITER + REGISTER-LINIE  (15.09.2026)
   Die Site ist auf 1400 px begrenzt; auf grossen Bildschirmen blieb der
   Blog mit Register und zwei Kartenspalten gedraengt. Nur Blog und
   Kategorie-Archive bekommen 1680 px - ueber die Variable, damit Kopfmenue,
   Kopfbereich, Inhalt und Footer buendig mitwachsen. Ab 1600 px drei
   Kartenspalten auf einem 6er-Raster: eine uebrige Karte liegt quer ueber
   die volle Breite, zwei uebrige teilen sich die Zeile.
   Die Linie des Registers steht unter „Themen" statt darueber.
   --------------------------------------------------------------------- */
/* 1680 px zurueckgenommen (Sidebar-Umbau, siehe unten). */
.am-register{ border-top:0; padding-top:0; }
html body .am-section summary.am-register__titel{ padding:0 0 .6rem; margin:0 0 .5rem; border-bottom:2px solid var(--am-ink); }

/* ---------------------------------------------------------------------
   REGISTER ALS SIDEBAR, BEITRAEGE MITTIG  (15.09.2026)
   Das Raster stand durch das Register rechts von der Seitenmitte. Jetzt drei
   Spuren: Register | Beitraege (hoechstens 1336 px = Inhaltsbreite der Site)
   | leere Gegenspur gleicher Breite. So liegt die Beitragsspalte immer exakt
   mittig; bei 1920 px faellt ihre linke Kante auf die von Logo und
   Kopfbereich, das Register sitzt im linken Seitenrand.
   Die Spaltenzahl richtet sich nach der Breite der Beitragsspalte selbst
   (Container-Abfrage): ab 1080 px drei Karten, darunter zwei.
   Unter 1200 px wird das Register zum Auswahlmenue ueber den Beitraegen.
   --------------------------------------------------------------------- */
.am-section > .am-container:has(> .am-register-layout){ max-width:none; }
.am-register-layout{ grid-template-columns:minmax(11rem,14rem) minmax(0,1336px) minmax(11rem,14rem);
  justify-content:center; column-gap:clamp(1.5rem,2.5vw,2.5rem); }
.am-register{ grid-column:1; }
.am-register-inhalt{ grid-column:2; container-type:inline-size; }
@container (min-width:1080px){
  .am-blog-grid{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
  .am-blog-card, .am-blog-card--breit{ grid-column:span 2; flex-direction:column; }
  .am-blog-card--breit .am-blog-card__img{ flex:none; aspect-ratio:16/10; min-height:0; }
  .am-blog-card--breit .am-blog-card__body{ justify-content:flex-start; padding:1.1rem 1.25rem 1.3rem; }
  .am-blog-card:nth-child(3n+1):nth-last-child(2),
  .am-blog-card:nth-child(3n+2):last-child{ grid-column:span 3; }
  .am-blog-card:nth-child(3n+1):last-child{ grid-column:1 / -1; flex-direction:row; }
  .am-blog-card:nth-child(3n+1):last-child .am-blog-card__img{ flex:0 0 42%; aspect-ratio:auto; min-height:17rem; }
  .am-blog-card:nth-child(3n+1):last-child .am-blog-card__body{ justify-content:center; padding:1.8rem 2rem; }
}
/* 760-1199 px - iPad quer und hoch: das Register bleibt Seitenleiste, nur die
   leere Gegenspur entfaellt. Vorher stand hier ab 1200 px abwaerts ein
   Auswahlmenue; Thomas 22.09.2026 zu militaria-kiel.de: auf dem iPad fehlte
   dadurch die Seitenleiste. Gleiche Logik jetzt auf allen Seiten. */
@media(max-width:1199px){
  .am-section > .am-container:has(> .am-register-layout){ max-width:var(--am-maxw); }
  .am-register-layout{ grid-template-columns:minmax(10rem,13rem) minmax(0,1fr);
    column-gap:clamp(1.5rem,2.5vw,2.5rem); row-gap:1.4rem; }
  .am-register{ grid-column:1; top:150px; }
  .am-register-inhalt{ grid-column:2; }
  html body .am-section .am-register-thema .am-eyebrow{ display:none; }
}
/* Unter 981 px steht der Kopf nicht mehr fest - das Register darf hoeher. */
@media(max-width:980px){ .am-register{ top:1.5rem; } }
/* Handy: Themen als aufklappbares Feld, Beschriftung nach Thomas 23.09.2026.
   Ein natives Auswahlmenue zeigt iOS als graues Fenster, das nicht gestaltbar ist. */
@media(max-width:759px){
  .am-register-layout{ grid-template-columns:minmax(0,1fr); row-gap:1.4rem; }
  .am-register, .am-register-inhalt{ grid-column:1; }
  .am-register{ position:static; border-top:0; padding-top:0; }
  .am-register__box{ background:var(--am-surface); border:1px solid var(--am-border);
    border-top:3px solid var(--am-accent-2); border-radius:var(--am-radius); }
  html body .am-section summary.am-register__titel{ display:flex; align-items:center; justify-content:space-between;
    gap:.9rem; cursor:pointer; font-family:'Open Sans',sans-serif; font-size:.98rem; font-weight:600;
    line-height:1.4; margin:0; padding:.95rem 1.1rem; border-bottom:0; }
  .am-register__wort{ display:none; }
  .am-register__lang{ display:block; }
  html body .am-section summary.am-register__titel::after{ content:""; flex:none; width:.62rem; height:.62rem;
    margin-right:.2rem; border-right:2px solid var(--am-accent-2); border-bottom:2px solid var(--am-accent-2);
    transform:rotate(45deg) translateY(-.15em); transition:transform .15s; }
  .am-register__box[open] summary.am-register__titel{ border-bottom:1px solid var(--am-border); }
  .am-register__box[open] summary.am-register__titel::after{ transform:rotate(-135deg) translateY(-.15em); }
  html body .am-section ol.am-register__liste{ padding:.5rem 1.1rem 1rem; }
  .am-register__eintrag{ padding:.55rem 0; }
}
/* Halbbreite Karten am Rasterende (zwei uebrige bei drei Spalten): Bild nur in
   der Anzeige flacher (21:9 statt 16:10) - die Dateien bleiben unveraendert.
   Bei 16:10 waren die Bilder dort rund 400 px hoch. */
@container (min-width:1080px){
  .am-blog-card:nth-child(3n+1):nth-last-child(2) .am-blog-card__img,
  .am-blog-card:nth-child(3n+2):last-child .am-blog-card__img{ aspect-ratio:21/9; }
}

/* Burger-Grenze 1199 -> 1339 px (17.09.2026, wie gold-ankauf-kiel.de): mit dem
   Kopfmenuepunkt „Blog" stiess das Menue bei 1200 und 1280 px an das Logo
   (gemessen 0 px Abstand); ab 1340 px bleiben 38 px. Geaendert in den beiden
   Header-Regeln „Engbereich" und „Hamburger vertikal mittig". */


/* =====================================================================
   FREIGABELISTE 17.09.2026  ·  Durchsicht amstaging, Vorlage gold-ankauf-kiel.de
   Nummern beziehen sich auf Freigabeliste_AM_Staging_2026-09-17.md.
   Die Regeln stehen bewusst am Dateiende: sie uebernehmen erprobte
   Korrekturen aus gk-base.css und schlagen die aelteren AM-Regeln ueber
   die Reihenfolge, nicht ueber hoehere Spezifitaet.
   ===================================================================== */

/* --- B2 · Kontaktleiste bis 1729 px unten statt rechts (wie Gold) ------
   Rechts ist die Leiste rund 165 px breit. Die Raster (Kacheln,
   Wissenswertes, FAQ) fuellen den 1400-px-Container, der erst ab
   1400 + 2 x 165 = 1730 px frei ist. Bei 1280 px lag die Leiste ueber dem
   FAQ-Antworttext (Durchsicht 17.09.2026). */
@media(max-width:1729px){
  .am-quickbar{ right:0; left:0; bottom:0; flex-direction:row; gap:0; }
  .am-quickbar-item{ flex:1 1 auto; justify-content:center; min-height:52px;
    border:none; border-top:1px solid var(--am-accent-2); border-radius:0; }
  .am-quickbar-tel, .am-quickbar-wa, .am-quickbar-faq{ border-right:1px solid var(--am-accent-2); }
  .am-quickbar-sub{ display:none; }
  .am-quickbar-txt{ white-space:nowrap; }
  .am-footer-bottom{ padding-bottom:calc(1.4rem + 52px + 40px); }
  .am-palette-switch{ bottom:62px; }
  .brlbs-cmpnt-widget{ bottom:60px !important; }
}

/* --- B4 · Fachkarten: Titel buendig zu Etikett und Text (Gold Nr. 10) -- */
.am-tile--fach .am-tile-label,
.am-tile-body .am-tile-label{ padding:0 0 .35rem; }

/* --- C1 · Einstiegsblock ohne Divi-Absatzpolster (Gold) ----------------
   Divi gibt jedem <p> padding-bottom:1em. Zusammen mit den margins ergab
   das die grossen Luecken zwischen Einleitung, Fragen und Zusage. */
.am-einstieg-sec > .am-container > p,
.am-einstieg-sec .am-schluss p{ padding-bottom:0 !important; }
.am-einstieg-sec > .am-container > p{ margin-bottom:1.15rem; }
.am-einstieg-sec > .am-container > .am-einstieg-titel{ margin-bottom:.7rem !important; }
.am-einstieg-sec > .am-container > .am-fragen{ margin-bottom:1.4rem !important; }
.am-einstieg-sec > .am-container > h3{ margin-top:2.2rem; }

/* --- C5 · Fragen-Felder: auf dem Telefon gleich breit (Gold) -----------
   Verschieden breite, mittig gesetzte Kaesten untereinander lasen sich
   als Treppe (Besuchertest Gold 10.09.2026, hier dieselbe Beobachtung). */
.am-fragen li{ text-align:center; }
@media(max-width:620px){
  .am-fragen li{ flex:1 1 100%; }
}

/* --- C6 · Ansprechpartner auf dem Telefon als Visitenkarte (Gold) -------
   Vorher drei bildschirmbreite Fotos, zusammen rund 1.500 px. Rundes
   Portrait links, Text fliesst darum herum. */
@media(max-width:560px){
  .am-person{ display:block; padding:1.2rem 1.1rem; }
  .am-person-photo{ float:left; width:104px !important; height:104px;
    aspect-ratio:auto; min-height:0; border-radius:50%;
    margin:.15rem .95rem .5rem 0; background-size:cover; }
  .am-person-photo--img{ background-position:center 8% !important; }
  .am-person-body{ padding:0; display:block; }
  .am-person-body::after{ content:""; display:block; clear:both; }
  .am-person--breit{ display:block; grid-template-columns:1fr; }
  .am-person--breit .am-person-photo{ aspect-ratio:auto; height:104px; }
  .am-person--breit .am-person-photo--img{ background-position:center 28% !important; }
}

/* --- C10 · Knopfzeile nicht am letzten Schritt-Kasten kleben ------------ */
.am-cat-cta .am-btn-paar{ margin-top:1.8rem; }

/* --- C11 · Hero-Einleitung ohne Einzelwort in der letzten Zeile --------- */
.am-hero .am-lead{ text-wrap:balance; }

/* --- C14 · Rechtshinweis-Band mit Luft nach oben ------------------------
   Das Band schloss ohne Abstand an die Sektion darueber an. */
.am-legalnote--dark{ padding-top:1.6rem !important; }

/* --- C2 · Kontaktblock: FAQ als dritter Knopf statt loser Textzeile ----- */
.am-teaser-cta .am-btn + .am-btn{ margin-top:0; }

/* --- B3 · Hero auf dem Telefon kompakter --------------------------------
   Der Hauptknopf lag im ersten Bildschirm unter der Kontaktleiste. */
@media(max-width:560px){
  .am-hero{ padding:2.4rem 0 2.2rem; }
  .am-hero h1{ margin-bottom:.7rem; }
  .am-hero .am-lead{ margin-bottom:1.1rem; }
  .am-hero-cta{ gap:.6rem; }
}

/* --- A6 · Zwischenueberschrift vor den Bestaetigungshaken --------------- */
#main-content .am-check-titel{ font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--am-fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--am-accent-2); margin:1.4rem 0 .8rem; }

/* --- A13 · Divis Beitragsschleife unter /blog/ ausblenden (wie Gold, Besuchertest
   10.09.2026): /blog/ traegt die Body-Klasse `blog`, nicht `archive`, und fiel
   durch die Regel oben. Unter dem eigenen Raster lief deshalb Divis Liste mit
   „von Kronie224" noch einmal komplett durch. */
body.blog #main-content .container{ display:none !important; }

/* --- C1 · Zwei gleichfarbige Sektionen hintereinander: kein doppelter Innenabstand.
   Ansprechpartner und „Was wir ankaufen" stehen beide weiss; oben 72 + unten 72 px
   ergaben 144 px Leerraum ohne Flaechenwechsel. */
.am-section--hell + .am-section--hell{ padding-top:0; }

/* --- C9 · Einleitung „Ankauf & Beratung": Lead und Folgeabsatz auf derselben Achse.
   Der Lead stand mittig, der Absatz darunter linksbuendig. */
.am-section--mitte > .am-container > p.am-lead-text + p{ text-align:center; max-width:900px;
  margin-left:auto; margin-right:auto; text-wrap:balance; }

/* --- Verweiskarten „Wer wir sind" (17.09.2026, Wunsch Nutzer) ---------------
   Drei gleichrangige Wege statt drei gestapelter Einzelknoepfe: Infothek,
   Fachhandel, Gold-Ankauf. Weisse Karte mit Rand auf der grauen Sektion,
   Knopf unten buendig, damit die Reihe trotz ungleich langer Texte ruhig steht. */
.am-verweise{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem;
  max-width:1120px; margin:2.4rem auto 0 !important; }
.am-verweis{ display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--am-surface); border:1px solid var(--am-border); border-radius:2px;
  padding:1.6rem 1.4rem 1.5rem; }
.am-verweis p{ padding-bottom:0 !important; }
.am-verweis-etikett{ margin:0 0 .45rem !important; font-size:var(--am-fs-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--am-muted); }
#main-content .am-verweis h3{ margin:0 0 .6rem; font-size:var(--am-fs-md); }
.am-verweis-text{ margin:0 0 1.2rem !important; color:var(--am-muted); font-size:var(--am-fs-sm);
  line-height:1.55; text-wrap:balance; }
.am-verweis-cta{ margin:auto 0 0 !important; }
@media(max-width:900px){ .am-verweise{ grid-template-columns:1fr; max-width:520px; } }

/* --- Kontaktliste ohne Umbruch in der Beschriftung (17.09.2026, Wunsch Nutzer) ---
   Die Beschriftungsspalte stand fest auf 5,2rem; „Telefon & WhatsApp" brach
   deshalb zweizeilig. Als Raster nimmt sie die Breite der laengsten
   Beschriftung, und Nummer und Adresse bleiben in beiden Zeilen buendig. */
ul.am-contact-list{ display:grid; grid-template-columns:auto auto minmax(0,1fr);
  column-gap:.6rem; row-gap:.55rem; align-items:baseline; }
ul.am-contact-list > li{ display:contents; }
ul.am-contact-list .am-cl-label{ flex:none; white-space:nowrap; }
ul.am-contact-list a{ overflow-wrap:anywhere; }
ul.am-contact-list .am-ico{ align-self:center; }

/* ---------------------------------------------------------------------
   BILDKOPF AUF DEM KATEGORIE-ARCHIV  (24.09.2026)
   Das in der Kategorie-Maske gesetzte Motiv steht neben Thema und
   Einleitung. Der Hero darueber bleibt auf allen Themen gleich (Beschluss
   15.09.) - deshalb sitzt das Bild hier und nicht im Kopf der Seite.
   Ohne Bild traegt der Kopf die Zusatzklasse nicht und bleibt unveraendert.
   --------------------------------------------------------------------- */
.am-register-thema--bild{ display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:1.5rem; align-items:center; }
.am-register-thema__bild{ display:block; width:100%; aspect-ratio:4/3;
  border-radius:var(--am-radius); background:var(--am-surface) center/cover no-repeat; }
/* Schmale Beitragsspalte (iPad hoch): Bild ueber den Text, sonst bleiben fuer
   die Ueberschrift keine 20 Zeichen je Zeile. */
@media(max-width:820px){
  .am-register-thema--bild{ grid-template-columns:1fr; gap:1rem; }
  .am-register-thema__bild{ aspect-ratio:16/9; }
}

/* =====================================================================
   DIVI-BRUECKE FUER DIE ANKAUFSSEITEN  (24.09.2026)

   Die acht Ankaufsseiten liegen seit heute als gewoehnliche Divi-Abschnitte
   in der Seite, damit Thomas sie bearbeiten kann. Vorher war jede Seite eine
   leere Huelle mit einem einzigen Code-Modul.

   Dadurch stehen drei Divi-Ebenen zwischen Reihe und Inhalt:
       .et_pb_row.am-container > .et_pb_column > .et_pb_module > .et_pb_text_inner
   Das Designsystem adressiert Inhalte aber als DIREKTE Kinder des Containers
   (`.am-section > .am-container > p`). 56 Regeln greifen so nicht mehr:
   Satzbreite, Ausrichtung, Abstaende, die Breite der Ablaufschritte.

   Der zweite Teil unten ist maschinell erzeugt (am/bau_bruecke.py): zu jeder
   dieser Regeln entsteht eine zweite Fassung mit demselben Regelkoerper ueber
   den Divi-Weg. Wird oben ein Wert geaendert, Bruecke neu erzeugen.

   Hier oben stehen nur die Werte, die im alten Aufbau das umschliessende
   `.am-page` bzw. das Markup selbst mitgebracht hat. Kein !important noetig:
   die Sektionen setzen in Divi bewusst KEIN eigenes Padding und KEINE eigene
   Breite, damit diese Regeln ueber die Spezifitaet gewinnen.
   ===================================================================== */

/* Flaeche und Polsterung der Sektion (Divi-Grundwert waere 4% 0) */
.et_pb_section.am-section{ padding:clamp(2.5rem,6vw,4.5rem) 0; }
/* Die Divi-Reihe IST der Container (Divi-Grundwert waere 80% / 1080px) */
.am-section > .et_pb_row.am-container{ width:100%; max-width:var(--am-maxw);
  margin:0 auto; padding:0 clamp(16px,4vw,32px); }
/* Ausnahme wie im Original: der Ablauf laeuft ueber die Schirmbreite */
.am-steps-sec > .et_pb_row.am-container,
.am-cat-cta > .et_pb_row.am-container{ max-width:none;
  padding-left:clamp(20px,3.5vw,72px); padding-right:clamp(20px,3.5vw,72px); }
/* Spalte und Module bringen keine eigenen Abstaende mit - die Abstaende
   stehen im Designsystem (Ueberschriften, Kacheln, Listen). */
.am-section > .am-container > .et_pb_column{ width:100%; margin:0; padding:0; }
.am-section .et_pb_module{ margin-bottom:0; }
/* Kam bisher ueber `.am-page`, weil die ganze Seite in einem Code-Modul lag */
.am-section{ font-size:var(--am-fs-base); font-weight:400; }
.am-section h2{ font-size:var(--am-fs-h2); }
.am-section p a:not(.am-btn){ color:var(--am-accent); }

/* ---- maschinell erzeugt: Regeln des Designsystems ueber den Divi-Weg ---- */
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > ul,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > ol{ line-height:1.72; }
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > h2,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-sec-intro,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-lead-text{ text-align:center; font-weight:400; line-height:1.6; }
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > div > p,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > ul,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > ol{ text-align:left; }
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-schluss p,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p.am-center,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > div.am-center > p{ text-align:center; }
.am-trust > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p{ text-align:center; }
.am-section--mitte > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p,
.am-section--mitte > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > div > p{ text-align:center; }
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > h2{ margin:0 0 .9rem; }
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-sec-intro,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-lead-text,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > ul,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > ol,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-schluss,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-sprung{ max-width:900px;
  margin-left:auto; margin-right:auto; }
.am-section > .am-container.am-legal :is(.et_pb_text_inner,.et_pb_code_inner) > h2{ text-align:left; }
.am-steps-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-steps,
.am-cat-cta > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-steps{ max-width:580px; }
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-statement:first-child{ margin-top:0; }
.am-einstieg-sec.am-section--mitte > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p,
.am-einstieg-sec.am-section--mitte > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-auftakt,
.am-einstieg-sec.am-section--mitte > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-statement{ max-width:900px; text-wrap:balance; }
.am-einstieg-sec.am-section--mitte > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-auftakt{ text-align:center !important; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p{ padding-bottom:0 !important; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p{ margin-bottom:1.15rem; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-auftakt{ margin-bottom:1.6rem; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-einstieg-titel{ margin-bottom:.7rem !important; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-fragen{ margin-bottom:1.9rem !important; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-statement{ margin-top:2rem; margin-bottom:0; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-schluss{ margin-top:1.6rem; }
.single-post .am-post-cta > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p{ text-align:center; max-width:640px;
  margin-left:auto; margin-right:auto; }
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > h3,
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-mehr{ max-width:900px; margin-left:auto; margin-right:auto; }
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > h3{ margin-top:2.4rem; }
.am-section > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > h2 + h3{ margin-top:0; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p{ padding-bottom:0 !important; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p{ margin-bottom:1.15rem; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-einstieg-titel{ margin-bottom:.7rem !important; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-fragen{ margin-bottom:1.4rem !important; }
.am-einstieg-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > h3{ margin-top:2.2rem; }
.am-section--mitte > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > p.am-lead-text + p{ text-align:center; max-width:900px;
  margin-left:auto; margin-right:auto; text-wrap:balance; }
@media(min-width:1150px){
.am-steps-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-steps,
.am-cat-cta > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-steps{ max-width:1180px; }
.am-steps-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-steps,
.am-cat-cta > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-steps{ max-width:min(1700px, 94vw); }
}
@media(min-width:2320px){
.am-steps-sec > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-steps,
.am-cat-cta > .am-container :is(.et_pb_text_inner,.et_pb_code_inner) > .am-steps{ max-width:2380px; }
}

/* ---- Nachlese wpautop -------------------------------------------------
   Divis Text-Modul schickt seinen Inhalt durch wpautop. Zwischen einem
   Inline-Element und einem folgenden Blockelement entsteht dabei ein LEERER
   Absatz. Im Kopf eines Ablaufschritts (`<summary>`: Zahl, Titel, Pfeil als
   Grid mit drei Spalten) belegte dieser Absatz die mittlere Spalte - der
   Titel rutschte an den rechten Rand, der Pfeil in die naechste Zeile.
   Leere Absaetze tragen nie Inhalt, deshalb kommen sie aus dem Fluss. Die
   Spalten des Schrittkopfs stehen zusaetzlich ausdruecklich, damit ein
   weiteres Element die Reihenfolge nicht erneut verschieben kann. */
.am-section .et_pb_text_inner p:empty{ display:none; }
.am-section .am-detail > summary > .am-detail-n{ grid-column:1; }
.am-section .am-detail > summary > h3{ grid-column:2; }