/* ECE GRUPPE GEBÄUDEREINIGUNG — eigenes Design-System
   Bewusst anders als BAU: warme Töne statt Anthrazit, weiche Radien statt Kanten,
   Outfit/Manrope statt IBM Plex, Wisch-Animation statt Einblendung. */

:root{
  --red:#C3121A; --red-2:#E01F28; --red-dk:#8A0B12; --red-xdk:#6B080D;
  --rose:#FFF4F4; --rose-2:#FADEDF; --rose-3:#F5C9CB;
  --plum:#3E1218; --plum-2:#54191F;
  --sand:#FBF9F7; --sand-2:#F3EDE9; --white:#FFFFFF;
  --ink:#2B2022; --ink-2:#6B5A5D; --ink-3:#8B7B7E;
  --line:rgba(43,32,34,.13); --line-d:rgba(255,244,244,.2);
  --r:16px; --r-s:10px; --r-l:28px;
  --sh:0 2px 8px rgba(62,18,24,.06), 0 12px 30px rgba(62,18,24,.07);
  --sh-l:0 4px 14px rgba(62,18,24,.08), 0 22px 54px rgba(62,18,24,.10);
  --maxw:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--sand); color:var(--ink);
  font-family:"Manrope",system-ui,sans-serif; font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.4rem)}
