/* ============================================================
   Glanznormal, Design der Kundenseiten
   Wirkt nur innerhalb von .gn-page bzw. der gn-Klassen,
   damit Kadence-Kopf und -Fuß unangetastet bleiben.
   ============================================================ */

:root{
  --gn-ink:#121015;
  --gn-ink-2:#1a1720;
  --gn-ink-3:#231f2b;
  --gn-ink-4:#2d2737;
  --gn-line:rgba(255,255,255,.10);
  --gn-line-strong:rgba(255,255,255,.18);
  --gn-violet:#7b2bbf;
  --gn-violet-lt:#a86ce8;
  --gn-violet-glow:rgba(123,43,191,.35);
  --gn-gold:#c6a664;
  /* WhatsApp-Gruen, dunkel genug fuer weisse Schrift (4,7:1 nach WCAG AA).
     Das hellere #1fa855 kam nur auf 3,1:1. */
  --gn-wa:#178542;
  --gn-wa-hover:#146f37;
  --gn-wa-glow:rgba(23,133,66,.45);
  --gn-gold-dim:rgba(198,166,100,.16);
  --gn-text:#f3f0f6;
  --gn-text-dim:#a59ead;
  --gn-text-faint:#8d8599;
  --gn-r-btn:30px 0 30px 30px;
  --gn-r-card:20px 0 20px 20px;
  --gn-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gn-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Sicherheitsnetz: einige Themes setzen kein border-box */
.gn-section,.gn-section *,.gn-konf,.gn-konf *,.gn-mobar,.gn-mobar *{box-sizing:border-box}

/* ---------- Abschnitte ---------- */

.gn-section{
  padding-block:clamp(56px,8vw,104px);
  background:var(--gn-ink);
  color:var(--gn-text);
  font-family:var(--gn-body);
  font-size:17px;
  line-height:1.65;
}
.gn-section.gn-alt{background:var(--gn-ink-2);border-block:1px solid var(--gn-line)}
/* "gn-paper" war frueher ein heller Abschnitt. Ein einzelner heller Block
   mitten in einer dunklen Seite wirkte wie ein Fremdkoerper. Jetzt hat er
   den Grund des Seitenkopfs darueber und schliesst ohne Linie an ihn an,
   Kopf und Pakete lesen sich so als eine Einheit. Die Klasse bleibt, weil
   sie auf der Preisseite im Editor steht. */
.gn-section.gn-paper{
  background:var(--gn-ink-2);border-bottom:1px solid var(--gn-line);
  padding-top:clamp(28px,3vw,40px)
}
.gn-section.gn-alt:has(+ .gn-section.gn-paper){border-bottom:0}
.gn-section.gn-tight{padding-block:clamp(44px,6vw,72px)}
.gn-section.gn-band{padding-block:clamp(56px,7vw,96px)}
.gn-section.gn-hero{padding-block:clamp(44px,6vw,80px) clamp(48px,7vw,88px)}

.gn-section h1,.gn-section h2,.gn-section h3{
  font-family:var(--gn-display);font-weight:800;line-height:1.1;
  letter-spacing:-.015em;text-wrap:balance;margin-block:0
}
.gn-section h1{font-size:clamp(2.1rem,5.4vw,3.9rem);letter-spacing:-.025em}
.gn-section h2{font-size:clamp(1.6rem,3.6vw,2.6rem)}
.gn-section h3{font-size:clamp(1.12rem,2vw,1.35rem);font-weight:700}
.gn-section p{margin-block:0}

.gn-lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--gn-text-dim);max-width:62ch}
.gn-kicker{
  font-family:var(--gn-display);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gn-gold);display:block
}
.gn-fine{font-size:.86rem;color:var(--gn-text-faint)}
.gn-center{text-align:center}
.gn-mt-auto{margin-top:auto}
.gn-hl{color:var(--gn-violet-lt)}

/* ---------- Wer wir sind: Magazinsatz ---------- */

.gn-hnarrow{max-width:26ch}
.gn-twocol{columns:2;column-gap:clamp(32px,5vw,64px);font-size:1.04rem;line-height:1.75;color:var(--gn-text-dim)}
.gn-twocol p{margin:0 0 16px;break-inside:avoid}
.gn-twocol p:last-child{margin-bottom:0}

/* ---------- Zitat als Pull-Quote ---------- */

.gn-section .gn-ford{
  margin:0;padding:0 0 0 .44em;border:0;background:none;
  font-size:clamp(1.45rem,3.4vw,2.4rem);display:block
}
.gn-section .gn-ford p{
  margin:0;font-family:var(--gn-display);font-weight:700;letter-spacing:-.015em;
  font-size:1em;line-height:1.26;text-wrap:balance;text-indent:-.44em;
  max-width:29ch;color:var(--gn-text)
}
.gn-section .gn-ford cite{
  display:flex;align-items:center;gap:16px;margin-top:clamp(20px,2.5vw,30px);
  font-family:var(--gn-display);font-weight:700;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gn-gold);font-style:normal
}
.gn-section .gn-ford cite::before{
  content:"";display:block;width:38px;height:2px;background:var(--gn-gold);flex:0 0 auto
}

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

.gn-section .wp-block-button__link,
.gn-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--gn-display);font-weight:600;font-size:.97rem;line-height:1.2;
  padding:15px 26px;border-radius:var(--gn-r-btn);border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:transform .18s,background .18s,border-color .18s,box-shadow .18s
}
.gn-btn:hover,.gn-section .wp-block-button__link:hover{transform:translateY(-2px)}

