/* ============================================================
   Schrift lokal eingebunden — keine Verbindung zu Google.
   Variable Font: deckt alle Schnitte von 100 bis 900 ab.
   ============================================================ */
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   drs margraf — Übergangsseite
   Basis: DRS Basis-Styleguide V1.0 (August 2026)
   Navy #191E55 · Cyan #00A5E1 · Beige #DED1C9 · Schwarz #323232
   Typografie: Outfit
   ============================================================ */

:root{
  --navy:#191E55;
  --navy-deep:#12163F;
  --navy-80:#474B77;
  --navy-60:#757899;
  --navy-20:#D1D2DD;
  --cyan:#00A5E1;
  --cyan-dark:#0086B8;
  --cyan-80:#33B7E7;
  --cyan-20:#CCEDF9;
  --beige:#DED1C9;
  --beige-40:#F2EDE9;
  --beige-20:#F8F6F4;
  --black:#323232;
  --grey-60:#848484;

  --maxw:1500px;
  --pad:clamp(20px,4.5vw,64px);
  --r:14px;
  --r-lg:22px;
  --r-xl:32px;
  --shadow:0 1px 2px rgba(25,30,85,.04),0 14px 36px -14px rgba(25,30,85,.18);
  --shadow-lg:0 2px 4px rgba(25,30,85,.05),0 36px 72px -24px rgba(25,30,85,.32);
  --t:.32s cubic-bezier(.4,0,.2,1);
  --t-slow:.6s cubic-bezier(.22,.68,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;color:var(--black);background:#fff;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.nav-open{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.03em;color:var(--navy);font-weight:700}
h1{font-size:clamp(2.05rem,1.05rem + 2.35vw,3.35rem);letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,1.1rem + 2.7vw,3.4rem);text-wrap:balance}
h3{font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
::selection{background:var(--cyan);color:#fff}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);width:100%}
.section{padding:clamp(72px,8.5vw,144px) 0;position:relative}
#leistungen{padding-top:clamp(56px,6.5vw,104px)}
.section--beige{background:var(--beige-20)}
.section--navy{background:var(--navy);color:#fff}
.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}

/* --- Scroll-Fortschritt --- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;pointer-events:none}
.progress span{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-80));
}

/* --- Kicker / Section-Head --- */
.kicker{
  display:inline-flex;align-items:center;gap:.65em;
  font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:1.2rem;
}
.kicker::before{content:"";width:30px;height:2px;background:var(--cyan);border-radius:2px}
.section--navy .kicker,.hero .kicker{color:var(--cyan-80)}

.lead{font-size:clamp(1.05rem,.98rem + .42vw,1.3rem);color:var(--navy-60);max-width:60ch;line-height:1.6}
.section--navy .lead{color:rgba(255,255,255,.74)}
.section-head{max-width:70ch;margin-bottom:clamp(40px,5.5vw,72px)}
.section-head .lead{margin-top:1.3rem}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;gap:.6em;position:relative;
  padding:.88em 1.7em;border-radius:100px;border:2px solid transparent;
  font:inherit;font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t),box-shadow var(--t);
}
.btn--lg{padding:1.02em 2em;font-size:1.05rem}
.arw{transition:transform var(--t);display:inline-block}
.btn:hover .arw{transform:translateX(5px)}
.btn--primary{background:var(--cyan);color:#fff;box-shadow:0 12px 28px -12px rgba(0,165,225,.9)}
.btn--primary:hover{background:var(--cyan-dark);transform:translateY(-3px);box-shadow:0 20px 36px -14px rgba(0,165,225,.9)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-deep);transform:translateY(-3px);box-shadow:var(--shadow)}
.btn--ghost{border-color:var(--navy-20);color:var(--navy)}
.btn--ghost:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.btn--glass{
  color:#fff;border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
}
.btn--glass:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem}

