/*
Theme Name: Elephant Finance
Theme URI: https://elephant-finance.de
Author: Elephant Finance GmbH
Description: Website der Elephant Finance GmbH — Versicherungsmakler und Immobilienmakler in Düren-Birkesdorf und Übach-Palenberg. Gestaltung abgeleitet aus dem Logo: geometrische Grotesk in Kleinbuchstaben, gekappte Ecken, Markengrün und Gold.
Version: 2.5
Requires at least: 6.0
Requires PHP: 8.0
License: proprietär — nur zur Nutzung durch die Elephant Finance GmbH
Text Domain: elephant-finance
*/

/* ============================================================
   Schriftart Outfit — von eurem eigenen Server

   Bewusst NICHT von Google geladen. Beim Laden über Google
   Fonts wird die IP-Adresse jedes Besuchers in die USA
   übertragen. Deutsche Gerichte haben darin einen Verstoß
   gegen das Persönlichkeitsrecht gesehen; es gibt Abmahnwellen.
   Lokal ausgeliefert ist die Frage vom Tisch – und schneller
   ist es obendrein.

   Outfit steht unter der SIL Open Font License, die
   Auslieferung über eigene Server ist ausdrücklich erlaubt.
   ============================================================ */
@font-face{
  font-family:"Outfit"; font-style:normal; font-weight:300; font-display:swap;
  src:url("fonts/outfit-latin-ext-300-normal.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:"Outfit"; font-style:normal; font-weight:300; font-display:swap;
  src:url("fonts/outfit-latin-300-normal.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:"Outfit"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/outfit-latin-ext-400-normal.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:"Outfit"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/outfit-latin-400-normal.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:"Outfit"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/outfit-latin-ext-500-normal.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:"Outfit"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/outfit-latin-500-normal.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:"Outfit"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/outfit-latin-ext-600-normal.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:"Outfit"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/outfit-latin-600-normal.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;
}

/* ============================================================
   ELEPHANT FINANCE — Gestaltung, abgeleitet aus dem Logo

   Vier Dinge kommen direkt aus dem Wappen:
   1) SCHRIFT   Der Schriftzug ist eine geometrische Grotesk in
                Kleinbuchstaben. Also läuft die ganze Seite in
                Outfit, Überschriften klein geschrieben.
   2) FACETTEN  Der Elefant besteht aus geschnittenen Flächen mit
                harten Diagonalen. Also: gekappte Ecken statt
                runder Radien – überall, wo ein Kasten sitzt.
   3) INNENLINIE Das Wappen hat eine Haarlinie im Abstand zur
                Außenkante. Diese doppelte Fassung wiederholen
                die wichtigen Karten.
   4) LICHT     Im Logo kommt das Licht von oben links: helles
                Gold oben, dunkles unten. Alle Goldflächen
                folgen derselben Richtung.
   ============================================================ */
:root{
  /* Markenfarben, direkt aus der Logodatei gemessen */
  /* Offizielle Hausfarben laut Farbfächer.
     CMYK-Werte für den Druck in Klammern. */
  --forest:      #004034;   /* Grün      92/45/72/57 */
  --gold:        #DCC479;   /* Gold hell 16/20/60/2  */
  --gold-deep:   #9A874F;   /* Gold satt 36/36/72/20 */

  /* Abgeleitete Töne – reine Auf- und Abstufungen der drei
     Hausfarben, keine zusätzlichen Farben. */
  --forest-deep: #002B23;   /* Grün abgedunkelt, für Tiefe   */
  --forest-soft: #D9E2DE;   /* Grün stark aufgehellt         */
  --gold-mid:    #BBA664;   /* Mischung der beiden Goldtöne  */
  --gold-soft:   #F2EEDF;   /* Gold stark aufgehellt         */

  --ink:        #0C1B17;
  --slate:      #33443E;
  --stone:      #6B7B75;
  --line:       #D3DBD6;
  --paper:      #E9EDEA;
  --surface:    #F6F8F6;
  --white:      #FFFFFF;

  --max: 1240px;
  --gut: clamp(20px, 5vw, 56px);

  --f-display: "Outfit", "Century Gothic", sans-serif;
  --f-body:    "Outfit", system-ui, sans-serif;
  --f-data:    "Outfit", system-ui, sans-serif;

  /* Facettenschnitt – die Kappung der Ecken */
  --cut:   22px;
  --cut-s: 10px;

  /* Lichtrichtung wie im Wappen: oben links hell */
  --crest: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 976 1072'><path fill-rule='evenodd' fill='%23000' d='M198.0,105.0 135.0,137.0 109.0,173.0 56.0,735.0 64.0,768.0 130.0,838.0 210.0,906.0 301.0,967.0 369.0,998.0 447.0,1015.0 521.0,1015.0 595.0,999.0 654.0,974.0 741.0,918.0 812.0,861.0 886.0,789.0 911.0,750.0 854.0,160.0 819.0,128.0 745.0,96.0 566.0,65.0 446.0,63.0 338.0,72.0ZM270.0,772.0 269.0,772.0 268.0,773.0 266.0,773.0 265.0,774.0 263.0,774.0 262.0,775.0 261.0,775.0 260.0,776.0 259.0,776.0 258.0,777.0 257.0,777.0 255.0,779.0 254.0,779.0 252.0,781.0 251.0,781.0 250.0,782.0 249.0,782.0 248.0,783.0 247.0,783.0 246.0,784.0 244.0,784.0 243.0,785.0 242.0,785.0 241.0,786.0 240.0,786.0 239.0,787.0 238.0,787.0 237.0,788.0 236.0,788.0 234.0,790.0 233.0,790.0 232.0,791.0 231.0,791.0 230.0,792.0 229.0,792.0 228.0,793.0 227.0,793.0 226.0,794.0 225.0,794.0 224.0,795.0 223.0,795.0 221.0,797.0 220.0,797.0 219.0,798.0 218.0,798.0 217.0,799.0 216.0,799.0 213.0,802.0 213.0,803.0 212.0,804.0 213.0,805.0 213.0,806.0 218.0,811.0 219.0,811.0 221.0,813.0 222.0,813.0 224.0,815.0 226.0,815.0 227.0,816.0 231.0,816.0 232.0,815.0 233.0,815.0 235.0,813.0 236.0,813.0 256.0,793.0 257.0,793.0 269.0,781.0 269.0,780.0 272.0,777.0 272.0,776.0 273.0,775.0ZM167.0,191.0 136.0,532.0 207.0,486.0 378.0,688.0 428.0,599.0 371.0,633.0 190.0,417.0 191.0,404.0 375.0,251.0 605.0,349.0 656.0,300.0 537.0,159.0 540.0,148.0 649.0,164.0 766.0,304.0 705.0,438.0 792.0,439.0 744.0,477.0 678.0,500.0 639.0,573.0 482.0,707.0 436.0,891.0 495.0,889.0 522.0,767.0 572.0,719.0 621.0,871.0 720.0,829.0 844.0,747.0 846.0,675.0 793.0,182.0 669.0,138.0 517.0,122.0 365.0,129.0 213.0,163.0Z'/></svg>");
  --gold-face: linear-gradient(148deg, var(--gold) 0%, var(--gold-mid) 52%, var(--gold-deep) 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  font-weight:350; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px}

/* ---------- Facettenschnitt ----------
   Zwei gegenüberliegende Ecken gekappt, wie die Schnittkanten
   im Wappen. Ein Radius wäre hier falsch: im Logo ist keine
   einzige Ecke rund.                                        */
.fct{
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.fct-s{
  clip-path:polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)),
                    calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
}

/* ---------- Typografie ----------
   Kleinschreibung wie im Schriftzug. Eigennamen bleiben groß. */
.h-xl,.h-l,.h-m,.h-s{
  font-family:var(--f-display); font-weight:600;
  line-height:1.02; letter-spacing:-.028em; margin:0;
  text-wrap:balance;
}
.h-xl{font-size:clamp(2.5rem, 6.6vw, 4.9rem); letter-spacing:-.035em}
.h-l {font-size:clamp(1.95rem, 4.3vw, 3.1rem); line-height:1.06}
.h-m {font-size:clamp(1.4rem, 2.6vw, 1.95rem); line-height:1.1; font-weight:500}
.h-s {font-size:clamp(1.06rem, 1.7vw, 1.24rem); line-height:1.24; font-weight:500}

/* Auszeichnung wie das Wort „finance" im Logo:
   klein, leicht, weit gesperrt. */
.eyebrow{
  font-family:var(--f-data); font-size:.82rem; font-weight:300;
  letter-spacing:.34em; color:var(--stone);
  margin:0 0 18px;
}
.eyebrow--gold{color:var(--gold-deep)}
.eyebrow--forest{color:var(--forest)}
.lede{font-size:clamp(1.04rem,1.5vw,1.2rem); line-height:1.6; color:var(--slate); max-width:60ch; font-weight:350}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}
section{padding-block:clamp(64px,9vw,124px)}

/* Trennung zwischen Abschnitten: Haarlinie mit Kerbe,
   wie die Lücken zwischen den Facetten im Wappen. */
.notch{position:relative; height:1px; background:var(--line)}
.notch::after{
  content:""; position:absolute; left:50%; top:-4px; width:9px; height:9px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--paper); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-display); font-weight:500; font-size:.95rem;
  letter-spacing:-.005em;
  padding:15px 26px; text-decoration:none; border:0; cursor:pointer;
  clip-path:polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  transition:background .2s ease, color .2s ease, transform .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--ink{background:var(--forest); color:var(--surface)}