.gn-btn-primary,.wp-block-button.gn-primary .wp-block-button__link{
  background:var(--gn-violet);color:#fff;box-shadow:0 10px 30px -12px var(--gn-violet-glow)
}
.gn-btn-primary:hover,.wp-block-button.gn-primary .wp-block-button__link:hover{background:#8c36d6}

.gn-btn-wa,.wp-block-button.gn-wa .wp-block-button__link{
  background:var(--gn-wa);color:#fff;box-shadow:0 10px 30px -12px var(--gn-wa-glow)
}
.gn-btn-wa:hover,.wp-block-button.gn-wa .wp-block-button__link:hover{background:var(--gn-wa-hover);color:#fff}

.gn-btn-ghost,.wp-block-button.gn-ghost .wp-block-button__link{
  background:transparent;border-color:var(--gn-line-strong);color:var(--gn-text)
}
.gn-btn-ghost:hover,.wp-block-button.gn-ghost .wp-block-button__link:hover{border-color:var(--gn-gold);color:var(--gn-gold)}

.gn-btn-sm{padding:11px 18px;font-size:.88rem}
.gn-btn-block{width:100%}
.gn-btn:focus-visible,.gn-opt:focus-visible,.gn-link:focus-visible,.gn-konf input:focus-visible{
  outline:2px solid var(--gn-gold);outline-offset:3px
}

/* ---------- Bilder ---------- */

.gn-section img{border-radius:var(--gn-r-card);max-width:100%;height:auto;display:block}
.gn-section figure{margin:0}

/* ---------- Schlichte Aufzählung ---------- */

.gn-slist{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px)}
.gn-slist > *{border-top:1px solid var(--gn-line);padding-block:18px;margin:0}
.gn-slist strong{
  font-family:var(--gn-display);font-weight:600;font-size:1.04rem;display:block;color:var(--gn-text)
}
.gn-slist em{
  font-style:normal;display:block;margin-top:5px;color:var(--gn-text-dim);
  font-size:.95rem;max-width:46ch
}

/* ---------- Häkchenliste ---------- */

.gn-tick{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.gn-tick li{position:relative;padding-left:26px;color:var(--gn-text-dim)}
.gn-tick li::before{
  content:"";position:absolute;left:3px;top:.55em;width:11px;height:6px;
  border-left:2px solid var(--gn-gold);border-bottom:2px solid var(--gn-gold);
  transform:rotate(-45deg)
}

/* ---------- Nummerierte Schritte ---------- */

.gn-nsteps{list-style:none;counter-reset:gn;padding:0;margin:0;max-width:68ch;display:flex;flex-direction:column;gap:24px}
.gn-nsteps li{counter-increment:gn;position:relative;padding-left:34px}
.gn-nsteps li::before{
  content:counter(gn);position:absolute;left:0;top:2px;
  font-family:var(--gn-display);font-weight:700;color:var(--gn-gold);font-size:.95rem
}
.gn-nsteps strong{font-family:var(--gn-display);font-weight:600;display:block;margin-bottom:4px}
.gn-nsteps em{font-style:normal;color:var(--gn-text-dim)}

/* ---------- Zitate ---------- */

.gn-qpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
.gn-qpair figure,.gn-qpair blockquote{margin:0}
.gn-qpair blockquote{border:0;padding:0;background:none}
.gn-qpair > *{border-top:1px solid var(--gn-line);padding-top:22px}
.gn-qpair blockquote p,.gn-qpair p{
  font-family:var(--gn-display);font-weight:600;
  font-size:clamp(1.05rem,1.7vw,1.2rem);line-height:1.5;margin:0
}
.gn-qpair cite,.gn-qpair figcaption{
  display:block;margin-top:12px;font-size:.88rem;color:var(--gn-text-faint);font-style:normal
}

/* ---------- Häufige Fragen (Core-Block „Details“) ---------- */

.gn-faq{max-width:820px}
.gn-faq details{border-bottom:1px solid var(--gn-line);margin:0}
.gn-faq summary{
  cursor:pointer;list-style:none;padding-block:19px;display:flex;gap:16px;align-items:flex-start;
  font-family:var(--gn-display);font-weight:600;font-size:1.02rem
}
.gn-faq summary::-webkit-details-marker{display:none}
.gn-faq summary::after{content:"+";margin-left:auto;color:var(--gn-gold);font-size:1.3rem;line-height:1}
.gn-faq details[open] summary::after{content:"\2212"}
.gn-faq details > *:not(summary){padding-bottom:20px;color:var(--gn-text-dim);font-size:.96rem;max-width:70ch;margin-block:0}

/* ---------- Preistabelle ---------- */

.gn-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.gn-tier{
  position:relative;
  background:var(--gn-ink);border:1px solid var(--gn-line);border-radius:var(--gn-r-card);
  padding:28px 26px 26px;display:flex;flex-direction:column;gap:14px
}
/* Das empfohlene Paket hebt sich durch Farbe ab, nicht durch Hoehe. */
.gn-tier-feature{
  background:var(--gn-ink-3);border-color:rgba(168,108,232,.55);
  box-shadow:0 32px 60px -36px var(--gn-violet-glow)
}
.gn-section .gn-tier h3{color:var(--gn-text)}
/* Die Marke "Beliebteste Wahl" sitzt als Faehnchen auf der Kante. So nimmt
   sie im Paket keinen Platz weg und Preis und Liste stehen in allen drei
   Karten auf gleicher Hoehe. */
.gn-tlabel{
  position:absolute;top:0;left:26px;transform:translateY(-50%);
  background:var(--gn-violet);color:#fff;padding:5px 10px;border-radius:6px 0 6px 6px;
  font-family:var(--gn-display);font-weight:700;font-size:.66rem;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap
}
.gn-from{
  font-family:var(--gn-display);font-weight:600;font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gn-text-faint)
}
.gn-amount{
  font-family:var(--gn-display);font-weight:800;font-size:2.3rem;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--gn-text)
}
.gn-tier .gn-fine{color:var(--gn-text-dim)}
.gn-tier hr{border:0;border-top:1px solid var(--gn-line);margin-block:2px}
.gn-tier-feature hr{border-top-color:var(--gn-line-strong)}

/* Gleiche Zeilen in allen Karten: Name, Preis, Hinweis, Liste und Knopf
   liegen auf einer Linie, auch wenn ein Hinweis zwei Zeilen hat. */
@supports (grid-template-rows:subgrid){
  @media (min-width:981px){
    .gn-tiers{grid-template-rows:repeat(7,auto);row-gap:0}
    .gn-tier{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:14px}
    .gn-tier .gn-btn{align-self:end}
  }
}

/* ---------- Konfigurator ---------- */