/* ============ Header ============ */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid transparent;
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.header.is-compact{border-bottom-color:var(--navy-20);box-shadow:0 6px 24px -18px rgba(25,30,85,.5)}
.header__inner{display:flex;align-items:center;gap:24px;min-height:92px;transition:min-height var(--t)}
.header.is-compact .header__inner{min-height:74px}
.brand{flex:none;margin-right:auto;display:block}
.brand img{height:48px;width:auto;transition:height var(--t)}
.header.is-compact .brand img{height:40px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;padding:.55em .95em;border-radius:10px;text-decoration:none;
  font-weight:500;font-size:1rem;color:var(--navy);transition:color var(--t);
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:.95em;right:.95em;bottom:.28em;height:2px;
  background:var(--cyan);border-radius:2px;transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t);
}
.nav a:not(.btn):hover{color:var(--cyan)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}
.header .btn{padding:.66em 1.35em;font-size:.97rem;margin-left:10px}

.nav-toggle{
  display:none;background:none;border:0;padding:10px 6px;cursor:pointer;
  width:44px;height:44px;position:relative;
}
.nav-toggle span{
  display:block;height:2px;width:24px;background:var(--navy);border-radius:2px;
  margin:5px auto;transition:transform var(--t),opacity var(--t);
}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:980px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:92px 0 0;flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;padding:24px var(--pad) 40px;overflow-y:auto;
  }
  .nav:not(.is-open){display:none}
  .nav{z-index:65}
  body.nav-open .header{background:#fff;backdrop-filter:none;box-shadow:none}
  .nav a{padding:.9em .4em;font-size:1.25rem;font-weight:600}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{justify-content:center;margin:16px 0 0}
}

