@charset "utf-8";

/* 11.09.2026 — Neue Adresse erzwungen.
   Bis zu diesem Stand trug diese Datei "Cache-Control: immutable". Wer die
   Seite waehrend eines laufenden Uploads geladen hat, bekam die neue Seite
   mit dem alten Stylesheet und legte diesen falschen Stand unter der neuen
   Adresse ab — dauerhaft, weil immutable auch beim Neuladen nicht nachfragt.
   Die geaenderte Zeile hier gibt der Datei einen neuen Fingerabdruck, damit
   alle Browser sie einmal frisch holen. immutable ist inzwischen aus der
   .htaccess entfernt, der Fall kann sich nicht wiederholen. */

/* GILDEPARTNER — Stylesheet
   Farbwerte ausschliesslich als Variablen im :root-Block.
   Umgesetzt nach "Logo-Dateien und Farbanweisungen/2026 08 05 Farbanweisung-Website-Gildepartner.md". */

/* ---------- Schriften ---------- */
/* Inter ist ein variabler Schnitt, deshalb genuegt eine Deklaration. */
@font-face{font-family:Inter;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/inter-var.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/eb-garamond-var.woff2) format("woff2")}
@font-face{font-family:"Inter Fallback";src:local("Helvetica Neue"),local("Arial");
  ascent-override:90%;descent-override:22%;line-gap-override:0%}

:root{
  --gp-blau-900:#0F1C2C;
  --gp-blau-700:#192E48;
  --gp-blau-500:#2A456A;
  --gp-blau-300:#7C8DA6;
  --gp-blau-100:#E3E7ED;
  --gp-blau-050:#F7F6F3;
  --gp-rot-700:#8E1C1F;
  --gp-rot-500:#C2272A;
  --gp-weiss:#FFFFFF;

  --gp-text:var(--gp-blau-700);
  --gp-text-invers:var(--gp-weiss);
  --gp-text-sekundaer:#2A455A;
  --gp-text-invers-sek:#B6C0CE;
  --gp-linie:var(--gp-blau-100);
  --gp-akzent:var(--gp-rot-500);

  /* Schriftfarbe der Navigation über einem Bild, Mischgrundlage für den
     gleitenden Übergang der Kopfzeile */
  --nav-ueber-bild:rgba(255,255,255,.82);
  --nav-ueber-bild-an:#FFFFFF;

  --wrap:84rem;
  --pad:1.5rem;
  --kopf:5.5rem;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (min-width:768px){:root{--pad:2.5rem}}
@media (min-width:1024px){:root{--pad:3.5rem}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--gp-weiss);color:var(--gp-text);
  font-family:Inter,"Inter Fallback","Helvetica Neue",Arial,sans-serif;
  font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;border:0}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:400;line-height:1.14;letter-spacing:-.015em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
dl,dd,dt{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.narrow{max-width:46rem}
.mid{max-width:64rem}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;top:1rem;left:1rem;z-index:80;width:auto;height:auto;clip:auto;margin:0;
  background:var(--gp-blau-700);color:#fff;padding:.85rem 1.25rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}

:focus-visible{outline:2px solid var(--gp-akzent);outline-offset:3px}

/* ---------- Typografie ---------- */
.display{font-family:"EB Garamond",Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.08}
.h1{font-size:clamp(2.35rem,6.2vw,4.35rem)}
.h2{font-size:clamp(1.85rem,3.9vw,3rem)}
.h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2}
.h4{font-size:1.0625rem;font-family:Inter,sans-serif;font-weight:600;letter-spacing:-.005em;line-height:1.35}
.eyebrow{font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gp-blau-500)}
.eyebrow-inv{color:var(--gp-text-invers-sek)}
.lead{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.6;color:var(--gp-text-sekundaer)}
.body{color:var(--gp-text-sekundaer)}
.small{font-size:.875rem;line-height:1.7;color:var(--gp-text-sekundaer)}
.tiny{font-size:.78rem;line-height:1.7}
.on-dark{color:var(--gp-text-invers)}
.on-dark .body,.on-dark .lead,.on-dark .small,.on-dark .tiny{color:var(--gp-text-invers-sek)}
strong{font-weight:600}