.gn-konf{
  background:linear-gradient(180deg,var(--gn-ink-3),var(--gn-ink-2));
  border:1px solid var(--gn-line-strong);border-radius:var(--gn-r-card);
  padding:clamp(22px,3vw,36px);position:relative;overflow:hidden;
  color:var(--gn-text);font-family:var(--gn-body);font-size:17px;line-height:1.6
}
.gn-konf-head{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;
  margin-bottom:26px;position:relative
}
.gn-konf-q{font-family:var(--gn-display);font-weight:700;font-size:clamp(1.1rem,2vw,1.4rem);margin:0 0 4px}
.gn-konf-hint{font-size:.88rem;color:var(--gn-text-faint);margin:0}
.gn-konf-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.gn-steps{display:flex;align-items:center;gap:8px}
.gn-steps i{width:26px;height:4px;border-radius:2px;background:var(--gn-ink-4);display:block;transition:background .25s}
.gn-steps i.on{background:var(--gn-gold)}
.gn-step-lbl{font-size:.8rem;color:var(--gn-text-faint);font-variant-numeric:tabular-nums}
.gn-step[hidden]{display:none}
.gn-konf [hidden],.gn-mobar [hidden]{display:none!important}

.gn-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.gn-opts-3{grid-template-columns:repeat(3,1fr)}
.gn-opt-wide{grid-column:1/-1}
.gn-opt{
  text-align:left;background:var(--gn-ink);border:1px solid var(--gn-line);
  border-radius:16px 0 16px 16px;padding:16px 18px;cursor:pointer;
  display:flex;gap:13px;align-items:flex-start;color:var(--gn-text);
  font-family:var(--gn-body);font-size:1rem;
  transition:border-color .16s,background .16s,transform .16s
}
.gn-opt:hover{border-color:var(--gn-violet-lt);background:var(--gn-ink-4);transform:translateY(-2px)}
.gn-opt[aria-pressed="true"]{border-color:var(--gn-gold);background:var(--gn-gold-dim)}
.gn-box{
  flex:0 0 18px;height:18px;margin-top:3px;border:1.5px solid var(--gn-line-strong);
  border-radius:5px;display:grid;place-items:center;font-size:.7rem;color:transparent
}
.gn-opt[aria-pressed="true"] .gn-box{background:var(--gn-gold);border-color:var(--gn-gold);color:#1a1720}
.gn-t{display:block;font-family:var(--gn-display);font-weight:600;font-size:.97rem;line-height:1.3}
.gn-d{display:block;font-size:.82rem;color:var(--gn-text-faint);margin-top:3px;line-height:1.45}
.gn-ab{font-style:normal;font-weight:600;font-size:.86em;color:var(--gn-gold);margin-left:7px;white-space:nowrap}

.gn-konf-nav{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.gn-konf-nav:not(:has(button:not([hidden]))){display:none;margin-top:0}
.gn-link{
  background:none;border:0;color:var(--gn-text-faint);cursor:pointer;font-size:.88rem;
  font-family:var(--gn-body);text-decoration:underline;text-underline-offset:3px;padding:6px 0
}
.gn-link:hover{color:var(--gn-text)}

.gn-result{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.gn-price-box{
  background:var(--gn-ink);border:1px solid var(--gn-line);border-radius:16px 0 16px 16px;
  padding:22px;display:flex;flex-direction:column;gap:12px
}
.gn-price{
  font-family:var(--gn-display);font-weight:800;font-size:clamp(1.9rem,4vw,2.7rem);
  line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums
}
.gn-price.gn-price-sm{font-size:1.4rem;line-height:1.35}
.gn-price span{color:var(--gn-text-faint);font-size:.4em;font-weight:600;letter-spacing:0}
.gn-summary{list-style:none;padding:0;margin:2px 0 0;display:flex;flex-direction:column;gap:9px;font-size:.9rem}
.gn-summary li{display:flex;gap:10px;border-top:1px solid var(--gn-line);padding-top:9px}
.gn-sk{color:var(--gn-text-faint);flex:0 0 92px}
.gn-sv{color:var(--gn-text)}
.gn-field{display:flex;flex-direction:column;gap:6px;margin:6px 0 0}
.gn-field label{font-size:.84rem;color:var(--gn-text-dim)}
.gn-konf input[type=text]{
  background:var(--gn-ink);border:1px solid var(--gn-line-strong);border-radius:12px 0 12px 12px;
  padding:12px 14px;color:var(--gn-text);font-family:var(--gn-body);font-size:.95rem;width:100%
}
.gn-result-side{display:flex;flex-direction:column;gap:16px}
.gn-wa-preview{
  background:var(--gn-ink);border:1px solid var(--gn-line);border-radius:16px 0 16px 16px;
  padding:18px;font-size:.86rem;color:var(--gn-text-dim);white-space:pre-line;line-height:1.6
}
.gn-wa-preview b{
  color:var(--gn-text);font-family:var(--gn-display);font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:9px
}

/* ---------- Symbole für soziale Netzwerke ---------- */

.gn-social{display:flex;gap:10px;flex-wrap:wrap}
.gn-social a{
  width:40px;height:40px;display:grid;place-items:center;color:var(--gn-text-dim);
  border:1px solid var(--gn-line);border-radius:12px 0 12px 12px;text-decoration:none;
  transition:color .16s,border-color .16s,background .16s,transform .16s
}
.gn-social a:hover{color:var(--gn-gold);border-color:var(--gn-gold);background:var(--gn-gold-dim);transform:translateY(-2px)}
.gn-social a:focus-visible{outline:2px solid var(--gn-gold);outline-offset:3px}

/* ---------- Fester Balken auf dem Handy ---------- */

.gn-mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;gap:10px;
  background:rgba(18,16,21,.94);backdrop-filter:blur(12px);border-top:1px solid var(--gn-line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom))
}
.gn-mobar .gn-btn{flex:1}
.gn-mobar .gn-btn-wa{flex:2}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width:980px){
  .gn-result,.gn-tiers{grid-template-columns:1fr}
  .gn-tiers{row-gap:28px}
  .gn-tier-feature{box-shadow:none}
}
@media (max-width:760px){
  .gn-opts-3{grid-template-columns:1fr}
}
@media (max-width:680px){
  .gn-section{font-size:16px}
  .gn-slist,.gn-qpair{grid-template-columns:1fr}
  .gn-twocol{columns:1}
  body.gn-hat-leiste .gn-mobar{display:flex}
  body.gn-hat-leiste{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){
  .gn-btn,.gn-opt,.gn-section .wp-block-button__link{transition:none}
  .gn-btn:hover,.gn-opt:hover,.gn-section .wp-block-button__link:hover,.gn-social a:hover{transform:none}
}

/* ---------- Kleine Korrekturen gegenüber Kadence-Blockstilen ---------- */

.gn-section .wp-block-columns{gap:clamp(24px,4vw,48px)}
.gn-section .wp-block-group.gn-slist{display:grid}
.gn-section ul.gn-tick,.gn-section ol.gn-nsteps,.gn-section ul.gn-summary{padding-left:0}
.gn-section .wp-block-quote{border-left:0}
.gn-section .wp-block-details{background:none;border:0;padding:0}
.gn-section .wp-block-image figcaption{color:var(--gn-text-faint);font-size:.84rem;margin-top:8px}
.gn-section .wp-block-button__link{color:inherit}
.gn-section .wp-block-buttons{gap:12px}

/* ============================================================
   Anpassungen an die WordPress-Umgebung
   Kadence bringt eigene Abstaende, Schreibweisen und Container mit.
   Dieser Block bringt beides in Einklang. Er steht bewusst am Ende,
   damit er im Zweifel gewinnt.
   ============================================================ */

/* 1. Innenabstand und Inhaltsbreite, wie im Entwurf.
      Ohne das kleben Texte auf voller Breite am Bildschirmrand. */
.gn-section{padding-inline:clamp(20px,4vw,40px)}
.gn-section > *{width:100%;max-width:1290px;margin-inline:auto}

/* 2. Kadence schreibt Ueberschriften mit grossem Anfangsbuchstaben je Wort.
      Im Deutschen ist das falsch. */
.gn-section h1,.gn-section h2,.gn-section h3,.gn-section h4,
.gn-section .wp-block-button__link,
.gn-section .gn-btn,
.gn-konf,.gn-konf *,.gn-mobar .gn-btn{text-transform:none}

/* 3. Kadence setzt auf .single-content unter fast jedes Element 32 Pixel.
      Innerhalb unserer Abschnitte macht das Layout die Abstaende selbst. */
.single-content .gn-section,
.single-content .gn-section p,
.single-content .gn-section figure,
.single-content .gn-section ul,
.single-content .gn-section ol,
.single-content .gn-section table,
.single-content .gn-section details,
.single-content .gn-section blockquote,
.single-content .gn-section .wp-block-group,
.single-content .gn-section .wp-block-columns,
.single-content .gn-section .wp-block-column,
.single-content .gn-section .wp-block-buttons,
.single-content .gn-section .wp-block-image{margin-block:0}

/* 3b. Statt der Kadence-Abstaende ein eigener, ruhigerer Rhythmus.
   Der Zwischencontainer, den WordPress in jede Gruppe einzieht, muss dabei
   mitgenannt werden. Ohne ihn bekommen Abschnitte ohne Spalten gar keine
   Abstaende, dort klebten zum Beispiel die Knoepfe am Text. */
.single-content .gn-section > * + *,
.single-content .gn-section > .wp-block-group__inner-container > * + *,
.single-content .gn-section .wp-block-column > * + *{margin-top:20px}
.single-content .gn-section .gn-kicker + *{margin-top:10px}
.single-content .gn-section h1 + *,
.single-content .gn-section h2 + *,
.single-content .gn-section h3 + *{margin-top:14px}
.single-content .gn-section .wp-block-spacer + *{margin-top:0}

/* 4. Eigene Abstaende innerhalb der Bausteine wieder herstellen. */
.gn-section .gn-twocol p,
.gn-section .gn-intro-text p,
.gn-section .gn-prose p{margin:0 0 16px}
.gn-section .gn-twocol p:last-child,
.gn-section .gn-intro-text p:last-child,
.gn-section .gn-prose p:last-child{margin-bottom:0}
.gn-section .gn-faq details > *:not(summary){padding-bottom:20px}
.gn-section .gn-slist > *{padding-block:18px}
.gn-section .gn-ford cite{margin-top:clamp(20px,2.5vw,30px)}
.gn-section .gn-tick,.gn-section .gn-nsteps,.gn-section .gn-summary{padding-left:0}

/* 5. Bilder mit festem Ausschnitt statt Originalgroesse. */
.gn-section .gn-shot{margin:0;border-radius:var(--gn-r-card);overflow:hidden;background:var(--gn-ink-3)}
.gn-section .gn-shot img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.gn-section .gn-shot.gn-ar-43{aspect-ratio:4/3}
.gn-section .gn-shot.gn-ar-45{aspect-ratio:4/5}
@media (max-width:980px){.gn-section .gn-shot.gn-ar-45{aspect-ratio:16/10}}

/* 6. Kopfbereich im Stil des Entwurfs.
      Wirkt nur auf Seiten mit Glanznormal-Abschnitten.

      Die Farbe liegt auf "#masthead", weil das die aeussere Ebene ist und
      Kadence sie per ID setzt. Leicht durchscheinend mit Weichzeichner,
      damit beim Scrollen der Inhalt darunter durchschimmert wie im Entwurf.
      Die inneren Ebenen sind deshalb durchsichtig. */
body.gn-page #masthead.site-header{
  background:rgba(18,16,21,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  /* Linie als Schatten nach innen statt als Rahmen: sonst waere die
     Kopfzeile 81 statt 80 Pixel hoch. */
  box-shadow:inset 0 -1px 0 var(--gn-line)
}
body.gn-page #main-header,
body.gn-page #mobile-header,
body.gn-page .site-header-row-container-inner{background:transparent}

/* Logo: im Entwurf 52 Pixel hoch, auf dem Handy 40. */
body.gn-page #masthead .site-branding img{height:52px;width:auto;max-width:none}
@media (max-width:860px){
  body.gn-page #masthead .site-branding img{height:40px}
}

/* Menue: Kadence gewinnt mit "..primary-menu-container > ul li.menu-item > a",
   deshalb hier dieselbe Kette plus "body.gn-page". */
body.gn-page .main-navigation .primary-menu-container > ul{gap:6px}
body.gn-page .main-navigation .primary-menu-container > ul > li.menu-item > a{
  font-family:var(--gn-display);font-weight:600;font-size:.92rem;text-transform:none;
  padding:9px 14px;border-radius:12px 0 12px 12px;color:var(--gn-text-dim);
  transition:color .15s,background .15s
}
body.gn-page .main-navigation .primary-menu-container > ul > li.menu-item > a:hover{
  color:var(--gn-text);background:var(--gn-ink-3)
}
body.gn-page .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
body.gn-page .main-navigation .primary-menu-container > ul > li.menu-item.current_page_item > a{
  color:var(--gn-gold);background:var(--gn-gold-dim)
}
/* Knopf oben rechts, mit WhatsApp-Zeichen (Simple Icons, CC0). */
body.gn-page .site-header .header-button{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gn-wa);border-color:var(--gn-wa);color:#fff;
  font-family:var(--gn-display);font-weight:600;font-size:.88rem;line-height:1.2;
  text-transform:none;padding:11px 18px;
  border-radius:30px 0 30px 30px;
  box-shadow:0 10px 30px -12px var(--gn-wa-glow)
}
body.gn-page .site-header .header-button::before{
  content:"";width:17px;height:17px;flex:0 0 auto;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center/contain no-repeat
}
body.gn-page .site-header .header-button:hover{background:var(--gn-wa-hover);border-color:var(--gn-wa-hover);color:#fff}

/* 7. Hinweis "Auch bei Ihnen vor Ort moeglich." unter den Leistungsueberschriften. */
.gn-section .gn-vorort{font-size:.88rem;color:var(--gn-gold);margin-block:0}
.single-content .gn-section .gn-vorort + *{margin-top:10px}

/* ==========================================================================
   8. Nachbesserungen nach dem Livegang
   ========================================================================== */

/* 8a. Kadence setzt auf ".entry-content .alignfull" ausdruecklich
   padding-left und padding-right auf 0. Das ist spezifischer als unser
   ".gn-section" und hat deshalb unseren Seitenrand ausgehebelt: alle Texte
   klebten am linken Bildschirmrand. Die dreifache Klasse hebt unsere Regel
   ueber die von Kadence, ohne !important und ohne Abhaengigkeit davon,
   welches Stylesheet zuerst geladen wird. */
.gn-section.gn-section.gn-section{padding-inline:clamp(20px,4vw,40px)}

/* 8b. WordPress legt bei Gruppen-Bloecken noch einen Container
   ".wp-block-group__inner-container" zwischen die Gruppe und ihren Inhalt.
   Dadurch hatten unsere zweispaltigen Raster nur ein einziges Kind und
   fielen auf eine Spalte zusammen: die Leistungsliste "Fahrzeugpflege von
   A bis Z" und die beiden Kundenstimmen. "display:contents" blendet den
   Zwischencontainer aus dem Layout aus, die Absaetze werden dadurch wieder
   zu direkten Rasterfeldern. */
.gn-slist > .wp-block-group__inner-container,
.gn-qpair > .wp-block-group__inner-container{display:contents}

.gn-slist > *,
.gn-slist > .wp-block-group__inner-container > *{
  border-top:1px solid var(--gn-line);padding-block:18px;margin:0
}

.gn-qpair > *,
.gn-qpair > .wp-block-group__inner-container > *{
  border-top:1px solid var(--gn-line);padding-top:22px
}

/* 8c. Die Kopfzeile besteht aus zwei Ebenen: innen "#main-header", den wir
   dunkel gefaerbt hatten, aussen ".site-header", der von Kadence weiss
   bleibt. Unsere ein Pixel hohe Trennlinie lag auf dieser weissen Flaeche
   und wurde dadurch als weisser Strich unter dem Kopf sichtbar. Die
   Hintergrundfarbe steht jetzt oben in Abschnitt 6 mit in der Regel. */

/* 8d. Der schwebende WhatsApp-Knopf des Plugins Click-to-Chat sitzt unten
   rechts. Solange der feste Balken eingeschaltet ist, liegen beide
   uebereinander, deshalb weicht der Knopf dann. Ohne Balken bleibt er, er
   ist auf dem Handy der einzige dauerhaft sichtbare Kontaktweg. */
@media (max-width:860px){
  body.gn-hat-leiste #ht-ctc-chat{display:none!important}
}

/* ==========================================================================
   9. Mitlaufende Kopfzeile
   ========================================================================== */

/* Die Kopfzeile soll beim Scrollen oben stehen bleiben.
   "position:sticky" allein genuegt dafuer nicht: Kadence setzt auf
   "#wrapper" und auf den Koerper der Seite "overflow" mit Werten, die einen
   eigenen Scroll-Bereich aufmachen, und darin verliert sticky seine Wirkung.
   Deshalb stellen wir beide auf "clip" waagerecht und "visible" senkrecht.
   Waagerecht wird weiterhin abgeschnitten, es entsteht also nach wie vor
   kein Querbalken, senkrecht gibt es aber keinen eigenen Scroll-Bereich
   mehr und sticky greift.
   Bewusst nicht auf ".gn-page" beschraenkt, damit sich die Kopfzeile auf
   Impressum, Datenschutz und AGB genauso verhaelt. */
body{overflow-x:clip;overflow-y:visible}
#wrapper.site{overflow-x:clip;overflow-y:visible}

#masthead.site-header{position:sticky;top:0;z-index:99}
body.admin-bar #masthead.site-header{top:32px}
@media (max-width:782px){
  /* Im Frontend haengt die WordPress-Werkzeugleiste auf schmalen Schirmen
     nicht fest oben, deshalb kein Versatz. */
  body.admin-bar #masthead.site-header{top:0}
}

/* Sprungmarken sollen nicht unter der Kopfzeile landen. */
html{scroll-padding-top:96px}

/* ==========================================================================
   10. Fußbereich
   ========================================================================== */

/* Liegt im Widget der mittleren Fußzeile und wirkt deshalb auf allen Seiten,
   auch auf Impressum, Datenschutz und AGB. Darum bewusst nicht an
   ".gn-page" gebunden. Hintergrundfarbe hier statt im Customizer, damit
   Fuß und Seite dieselbe Farbe treffen. */
#colophon.site-footer{background:var(--gn-ink);border-top:1px solid var(--gn-line)}

.gn-footer{
  font-family:var(--gn-body);font-size:.9rem;line-height:1.6;
  color:var(--gn-text-faint);text-align:left
}
.gn-footer .wp-block-columns{gap:clamp(24px,3vw,40px)}

/* Eigenes Raster für den Shortcode [gn_footer]: 1,4 zu 1 zu 1 wie im Entwurf. */
.gn-footer .gn-fgrid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(28px,4vw,48px);align-items:start
}
@media (max-width:860px){
  .gn-footer .gn-fgrid{grid-template-columns:1fr;gap:32px}
}