.btn--ink:hover{background:#005C4A}
.btn--gold{background:var(--gold-face); color:var(--forest-deep); font-weight:600}
.btn--gold:hover{filter:brightness(1.07)}
.btn--forest{background:var(--forest); color:#fff}
.btn--forest:hover{background:var(--forest-deep)}
/* Umrisse: der Rand wird über einen Untergrund erzeugt, damit
   die gekappte Ecke mitgeschnitten wird. */
.btn--ghost{background:var(--ink); color:var(--ink); padding:1px}
.btn--ghost > span.inner{
  display:inline-flex; align-items:center; gap:.6em; padding:14px 25px;
  background:var(--paper);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn--ghost:hover > span.inner{background:var(--ink); color:var(--surface)}
.btn--ghost-light{background:rgba(255,255,255,.45); color:var(--surface); padding:1px}
.btn--ghost-light > span.inner{
  display:inline-flex; align-items:center; gap:.6em; padding:14px 25px;
  background:var(--forest-deep);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn--ghost-light:hover > span.inner{background:var(--surface); color:var(--forest-deep)}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(3px)}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(4,64,52,.95); backdrop-filter:blur(10px);
}
.bar{display:flex; align-items:center; gap:28px; height:78px}
.mark{display:flex; align-items:center; text-decoration:none; flex:none; background:none}
/* Das !important ist hier ausnahmsweise richtig: Elementor und
   Slider Revolution geben Bildern eine helle Hintergrundfläche,
   dadurch lag das Logo auf einem beigen Kasten. Solange diese
   Plugins aktiv sind, muss die Regel gewinnen. */
.mark img{
  height:36px; width:auto;
  background:none !important; background-color:transparent !important;
  box-shadow:none !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; max-width:none;
}
@media (max-width:420px){.mark img{height:29px}}
nav.main{display:flex; gap:28px; margin-left:auto}
nav.main a{
  font-family:var(--f-display); font-size:.94rem; font-weight:400;
  text-decoration:none; color:rgba(247,248,248,.76); padding-block:6px;
  position:relative;
}
nav.main a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
nav.main a:hover{color:#fff}
nav.main a:hover::after{transform:scaleX(1)}
.bar .btn{padding:11px 19px; font-size:.88rem}
.burger{display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.3); padding:9px 11px; cursor:pointer}
.burger span{display:block; width:20px; height:1.5px; background:var(--surface); margin:4px 0}
@media (max-width:900px){
  nav.main{display:none}
  .bar > .btn{display:none}
  .burger{display:block}
}
.drawer{display:none; border-top:1px solid rgba(255,255,255,.14); background:var(--forest); padding:14px var(--gut) 26px}
.drawer.open{display:block}
.drawer a{display:block; padding:13px 0; text-decoration:none; color:var(--surface); font-family:var(--f-display); font-weight:400; font-size:1.08rem; border-bottom:1px solid rgba(255,255,255,.14)}
.drawer .btn{margin-top:18px; width:100%; justify-content:center}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(44px,6vw,84px) clamp(40px,5vw,64px)}
.hero .h-xl{max-width:15ch}
.hero .lede{margin-top:26px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(24px,4vw,56px); align-items:center}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr; gap:8px}}

