/* =====================================================================
   AM BASE  ·  Design-Basis ankaufmilitaria (Staging)
   Palette komplett über Tokens -> spätere Umstellung = nur diese Werte.
   ===================================================================== */
:root{
  /* ---- PALETTE gold-ankauf-kiel.de — GOLD-MIX (Festlegung 08.09.2026) ----
     Am 07.09. standen hier Weiß und Grau. Nach dem Variantenvergleich hat
     der Kunde am 08.09. **Gold-Mix** gewählt: warme helle Flächen wie
     Gold-Light, dunkle Akzentfläche wie Gold-Dark. Diese Werte sind
     identisch mit html[data-gk-palette="6"] — der Umschalter zeigt also
     ohne Auswahl dasselbe wie die Seite.

     Kontraste nachgerechnet (Code/_paletten_bauen.py, elf Kombinationen):
     Gold #7d5f1e hält auf allen hellen Flächen 4,5:1, das helle Gold
     #d9b64a hält auf der dunklen Fläche 7,58:1. Umgekehrt gilt beides
     NICHT — deshalb die getrennten ink-Tokens weiter unten.

     VOR DEM GO-LIVE: nur noch Umschalter und die Palettenblöcke
     (html[data-gk-palette]) entfernen; diese Werte bleiben stehen. */
  --gk-bg:        #f7f0e0;   /* Grundfläche */
  --gk-surface:   #fffdf8;   /* helle Sektionen */
  --gk-surface-2: #efe4cd;   /* dritter Flächenton — trennt Sektionen sichtbar */
  --gk-text:      #23211e;
  --gk-heading:   #14120f;
  --gk-muted:     #55504a;   /* auf --gk-surface-2 muss 4,5:1 halten */
  --gk-border:    #ddd2b8;   /* warm — ein graues Rahmenband wirkt auf Beige kalt */
  --gk-accent:    #7d5f1e;
  --gk-accent-2:  #5f4715;
  --gk-accent-ink:#ffffff;
  --gk-ink:       #2a2724;   /* dunkle Flächen: Kopf, Fuß, Akzentsektionen */
  --gk-ink-text:  #f4efe5;   /* Text auf dunklen Flächen */
  --gk-ink-muted: #c2bbb0;
  --gk-ink-link:  #d9b64a;
  --gk-ink-accent:#d9b64a;   /* Akzent AUF dunkel — --gk-accent hält dort keine 4,5:1 */
  --gk-dark:       #2a2724;   /* Zweitakzent: Linien, Buttonflaeche */
  --gk-gold-deko:  #c9a227;   /* nur dekorativ - nie fuer Text auf hell */
  /* ---- Knopffarben (Vorgabe 08.09.2026) ----
     Die Knoepfe waren dunkelgold gefuellt mit weisser Schrift. Jetzt tragen
     sie die dunkle Flaeche mit goldener Schrift - dasselbe Bild wie in den
     dunklen Sektionen. Eigene Tokens, KEINE ink-Tokens: die haengen an der
     gewaehlten Variante und werden in den hellen Varianten dunkelgold, was
     auf #2a2724 nur 2,6:1 ergaebe. Fest gesetzt sind es 7,58:1.
     Der goldene Rand ist Pflicht, nicht Zierde - ohne ihn verschwindet der
     Knopf auf dunklem Grund (Hero-Foto, Akzentsektionen, Fusszeile). */
  --gk-btn-bg:     #2a2724;
  --gk-btn-fg:     #d9b64a;
  --gk-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)                    */
  --gk-fs-label-sm: .66rem;
  --gk-fs-label:    .74rem;
  --gk-fs-xs:       .82rem;
  --gk-fs-sm:       .93rem;
  --gk-fs-base:     1rem;
  --gk-fs-nav:      .875rem;
  --gk-fs-md:       1.14rem;
  --gk-fs-lg:       1.32rem;
  --gk-fs-lead:     clamp(1.08rem, 2vw, 1.28rem);
  --gk-fs-h3:       clamp(1.2rem, 2.2vw, 1.5rem);
  --gk-fs-h2:       clamp(1.5rem, 3vw, 2.1rem);
  --gk-fs-h1:       clamp(1.9rem, 4.4vw, 3rem);
  --gk-fs-display:  2.4rem;
  /* ---- Layout-Tokens ----
     Radius bewusst klein: Antiquitäten-/Archiv-Anmutung statt App-Optik. */
  --gk-maxw: 1400px;
  --gk-radius: 2px;
}

/* Bedienelement (nur Staging – dient der Auswahl, fliegt vor Live raus) */
@media(max-width:600px){   /* auf kleinen Displays kompakter, damit er den Inhalt nicht verdeckt */
  }

/* ---------- Grund ---------- */
html body, #page-container{ background:var(--gk-bg) !important; }
#page-container #main-content{ color:var(--gk-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(--gk-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 .gk-page/.gk-footer; Knoepfe, Eyebrows und Zahlen setzen ihr Gewicht
   selbst und bleiben unberuehrt. */
.gk-page, .gk-footer{ font-weight:400; }
/* Lange Absaetze bekommen etwas mehr Zeilenabstand - leichtere Schrift
   vertraegt ihn und liest sich damit ruhiger. */
.gk-section > .gk-container > p,
.gk-section > .gk-container > ul,
.gk-section > .gk-container > ol,
.gk-detail-body p,
.gk-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,
.gk-hero h1,.gk-persons h2,.gk-cats h2,.gk-steps-sec h2,.gk-person-body h3,
.gk-action-title,.gk-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(--gk-focus) !important; outline-offset:2px !important; border-radius:var(--gk-radius); }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }
/* Skip-Link (BFSG): unsichtbar bis Tastatur-Fokus */
.gk-skip{ position:fixed; left:8px; top:-60px; z-index:100001; background:var(--gk-accent); color:#fff !important;
  padding:.7em 1.2em; border-radius:0 0 var(--gk-radius) var(--gk-radius); text-decoration:none !important; font-weight:600; transition:top .15s; }
.gk-skip:focus{ top:0; }
#main-content:focus{ outline:none !important; } /* Skip-Ziel: kein Rahmen um gesamten Content */

/* ---------- Buttons ---------- */
.gk-btn{ display:inline-block; background:var(--gk-btn-bg); color:var(--gk-btn-fg) !important; padding:.7em 1.5em;
  border-radius:var(--gk-radius); text-decoration:none !important; font-weight:600; line-height:1.2;
  border:1px solid transparent; transition:background .15s, color .15s, border-color .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(--gk-fs-base); font-family:inherit; }
/* Hover kehrt Flaeche und Schrift um - derselbe Kontrast, klar erkennbare
   Zustandsaenderung, ohne eine dritte Farbe einzufuehren. */
.gk-btn:hover{ background:var(--gk-btn-fg); color:var(--gk-btn-bg) !important; border-color:transparent; }
/* ---------------------------------------------------------------------
   KNOEPFE AUF DUNKLEM GRUND  (Vorgabe 08.09.2026: goldener Rand weg)
   Der Knopf trug bisher einen goldenen 1-px-Rand. Der war kein Zierrat:
   die Knopfflaeche ist #2a2724 - genau die Farbe von Hero-Ueberzug,
   Akzentsektionen und Footer. Ohne Rand verschwand der Knopf dort
   vollstaendig, im Footer waere er unsichtbar gewesen.

   Statt den Rand zu behalten, dreht der Knopf auf dunklem Grund um:
   goldene Flaeche, dunkle Schrift. Damit ist der Rand ueberall entbehrlich,
   und auf hellen Flaechen steht der Knopf jetzt randlos und ruhiger.
   Kontrast bleibt in beiden Faellen 7,58:1 (#d9b64a zu #2a2724).

   Der Rand ist auf `transparent` gesetzt statt entfernt: so bleibt die
   Groesse des Knopfes exakt gleich, und die Ghost-Varianten - bei denen der
   Rand die eigentliche Form ist - bleiben unberuehrt.
   --------------------------------------------------------------------- */
:is(.gk-hero, .gk-footer, .gk-section--dunkel) .gk-btn:not(.gk-btn-ghost):not(.gk-btn-ghost--dark),
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"])
  :is(.gk-akzent, .gk-cat-cta) .gk-btn:not(.gk-btn-ghost):not(.gk-btn-ghost--dark){
  background:var(--gk-btn-fg); color:var(--gk-btn-bg) !important; }
:is(.gk-hero, .gk-footer, .gk-section--dunkel) .gk-btn:not(.gk-btn-ghost):not(.gk-btn-ghost--dark):hover,
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"])
  :is(.gk-akzent, .gk-cat-cta) .gk-btn:not(.gk-btn-ghost):not(.gk-btn-ghost--dark):hover{
  background:transparent; color:var(--gk-btn-fg) !important; border-color:var(--gk-btn-fg); }

/* Auch der Kopfzeilen-Knopf ("Ankauf anfragen") sitzt auf der dunklen
   Kopfflaeche - Divi rendert ihn als eigenes Element, deshalb hier
   gesondert. Die Regel steht bei den Header-Overrides weiter unten. */
.gk-btn-lg{ padding:.85em 1.9em; font-size:var(--gk-fs-base); }
.gk-btn-ghost{ background:transparent; color:var(--gk-accent-ink) !important; border-color:rgba(255,255,255,.6); }
.gk-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. */
.gk-btn-ghost--dark{ background:transparent; color:var(--gk-accent) !important; border-color:var(--gk-accent); }
.gk-btn-ghost--dark:hover{ background:var(--gk-btn-bg); color:var(--gk-btn-fg) !important; border-color:var(--gk-btn-bg); }

/* =====================================================================
   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.). */
.gk-page, .gk-footer{ font-size:var(--gk-fs-base); }

#main-content .gk-page{ /* reset Divi-Innenabstände */ }
/* Kein FOUC/„Snap": volle Breite der gk-*-Sektion schon in der render-blockierenden gk-base.css
   erzwingen (Divi legt width:100%/padding:0 sonst erst im verzögerten Dynamic-CSS an → Hero springt).
   Scoped via :has(.gk-page), damit Alt-Seiten (z. B. SH mit 90%-Rows) unberührt bleiben. */