/* WordPress schiebt in Gruppen einen Zwischencontainer ein, deshalb hier
   durchgehend Nachfahren-Selektoren statt "> *". */
.gn-footer p{margin-block:0;max-width:36ch}
.gn-footer a{text-decoration:none;color:var(--gn-text-dim)}
.gn-footer a:hover{color:var(--gn-gold)}

.gn-footer .gn-flogo{margin:0 0 16px;display:block}
.gn-footer .gn-flogo img{height:46px;width:auto;max-width:100%;display:block}

.gn-footer .gn-social{margin-top:18px}

.gn-footer .gn-fh{
  font-family:var(--gn-display);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gn-text);
  margin:0 0 12px
}
.gn-footer ul.gn-flist{
  list-style:none;padding-left:0;margin:0;
  display:flex;flex-direction:column;gap:9px
}
.gn-footer ul.gn-flist li{margin:0}

/* Zeile ganz unten. Die Trennlinie gehoert zum Fussbereich selbst, damit die
   untere Kadence-Zeile mit ihrem eigenen Rahmen entfallen kann. */
.gn-footer .gn-fcopy{
  margin:clamp(28px,4vw,40px) 0 0;max-width:none;
  padding-top:18px;border-top:1px solid var(--gn-line);
  font-size:.82rem;color:var(--gn-text-faint)
}