/* ---------- Links ---------- */
a.link{color:var(--gp-rot-500);text-decoration:none;border-bottom:1px solid rgba(194,39,42,.35);transition:color .3s,border-color .3s}
a.link:hover{color:var(--gp-rot-700);border-bottom-color:var(--gp-rot-700)}
.on-dark a.link{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.on-dark a.link:hover{color:#fff;border-bottom-color:#fff}

/* Einheitlicher Textlink-CTA */
.tlink{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gp-blau-700);padding-bottom:.35rem;position:relative}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--gp-akzent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tlink:hover::after,a:hover .tlink::after{transform:scaleX(1)}
.tlink svg{width:.85rem;height:.85rem;flex:none;transition:transform .45s var(--ease)}
.tlink:hover svg,a:hover .tlink svg{transform:translateX(.3rem)}
.on-dark .tlink{color:#fff}
.on-dark .tlink::after{background:#fff}

/* ---------- Buttons ---------- */
/* Beim Überfahren wischt eine zweite Fläche von links ein, der Pfeil rückt
   nach und der Knopf hebt sich einen Hauch an. Die Grundfarbe bleibt als
   Hintergrund stehen, damit nichts blitzt, wenn die Animation nicht läuft. */
.btn{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;
  position:relative;isolation:isolate;overflow:hidden;border:1px solid transparent;
  font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;padding:.95rem 1.6rem;cursor:pointer;
  transition:color .45s var(--ease),border-color .45s var(--ease),
             transform .45s var(--ease),box-shadow .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:right center;
  transition:transform .5s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left center}
.btn:hover,.btn:focus-visible{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:.85rem;height:.85rem;flex:none;transition:transform .45s var(--ease)}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(.35rem)}

.btn-primary{background:var(--gp-blau-700);color:#fff}
.btn-primary::before{background:var(--gp-blau-500)}
.btn-primary:hover,.btn-primary:focus-visible{box-shadow:0 12px 24px -16px rgba(15,28,44,.7)}
.btn-invers{background:var(--gp-weiss);color:var(--gp-blau-700)}
.btn-invers::before{background:var(--gp-blau-050)}
.btn-invers:hover,.btn-invers:focus-visible{box-shadow:0 12px 26px -16px rgba(15,28,44,.55)}
.btn-secondary{background:transparent;color:var(--gp-blau-700);border-color:var(--gp-blau-700)}
.btn-secondary::before{background:var(--gp-blau-700)}
.btn-secondary:hover,.btn-secondary:focus-visible{color:var(--gp-weiss)}
.on-dark .btn-secondary{color:#fff;border-color:rgba(255,255,255,.55)}
.on-dark .btn-secondary::before{background:var(--gp-weiss)}
.on-dark .btn-secondary:hover,.on-dark .btn-secondary:focus-visible{
  color:var(--gp-blau-700);border-color:var(--gp-weiss)}
.btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn[disabled]::before{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn svg{transition:none}
  .btn:hover,.btn:focus-visible{transform:none}
  .btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
}

/* ---------- Kopfzeile ---------- */
/* --k läuft beim Scrollen von 0 (über dem Bild) nach 1 (weiß hinterlegt).
   main.js setzt den Wert je Bild, dadurch blendet die Leiste über und nicht
   in einem Sprung. Die [data-solid]-Regeln bleiben als Rückfallebene für
   Browser ohne color-mix stehen. */
.head{--k:0;position:fixed;inset:0 0 auto 0;z-index:60;
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.head[data-solid="true"]{background:var(--gp-weiss);border-bottom-color:var(--gp-linie);
  box-shadow:0 10px 30px -24px rgba(15,28,44,.5)}
/* Seiten ohne Aufmacherbild (Rechtstexte, Fehlerseite) haben von Anfang an
   eine weisse Leiste. main.js fasst sie nicht an, deshalb muss --k hier auf 1
   stehen — sonst mischen die color-mix-Regeln weiter die Schriftfarbe für
   dunklen Grund an und die Menüpunkte stehen weiss auf Weiss. */
.head[data-fest="true"]{--k:1}
@supports (background:color-mix(in srgb,#fff 50%,transparent)){
  .head,.head[data-solid="true"]{
    background:color-mix(in srgb,var(--gp-weiss) calc(var(--k) * 100%),transparent);
    border-bottom-color:color-mix(in srgb,var(--gp-linie) calc(var(--k) * 100%),transparent);
    box-shadow:0 10px 30px -24px color-mix(in srgb,var(--gp-blau-900) calc(var(--k) * 50%),transparent);
    transition:none}
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--kopf)}

/* Das Logo erscheint in Farbe, sobald die Kopfzeile weiss hinterlegt ist.
   Ueber dem Bild wird dieselbe Datei rein weiss dargestellt. */
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand-bild{position:relative;display:block}
.brand img{height:1.6rem;width:auto;max-width:none;display:block;
  transition:filter .5s var(--ease)}
@media (min-width:480px){.brand img{height:2.1rem}}
@media (min-width:768px){.brand img{height:2.6rem}}
/* Die zweite, weiß eingefärbte Fassung liegt deckungsgleich darüber und wird
   beim Scrollen ausgeblendet. Gleiche Datei, also kein zweiter Abruf. */
.brand-weiss{position:absolute;inset:0;filter:brightness(0) invert(1);
  transition:opacity .5s var(--ease);pointer-events:none}
.head[data-solid="false"] .brand-weiss{opacity:1}
.head[data-solid="true"] .brand-weiss{opacity:0}
@supports (background:color-mix(in srgb,#fff 50%,transparent)){
  .brand-weiss{opacity:calc(1 - var(--k));transition:none}
  .head[data-solid="false"] .brand-weiss,
  .head[data-solid="true"] .brand-weiss{opacity:calc(1 - var(--k))}
}
.drawer .brand img{filter:brightness(0) invert(1)}
.foot .brand img{height:3.1rem}

.nav a{position:relative;text-decoration:none;padding:.45rem 0;color:rgba(255,255,255,.82);
  font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;transition:color .3s;white-space:nowrap}
.nav a:hover{color:#fff}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gp-akzent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.head[data-solid="true"] .nav a{color:var(--gp-blau-500)}
.head[data-solid="true"] .nav a:hover,
.head[data-solid="true"] .nav a[aria-current="page"]{color:var(--gp-blau-900)}
@supports (color:color-mix(in srgb,#fff 50%,transparent)){
  /* Nur die obersten Punkte der Leiste ueber ">". Die Links im
     aufgeklappten Untermenue liegen auf weissem Grund und behalten ihre
     eigene, dunkle Farbe. */
  .head .nav > .nav-item > a,
  .head[data-solid="true"] .nav > .nav-item > a{
    color:color-mix(in srgb,var(--gp-blau-500) calc(var(--k) * 100%),var(--nav-ueber-bild))}
  .head .nav > .nav-item > a:hover,
  .head .nav > .nav-item > a[aria-current="page"],
  .head[data-solid="true"] .nav > .nav-item > a:hover,
  .head[data-solid="true"] .nav > .nav-item > a[aria-current="page"]{
    color:color-mix(in srgb,var(--gp-blau-900) calc(var(--k) * 100%),var(--nav-ueber-bild-an))}
  .head .lang a,.head .lang span,
  .head[data-solid="true"] .lang a,.head[data-solid="true"] .lang span{
    color:color-mix(in srgb,var(--gp-blau-300) calc(var(--k) * 100%),rgba(255,255,255,.6))}
  .head .lang [aria-current="true"],.head .lang a:hover,
  .head[data-solid="true"] .lang [aria-current="true"],
  .head[data-solid="true"] .lang a:hover{
    color:color-mix(in srgb,var(--gp-blau-900) calc(var(--k) * 100%),var(--nav-ueber-bild-an))}
  .head .burger,.head[data-solid="true"] .burger{
    color:color-mix(in srgb,var(--gp-blau-700) calc(var(--k) * 100%),var(--nav-ueber-bild-an))}
}

.head-rechts{display:flex;align-items:center;gap:1.1rem}
.head-cta{display:none}
@media (min-width:900px){.head-cta{display:inline-flex}}
.head[data-solid="true"] .head-cta{background:var(--gp-blau-700);color:#fff}
.head[data-solid="true"] .head-cta:hover{background:var(--gp-blau-500)}

/* Sprachumschalter */
.lang{display:none;align-items:center;gap:.4rem;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
@media (min-width:760px){.lang{display:inline-flex}}
.lang a,.lang span{text-decoration:none;color:rgba(255,255,255,.6);transition:color .3s}
.lang a:hover{color:#fff}
.lang [aria-current="true"]{color:#fff}
.lang .trenner{color:rgba(255,255,255,.35)}
.head[data-solid="true"] .lang a,.head[data-solid="true"] .lang span{color:var(--gp-blau-300)}
.head[data-solid="true"] .lang a:hover,
.head[data-solid="true"] .lang [aria-current="true"]{color:var(--gp-blau-900)}
.head[data-solid="true"] .lang .trenner{color:var(--gp-blau-100)}

.burger{display:inline-flex;align-items:center;gap:.6rem;background:none;border:0;color:#fff;cursor:pointer;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem 0}
@media (min-width:1180px){.head .burger{display:none}}
.burger span{display:block;width:1.4rem;height:1px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:1.4rem;height:1px;background:currentColor}
.burger span::before{top:-.35rem}.burger span::after{top:.35rem}
.head[data-solid="true"] .burger{color:var(--gp-blau-700)}

/* Hauptnavigation mit Untermenue */
.nav{display:none;align-items:center;gap:1.75rem}
@media (min-width:1180px){.nav{display:flex}}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{display:inline-flex;align-items:center;gap:.4rem}
.nav-caret{width:.55rem;height:.55rem;flex:none;transition:transform .35s var(--ease);opacity:.75}
.nav-item:hover>a .nav-caret,.nav-item:focus-within>a .nav-caret{transform:rotate(180deg)}
.nav-pop{position:absolute;top:100%;left:-1.15rem;padding-top:1.05rem;z-index:5;
  opacity:0;visibility:hidden;transform:translateY(.4rem);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.nav-item:hover>.nav-pop,.nav-item:focus-within>.nav-pop{opacity:1;visibility:visible;transform:none}
.nav-pop-in{min-width:21rem;background:var(--gp-weiss);padding:.85rem;
  box-shadow:0 24px 60px -18px rgba(15,28,44,.32),0 2px 6px rgba(15,28,44,.08)}
.nav-pop-in>span{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gp-blau-500);padding:.35rem .9rem .7rem}
.nav-pop a{display:block;padding:.6rem .9rem;color:var(--gp-blau-900);font-size:.9rem;
  font-weight:400;letter-spacing:0;text-transform:none;transition:background-color .25s var(--ease),color .25s var(--ease)}
.nav-pop a:hover{background:var(--gp-blau-050);color:var(--gp-blau-700)}
.nav-pop a::after{content:none}
.nav-pop a[aria-current="page"]{background:var(--gp-blau-050);color:var(--gp-blau-700);font-weight:600}
.head .nav-pop a,.head[data-solid="true"] .nav-pop a{color:var(--gp-blau-900)}
.head .nav-pop a:hover,.head[data-solid="true"] .nav-pop a:hover{color:var(--gp-blau-700)}
.head .nav-pop a[aria-current="page"],
.head[data-solid="true"] .nav-pop a[aria-current="page"]{color:var(--gp-blau-700)}

/* ---------- Schublade (kleine Bildschirme) ---------- */
.drawer{position:fixed;inset:0;z-index:70;background:var(--gp-blau-900);color:#fff;
  display:flex;flex-direction:column;padding:1.5rem var(--pad) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-1rem);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;overflow-y:auto}
.drawer[data-open="true"]{opacity:1;visibility:visible;transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:3.5rem}
.drawer .brand img{height:1.6rem}
@media (min-width:480px){.drawer .brand img{height:2.1rem}}
.drawer nav{margin-top:2rem;display:flex;flex-direction:column;gap:.15rem}
.drawer nav a{text-decoration:none;color:#fff;font-family:"EB Garamond",Georgia,serif;font-size:1.75rem;padding:.5rem 0}
.drawer nav a.sub{font-family:Inter,sans-serif;font-size:.95rem;color:var(--gp-text-invers-sek);padding:.3rem 0 .3rem 1rem}
.drawer nav a[aria-current="page"]{color:var(--gp-akzent)}
.drawer nav a.sub[aria-current="page"]{color:var(--gp-akzent);font-weight:600}
.drawer nav .grp{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gp-text-invers-sek);margin:1.75rem 0 .35rem}
.drawer-foot{margin-top:auto;padding-top:2.5rem;font-size:.85rem;color:var(--gp-text-invers-sek);display:flex;flex-direction:column;gap:.4rem}
.drawer-foot a{text-decoration:none}
.drawer-lang{display:flex;gap:.5rem;padding-top:1rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.drawer-lang a,.drawer-lang span{text-decoration:none;color:var(--gp-text-invers-sek)}
.drawer-lang [aria-current="true"]{color:#fff;font-weight:600}

/* ---------- Aufmacher ---------- */
.hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end;overflow:hidden;background:var(--gp-blau-700)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
/* Overlay ausschliesslich aus GP-Blau, als Verlauf im Bereich der Schrift */
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(25,46,72,.94) 0%,rgba(25,46,72,.80) 26%,rgba(25,46,72,.38) 52%,rgba(25,46,72,0) 74%)}
.hero-veil-b{position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,rgba(25,46,72,.72),rgba(25,46,72,0))}
/* Etwas breiter als die Unterseiten, damit der Slogan in zwei Zeilen steht.
   Der Fliesstext darunter behaelt sein ruhiges Mass. */
.hero-in{position:relative;padding:9rem 0 4.5rem;max-width:50rem}
.hero-in .lead{max-width:38rem}
.hero-sub{position:relative;padding:8.5rem 0 3.5rem;max-width:40rem}
.hero .h1{color:#fff}
.hero .lead{color:rgba(255,255,255,.86);margin-top:1.6rem}
.hero-actions{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.9rem}
.hero-actions .btn-secondary{color:#fff;border-color:rgba(255,255,255,.55)}
.hero-actions .btn-secondary:hover{background:#fff;color:var(--gp-blau-700)}
@media (max-width:900px){
  .hero-veil{background:linear-gradient(to top,rgba(25,46,72,.95) 0%,rgba(25,46,72,.88) 42%,rgba(25,46,72,.55) 68%,rgba(25,46,72,.18) 100%)}
  .hero-veil-b{display:none}
  .hero{align-items:flex-end;min-height:min(78vh,640px)}
}
@media (max-width:640px){.hero-in{padding:7.5rem 0 3.25rem}.hero-sub{padding:7.5rem 0 3rem}}

/* ---------- Abschnitte ---------- */
.sec{padding:5rem 0}
@media (min-width:768px){.sec{padding:7rem 0}}
.sec-tight{padding:3.5rem 0}
@media (min-width:768px){.sec-tight{padding:4.5rem 0}}
.sec-tint{background:var(--gp-blau-050)}
.sec-dark{background:var(--gp-blau-700);color:#fff}
.sec-dark-deep{background:var(--gp-blau-900);color:#fff}
/* Seiten ohne Bildaufmacher (Rechtstexte, Bestaetigung) */
.sec.kopfbereich{padding-top:calc(var(--kopf) + 3.5rem)}
@media (min-width:768px){.sec.kopfbereich{padding-top:calc(var(--kopf) + 5rem)}}

.sec-head{max-width:44rem}
.sec-head .h2{margin-top:1.1rem}
.sec-head .lead{margin-top:1.35rem}
.stack>*+*{margin-top:1.35rem}

/* ---------- Raster ---------- */
.grid{display:grid;gap:2rem}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr}
@media (min-width:640px){.g4{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.g4{grid-template-columns:repeat(4,1fr)}}
.gap-sm{gap:1.25rem}
.gap-lg{gap:2.75rem}

/* Bildboxen */
.box{display:flex;flex-direction:column;text-decoration:none;height:100%}
.box-media{position:relative;overflow:hidden;background:var(--gp-blau-100)}
.box-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.box:hover .box-media img{transform:scale(1.035)}
.ratio-43{aspect-ratio:4/3}
.ratio-32{aspect-ratio:3/2}
.ratio-11{aspect-ratio:1/1}
.ratio-169{aspect-ratio:16/9}
.box-body{padding-top:1.5rem;display:flex;flex-direction:column;flex:1}
.box-body .h3,.box-body .h4{margin-bottom:.7rem}
.box-body p{flex:1}
.box-body .tlink{margin-top:1.5rem;align-self:flex-start}

/* ---------- Bildleiste, die aufgeht ---------- */
/* Acht Bereiche nebeneinander: das aktive Feld nimmt den uebrigen Platz,
   die anderen stehen als schmale Streifen daneben. Der Wechsel laeuft ueber
   flex-grow, damit die Leiste immer genau die Breite des Satzes fuellt. */
.akkordeon{display:flex;gap:.75rem;height:clamp(22rem,32vw,28rem)}
.akk-feld{position:relative;display:block;overflow:hidden;text-decoration:none;
  flex:0 1 5rem;min-width:3.5rem;background:var(--gp-blau-700);
  transition:flex-grow .7s var(--ease),flex-basis .7s var(--ease)}
.akk-feld[data-aktiv="true"]{flex:1 1 auto}
.akk-bild{position:absolute;inset:0;display:block}
.akk-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.akk-feld[data-aktiv="true"] .akk-bild img{transform:scale(1.04)}
.akk-schleier{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,28,44,.82) 0%,rgba(15,28,44,.35) 45%,rgba(15,28,44,.15) 100%);
  transition:background .7s var(--ease)}
.akk-feld[data-aktiv="true"] .akk-schleier{
  background:linear-gradient(to top,rgba(15,28,44,.78) 0%,rgba(15,28,44,.12) 55%,rgba(15,28,44,0) 100%)}

/* Der Titel steht laengs, solange das Feld schmal ist, und legt sich
   waagerecht, sobald es aufgeht. */
/* Der Drehpunkt liegt am linken Rand auf halber Zeilenhoehe. Dadurch laeuft
   der gedrehte Titel vom unteren Rand nach oben und steht mittig im
   schmalen Streifen. */
.akk-titel{position:absolute;left:50%;bottom:2rem;white-space:nowrap;
  color:var(--gp-weiss);font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;
  transform-origin:left center;transform:rotate(-90deg);
  transition:transform .55s var(--ease),font-size .55s var(--ease),
             letter-spacing .55s var(--ease),left .55s var(--ease),
             bottom .55s var(--ease)}
.akk-feld[data-aktiv="true"] .akk-titel{
  left:2rem;bottom:2.4rem;transform:rotate(0deg);font-size:1.05rem;
  letter-spacing:.04em}
.akk-pfeil{position:absolute;left:2rem;bottom:1.1rem;width:.85rem;height:.85rem;
  color:var(--gp-weiss);opacity:0;transform:translateX(-.4rem);
  transition:opacity .45s var(--ease) .12s,transform .45s var(--ease) .12s}
.akk-pfeil svg{width:100%;height:100%;display:block}
.akk-feld[data-aktiv="true"] .akk-pfeil{opacity:1;transform:none}
.akk-feld:focus-visible{outline:2px solid var(--gp-akzent);outline-offset:-4px}

/* Ohne Javascript uebernehmen Zeigen und Tabben dieselbe Aufgabe. */
.no-js .akkordeon:hover .akk-feld[data-aktiv="true"]{flex:0 1 5rem}
.no-js .akk-feld:hover,.akkordeon:focus-within .akk-feld:focus{flex:1 1 auto}
.no-js .akk-feld:hover .akk-titel,.akk-feld:focus .akk-titel{
  left:2rem;bottom:2.4rem;transform:rotate(0deg);font-size:1.05rem;
  letter-spacing:.04em}
.no-js .akk-feld:hover .akk-pfeil,.akk-feld:focus .akk-pfeil{opacity:1;transform:none}

/* Schmale Bildschirme: ein seitlich scrollbarer Streifen, alle Felder gleich
   breit und lesbar beschriftet. */
@media (max-width:899px){
  .akkordeon{height:auto;overflow-x:auto;gap:.6rem;
    scroll-snap-type:x mandatory;padding-bottom:.5rem}
  .akk-feld,.akk-feld[data-aktiv="true"]{flex:0 0 68vw;height:22rem;
    scroll-snap-align:start;transition:none}
  .akk-titel,.akk-feld[data-aktiv="true"] .akk-titel{
    left:1.5rem;transform:none;font-size:1rem;letter-spacing:.04em;
    bottom:2rem;transition:none}
  .akk-pfeil,.akk-feld[data-aktiv="true"] .akk-pfeil{
    left:1.5rem;opacity:1;transform:none;transition:none}
  .akk-schleier,.akk-feld[data-aktiv="true"] .akk-schleier{
    background:linear-gradient(to top,rgba(15,28,44,.8) 0%,rgba(15,28,44,.1) 60%,rgba(15,28,44,0) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .akk-feld,.akk-titel,.akk-pfeil,.akk-bild img,.akk-schleier{transition:none}
}

/* Kachel ohne Bild */
.tile{background:var(--gp-weiss);padding:2rem;height:100%;display:flex;flex-direction:column}
.sec-tint .tile{background:var(--gp-weiss)}
.tile-tint{background:var(--gp-blau-050)}
.tile-dark{background:var(--gp-blau-500);color:#fff}
.tile-out{border:1px solid var(--gp-linie);background:transparent}
.on-dark .tile-out{border-color:rgba(255,255,255,.18)}

/* Quicklink-Kachelreihe */
.quick{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:640px){.quick{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.quick{grid-template-columns:repeat(4,1fr)}}
.quick a{background:var(--gp-blau-050);padding:2rem 1.75rem;text-decoration:none;display:flex;flex-direction:column;gap:.75rem;transition:background-color .4s var(--ease)}
.quick a:hover{background:var(--gp-blau-100)}
.sec-tint .quick a{background:var(--gp-weiss)}
.sec-tint .quick a:hover{background:var(--gp-blau-100)}
.quick .num{font-size:.68rem;letter-spacing:.2em;color:var(--gp-blau-300)}
.quick .tlink{margin-top:auto;padding-top:1.1rem}

/* Kennzahlen */
.stats{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media (min-width:768px){.stats{grid-template-columns:repeat(3,1fr);gap:3rem}}
.stat .val{font-family:"EB Garamond",Georgia,serif;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.1}
.stat .cap{margin-top:.9rem;font-size:.875rem;line-height:1.6;max-width:22rem}

/* Prozess */
.steps{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:768px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1150px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding:2.25rem 2rem;background:rgba(255,255,255,.035)}
.step:nth-child(even){background:rgba(255,255,255,.07)}
.step .no{font-size:.7rem;letter-spacing:.24em;color:var(--gp-text-invers-sek)}
.step .h4{margin:1.1rem 0 .8rem;color:#fff}

/* Split (Bild + Text) */
.split{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr;gap:4rem}.split-wide{grid-template-columns:1.25fr .75fr}}
.split-media img{width:100%;height:100%;object-fit:cover}

/* Bandzeile */
.band{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.band{grid-template-columns:1.4fr auto;gap:3.5rem}}

/* Listen */
.checks li{position:relative;padding-left:1.6rem;margin-top:.75rem;line-height:1.6}
.checks li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:1px;background:var(--gp-blau-300)}
.on-dark .checks li::before{background:rgba(255,255,255,.45)}
.defs{display:grid;gap:0}
.defs .row{display:grid;grid-template-columns:1fr;gap:.3rem;padding:.85rem 0}
@media (min-width:600px){.defs .row{grid-template-columns:14rem 1fr;gap:1.5rem}}
.defs dt{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gp-blau-500)}
.on-dark .defs dt{color:var(--gp-text-invers-sek)}

/* ---------- Suchprofil-Karten ---------- */
/* Die Karte ist ein eigenes Objekt: heller Grund, oben eine kraeftige Kante,
   in der Mitte ein abgesetzter Block fuer Volumen und Region, damit die
   Zahlen als Daten lesbar sind und nicht als Fliesstext. */
.profile{background:var(--gp-weiss);border:1px solid var(--gp-linie);
  border-top:2px solid var(--gp-blau-700);
  padding:1.75rem;display:flex;flex-direction:column;height:100%;
  transition:border-top-color .4s var(--ease),box-shadow .4s var(--ease),
             transform .4s var(--ease)}
.profile:hover{border-top-color:var(--gp-akzent);transform:translateY(-3px);
  box-shadow:0 20px 44px -30px rgba(15,28,44,.55)}
.profile .tag{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gp-blau-300)}
.profile .h4{margin:.7rem 0 1.25rem;font-family:"EB Garamond",Georgia,serif;
  font-weight:400;font-size:1.5rem;letter-spacing:-.01em;line-height:1.15;
  color:var(--gp-blau-900)}
.profile .meta{display:grid;grid-template-columns:auto 1fr;
  gap:.45rem 1.1rem;font-size:.82rem;margin:0 0 1.25rem;
  background:var(--gp-blau-050);padding:.9rem 1rem}
.profile .meta dt{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gp-blau-500);align-self:center}
.profile .meta dd{color:var(--gp-blau-900);font-weight:500;
  font-variant-numeric:tabular-nums}
.profile .small{margin-top:auto;padding-top:1.1rem;
  border-top:1px solid var(--gp-linie)}
.sec-tint .profile{background:var(--gp-weiss)}
.sec-tint .profile .meta{background:var(--gp-blau-050)}

/* Auf dunklem Grund dieselbe Karte, nur invertiert. */
.on-dark .profile{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.5)}
.on-dark .profile:hover{border-top-color:var(--gp-akzent);
  background:rgba(255,255,255,.08);box-shadow:none}
.on-dark .profile .tag{color:var(--gp-text-invers-sek)}
.on-dark .profile .h4{color:var(--gp-weiss)}
.on-dark .profile .meta{background:rgba(255,255,255,.06)}
.on-dark .profile .meta dt{color:var(--gp-text-invers-sek)}
.on-dark .profile .meta dd{color:var(--gp-weiss)}
.on-dark .profile .small{border-top-color:rgba(255,255,255,.14);
  color:var(--gp-text-invers-sek)}
@media (prefers-reduced-motion:reduce){
  .profile,.profile:hover{transform:none;transition:none}
}

/* ---------- Formular ---------- */
.form{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:640px){.form{grid-template-columns:repeat(2,1fr)}.form .full{grid-column:1/-1}}
label{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gp-blau-500);margin-bottom:.55rem}
input,select,textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--gp-linie);background:#fff;color:var(--gp-text);
  font-family:inherit;font-size:.95rem;border-radius:0;transition:border-color .3s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gp-blau-700)}
textarea{min-height:9rem;resize:vertical}
.req{color:var(--gp-rot-500)}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.82rem;line-height:1.6;color:var(--gp-text-sekundaer)}
.consent input{width:1rem;height:1rem;margin-top:.25rem;flex:none}
.consent label{text-transform:none;letter-spacing:0;font-size:.82rem;color:var(--gp-text-sekundaer);margin:0}
/* Nach dem Absenden tritt die Bestaetigung an die Stelle des Formulars.
   Beide brauchen eine eigene Regel fuer [hidden], weil die Klassen darueber
   sonst ein display setzen wuerden. */
.form[hidden],[data-formularbereich][hidden],.bestaetigung[hidden]{display:none}
/* Sichtbar ist der Normalzustand, eingeblendet wird nur einmal beim
   Erscheinen. Laeuft die Animation nicht — etwa im Hintergrundtab — steht die
   Bestaetigung trotzdem lesbar da. */
.bestaetigung.ist-da{animation:bestaetigung-ein .7s var(--ease) both}
@keyframes bestaetigung-ein{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
.bestaetigung:focus{outline:none}
.bestaetigung:focus-visible{outline:2px solid var(--gp-akzent);outline-offset:.75rem}
.bestaetigung .defs .row:first-child{border-top:1px solid var(--gp-linie)}
.bestaetigung .defs .row{border-bottom:1px solid var(--gp-linie)}
@media (prefers-reduced-motion:reduce){
  .bestaetigung.ist-da{animation:none}
}

/* Spamfalle: fuer Menschen unsichtbar, fuer Skripte ausfuellbar */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hinweis{padding:1.1rem 1.25rem;font-size:.9rem;line-height:1.6;border-left:3px solid var(--gp-blau-300);
  background:var(--gp-blau-050);color:var(--gp-text-sekundaer)}
.hinweis-ok{border-left-color:var(--gp-blau-700)}
.hinweis-fehler{border-left-color:var(--gp-rot-500);color:var(--gp-rot-700)}

/* ---------- Fusszeile ---------- */
.foot{background:var(--gp-blau-900);color:#fff;padding:4.5rem 0 2.5rem}
.foot-grid{display:grid;gap:2.75rem;grid-template-columns:1fr;align-items:start}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}}
.foot h5{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gp-text-invers-sek);
  margin:0 0 1.2rem;font-weight:500;line-height:1.4;min-height:1.4em}
/* Nebeneinander sollen alle Spalten auf gleicher Hoehe beginnen, auch wenn
   eine Ueberschrift zweizeilig umbricht. */
@media (min-width:760px){.foot h5{min-height:2.8em}}
.foot a{text-decoration:none;color:rgba(255,255,255,.78);font-size:.9rem;transition:color .3s}
.foot a:hover{color:#fff}
.foot li+li{margin-top:.6rem}
.foot .brand{margin-bottom:1.4rem}
.foot-marken{margin-top:1.6rem;font-size:.82rem;color:rgba(255,255,255,.55)}
.foot-marken a{font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.25)}

/* Impressum, Datenschutz und AGB stehen in einer Zeile auf gleicher Hoehe. */
.foot-bottom{margin-top:3.5rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;
  font-size:.78rem;color:rgba(255,255,255,.55)}
.foot-bottom ul{display:flex;flex-wrap:wrap;align-items:center;gap:2rem;margin:0}
.foot-bottom li{margin:0;line-height:1.4}
.foot-bottom li+li{margin-top:0}
.foot-bottom a{font-size:.78rem;line-height:1.4;display:inline-block;white-space:nowrap}
.foot-note{margin-top:2rem;max-width:58rem;font-size:.74rem;line-height:1.7;color:rgba(255,255,255,.5)}
.foot-note+.foot-note{margin-top:.9rem}

/* ---------- Hinweis auf KI-Visualisierungen ---------- */
/* Nur Bilder, die eine konkrete Immobilie oder ein konkretes Projekt zeigen,
   bekommen diesen Hinweis. Der Rahmen verhaelt sich wie das Bild selbst,
   damit sich am uebrigen Aufbau nichts aendert. */
.ki-rahmen{position:relative;display:block;width:100%;height:100%}
.ki-rahmen>img{width:100%;height:100%}
.ki-hinweis{position:absolute;right:0;bottom:0;max-width:min(26rem,100%);
  padding:.45rem .8rem;
  background:rgba(15,28,44,.82);color:#fff;
  font-size:.66rem;line-height:1.45;letter-spacing:.01em}
@media (min-width:768px){.ki-hinweis{padding:.5rem .95rem;font-size:.7rem}}

/* ---------- Rechtstexte ---------- */
.legal h2{font-size:1.15rem;font-weight:600;font-family:Inter,sans-serif;margin:2.5rem 0 .9rem;letter-spacing:0}
.legal h3{font-size:1rem;font-weight:600;font-family:Inter,sans-serif;margin:1.75rem 0 .6rem}
.legal p,.legal li{color:var(--gp-text-sekundaer);font-size:.94rem;line-height:1.75}
.legal p+p{margin-top:.9rem}
.legal ul{margin:.6rem 0 0}
.legal ul li{position:relative;padding-left:1.25rem;margin-top:.45rem}
.legal ul li::before{content:"";position:absolute;left:0;top:.72em;width:.45rem;height:1px;background:var(--gp-blau-300)}

/* ---------- Personen ---------- */
.person{display:grid;gap:1.75rem;grid-template-columns:1fr;align-items:start}
@media (min-width:760px){.person{grid-template-columns:16rem 1fr;gap:3rem}}
.person+.person{margin-top:3.5rem;padding-top:3.5rem;border-top:1px solid var(--gp-linie)}
.person-foto{aspect-ratio:4/5;background:var(--gp-blau-100);display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.person-foto img{width:100%;height:100%;object-fit:cover}
.person-foto .ini{font-family:"EB Garamond",Georgia,serif;font-size:3rem;color:var(--gp-blau-300);letter-spacing:.06em}

/* ---------- Einblenden beim Scrollen ---------- */
.reveal{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}
.no-js .reveal{opacity:1;transform:none}

@media print{
  .head,.drawer,.foot,.hero-media,.skip{display:none!important}
  body{color:#000}
}