/* ============ HERO ============ */
.hero{
  position:relative;isolation:isolate;color:#fff;
  min-height:clamp(560px,78vh,880px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(60px,10vw,120px);
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
@media(max-width:1180px){
  .hero__media img{object-position:center 30%}
}
@media(max-width:700px){
  /* schmaler Ausschnitt: die Bildmitte zeigt die meisten Gesichter */
  .hero__media img{object-position:52% 26%}
}
.hero{background:var(--navy)}
.hero__veil{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:
    linear-gradient(95deg,rgba(25,30,85,.95) 0%,rgba(25,30,85,.88) 28%,rgba(25,30,85,.74) 52%,rgba(25,30,85,.66) 76%,rgba(25,30,85,.64) 100%),
    linear-gradient(to top,rgba(18,22,63,.9) 0%,rgba(18,22,63,.5) 34%,rgba(18,22,63,.28) 62%,rgba(18,22,63,.24) 100%);
}
@media(max-width:1180px){
  .hero__veil{
    background:
      linear-gradient(95deg,rgba(25,30,85,.95) 0%,rgba(25,30,85,.86) 34%,rgba(25,30,85,.6) 62%,rgba(25,30,85,.45) 100%),
      linear-gradient(to top,rgba(18,22,63,.82) 0%,transparent 46%);
  }
}
.hero__veil::after{
  content:"";position:absolute;inset:0;
  background:url('drs-keyvisual.png') left -8% center/auto 92% no-repeat;
  opacity:.2;
}
@media(max-width:900px){
  .hero__veil::after{background-position:left -30% center;background-size:auto 64%;opacity:.1}
}
.hero__inner{flex:1;display:flex;align-items:center;padding-block:clamp(56px,7vw,110px) clamp(150px,16vw,240px)}
.hero__text{max-width:min(820px,53%)}
.hero h1{color:#fff;text-wrap:balance;text-shadow:0 2px 30px rgba(12,16,48,.5)}
.hero h1 em{font-style:normal;color:var(--cyan-80)}
.hero .lead{margin-top:1.6rem;color:rgba(255,255,255,.86);max-width:52ch;font-size:clamp(1.06rem,1rem + .45vw,1.32rem)}

/* Fakten-Leiste am Hero-Fuß */
.hero__bar{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(120,190,235,.28);
  border:1px solid rgba(150,215,245,.3);border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;
  backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 -12px 44px -20px rgba(0,0,0,.5);
  margin-bottom:calc(-1 * clamp(38px,5vw,72px));
}
.hero__bar>div{
  background:linear-gradient(180deg,rgba(30,52,120,.66),rgba(22,34,88,.78));
  padding:1.5rem 1.6rem;transition:background var(--t);
}
.hero__bar>div:hover{background:linear-gradient(180deg,rgba(0,110,170,.6),rgba(22,34,88,.8))}
.hero__bar a{text-decoration:none;display:block}
.hero__bar b{
  display:block;font-size:1.15rem;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.2;
}
.hero__bar span{display:block;font-size:.88rem;color:rgba(255,255,255,.66);margin-top:.28rem;line-height:1.4}
.hero__bar a:hover b{color:var(--cyan-80)}
@media(max-width:1180px){.hero__text{max-width:none}}
@media(max-width:900px){.hero__bar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .hero__bar{grid-template-columns:1fr}
  .hero__bar>div{padding:1.05rem 1.2rem}
}

/* ============ Merkmal-Zeile unter dem Hero ============ */
.facts{padding:0 0 clamp(26px,3vw,48px);background:#fff;position:relative;z-index:4;display:flow-root}
.facts__list{
  list-style:none;margin:calc(-1 * clamp(62px,8vw,100px)) 0 0;
  min-height:158px;align-content:center;
  padding:clamp(24px,2.4vw,34px) clamp(26px,3vw,50px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px);
  border-radius:clamp(26px,2.8vw,42px);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(25,30,85,.1);
  box-shadow:0 24px 60px -26px rgba(25,30,85,.34),0 2px 8px -2px rgba(25,30,85,.06);
}
.facts__list li{position:relative;padding-left:clamp(20px,2vw,32px)}
.facts__list li::before{
  content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:2px;
  background:var(--navy-20);border-radius:2px;
}
.facts__list li:first-child::before{display:none}
.facts__list li:first-child{padding-left:0}
.facts__list b{
  display:block;font-size:1.02rem;font-weight:600;color:var(--navy);
  letter-spacing:-.02em;line-height:1.25;margin-bottom:.26rem;
}
.facts__list span{display:block;font-size:.88rem;color:var(--navy-60);line-height:1.45}
.facts__list a{text-decoration:none;display:block;transition:color var(--t)}
.facts__list a:hover b{color:var(--cyan)}
@media(max-width:900px){
  .facts__list{grid-template-columns:repeat(2,1fr);gap:26px 30px;margin-top:calc(-1 * clamp(50px,7vw,90px))}
}
@media(max-width:520px){
  .facts__list{grid-template-columns:1fr;gap:22px;min-height:0}
  /* einspaltig trennen die Striche untereinander -> auch der erste bekommt einen */
  .facts__list li:first-child::before{display:block}
  .facts__list li:first-child{padding-left:clamp(20px,2vw,32px)}
}

/* ============ LEISTUNGEN ============ */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px)}
@media(max-width:880px){.svc{grid-template-columns:1fr}}
.svc__card{
  position:relative;overflow:hidden;isolation:isolate;
  background:#fff;border:1px solid var(--navy-20);border-radius:var(--r-xl);
  padding:clamp(34px,3.6vw,56px);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.svc__card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(to bottom,var(--cyan),var(--cyan-80));
  transform:scaleY(0);transform-origin:50% 0;transition:transform var(--t-slow);
}
.svc__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc__card:hover::before{transform:scaleY(1)}
.svc__num{
  position:absolute;right:-.05em;top:.06em;z-index:-1;
  font-size:clamp(7rem,12vw,11rem);font-weight:800;line-height:1;
  color:var(--beige-40);letter-spacing:-.06em;
  transition:color var(--t),transform var(--t-slow);
}
.svc__card:hover .svc__num{color:var(--cyan-20);transform:translate(-8px,6px)}
.svc__body h3{font-size:clamp(1.5rem,1.2rem + .8vw,2rem);margin-bottom:.9rem}
.svc__body p{color:var(--navy-60);font-size:1.06rem;max-width:44ch}
.svc__link{
  display:inline-flex;align-items:center;gap:.55em;margin-top:1.8rem;
  font-weight:600;font-size:.98rem;color:var(--navy);text-decoration:none;
  transition:color var(--t);
}
.svc__link:hover{color:var(--cyan)}
.svc__link:hover .arw{transform:translateX(5px)}

/* ============ Newsletter ============ */
.newsletter{padding-top:0;background:var(--beige-20)}
.nl-card{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--navy);color:#fff;border-radius:var(--r-xl);
  padding:clamp(32px,4vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.nl-card::before{
  content:"";position:absolute;z-index:-1;right:-4%;top:50%;translate:0 -50%;
  width:min(340px,38%);aspect-ratio:900/973;opacity:.13;
  background:url('drs-keyvisual.png') center/contain no-repeat;
}
@media(max-width:880px){.nl-card{grid-template-columns:1fr}}
.nl-card h2{color:#fff;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem)}
.nl-card .lead{color:rgba(255,255,255,.76);margin-top:1rem}
.nl-card__form label{
  display:block;font-size:.86rem;font-weight:600;color:#fff;margin-bottom:.55em;
}
.nl-card__row{display:flex;gap:12px;flex-wrap:wrap}
.nl-card__row input{
  flex:1 1 220px;min-width:0;font:inherit;font-size:1rem;color:#fff;
  padding:.9em 1.1em;border:1.5px solid rgba(255,255,255,.28);border-radius:12px;
  background:rgba(255,255,255,.08);transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.nl-card__row input::placeholder{color:rgba(255,255,255,.45)}
.nl-card__row input:focus{
  outline:0;border-color:var(--cyan);background:rgba(255,255,255,.14);
  box-shadow:0 0 0 4px rgba(0,165,225,.25);
}
.nl-card__row .btn{flex:0 0 auto}
.nl-card .check{color:rgba(255,255,255,.62);margin:18px 0 0;font-size:.82rem}
.nl-card .check a{color:#fff}

/* ============ STATEMENT / KANZLEI ============ */
.statement{overflow:hidden}
.statement__grid{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(32px,5vw,88px);align-items:center;
}
@media(max-width:900px){.statement__grid{grid-template-columns:1fr}}
.statement__photo{
  margin:0;position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-lg);background:#fff;
}
.statement__photo::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(to top,rgba(25,30,85,.18),transparent);
}
.statement__photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}
@media(max-width:900px){
  .statement__photo{max-width:340px}
  .statement__photo img{aspect-ratio:1}
}
.statement blockquote{
  margin:0 0 1.6rem;padding-left:clamp(18px,2vw,28px);
  border-left:3px solid var(--cyan);
  font-size:clamp(1.35rem,1rem + 1.5vw,2.1rem);font-weight:600;line-height:1.28;
  letter-spacing:-.025em;color:var(--navy);text-wrap:balance;
}
.statement__by{margin-bottom:2rem;font-size:.96rem}
.statement__by b{display:block;color:var(--navy);font-weight:600}
.statement__by span{color:var(--navy-60)}
.statement__text p{color:var(--navy-60);font-size:1.06rem;max-width:58ch}

/* ============ TEAM ============ */
.team-photo{
  margin:0 0 clamp(36px,4.5vw,60px);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow);background:var(--beige-20);
}
.team-photo img{width:100%;height:auto;display:block}
.team-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(20px,2vw,32px);
  grid-auto-rows:1fr;              /* gleiche Zeilenhöhen -> ruhiges Raster */
}
@media(max-width:620px){
  .team-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .person__name{font-size:.95rem}
  .person__role{font-size:.82rem}
  .person__qual{font-size:.74rem}
  .person__tag{font-size:.56rem;padding:.7em .6em .6em}
}
.person{display:flex;flex-direction:column;height:100%;min-width:0}

.person__frame{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:#fff;border:1px solid rgba(25,30,85,.1);
  aspect-ratio:3/4;box-shadow:0 1px 2px rgba(25,30,85,.04);
  transition:box-shadow var(--t),border-color var(--t),transform var(--t);
}
.person:hover .person__frame{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}

.person__frame img{
  width:100%;height:100%;object-fit:cover;object-position:center 12%;
  transition:transform var(--t-slow);
}
.person:hover .person__frame img{transform:scale(1.045)}
.person__frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 0 var(--cyan);transition:box-shadow var(--t);
}
.person:hover .person__frame::after{box-shadow:inset 0 0 0 2px var(--cyan)}
.person__frame--empty{
  background:linear-gradient(140deg,var(--beige-40),var(--beige));
  display:grid;place-items:center;
}
.person__frame--empty::before{
  content:"";position:absolute;inset:0;
  background:url('drs-keyvisual.png') center/42% no-repeat;opacity:.12;
}
.person__soon{
  position:relative;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy-60);
  background:rgba(255,255,255,.78);padding:.5em 1.1em;border-radius:100px;
}
.person__tag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:linear-gradient(to top,rgba(25,30,85,.94),rgba(25,30,85,.72));
  padding:.85em 1em .7em;text-align:center;
}
.person__meta{padding-top:1rem;flex:1}
.person__name{font-weight:600;color:var(--navy);font-size:1.04rem;line-height:1.3;letter-spacing:-.015em;overflow-wrap:anywhere}