@media (max-width:860px){
  .gn-footer{text-align:left}
  .gn-footer p{max-width:none}
}

/* ==========================================================================
   11. Inhaltsrahmen von Kadence abschalten
   ========================================================================== */

/* Kadence kennt je Seite die Einstellung "Inhaltsstil": bei "Mit Rahmen"
   legt es um den Inhalt einen Kasten mit eigener Farbe, Schlagschatten und
   2 rem Innenabstand. Der Innenabstand oben erzeugt dann eine Lücke zwischen
   Kopfzeile und erstem Abschnitt, und der Kasten hat ein anderes Dunkel als
   unsere Abschnitte. Auf Seiten mit Glanznormal-Abschnitten bringt jeder
   Abschnitt seinen eigenen Hintergrund und Innenabstand mit, deshalb kommt
   der Rahmen hier weg, egal wie die Seite eingestellt ist. */
body.gn-page .entry-content-wrap{padding:0}
body.gn-page .entry.content-bg{background:none;box-shadow:none;border-radius:0}

/* ==========================================================================
   12. Verweise im Fließtext
   ========================================================================== */

/* Kadence faerbt jeden Verweis mit der Akzentfarbe aus der Palette, dadurch
   stand die Telefonnummer im Kontaktbereich in Lila. Im Fließtext soll sie
   weiss sein und erst beim Ueberfahren Farbe annehmen. Knoepfe sind
   ausgenommen, die bringen ihre eigene Farbe mit. */
