/* ============================================================
   REPUBLIC PAST – Optischer Feinschliff der Startseite
   ENTWURF, 25.08.2026

   Diese Datei ändert AUSSCHLIESSLICH die Gestaltung.
   Kein Wort Text wird verändert, keine Farbe, keine Schrift
   und keine Bildauswahl. Ergänzt werden ausschliesslich:
   Rhythmus der Abschnitte, gleiche Kartenhöhen, saubere
   Ausrichtung, Prozessführung im Ablauf und ruhigere Abstände.
   ============================================================ */

:root{
  --rp-line-soft:#e6dbc7;
  --rp-lift:0 14px 34px rgba(35,37,31,.10);
  --rp-lift-2:0 22px 52px rgba(35,37,31,.16);
}

/* ------------------------------------------------------------
   1. Grundrhythmus – die Seite bekommt eine sichtbare Gliederung
   ------------------------------------------------------------ */
.rp-section{padding:92px 0}
.rp-section + .rp-section-white,
.rp-section-white + .rp-section-white{border-top:1px solid var(--rp-line-soft)}

/* neue, ruhige Papierfläche als Gegengewicht zum vielen Weiss */
.rp-section-paper{
  background:
    linear-gradient(180deg,#faf5ec 0%,#f7f1e5 100%);
  border-top:1px solid var(--rp-line-soft);
  border-bottom:1px solid var(--rp-line-soft);
}

/* Überschriften brechen gleichmässig statt mit Einzelwortzeilen */
.rp-section-head h2,
.rp-intro-copy h2,
.rp-hero h1{text-wrap:balance}

.rp-section-head p{max-width:660px}

/* ------------------------------------------------------------
   2. Kopfzeile – klarer abgesetzt, ruhiger Stand
   ------------------------------------------------------------ */
.rp-header{
  border-bottom:1px solid var(--rp-line);
  box-shadow:0 1px 0 rgba(255,255,255,.6), 0 10px 24px -20px rgba(35,37,31,.6);
}
.rp-nav a:not(.rp-nav-cta){
  position:relative;
  padding-bottom:3px;
}
.rp-nav a:not(.rp-nav-cta)::after{
  content:"";
  position:absolute;
  left:0; right:100%; bottom:0;
  height:2px;
  background:var(--rp-gold);
  transition:right .22s ease;
}
.rp-nav a:not(.rp-nav-cta):hover::after{right:0}
.rp-nav a.rp-nav-cta{
  background:var(--rp-olive);
  color:#fffdf9;
  border-color:var(--rp-olive);
  box-shadow:0 6px 16px -8px rgba(41,49,39,.8);
}
.rp-nav a.rp-nav-cta:hover{background:#1f2a1e;border-color:#1f2a1e;color:#fff}

/* ------------------------------------------------------------
   3. Hero – Bild bekommt mehr Ruhe und einen echten Rahmen
   ------------------------------------------------------------ */
.rp-hero-visual{
  height:520px;
  border-color:rgba(227,199,152,.85);
  box-shadow:0 34px 80px rgba(0,0,0,.42);
}
.rp-hero-visual::before{inset:22px -22px -22px 22px;border-color:rgba(227,199,152,.32)}
.rp-promises li{letter-spacing:.005em}

/* ------------------------------------------------------------
   4. Kontaktwege unter dem Hero – drei gleichwertige Felder
   ------------------------------------------------------------ */
.rp-contact-choices{
  background:var(--rp-white);
  border-bottom:1px solid var(--rp-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.rp-choice{
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.rp-choice::before{
  width:44px;
  transition:width .25s ease;
}
.rp-choice:hover::before{width:100px}
.rp-choice:hover{background:#faf3e7}
.rp-choice strong{letter-spacing:.005em}

/* ------------------------------------------------------------
   5. Ankaufsschwerpunkte – gleich hohe Karten, ruhiges Raster
   ------------------------------------------------------------ */
.rp-head-gross{margin-bottom:46px}

.rp-category{
  display:flex;
  flex-direction:column;
  background:var(--rp-white);
  border:1px solid var(--rp-line-soft);
  border-radius:var(--rp-radius);
  overflow:hidden;
  box-shadow:var(--rp-shadow-soft);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.rp-category:hover{
  transform:translateY(-4px);
  box-shadow:var(--rp-lift-2);
  border-color:var(--rp-gold-soft);
}
.rp-category-image{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .5s ease;
}
.rp-category-large .rp-category-image{aspect-ratio:16/9}
.rp-category:hover .rp-category-image{transform:scale(1.028)}

.rp-category-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:26px 28px 30px;
  border-top:3px solid var(--rp-gold);
}
.rp-category-tag{
  color:var(--rp-gold);
  letter-spacing:.16em;
  font-weight:800;
}
.rp-category h3{
  margin:8px 0 10px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:26px;
  line-height:1.2;
}
.rp-category-large h3{font-size:30px}
.rp-category p{
  margin:0;
  color:#57534b;
  font-size:16.5px;
  line-height:1.62;
}
/* dezenter Weiterlese-Hinweis, erscheint beim Überfahren */
.rp-category-body::after{
  content:"";
  display:block;
  width:30px;
  height:2px;
  margin-top:18px;
  background:var(--rp-gold-soft);
  opacity:.55;
  transition:width .25s ease, opacity .25s ease;
}
.rp-category:hover .rp-category-body::after{width:64px;opacity:1}

/* ------------------------------------------------------------
   6. Einfacher erster Schritt – Text und Hinweiskasten in Balance
   ------------------------------------------------------------ */
.rp-intro-grid{align-items:stretch;gap:56px}
.rp-intro-copy{align-self:center;max-width:640px}
.rp-intro-copy h2{font-size:40px;line-height:1.2}
.rp-reassure{
  align-self:center;
  border-top-width:5px;
  box-shadow:var(--rp-lift-2);
}
.rp-reassure h3{font-size:25px;line-height:1.25}
.rp-checklist li:first-of-type{border-top:0}

/* ------------------------------------------------------------
   7. Ablauf – die drei Schritte werden als Weg lesbar
   ------------------------------------------------------------ */
.rp-process{position:relative;counter-reset:rpschritt}
.rp-process::before{
  content:"";
  position:absolute;
  left:6%; right:6%; top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(227,199,152,.55),transparent);
}
.rp-process-step{
  position:relative;
  overflow:hidden;
  padding-top:34px;
  border-top:3px solid var(--rp-gold);
  transition:transform .22s ease, background .22s ease;
}
.rp-process-step:hover{transform:translateY(-3px)}
.rp-process-step::after{
  counter-increment:rpschritt;
  content:counter(rpschritt);
  position:absolute;
  right:16px;
  bottom:-26px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:112px;
  line-height:1;
  font-weight:500;
  color:rgba(227,199,152,.15);
  pointer-events:none;
}
.rp-process-step h3{font-size:25px;line-height:1.25}
.rp-serious{
  border-radius:var(--rp-radius);
  box-shadow:0 16px 40px rgba(0,0,0,.22);
}

/* ------------------------------------------------------------
   8. Sicherheiten – sechs gleich hohe, klar lesbare Zusagen
   ------------------------------------------------------------ */
.rp-assure-grid{gap:18px}
.rp-assure-card{
  display:flex;
  flex-direction:column;
  background:var(--rp-white);
  border:1px solid var(--rp-line-soft);
  border-left:4px solid var(--rp-gold);
  border-radius:0 var(--rp-radius) var(--rp-radius) 0;
  padding:26px 26px 28px;
  box-shadow:var(--rp-shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
.rp-assure-card:hover{transform:translateY(-3px);box-shadow:var(--rp-lift)}
.rp-assure-card h3{
  margin:0 0 8px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:23px;
  line-height:1.25;
}
.rp-assure-card p{
  margin:0;
  color:#57534b;
  font-size:16.5px;
  line-height:1.6;
}

/* ------------------------------------------------------------
   9. Warum Republic Past – ruhige, mittige Aussage mit Rahmen
   ------------------------------------------------------------ */
.rp-why-mittig{
  max-width:760px;
  margin:0 auto;
  padding:52px 54px 54px;
  background:var(--rp-white);
  border:1px solid var(--rp-line-soft);
  border-radius:var(--rp-radius);
  box-shadow:var(--rp-shadow-soft);
  position:relative;
}
.rp-why-mittig::before{
  content:"";
  position:absolute;
  left:50%; top:0;
  transform:translateX(-50%);
  width:120px; height:4px;
  background:linear-gradient(90deg,var(--rp-gold-soft),var(--rp-gold),var(--rp-gold-soft));
}
.rp-why-mittig h2{font-size:clamp(30px,3.3vw,40px)}
.rp-why-mittig p:not(.rp-eyebrow){
  max-width:610px;
  margin-left:auto;
  margin-right:auto;
  font-size:18.5px;
  line-height:1.72;
}

/* ------------------------------------------------------------
   10. Kontaktbereich – der Abschluss trägt sichtbar Gewicht
   ------------------------------------------------------------ */
.rp-contact-box{
  border-top:4px solid var(--rp-gold);
  box-shadow:var(--rp-lift-2);
  overflow:hidden;
}
.rp-contact-card{
  transition:background .2s ease;
  position:relative;
}
.rp-contact-card::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:var(--rp-gold);
  transform:scaleX(0);
  transition:transform .25s ease;
}
.rp-contact-card:hover{background:#faf3e7}
.rp-contact-card:hover::before{transform:scaleX(1)}

/* ------------------------------------------------------------
   11. Fusszeile – ausgewogene Spalten statt schmaler Randliste
   ------------------------------------------------------------ */
.rp-footer{border-top:4px solid var(--rp-gold)}
.rp-footer-grid{align-items:start;gap:48px}
.rp-footer-links{
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
}
.rp-footer-links a{
  position:relative;
  padding-bottom:2px;
}
.rp-footer-links a::after{
  content:"";
  position:absolute;
  left:0; right:100%; bottom:0;
  height:1px;
  background:var(--rp-gold-soft);
  transition:right .22s ease;
}
.rp-footer-links a:hover::after{right:0}

/* ------------------------------------------------------------
   12. Mobil – der Feinschliff bleibt schlank
   ------------------------------------------------------------ */
@media(max-width:760px){
  .rp-section{padding:46px 0}
  .rp-head-gross{margin-bottom:26px}
  .rp-category-body{padding:20px 20px 22px;border-top-width:3px}
  .rp-category h3,.rp-category-large h3{font-size:22px}
  .rp-category p{font-size:15.5px}
  .rp-category-body::after{margin-top:14px}
  .rp-category-image,.rp-category-large .rp-category-image{aspect-ratio:16/10;height:auto}
  .rp-intro-grid{gap:26px}
  .rp-intro-copy h2{font-size:28px}
  .rp-process::before{display:none}
  .rp-process-step{padding-top:24px}
  .rp-process-step::after{font-size:78px;right:10px;bottom:-16px}
  .rp-process-step h3{font-size:21px}
  .rp-assure-card{padding:19px 20px 21px}
  .rp-assure-card h3{font-size:20px}
  .rp-assure-card p{font-size:15.5px}
  .rp-why-mittig{padding:28px 22px 30px}
  .rp-why-mittig h2{font-size:27px}
  .rp-why-mittig p:not(.rp-eyebrow){font-size:16.5px}
  .rp-hero-visual{height:260px}
  .rp-footer-grid{gap:24px}
}
@media(max-width:1020px){
  .rp-intro-grid{grid-template-columns:minmax(0,1fr)}
  .rp-intro-copy{max-width:none}
}

/* ------------------------------------------------------------
   13. Besichtigung vor Ort – schliesst den Ablauf ab
   Bewusst KEINE weiteren Karten: vier ruhige Spalten, nur durch
   Haarlinien getrennt, damit es nicht wie Schritt 4 bis 7 wirkt.
   ------------------------------------------------------------ */
.rp-besuch{
  margin-top:38px;
  padding-top:36px;
  border-top:1px solid rgba(227,199,152,.28);
}
.rp-besuch-head{
  max-width:760px;
  margin:0 auto 30px;
  text-align:center;
}
.rp-besuch-head h3{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(26px,2.6vw,33px);
  line-height:1.2;
  font-weight:500;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.rp-besuch-head p:not(.rp-eyebrow){
  margin:14px 0 0;
  color:rgba(255,255,255,.76);
  font-size:17px;
}
.rp-besuch-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}
.rp-besuch-grid > div{
  padding:4px 26px 6px;
  border-left:1px solid rgba(227,199,152,.22);
}
.rp-besuch-grid > div:first-child{
  border-left:0;
  padding-left:0;
}
.rp-besuch-grid > div:last-child{padding-right:0}
.rp-besuch-grid strong{
  display:block;
  margin-bottom:8px;
  padding-top:14px;
  border-top:2px solid var(--rp-gold);
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  font-weight:500;
  line-height:1.25;
  color:#f6efe2;
}
.rp-besuch-grid span{
  display:block;
  color:rgba(255,255,255,.74);
  font-size:16px;
  line-height:1.6;
}

@media(max-width:980px){
  .rp-besuch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
  .rp-besuch-grid > div:nth-child(odd){border-left:0;padding-left:0}
  .rp-besuch-grid > div:nth-child(even){padding-right:0}
}
@media(max-width:600px){
  .rp-besuch{margin-top:26px;padding-top:26px}
  .rp-besuch-head{margin-bottom:22px}
  .rp-besuch-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .rp-besuch-grid > div{border-left:0;padding:0}
  .rp-besuch-grid strong{font-size:19px;padding-top:12px}
  .rp-besuch-grid span{font-size:15.5px}
}

/* ============================================================
   ZWEITE STUFE – Eleganz und direkte Ansprache
   01.09.2026. Wieder rein gestalterisch: keine Farbe, keine
   Schrift, kein Bild und kein Wort wird ausgetauscht.
   ============================================================ */

/* ------------------------------------------------------------
   14. Ankersprünge landen nicht mehr unter der Kopfzeile
   ------------------------------------------------------------ */
.rp-section,
.rp-contact-choices{scroll-margin-top:96px}

/* ------------------------------------------------------------
   15. Feinheiten, die man nicht benennt, aber spürt
   ------------------------------------------------------------ */
::selection{background:rgba(169,123,62,.22)}
body{text-rendering:optimizeLegibility}
.rp-hero-lead,
.rp-section-head p,
.rp-intro-copy p,
.rp-why-mittig p,
.rp-category p,
.rp-assure-card p{text-wrap:pretty}
/* Rufnummern stehen in gleichmässigen Ziffern */
.rp-choice strong,
.rp-contact-card strong,
.rp-footer-contact a{font-variant-numeric:tabular-nums;letter-spacing:.01em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------------------
   16. Hero – das Bild wird zum gerahmten Original
   Der versetzte Zweitrahmen wirkte beliebig. Stattdessen ein
   Passepartout mit feiner Goldlinie: dasselbe Motiv, aber es
   sieht aus, als haenge es an der Wand.
   ------------------------------------------------------------ */
.rp-hero-visual{
  height:536px;
  padding:16px;
  background:linear-gradient(158deg,#242b22 0%,#161b15 100%);
  border:1px solid rgba(227,199,152,.5);
  box-shadow:0 34px 76px rgba(0,0,0,.46);
}
.rp-hero-visual::before{display:none}
.rp-hero-visual::after{
  inset:16px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 66%,rgba(12,15,11,.32) 100%);
}
.rp-hero-visual img{box-shadow:0 0 0 1px rgba(227,199,152,.30)}

/* Vorspann etwas ruhiger und lesbarer */
.rp-hero-lead{
  font-size:21.5px;
  line-height:1.62;
  max-width:600px;
  color:rgba(255,255,255,.93);
}

/* Die Ortszeile war zu blass fuer die Zielgruppe */
.rp-hero-note{
  color:rgba(243,232,213,.88);
  font-size:15px;
  letter-spacing:.03em;
  border-top-color:rgba(231,201,150,.34);
}

/* etwas Tiefe im Hintergrund, kaum wahrnehmbar */
.rp-hero::before{opacity:.19}

/* ------------------------------------------------------------
   17. Kontaktwege unter dem Hero – mehr Luft, klarere Stufen
   ------------------------------------------------------------ */
.rp-choice{padding:36px 32px 38px}
.rp-choice-label{
  font-size:11.5px;
  letter-spacing:.19em;
  color:#7a7064;
}
.rp-choice strong{
  font-size:27px;
  line-height:1.25;
  margin-bottom:7px;
}
.rp-choice small{color:#635e55}
.rp-choice{border-right-color:var(--rp-line-soft)}
.rp-choice:hover{background:#fbf5ea}

/* ------------------------------------------------------------
   18. Abschnittsköpfe – ein Rhythmus für alle
   ------------------------------------------------------------ */
.rp-eyebrow{letter-spacing:.2em;font-size:12.5px}
.rp-section-head p{
  font-size:18.5px;
  line-height:1.68;
  color:#5a564d;
}
.rp-head-gross p{color:#544f47}

/* ------------------------------------------------------------
   19. Ankaufsschwerpunkte – die fünf Bilder wirken als Serie
   Ein sehr leichter gemeinsamer Warmton bindet sie zusammen,
   ohne dass ein einzelnes Bild verändert wird.
   ------------------------------------------------------------ */
.rp-category-image{
  filter:saturate(.93) contrast(1.02) sepia(.05);
  transition:transform .5s ease, filter .35s ease;
}
.rp-category:hover .rp-category-image{filter:saturate(1) contrast(1.03) sepia(.02)}
.rp-category-tag{font-size:11.5px;letter-spacing:.19em}
.rp-category h3{letter-spacing:-.005em}
.rp-category-body{padding:28px 30px 32px}
.rp-category{border-color:#e9e0d0}

/* ------------------------------------------------------------
   20. Sicherheiten – ruhiger, gleichmässiger, hochwertiger
   ------------------------------------------------------------ */
.rp-assure-grid{gap:20px}
.rp-assure-card{
  padding:28px 28px 30px;
  border-color:#e9e0d0;
  border-left-width:3px;
}
.rp-assure-card h3{font-size:22.5px;letter-spacing:-.005em}
.rp-assure-card p{color:#575349;line-height:1.62}

/* ------------------------------------------------------------
   21. Kontaktbereich – der Abschluss wird ruhiger
   ------------------------------------------------------------ */
.rp-contact-box{border-color:#e9e0d0}
.rp-contact-box-head{padding:44px 44px 34px}
.rp-contact-box-head p{font-size:17.5px;line-height:1.66;color:#585349}
.rp-contact-card{padding:34px 30px}
.rp-contact-card span{letter-spacing:.18em}
.rp-contact-card strong{font-size:23px;margin-bottom:6px}
.rp-contact-foot{letter-spacing:.01em}
.rp-local{
  font-size:15px;
  line-height:1.7;
  color:#645f56;
  max-width:760px;
}

/* ------------------------------------------------------------
   22. Fusszeile – letzter Eindruck zählt
   ------------------------------------------------------------ */
.rp-footer-brand p{line-height:1.7}
.rp-footer-contact a{font-size:17px}
.rp-copyright{letter-spacing:.01em}

/* ------------------------------------------------------------
   23. Mobil – dieselbe Ruhe auf kleinem Schirm
   ------------------------------------------------------------ */
@media(max-width:760px){
  .rp-section,.rp-contact-choices{scroll-margin-top:72px}
  .rp-hero-visual{height:262px;padding:9px}
  .rp-hero-visual::after{inset:9px}
  .rp-hero-lead{font-size:17px;line-height:1.55}
  .rp-hero-note{font-size:13.5px}
  .rp-choice{padding:24px 20px 26px}
  .rp-choice strong{font-size:23px}
  .rp-choice-label{font-size:11px;letter-spacing:.16em}
  .rp-category-body{padding:21px 21px 23px}
  .rp-assure-card{padding:21px 21px 23px}
  .rp-contact-box-head{padding:26px 20px 22px}
  .rp-contact-card{padding:22px 20px}
  .rp-contact-card strong{font-size:21px}
  .rp-local{font-size:13.5px}
}

/* ------------------------------------------------------------
   24. Mobiler Kopfbereich – gleiche Anordnung, feinere Wirkung
   Der Aufbau bleibt unveraendert (Marke, sechs Punkte, Kontakt).
   Nur Groesse, Rahmen und Abstaende werden zurueckgenommen,
   damit oben mehr von der eigentlichen Seite sichtbar wird.
   ------------------------------------------------------------ */
@media(max-width:760px){
  .rp-header-row{padding-top:11px;padding-bottom:10px;gap:7px}
  .rp-brand strong{font-size:24px;letter-spacing:.025em}
  .rp-brand span{font-size:9.5px;letter-spacing:.09em;margin-top:4px}
  .rp-nav{gap:6px;margin-top:3px}
  .rp-nav a:not(.rp-nav-cta){
    padding:6px 10px;
    font-size:13.5px;
    border-color:#e4d9c4;
    border-radius:3px;
    background:#fdfaf4;
    color:#4a4c43;
  }
  .rp-nav a.rp-nav-cta{
    padding:6px 14px;
    font-size:13.5px;
    box-shadow:none;
  }
  /* Der Vorspann darf oben etwas naeher an die Ueberschrift */
  .rp-kicker{
    font-size:11px;
    letter-spacing:.15em;
    line-height:1.5;
    margin-bottom:12px;
    color:#dcc094;
  }
  .rp-hero-content{padding-top:28px}
}
@media(max-width:400px){
  .rp-nav a:not(.rp-nav-cta){padding:5px 8px;font-size:12.5px}
  .rp-nav a.rp-nav-cta{padding:5px 12px;font-size:12.5px}
}

/* ============================================================
   25 – Die drei Kontaktwege als abgesetzte Karte
   Sie ragt in den dunklen Kopfbereich hinein. Dadurch ist das
   Erste, was der Blick nach der Ueberschrift findet, kein
   Fliesstext, sondern die Frage "Wie erreiche ich ihn?".
   Nur ab 901px – darunter bleibt die Leiste wie bisher.
   ============================================================ */
@media(min-width:901px){
  .rp-hero{padding-bottom:56px}
  .rp-contact-choices{
    position:relative;
    z-index:6;
    background:transparent;
    border-bottom:0;
    margin-top:-62px;
  }
  .rp-choice-grid{
    background:var(--rp-white);
    border:1px solid #e2d6c0;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 30px 64px rgba(18,22,16,.26),0 2px 6px rgba(18,22,16,.06);
  }
  /* Der weisse Grund unter der Karte, damit sie frei steht */
  .rp-contact-choices::after{
    content:"";
    position:absolute;
    inset:62px 0 0;
    background:var(--rp-white);
    border-bottom:1px solid var(--rp-line);
    z-index:-1;
  }
  .rp-choice{border-right-color:#ece2d0}
  .rp-choice::before{left:0;top:0;width:0;height:3px;transition:width .22s ease}
  .rp-choice:hover::before{width:100%}
}

/* ============================================================
   26 – Erkennbar anklickbar
   Die drei Felder sind Verweise, sahen aber aus wie Text.
   Ein sehr leiser Pfeil sagt es, ohne zu schreien.
   ============================================================ */
.rp-choice{
  display:block;
  padding-right:52px;
}
.rp-choice::after{
  content:"";
  position:absolute;
  right:26px;
  top:50%;
  width:9px;
  height:9px;
  margin-top:-5px;
  border-right:2px solid var(--rp-gold);
  border-bottom:2px solid var(--rp-gold);
  transform:rotate(-45deg);
  opacity:.45;
  transition:opacity .2s ease,right .2s ease;
}
.rp-choice:hover::after,
.rp-choice:focus-visible::after{opacity:.95;right:20px}
.rp-choice:focus-visible{outline:2px solid var(--rp-gold);outline-offset:-3px}

/* ============================================================
   27 – Die drei Zusagen im Kopfbereich treten zurueck
   Drei fette Zeilen haben mit der Ueberschrift um die
   Aufmerksamkeit gestritten. Gleiche Groesse, ruhigeres Gewicht.
   ============================================================ */
.rp-promises li{
  font-weight:500;
  color:#f1e7d5;
}
.rp-promises li::before{
  width:21px;
  height:21px;
  top:8px;
  font-size:12px;
  font-weight:700;
  background:linear-gradient(160deg,#b98a49,#966c34);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* ============================================================
   28 – Groessenverhaeltnis der Ueberschriften
   "Ankaufsschwerpunkte" war mit bis zu 62px groesser gesetzt als
   die Hauptueberschrift mit 55px. Die groesste Schrift der Seite
   muss die Hauptueberschrift sein.
   ============================================================ */
.rp-head-gross h2{font-size:clamp(36px,3.5vw,48px);letter-spacing:-.018em}
.rp-head-gross h2::after{width:56px;margin-top:20px}
.rp-head-gross p{font-size:18.5px;margin-top:18px}

/* ============================================================
   29 – Abschnittskoepfe lesen sich als eine Einheit
   ============================================================ */
.rp-eyebrow{margin-bottom:13px}
.rp-section-head p{margin-top:15px}
.rp-section-head{margin-bottom:46px}

/* ============================================================
   30 – Ruhigere Kanten
   ============================================================ */
.rp-hero::after{height:4px}
a{text-underline-offset:.18em}

@media(max-width:900px){
  .rp-choice{padding-right:46px}
  .rp-choice::after{right:20px}
}

/* --- 31 – Nachjustierung der Kontaktkarte ---------------------
   Die E-Mail-Adresse brach durch den Platz fuer den Pfeil um.
   Etwas kleiner gesetzt, Pfeil naeher an den Rand. Der goldene
   Strich ueber jedem Feld bleibt sichtbar und waechst beim
   Darueberfahren auf die volle Breite.
   ------------------------------------------------------------- */
.rp-choice{padding-right:44px}
.rp-choice::after{right:20px}
.rp-choice:hover::after,
.rp-choice:focus-visible::after{right:15px}
.rp-choice strong{font-size:21.5px}
@media(min-width:901px){
  .rp-choice::before{width:46px;left:32px}
  .rp-choice:hover::before{width:calc(100% - 64px)}
}
@media(max-width:900px){
  .rp-choice{padding-right:40px}
  .rp-choice::after{right:16px}
}

/* --- 32 – Die Kontaktfelder am Seitenende ---------------------
   Sie sind ebenfalls Verweise. Mittig gesetzt vertraegt sich kein
   Pfeil, deshalb reagieren sie beim Darueberfahren.
   ------------------------------------------------------------- */
.rp-contact-card{transition:background .18s ease}
.rp-contact-card:hover{background:#fbf5ea}
.rp-contact-card:hover strong{text-decoration:underline;text-decoration-color:var(--rp-gold-soft);text-decoration-thickness:1px}
.rp-contact-card:focus-visible,
.rp-category:focus-within{outline:2px solid var(--rp-gold);outline-offset:-3px}

/* ============================================================
   33 – Direkte Ansprache im Kopfbereich (freigegeben 01.09.)
   Die Frage steht auf eigener Zeile und etwas heller, damit sie
   der Blick zuerst findet. Der bisherige Satz bleibt Wort fuer
   Wort erhalten und folgt darunter.
   ============================================================ */
.rp-hero-ansprache{
  display:block;
  margin-bottom:6px;
  color:#fff;
  font-weight:600;
  letter-spacing:-.005em;
}
.rp-hero-lead{max-width:690px}
@media(max-width:760px){
  .rp-hero-ansprache{margin-bottom:4px}
}

/* --- 33b – Die Frage steht enger, damit sie als ein Satz wirkt --- */
.rp-hero-ansprache{line-height:1.34}
@media(max-width:760px){
  .rp-hero-ansprache{font-size:18.5px;margin-bottom:8px}
}

/* ============================================================
   34 – Kopfleiste der Startseite: fuenf Punkte (freigegeben 01.09.)
   "Alle Ankaufsthemen" ist aus dem Kopf genommen und steht
   weiterhin im Fuss sowie in der Leiste aller Unterseiten.
   Die beiden Sprungmarken sind durch einen feinen Strich von den
   echten Seiten getrennt, damit der Besucher unbewusst versteht,
   dass sie ihn nicht von der Startseite wegfuehren.
   ============================================================ */
.rp-nav-sprung + a:not(.rp-nav-sprung){
  margin-left:14px;
  padding-left:24px;
  position:relative;
}
.rp-nav-sprung + a:not(.rp-nav-sprung)::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:15px;
  margin-top:-7px;
  background:#d9cdb8;
}

@media(max-width:760px){
  /* Auf dem Handy traegt der Abstand allein – kein Strich noetig,
     die fuenf Felder passen jetzt in eine Zeile. */
  .rp-nav-sprung + a:not(.rp-nav-sprung){margin-left:6px;padding-left:10px}
  .rp-nav-sprung + a:not(.rp-nav-sprung)::before{display:none}
}

/* --- 34b – Die fuenf Felder in eine Zeile bringen -------------
   Bei 390px (iPhone 12/13/14/15) fehlten wenige Bildpunkte.
   Etwas engere Abstaende genuegen; die Felder bleiben gleich
   hoch und damit gleich gut zu treffen.
   ------------------------------------------------------------- */
@media(max-width:760px){
  .rp-nav{gap:5px}
  .rp-nav a:not(.rp-nav-cta){padding:6px 9px}
  .rp-nav a.rp-nav-cta{padding:6px 12px}
  .rp-nav-sprung + a:not(.rp-nav-sprung){margin-left:0;padding-left:9px}
}

/* --- 34c – Sehr schmale Geraete (bis 400px) -------------------
   Muss NACH dem 760px-Block stehen, sonst wird es davon
   ueberschrieben.
   ------------------------------------------------------------- */
@media(max-width:400px){
  .rp-nav{gap:4px}
  .rp-nav a:not(.rp-nav-cta){padding:5px 7px;font-size:12.5px}
  .rp-nav a.rp-nav-cta{padding:5px 10px;font-size:12.5px}
  .rp-nav-sprung + a:not(.rp-nav-sprung){margin-left:0;padding-left:7px}
}