.person__role{font-size:.89rem;color:var(--navy-60);margin:.3rem 0 0;line-height:1.45;overflow-wrap:anywhere;hyphens:auto}
.person__qual{
  margin:.5rem 0 0;font-size:.79rem;line-height:1.45;color:var(--navy-60);
  padding-top:.5rem;border-top:1px solid var(--navy-20);
  overflow-wrap:anywhere;hyphens:auto;
}

/* ============ STANDORTE ============ */
.locations{overflow:hidden}
.locations::before{
  content:"";position:absolute;right:-6%;bottom:-14%;width:min(760px,62vw);
  aspect-ratio:900/973;opacity:.17;pointer-events:none;
  background:url('drs-keyvisual.png') center/contain no-repeat;
}
@media(max-width:820px){
  .locations::before{width:min(420px,80vw);right:-18%;bottom:-8%;opacity:.13}
}
.loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px);position:relative}
@media(max-width:860px){.loc-grid{grid-template-columns:1fr}}
.loc{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xl);overflow:hidden;
  display:flex;flex-direction:column;
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.loc__photo{
  margin:0;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-deep);
}
.loc__photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow);
}
.loc:hover .loc__photo img{transform:scale(1.05)}
/* Abdunkelung über ein Overlay statt über filter:
   filter auf Bildern in overflow:hidden + border-radius rendert in Safari unzuverlässig. */