.gn-section a:not(.wp-block-button__link):not(.gn-btn){
  color:var(--gn-text);text-decoration:none;transition:color .15s
}
.gn-section a:not(.wp-block-button__link):not(.gn-btn):hover{
  color:var(--gn-violet-lt)
}

/* ==========================================================================
   13. Menü auf dem Handy
   ========================================================================== */

/* Die Schublade kommt von Kadence in Weiß. Sie gilt auf allen Seiten,
   deshalb hier bewusst ohne ".gn-page", sonst wäre sie auf Impressum,
   Datenschutz und AGB hell und auf den anderen Seiten dunkel. */
#mobile-drawer .drawer-inner{background:var(--gn-ink)}
#mobile-drawer .drawer-overlay{background:rgba(0,0,0,.6)}
#mobile-drawer .toggle-close-bar{background:var(--gn-text)}

#mobile-drawer .mobile-navigation ul li:not(.gn-menu-cta) a{
  font-family:var(--gn-display);font-weight:600;font-size:1rem;
  text-transform:none;color:var(--gn-text-dim);padding-block:14px
}
#mobile-drawer .mobile-navigation ul li:not(.gn-menu-cta) a:hover{color:var(--gn-text)}
#mobile-drawer .mobile-navigation ul li.current-menu-item > a{color:var(--gn-gold)}
#mobile-drawer .mobile-navigation ul li:not(.gn-menu-cta){border-bottom:1px solid var(--gn-line)}

/* Die beiden Schnellkontakte am Ende der Liste, statt des festen Balkens. */
#mobile-menu .gn-menu-cta{border-bottom:0;margin-top:14px}
#mobile-menu .gn-menu-cta + .gn-menu-cta{margin-top:10px}
#mobile-menu .gn-dbtn{
  display:block;width:100%;box-sizing:border-box;text-align:center;
  font-family:var(--gn-display);font-weight:600;font-size:.95rem;
  text-transform:none;text-decoration:none;
  padding:14px 18px;border-radius:var(--gn-r-btn);border:1px solid transparent
}
#mobile-drawer #mobile-menu .gn-dbtn-wa{background:var(--gn-wa);color:#fff}
#mobile-drawer #mobile-menu .gn-dbtn-wa:hover{background:var(--gn-wa-hover);color:#fff}
#mobile-drawer #mobile-menu .gn-dbtn-ghost{background:transparent;color:var(--gn-text);border-color:var(--gn-line-strong)}
#mobile-drawer #mobile-menu .gn-dbtn-ghost:hover{color:var(--gn-text);border-color:var(--gn-text-dim)}

/* ==========================================================================
   14. Rechtsseiten: Impressum, Datenschutzerklärung, AGB
   ========================================================================== */

/* Diese Seiten sind reiner Text aus dem Editor, ohne Glanznormal-Abschnitte.
   Das Theme erkennt sie an ihrer Adresse (inc/settings.php, "seiten") und
   gibt ihnen die Klassen "gn-page gn-legal". Kopf und Fuß kommen dadurch
   von allein, hier folgt nur die Textseite selbst: dunkler Grund, Seitenkopf
   wie bei Angebot und Preise, eine gut lesbare Spalte. Kadence-Einstellungen
   der Seiten (Titelbereich, Breite, Rahmen) spielen keine Rolle mehr. */

body.gn-legal,
body.gn-legal #inner-wrap,
body.gn-legal .site-main{background:var(--gn-ink)}