.stage{
  position:relative; width:100%; max-width:430px; aspect-ratio:1/1;
  margin-inline:auto; background:#092A23;
  /* gekappte Ecken wie überall auf der Seite */
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow:0 22px 50px rgba(0,43,35,.22);
}
@media (max-width:940px){.stage{order:-1; max-width:270px; margin-bottom:18px}}
.stage img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- Zwei Geschäftsfelder ---------- */
.pillars{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:clamp(40px,5vw,68px)}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar{
  position:relative; padding:34px 32px 30px; text-decoration:none;
  display:flex; flex-direction:column; min-height:236px;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:transform .25s ease;
}
.pillar:hover{transform:translateY(-3px)}
/* Innenlinie – die zweite Fassung aus dem Wappen */
.pillar::after{
  content:""; position:absolute; inset:8px; pointer-events:none;
  clip-path:polygon(calc(var(--cut) - 8px) 0, 100% 0, 100% calc(100% - var(--cut) + 8px),
                    calc(100% - var(--cut) + 8px) 100%, 0 100%, 0 calc(var(--cut) - 8px));
  box-shadow:inset 0 0 0 1px currentColor; opacity:.22;
}
.pillar--ins{background:var(--white); color:var(--gold-deep)}
.pillar--ins h2,.pillar--ins p{color:var(--ink)}
.pillar--re{background:var(--forest); color:var(--gold)}
.pillar--re h2{color:var(--surface)}
.pillar .kick{font-family:var(--f-data); font-size:.78rem; font-weight:300; letter-spacing:.3em; margin-bottom:14px; opacity:.85}
.pillar p{font-size:1rem; margin-top:12px; max-width:38ch; font-weight:350}
.pillar--re p{color:rgba(247,248,248,.8)}
.pillar .go{margin-top:auto; padding-top:22px; font-family:var(--f-display); font-weight:500; font-size:.94rem; display:flex; align-items:center; gap:.5em}