.loc__photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(18,22,63,.86),rgba(18,22,63,.3) 55%,rgba(18,22,63,.22));
  transition:opacity var(--t);
}
.loc:hover .loc__photo::after{opacity:.72}
.loc__body{padding:clamp(28px,3.2vw,44px);display:flex;flex-direction:column;flex:1}
.loc:hover{background:rgba(255,255,255,.09);border-color:rgba(0,165,225,.6);transform:translateY(-5px)}
.loc__head{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;margin-bottom:1.2rem}
.loc__head h3{font-size:clamp(1.4rem,1.1rem + .8vw,1.9rem)}
.loc__badge{
  font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:var(--cyan);color:#fff;padding:.42em .9em;border-radius:100px;
}
.loc address{
  font-style:normal;color:rgba(255,255,255,.74);font-size:1.02rem;line-height:1.65;
  margin:0 0 1.7rem;
}
.loc__contact{margin:0 0 1.8rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:.6em}
.loc__contact>div{display:flex;gap:1em;align-items:baseline}
.loc__contact dt{color:rgba(255,255,255,.52);font-size:.86rem;min-width:66px;flex:none}
.loc__contact dd{margin:0;color:#fff;font-size:.99rem;overflow-wrap:anywhere}
.loc__contact a{color:#fff;text-decoration:none;transition:color var(--t)}
.loc__contact a:hover{color:var(--cyan-80)}
.loc__map{
  margin-top:auto;display:inline-flex;align-items:center;gap:.55em;
  font-weight:600;font-size:.95rem;color:var(--cyan-80);text-decoration:none;
  transition:color var(--t);
}
.loc__map:hover{color:#fff}
.loc__map:hover .arw{transform:translateX(5px)}

/* ============ KONTAKT ============ */
.contact{background:var(--beige-20)}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,5vw,88px);align-items:start;
}
@media(max-width:940px){.contact__grid{grid-template-columns:1fr}}
.contact__direct{display:grid;gap:12px;margin-top:2.4rem}
.contact__direct a{
  display:flex;align-items:center;gap:1.1em;text-decoration:none;
  background:#fff;border:1px solid var(--navy-20);border-radius:var(--r);
  padding:1.05em 1.3em;transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.contact__direct a:hover{border-color:var(--cyan);transform:translateX(5px);box-shadow:var(--shadow)}
.contact__direct .ico{
  width:42px;height:42px;flex:none;border-radius:12px;background:var(--cyan-20);
  display:grid;place-items:center;color:var(--cyan-dark);transition:background var(--t),color var(--t);
}
.contact__direct a:hover .ico{background:var(--cyan);color:#fff}
.contact__direct .txt{flex:1;min-width:0}
.contact__direct .k{
  display:block;font-size:.74rem;color:var(--navy-60);
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.contact__direct .v{display:block;color:var(--navy);font-weight:600;overflow-wrap:anywhere}
.contact__direct .arw{color:var(--navy-20);flex:none}
.contact__direct a:hover .arw{color:var(--cyan);transform:translateX(4px)}

.form{
  background:#fff;border-radius:var(--r-xl);padding:clamp(28px,3.4vw,52px);
  box-shadow:var(--shadow-lg);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.field-row{grid-template-columns:1fr;gap:0}}
.field{margin-bottom:18px}
.field label{display:block;font-size:.86rem;font-weight:600;color:var(--navy);margin-bottom:.5em}
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--black);
  padding:.88em 1.05em;border:1.5px solid var(--navy-20);border-radius:12px;background:var(--beige-20);
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.field input:focus,.field textarea:focus{
  outline:0;border-color:var(--cyan);background:#fff;box-shadow:0 0 0 4px var(--cyan-20);
}
.field textarea{resize:vertical;min-height:130px}
.check{display:flex;gap:.8em;align-items:flex-start;font-size:.86rem;color:var(--navy-60);line-height:1.55;margin:22px 0}
.check input{margin-top:.22em;width:19px;height:19px;flex:none;accent-color:var(--cyan)}
.check a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.form .btn{width:100%;justify-content:center}
.form__hint{font-size:.83rem;color:var(--grey-60);margin-top:1.1rem;text-align:center}
.form__hint a{color:var(--navy)}

/* ============ FOOTER ============ */
.footer{background:var(--navy);color:rgba(255,255,255,.7);padding:clamp(64px,7vw,96px) 0 0;font-size:.97rem;position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;left:-4%;top:-30%;width:min(460px,44vw);
  aspect-ratio:900/973;opacity:.05;pointer-events:none;
  background:url('drs-keyvisual.png') center/contain no-repeat;
}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:clamp(32px,4vw,72px);padding-bottom:clamp(44px,5vw,64px);position:relative}
@media(max-width:860px){.footer__top{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}}
@media(max-width:540px){.footer__top{grid-template-columns:1fr}}
.footer__brand img{height:54px;width:auto;margin-bottom:1.6rem}
.footer__brand p{max-width:38ch;color:rgba(255,255,255,.6);font-size:.96rem}
.footer h4{color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1.2rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.68em}
.footer li{line-height:1.55}
.footer a{color:rgba(255,255,255,.7);text-decoration:none;transition:color var(--t)}
.footer a:hover{color:var(--cyan-80)}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.14);padding:26px 0;
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;
  font-size:.88rem;color:rgba(255,255,255,.5);position:relative;
}
.footer__bottom nav{display:flex;flex-wrap:wrap;gap:10px 24px}