/* Beide Behälter so breit wie unsere Abschnitte, damit Titel und Text
   links genau auf der Linie der anderen Seiten stehen. */
body.gn-legal .entry-hero .hero-container,
body.gn-legal .content-container.site-container{
  max-width:calc(1290px + 2 * clamp(20px,4vw,40px));
  padding-inline:clamp(20px,4vw,40px);margin-inline:auto;box-sizing:border-box
}

/* Seitenkopf */
body.gn-legal .entry-hero{background:var(--gn-ink-2);border-bottom:1px solid var(--gn-line)}
body.gn-legal .entry-hero .entry-hero-container-inner{background:transparent;min-height:0}
body.gn-legal .entry-hero .hero-section-overlay{display:none}
body.gn-legal .entry-hero .hero-container{min-height:0}
body.gn-legal .entry-hero .entry-header{
  display:block;text-align:left;min-height:0;margin:0;
  padding-block:clamp(44px,6vw,72px) clamp(36px,5vw,56px)
}
body.gn-legal .entry-hero .entry-header::before{
  content:"Rechtliches";display:block;margin-bottom:14px;
  font-family:var(--gn-display);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gn-gold)
}
body.gn-legal .entry-hero .entry-title{
  font-family:var(--gn-display);font-weight:800;text-transform:none;
  font-size:clamp(1.75rem,3.6vw + .6rem,3.1rem);line-height:1.08;letter-spacing:-.02em;
  color:var(--gn-text);margin:0;
  /* "Datenschutzerklärung" ist auf dem Handy breiter als der Bildschirm. */
  -webkit-hyphens:auto;hyphens:auto
}

/* Textspalte */
body.gn-legal .content-area{margin-block:0}
body.gn-legal .entry-content-wrap{padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,104px)}
body.gn-legal .entry-content{
  max-width:72ch;font-family:var(--gn-body);font-size:17px;line-height:1.7;
  color:var(--gn-text-dim)
}
body.gn-legal .entry-content > *{margin-block:0}
body.gn-legal .entry-content > * + *{margin-top:14px}

body.gn-legal .entry-content h2,
body.gn-legal .entry-content h3,
body.gn-legal .entry-content h4{
  font-family:var(--gn-display);color:var(--gn-text);text-transform:none;letter-spacing:-.01em
}
body.gn-legal .entry-content h2{
  font-weight:700;font-size:clamp(1.35rem,2.2vw,1.6rem);line-height:1.2;
  margin-top:56px;padding-top:28px;border-top:1px solid var(--gn-line)
}
body.gn-legal .entry-content > h2:first-child{margin-top:0;padding-top:0;border-top:0}
body.gn-legal .entry-content h3{font-weight:600;font-size:1.12rem;line-height:1.3;margin-top:36px}
body.gn-legal .entry-content h4{font-weight:600;font-size:1rem;line-height:1.35;margin-top:28px}
body.gn-legal .entry-content h2 + *,
body.gn-legal .entry-content h3 + *,
body.gn-legal .entry-content h4 + *{margin-top:10px}
body.gn-legal .entry-content h2 + h3{margin-top:22px}

body.gn-legal .entry-content strong{color:var(--gn-text);font-weight:600}
body.gn-legal .entry-content a{
  color:var(--gn-text);text-decoration:underline;text-decoration-color:var(--gn-line-strong);
  text-underline-offset:.2em;overflow-wrap:anywhere;transition:color .15s
}
body.gn-legal .entry-content a:hover{color:var(--gn-violet-lt);text-decoration-color:currentColor}
body.gn-legal .entry-content ul,
body.gn-legal .entry-content ol{padding-left:1.2em}
body.gn-legal .entry-content li + li{margin-top:6px}
body.gn-legal .entry-content li::marker{color:var(--gn-gold)}

/* Hervorgehobener Kasten, zum Beispiel für das Widerspruchsrecht nach
   Art. 21 DSGVO, das deutlich getrennt von allem anderen stehen muss. */
body.gn-legal .entry-content .gn-hinweis{
  padding:20px 24px;border-left:3px solid var(--gn-gold);
  background:var(--gn-ink-2);border-radius:0 12px 12px 0
}
body.gn-legal .entry-content .gn-hinweis > *,
body.gn-legal .entry-content .gn-hinweis > .wp-block-group__inner-container > *{margin-block:0}
body.gn-legal .entry-content .gn-hinweis > * + *,
body.gn-legal .entry-content .gn-hinweis > .wp-block-group__inner-container > * + *{margin-top:12px}

@media (max-width:680px){
  body.gn-legal .entry-content .gn-hinweis{padding:16px 18px}
}

/* Stand-Zeile ganz unten */
body.gn-legal .entry-content .gn-stand{font-size:.88rem;color:var(--gn-text-faint)}

/* ==========================================================================
   15. Feinschliff nach der Gesamtprüfung
   ========================================================================== */

/* Hinter den Abschnitten lag noch das Grau aus der Kadence-Palette. Man sah
   es beim Laden und wenn man auf dem Handy über das Seitenende hinaus
   zieht. */
body.gn-page{background:var(--gn-ink)}

/* Auf dem Handy stehen die Spalten untereinander, in der Reihenfolge, in
   der sie im Editor stehen. Bei den Leistungen wechselt das Bild aber
   zwischen links und rechts, dadurch folgten auf dem Handy zwei Bilder
   direkt aufeinander und man wusste nicht, welches wozu gehört. Deshalb
   kommt auf dem Handy das Bild immer zuerst, der Aufmacher ausgenommen. */
@media (max-width:781px){
  .gn-section:not(.gn-hero) .wp-block-columns > .wp-block-column:has(.gn-shot){order:-1}
}

/* Fehlerseite */
body.gn-404 .gn-404-inhalt{margin:0}
body.gn-404 .gn-404-inhalt .gn-section.gn-hero{padding-block:clamp(64px,10vw,140px)}
body.gn-404 .gn-404-inhalt .gn-lede{max-width:52ch}
body.gn-404 .gn-404-inhalt .gn-fine a{color:var(--gn-text-dim);text-decoration:underline;text-underline-offset:.2em}
body.gn-404 .gn-404-inhalt .gn-fine a:hover{color:var(--gn-violet-lt)}