.sec{padding:clamp(3.2rem,7vw,6rem) 0}
.sec--alt{background:var(--sand-2)}
.sec--rose{background:var(--rose)}
.sec--plum{background:var(--plum); color:var(--sand)}
.sec--red{background:var(--red); color:#fff}

/* ---------------- Typografie ---------------- */
.h1,.h2,.h3{font-family:"Outfit",system-ui,sans-serif; font-weight:700; margin:0;
  line-height:1.06; letter-spacing:-.02em; text-wrap:balance}
.h1{font-size:clamp(2.4rem,6vw,4.4rem)}
.h2{font-size:clamp(1.9rem,4.1vw,3rem); line-height:1.1}
.h3{font-size:clamp(1.2rem,2.2vw,1.62rem); line-height:1.2}
.lead{font-size:clamp(1.05rem,1.7vw,1.22rem); line-height:1.62; max-width:62ch; color:var(--ink-2)}
.sec--plum .lead,.sec--red .lead{color:rgba(255,255,255,.9)}
.pill{display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:.42rem .9rem; border-radius:999px;
  background:var(--rose-2); color:var(--red-dk)}
.pill--solid{background:var(--red); color:#fff}
.pill--light{background:rgba(255,255,255,.18); color:#fff}
.eyebrow{margin-bottom:1.1rem}

/* ---------------- Wisch-Reveal (Signatur-Bewegung) ---------------- */
.wipe{position:relative; display:inline-block}
.wipe > span{opacity:0}
.wipe.vis > span{animation:wtxt .01s .40s forwards}
@keyframes wtxt{to{opacity:1}}
.wipe::after{content:""; position:absolute; inset:-.1em -.2em; background:var(--red);
  transform:scaleX(0); transform-origin:left; border-radius:3px}
.wipe.vis::after{animation:wsweep .92s cubic-bezier(.68,0,.28,1) forwards}
@keyframes wsweep{
  0%{transform:scaleX(0); transform-origin:left}
  44%{transform:scaleX(1); transform-origin:left}
  56%{transform:scaleX(1); transform-origin:right}
  100%{transform:scaleX(0); transform-origin:right}}

.fade{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.fade.vis{opacity:1; transform:none}
.fd1{transition-delay:.09s} .fd2{transition-delay:.18s} .fd3{transition-delay:.27s}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:54px;
  padding:.9rem 1.7rem; border-radius:999px; border:2px solid var(--red); background:var(--red);
  color:#fff; font-family:"Outfit",sans-serif; font-size:1rem; font-weight:600; text-decoration:none;
  cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .14s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(195,18,26,.24)}
.btn:hover{background:var(--red-dk); border-color:var(--red-dk); transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(195,18,26,.32)}
.btn:active{transform:translateY(0)}
.btn--out{background:transparent; color:var(--red); box-shadow:none}
.btn--out:hover{background:var(--red); color:#fff}
.btn--white{background:#fff; color:var(--red); border-color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.16)}
.btn--white:hover{background:var(--plum); border-color:var(--plum); color:#fff}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55); box-shadow:none}
.btn--ghost:hover{background:#fff; color:var(--red); border-color:#fff}
.btn--sm{min-height:46px; padding:.65rem 1.25rem; font-size:.92rem}
.btnrow{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.9rem}

/* ---------------- Kopf ---------------- */
.top{position:sticky; top:0; z-index:60; background:rgba(251,249,247,.92);
  backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:1.4rem; min-height:68px}
.logo{font-family:"Outfit",sans-serif; font-weight:700; font-size:1.12rem; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap; display:flex; align-items:center; gap:.5rem}
.logo i{width:26px; height:26px; border-radius:8px; background:var(--red); display:inline-block;
  position:relative; flex:none}
.logo i::after{content:""; position:absolute; left:7px; top:7px; width:12px; height:12px;
  border-radius:50%; background:#fff}
.logo b{font-weight:700} .logo em{font-style:normal; color:var(--red); font-weight:700}
.nav{display:flex; gap:.35rem; margin-left:auto}
.nav a{font-size:.94rem; font-weight:500; text-decoration:none; padding:.55rem .85rem;
  border-radius:999px; transition:background .2s, color .2s}
.nav a:hover{background:var(--rose-2); color:var(--red-dk)}
.nav a.cur{background:var(--red); color:#fff}
.top .btn{margin-left:1rem}
@media(max-width:1040px){ .nav{display:none} .top .btn{margin-left:auto} }

/* ---------------- Hero ---------------- */
.hero{background:var(--red); color:#fff; position:relative; overflow:hidden;
  border-radius:0 0 var(--r-l) var(--r-l); padding:clamp(3rem,7vw,5.4rem) 0 clamp(3.4rem,7vw,5rem)}
.hero::before{content:""; position:absolute; width:60vw; height:60vw; right:-16vw; top:-28vw;
  border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%)}
.hero::after{content:""; position:absolute; width:38vw; height:38vw; left:-14vw; bottom:-22vw;
  border-radius:50%; background:radial-gradient(circle,rgba(107,8,13,.4),transparent 64%)}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center}
@media(max-width:940px){ .hero-grid{grid-template-columns:1fr} }
.hero .h1{color:#fff}
.hero .h1 .ln{display:block; overflow:hidden}
.hero .h1 .ln i{display:block; font-style:normal; transform:translateY(108%);
  animation:hrise .9s cubic-bezier(.16,.9,.24,1) forwards}
.hero .h1 .ln:nth-child(1) i{animation-delay:.10s}
.hero .h1 .ln:nth-child(2) i{animation-delay:.22s}
.hero .h1 .ln:nth-child(3) i{animation-delay:.34s}
@keyframes hrise{to{transform:none}}
.hero .lead{margin:1.5rem 0 0; opacity:0; animation:hfade .8s .58s forwards}
.hero .btnrow{opacity:0; animation:hfade .8s .72s forwards}
.hero .eyebrow{opacity:0; animation:hfade .6s .08s forwards}
@keyframes hfade{to{opacity:1}}

/* Schwebende Karte im Hero */
.hcard{background:#fff; color:var(--ink); border-radius:var(--r); padding:clamp(1.3rem,3vw,1.9rem);
  box-shadow:var(--sh-l); opacity:0; animation:hcard .9s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hcard{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
.hcard h3{font-family:"Outfit",sans-serif; font-size:1.1rem; font-weight:700; margin:0 0 .3rem}
.hcard p{margin:0 0 1.1rem; font-size:.94rem; color:var(--ink-2)}
.hcard .mini{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1.1rem}
.hcard .mini div{background:var(--rose); border-radius:var(--r-s); padding:.75rem .85rem}
.hcard .mini b{display:block; font-family:"Outfit",sans-serif; font-size:1.35rem; font-weight:700;
  color:var(--red); line-height:1.1; font-variant-numeric:tabular-nums}
.hcard .mini span{font-size:.76rem; color:var(--ink-2)}

/* ---------------- Vertrauensleiste ---------------- */
.trust{background:var(--plum); color:var(--sand)}
.trust-in{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.4rem 0}
.trust-i{display:flex; align-items:flex-start; gap:.65rem; font-size:.92rem; line-height:1.4}
.trust-i b{flex:none; width:22px; height:22px; border-radius:50%; background:var(--red);
  display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#fff; margin-top:.1rem}
@media(max-width:860px){ .trust-in{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .trust-in{grid-template-columns:1fr} }

/* ---------------- Karten mit Glanz ---------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.4rem)}
@media(max-width:900px){ .cards{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .cards{grid-template-columns:1fr} }
.card{background:#fff; border-radius:var(--r); padding:clamp(1.2rem,2.6vw,1.7rem);
  box-shadow:var(--sh); position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s}
.card::before{content:""; position:absolute; top:0; left:-70%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg); transition:left .75s cubic-bezier(.2,.8,.2,1); pointer-events:none}
.card:hover{transform:translateY(-5px); box-shadow:var(--sh-l)}
.card:hover::before{left:130%}
.card-ic{width:44px; height:44px; border-radius:12px; background:var(--rose-2); color:var(--red-dk);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:.9rem}
.card h3{font-family:"Outfit",sans-serif; font-size:1.14rem; font-weight:700; margin:0 0 .45rem}
.card p{margin:0 0 1rem; font-size:.95rem; color:var(--ink-2)}
.card .lnk{font-weight:700; font-size:.92rem; text-decoration:none; color:var(--red)}
.card .lnk:hover{text-decoration:underline}

/* ---------------- Leistungs-Tabs ---------------- */
.tabs{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.6rem}
.tab{border:2px solid var(--line); background:#fff; border-radius:999px; padding:.6rem 1.15rem;
  font-family:"Outfit",sans-serif; font-size:.95rem; font-weight:600; cursor:pointer; min-height:46px;
  color:var(--ink); transition:all .22s}
.tab:hover{border-color:var(--rose-3)}
.tab[aria-selected="true"]{background:var(--red); border-color:var(--red); color:#fff;
  box-shadow:0 4px 14px rgba(195,18,26,.26)}
.panel{display:none; background:#fff; border-radius:var(--r); padding:clamp(1.3rem,3vw,2.2rem);
  box-shadow:var(--sh)}
.panel.on{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.4rem,3vw,2.6rem);
  animation:pfade .4s cubic-bezier(.2,.8,.2,1)}
@keyframes pfade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media(max-width:820px){ .panel.on{grid-template-columns:1fr} }
.panel h3{margin:0 0 .6rem}
.panel > div > p{margin:0 0 1.1rem; color:var(--ink-2)}
.panel ul{margin:0; padding:0; list-style:none}
.panel li{padding:.44rem 0 .44rem 1.6rem; position:relative; font-size:.95rem}
.panel li::before{content:"✓"; position:absolute; left:0; top:.44rem; color:var(--red); font-weight:700}
.panel-side{background:var(--rose); border-radius:var(--r-s); padding:1.2rem}
.panel-side dt{font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin-top:1rem}
.panel-side dt:first-child{margin-top:0}
.panel-side dd{margin:.15rem 0 0; font-weight:600; font-variant-numeric:tabular-nums}

/* ---------------- Rhythmus-Planer (Signatur) ---------------- */
.rh{background:#fff; border-radius:var(--r); box-shadow:var(--sh); overflow:hidden}
.rh-top{padding:1.15rem 1.4rem; border-bottom:1px solid var(--line); display:flex;
  justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.rh-top h3{margin:0; font-family:"Outfit",sans-serif; font-size:1.08rem; font-weight:700}
.rh-body{padding:1.4rem}
.rh-lbl{font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .6rem}
.rh-opts{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.4rem}
.rh-opt{border:2px solid var(--line); background:#fff; border-radius:999px; padding:.5rem 1rem;
  font-family:"Outfit",sans-serif; font-size:.92rem; font-weight:600; cursor:pointer; min-height:44px;
  color:var(--ink); transition:all .2s}
.rh-opt:hover{border-color:var(--rose-3)}
.rh-opt[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#fff}
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:.45rem; margin-bottom:1.4rem}
.day{border-radius:var(--r-s); background:var(--sand-2); padding:.85rem .3rem; text-align:center;
  transition:background .35s, color .35s, transform .35s; transform:scale(.94); opacity:.55}
.day b{display:block; font-family:"Outfit",sans-serif; font-size:.86rem; font-weight:700}
.day span{font-size:.66rem; color:var(--ink-3)}
.day.on{background:var(--red); color:#fff; transform:scale(1); opacity:1;
  box-shadow:0 4px 12px rgba(195,18,26,.28)}
.day.on span{color:rgba(255,255,255,.85)}
.rh-tasks{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
@media(max-width:700px){ .rh-tasks{grid-template-columns:1fr} .week{gap:.3rem} .day{padding:.6rem .2rem} }
.rh-tasks ul{margin:.5rem 0 0; padding:0; list-style:none}
.rh-tasks li{padding:.34rem 0 .34rem 1.5rem; position:relative; font-size:.93rem;
  opacity:0; transform:translateX(-8px); transition:opacity .4s, transform .4s}
.rh-tasks li.on{opacity:1; transform:none}
.rh-tasks li::before{content:""; position:absolute; left:0; top:.85em; width:8px; height:8px;
  border-radius:50%; background:var(--rose-3)}
.rh-tasks .mo li::before{background:var(--red)}
.rh-foot{padding:1rem 1.4rem; background:var(--rose); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.9rem}

/* ---------------- Statistik-Balken ---------------- */
.bars{display:grid; gap:1.15rem}
.bar-r b{font-family:"Outfit",sans-serif; font-size:1.5rem; font-weight:700; color:var(--red);
  font-variant-numeric:tabular-nums}
.bar-r .t{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; gap:1rem}
.bar-r .t span{font-size:.9rem; color:var(--ink-2)}
.bar-t{height:10px; border-radius:999px; background:var(--rose-2); overflow:hidden}
.bar-t i{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--red-2)); transition:width 1.3s cubic-bezier(.2,.8,.2,1)}

/* ---------------- Referenz-Karussell ---------------- */
.caro{position:relative; overflow:hidden; border-radius:var(--r)}
.caro-track{display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1)}
.caro-s{min-width:100%; padding:clamp(1.6rem,4vw,2.8rem); background:#fff}
.caro-s .pill{margin-bottom:1rem}
.caro-s h3{margin:0 0 .5rem}
.caro-s p{margin:0 0 1.3rem; color:var(--ink-2); max-width:56ch}
.caro-facts{display:flex; gap:2rem; flex-wrap:wrap}
.caro-facts div b{display:block; font-family:"Outfit",sans-serif; font-size:1.6rem; font-weight:700;
  color:var(--red); line-height:1.1}
.caro-facts div span{font-size:.8rem; color:var(--ink-3)}
.caro-nav{display:flex; gap:.5rem; justify-content:center; margin-top:1.2rem}
.dot{width:12px; height:12px; border-radius:50%; border:0; background:var(--rose-3); cursor:pointer;
  padding:0; transition:background .25s, width .25s}
.dot[aria-current="true"]{background:var(--red); width:30px; border-radius:999px}
.caro-btn{position:absolute; top:50%; margin-top:-22px; width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.94); box-shadow:var(--sh); cursor:pointer; font-size:1.1rem;
  color:var(--red); z-index:2}
.caro-btn:hover{background:var(--red); color:#fff}
.caro-btn.p{left:.7rem} .caro-btn.n{right:.7rem}

/* ---------------- Kostenrechner ---------------- */
.calc{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.2rem,3vw,2rem); align-items:start}
@media(max-width:900px){ .calc{grid-template-columns:1fr} }
.calc-box{background:#fff; border-radius:var(--r); box-shadow:var(--sh); padding:clamp(1.3rem,3vw,1.9rem)}
.fld{margin-bottom:1.1rem}
.fld label{display:block; font-size:.78rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.45rem}
.fld input,.fld select{width:100%; padding:.85rem 1rem; min-height:52px; font-family:inherit;
  font-size:1rem; border:2px solid var(--line); border-radius:var(--r-s); background:#fff; color:var(--ink)}
.fld input:focus,.fld select:focus{outline:none; border-color:var(--red)}
.grp{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
@media(max-width:520px){ .grp{grid-template-columns:1fr} }
.checks{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
@media(max-width:620px){ .checks{grid-template-columns:1fr} }
.chk{display:flex; align-items:center; gap:.6rem; padding:.62rem .8rem; border:2px solid var(--line);
  border-radius:var(--r-s); cursor:pointer; font-size:.92rem; min-height:48px; transition:all .2s}
.chk:hover{border-color:var(--rose-3)}
.chk input{width:18px; height:18px; accent-color:var(--red); flex:none}
.chk.on{border-color:var(--red); background:var(--rose)}
.hide{display:none}
.result{background:var(--plum); color:#fff; border-radius:var(--r); padding:clamp(1.3rem,3vw,1.9rem);
  position:sticky; top:90px}
.result .rlbl{font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rose-3); margin-bottom:.5rem}
.result .rnum{font-family:"Outfit",sans-serif; font-size:clamp(2.2rem,5.5vw,3.2rem); font-weight:700;
  line-height:1; font-variant-numeric:tabular-nums; transition:opacity .2s}
.result .rnum.flash{opacity:.35}
.result .rbru{margin:.5rem 0 0; font-size:.92rem; color:rgba(255,255,255,.72)}
.result .rex{margin:1rem 0 0; padding-top:1rem; border-top:1px solid var(--line-d); font-size:.94rem;
  color:rgba(255,255,255,.9)}
.result .rnote{margin:.7rem 0 0; font-size:.83rem; color:var(--rose-3)}
.result .btnrow{margin-top:1.4rem}
.calc-err{background:var(--red); color:#fff; border-radius:var(--r-s); padding:.8rem 1rem;
  font-size:.9rem; margin-bottom:1rem; display:none}
.calc-err.on{display:block}

/* ---------------- FAQ ---------------- */
.faq{display:grid; gap:.7rem}
.faqi{background:#fff; border-radius:var(--r-s); box-shadow:var(--sh); overflow:hidden;
  transition:background .3s}
.faqi.open{background:var(--rose)}
.faqq{width:100%; background:none; border:0; text-align:left; cursor:pointer; min-height:58px;
  padding:1.1rem 3rem 1.1rem 1.3rem; font-family:"Outfit",sans-serif; font-size:1.04rem;
  font-weight:600; color:var(--ink); position:relative}
.faqq::after{content:"+"; position:absolute; right:1.1rem; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--red); transition:transform .3s; line-height:1}
.faqi.open .faqq::after{transform:translateY(-50%) rotate(45deg)}
.faqa{display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1)}
.faqi.open .faqa{grid-template-rows:1fr}
.faqa > div{overflow:hidden}
.faqa p{margin:0 1.3rem 1.2rem; color:var(--ink-2); font-size:.96rem; max-width:70ch}

/* ---------------- Ablauf ---------------- */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:.9rem; counter-reset:f}
@media(max-width:960px){ .flow{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .flow{grid-template-columns:1fr} }
.fstep{background:#fff; border-radius:var(--r); padding:1.3rem; box-shadow:var(--sh); position:relative}
.fstep b{display:flex; width:34px; height:34px; border-radius:50%; background:var(--red); color:#fff;
  align-items:center; justify-content:center; font-family:"Outfit",sans-serif; font-weight:700;
  font-size:.92rem; margin-bottom:.8rem}
.fstep h4{margin:0 0 .35rem; font-family:"Outfit",sans-serif; font-size:1rem; font-weight:700}
.fstep p{margin:0; font-size:.9rem; color:var(--ink-2)}

/* ---------------- Team ---------------- */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.4rem)}
@media(max-width:900px){ .team{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .team{grid-template-columns:1fr} }
.tm{background:#fff; border-radius:var(--r); padding:1.5rem; box-shadow:var(--sh); text-align:center}
.tm .av{width:74px; height:74px; border-radius:50%; margin:0 auto .9rem;
  background:linear-gradient(135deg,var(--red),var(--red-dk)); color:#fff; display:flex;
  align-items:center; justify-content:center; font-family:"Outfit",sans-serif; font-weight:700;
  font-size:1.5rem; letter-spacing:-.02em}
.tm h3{margin:0 0 .2rem; font-size:1.08rem}
.tm .role{color:var(--red); font-weight:600; font-size:.88rem; margin:0 0 .6rem}
.tm p{margin:0; font-size:.9rem; color:var(--ink-2)}

/* ---------------- Kontakt ---------------- */
.kg{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,4vw,3rem)}
@media(max-width:880px){ .kg{grid-template-columns:1fr} }
.kcard{background:#fff; border-radius:var(--r); padding:1.15rem 1.3rem; box-shadow:var(--sh);
  margin-bottom:.8rem; transition:transform .25s}
.kcard:hover{transform:translateX(4px)}
.kcard dt{font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--red); margin-bottom:.25rem}
.kcard dd{margin:0; font-size:1.06rem; font-weight:600}
.kcard a{text-decoration:none}
.fbox{background:#fff; border-radius:var(--r); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--sh)}
.fbox textarea{width:100%; padding:.85rem 1rem; min-height:130px; font-family:inherit; font-size:1rem;
  border:2px solid var(--line); border-radius:var(--r-s); resize:vertical; color:var(--ink)}
.fbox textarea:focus{outline:none; border-color:var(--red)}
.fmsg{display:none; margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--r-s);
  background:var(--rose); color:var(--red-dk); font-size:.92rem; font-weight:600}
.fmsg.on{display:block}
.fnote{margin:.9rem 0 0; font-size:.82rem; color:var(--ink-3)}

/* ---------------- Rechtstexte ---------------- */
.legal{max-width:760px}
.legal h2{font-family:"Outfit",sans-serif; font-size:1.16rem; font-weight:700; margin:2rem 0 .6rem;
  color:var(--red)}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 .9rem}
.legal a{color:var(--red)}
.legal .stamp{margin-top:2rem; font-size:.82rem; color:var(--ink-3)}

/* ---------------- Seitenkopf Unterseiten ---------------- */
.phead{background:var(--red); color:#fff; border-radius:0 0 var(--r-l) var(--r-l);
  padding:clamp(2.4rem,6vw,4rem) 0 clamp(2.2rem,5vw,3.2rem); position:relative; overflow:hidden}
.phead::before{content:""; position:absolute; width:44vw; height:44vw; right:-12vw; top:-24vw;
  border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.15),transparent 62%)}
.phead .wrap{position:relative; z-index:1}
.phead .lead{margin-top:1rem}

/* ---------------- Fuß ---------------- */
.foot{background:var(--plum); color:rgba(255,244,244,.76); padding:3rem 0 calc(3rem + 66px)}
.footg{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:1.8rem}
@media(max-width:800px){ .footg{grid-template-columns:1fr} }
.foot h4{font-family:"Outfit",sans-serif; color:#fff; font-size:.95rem; font-weight:700; margin:0 0 .8rem}
.foot p{margin:.25rem 0; font-size:.92rem}
.foot a{text-decoration:none} .foot a:hover{color:#fff}
.xlink{display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; padding:.6rem 1.1rem;
  border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-weight:600; font-size:.9rem;
  text-decoration:none; transition:background .2s}
.xlink:hover{background:var(--red)}
.footb{margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line-d); display:flex;
  justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.84rem}

/* ---------------- Mobile Leiste ---------------- */
.mbar{position:fixed; left:0; right:0; bottom:0; display:none; z-index:70; background:#fff;
  box-shadow:0 -4px 20px rgba(62,18,24,.14); padding:.55rem; gap:.5rem}
.mbar a{flex:1; display:flex; align-items:center; justify-content:center; min-height:52px;
  border-radius:999px; font-family:"Outfit",sans-serif; font-weight:600; font-size:.95rem;
  text-decoration:none; color:var(--red); border:2px solid var(--red)}
.mbar a.prim{background:var(--red); color:#fff}
@media(max-width:800px){ .mbar{display:flex} }

/* ---------------- Cookie ---------------- */
.cookie-banner{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:80; background:#fff;
  border-radius:var(--r); box-shadow:var(--sh-l); padding:1.2rem 1.4rem; display:none; gap:1.3rem;
  align-items:center; justify-content:space-between; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto}
.cookie-banner.show{display:flex}
.cookie-content{max-width:600px}
.cookie-content h3{margin:0 0 .25rem; font-family:"Outfit",sans-serif; font-size:1.02rem; font-weight:700}
.cookie-content p{margin:0 0 .25rem; font-size:.9rem; color:var(--ink-2)}
.cookie-content a{font-size:.84rem; color:var(--red)}
.cookie-buttons{display:flex; gap:.6rem; flex-wrap:wrap}
.cookie-btn{min-height:46px; padding:.65rem 1.3rem; border-radius:999px; cursor:pointer;
  font-family:"Outfit",sans-serif; font-size:.92rem; font-weight:600; border:2px solid var(--red)}
.cookie-accept{background:var(--red); color:#fff}
.cookie-decline{background:transparent; color:var(--red)}
@media(max-width:800px){ .cookie-banner{bottom:78px} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
  .fade{opacity:1; transform:none}
  .wipe > span{opacity:1}
  .wipe::after{display:none}
  .hero .h1 .ln i{transform:none}
  .hero .lead,.hero .btnrow,.hero .eyebrow,.hcard{opacity:1}
  .day{opacity:1; transform:none}
  .rh-tasks li{opacity:1; transform:none}
}

.h1sub{display:block; margin-top:1.1rem; font-family:"Manrope",sans-serif; font-weight:500;
  font-size:clamp(.98rem,1.5vw,1.2rem); line-height:1.5; letter-spacing:0; opacity:.94; max-width:48ch}

.crumbs{background:var(--sand-2); border-bottom:1px solid var(--line)}
.crumbs .wrap{display:flex; gap:.55rem; align-items:center; padding-top:.75rem; padding-bottom:.75rem;
  font-size:.84rem; color:var(--ink-2); flex-wrap:wrap}
.crumbs a{color:var(--red); text-decoration:none; font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--red); color:#fff; padding:.85rem 1.3rem; font-weight:600; text-decoration:none; border-radius:0 0 12px 0}
.skip:focus{left:0}