/* ============ Rechtstexte ============ */
.legal{padding:clamp(52px,7vw,104px) 0}
.legal .wrap{max-width:1100px}
.legal__inner{max-width:78ch}
.legal h1{margin-bottom:1.3rem;font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem)}
.legal h2{font-size:1.55rem;margin:3rem 0 1rem;padding-top:1.8rem;border-top:1px solid var(--navy-20)}
.legal h3{font-size:1.14rem;margin:2.1rem 0 .6rem}
.legal p,.legal li{color:var(--black);font-size:1rem;line-height:1.7}
.legal ul{padding-left:1.2em;margin:0 0 1.1em}
.legal li{margin-bottom:.35em}
.legal a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.legal a:hover{color:var(--cyan)}
.legal address{
  font-style:normal;background:var(--beige-20);border-left:3px solid var(--cyan);
  padding:1.2em 1.4em;border-radius:0 12px 12px 0;margin:0 0 1.5rem;line-height:1.75;
}
.legal .uppercase-block{background:var(--beige-20);padding:1.2em 1.4em;border-radius:12px;font-size:.9rem}
.legal .toc{background:var(--beige-20);border-radius:var(--r-lg);padding:1.5em 1.8em;margin-bottom:2.8rem}
.legal .toc ol{margin:0;padding-left:1.3em;display:grid;gap:.4em}
.legal .toc a{text-decoration:none;font-weight:500}
.legal .toc a:hover{text-decoration:underline}
.back{
  display:inline-flex;align-items:center;gap:.5em;font-size:.94rem;font-weight:600;
  color:var(--navy-60);text-decoration:none;margin-bottom:2.2rem;transition:color var(--t),gap var(--t);
}
.back:hover{color:var(--cyan);gap:.85em}