/* Die Telefonnummer im Kontaktbereich war auf dem Handy nur so hoch wie
   eine Textzeile und damit schwer zu treffen. */
.gn-section a[href^="tel:"]:not(.wp-block-button__link):not(.gn-btn){
  display:inline-block;padding-block:8px;font-weight:600;font-size:1.05rem
}

/* ==========================================================================
   16. Feinschliff nach dem Design-Check
   ========================================================================== */

/* Einsatzorte unter "Zuhause im Kreis Borken" (Shortcode [gn_orte]). */
.gn-section .gn-orte{font-size:.95rem;color:var(--gn-text-dim)}
.single-content .gn-section .gn-lede + .gn-orte{margin-top:12px}

/* Keine einzelnen Woerter allein in der letzten Zeile. */
.gn-section p,.gn-section li,body.gn-legal .entry-content p{text-wrap:pretty}

/* Knoepfe geben beim Druecken nach, wie ein echter Schalter. */
.gn-btn:active,
.gn-section .wp-block-button__link:active,
.gn-opt:active,
body.gn-page .site-header .header-button:active,
#mobile-menu .gn-dbtn:active{transform:translateY(0) scale(.98)}

/* Sichtbarer Rahmen fuer alle, die mit der Tastatur unterwegs sind.
   Vorher hatten nur die eigenen Knoepfe einen, Menue, Fuss und Fragen
   nicht. */
html body :is(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--gn-gold);outline-offset:3px
}

/* Fragen reagieren beim Ueberfahren. */
.gn-faq summary{transition:color .15s}
.gn-faq summary:hover{color:var(--gn-gold)}

/* Sprung zum Rechner ("Richtwert berechnen") gleitet statt zu springen. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  .gn-btn:active,.gn-opt:active,.gn-section .wp-block-button__link:active{transform:none}
}

/* ==========================================================================
   17. Optimierungsschleife, Runde 1 (Theme 1.2.0)
   ========================================================================== */

/* Dunkle Seite: Bildlaufleisten und Eingabefelder des Browsers ebenfalls
   dunkel. */
:root{color-scheme:dark}

/* Fingertipp ohne Verzoegerung und mit Rueckmeldung in Markenfarbe. */
a,button,summary,.gn-opt{touch-action:manipulation;-webkit-tap-highlight-color:rgba(198,166,100,.22)}

/* Sprunglink "Zum Inhalt springen": bei Tastaturfokus gut lesbar oben links.
   Vorher Violett auf Dunkel mit 2,4:1. */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible{
  clip:auto!important;clip-path:none!important;width:auto;height:auto;overflow:visible;
  position:fixed;top:12px;left:12px;z-index:100000;
  background:var(--gn-gold);color:var(--gn-ink);
  font-family:var(--gn-display);font-weight:700;font-size:.95rem;line-height:1.2;text-decoration:none;
  padding:12px 18px;border-radius:12px 0 12px 12px;outline:2px solid var(--gn-text);outline-offset:2px
}

/* Aufmacher: Ueberschrift auf dem Rechner hoechstens zwei Zeilen, Bild nie
   hoeher als der Bildschirm, damit Text und Knopf nicht mittig schweben. */
.gn-section.gn-hero h1{font-size:clamp(2.1rem,3.4vw + .4rem,3rem)}
@media (min-width:782px){
  .gn-section.gn-hero .gn-shot{max-height:min(560px,calc(100dvh - 220px))}
}

/* Rechner: Frage bekommt nach jedem Schritt den Fokus. Rahmen nur, wenn mit
   der Tastatur bedient wird. */
.gn-konf .gn-konf-q:focus{outline:none}
.gn-konf .gn-konf-q:focus-visible{outline:2px solid var(--gn-gold);outline-offset:4px;border-radius:4px}
.gn-konf input::placeholder{color:var(--gn-text-faint);opacity:1}

/* WhatsApp-Symbol in der Handy-Kopfzeile (functions.php, gn_kopf_whatsapp). */
.gn-kopf-wa-item{display:flex;align-items:center;margin-right:6px}
.gn-kopf-wa-item[hidden]{display:none}
.gn-kopf-wa{
  display:grid;place-items:center;width:44px;height:44px;
  background:var(--gn-wa);color:#fff;border-radius:12px 0 12px 12px;
  transition:background .15s,transform .15s
}
.gn-kopf-wa:hover{background:var(--gn-wa-hover);color:#fff}
.gn-kopf-wa:active{transform:scale(.96)}

/* Angebotsseite: sechs Bild-Text-Abschnitte im Wechsel wirkten eintoenig.
   Jeder dritte (Politur, Geruchsentfernung) zeigt das Bild breit oben und
   darunter Text und Liste nebeneinander. So stehen nie mehr als zwei
   gleich gebaute Abschnitte hintereinander. */
@media (min-width:782px){
  /* WordPress erzwingt ab 782 px "nowrap" mit !important, deshalb hier
     ebenso, sonst bleiben Bild und Text nebeneinander. */
  body.gn-seite-angebot .entry-content > .gn-section:nth-child(3n of .gn-section:has(.gn-shot)) .wp-block-columns{
    flex-wrap:wrap!important;row-gap:clamp(28px,3.5vw,44px)
  }
  body.gn-seite-angebot .entry-content > .gn-section:nth-child(3n of .gn-section:has(.gn-shot)) .wp-block-column{flex-basis:100%}
  body.gn-seite-angebot .entry-content > .gn-section:nth-child(3n of .gn-section:has(.gn-shot)) .wp-block-column:has(.gn-shot){order:-1}
  body.gn-seite-angebot .entry-content > .gn-section:nth-child(3n of .gn-section:has(.gn-shot)) .gn-shot{aspect-ratio:21/8}
  body.gn-seite-angebot .entry-content > .gn-section:nth-child(3n of .gn-section:has(.gn-shot)) .wp-block-column:not(:has(.gn-shot)){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);align-items:start
  }
  body.gn-seite-angebot .entry-content > .gn-section:nth-child(3n of .gn-section:has(.gn-shot)) .wp-block-column:not(:has(.gn-shot)) > *{grid-column:1}
  body.gn-seite-angebot .entry-content > .gn-section:nth-child(3n of .gn-section:has(.gn-shot)) .wp-block-column:not(:has(.gn-shot)) > ul{
    grid-column:2;grid-row:1 / span 6;margin-top:0
  }
}