.et_pb_section:has(> .et_pb_row .gk-page),
.et_pb_section:has(.gk-page){ padding-top:0 !important; padding-bottom:0 !important; }
.et_pb_row:has(.gk-page){ width:100% !important; max-width:100% !important; padding:0 !important; margin:0 auto !important; }
.et_pb_column:has(.gk-page){ width:100% !important; margin:0 !important; }
.et_pb_module:has(.gk-page){ margin:0 !important; }
.gk-container{ max-width:var(--gk-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. */
.gk-ticks, .gk-ticks li, .gk-steps, .gk-steps li,
.gk-contact-list, .gk-contact-list li,
.gk-footer ul, .gk-footer li, .gk-fcontact, .gk-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. */
.gk-section{ padding:clamp(2.5rem,6vw,4.5rem) 0; background:var(--gk-bg); }
.gk-section--hell{ background:var(--gk-surface); }
.gk-section--dunkel{ background:var(--gk-ink); color:var(--gk-ink-text); }
.gk-section--dunkel h2, .gk-section--dunkel h3{ color:var(--gk-ink-text); }
.gk-section--dunkel .gk-muted{ color:var(--gk-ink-muted); }
.gk-section--dunkel a{ color:var(--gk-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. */
.gk-section > .gk-container > h2,
.gk-section > .gk-container > .gk-sec-intro,
.gk-section > .gk-container > .gk-lead-text{ text-align:center; font-weight:400; line-height:1.6; }
.gk-hero .gk-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. */
.gk-section > .gk-container > p,
.gk-section > .gk-container > div > p,
.gk-section > .gk-container > ul,
.gk-section > .gk-container > ol{ text-align:left; }
/* Ausnahmen: kurze Zeilen, die ihre Mittelachse behalten. Die Selektoren
   sind absichtlich so lang - `.gk-schluss p` allein verliert gegen
   `.gk-section > .gk-container > div > p` und der Handlungsaufruf rutscht
   nach links. */
.gk-section > .gk-container > .gk-schluss p,
.gk-section > .gk-container > p.gk-center,
.gk-section > .gk-container > div.gk-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). */
.gk-trust > .gk-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. */
.gk-section--mitte > .gk-container > p,
.gk-section--mitte > .gk-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. */
.gk-section > .gk-container.gk-legal p,
.gk-section > .gk-container.gk-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. */
.gk-page h2{ font-size:var(--gk-fs-h2); }
.gk-section > .gk-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. */
.gk-section > .gk-container > .gk-sec-intro,
.gk-section > .gk-container > .gk-lead-text,
.gk-section > .gk-container > p,
.gk-section > .gk-container > ul,
.gk-section > .gk-container > ol,
.gk-section > .gk-container > .gk-schluss,
.gk-section > .gk-container > .gk-sprung{ max-width:900px;
  margin-left:auto; margin-right:auto; }
/* Rechtstexte behalten ihre linksbuendigen Zwischenueberschriften. */
.gk-section > .gk-container.gk-legal > h2{ text-align:left; }
.gk-center{ text-align:center; } .gk-small{ font-size:var(--gk-fs-sm); }
/* Zwei Knoepfe nebeneinander - dasselbe Muster wie im Hero und im
   Kontaktteaser. Umbricht auf schmalen Schirmen sauber untereinander. */
.gk-btn-paar{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; align-items:center; }
.gk-muted{ color:var(--gk-muted); }
.gk-eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:var(--gk-fs-label); font-weight:700; color:var(--gk-accent); margin:0 0 .6rem; }

/* Hero — flache Tiefenfarbe statt Verlauf (ruhiger, weniger „App") */
.gk-hero{ background:var(--gk-ink); color:var(--gk-ink-text); padding:clamp(3rem,8vw,6rem) 0; text-align:center; }
.gk-hero h1{ color:#fff !important; font-size:var(--gk-fs-h1); margin:.2em 0 .4em; }
.gk-hero .gk-lead{ color:var(--gk-ink-muted); font-size:var(--gk-fs-lead); max-width:760px; margin:0 auto 1.6em; }
/* Claim zwischen Überschrift und Vorspann (Wunsch Niels, 10.09.2026).
   Serifenschrift und Goldton heben ihn heraus, ohne mit der H1 zu
   konkurrieren; Weiß bliebe eine zweite Überschrift.

   Als Pille mit eigener Fläche (Nachtrag 10.09.): Frei auf dem Hero-Foto war
   der Goldton schlecht lesbar — das Motiv wechselt unter der Zeile zwischen
   hellen Münzflächen und dunklem Grund, und ein halbtransparenter Grund hätte
   das nur gemildert (bei 85 % Deckkraft über einer hellen Stelle bleiben
   rechnerisch 3,4:1). Deshalb deckend in --gk-ink: dieselbe Fläche wie die
   dunklen Bänder der Seite, darauf hält --gk-ink-accent 7,4:1. */
.gk-hero-claim{ display:inline-block; margin:0 0 1.1em;
  padding:.45rem 1.3rem; border-radius:999px;
  background:var(--gk-ink); border:1px solid var(--gk-ink-accent);
  font-family:"Playfair Display",Georgia,serif; font-style:italic;
  font-size:var(--gk-fs-lead); line-height:1.35; color:var(--gk-ink-accent); }
@media(max-width:520px){ .gk-hero-claim{ padding:.4rem 1rem; } }
.gk-hero-cta{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* ---------- Farben AUF dunklen Flaechen (Hero, Trust, Footer) ----------
   --gk-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 --gk-ink-accent, fuer gedaempften Text
   --gk-ink-muted. Beides ist je Design-Variante eigens gesetzt. */
.gk-hero .gk-eyebrow, .gk-trust .gk-eyebrow, .gk-footer .gk-eyebrow{ color:var(--gk-ink-accent); }
.gk-hero .gk-ph-text, .gk-trust .gk-ph-text, .gk-footer .gk-ph-text{ color:var(--gk-ink-muted); }
.gk-hero .gk-muted, .gk-hero .gk-small.gk-muted{ color:var(--gk-ink-muted); }
.gk-hero .gk-ico, .gk-trust .gk-ico, .gk-footer .gk-ico{ color:var(--gk-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) ---------- */
.gk-sec-intro{ text-align:center; max-width:660px; margin:0 auto 2.2rem; color:var(--gk-muted); }

/* =====================================================================
   „PERSÖNLICH BEI IHNEN VOR ORT ODER BEI UNS"  ·  10.09.2026
   Neuer Abschnitt auf /ankaufsprozess/ nach Thomas' Dokument
   „Ankauf Gold Ablauf". Er beantwortet die Frage, an der der unabhängige
   Besuchertest hängen blieb: ob man auch selbst vorbeikommen kann.

   Linksbündig und auf Lesebreite statt zentriert: Der Abschnitt trägt fünf
   Absätze und eine Liste — als zentrierter Block fängt jede Zeile woanders
   an, und die Vorteile lesen sich nicht mehr als Aufzählung.
   ===================================================================== */
/* Volle Containerbreite wie jede andere Sektion der Seite (Vorgabe
   10.09.2026). Zwei Zwischenstaende waren vorher zu sehen und sind verworfen:
   eine auf 70ch begrenzte Zeile — die klebte am linken Rand und liess die
   rechte Haelfte leer — und ein auf 860 px zentrierter Block, der schmaler
   stand als der Rest der Seite. Die Ueberschrift steht mittig wie bei „Die
   vier Schritte" und „Was in jedem Schritt passiert", der Fliesstext bleibt
   linksbuendig wie in den Aufklappern darunter. */
/* Linksbuendig, nicht mittig (Vorgabe 10.09.2026): Die Ueberschrift sitzt
   damit genau ueber der linken Textspalte und liest sich als deren Kopf.
   Zentriert stand sie ueber der Mitte der Sektion — also ueber der Fuge
   zwischen Text und Vorteilskasten — und gehoerte optisch zu keinem von
   beiden. */
.gk-vorort > .gk-container > h2{ text-align:left; margin-bottom:2.2rem; }
/* Zwei Spalten: links der Fliesstext, rechts die Vorteile als abgesetzter
   Kasten. Der Abschnitt soll dieselbe Breite tragen wie jede andere Sektion
   (1400 px) — ein einspaltiger Textblock laesst darin die halbe Seite leer,
   und die Zeilen werden mit rund 160 Zeichen unlesbar lang. Aufgeteilt
   ergeben sich zwei Spalten von je gut 60 Zeichen: volle Breite und trotzdem
   Lesebreite. */
.gk-vorort-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(2rem,4vw,3.5rem);
  align-items:start; }
.gk-vorort-text > p{ margin:0 0 1rem; }
.gk-vorort-cta{ margin:1.8rem 0 0 !important; }
/* Der Kasten hebt die Vorteile heraus, ohne eine zweite Farbe einzufuehren:
   Flaeche wie die Sektion, abgegrenzt allein durch den warmen Rand — dieselbe
   Bauform wie die Personenkarten auf der Startseite. */
.gk-vorort-box{ border:1px solid var(--gk-border); border-radius:var(--gk-radius);
  padding:1.4rem 1.5rem; }
.gk-vorteile-titel{ font-weight:700; margin:0 0 .9rem !important;
  font-size:var(--gk-fs-label-sm); letter-spacing:.13em; text-transform:uppercase;
  color:var(--gk-muted); }
.gk-vorteile{ list-style:none !important; margin:0; padding:0 !important;
  display:grid; gap:.7rem; }
@media(max-width:900px){
  /* Untereinander, sobald zwei Spalten unter rund 300 px fielen. */
  .gk-vorort-grid{ grid-template-columns:1fr; }
}
.gk-vorteile li{ display:flex; gap:.7rem; align-items:flex-start; padding-top:0;
  list-style:none !important; }
.gk-vorteile li::marker{ content:""; }
/* Der Haken steht im Akzent, nicht im Fliesstextton: Er ist die einzige
   Farbe im Abschnitt und gliedert die Liste, ohne sie bunt zu machen. */
.gk-vorteile-ico{ flex:0 0 auto; color:var(--gk-accent); line-height:0; margin-top:.15rem; }
@media(max-width:560px){
  /* Auf dem Handy steht der Knopf über die volle Breite — daneben ist ohnehin
     kein Platz, und als schmaler Block mittig wirkt er verloren. */
  .gk-vorort-cta{ text-align:center; }
  .gk-vorort-cta .gk-btn{ display:block; }
}

/* ---------- 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. */
.gk-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){ .gk-persons-grid{ grid-template-columns:1fr; } }
/* Die Karten standen auf --gk-surface, einer helleren Flaeche als die Sektion.
   Auf der warmen Grundflaeche von Gold-Mix stach dieses Weiss heraus (Vorgabe
   08.09.2026). Jetzt liegen sie flaechengleich auf der Sektion; abgegrenzt
   werden sie allein durch den Rand. transparent statt var(--gk-bg): so stimmt
   die Farbe auch, wenn die Sektion einmal eine andere Flaeche traegt.

   Der Rand ist dunkel statt warm-hell: ohne eigene Flaeche muss er die Karte
   allein tragen, ein heller Rand haette sie nur angedeutet. Dazu passend die
   Rollenzeile in derselben dunklen Farbe - Gold bliebe hier ein zweiter
   Akzent neben dem Rand. */
.gk-person{ display:grid; grid-template-columns:220px 1fr; gap:0; align-items:stretch;
  background:transparent; border:1px solid var(--gk-dark); border-radius:var(--gk-radius);
  overflow:hidden; }   /* keine Schlagschatten/Hover-Anhebung: ruhige, gedruckte Anmutung */
/* Schwelle am 10.09.2026 von 480 auf 560 px angehoben (Besuchertest): Zwischen
   481 und 560 px blieben neben dem 220-px-Foto nur rund 220 bis 300 px Text —
   zu wenig fuer die drei Absaetze, die die Karten seit dem 10.09. tragen. */
@media(max-width:560px){ .gk-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. */
.gk-person-photo{ width:100%; aspect-ratio:4/5; min-height:100%;
  background:var(--gk-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; }
.gk-person-photo--img{ background-size:cover !important; background-position:center 18% !important; background-repeat:no-repeat !important; }
/* Auf dem Handy stand hier 16/10. Aus einem Hochformat (Verhältnis 0,52) bleibt
   dabei ein Querstreifen: 68 % der Bildhöhe fallen weg, das Kinn wird
   angeschnitten. Quadratisch bleiben Kopf und Schultern erhalten, und die
   Karte wird trotzdem nicht zum Turm. Der Bildausschnitt rückt dafür weiter
   nach oben — bei so starkem Beschnitt entscheidet die Position darüber, ob
   ein Gesicht ganz zu sehen ist. */
/* Mobile Fassung neu gefasst am 10.09.2026 (Sichtprüfung).
   Vorher galt hier aspect-ratio:1/1. Bei 390 px Fensterbreite wurde daraus
   eine Fotoflaeche von 356 x 356 px — ein halber Handybildschirm je Karte,
   die Karten 800 bis 872 px hoch. Und der Zuschnitt lief ins Leere: Die
   Portraits sind eigens auf 0,52 geschnitten (passend zur Desktop-Flaeche von
   220 x 442 px, Beschnitt dort 4 %); ein Quadrat schneidet davon wieder
   48 % oben und unten weg — gemessen, nicht geschaetzt.

   Statt eines Seitenverhaeltnisses steht jetzt eine gedeckelte HOEHE: Das
   Foto laeuft ueber die volle Kartenbreite, bleibt aber flach genug, dass
   Bild und Text zusammen auf einen Blick passen. Der Bildausschnitt sitzt
   hoch (22 %), damit bei diesem Schnitt Kopf und Schultern im Bild bleiben
   und nicht die Brust.

   Warum keine schmale Fotospalte neben dem Text: Dann faellt die Textspalte
   auf rund 190 px, und die drei Absaetze der Karte brechen in Zwei-Wort-
   Zeilen um — genau der Befund, der diese Umstellung ausgeloest hat. */
.gk-person-body{ padding:1.5rem 1.6rem; display:flex; flex-direction:column; justify-content:center; }
/* .gk-person-body p steht weiter unten und ist spezifischer - die Rollenzeile
   ist ein <p> darin und trug deshalb bisher --gk-muted, nicht die hier
   gesetzte Farbe. Mit der Elternklasse davor greift sie. */
/* Reihenfolge seit 10.09.2026: erst der Name, dann der Aufgabenbereich.
   Vorher stand die Rollenzeile oben — bei zwei Personen mit langen
   Aufgabenbeschreibungen las man dadurch dreimal „Edelmetalle", bevor
   ueberhaupt ein Name fiel. Der Name traegt die Karte, die Rolle erklaert ihn. */
.gk-person-body .gk-person-role{ text-transform:uppercase; letter-spacing:.12em; font-size:var(--gk-fs-label); font-weight:700;
  color:var(--gk-dark); margin:0 0 .95rem; }
.gk-person-body h3{ margin:0 0 .35rem; font-size:var(--gk-fs-lg); line-height:1.25; }
.gk-person-body p{ margin:0; color:var(--gk-muted); font-size:var(--gk-fs-sm); line-height:1.6; }
.gk-person-contact{ margin-top:.9rem !important; font-size:var(--gk-fs-sm); }
.gk-person-contact a{ color:var(--gk-accent); text-decoration:underline; text-underline-offset:2px; }
/* Die Karten tragen seit 10.09.2026 drei Absätze statt zwei (Einleitungssatz,
   Beschreibung, Schwerpunkte). Ohne diese Regel klebten sie aneinander:
   .gk-person-body p setzt margin:0, damit die Rollenzeile eng am Namen sitzt. */
.gk-person-body p + p{ margin-top:.7rem; }
/* Die Rollenzeile folgt seit dem Tausch auf den Namen. Ohne diese Regel
   griffe zusaetzlich .gk-person-body p + p und der Abstand zum ersten
   Fliesstextabsatz waere doppelt so gross wie zum Namen. */
.gk-person-body h3 + .gk-person-role{ margin-top:0; }
.gk-person-body .gk-person-role + p{ margin-top:0 !important; }
/* AB TABLET zurueck zur urspruenglichen Reihenfolge: Rollenzeile ueber dem
   Namen (Entscheidung 10.09.2026 — der Tausch war ausdruecklich nur fuer die
   Handy-Ansicht gewuenscht).

   Im Markup steht seit dem Tausch der Name zuerst. Das muss so bleiben: Auf
   dem Handy ist .gk-person-body ein Block, damit der Text das runde Portrait
   umfliesst — dort laesst sich nichts umsortieren. Ab 561 px ist der Body
   ohnehin ein Flex-Container, und die order-Eigenschaft dreht die beiden
   Zeilen zurueck, ohne das Markup anzufassen. Die uebrigen Absaetze brauchen einen eigenen
   Wert, sonst zoege ihr Standardwert 0 sie vor Name und Rolle. */
@media(min-width:561px){
  .gk-person-body .gk-person-role{ order:1; margin:0 0 .4rem; }
  .gk-person-body h3{ order:2; margin:0 0 .6rem; }
  .gk-person-body > *:not(h3):not(.gk-person-role){ order:3; }
  .gk-person-body .gk-person-role + p{ margin-top:0 !important; }
}
/* Dritte Karte (Oskar, der Dackel) läuft über beide Spalten. So bleiben die
   zwei Ansprechpartner gleichrangig nebeneinander, statt zu dritt auf je ein
   Drittel zu schrumpfen — bei 220 px Foto plus Text wäre das nicht aufgegangen.
   Das quadratische Format nimmt der Karte zugleich das Gewicht der beiden
   Portraits im Hochformat. */
/* Niels ist federführend und steht überall an erster Stelle (10.09.2026).
   Das Etikett sagt es, statt es der Reihenfolge allein zu überlassen — die
   fällt bei einspaltiger Darstellung auf dem Handy kaum auf. */
.gk-person-lead{ display:inline-block; font-size:var(--gk-fs-label-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--gk-accent-2);
  border:1px solid var(--gk-accent-2); border-radius:99px; padding:.2rem .6rem;
  margin:0 0 .6rem !important; }
.gk-person--breit{ grid-column:1 / -1; grid-template-columns:200px 1fr; }
.gk-person--breit .gk-person-photo{ aspect-ratio:1/1; background-position:center 35% !important; }
/* Auf dem Handy wird aus der Karte eine Visitenkarte: rundes Portrait links,
   Text fliesst darum herum.

   Zwei Wege wurden vorher probiert und verworfen (10.09.2026):
   · Foto quadratisch ueber die volle Breite — 356 x 356 px, ein halber
     Bildschirm je Karte, Karten 800 bis 872 px hoch.
   · Foto flach ueber die volle Breite (Bannerschnitt) — kompakter, aber von
     einem 0,52-Hochformat bleiben dabei nur 26 %: ein Streifen quer durchs
     Gesicht, der wie ein Fehler aussieht, egal wo der Ausschnitt sitzt.

   Ein kleines rundes Portrait loest beides: Der Beschnitt ist bei dieser Form
   selbstverstaendlich statt zufaellig, und die Karte schrumpft von 800 px auf
   rund 380 px. Die Textspalte bleibt dabei voll breit, weil der Text den
   Float unterlaeuft, sobald er tiefer steht als das Bild — genau das, was das
   zweispaltige Raster auf dem Handy nicht kann. */
@media(max-width:560px){
  /* Die Polsterung wandert von der Textspalte auf die Karte: Der Float sitzt
     sonst aussen am Kartenrand und der Text weiter innen. */
  .gk-person{ display:block; padding:1.2rem 1.1rem; }
  .gk-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; }
  /* Ausschnitt ganz nach oben. Gerechnet fuer den 104-px-Kreis: Das Bild
     (700 x 1346) wird auf 104 px Breite skaliert, also 200 px hoch; sichtbar
     sind 104 px, verschiebbar sind demnach nur 96 px. Die Koepfe liegen bei
     Niels zwischen 17 und 91 px, bei Thomas zwischen 5 und 86 px dieser
     200 px. Bei 1 % steht in beiden Faellen der ganze Kopf im Kreis und die
     Gesichtsmitte nahe der Kreismitte; jeder groessere Wert schneidet oben
     die Stirn ab. */
  .gk-person-photo--img{ background-position:center 1% !important; }
  .gk-person-body{ padding:0; display:block; }
  /* Der Float ist hoeher als Rollenzeile plus Name — ohne clear zoege er die
     Kartenunterkante nach oben und das Bild ragte hinaus. */
  .gk-person-body::after{ content:""; display:block; clear:both; }
}
/* Die Fassung fuer die breite Karte steht weiter unten, direkt hinter
   .gk-person--breit — dort, wo deren Desktop-Regeln stehen. Sonst gewinnen
   die spaeteren Deklarationen bei gleicher Spezifitaet. */
/* Diese Regel muss NACH .gk-person--breit stehen und die Spalten mitnehmen:
   Der Modifikator setzt `200px 1fr` ohne Medienbedingung und ist spezifischer
   als die Umbruchregel von .gk-person weiter oben — die breite Karte blieb
   deshalb bis herunter auf 390 px zweispaltig. Uebrig blieben dort rund
   130 px Textspalte, in der jede Zeile zwei bis drei Woerter trug und die
   Karte zum Turm wurde (Besuchertest 10.09.2026). */
@media(max-width:560px){
  /* Oskar bekommt dieselbe Visitenkarten-Form wie die beiden Portraits.
     Sein Bild ist fast quadratisch aufgenommen (0,85), der Ausschnitt sitzt
     deshalb tiefer — bei 12 % waere nur die Schnauze im Kreis. */
  .gk-person--breit{ display:block; grid-template-columns:1fr; }
  .gk-person--breit .gk-person-photo{ aspect-ratio:auto; height:104px; }
  .gk-person--breit .gk-person-photo--img{ background-position:center 28% !important; }
}

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

/* --- Aktionen-Banner in voller Fensterbreite ---
   Der Container wird aufgehoben, die Pfeile wandern nach innen. Umschaltbar über
   die Klasse gk-actions--full an der Sektion (in gk_render_actions gesetzt). */
/* Die Steuerleiste des Sliders sitzt unter dem Vollbild auf der
   Sektionsflaeche - auf Grau ergab das einen Streifen unter dem Banner. */
.gk-actions{ background:var(--gk-surface); }
.gk-actions--full{ padding:0; }
.gk-actions--full .gk-container{ max-width:none; padding:0; }
.gk-actions--full .gk-slider{ padding:0; }
.gk-actions--full .gk-slider-viewport{ border-radius:0; }
.gk-actions--full .gk-action{ min-height:clamp(320px,42vw,520px); }
.gk-actions--full .gk-action-inner{ max-width:var(--gk-maxw); margin:0 auto; width:100%;
  padding-left:clamp(20px,5vw,64px); padding-right:clamp(20px,5vw,64px); }
.gk-actions--full .gk-prev{ left:clamp(8px,2vw,24px); }
.gk-actions--full .gk-next{ right:clamp(8px,2vw,24px); }
/* In der Vollbreiten-Fassung stehen die Pfeile AUF dem Foto, nicht neben der
   Karte — dort ist das geerbte Dunkelbraun der Sektion unsichtbar (gemessen
   auf dem Uhren-Motiv: Chevron praktisch nicht auffindbar, Besuchertest
   10.09.2026). Weiss plus ein weicher dunkler Schlagschatten traegt auf
   hellen wie auf dunklen Motiven; der Schatten liegt am Rahmen des Chevrons,
   damit auch ein Zifferblatt darunter ihn nicht schluckt. */
.gk-actions--full .gk-slider-nav{ color:#fff; }
.gk-actions--full .gk-slider-nav::before{ opacity:.95;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.75)) drop-shadow(0 0 8px rgba(0,0,0,.45)); }
.gk-actions--full .gk-slider-nav:hover::before{ opacity:1; }
.gk-actions--full .gk-slider-controls{ margin-top:0; padding:1rem 0 0; }
.gk-actions--full .gk-actions-single .gk-action{ border-radius:0; }

/* --- Aktionen-Slider (dynamisch: 1 = statisch, 2+ = Slider) --- */
.gk-slider{ position:relative; padding:0 56px; }
.gk-slider-viewport{ overflow:hidden; border-radius:var(--gk-radius); }
.gk-slider-track{ display:flex; transition:transform .5s ease; }
.gk-action{ position:relative; flex:0 0 100%; min-height:340px; display:flex; align-items:center;
  text-decoration:none !important; color:#fff !important; background:var(--gk-ink) center/cover no-repeat; }
.gk-action--nobg{ background:var(--gk-ink); }   /* flache Flaeche statt Verlauf, Ton der Variante */
/* Abdunklung am 10.09.2026 verstaerkt (Besuchertest). Vorher lief der Verlauf
   von .82 auf .28 — auf dem Uhren-Motiv, dessen helle Zifferblaetter genau in
   der rechten Haelfte liegen, stand die zweite Zeile des Anrisstextes damit
   weiss auf nahezu Weiss. Der Text reicht bis rund 820 px in die Karte hinein,
   der Verlauf muss also auch dort noch tragen. Links unveraendert dunkel,
   damit das Motiv nicht flach wird. */
.gk-action-shade{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,24,28,.86) 0%,rgba(20,24,28,.66) 55%,rgba(20,24,28,.42) 100%); }
.gk-action-inner{ position:relative; padding:clamp(1.6rem,4vw,2.8rem); max-width:820px; display:block; }
.gk-action-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.14em; font-size:var(--gk-fs-label); font-weight:700;
  color:#fff; background:var(--gk-accent); padding:.32em .85em; border-radius:var(--gk-radius); margin-bottom:.75rem; }
.gk-action-title{ display:block; font-size:var(--gk-fs-h2); font-weight:700; line-height:1.2; margin-bottom:.5rem; color:#fff; }
.gk-action-exc{ display:block; color:var(--gk-ink-text); font-size:var(--gk-fs-base); line-height:1.5; margin-bottom:.95rem; }
.gk-action-more{ display:inline-block; font-weight:600; color:var(--gk-ink-accent); }
.gk-action:hover .gk-action-more{ text-decoration:underline; }
.gk-actions-single .gk-action{ border-radius:var(--gk-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. */
/* color:inherit statt #fff: Die Pfeile stehen links und rechts NEBEN den
   Karten, also auf der Sektionsflaeche - nicht auf dem Bild. Als die
   Aktionen-Sektion von dunkel auf hell umgestellt wurde, blieben sie weiss
   und kamen auf 1,14:1, waren also unsichtbar. Geerbt stimmt die Farbe in
   heller wie dunkler Sektion. */
.gk-slider-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; cursor:pointer;
  background:transparent; border:none; color:inherit; font-size:0; line-height:0;
  display:grid; place-items:center; z-index:2; padding:0; }
.gk-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; }
.gk-prev::before{ transform:rotate(135deg); margin-left:5px; }
.gk-next::before{ transform:rotate(-45deg); margin-right:5px; }
.gk-slider-nav:hover::before{ opacity:1; }
.gk-prev{ left:0; } .gk-next{ right:0; }
/* Steuerzeile: Pause-/Play-Schalter + Dots (WCAG 2.2.2 – Autoplay anhaltbar) */
.gk-slider-controls{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-top:1rem; }
.gk-slider-toggle{ flex:0 0 auto; width:30px; height:30px; padding:0; cursor:pointer; border-radius:50%;
  border:1px solid var(--gk-border); background:var(--gk-surface); color:var(--gk-heading);
  display:grid; place-items:center; transition:border-color .15s,color .15s; }
.gk-slider-toggle:hover{ border-color:var(--gk-accent); color:var(--gk-accent); }
/* Icon rein geometrisch (keine Font-/Zeichensatz-Abhängigkeit): Pause = zwei Balken, Play = Dreieck */
.gk-slider-toggle i{ display:block; width:8px; height:10px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.gk-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; }
.gk-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. */
.gk-dot{ width:24px; height:24px; padding:0; border:none; background:transparent; cursor:pointer; position:relative; }
.gk-dot::after{ content:""; position:absolute; inset:7px; border-radius:50%;
  background:var(--gk-border); border:1px solid var(--gk-border); transition:background .15s; }
.gk-dot.is-active::after{ background:var(--gk-accent); border-color:var(--gk-accent); }
@media(max-width:600px){ .gk-slider{ padding:0; } .gk-slider-nav{ display:none; } .gk-action{ min-height:280px; } }

/* Kategorie-Kacheln */
.gk-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. */
.gk-cat-blog .gk-tiles:has(> :last-child:nth-child(-n+2)){
  grid-template-columns:repeat(auto-fit,minmax(0,380px)); justify-content:center; }
@media(max-width:900px){ .gk-tiles{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .gk-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){ .gk-cats .gk-tiles{ grid-template-columns:repeat(4,1fr); } }
.gk-tile{ display:block; text-decoration:none !important; border:1px solid var(--gk-border);
  border-radius:var(--gk-radius); overflow:hidden; background:var(--gk-bg); transition:border-color .15s; }
.gk-tile:hover{ border-color:var(--gk-accent); }   /* statt Anheben nur die Kante betonen */
.gk-tile-ph{ display:block; aspect-ratio:16/10; background:var(--gk-surface-2) center/cover no-repeat; }
.gk-tile-label{ display:block; padding:.9rem 1rem; font-weight:600; color:var(--gk-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). */
.gk-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){ .gk-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. */
  .gk-steps > li:last-child:nth-child(odd){ grid-column:1 / -1; } }
@media(max-width:1149px){ .gk-steps{ grid-template-columns:1fr; gap:1.2rem; } }
/* Kein Kasten-Look: nur eine feine Trennlinie oben, wie eine Spalte im Katalog. */
.gk-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. */
.gk-step-t{ text-wrap:balance; }
@supports (grid-template-rows: subgrid){
  .gk-steps{ grid-template-rows:auto auto 1fr; }
  .gk-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. */
  .gk-steps li .gk-step-n{ margin:0 0 .9rem; }
  .gk-steps li .gk-step-t{ align-self:start; margin:0 0 .5rem; }
  .gk-steps li .gk-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){
  .gk-steps{ grid-template-rows:none; }
  .gk-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. */
.gk-steps li{ container-type:inline-size; }
.gk-step-d{ max-width:520px; margin-left:auto; margin-right:auto; }
.gk-br-breit{ display:none; }
@container (min-width:470px){ .gk-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. */
  .gk-steps li .gk-step-t{ font-size:var(--gk-fs-sm); }
  .gk-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(--gk-border); }
}
/* Ziffer oben in einem feinen Kreis (nicht gefüllt — bleibt zurückhaltend),
   das Symbol steht vor dem Schritt-Titel. */
/* Schrift in --gk-accent-2, Kreislinie im helleren --gk-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. */
.gk-step-n{ display:grid; place-items:center; height:2.9rem; width:2.9rem; border-radius:50%;
  background:none; border:1px solid var(--gk-accent); color:var(--gk-accent-2);
  font-family:"Playfair Display",Georgia,serif; font-size:var(--gk-fs-lg); line-height:1; font-weight:600;
  margin:0 0 .9rem; }
.gk-step-t{ display:flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700;
  color:var(--gk-heading); font-size:var(--gk-fs-base); line-height:1.3; }

.gk-step-d{ display:block; color:var(--gk-muted); font-size:var(--gk-fs-sm); line-height:1.55; }
.gk-steps-sec .gk-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. */
.gk-steps-sec > .gk-container > .gk-steps,
.gk-cat-cta > .gk-container > .gk-steps{ max-width:580px; }
@media(min-width:1150px){
  .gk-steps-sec > .gk-container > .gk-steps,
  .gk-cat-cta > .gk-container > .gk-steps{ max-width:1180px; }
}
@media(min-width:2320px){
  .gk-steps-sec > .gk-container > .gk-steps,
  .gk-cat-cta > .gk-container > .gk-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. */
.gk-steps-sec > .gk-container,
.gk-cat-cta > .gk-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. */
.gk-step-d{ text-wrap:balance; }

/* ---------- Ankaufsprozess: Schritte im Detail ---------- */
/* Als gesetzte Liste mit Trennlinien statt gestapelter Kästen */
.gk-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). */
.gk-detail{ background:var(--gk-surface); border:1px solid var(--gk-border);
  border-radius:var(--gk-radius); overflow:hidden; }
.gk-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; }
.gk-detail > summary::-webkit-details-marker{ display:none; }
.gk-detail > summary::after{ content:""; width:11px; height:11px; margin-right:.3rem;
  border-right:1.5px solid var(--gk-accent); border-bottom:1.5px solid var(--gk-accent);
  transform:translateY(-30%) rotate(45deg); transition:transform .15s; }
.gk-detail[open] > summary::after{ transform:translateY(20%) rotate(225deg); }
.gk-detail > summary h3{ margin:0; font-size:var(--gk-fs-md); }
.gk-detail-body{ padding:0 1.6rem 1.5rem; }
.gk-detail-body > *:first-child{ margin-top:0; }

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

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

/* Zentrierte Fassung des Einstiegsblocks (Sektion traegt zusaetzlich
   `gk-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. */
.gk-einstieg-sec.gk-section--mitte > .gk-container > p,
.gk-einstieg-sec.gk-section--mitte > .gk-container > .gk-auftakt,
.gk-einstieg-sec.gk-section--mitte > .gk-container > .gk-statement{
  max-width:900px; text-wrap:balance; }
.gk-einstieg-sec.gk-section--mitte > .gk-container > .gk-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. */
.gk-einstieg-sec > .gk-container > p,
.gk-einstieg-sec .gk-schluss p{ padding-bottom:0 !important; }
.gk-einstieg-sec > .gk-container > p{ margin-bottom:1.15rem; }
.gk-einstieg-sec > .gk-container > .gk-auftakt{ margin-bottom:1.6rem; }
.gk-einstieg-sec > .gk-container > .gk-einstieg-titel{ margin-bottom:.7rem !important; }
.gk-einstieg-sec > .gk-container > .gk-fragen{ margin-bottom:1.9rem !important; }
.gk-einstieg-sec > .gk-container > .gk-statement{ margin-top:2rem; margin-bottom:0; }
.gk-einstieg-sec > .gk-container > .gk-schluss{ margin-top:1.6rem; }
.gk-einstieg-sec .gk-schluss p{ margin-bottom:.9rem; }

/* Auftakt: der Eroeffnungssatz traegt dieselbe Typografie wie die Zusage am
   Ende der Sektion (Serife, --gk-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. */
.gk-auftakt{ margin:0 auto 2.2rem; max-width:900px;
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:var(--gk-fs-lg); line-height:1.45; color:var(--gk-heading);
  text-align:left !important; }

/* Die Ueberleitung zu den Fragen bleibt beim Absatz, zu dem sie gehoert. */
.gk-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. */
.gk-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; }
.gk-fragen li{ margin:0 !important;
  padding:.6rem 1rem; background:var(--gk-bg);
  border:1px solid var(--gk-border); border-radius:var(--gk-radius);
  font-size:var(--gk-fs-sm); line-height:1.5; color:var(--gk-heading); }
.gk-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){
  .gk-fragen{ max-width:900px !important; }
}
/* Auf schmalen Displays passt ohnehin nur noch ein Feld je Zeile. Dann traegt
   die Begruendung oben nicht mehr: Fuenf verschieden breite, mittig gesetzte
   Kaesten untereinander sind keine „Reihe von Auszeichnungen", sondern eine
   Treppe — im unabhaengigen Besuchertest vom 10.09.2026 genau so benannt.
   Gleich breite Felder mit weiterhin mittigem Text bleiben auf der
   Mittelachse der Sektion und lesen sich als saubere Liste. */
@media(max-width:620px){
  .gk-fragen li{ flex:1 1 100%; text-align:center; }
}

/* 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. */
.gk-statement{ margin:2.6rem auto 0; max-width:820px;
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:var(--gk-fs-lg); line-height:1.4; color:var(--gk-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. */
.gk-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){ .gk-teaser-box{ grid-template-columns:1fr; gap:1.6rem; padding:2rem .2rem; } }
.gk-teaser-box h2{ text-align:left !important; margin:0 0 .6rem !important; }
.gk-teaser-box p{ margin:0 0 .5rem; color:var(--gk-muted); }
.gk-teaser-cta{ display:flex; flex-direction:column; gap:.8rem; }
.gk-teaser-cta .gk-btn{ text-align:center; }
.gk-contact-list{ list-style:none; margin:.2rem 0 0; padding:0; }
.gk-contact-list li{ margin:.45rem 0; display:flex; gap:.6rem; align-items:baseline; }
.gk-contact-list .gk-cl-label{ flex:0 0 5.2rem; color:var(--gk-muted); font-size:var(--gk-fs-sm); }
.gk-contact-list a{ color:var(--gk-accent); text-decoration:underline; text-underline-offset:2px; font-weight:600; }

/* Trust */
.gk-trust{ color:var(--gk-ink-text); text-align:center; }
.gk-trust .gk-muted{ color:var(--gk-ink-muted); }
.gk-trust a{ color:var(--gk-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. */
.gk-trust p a, .gk-legalnote a, .gk-legal p a, .gk-legal li a, .gk-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. */
.gk-page p a:not(.gk-btn){ color:var(--gk-accent); }
.gk-hero p a:not(.gk-btn), .gk-trust p a:not(.gk-btn),
.gk-action p a:not(.gk-btn){ color:var(--gk-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. */
.gk-legal{ max-width:none; margin:0 auto; }
.gk-legal h1,.gk-legal h2,.gk-legal h3{ color:var(--gk-heading); }
.gk-legal h2{ font-size:var(--gk-fs-h3); margin:1.8rem 0 .5rem; }
.gk-legal p{ margin:0 0 1rem; }
.gk-legal ul{ margin:0 0 1.1rem 1.2rem; } .gk-legal li{ margin:.35rem 0; }
.gk-legal a{ color:var(--gk-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 .gk-container. */
.gk-cat-blog .gk-muted{ text-align:center; }
/* Artikel-Kacheln (Sektion 2) */
.gk-tile-img{ display:block; aspect-ratio:16/10; background:var(--gk-border) center/cover no-repeat; }
.gk-tile-body{ display:block; padding:.9rem 1.1rem 1.2rem; }
.gk-tile-exc{ display:block; margin-top:.4rem; font-size:var(--gk-fs-sm); line-height:1.55; color:var(--gk-muted); font-weight:400; }
/* CTA-Sektion */
.gk-cat-cta .gk-steps{ margin-bottom:1.8rem; }
/* FAQ-Akkordeon: <details>/<summary> ist ohne JavaScript tastaturbedienbar */
/* Zeilen mit Trennlinie statt einzelner Kästen */
/* Die Fragen standen als lose Bloecke untereinander - ohne Rand, ohne
   Linie, nur durch einen halben Zeilenabstand getrennt. Wo mehrere
   zugeklappt sind, verschwimmt das zu einer Liste ohne Gliederung.
   Eine Haarlinie je Frage (die letzte ohne) gibt dem Akkordeon Struktur,
   ohne Kaesten einzufuehren (Vorgabe 08.09.2026). */
/* ---------------------------------------------------------------------
   THEMEN-LEISTE  (Blog-Uebersicht und Kategorie-Archive, 08.09.2026)
   Bis dahin fuehrte auf die acht Kategorie-Archive kein einziger interner
   Link. Die Leiste ist ihr Zugang - und im Archiv zugleich der Weg zu den
   Nachbarthemen. Die Zahl dahinter sagt, wie viele Beitraege dort liegen;
   ohne sie wirken die Chips wie leere Etiketten.
   --------------------------------------------------------------------- */
.gk-chips{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:0 0 2.4rem; }
.gk-chip{ display:inline-flex; align-items:center; gap:.4rem; min-height:2.2rem;
  padding:.4rem .95rem; border:1px solid var(--gk-border); border-radius:999px;
  background:var(--gk-surface); color:var(--gk-text) !important;
  font-size:var(--gk-fs-sm); font-weight:600; text-decoration:none !important;
  transition:background .15s, border-color .15s, color .15s; }
.gk-chip span{ color:var(--gk-muted); font-weight:400; font-size:var(--gk-fs-xs); }
.gk-chip:hover{ border-color:var(--gk-accent); color:var(--gk-accent) !important; }
.gk-chip.is-active{ background:var(--gk-btn-bg); border-color:var(--gk-btn-bg);
  color:var(--gk-btn-fg) !important; }
.gk-chip.is-active span{ color:var(--gk-btn-fg); opacity:.75; }

/* ---------------------------------------------------------------------
   BLAETTERUNG  (Blog-Uebersicht, Archive)
   --------------------------------------------------------------------- */
.gk-section .pagination, .gk-section .navigation.pagination{ margin-top:2.6rem; }
.gk-section .nav-links{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center; }
.gk-section .nav-links .page-numbers{ display:inline-flex; align-items:center; justify-content:center;
  min-width:2.6rem; min-height:2.6rem; padding:.35rem .8rem; border:1px solid var(--gk-border);
  border-radius:var(--gk-radius); color:var(--gk-text); text-decoration:none; font-size:var(--gk-fs-sm); }
.gk-section .nav-links .page-numbers:hover{ border-color:var(--gk-accent); color:var(--gk-accent); }
.gk-section .nav-links .page-numbers.current{ background:var(--gk-btn-bg); border-color:var(--gk-btn-bg);
  color:var(--gk-btn-fg); }
.gk-section .nav-links .page-numbers.dots{ border-color:transparent; }
.gk-section .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap; }
.gk-faq-item{ max-width:none; margin:0 auto; background:transparent;
  border:none; border-bottom:1px solid var(--gk-border); border-radius:0; overflow:hidden; }
.gk-faq-item:last-of-type{ border-bottom:none; }

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

/* =====================================================================
   ANKAUFSFORMULAR
   ===================================================================== */
.gk-form{ max-width:760px; margin:0 auto; }
.gk-field{ margin:0 0 1.15rem; }
.gk-field label{ display:block; font-weight:600; color:var(--gk-heading); margin:0 0 .35rem; }
.gk-field input, .gk-field select, .gk-field textarea{
  width:100%; padding:.7em .85em; font:inherit; color:var(--gk-text); background:var(--gk-surface);
  border:1px solid var(--gk-border); border-radius:var(--gk-radius); }
.gk-field textarea{ resize:vertical; min-height:9rem; }
.gk-field input:focus, .gk-field select:focus, .gk-field textarea:focus{ border-color:var(--gk-accent); }
.gk-hint{ margin:.35rem 0 0; font-size:var(--gk-fs-xs); color:var(--gk-muted); }
.gk-req{ color:var(--gk-accent); }
.gk-field.is-error input, .gk-field.is-error select, .gk-field.is-error textarea{ border-color:#a3282f; background:#fdf7f7; }
.gk-form-error{ border:1px solid #c9a2a4; background:#fdf3f3; padding:.9rem 1.1rem; border-radius:var(--gk-radius); margin:0 0 1.4rem; }
.gk-form-ok{ border:none; background:var(--gk-bg); border-radius:var(--gk-radius);
  padding:2rem 2.2rem; max-width:760px; margin:0 auto; }
.gk-form-ok h2{ margin:0 0 .5rem; }
.gk-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. */
.gk-check label{ display:flex; align-items:flex-start; gap:.7rem; font-weight:400; line-height:1.5; }
.gk-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(--gk-surface); border:2px solid var(--gk-muted) !important; border-radius:var(--gk-radius); }
.gk-check input[type=checkbox]:checked{ background:var(--gk-accent); border-color:var(--gk-accent) !important; }
.gk-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); }
.gk-check.is-error input[type=checkbox]{ border-color:#a3282f !important; }
.gk-check a{ color:var(--gk-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(--gk-surface-2); }
/* Auf dem Sandton reicht --gk-accent als TEXTfarbe nicht (3,9-4,1:1 statt 4,5:1).
   Fuer Schrift gilt im Header deshalb der dunklere --gk-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 .gk-container. */
#main-header .container{ max-width:var(--gk-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 --gk-heading, die Endung in --gk-accent-2. Bewusst NICHT
   --gk-accent — der hält auf dem Sandton des Headers keine 4,5:1 (nur 3,9-4,1). */
#main-header .gk-brand{ display:flex !important; align-items:center; gap:.6rem;
  text-decoration:none !important; line-height:1; }
#main-header .gk-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 .gk-brand-text{ font-family:"Playfair Display",Georgia,serif;
  font-size:var(--gk-fs-lg); font-weight:700; letter-spacing:.005em; white-space:nowrap;
  color:var(--gk-heading); }
#main-header .gk-brand-tld{ color:var(--gk-accent-2); }
#main-header .gk-brand:hover .gk-brand-text{ color:var(--gk-accent-2); }
/* Hamburger-Icon einheitlich im AM-Gold (alle Breiten) */
#main-header .mobile_menu_bar:before{ color:var(--gk-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(--gk-fs-nav) !important; letter-spacing:.07em; text-transform:uppercase; font-weight:600;
    color:var(--gk-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(--gk-accent-2) !important; }
  #top-menu > li > a::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px;
    background:var(--gk-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(--gk-accent-2) !important; }
  /* CTA-Button einheitlich am Ende */
  #top-menu li.gk-cta-menu{ margin-left:.7em; }
  /* Auf dem dunklen Kopf traegt der Knopf dieselbe Flaeche wie der Kopf; erst
     Bis zum 08.09.2026 loeste ein goldener 1,5-px-Rand das; jetzt traegt er
     - wie alle Knoepfe auf dunklem Grund - die goldene Flaeche selbst. */
  #top-menu > li.gk-cta-menu > a{ background:var(--gk-btn-fg); color:var(--gk-btn-bg) !important; border-radius:var(--gk-radius);
    padding:.72em 1.25em !important; border:1.5px solid transparent; white-space:nowrap; }
  #top-menu > li.gk-cta-menu > a::after{ display:none !important; }
  #top-menu > li.gk-cta-menu > a:hover{ background:transparent; color:var(--gk-btn-fg) !important; border-color:var(--gk-btn-fg); }

  /* ---- 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(--gk-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(--gk-surface) !important; border:none; border-top:2px solid var(--gk-accent);
    box-shadow:0 10px 28px rgba(0,0,0,.10); border-radius:0 0 var(--gk-radius) var(--gk-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(--gk-fs-nav) !important; font-weight:600;
    text-transform:none; letter-spacing:.02em; color:var(--gk-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(--gk-bg); color:var(--gk-accent) !important; opacity:1; }
  #top-menu ul.sub-menu li.current-menu-item a{ color:var(--gk-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:1199px){
  #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 .gk-brand{ gap:.45rem; }
  #main-header .gk-brand-mark{ height:36px !important; max-height:36px !important; }
  #main-header .gk-brand-text{ font-size:var(--gk-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:1199px){
  #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(--gk-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(--gk-border); border-top:3px solid var(--gk-accent);
  border-radius:0 0 var(--gk-radius) var(--gk-radius);
  background:var(--gk-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(--gk-heading) !important; font-size:var(--gk-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(--gk-bg); color:var(--gk-accent) !important; opacity:1; }
#main-header #mobile_menu li.current-menu-item a{ color:var(--gk-accent) !important; }
/* CTA-Punkt im Dropdown als echter Button, abgesetzt vom Rest */
#main-header #mobile_menu li.gk-cta-menu{ margin:.55rem 1rem .35rem; }
#main-header #mobile_menu li.gk-cta-menu a{
  background:var(--gk-btn-fg); color:var(--gk-btn-bg) !important; border:1.5px solid transparent;
  border-radius:var(--gk-radius); text-align:center; padding:.85rem 1.2rem !important; }
#main-header #mobile_menu li.gk-cta-menu a:hover{ background:transparent; color:var(--gk-btn-fg) !important; border-color:var(--gk-btn-fg); }

/* =====================================================================
   FOOTER (AM)  – ersetzt den alten Divi-Footer
   ===================================================================== */
#main-footer{ display:none !important; }
.gk-footer{ background:var(--gk-ink); color:var(--gk-ink-text); padding:clamp(2.5rem,6vw,4rem) 0 0; margin-top:0; }
.gk-footer a{ color:var(--gk-ink-link); text-decoration:none; }
.gk-footer a:hover{ text-decoration:underline; }
.gk-footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2rem; }
@media(max-width:900px){ .gk-footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .gk-footer-grid{ grid-template-columns:1fr; } }
/* Spaltenueberschriften sind h3. Bis 08.09.2026 waren es h2 — die Begruendung
   war, ein Sprung von h2 auf h4 loese „heading-order invalid" aus. Das stimmt,
   trifft h3 aber nicht: h3 folgt luecken los auf die h2 des Inhalts. Als h2
   standen „ANKAUF", „RECHTLICHES" und „ETWAS ZU VERKAUFEN?" dagegen auf jeder
   Seite gleichrangig neben den echten Inhaltsueberschriften (Befund C9). */
.gk-footer h3{ color:var(--gk-ink-text); font-size:var(--gk-fs-sm); text-transform:uppercase; letter-spacing:.07em; margin:0 0 .9rem;
  font-family:"Open Sans",Helvetica,Arial,sans-serif; font-weight:700; }
.gk-footer ul{ list-style:none; margin:0; padding:0; } .gk-footer li{ margin:.4rem 0; }
/* Zweite Ueberschrift innerhalb derselben Spalte („Schwesterseiten" unter
   „Rechtliches"): .gk-footer h3 setzt margin:0 0 .9rem, also keinen Abstand
   nach OBEN — die Ueberschrift klebte damit unmittelbar am letzten Link der
   Liste darueber und las sich wie deren Fortsetzung (Besuchertest
   10.09.2026). Alle uebrigen Spaltenueberschriften stehen am Spaltenanfang
   und sind davon nicht betroffen. */
.gk-footer ul + h3{ margin-top:1.7rem; }
/* WCAG 2.2 (2.5.8 Target Size, Minimum) verlangt 24x24 px Trefferflaeche.
   Die Footer-Links waren 17–18 px hoch — die reine Zeilenhoehe. Ein
   inline-block mit 4 px Polsterung oben und unten bringt sie auf 26 px,
   ohne dass sich am Erscheinungsbild etwas aendert (Befund F). */
.gk-footer li a, .gk-fcontact a{ display:inline-block; padding:.25rem 0; }
.gk-flogo{ font-size:var(--gk-fs-lg); font-weight:700; color:#fff; margin-bottom:.55rem; }
.gk-flogo span{ color:var(--gk-ink-accent); }  /* Footer ist dunkel -> ink-Akzent */
.gk-footer .gk-muted{ color:var(--gk-ink-muted); }
/* ---- Fusszeile: Markenkopf und Kontaktspalte (08.09.2026) ----
   Das freigestellte Zeichen steht links neben Wortmarke und Claim, in
   derselben Anordnung wie im Seitenkopf. Auf schmalen Spalten (Raster
   bricht bei 900 px auf zwei, bei 560 px auf eine Spalte um) bleibt die
   Zeile bestehen — sie ist schmal genug. */
.gk-fbrand-kopf{ display:flex; align-items:center; gap:.85rem; margin-bottom:.9rem; }
.gk-fmark{ width:56px; height:auto; flex:0 0 auto; }
.gk-fbrand-kopf .gk-flogo{ margin-bottom:.15rem; }
.gk-fbrand-kopf .gk-fclaim{ margin:0; }

.gk-fcontact{ margin-top:.8rem; }
/* Kontaktzeilen in der vierten Spalte: Symbol und Angabe auf einer Linie. */
.gk-fcta .gk-fcontact li{ display:flex; align-items:center; gap:.55rem; }
.gk-fcta .gk-fcontact .gk-ico{ color:var(--gk-ink-accent); }
/* Der Knopf braucht Abstand nach oben, sonst klebt er an der letzten
   Kontaktzeile und wirkt wie deren Fortsetzung (Vorgabe 08.09.2026). */
.gk-fcta-btn{ margin-top:1.5rem; }
.gk-footer .gk-ph{ color:var(--gk-ink-muted); font-style:italic; }  /* Platzhalter statt funktionslosem Link */
.gk-footer-bottom{ border-top:none; margin-top:2.2rem; padding:.6rem 0 1.4rem; }
.gk-footer-bottom .gk-container{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--gk-ink-muted); }
.gk-footer-bottom p{ margin:0; }

/* =====================================================================
   STICKY FOOTER  – Footer bleibt bei wenig Inhalt am unteren Rand
   (body = Flex-Spalte; #page-container wächst, .gk-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 > .gk-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".
   ===================================================================== */
.gk-ico{ display:inline-block; width:1.5rem; height:1.5rem; flex:0 0 auto;
  background-color:currentColor; vertical-align:middle;
  -webkit-mask:var(--gk-i) center/contain no-repeat; mask:var(--gk-i) center/contain no-repeat; }
.gk-ico--lg{ width:2.1rem; height:2.1rem; }
.gk-ico--sm{ width:1.05rem; height:1.05rem; }
.gk-ico--md{ width:1.7rem; height:1.7rem; }
.gk-ico--mail{ --gk-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"); }
.gk-ico--lupe{ --gk-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"); }
.gk-ico--auge{ --gk-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"); }
.gk-ico--muenze{ --gk-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"); }
.gk-ico--waage{ --gk-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"); }
.gk-ico--schloss{ --gk-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"); }
.gk-ico--schild{ --gk-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"); }
.gk-ico--telefon{ --gk-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"); }
.gk-ico--whatsapp{ --gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 00-8.6 15L2 22l5.2-1.4A10 10 0 1012 2zm0 1.8a8.2 8.2 0 016.6 13.1 8.2 8.2 0 01-10.4 2.3l-.4-.2-3 .8.8-2.9-.2-.4A8.2 8.2 0 0112 3.8zm-3.5 4c-.2 0-.5.1-.7.4-.2.3-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.6 2.6 4 3.5 1.9.8 2.3.6 2.8.6.4 0 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1l-.6-.3c-.2-.1-1.2-.6-1.4-.7-.2-.1-.4-.1-.5.1l-.7.9c-.1.2-.3.2-.5.1-.2-.1-1-.4-1.8-1.2-.7-.6-1.1-1.4-1.3-1.6-.1-.2 0-.4.1-.5l.4-.5.3-.5v-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5z'/%3E%3C/svg%3E"); }
.gk-ico--orden{ --gk-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"); }
.gk-ico--uniform{ --gk-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"); }
.gk-ico--dokument{ --gk-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"); }
.gk-ico--helm{ --gk-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"); }
.gk-ico--kiste{ --gk-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"); }
.gk-ico--stern{ --gk-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 */
.gk-contact-list .gk-ico{ color:var(--gk-accent); margin-right:.1rem; }
.gk-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.
   ===================================================================== */
.gk-ph-tag{ display:inline-block; font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--gk-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:var(--gk-radius); vertical-align:middle; }
.gk-ph-text{ font-style:italic; color:var(--gk-muted); }
/* Label vor einer Überschrift: eigene Zeile, damit die Typografie ruhig bleibt */
.gk-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. */
.gk-tile--ph .gk-tile-ph,
.gk-tile--ph .gk-tile-img{ position:relative; }
.gk-tile--ph .gk-tile-ph::after,
.gk-tile--ph .gk-tile-img::after{ content:"Platzhalter-Bild"; position:absolute; left:8px; bottom:8px;
  font-family:"Open Sans",Arial,sans-serif; font-size:var(--gk-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:var(--gk-radius); }
.gk-tile--ph .gk-tile-label{ color:var(--gk-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.
   ===================================================================== */
.gk-ph-img{ position:relative; }
.gk-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; }
.gk-ph-img > *{ position:relative; z-index:1; }
.gk-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(--gk-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:var(--gk-radius); pointer-events:none; }
/* Hero bekommt zusätzlich eine dezente Tiefenstruktur */
/* Hero mit Platzhalter-Motiv: Bild abgedunkelt, damit die Schrift lesbar bleibt */
.gk-hero.gk-ph-img{ background-position:center; background-size:cover; background-repeat:no-repeat; }
.gk-hero.gk-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 */
.gk-action--nobg.gk-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 .gk-lead ist auf die
   dunklen Hero-Flaechen abgestimmt (heller Text, zentriert). */
.gk-lead-text{ font-size:var(--gk-fs-lead); line-height:1.6; color:var(--gk-text);
  margin:0 0 1.1rem; }


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

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

/* =====================================================================
   SCHWEBENDE KONTAKTLEISTE  (.gk-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.
   ===================================================================== */
.gk-quickbar{ position:fixed; right:0; bottom:132px; z-index:9998;
  display:flex; flex-direction:column; gap:1px;
  font-family:"Open Sans",Arial,sans-serif; }
.gk-quickbar-item{ display:flex; align-items:center; gap:.55rem;
  min-height:48px; padding:.6rem .9rem;
  text-decoration:none !important; font-size:var(--gk-fs-xs); font-weight:600; line-height:1.15;
  border:1px solid var(--gk-btn-bg); border-right:none; border-radius:var(--gk-radius) 0 0 var(--gk-radius);
  transition:background .15s; }
.gk-quickbar-tel{ background:var(--gk-surface); color:var(--gk-accent) !important; }
.gk-quickbar-tel:hover{ background:var(--gk-surface-2); color:var(--gk-accent-2) !important; }
.gk-quickbar-wa{ background:var(--gk-surface); color:var(--gk-accent) !important; }
.gk-quickbar-wa:hover{ background:var(--gk-surface-2); color:var(--gk-accent-2) !important; }
.gk-quickbar-cta{ background:var(--gk-btn-bg); color:var(--gk-btn-fg) !important; }
.gk-quickbar-cta:hover{ background:var(--gk-btn-fg); color:var(--gk-btn-bg) !important; }
.gk-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 1729 px.
   Die rechte Leiste ist rund 165 px breit. Die Schwelle stand bis zum
   08.09.2026 auf 1280 px — gerechnet gegen den SATZSPIEGEL von 900 px:
   900 + 2x165 = 1230 px. Das war zu kurz gegriffen. Die dreispaltigen Raster
   (Kategorie-Archive, Wissenswertes-Bloecke) fuellen nicht den Satzspiegel,
   sondern den ganzen Container von 1400 px. Der ist erst ab
   1400 + 2x165 = 1730 px frei. Bei 1440 px — einer der haeufigsten
   Fensterbreiten ueberhaupt — lag die Leiste deshalb ueber der dritten
   Kachel der Kategorie-Archive (Befund B3). Unterhalb von 1730 px steht sie
   jetzt unten ueber die volle Breite — dieselbe Darstellung wie auf dem
   Telefon, die nachweislich nichts verdeckt. */
@media(max-width:1729px){
  .gk-quickbar{ right:0; left:0; bottom:0; flex-direction:row; gap:0; }
  .gk-quickbar-item{ flex:1 1 33.333%; justify-content:center; min-height:52px;
    border:none; border-top:1px solid var(--gk-accent-2); border-radius:0; }
  .gk-quickbar-tel, .gk-quickbar-wa{ border-right:1px solid var(--gk-accent-2); }
  .gk-quickbar-sub{ display:none; }
  /* „Ankauf anfragen" brach als einzige der drei Beschriftungen zweizeilig um
     und liess das Feld hoeher wirken als seine Nachbarn (Besuchertest
     10.09.2026). Die drei Felder teilen sich exakt ein Drittel; auf 390 px
     sind das rund 130 px abzueglich Symbol und Innenabstand. Statt die
     Beschriftung zu kuerzen, wird sie einzeilig erzwungen und die Schrift auf
     sehr schmalen Displays leicht verkleinert — die Leiste bleibt damit auf
     allen drei Feldern gleich hoch. */
  .gk-quickbar-txt{ white-space:nowrap; }
  /* 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 frueheren 40 px Zugabe galten dem Design-Umschalter; der ist am
     08.09.2026 entfallen (Befund A5), der Ausgleich damit auch. */
  .gk-footer-bottom{ padding-bottom:calc(1.4rem + 52px); }
  /* Die beiden anderen schwebenden Elemente daruebersetzen */
  .brlbs-cmpnt-widget{ bottom:60px !important; }
}
/* Sehr schmale Geraete: 130 px je Feld tragen „Ankauf anfragen" nur, wenn
   Symbolabstand und Innenabstand mitschrumpfen. */
@media(max-width:400px){
  .gk-quickbar-item{ gap:.35rem; padding:.6rem .5rem; font-size:.74rem; }
}
@media print{ .gk-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(--gk-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 ---------- */
.gk-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 .gk-ph-img ist ::after bereits das
   „Platzhalter-Bild"-Etikett, und die Abdunklung kommt dort aus der
   vorhandenen .gk-hero.gk-ph-img::before-Regel. */
.gk-post-hero:not(.gk-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.). */
.gk-post-hero > .gk-container{ position:relative; z-index:2; max-width:900px; }
.gk-post-hero h1{ margin:.1em 0 .5em; }
.gk-post-hero .gk-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". */
.gk-hero-cat{ display:inline-block; text-decoration:none !important;
  font-size:var(--gk-fs-label-sm); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gk-accent-ink) !important; background:var(--gk-accent);
  padding:.35em .7em; border-radius:var(--gk-radius); }
.gk-hero-cat:hover{ background:var(--gk-accent-2); }
/* Spezifitaet ueber .gk-post-hero: die allgemeine .gk-post-meta-Regel steht
   weiter unten und wuerde die dunkle Textfarbe sonst zurueckholen — auf dem
   abgedunkelten Bild waere das Datum kaum lesbar. */
.gk-post-hero .gk-post-meta,
.gk-post-hero .gk-post-meta time{ justify-content:center; margin:0; color:var(--gk-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. */
.gk-post-hero--aktion{ background-color:var(--gk-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.) */
.gk-post-hero--aktion::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--gk-hero-img); background-size:cover; background-position:center;
  opacity:.85; filter:grayscale(1) brightness(.62) contrast(1.1); mix-blend-mode:luminosity; }
.gk-post-hero--aktion::after{ content:none; }   /* kein zusaetzliches Dunkel-Overlay */
/* Etikett invertiert: helle Flaeche auf dem farbigen Grund */
.gk-post-hero--aktion .gk-post-flag{ background:#fff; color:var(--gk-accent-2); }
.gk-post-hero--aktion .gk-post-meta,
.gk-post-hero--aktion .gk-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; }
.gk-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(--gk-fs-xs); color:var(--gk-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. */
.gk-post-body{ max-width:1150px; margin-left:auto; margin-right:auto; }
.gk-post-cat{ color:var(--gk-accent) !important; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none !important; }
.gk-post-cat:hover{ text-decoration:underline !important; }
.gk-post-flag{ display:inline-block; font-size:var(--gk-fs-label-sm); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gk-accent-ink); background:var(--gk-accent);
  padding:.25em .6em; border-radius:var(--gk-radius); }
.gk-post-body{ font-size:var(--gk-fs-base); line-height:1.7; }
.gk-post-body h2{ font-size:var(--gk-fs-h2); margin:2rem 0 .8rem; }
.gk-post-body h3{ font-size:var(--gk-fs-md); margin:1.6rem 0 .6rem; }
.gk-post-body p{ margin:0 0 1.1rem; }
.gk-post-body a{ color:var(--gk-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. */
.gk-post-back{ max-width:1150px; margin:2.4rem auto 0; padding-top:0;
  text-align:center; font-family:"Open Sans",Arial,sans-serif; font-size:var(--gk-fs-sm); }
/* --gk-accent-2, nicht --gk-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). */
.gk-post-back a{ color:var(--gk-accent-2) !important; font-weight:600; text-decoration:none !important; }
.gk-post-back a:hover{ text-decoration:underline !important; }
/* Gleiche Flaeche, gleiches Problem: der Verweis unter dem Button. */
.gk-post-cta .gk-small a{ color:var(--gk-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(--gk-surface) !important; }

/* CTA und Rechtshinweis laufen ueber die volle Breite, nicht in der Textspalte */
.single-post .gk-post-cta{ background:var(--gk-surface-2); margin-top:0;
  padding-top:clamp(2rem,5vw,3rem); padding-bottom:clamp(2rem,5vw,3rem); }
.single-post .gk-post-cta h2{ text-align:center; margin:0 0 .6rem;
  font-size:var(--gk-fs-h2); }
.single-post .gk-post-cta > .gk-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 .gk-post-cta > .gk-container,
.single-post .gk-legalnote > .gk-container{ padding-left:clamp(16px,4vw,32px); padding-right:clamp(16px,4vw,32px); }
.single-post .gk-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). */
.gk-legalnote--dark{ background:var(--gk-ink); color:var(--gk-ink-text); }
/* Auf der Startseite schliesst er direkt an den ebenfalls dunklen
   Trust-Block an: dort kein doppelter Innenabstand. */
.home .gk-legalnote--dark{ padding-top:0; }
.gk-legalnote--dark p{ color:var(--gk-ink-muted); }
.gk-legalnote--dark a{ color:var(--gk-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 .gk-form--wizard, die das Skript
   setzt, macht daraus einen Ablauf mit einer sichtbaren Stufe.
   ===================================================================== */
.gk-step{ border:none; margin:0 0 1.6rem; padding:0; }
.gk-step legend{ display:flex; align-items:center; gap:.6rem; padding:0;
  font-family:"Playfair Display",Georgia,serif; font-size:var(--gk-fs-lg); color:var(--gk-heading); }
.gk-step legend:focus{ outline:none; }
.gk-step legend:focus-visible{ outline:3px solid var(--gk-focus); outline-offset:3px; }
/* Ziffer in Serife, wie die Ablauf-Schritte auf den anderen Seiten */
.gk-step-nr{ font-family:"Playfair Display",Georgia,serif; font-size:var(--gk-fs-base);
  width:1.9rem; height:1.9rem; flex:0 0 1.9rem; border:1px solid var(--gk-border);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--gk-accent-2); background:var(--gk-surface); }
.gk-step-intro{ margin:.5rem 0 1.2rem; }
.gk-form--wizard .gk-step[hidden]{ display:none; }
.gk-form--wizard .gk-step{ margin-bottom:0; }

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

.gk-step-nav{ display:flex; gap:.8rem; align-items:center; margin-top:1.4rem; }
.gk-step-nav .gk-step-back{ order:0; }
.gk-step-nav .gk-step-next{ order:1; margin-left:auto; }
/* Der Absende-Knopf steht in der letzten Stufe ueber der Navigation */
.gk-form--wizard .gk-step .gk-btn-lg{ margin-top:.4rem; }
/* =====================================================================
   ZUSAMMENFASSUNG IM LETZTEN SCHRITT  ·  10.09.2026 (Besuchertest)
   Kein Kasten mit eigener Farbe: Die Angaben sind eine Rueckschau, keine
   Warnung. Ein feiner Rahmen auf der Kartenflaeche genuegt, damit sie sich
   vom Formular darunter absetzt, ohne wie ein Hinweisfeld zu wirken.
   ===================================================================== */
.gk-summary{ border:1px solid var(--gk-border); border-radius:var(--gk-radius);
  padding:1.1rem 1.2rem; margin:0 0 1.6rem; }
.gk-summary__titel{ font-size:var(--gk-fs-label-sm); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gk-muted); margin:0 0 .8rem; }
.gk-summary__liste{ margin:0; display:grid; gap:.55rem .9rem; grid-template-columns:auto 1fr;
  align-items:baseline; }
.gk-summary__liste dt{ margin:0; font-size:var(--gk-fs-xs); color:var(--gk-muted); }
.gk-summary__liste dd{ margin:0; font-size:var(--gk-fs-xs); line-height:1.5; }
.gk-summary__liste dd.is-leer{ color:var(--gk-muted); font-style:italic; }
/* „Ändern" ist ein Knopf, soll aber wie ein Verweis lesen — und niemals die
   Zeile umbrechen, in der er steht. */
.gk-summary__aendern{ appearance:none; background:none; border:0; padding:0; margin-left:.55rem;
  font:inherit; color:var(--gk-accent-2); text-decoration:underline; cursor:pointer;
  white-space:nowrap; }
.gk-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. */
  .gk-summary__liste{ grid-template-columns:1fr; gap:.15rem; }
  .gk-summary__liste dd{ margin:0 0 .55rem; }
}
/* Begruendung unter einem Bestaetigungshaken — eingerueckt auf die Textspalte
   des Hakens (22 px Kaestchen + .7rem Abstand aus .gk-check label), damit sie
   nicht unter das Kaestchen rutscht. */
.gk-check-hint{ margin-left:calc(22px + .7rem); }

.gk-form-trust{ margin:2rem 0 0; padding-top:0; color:var(--gk-muted); }
/* Unterstrichen, nicht nur eingefaerbt: gegenueber dem gedaempften Fliesstext
   der Zeile traegt die Farbe allein nur 1,3:1 (WCAG 1.4.1). */
.gk-form-trust a{ color:var(--gk-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." */
.gk-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)); }
.gk-next-steps li{ counter-increment:amn; padding-top:0;
  list-style:none !important; }
.gk-next-steps li::marker{ content:""; }
.gk-next-steps li::before{ content:counter(amn); display:block;
  font-family:"Playfair Display",Georgia,serif; font-size:var(--gk-fs-md); color:var(--gk-accent-2); margin-bottom:.2rem; }
.gk-next-steps strong{ display:block; margin-bottom:.25rem; }
.gk-next-steps .gk-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. */
.gk-field-label{ display:block; font-weight:600; color:var(--gk-heading); margin:0 0 .35rem; }
/* 240 statt 190 px Mindestbreite (10.09.2026): Die sechs Objektgruppen tragen
   ganze Aufzählungen im Namen („Nachlässe bestehend aus Schmuck, Silberbestecken
   und Ähnlichem"). Bei 190 px passten drei Spalten in die Formularkarte und
   jedes Label brach vierzeilig um; mit 240 px stehen zwei nebeneinander. */
.gk-choices{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:.5rem 0 0; }
.gk-choice{ position:relative; display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1rem; border:1px solid var(--gk-border); border-radius:var(--gk-radius);
  background:var(--gk-surface); cursor:pointer; font-weight:400 !important;
  color:var(--gk-text); transition:border-color .15s, background .15s; }
.gk-choice input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.gk-choice-ico{ flex:0 0 auto; color:var(--gk-accent-2); display:flex; }
.gk-choice-txt{ line-height:1.3; }
.gk-choice:hover{ border-color:var(--gk-accent-2); background:var(--gk-bg); }
.gk-choice:focus-within{ outline:3px solid var(--gk-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). */
.gk-choice.is-checked, .gk-choice:has(input:checked){
  border-color:var(--gk-accent); background:var(--gk-surface-2); font-weight:600 !important; }
.gk-choice.is-checked::after, .gk-choice:has(input:checked)::after{
  content:""; position:absolute; right:.8rem; top:50%; width:.5rem; height:.9rem;
  border-right:2px solid var(--gk-accent-2); border-bottom:2px solid var(--gk-accent-2);
  transform:translateY(-60%) rotate(45deg); }
.gk-choice.is-checked .gk-choice-txt, .gk-choice:has(input:checked) .gk-choice-txt{ padding-right:1rem; }
.gk-field.is-error .gk-choices .gk-choice{ border-color:#a3282f; }
/* Auswahlkacheln mit Erläuterungszeile (10.09.2026, Schritt 1 des Formulars).
   Sie tragen ganze Sätze und stehen deshalb untereinander statt nebeneinander:
   Drei Spalten mit je vier Zeilen Text sind keine Kacheln mehr, sondern
   Textsäulen. Die Zeile muss ihr font-weight ausdrücklich zurücksetzen —
   .gk-choice.is-checked setzt 600 !important auf die ganze Kachel, sonst
   würde die Erläuterung beim Anklicken mitfetten. */
/* Spezifitätsfalle (gefunden am 10.09.2026): `.gk-field label` (0,1,1) schlägt
   `.gk-choice` (0,1,0). Die Kacheln standen deshalb auf display:block — Symbol
   über dem Text statt daneben —, und gap, align-items und flex-direction in
   .gk-choice waren toter Code. Mit der Elternklasse davor greift die Absicht.
   margin muss zurückgesetzt werden: .gk-field label bringt .35rem unten mit,
   was im Raster zum gap addiert würde. */
/* Erklärabsätze einer Stufe (nur der Fotoschritt hat welche). Der letzte
   braucht sichtbar mehr Luft, sonst klebt die Feldbeschriftung daran. */
.gk-step-mehr{ margin:0 0 .8rem; }
.gk-step-mehr:last-of-type{ margin-bottom:1.6rem; }
.gk-field .gk-choice{ display:flex; align-items:center; margin:0; }
.gk-field .gk-choice--sub{ align-items:flex-start; }
.gk-choices--sub{ grid-template-columns:1fr; }
.gk-choice--sub{ align-items:flex-start; }
.gk-choice--sub .gk-choice-ico{ margin-top:.15rem; }
.gk-choice-sub{ display:block; margin-top:.3rem; font-size:var(--gk-fs-sm);
  line-height:1.45; color:var(--gk-muted); font-weight:400 !important; }
.gk-choice.is-checked .gk-choice-sub,
.gk-choice:has(input:checked) .gk-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. */
.gk-input-kurz{ max-width:12rem; }
@media(max-width:520px){
  .gk-choices{ grid-template-columns:1fr; }
  .gk-choice{ padding:.75rem .9rem; }
}
/* Nur fuer Screenreader: sichtbar ausgeblendet, aber vorgelesen und fokussierbar */
.gk-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. */
.gk-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; }
.gk-form-card{ background:var(--gk-surface); border:1px solid var(--gk-border);
  border-radius:var(--gk-radius); padding:clamp(1.4rem,3vw,2.4rem); }
.gk-form-card .gk-form{ max-width:none; }

/* gap und padding-top der Folgeblöcke addierten sich zu 51 px Luft zwischen
   den drei Blöcken. Die Begleitspalte war dadurch 821 px lang gegen 689 px
   Formular. Jetzt trägt der gap die Trennung, der Innenabstand gibt nur noch
   einen Hauch dazu — die Überschriften trennen ohnehin sichtbar. */
.gk-form-side{ display:flex; flex-direction:column; gap:.75rem; }
.gk-side-block h2{ font-size:var(--gk-fs-md); margin:0 0 .45rem; }
.gk-side-list{ list-style:none !important; margin:0; padding:0 !important; display:grid; gap:.55rem; }
.gk-side-list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:var(--gk-fs-sm);
  line-height:1.5; list-style:none !important; }
.gk-side-list li::marker{ content:""; }
.gk-side-ico{ flex:0 0 auto; color:var(--gk-accent-2); margin-top:.1rem; display:flex; }
.gk-side-kontakt{ padding-top:.4rem; }
.gk-side-tel{ margin:.15rem 0 .1rem; font-size:var(--gk-fs-md); font-weight:600; }
.gk-side-tel a, .gk-side-kontakt a{ color:var(--gk-accent-2); text-decoration:none; }
.gk-side-tel a:hover, .gk-side-kontakt a:hover{ text-decoration:underline; }
.gk-side-person{ display:flex; gap:.9rem; align-items:flex-start;
  padding-top:.4rem; }
.gk-side-person img{ flex:0 0 82px; width:82px; height:102px; object-fit:cover;
  object-position:center top; border-radius:var(--gk-radius); }
.gk-side-person .gk-eyebrow{ display:block; font-size:var(--gk-fs-label-sm); margin-bottom:.2rem; color:var(--gk-accent-2); }
.gk-side-person strong{ display:block; font-family:"Playfair Display",Georgia,serif;
  font-size:var(--gk-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 .gk-side-person muss hier weg, weil das Bild
   direkt unter der Überschrift des Blocks steht und nicht unter einem
   Nachbarblock. */
.gk-side-inhaber{ padding-top:.4rem; }
.gk-side-inhaber .gk-side-person{ padding-top:0; margin-bottom:.7rem; }
.gk-side-inhaber p{ margin:0 0 .45rem; line-height:1.5; }
.gk-side-inhaber a{ color:var(--gk-accent-2); text-decoration:none; }
.gk-side-inhaber a:hover{ text-decoration:underline; }
/* Pflichtangaben als schmales Band unter dem Formular statt als Anhängsel der
   Begleitspalte: Untereinander machten sie die Spalte 1055 px lang gegen 689 px
   Formular. Dreispaltig unter der vollen Breite stehen dieselben Angaben auf
   einem Drittel der Höhe — und die Spalte endet wieder dort, wo das Formular
   endet. Gleiche Maximalbreite wie .gk-form-wrap, damit alles fluchtet. */
.gk-form-recht{ max-width:1120px; margin:2.4rem auto 0; padding-top:1.4rem;
  border-top:1px solid var(--gk-border); display:grid; gap:1.2rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.gk-form-recht p{ margin:0; font-size:var(--gk-fs-label); line-height:1.55; color:var(--gk-muted); }
.gk-recht-titel{ display:block; font-size:var(--gk-fs-label-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--gk-heading); margin-bottom:.3rem; }

@media(max-width:980px){
  /* Erst das Formular, die Begleitangaben darunter */
  .gk-form-wrap{ grid-template-columns:1fr; }
  .gk-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.
   ===================================================================== */
.gk-brand-stack{ display:flex; flex-direction:column; justify-content:center; gap:.15rem; }
#main-header .gk-brand-text{ line-height:1.05; }
.gk-brand-claim{ font-family:"Open Sans",Arial,sans-serif; font-size:var(--gk-fs-label-sm); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gk-muted); white-space:nowrap; }
@media(max-width:640px){   /* auf schmalen Displays braucht der Name den Platz allein */
  .gk-brand-claim{ display:none; }
}

/* =====================================================================
   BLOG · ARCHIV · SUCHE · 404
   Divis Standardausgabe dieser Ansichten entfaellt — der Inhalt kommt
   aus gk-base.php (Hero + Kacheln). Divis Bereich bleibt im Markup, wird
   aber nicht mehr angezeigt.

   body.blog kam am 10.09.2026 dazu (Besuchertest). Die Beitragsseite /blog/
   entstand erst am 08.09. als Befund A8; sie traegt die Body-Klasse `blog`,
   nicht `archive`, und fiel deshalb durch diese Regel hindurch. Folge: unter
   dem eigenen Kachelraster lief Divis Beitragsschleife noch einmal komplett
   durch — rund 7000 px unformatierte Zweitliste mit bildschirmfuellenden
   Fotos. Auf /blog/page/2/ ebenso (`blog paged`).
   ===================================================================== */
body.error404 #main-content .container,
body.search #main-content .container,
body.blog #main-content .container,
body.archive #main-content .container{ display:none !important; }
/* Schmalerer Hero: hier traegt kein Bild, nur Text */
.gk-hero--schmal{ padding:clamp(2.4rem,6vw,4rem) 0; }
.gk-hero--schmal .gk-lead{ margin-bottom:0; }
.gk-wege{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem; }
@media(max-width:560px){
  .gk-wege{ flex-direction:column; align-items:stretch; text-align:center; }
}
/* Einleitung ueber den drei Wegen (404 / leere Suche) */
.gk-wege-intro{ max-width:640px; margin:0 auto; }
.gk-wege-intro h2{ font-size:var(--gk-fs-h3); margin:0 0 .5rem; }
.gk-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 .gk-section:has(.gk-wege),
body.search #page-container .gk-section:has(.gk-wege){
  min-height:46vh; display:flex; align-items:center; }
body.error404 #page-container .gk-section:has(.gk-wege) > .gk-container,
body.search #page-container .gk-section:has(.gk-wege) > .gk-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.). */
.gk-cat-cta .gk-small a,
.gk-steps-sec .gk-small a,
.gk-legalnote:not(.gk-legalnote--dark) a{ color:var(--gk-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.
   --------------------------------------------------------------------------- */
.gk-fachlinks-intro{ margin:.2rem 0 0; color:var(--gk-muted); }

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

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

/* Die Verweise verlassen die Ankaufseite — das muss man sehen, bevor man klickt. */
.gk-tile-quelle{ display:block; margin-top:.7rem; font-size:.8rem; color:var(--gk-muted); }
.gk-tile-quelle::before{ content:"↗ "; }
.gk-tile--fach .gk-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. */
.gk-tile--textonly .gk-tile-body{ padding-top:1.3rem; }
.gk-tile--textonly{ background:var(--gk-surface); border-top:3px solid var(--gk-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. */
  .gk-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. */
  .gk-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. */
  .gk-steps-sec > .gk-container > .gk-steps,
  .gk-cat-cta > .gk-container > .gk-steps{ max-width:min(1700px, 94vw); }

  /* Verbindungslinie zwischen den Ziffernkreisen — zeichnet die Abfolge nach.
     Vorher nur ab 2320 px aktiv. */
  .gk-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(--gk-border); }

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

/* =====================================================================
   HERO MIT ECHTEM FOTO  ·  08.09.2026
   Bis heute trug jeder Kategorie-Hero die Klasse .gk-ph-img. Die bringt
   zwei Dinge mit: die Abdunklung, damit die Schrift lesbar bleibt, UND
   das Etikett "Platzhalter-Bild". Seit alle neun Kategorieseiten ein
   echtes Beitragsbild haben, ist nur noch die Abdunklung erwuenscht.
   Deshalb hier eine eigene Klasse fuer den Hero mit echtem Motiv.
   ===================================================================== */
.gk-hero--foto{ position:relative; background-position:center; background-size:cover;
  background-repeat:no-repeat; }
.gk-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); }
.gk-hero--foto > *{ position:relative; z-index:1; }

/* ---------------------------------------------------------------------
   KONTRAST IM HERO
   Die --gk-ink-*-Tokens sind seit der Umstellung auf Weiss/Grau fuer
   HELLE Flaechen gerechnet: --gk-ink-muted ist #55504a, also dunkel.
   Der Hero ist aber die einzige verbliebene dunkle Flaeche des Designs
   (abgedunkeltes Foto) - dort ergaben Lead und Eyebrow nur rund 2:1 und
   waren praktisch unlesbar, waehrend die H1 per !important bereits weiss
   gesetzt war. Beides zieht jetzt nach.
   --------------------------------------------------------------------- */
.gk-hero .gk-lead,
.gk-hero .gk-muted,
.gk-hero .gk-small.gk-muted,
.gk-hero .gk-ph-text{ color:#ece7dd; }
.gk-hero .gk-eyebrow{ color:#c9a227; }

/* ---------------------------------------------------------------------
   HERO OHNE FOTO  (Impressum, Datenschutz, Rechtliche Hinweise, Archiv,
   Suche, 404)
   Diese Seiten tragen kein Motiv. Der Hero faellt damit auf --gk-ink
   zurueck - und die Frage ist, ob diese Flaeche hell oder dunkel ist.
   Sie war beides: unter Weiss/Grau ein helles Mittelgrau, unter Gold-Mix
   ein dunkles Braun. Die erste Fassung hier setzte feste helle Werte und
   war damit ab dem Wechsel auf Gold-Mix falsch herum - Lead 1,86:1,
   Eyebrow 2,49:1 auf der 404-Seite gemessen.

   Deshalb keine festen Farben, sondern die ink-Tokens: die gehoeren zu
   --gk-ink und wechseln mit ihr. Hell wie dunkel stimmt damit beides.
   --------------------------------------------------------------------- */
.gk-hero:not(.gk-hero--foto):not(.gk-ph-img) h1{ color:var(--gk-ink-text) !important; }
.gk-hero:not(.gk-hero--foto):not(.gk-ph-img) .gk-lead{ color:var(--gk-ink-muted); }
.gk-hero:not(.gk-hero--foto):not(.gk-ph-img) .gk-eyebrow{ color:var(--gk-ink-accent); }

/* Rechtstexte: ruhige Spalte, Ueberschriften mit Luft davor. */
.gk-legal{ max-width:52rem; margin:0 auto; }
.gk-legal h2{ font-size:var(--gk-fs-h3); margin:2.2rem 0 .6rem; }
.gk-legal h3{ font-size:var(--gk-fs-md); margin:1.6rem 0 .4rem; }
.gk-legal h4{ font-size:var(--gk-fs-base); margin:1.2rem 0 .3rem; }
.gk-legal p{ margin:0 0 .9rem; }
.gk-legal ul{ margin:0 0 1rem 1.2rem; }
.gk-legal li{ margin:0 0 .35rem; }

/* =====================================================================
   DESIGN-DURCHGANG 08.09.2026 (Rückmeldung des Nutzers)
   Fünf Korrekturen, die alle dieselbe Wurzel haben: Bausteine, die aus
   ankaufmilitaria.de stammen, rechnen noch mit DUNKLEN Flächen. Seit der
   Umstellung auf Weiß/Grau sind Slider-Fuß, Footer und Rechtshinweis aber
   hell — die hellen Schriftfarben stehen dort auf hellem Grund.
   ===================================================================== */

/* --- 1) Slider: Kurzbeschreibung war unlesbar ------------------------
   .gk-action-exc stand auf --gk-ink-text (#23211e, dunkel) — der Slider
   legt aber einen dunklen Verlauf über das Foto (.gk-action-shade), auf
   dem bereits der Titel weiß steht. Der Fließtext zieht jetzt nach. */
.gk-action-exc{ color:#ece7dd; }
.gk-action-eyebrow{ color:#c9a227; }

/* --- 2) Rechtshinweis in Footer-Farbe --------------------------------
   Vorher --gk-bg (#f1f0ed), der Footer aber --gk-ink (#e6e4e0): zwei
   fast gleiche Grautöne direkt übereinander, was wie ein Fehler aussah.
   Jetzt ein durchgehender Abschlussblock. */
.gk-legalnote{ background:var(--gk-ink); }
.gk-legalnote p{ color:var(--gk-muted); }

/* --- 3) Kontaktzeilen bündig zum Absatz darüber ----------------------
   Die Liste war um 16px eingerückt (Browser-Standard für <ul>), während
   Überschrift und Absatz bei 0 beginnen. Gilt für alle Seiten. */
.gk-contact-list{ margin-left:0 !important; padding-left:0 !important; list-style:none; }
.gk-contact-list li{ margin-left:0; padding-left:0; }

/* --- 4) Footer-Wortmarke wie im Header -------------------------------
   Der Footer führte die Marke in Open Sans und WEISS — auf der hellen
   Fläche unlesbar und in einer anderen Schrift als der Kopf. Jetzt
   dieselbe Playfair-Wortmarke mit Gold-Akzent, dazu derselbe Claim. */
.gk-flogo{ font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:var(--gk-fs-lg); font-weight:700; line-height:1.05;
  color:var(--gk-ink-text); margin-bottom:.2rem; }
.gk-flogo span{ color:var(--gk-accent-2); }
.gk-fclaim{ font-family:"Open Sans",Arial,sans-serif; font-size:var(--gk-fs-label-sm);
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gk-muted); margin:0 0 .9rem; }

/* --- 5) Footer-Spaltenüberschriften dunkel --------------------------- */
.gk-footer h3{ color:var(--gk-ink-text); }

/* --- 6) Typografie angleichen ----------------------------------------
   Einleitungsabsätze traten in drei Varianten auf (.gk-lead auf hellen
   Flächen, .gk-lead-text, .gk-sec-intro). Sie stehen an derselben Stelle
   und bekommen dieselbe Größe und Laufweite; nur die Farbe unterscheidet
   die Gewichtung. Der Hero bleibt ausgenommen — dort ist .gk-lead auf das
   Foto abgestimmt. */
.gk-section .gk-lead,
.gk-lead-text,
.gk-sec-intro{ font-size:var(--gk-fs-lead); line-height:1.6; }
.gk-section .gk-lead{ color:var(--gk-text); }
.gk-sec-intro{ color:var(--gk-muted); }

/* --- 7) Fragen-Felder im Einstiegsblock ------------------------------
   Zwei Folgen der Farbumstellung von oben:
   a) Die Felder standen auf --gk-bg (#f1f0ed) - genau dem Ton, den die
      Einstiegs-Sektion jetzt selbst hat. Sie waren nur noch am Rahmen zu
      erkennen. Auf grauem Grund stehen sie deshalb weiß.
   b) Ihr Text war linksbündig, während der übrige Absatztext der Sektion
      jetzt zentriert ist. Bei einzeiligen Feldern fällt das nicht auf,
      beim Umbruch schon. */
.gk-section--mitte .gk-fragen li,
.gk-section:not(.gk-section--hell) .gk-fragen li{ background:var(--gk-surface); }
.gk-fragen li{ text-align:center; }

/* =====================================================================
   FEINSCHLIFF 08.09.2026 (zweite Rückmeldung)
   ===================================================================== */

/* --- 8) Sektions-Einleitung kleiner ----------------------------------
   Im Typografie-Durchgang zuvor war .gk-sec-intro auf --gk-fs-lead
   angeglichen worden - damit stand sie so groß wie ein Einleitungsabsatz,
   obwohl sie nur die Überschrift ergänzt. Sie bekommt die normale
   Textgröße; die Gewichtung übernimmt die gedämpfte Farbe.
   Betrifft „Beim Verkauf von Schmuck und Edelmetallen zählt Vertrauen…"
   und „Neun Bereiche – von einzelnen Schmuckstücken…". */
.gk-sec-intro{ font-size:var(--gk-fs-base); line-height:1.6; color:var(--gk-muted); }

/* --- 9) Rechtshinweis zentriert --------------------------------------
   .gk-legalnote p war auf center gesetzt, wurde aber überschrieben und
   stand links - als einziger Absatz im Abschlussblock. */
.gk-legalnote p{ text-align:center !important; }

/* --- 10) Kachel-Titel bündig zum Text --------------------------------
   .gk-tile-label bringt aus der Zeit vor .gk-tile-body noch ein eigenes
   Innenabstands-Shorthand mit (.9rem 1rem). Seit der Kachelkörper selbst
   polstert, war der Titel gegenüber dem Text darunter um 16 px eingerückt.
   Seitlich also kein eigenes Padding mehr, nur noch der Abstand nach
   unten zum Auszug. */
.gk-tile-body .gk-tile-label{ padding:0 0 .35rem; }

/* =====================================================================
   FLÄCHEN-KORREKTUREN 08.09.2026
   ===================================================================== */

/* --- 11) Slider-Sektion grau -----------------------------------------
   .gk-actions stand auf --gk-surface (weiß). Unter dem Bildband entstand
   dadurch ein weißer Streifen unter der Slider-Navigation, der die
   Sektion optisch abschnitt. */
.gk-actions{ background:var(--gk-bg); }

/* --- 12) Akkordeons ohne eigene Fläche -------------------------------
   .gk-faq-item war fest auf --gk-surface (weiß). Auf grauem Grund
   (Ablaufseite: „Was in jedem Schritt passiert") hoben sich die Elemente
   dadurch als weiße Kästen ab, auf weißem Grund (FAQ) verschwanden sie.
   Zwei verschiedene Erscheinungsbilder für dasselbe Bauteil. Jetzt ohne
   eigene Füllung — die Abgrenzung trägt allein der Rahmen, und das sieht
   auf jedem Untergrund gleich aus. */
.gk-faq-item{ background:transparent; }

/* =====================================================================
   DESIGN-VARIANTEN  ·  Umschalter zur Auswahl
   Vier eigenstaendige Richtungen (Vorgabe 08.09.): Champagner, One-Color,
   Gold-Dark und Gold-Light. Aufbau und Typografie bleiben gleich;
   Flaechen und - bei Gold-Dark auch die Schrift darauf - wechseln mit — es ändern sich nur
   die drei Flächen: --gk-surface (die „hellen" Sektionen), --gk-bg (die
   grauen) und --gk-ink (Footer und Rechtshinweis).

   Alle Kombinationen sind gegen Text (#23211e), Gold (#7d5f1e) und
   gedämpften Text (#55504a) durchgerechnet und halten 4,5:1; der
   knappste Wert ist Gold auf der Footer-Fläche von Variante 5 (4,54:1).

   VOR DEM GO-LIVE: gewählte Variante fest in :root schreiben, diesen
   Block und .gk-palette-switch entfernen.
   ===================================================================== */
html[data-gk-palette="1"]{   /* Champagner - die warme Variante */
  --gk-surface:#fcf9f1; --gk-bg:#f2ebdb; --gk-ink:#e9e0cc;
  --gk-ink-text:#23211e; --gk-ink-muted:#55504a;
  --gk-ink-accent:#7d5f1e; --gk-ink-link:#7d5f1e;
  --gk-accent:#7d5f1e; --gk-accent-2:#5f4715; }
html[data-gk-palette="2"]{   /* One-Color - alle Sektionen dieselbe Flaeche */
  --gk-surface:#efece6; --gk-bg:#efece6; --gk-ink:#efece6;
  --gk-ink-text:#23211e; --gk-ink-muted:#55504a;
  --gk-ink-accent:#7d5f1e; --gk-ink-link:#7d5f1e;
  --gk-accent:#7d5f1e; --gk-accent-2:#5f4715; }
html[data-gk-palette="3"]{   /* Graphit - neutrale helle Flaechen, dunkle Baender
                                (09.09.: surface von #f4f2ee auf Weiss gesetzt - vorher
                                waren surface und bg gleich, der Sektionswechsel fiel weg) */
  --gk-surface:#ffffff; --gk-bg:#f4f2ee; --gk-surface-2:#e7e4de; --gk-ink:#2a2724;
  --gk-ink-text:#f4efe5; --gk-ink-muted:#c2bbb0;
  --gk-ink-accent:#d9b64a; --gk-ink-link:#d9b64a;
  --gk-accent:#7d5f1e; --gk-accent-2:#5f4715; }
html[data-gk-palette="4"]{   /* Gold-Light - durchgehend helle Elemente */
  --gk-surface:#fffdf8; --gk-bg:#f7f0e0; --gk-ink:#efe4cd;
  --gk-ink-text:#23211e; --gk-ink-muted:#55504a;
  --gk-ink-accent:#7d5f1e; --gk-ink-link:#7d5f1e;
  --gk-accent:#7d5f1e; --gk-accent-2:#5f4715; }
html[data-gk-palette="5"]{   /* Weiss & Hellgrau - der urspruengliche Stand */
  --gk-surface:#ffffff; --gk-bg:#f1f0ed; --gk-ink:#e6e4e0;
  --gk-ink-text:#23211e; --gk-ink-muted:#55504a;
  --gk-ink-accent:#7d5f1e; --gk-ink-link:#7d5f1e;
  --gk-accent:#7d5f1e; --gk-accent-2:#5f4715; }
html[data-gk-palette="6"]{   /* Gold-Mix - warme Flaechen wie Gold-Light, dunkle Akzente wie Gold-Dark */
  --gk-surface:#fffdf8; --gk-bg:#f7f0e0; --gk-ink:#2a2724;
  --gk-ink-text:#f4efe5; --gk-ink-muted:#c2bbb0;
  --gk-ink-accent:#d9b64a; --gk-ink-link:#d9b64a;
  --gk-accent:#7d5f1e; --gk-accent-2:#5f4715; }
html[data-gk-palette="7"]{   /* Marine - cremefarbene Flaechen, marineblaue Baender.
                                Angelegt 09.09.2026 als vierte Richtung fuer die
                                Kundenentscheidung: der einzige Entwurf, der die
                                Zweitfarbe wechselt statt nur den Waermegrad.
                                Kiel-Bezug, und Blau mit Gold ist im Schmuckhandel
                                eine gelaeufige Paarung.
                                Kontraste gerechnet: Gold #e0be5c auf #1b2a3f = 8,06:1,
                                Text #eef2f7 auf #1b2a3f = 12,89:1, Knopf 9,04:1. */
  --gk-surface:#fffdf8; --gk-bg:#f4f1ea; --gk-surface-2:#e8e4da; --gk-ink:#1b2a3f;
  --gk-ink-text:#eef2f7; --gk-ink-muted:#b7c2d1;
  --gk-ink-accent:#e0be5c; --gk-ink-link:#e0be5c;
  --gk-accent:#7d5f1e; --gk-accent-2:#5f4715;
  --gk-btn-bg:#16212f; --gk-btn-fg:#e0be5c;
  --gk-dark:#1b2a3f; --gk-border:#ddd7cb; }

/* --- Bedienelement (nur Bauphase) ------------------------------------ */
.gk-palette-switch{ position:fixed; left:16px; bottom:16px; z-index:99999;
  font-family:"Open Sans",Arial,sans-serif; font-size:.82rem; width:15.5rem;
  background:#fff; border:1px solid #d8d4cc; border-radius:var(--gk-radius);
  box-shadow:0 6px 22px rgba(0,0,0,.16); overflow:hidden; }
.gk-palette-switch__head{ display:flex; align-items:center; gap:.5rem; width:100%;
  cursor:pointer; background:#faf9f7; border:0; border-bottom:1px solid #e7e3db;
  padding:.6rem .7rem; font:inherit; font-weight:700; color:#23211e; text-align:left; }
.gk-palette-switch__head::after{ content:""; margin-left:auto; width:7px; height:7px;
  border-right:2px solid #7d5f1e; border-bottom:2px solid #7d5f1e;
  transform:rotate(225deg) translate(-1px,-1px); }
.gk-palette-switch.is-closed .gk-palette-switch__head::after{ transform:rotate(45deg) translate(-1px,-1px); }
.gk-palette-switch__body{ padding:.5rem; display:flex; flex-direction:column; gap:.15rem; }
.gk-palette-switch.is-closed .gk-palette-switch__body,
.gk-palette-switch.is-closed .gk-palette-switch__note{ display:none; }
.gk-palette-opt{ display:flex; align-items:center; gap:.55rem; width:100%; cursor:pointer;
  background:none; border:1px solid transparent; border-radius:var(--gk-radius);
  padding:.4rem .5rem; font:inherit; color:#23211e; text-align:left; }
.gk-palette-opt:hover{ background:#f5f3ef; }
.gk-palette-opt[aria-pressed="true"]{ border-color:#7d5f1e; background:#faf6ec; font-weight:700; }
.gk-palette-probe{ flex:0 0 auto; width:34px; height:18px; border:1px solid #cfcabf;
  border-radius:var(--gk-radius); display:inline-block; }
.gk-palette-switch__note{ margin:0; padding:.1rem .7rem .6rem; color:#6a655d;
  font-size:.72rem; line-height:1.35; }
@media print{ .gk-palette-switch{ display:none; } }

/* =====================================================================
   FLÄCHENTREUE FARBEN  ·  Voraussetzung für die dunkle Variante
   Solange alle Flächen hell waren, fiel es nicht auf: Einige Elemente auf
   der ink-Fläche (Footer, Rechtshinweis) benutzten Tokens, die für HELLE
   Flächen gerechnet sind — und umgekehrt trug die Vertrauensleiste, die
   auf der grauen Fläche liegt, noch ink-Farben aus der AM-Zeit, als sie
   dunkel war. Mit „Gold-Dark" würde beides sichtbar: heller Text auf
   hellem Grund und dunkler Text auf dunklem.

   Regel: Was auf --gk-ink liegt, nimmt die ink-Tokens. Was auf --gk-bg
   oder --gk-surface liegt, nimmt die normalen.
   ===================================================================== */

/* Auf der ink-Fläche: Footer und Rechtshinweis */
.gk-footer .gk-muted,
.gk-footer .gk-small,
.gk-fclaim,
.gk-legalnote p{ color:var(--gk-ink-muted); }
.gk-legalnote a,
.gk-legalnote:not(.gk-legalnote--dark) a{ color:var(--gk-ink-link) !important; }

/* Auf heller Fläche: die Vertrauensleiste steht auf --gk-bg, nicht auf ink */
.gk-trust{ color:var(--gk-text); }
.gk-trust .gk-muted{ color:var(--gk-muted); }
.gk-trust a{ color:var(--gk-accent); }

/* Auf dunklem Grund braucht der Ghost-Button eine helle Kante, sonst
   verschwindet er. Nur dort — auf hellen Flächen bleibt es wie gehabt. */
.gk-legalnote .gk-btn-ghost--dark,
.gk-footer .gk-btn-ghost--dark{ color:var(--gk-ink-link) !important;
  border-color:var(--gk-ink-link); }


/* =====================================================================
   ZWEI KORREKTUREN FÜR ALLE VARIANTEN
   ===================================================================== */

/* Slider-Etikett: eigener Fehler von heute. Ich hatte es zusammen mit dem
   Slider-Fließtext auf helles Gold gesetzt — der Fließtext liegt aber auf
   dem abgedunkelten Bild, das Etikett dagegen auf einer GOLDENEN Fläche
   (.gk-action-eyebrow hat background:var(--gk-accent)). Ergebnis war Gold
   auf Gold mit 2,46:1. Zurück auf Weiß wie im Bestand — 6,1:1. */
.gk-action-eyebrow{ color:#fff; }

/* Footer-Wortmarke: die Endung „Kiel" stand auf --gk-accent-2, einem Ton
   für HELLE Flächen. Auf einem dunklen Footer wären das 1,7:1.
   --gk-ink-accent ist der Akzent FÜR die ink-Fläche und stimmt in allen
   Varianten. */
.gk-flogo span{ color:var(--gk-ink-accent); }


/* =====================================================================
   GOLD-DARK  ·  dunkle Flächen als Akzent
   Zwei Anläufe waren daneben: erst nur der Footer (zu wenig, die Variante
   unterschied sich kaum), dann alle Sektionen ohne --hell (zu viel, die
   Seite wirkte insgesamt dunkel und der Akzent stach nicht mehr heraus).

   Jetzt tragen die KURZEN Abschnitte die dunkle Fläche — sie vertragen
   den starken Ton, weil dort wenig Text steht, und sie liegen verteilt
   über die Seite statt geballt am Ende:

     .gk-akzent    Startseite: „Transparenz, Fairness und Beratung"
                   und „Militärhistorische Antiquitäten"
     .gk-cat-cta   Kategorieseiten: „So verkaufen Sie Ihre Stücke"

   Zusammen mit Rechtshinweis und Footer ergibt das drei ruhige dunkle
   Bänder. Alles andere bleibt hell. In den vier hellen Varianten ist
   .gk-akzent wirkungslos — die Sektionen behalten dort ihre normale
   Fläche.

   Über :is() gebündelt: Das hält die Spezifität bei einer Klasse, sodass
   Inhalte mit eigener Fläche darin ohne Spezifitätskampf ihre Farben
   behalten.
   ===================================================================== */
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta){
  background:var(--gk-ink) !important; color:var(--gk-ink-text); }

/* Schrift auf der dunklen Fläche. Die Überschriften brauchen !important:
   Divi setzt sie über `#main-content h2` — ein ID-Selektor schlägt jede
   Klassenkette. */
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) h2,
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) h3,
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) h4{
  color:var(--gk-ink-text) !important; }
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) p,
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) li,
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) .gk-step-t{
  color:var(--gk-ink-text); }
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) .gk-sec-intro,
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) .gk-small,
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) .gk-muted,
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) .gk-step-d{
  color:var(--gk-ink-muted); }

/* Verweise und die Ziffern des Ablaufs im hellen Gold */
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) a:not(.gk-btn){
  color:var(--gk-ink-link); }
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) .gk-step-n{
  color:var(--gk-ink-accent); border-color:var(--gk-ink-accent); }
/* Die Regel galt bis zum 09.09. nur fuer .gk-cat-cta. Auf der Ablaufseite
   liegt dieselbe Ziffernreihe in .gk-steps-sec.gk-akzent - dort standen die
   Ziffern in Dunkelgold (--gk-accent-2) auf der dunklen Flaeche und kamen
   auf 1,70:1. Im Browser gemessen, nicht im Quelltext vermutet. */

/* Der Ghost-Button ist für helle Flächen gezeichnet und verschwände hier */
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) .gk-btn-ghost--dark{
  color:var(--gk-ink-link) !important; border-color:var(--gk-ink-link); }
html:is(:not([data-gk-palette]),[data-gk-palette="3"],[data-gk-palette="6"],[data-gk-palette="7"]) :is(.gk-akzent, .gk-cat-cta) .gk-btn-ghost--dark:hover{
  background:var(--gk-ink-accent); color:var(--gk-btn-bg) !important; }
/* =====================================================================
   SCHRIFTEN - LOKAL AUSGELIEFERT  (08.09.2026)
   Vorher registrierte gk-base.php die Schriften direkt bei
   fonts.googleapis.com; im Netzwerkmitschnitt waren Anfragen an
   fonts.googleapis.com UND fonts.gstatic.com nachweisbar. Damit ging die
   IP jedes Besuchers ohne Einwilligung an Google - waehrend die
   Datenschutzerklaerung zugleich behauptete, die Fonts seien lokal
   installiert und es finde keine Verbindung zu Google statt.

   Beide Familien sind VARIABLE FONTS: eine Datei je Subset deckt alle
   Gewichte ab (font-weight als Bereich). Google liefert fuer jedes
   angeforderte Gewicht dieselbe Datei aus - statt 16 Downloads sind es
   deshalb 4, statt 592 KB rund 142 KB.

   Beide stehen unter der SIL Open Font License und duerfen selbst
   gehostet werden. Nur latin und latin-ext; font-display:swap.
   ===================================================================== */

@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/wp-content/uploads/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('/wp-content/uploads/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('/wp-content/uploads/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('/wp-content/uploads/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;
}

/* Der Design-Umschalter lag mobil unten links ueber der Kontaktleiste und
   verdeckte deren erste Schaltflaeche. Auf schmalen Breiten rueckt er
   deshalb ueber die Leiste (rund 52 px hoch) und wird schmaler.
   Betrifft nur die Bauphase - mit dem Umschalter faellt auch diese Regel weg. */
@media(max-width:820px){
  .gk-palette-switch{ bottom:84px; left:8px; width:12.5rem; font-size:.78rem; }
}

/* =====================================================================
   KOPF UND FUSS AUF DERSELBEN FLÄCHE  (Vorgabe 08.09.2026)
   Der Header stand auf --gk-surface-2, einem eigenen dritten Flächenton,
   den keine Designvariante überschreibt. Er blieb dadurch immer hell —
   auch bei Gold-Dark und Gold-Mix, wo der Footer dunkel ist. Die Seite
   begann hell und endete dunkel.

   Jetzt trägt der Header dieselbe Fläche wie der Footer (--gk-ink). In den
   hellen Varianten ändert sich dadurch fast nichts; in den dunklen rahmen
   Kopf und Fuß die Seite gemeinsam ein.

   Weil --gk-ink dunkel sein kann, ziehen alle Schriften im Kopf auf die
   ink-Tokens um: Marke, Claim, Menü und Untermenü. Der CTA-Knopf behält
   seine eigene Akzentfläche mit weißer Schrift.
   ===================================================================== */
html body #main-header{ background:var(--gk-ink) !important; }

/* Wortmarke und Claim */
html body #main-header .gk-brand-text{ color:var(--gk-ink-text) !important; }
html body #main-header .gk-brand-tld{ color:var(--gk-ink-accent) !important; }
#main-header .gk-brand:hover .gk-brand-text{ color:var(--gk-ink-accent); }
html body #main-header .gk-brand-claim{ color:var(--gk-ink-muted) !important; }

/* Hauptmenü */
html body #main-header #top-menu > li > a{ color:var(--gk-ink-text) !important; }
#main-header #top-menu > li > a:hover,
#main-header #top-menu > li.current-menu-item > a{ color:var(--gk-ink-accent) !important; }
#main-header #top-menu > li > a::after{ background:var(--gk-ink-accent); }

/* Der CTA-Knopf ist kein Menüpunkt und muss aus der Menüregel darüber heraus:
   die setzt --gk-ink-text (hell) und beim Hover --gk-ink-accent (gold) — auf
   der goldenen Hoverfläche wäre das Gold auf Gold. Eine Klasse mehr genügt,
   um beide zu schlagen. */
html body #main-header #top-menu > li.gk-cta-menu > a{ color:var(--gk-btn-bg) !important; }
html body #main-header #top-menu > li.gk-cta-menu > a:hover{ color:var(--gk-btn-fg) !important; }
html body #main-header #mobile_menu li.gk-cta-menu a{ color:var(--gk-btn-bg) !important; }
html body #main-header #mobile_menu li.gk-cta-menu a:hover{ color:var(--gk-btn-fg) !important;
  background:transparent !important; border-color:var(--gk-btn-fg); }

/* Untermenü und mobiles Klappmenü gehoeren optisch zum Kopf und tragen
   deshalb dieselbe Flaeche - bei dunklem Header also ebenfalls dunkel.
   Da Kopf und Klappmenue dann denselben Ton haben, trennt eine dezente
   Kante die beiden Ebenen; ein Schatten gibt dem Menue Tiefe. */
html body #main-header #top-menu ul.sub-menu{ background:var(--gk-ink) !important;
  border:1px solid rgba(128,128,128,.28); box-shadow:0 10px 26px rgba(0,0,0,.18); }
html body #main-header #top-menu ul.sub-menu li a{ color:var(--gk-ink-text) !important; }
html body #main-header #top-menu ul.sub-menu li a:hover,
html body #main-header #top-menu ul.sub-menu li.current-menu-item a{
  color:var(--gk-ink-accent) !important; background:rgba(128,128,128,.12); }

/* Mobile: Hamburger-Symbol und Klappmenü */
#main-header .mobile_menu_bar:before{ color:var(--gk-ink-accent) !important; }
html body #main-header #mobile_menu{ background:var(--gk-ink) !important;
  border:1px solid rgba(128,128,128,.28); }
html body #main-header #mobile_menu li a{ color:var(--gk-ink-text) !important; }
html body #main-header #mobile_menu li a:hover{ background:rgba(128,128,128,.12) !important;
  color:var(--gk-ink-accent) !important; }

/* Divis Suchsymbol im Kopf */
#main-header #et_top_search .et_pb_menu__icon,
#main-header #et_search_icon:before{ color:var(--gk-ink-text) !important; }

/* Divis Suchfeld klappt IM Kopf auf und bringt seine eigene Schriftfarbe mit
   (#333 auf transparent). Auf dem dunklen Kopf ergab das 1,66:1 - das Feld war
   da, der eingetippte Text nicht zu sehen. Es faellt nicht auf, weil die Suche
   erst nach einem Klick auf die Lupe erscheint. */
html body #main-header .et-search-form input,
html body #main-header .et_search_outer input[type="search"]{
  color:var(--gk-ink-text) !important; }
html body #main-header .et-search-form input::placeholder{
  color:var(--gk-ink-muted) !important; opacity:1; }
html body #main-header .et_close_search_field:after{ color:var(--gk-ink-text) !important; }

/* =====================================================================
   BLOG-BAUSTEINE FUER BEITRAGSINHALTE  ·  09.09.2026
   Grundlage: Wunsch aus dem Telefonat mit Thomas (09.09.) — der Blog soll
   wie bei militaria-kiel.de ueber ein Claude-Projekt befuellt werden, das
   fertiges HTML mit festen Klassen liefert. Diese Klassen sind hier
   definiert; die Arbeitsanweisung dazu liegt in
   Gold-Ankauf-Kiel/Arbeitsanweisung_Blogbeitraege_Gold.md.
   Zwei der Bausteine (gk-kontakt, gk-fussnote) werden serverseitig in das
   ausgebaute Design uebersetzt — siehe gk_blog_bausteine() in gk-base.php.
   ===================================================================== */

/* --- Grundelemente, die im Fliesstext vorkommen ---------------------- */
.gk-post-body h4{ font-size:var(--gk-fs-lg); margin:1.3rem 0 .5rem; }
.gk-post-body ul,
.gk-post-body ol{ margin:0 0 1.1rem 1.25rem; padding:0; }
.gk-post-body li{ margin:0 0 .45rem; }
.gk-post-body li:last-child{ margin-bottom:0; }
.gk-post-body hr{ border:0; border-top:1px solid var(--gk-border); margin:2.2rem 0; }
.gk-post-body blockquote{ margin:1.6rem 0; padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--gk-gold-deko); font-style:italic; color:var(--gk-muted); }
.gk-post-body blockquote p:last-child{ margin-bottom:0; }

/* --- Hinweisbox ------------------------------------------------------ */
.gk-post-body .gk-hinweis{ background:var(--gk-bg); border-left:3px solid var(--gk-accent);
  border-radius:0 var(--gk-radius) var(--gk-radius) 0;
  padding:1.05rem 1.25rem; margin:1.8rem 0; font-size:var(--gk-fs-sm); }
.gk-post-body .gk-hinweis p:last-child{ margin-bottom:0; }

/* --- Stufenbox fuer Typen, Varianten, Epochen ------------------------ */
.gk-post-body .gk-stufe{ background:var(--gk-surface); border:1px solid var(--gk-border);
  border-radius:var(--gk-radius); padding:1.1rem 1.3rem; margin:1.5rem 0; }
.gk-post-body .gk-stufe p:last-child{ margin-bottom:0; }
.gk-post-body .gk-stufe-label{ font-family:"Open Sans",Arial,sans-serif; font-size:var(--gk-fs-label);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gk-accent-2); margin:0 0 .45rem !important; }

/* --- Tabellen: waagerecht scrollbar statt gequetscht ----------------- */
.gk-post-body .gk-table-wrap{ overflow-x:auto; margin:1.8rem 0; }
.gk-post-body table{ border-collapse:collapse; width:100%; font-size:var(--gk-fs-sm); }
.gk-post-body th,
.gk-post-body td{ border-bottom:1px solid var(--gk-border); padding:.6rem .85rem;
  text-align:left; vertical-align:top; }
.gk-post-body thead th{ background:var(--gk-surface-2); color:var(--gk-heading);
  font-weight:700; border-bottom:1px solid var(--gk-border); }
/* Ohne .gk-data ist die erste Spalte der Schluessel eines Wertepaares. */
.gk-post-body table:not(.gk-data) tbody td:first-child{ font-weight:600; color:var(--gk-heading); }

/* --- Rechtshinweis im Beitrag (nur wenn das Objekt ihn braucht) ------- */
.gk-post-body .gk-rechtlich{ background:var(--gk-bg); border:1px solid var(--gk-border);
  border-radius:var(--gk-radius); padding:1.05rem 1.25rem; margin:2rem 0;
  font-size:var(--gk-fs-sm); color:var(--gk-muted); }
.gk-post-body .gk-rechtlich p:last-child{ margin-bottom:0; }

/* --- Kontaktbox am Beitragsende (aus gk-kontakt erzeugt) ------------- */
.gk-post-body .gk-kontaktbox{ background:var(--gk-surface-2); border-radius:var(--gk-radius);
  padding:clamp(1.5rem,4vw,2.4rem); margin:2.6rem 0 1.8rem; text-align:center; }
.gk-post-body .gk-kontaktbox__eyebrow{ font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--gk-fs-label); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gk-accent-2); margin:0 0 .4rem !important; }
.gk-post-body .gk-kontaktbox__titel{ font-size:var(--gk-fs-h3); color:var(--gk-heading);
  margin:0 0 .7rem !important; padding-bottom:.7rem; border-bottom:1px solid var(--gk-accent); }
.gk-post-body .gk-kontaktbox__lead{ max-width:44rem; margin:0 auto !important;
  font-size:var(--gk-fs-sm); color:var(--gk-muted); }
.gk-post-body .gk-kkarten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.9rem; margin-top:1.5rem; text-align:left; }
.gk-post-body .gk-kkarte{ display:flex; align-items:center; gap:.85rem;
  background:var(--gk-surface); border:1px solid var(--gk-border);
  border-radius:var(--gk-radius); padding:.95rem 1.05rem;
  color:var(--gk-text) !important; text-decoration:none !important; }
.gk-post-body .gk-kkarte:hover,
.gk-post-body .gk-kkarte:focus-visible{ border-color:var(--gk-accent); }
.gk-post-body .gk-kkarte__kreis{ display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:2.5rem; height:2.5rem; border-radius:50%;
  background:var(--gk-bg); color:var(--gk-accent); }
.gk-post-body .gk-kkarte__label{ display:block; font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--gk-fs-label-sm); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gk-accent-2); }
.gk-post-body .gk-kkarte__wert{ display:block; font-size:var(--gk-fs-sm); font-weight:600;
  color:var(--gk-heading); overflow-wrap:anywhere; }

/* Sprechblase fuer die Formular-Karte */
.gk-ico--chat{ --gk-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='M20.5 4.5H3.5v12h4v3.5l4-3.5h9z'/%3E%3C/svg%3E"); }

/* --- Aliase fuer die aelteren Beitraege aus dem MK-Muster --------------
   1078, 1085 und 1097 wurden vor dem 09.09. mit gh-Klassen geliefert.
   Statt die Beitraege anzufassen, gelten dieselben Regeln fuer beide
   Praefixe. Neue Beitraege verwenden gk-. */
.gk-post-body .gh-hinweis{ background:var(--gk-bg); border-left:3px solid var(--gk-accent);
  border-radius:0 var(--gk-radius) var(--gk-radius) 0;
  padding:1.05rem 1.25rem; margin:1.8rem 0; font-size:var(--gk-fs-sm); }
.gk-post-body .gh-hinweis p:last-child{ margin-bottom:0; }
.gk-post-body .gh-stufe{ background:var(--gk-surface); border:1px solid var(--gk-border);
  border-radius:var(--gk-radius); padding:1.1rem 1.3rem; margin:1.5rem 0; }
.gk-post-body .gh-stufe-label{ font-family:"Open Sans",Arial,sans-serif; font-size:var(--gk-fs-label);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gk-accent-2); margin:0 0 .45rem !important; }
.gk-post-body .gh-table-wrap{ overflow-x:auto; margin:1.8rem 0; }
.gk-post-body .gh-rechtlich{ background:var(--gk-bg); border:1px solid var(--gk-border);
  border-radius:var(--gk-radius); padding:1.05rem 1.25rem; margin:2rem 0;
  font-size:var(--gk-fs-sm); color:var(--gk-muted); }
/* gh-infothek war bei MK der Wrapper; hier braucht er keine eigene Breite,
   die Satzbreite regelt bereits .gk-post-body. */
.gk-post-body .gh-infothek{ max-width:none; }

/* Traegt der Beitrag die Kontaktbox schon im Text, bleibt von dieser
   Flaeche nur der Rueckverlink - dann darf sie nicht wie ein leerer
   Streifen wirken. */
.single-post .gk-post-cta--schmal{ padding-top:1.1rem; padding-bottom:1.1rem; }
.gk-post-cta--schmal .gk-post-back{ margin-top:0; }


/* =====================================================================
   BEITRAGSBREITE UND BILDERGALERIE  ·  09.09.2026
   Vorgabe Lukas: Blogbeiträge bekommen mehr Inhaltsbreite; die Galerie am
   Fuß soll besser aussehen und keine Bildtitel mehr zeigen.

   Zum Vergleich geprüft: militaria-kiel.de setzt seinen Beitragstext auf
   960 px (Snippet 72551, `.gh-infothek`) — also kaum mehr als die 900 px,
   die hier bisher standen. Der spürbare Zugewinn kommt erst bei 1150 px;
   darauf ist die Entscheidung gefallen. Die Sektionsflächen ringsum
   (Hero, CTA, Fußnote) bleiben unberührt.
   ===================================================================== */

/* Divi legt jeder Zeile im Builder-Beitrag 80 % / 1080 px an. Ohne diese
   Regel bliebe der Text bei 1080 px stehen, obwohl der Körper 1150 zulässt —
   und Beiträge ohne ausdrückliche Breitenangabe im Shortcode kämen sogar
   nur auf 80 %. */
.single-post .gk-post-body .et_pb_row{ width:100% !important; max-width:none !important;
  padding-left:0 !important; padding-right:0 !important; }
.single-post .gk-post-body .et_pb_column{ width:100% !important; margin-right:0 !important; }

/* ---- Bildergalerie am Beitragsfuß ----------------------------------
   Divis Standardraster stellt vier Bilder in unterschiedlicher Höhe
   nebeneinander und schreibt den Dateinamen als Überschrift darunter —
   „Bernstein-ankauf-KielREndsburg-4“ ist keine Bildunterschrift, sondern
   ein Dateiname. Titel und Bildtext entfallen deshalb; die Bilder stehen
   in einem gleichmäßigen Raster mit festem Seitenverhältnis. */
.gk-post-body .et_pb_gallery{ margin:2.6rem 0 0; }
.gk-post-body .et_pb_gallery_items{ display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.9rem; }
.gk-post-body .et_pb_gallery_item{ width:auto !important; max-width:none !important;
  margin:0 !important; float:none !important; display:block !important; }
.gk-post-body .et_pb_gallery_image{ position:relative; overflow:hidden;
  border:1px solid var(--gk-border); border-radius:var(--gk-radius);
  background:var(--gk-surface-2); }
.gk-post-body .et_pb_gallery_image a{ display:block; aspect-ratio:4/3; }
.gk-post-body .et_pb_gallery_image img{ width:100% !important; height:100% !important;
  object-fit:cover; display:block; transition:transform .4s ease; }
.gk-post-body .et_pb_gallery_item:hover .et_pb_gallery_image img{ transform:scale(1.05); }
/* Dateinamen als Überschrift und Bildtext ausblenden. */
.gk-post-body .et_pb_gallery_title,
.gk-post-body .et_pb_gallery_item h3,
.gk-post-body .et_pb_gallery_caption{ display:none !important; }
/* Divis Lupensymbol beim Überfahren trägt das Theme-Blau #2ea3f2 — auf
   dieser Seite kommt es aus der Palette. */
.gk-post-body .et_overlay{ background:rgba(20,18,15,.42) !important;
  border:0 !important; box-shadow:none !important; }
.gk-post-body .et_overlay::before{ color:var(--gk-ink-accent) !important; }
.gk-post-body .et_pb_gallery_pagination ul li a.active{ color:var(--gk-accent) !important; }
/* Auf schmalen Schirmen zwei Bilder nebeneinander statt eines sehr großen. */
@media(max-width:600px){
  .gk-post-body .et_pb_gallery_items{ grid-template-columns:repeat(2,1fr); gap:.6rem; }
}

/* Divi setzt der Galerie bei Blaetterung eine feste Hoehe per JavaScript -
   im Raster schnitte die den Inhalt ab. Und eine Blaetterung braucht die
   Galerie unter einem Fachbeitrag nicht: alle Bilder stehen nebeneinander. */
.gk-post-body .et_pb_gallery_items{ height:auto !important; }
.gk-post-body .et_pb_gallery_pagination{ display:none !important; }


/* =====================================================================
   AUTORBLOCK ALS KARTE  ·  Fassung 3, 09.09.2026
   Vorbild ist der Block auf militaria-kiel.de, den Thomas als Referenz
   geschickt hat: eigene Fläche, kräftige Kante links, Sperrsatz-Etikett,
   Namen in der Serifenschrift.

   Fassung 1 war schon eine Karte, fiel aber durch: sie stand unmittelbar
   über der Aufruf-Fläche in --gk-surface-2, und zwei ähnliche Beigetöne
   ohne Trennung verschmolzen zu einem unklaren Block. Fassung 2 (Signatur
   ohne Fläche) löste das, war aber zu leise.

   Diese Fassung behält die Karte und löst den Übergang anders:
     · ein feiner Rahmen rundum grenzt sie auch gegen Beige ab,
     · unter ihr bleibt ein deutlicher heller Streifen stehen, bevor die
       farbige Sektion beginnt (padding-bottom, nicht margin — margin
       fiele bei Nachbarn mit eigenem Abstand zusammen).
   ===================================================================== */
.gk-autor{ background:var(--gk-bg);
  border:1px solid var(--gk-border); border-left:4px solid var(--gk-accent);
  border-radius:0 var(--gk-radius) var(--gk-radius) 0;
  padding:1.35rem 1.6rem; margin:2.8rem 0 0; }
.gk-autor__label{ font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--gk-fs-label-sm); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gk-accent-2);
  margin:0 0 .7rem !important; padding:0 !important; }
.gk-autor__name{ font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:var(--gk-fs-md); line-height:1.45; color:var(--gk-heading);
  margin:0 0 .25rem !important; padding:0 !important; }
.gk-autor__rolle{ font-family:"Open Sans",Arial,sans-serif;
  font-size:var(--gk-fs-sm); color:var(--gk-muted); }
/* Der Trenner kommt aus dem CSS, nicht aus dem Text: auf schmalen Schirmen
   steht die Rolle unter dem Namen, und ein mitgeschriebenes Mittelpunktzeichen
   staende dann am Zeilenanfang. */
.gk-autor__rolle::before{ content:"· "; }
@media(max-width:480px){
  .gk-autor__name .gk-autor__rolle{ display:block; }
  .gk-autor__name .gk-autor__rolle::before{ content:none; }
}
/* Die Beschreibungszeile ist am 09.09. entfallen (entweder alle neun
   Kategorien oder keine). Die Regel bleibt stehen, falls der Block einmal
   wieder einen Satz tragen soll. */
.gk-autor__text{ font-size:var(--gk-fs-sm); line-height:1.6; color:var(--gk-muted);
  margin:.85rem 0 0 !important;
  border-top:1px solid var(--gk-border); padding:.85rem 0 0 !important; }
/* Ohne dritte Zeile darf die Karte enger sitzen. */
.gk-autor{ padding-bottom:1.2rem; }

/* Nachgereichte Fassung: sitzt außerhalb von .gk-post-body und braucht
   dieselbe Satzbreite, denselben Seitenabstand — und den hellen Streifen
   zur Aufruf-Fläche darunter. */
.gk-post-autor{ max-width:1150px; margin:0 auto;
  padding:0 clamp(16px,4vw,32px) 3.6rem; }
.gk-post-autor .gk-autor{ margin-top:0; }

/* =====================================================================
   DESIGNWAHL — Ergänzungen am 09.09.2026
   Die Leiste ist am 08.09. entfernt worden, weil sie fest aufgeklappt auf
   jeder Seite stand und Inhalt überdeckte (Befund A5 der Vollsichtung).
   Sie kommt jetzt für die Kundenentscheidung zurück — aber **eingeklappt**:
   sichtbar ist nur ein schmaler Knopf, das Feld öffnet erst auf Klick.
   Die Quickbar sitzt rechts (right:0), die Leiste links — sie stören
   einander nicht.
   ===================================================================== */
.gk-palette-switch{ width:auto; max-width:min(17rem, calc(100vw - 32px)); }
.gk-palette-switch.is-closed{ width:auto; }
.gk-palette-switch__head{ white-space:nowrap; }
/* Farbprobe: drei Streifen zeigen Fläche, Band und Akzent der Variante */
.gk-palette-probe{ width:38px; height:20px; display:flex; overflow:hidden; }
.gk-palette-probe i{ flex:1; display:block; }
/* Der Schließen-Knopf nimmt die Leiste bis zum nächsten Seitenaufruf weg,
   damit sie beim Durchsehen nicht stört. */
.gk-palette-switch__zu{ position:absolute; top:.35rem; right:.4rem; z-index:2;
  width:1.4rem; height:1.4rem; line-height:1; cursor:pointer;
  background:none; border:0; color:#8a847a; font-size:1.1rem; padding:0; }
.gk-palette-switch__zu:hover{ color:#23211e; }
/* Eingeklappt ist nur der Kopf sichtbar - dort saesse das Kreuz genau auf dem
   Aufklapp-Pfeil. Es erscheint deshalb erst mit dem geoeffneten Feld, und der
   Kopf macht ihm dann rechts Platz. */
.gk-palette-switch.is-closed .gk-palette-switch__zu{ display:none; }
.gk-palette-switch:not(.is-closed) .gk-palette-switch__head{ padding-right:2.2rem; }
.gk-palette-switch{ position:fixed; }
/* Die Schnellkontaktleiste steht bis 1729 px als 52 px hohe Leiste ueber die
   volle Breite am unteren Rand (dieselbe Schwelle wie oben bei .gk-quickbar).
   Der Umschalter sass genau darauf - gemessen am 09.09. bei 1024, 1280, 1600
   und 1729 px. Er rueckt deshalb darueber, solange die Leiste unten liegt. */
@media(max-width:1729px){
  .gk-palette-switch{ bottom:64px; }
}
@media(max-width:600px){
  .gk-palette-switch{ left:8px; font-size:.78rem; }
}