/* ============ Reveal ============ */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--t-slow),transform var(--t-slow)}
.js .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

@media print{
  .header,.footer,.nav,.btn,.progress,.hero__media,.hero__veil{display:none}
  body{font-size:11pt}
}

/* ============ Kontaktformular: Spamschutz & Meldungen ============ */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__error{
  margin:0 0 20px;padding:.95em 1.15em;border-radius:12px;
  background:#FDECEC;border:1px solid #F3C2C2;color:#8E2C2C;
  font-size:.9rem;line-height:1.5;
}
.form__error a{color:#8E2C2C;font-weight:600}

/* ============ Dankesseite ============ */
.danke__box{max-width:60ch;text-align:center;margin-inline:auto;padding:clamp(20px,4vw,50px) 0}
.danke__icon{
  display:grid;place-items:center;width:76px;height:76px;margin:0 auto 2rem;
  border-radius:50%;background:var(--cyan-20);color:var(--cyan-dark);
}
.danke h1{margin-bottom:1.2rem}
.danke .lead{margin-inline:auto}
.danke p{margin-top:1.2rem;color:var(--navy-60)}
.danke .btn-row{justify-content:center}

/* Buttons in Rechtstexten/Dankesseite: ".legal a" ist spezifischer als ".btn--*"
   und würde Textfarbe und Unterstreichung überschreiben. */
.legal a.btn{text-decoration:none}
.legal a.btn--navy,.legal a.btn--navy:hover,
.legal a.btn--primary,.legal a.btn--primary:hover{color:#fff}