/* ---------- Faktenband ---------- */
.facts{background:var(--forest); color:var(--surface); padding-block:0}
.facts-grid{display:grid; grid-template-columns:repeat(4,1fr)}
@media (max-width:820px){.facts-grid{grid-template-columns:repeat(2,1fr)}}
.fact{padding:36px 26px; border-right:1px solid rgba(255,255,255,.14)}
.fact:last-child{border-right:0}
@media (max-width:820px){
  .fact:nth-child(2n){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
}
.fact b{
  display:block; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1; letter-spacing:-.035em;
  background:var(--gold-face); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fact span{display:block; margin-top:12px; font-family:var(--f-data); font-size:.8rem; font-weight:300; letter-spacing:.16em; color:rgba(247,248,248,.62); line-height:1.5}

.head{max-width:64ch; margin-bottom:clamp(36px,5vw,60px)}
.head .lede{margin-top:20px}

/* ---------- Leistungskarten ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid-3{grid-template-columns:1fr}}
.card{
  background:var(--surface); padding:32px 28px 30px; display:flex; flex-direction:column;
  position:relative;
  clip-path:polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)),
                    calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
  transition:background .2s ease;
}
.card:hover{background:var(--white)}
.card .num{font-family:var(--f-data); font-size:.8rem; font-weight:300; letter-spacing:.3em; color:var(--gold-deep); margin-bottom:20px}
.card p{margin-top:12px; font-size:1rem; color:var(--slate); font-weight:350}
.card ul{margin:18px 0 0; padding:0; list-style:none}
.card li{font-size:.96rem; color:var(--slate); padding:8px 0 8px 20px; position:relative; border-top:1px solid var(--line); font-weight:350}
/* Marker als kleine Facette, nicht als Punkt */
.card li::before{
  content:""; position:absolute; left:0; top:16px; width:8px; height:8px;
  background:var(--gold-face);
  clip-path:polygon(0 0, 100% 0, 100% 100%);
}

/* ---------- Immobilien ---------- */
.re{background:var(--surface)}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.chip{
  font-family:var(--f-data); font-size:.9rem; font-weight:400; letter-spacing:.01em;
  padding:10px 20px; border:1px solid var(--line); background:transparent;
  cursor:pointer; color:var(--slate);
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition:all .18s ease;
}
.chip:hover{border-color:var(--forest); color:var(--forest)}
.chip[aria-pressed="true"]{background:var(--forest); border-color:var(--forest); color:#fff}

.re-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:980px){.re-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.re-grid{grid-template-columns:1fr}}
.obj{
  background:var(--white); display:flex; flex-direction:column; text-decoration:none;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:transform .22s ease;
}
.obj:hover{transform:translateY(-4px)}
/* Bildunterkante schräg – dieselbe Diagonale wie im Wappen */
.obj-img{
  aspect-ratio:4/3; background:var(--forest-soft); position:relative; overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 26px));
  margin-bottom:-2px;
}
.obj-img img{width:100%; height:100%; object-fit:cover}
.obj-tag{
  position:absolute; left:0; top:16px; background:var(--forest); color:var(--gold);
  font-family:var(--f-data); font-size:.76rem; font-weight:400; letter-spacing:.14em;
  padding:7px 14px 7px 16px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.obj-tag--res{background:var(--gold-deep); color:#fff}
.obj-body{padding:18px 22px 24px; display:flex; flex-direction:column; flex:1}
.obj-loc{font-family:var(--f-data); font-size:.8rem; font-weight:300; letter-spacing:.24em; color:var(--stone); margin-bottom:9px}
.obj h3{font-family:var(--f-display); font-weight:500; font-size:1.1rem; line-height:1.26; margin:0 0 16px; letter-spacing:-.018em}
.obj-data{margin-top:auto; border-top:1px solid var(--line); padding-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.obj-data div{font-family:var(--f-data); font-size:1rem; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.obj-data small{display:block; font-size:.72rem; letter-spacing:.14em; color:var(--stone); font-weight:300; margin-top:3px}
.obj-price{
  margin-top:16px; font-family:var(--f-display); font-weight:600; font-size:1.4rem;
  color:var(--forest); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.obj-price small{display:block; font-family:var(--f-data); font-size:.72rem; letter-spacing:.14em; color:var(--stone); font-weight:300; margin-top:4px; letter-spacing:.1em}
.re-empty{padding:52px 24px; text-align:center; border:1px dashed var(--line); color:var(--stone); grid-column:1/-1}
.re-foot{margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
.re-note{font-family:var(--f-data); font-size:.86rem; font-weight:300; color:var(--stone); letter-spacing:.06em}

/* ---------- Elefanten-Check ---------- */
.check{background:var(--forest-deep); color:var(--surface); position:relative; overflow:hidden}
/* Wappen als großes, sehr leises Wasserzeichen */
.check::before{
  content:""; position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:min(42vw,480px); aspect-ratio:509/560; opacity:.055; pointer-events:none;
  background:var(--gold); -webkit-mask:var(--crest) center/contain no-repeat;
  mask:var(--crest) center/contain no-repeat;
}
.check .wrap{position:relative}
.check .lede{color:rgba(247,248,248,.74)}
.check-box{
  margin-top:44px; background:rgba(255,255,255,.05);
  padding:clamp(26px,4vw,46px); position:relative;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.check-box::after{
  content:""; position:absolute; inset:9px; pointer-events:none;
  clip-path:polygon(calc(var(--cut) - 9px) 0, 100% 0, 100% calc(100% - var(--cut) + 9px),
                    calc(100% - var(--cut) + 9px) 100%, 0 100%, 0 calc(var(--cut) - 9px));
  box-shadow:inset 0 0 0 1px var(--gold); opacity:.24;
}
.progress{display:flex; gap:6px; margin-bottom:30px; position:relative}
.progress i{flex:1; height:3px; background:rgba(255,255,255,.16); transition:background .3s ease}
.progress i.on{background:var(--gold-face)}
.q-count{font-family:var(--f-data); font-size:.82rem; font-weight:300; letter-spacing:.3em; color:var(--gold); margin-bottom:16px}
.q-text{font-family:var(--f-display); font-weight:500; font-size:clamp(1.3rem,2.5vw,1.9rem); line-height:1.16; margin:0 0 28px; letter-spacing:-.025em; max-width:26ch}
.opts{display:grid; gap:10px; max-width:640px; position:relative}
.opt{
  text-align:left; background:transparent; color:var(--surface);
  border:1px solid rgba(255,255,255,.24);
  padding:16px 20px; font-family:var(--f-body); font-size:1.02rem; font-weight:350; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.opt:hover{background:rgba(220,196,121,.18); border-color:var(--gold); transform:translateX(3px)}
.opt em{
  font-family:var(--f-data); font-style:normal; font-size:.86rem; font-weight:500; color:var(--forest-deep);
  background:var(--gold-face); padding:3px 9px; flex:none;
  clip-path:polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.result{display:none; position:relative}
.result.show{display:block; animation:fade .45s ease}
@keyframes fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.result-score{font-family:var(--f-data); font-size:.82rem; font-weight:300; letter-spacing:.3em; color:var(--gold); margin-bottom:14px}
.result h3{font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.08; margin:0 0 18px; letter-spacing:-.03em}
.result p{color:rgba(247,248,248,.78); max-width:56ch; font-weight:350}
.result-list{margin:22px 0 30px; padding:0; list-style:none; max-width:56ch}
.result-list li{padding:11px 0 11px 24px; border-top:1px solid rgba(255,255,255,.15); position:relative; font-size:1rem; color:rgba(247,248,248,.86); font-weight:350}
.result-list li::before{
  content:""; position:absolute; left:0; top:19px; width:9px; height:9px;
  background:var(--gold-face); clip-path:polygon(0 0, 100% 0, 100% 100%);
}
.result-cta{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- Ablauf ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:32px 32px 36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative}
.step:last-child{border-right:0}
@media (max-width:820px){.step{border-right:0}}
.step .n{
  font-family:var(--f-display); font-weight:600; font-size:2.5rem; line-height:1;
  letter-spacing:-.05em; display:block; margin-bottom:20px;
  background:var(--gold-face); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step p{margin-top:12px; font-size:1rem; color:var(--slate); font-weight:350}

/* ---------- Team ----------
   Porträts in Wappenform – die auffälligste Anleihe beim Logo. */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media (max-width:900px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}}
.person{text-align:center}
.person .frame{position:relative; padding:6px; background:var(--gold-face);
  clip-path:polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%)}
.person img{
  aspect-ratio:3/4; object-fit:cover; object-position:top center; width:100%;
  clip-path:polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
  filter:grayscale(1) contrast(1.05); transition:filter .35s ease;
}
.person:hover img{filter:grayscale(0)}
.person h3{font-family:var(--f-display); font-weight:500; font-size:1.1rem; margin:18px 0 4px; letter-spacing:-.02em}
.person span{font-family:var(--f-data); font-size:.82rem; font-weight:300; letter-spacing:.18em; color:var(--stone)}

/* ---------- Netzwerk ---------- */
.partners{background:var(--forest); color:var(--surface)}
.partners .lede{color:rgba(247,248,248,.76)}
.seal-row{display:flex; align-items:center; gap:clamp(20px,4vw,44px); margin-top:44px; flex-wrap:wrap}
.seal{width:clamp(160px,20vw,230px); height:auto; flex:none; background:#fff; padding:14px 16px;
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px)}
.plist{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px}
@media (max-width:760px){.plist{grid-template-columns:1fr}}
.plist div{
  background:rgba(255,255,255,.06); padding:30px 28px;
  clip-path:polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)),
                    calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
}
.plist b{
  display:block; font-family:var(--f-display); font-weight:600; font-size:2rem;
  letter-spacing:-.035em; margin-bottom:10px;
  background:var(--gold-face); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.plist p{font-size:1rem; color:rgba(247,248,248,.78); font-weight:350}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,68px); align-items:start}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
.loc{border-top:1px solid var(--line); padding:22px 0}
.loc h3{font-family:var(--f-display); font-weight:500; font-size:1.05rem; margin:0 0 8px; letter-spacing:-.02em}
.loc p,.loc a{font-size:1rem; color:var(--slate); text-decoration:none; font-weight:350}
.loc a:hover{color:var(--gold-deep)}
form.enq{
  background:var(--white); padding:clamp(24px,3.5vw,38px); position:relative;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.field{margin-bottom:18px}
.field label{display:block; font-family:var(--f-data); font-size:.8rem; font-weight:300; letter-spacing:.22em; color:var(--stone); margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--f-body); font-size:1.02rem; font-weight:350; color:var(--ink);
  padding:13px 14px; border:1px solid var(--line); background:var(--surface);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold-deep); outline:none; background:#fff}
.field textarea{min-height:118px; resize:vertical}
.consent{display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--stone); line-height:1.5; margin-bottom:22px; font-weight:350}
.consent input{margin-top:4px; flex:none; width:16px; height:16px; accent-color:var(--gold-deep)}
form.enq .btn{width:100%; justify-content:center}
.form-msg{margin-top:14px; font-family:var(--f-data); font-size:.9rem; font-weight:400; display:none}
.form-msg.show{display:block}

/* ---------- Footer ---------- */
footer.site{background:var(--forest-deep); color:rgba(247,248,248,.7); padding-block:58px 34px; font-size:.98rem; font-weight:350}
.f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px}
@media (max-width:860px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.f-grid{grid-template-columns:1fr}}
footer.site h4{font-family:var(--f-data); font-size:.8rem; font-weight:300; letter-spacing:.28em; color:var(--gold); margin:0 0 16px}
footer.site a{text-decoration:none; color:rgba(247,248,248,.7)}
footer.site a:hover{color:var(--gold)}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{margin-bottom:9px}
.f-mark{margin-bottom:16px}
.f-mark img{background:none !important; box-shadow:none !important; padding:0 !important}
header.site img, footer.site img{background:none !important; border-radius:0 !important}
.f-bottom{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-family:var(--f-data); font-size:.84rem; font-weight:300; letter-spacing:.1em; color:rgba(247,248,248,.5)}
.legal-note{margin-top:18px; font-size:.88rem; line-height:1.65; color:rgba(247,248,248,.46); max-width:72ch; font-weight:300}

/* ---------- Einblenden beim Scrollen ---------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.rv{opacity:1; transform:none}}

/* ---------- Arbeitsnotiz, vor Livegang entfernen ---------- */
.todo{
  background:var(--gold-soft); padding:16px 20px; font-family:var(--f-data);
  font-size:.88rem; font-weight:350; line-height:1.6; color:#4A3608; margin-top:26px;
  border-left:3px solid var(--gold-deep);
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.rechtstext section{padding-block:clamp(48px,7vw,88px)}
.rechtstext h1{margin-bottom:clamp(28px,4vw,44px)}
.rt{max-width:74ch}
.rt h2{
  font-family:var(--f-display); font-weight:500; font-size:1.16rem;
  letter-spacing:-.02em; margin:38px 0 10px; color:var(--forest);
}
.rt h2:first-child{margin-top:0}
.rt p{margin:0 0 14px; color:var(--slate); font-weight:350}
.rt b{color:var(--ink); font-weight:500}
.rt a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px}
.rt a:hover{color:var(--forest)}
.rt ul{margin:0 0 14px; padding:0; list-style:none}
.rt li{
  position:relative; padding:6px 0 6px 20px; color:var(--slate); font-weight:350;
}
.rt li::before{
  content:""; position:absolute; left:0; top:15px; width:8px; height:8px;
  background:var(--gold-face); clip-path:polygon(0 0, 100% 0, 100% 100%);
}
.rt-linie{border:0; border-top:1px solid var(--line); margin:40px 0 34px}
.rt-stand{margin-top:38px; font-size:.9rem; color:var(--stone)}
.rt-intro{
  background:var(--gold-soft); padding:20px 24px; margin-bottom:34px;
  color:var(--ink) !important; font-weight:350;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* ============================================================
   Rechner

   Bewusst großzügig gesetzt: große Eingabefelder, große Zahlen,
   viel Abstand. Ein Rechner wird oft am Handy bedient und mit
   den Augen überflogen – eng gesetzte Formulare schrecken ab.
   ============================================================ */

/* Zweitschrift nur für Zahlen und Beschriftungen im Rechner:
   gleiche Ziffernbreite lässt Beträge zeilenweise vergleichen. */
@font-face{
  font-family:"Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

.rechner{background:var(--forest-deep); color:var(--surface)}
.rechner section{padding-block:clamp(56px,8vw,110px)}
.rechner h1,.rechner h2{color:#fff}
.rechner .lede{color:rgba(247,248,248,.7); font-size:clamp(1.1rem,1.7vw,1.32rem)}
.rk h2{font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:16px}

.rk-tabs{display:flex; flex-wrap:wrap; gap:10px; margin:clamp(34px,5vw,56px) 0 clamp(36px,5vw,56px)}
/* Reiter in Markengrün, Schrift wie das Logo – sie sollen als
   Erstes ins Auge fallen. Der aktive Reiter wird golden. */
.rk-tabs .chip{
  background:var(--forest); border-color:var(--forest);
  color:var(--gold);
  font-family:var(--f-display); font-weight:600; font-size:1.12rem;
  letter-spacing:-.015em; text-transform:none;
  padding:19px 36px;
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px),
                    calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.rk-tabs .chip:hover{background:#065C4A; border-color:#065C4A; color:var(--gold-lite,#E8DCA8)}
/* Der aktive Reiter dreht das Verhältnis um: Gold trägt, Grün schreibt. */
.rk-tabs .chip[aria-selected="true"]{
  background:var(--gold); border-color:var(--gold);
  color:var(--forest); font-weight:600;
}

.rk-intro{
  color:rgba(247,248,248,.62); max-width:58ch; margin-bottom:clamp(34px,4vw,48px);
  font-weight:350; font-size:1.08rem; line-height:1.7;
}
.rk-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start}
@media (max-width:960px){.rk-grid{grid-template-columns:1fr}}
@media (min-width:961px){.rk-out{position:sticky; top:100px}}

.rk-in, .rk-out{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.11);
  padding:clamp(30px,3.4vw,48px);
}
.rk-out{border-left:3px solid var(--gold)}

/* --- Eingaben --- */
.rk-in label{
  display:block; margin-bottom:40px;
  font-family:"Plex Mono",monospace; font-size:.84rem; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:rgba(247,248,248,.7);
}
.rk-in label:last-child{margin-bottom:6px}
.rk-paar{display:grid; grid-template-columns:1fr 1fr; gap:0 24px}
@media (max-width:440px){.rk-paar{grid-template-columns:1fr}}

.rk-in input[type=number], .rk-in select{
  display:block; width:100%; margin-top:15px; padding:20px 22px;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.28);
  font:400 1.75rem "Plex Mono",monospace; color:#fff;
  border-radius:0; appearance:none; letter-spacing:0;
}
.rk-in select{
  font-size:1.2rem; cursor:pointer; padding-right:52px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 26px) 56%, calc(100% - 18px) 56%;
  background-size:8px 8px, 8px 8px; background-repeat:no-repeat;
}
.rk-in select option{background:var(--forest-deep); color:#fff}
.rk-in input[type=number]:focus, .rk-in select:focus{
  border-color:var(--gold); outline:none; background:rgba(0,0,0,.42);
}
.rk-einheit{
  display:block; margin-top:11px; font-family:"Plex Mono",monospace;
  font-size:.8rem; letter-spacing:.11em; color:rgba(247,248,248,.42);
}
.rk-einheit b{color:var(--gold); font-weight:500}

.rk-in input[type=range]{
  display:block; width:100%; margin:22px 0 12px; height:8px;
  appearance:none; border-radius:99px; cursor:pointer; background:rgba(255,255,255,.16);
}
.rk-in input[type=range]::-webkit-slider-thumb{
  appearance:none; width:28px; height:28px; border-radius:50%;
  background:#fff; border:0; box-shadow:0 2px 10px rgba(0,0,0,.6); cursor:grab;
}
.rk-in input[type=range]::-moz-range-thumb{
  width:28px; height:28px; border-radius:50%; background:#fff; border:0; cursor:grab;
}
.rk-wert{
  display:block; font-family:"Plex Mono",monospace; font-size:1.3rem; font-weight:500;
  letter-spacing:.01em; color:var(--gold); text-transform:none;
}
.rk-check{display:flex; align-items:center; gap:15px; text-transform:none; letter-spacing:0; margin-bottom:34px}
.rk-check input{width:24px; height:24px; accent-color:var(--gold); flex:none; margin:0}
.rk-check span{
  font-family:var(--f-body); font-size:1.06rem; font-weight:400;
  color:rgba(247,248,248,.88); text-transform:none; letter-spacing:0; line-height:1.4;
}

/* --- Aufklappbares --- */
.rk-mehr{margin-top:10px; border-top:1px solid rgba(255,255,255,.11); padding-top:30px}
.rk-mehr > summary, .rk-erklaerung > summary{
  cursor:pointer; list-style:none;
  font-family:"Plex Mono",monospace; font-size:.86rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:13px;
}
.rk-mehr > summary::-webkit-details-marker,
.rk-erklaerung > summary::-webkit-details-marker{display:none}
.rk-mehr > summary::before, .rk-erklaerung > summary::before{
  content:"+"; font-size:1.4rem; line-height:1; width:18px; flex:none;
}
.rk-mehr[open] > summary::before, .rk-erklaerung[open] > summary::before{content:"–"}
.rk-mehr > summary:hover, .rk-erklaerung > summary:hover{color:#fff}
.rk-mehr-innen{padding-top:38px}

.rk-erklaerung{
  margin-top:26px; border:1px solid rgba(255,255,255,.11);
  border-left:3px solid rgba(220,196,121,.4); padding:clamp(26px,3vw,38px);
}
.rk-erklaerung dl{margin:30px 0 0; display:grid; gap:24px}
.rk-erklaerung dt{
  font-family:"Plex Mono",monospace; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:8px;
}
.rk-erklaerung dd{
  margin:0; font-size:1.02rem; line-height:1.75; font-weight:350;
  color:rgba(247,248,248,.74); max-width:74ch;
}
.rk-erklaerung dd b{color:#fff; font-weight:500}

/* --- Ergebnis --- */
.rk-haupt{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.rk-haupt > span{
  font-family:"Plex Mono",monospace; font-size:.86rem; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(247,248,248,.7);
}
.rk-haupt b{
  font-family:"Plex Mono",monospace; font-weight:500;
  font-size:clamp(2.6rem,6vw,3.9rem); line-height:1; letter-spacing:-.03em;
  color:var(--gold); white-space:nowrap;
}
.rk-sub{
  margin:16px 0 clamp(30px,4vw,44px); font-size:.98rem; font-weight:350;
  color:rgba(247,248,248,.5); line-height:1.6;
}
/* Jede Ergebniszeile bekommt so viel Luft, dass sie einzeln
   lesbar bleibt – vorher klebten die Werte aneinander. */
.rk-zeile{
  display:flex; justify-content:space-between; align-items:baseline; gap:26px;
  padding:32px 0; border-top:1px solid rgba(255,255,255,.1);
}
.rk-zeile span{
  font-family:"Plex Mono",monospace; font-size:.84rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(247,248,248,.62); line-height:1.7;
}
.rk-zeile b{
  font-family:"Plex Mono",monospace; font-weight:500; font-size:1.5rem;
  color:#fff; white-space:nowrap; line-height:1.2;
}
.rk-zeile--stark{padding:36px 0}
.rk-zeile--stark b{color:var(--gold); font-size:1.85rem}
@media (max-width:520px){
  /* Am Handy untereinander, sonst wird es gequetscht */
  .rk-zeile{flex-direction:column; align-items:flex-start; gap:10px; padding:26px 0}
}
.rk-fuss{
  margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  font-size:1rem; line-height:1.7; color:rgba(247,248,248,.52); font-weight:350;
}

/* --- Abschluss --- */
.rk-cta{
  margin-top:clamp(52px,7vw,88px); background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.11); border-left:3px solid var(--gold);
  padding:clamp(34px,4.5vw,56px); display:flex; gap:34px; align-items:center; flex-wrap:wrap;
}
.rk-cta > div{flex:1 1 360px}
.rk-cta p{margin-top:16px; color:rgba(247,248,248,.7); font-weight:350; max-width:52ch; font-size:1.05rem; line-height:1.7}
/* Rechtliche Hinweise deutlich abgesetzt und eingerahmt –
   sie gehören dazu, sollen aber nicht mit den Rechnern
   verschwimmen. */
.rk-recht{
  margin-top:clamp(64px,9vw,120px);
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.1);
  padding:clamp(28px,3.4vw,44px);
  font-size:.96rem; line-height:1.85;
  color:rgba(247,248,248,.5); font-weight:350; max-width:none;
}
.rk-recht b{
  display:block; margin-bottom:12px;
  font-family:"Plex Mono",monospace; font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); font-weight:400;
}
.rk-recht a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}