@charset "UTF-8";
/* Selvi & Partner — Corporate Website v2
   Farben: Navy #051C2C · Mid-Blue #1A5FA8 · Light-Blue #85B7EB (unverändert)
   Fließtext: Arial/Helvetica · Headlines: Source Serif */

/* Schriften liegen lokal im Ordner /fonts — bewusst NICHT ueber die
   Google-Server, damit ohne Einwilligung keine Daten dorthin gehen. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/montserrat-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/montserrat-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/montserrat-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/montserrat-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/montserrat-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/montserrat-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/montserrat-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/montserrat-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/source-serif-4-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/source-serif-4-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/source-serif-4-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --navy:#051C2C;
  --navy-2:#0b2740;
  --midblue:#1A5FA8;
  --midblue-dark:#134478;
  --lightblue:#85B7EB;
  --lightblue-tint:#EBF3FC;
  --paper:#ffffff;
  --offwhite:#F6F8FA;
  --line:#E1E7EC;
  --text:#1c2b36;
  --text-soft:#5b6b78;
  --serif:'Source Serif 4', Georgia, serif;
  --sans:Arial, Helvetica, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-sm:0 2px 8px rgba(5,28,44,.06);
  --shadow-md:0 18px 40px rgba(5,28,44,.12);
  --shadow-lg:0 30px 70px rgba(5,28,44,.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img,svg,iframe,video{max-width:100%;}
img{display:block;}
h1,h2,h3,h4,p,a,span,div{overflow-wrap:break-word;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.container{max-width:1240px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--midblue);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:24px;height:2px;background:var(--lightblue);display:inline-block;transition:width .5s var(--ease);}
.eyebrow.on-dark{color:var(--lightblue);}
.eyebrow.on-dark::before{background:var(--lightblue);}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--navy);letter-spacing:-.01em;}
.section-label{font-size:13px;color:var(--text-soft);}

/* progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--midblue),var(--lightblue));width:0%;z-index:2100;transition:width .1s linear;}

/* custom cursor glow (desktop only, decorative) */
.cursor-glow{
  position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle, rgba(133,183,235,.10), transparent 70%);
  transform:translate(-50%,-50%);left:0;top:0;opacity:0;transition:opacity .4s ease;will-change:transform;
}

/* ===== SKIP LINK ===== */
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:2000;}
.skip-link:focus{left:12px;top:12px;}

/* ===== HEADER / NAV ===== */
.site-header{
  position:sticky;top:0;z-index:900;background:rgba(255,255,255,.8);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.site-header.scrolled{box-shadow:var(--shadow-sm);background:rgba(255,255,255,.94);}
.nav-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;padding:12px 0;}
.nav-main{grid-area:1/1;justify-self:start;}
.logo{grid-area:1/2;justify-self:center;}
.nav-right{grid-area:1/3;justify-self:end;}
.nav-link{white-space:nowrap;}
.logo{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--navy);letter-spacing:-.01em;position:relative;display:flex;align-items:center;}
.logo-img{height:44px;width:auto;display:block;}
.logo span{color:var(--midblue);}
.nav-main{display:flex;align-items:center;gap:6px;}
.nav-item{position:relative;}
.nav-link{
  display:flex;align-items:center;gap:6px;padding:12px 16px;font-size:14.5px;font-weight:600;color:var(--navy);
  border-radius:6px;transition:background .25s var(--ease),color .25s var(--ease);position:relative;
}
.nav-link::after{
  content:'';position:absolute;left:16px;right:16px;bottom:7px;height:2px;background:var(--midblue);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-link:hover::after,.nav-item.open .nav-link::after{transform:scaleX(1);}
.nav-link:hover,.nav-item.open .nav-link{background:var(--lightblue-tint);color:var(--midblue-dark);}
.nav-link svg{width:10px;height:10px;transition:transform .3s var(--ease-spring);}
.nav-item.open .nav-link svg{transform:rotate(180deg);}
.nav-cta{
  position:relative;overflow:hidden;background:var(--midblue);color:#fff;padding:11px 22px;border-radius:6px;font-size:14px;font-weight:700;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);white-space:nowrap;
}
.nav-cta:hover{background:var(--midblue-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(26,95,168,.35);}
.nav-right{display:flex;align-items:center;gap:18px;}

.mega{
  position:absolute;top:calc(100% + 1px);left:0;transform:translateY(10px) scale(.98);
  background:rgba(255,255,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:28px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease-spring);z-index:50;
}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.mega-industries{width:640px;}
.mega-capabilities{width:520px;}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px;}
.mega-heading{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);
  padding:6px 10px;margin-top:10px;
}
.mega-grid .mega-heading:first-child,.mega-grid .mega-heading:nth-child(2){margin-top:0;}
.mega-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px;border-radius:8px;
  font-size:14.5px;color:var(--text);transition:background .2s var(--ease),color .2s var(--ease),padding-left .2s var(--ease);
}
.mega-link:hover{background:var(--lightblue-tint);color:var(--midblue-dark);padding-left:14px;}
.mega-link.core{font-weight:700;color:var(--navy);}
.mega-link.core:hover{color:var(--midblue-dark);}
.mega-badge{
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--midblue);
  background:var(--lightblue-tint);padding:2px 7px;border-radius:20px;flex-shrink:0;
}
.mega-cap-list{display:flex;flex-direction:column;gap:2px;}
.mega-cap-item{
  display:block;padding:12px 12px;border-radius:8px;transition:background .2s var(--ease),padding-left .2s var(--ease);
}
.mega-cap-item:hover{background:var(--lightblue-tint);padding-left:16px;}
.mega-cap-item .t{font-weight:700;font-size:14.5px;color:var(--navy);}
.mega-cap-item .d{display:block;font-size:12.5px;color:var(--text-soft);margin-top:2px;}
.mobile-toggle{display:none;}
.nav-cta-mobile{display:none;}

/* ===== HERO ===== */
.hero{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 60%,#0d3155 100%);
  color:#fff;position:relative;overflow:hidden;
}
.hero::after{
  content:'';position:absolute;right:-10%;top:-20%;width:60%;height:140%;
  background:radial-gradient(circle, rgba(133,183,235,.16), transparent 65%);
  animation:driftGlow 14s ease-in-out infinite alternate;
}
@keyframes driftGlow{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-4%,3%) scale(1.08);}}
.hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  padding:100px 0 90px;
}
.hero h1{
  color:#fff;font-size:clamp(34px,4.2vw,54px);line-height:1.14;font-weight:600;max-width:14em;
}
.hero h1 .accent{color:var(--lightblue);font-style:italic;font-weight:500;}
.hero p{margin-top:24px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.78);max-width:520px;}
.hero-actions{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:14.5px;font-weight:700;
  border-radius:6px;transition:all .35s var(--ease);position:relative;
}
.btn-light{background:#fff;color:var(--navy);}
.btn-light:hover{background:var(--lightblue);transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.25);}
.btn-outline{border:1.5px solid rgba(255,255,255,.4);color:#fff;}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-3px);}

.hero-3d-wrap{position:relative;}
.hero-3d{
  width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.04);border:1px solid rgba(133,183,235,.22);
}
.hero-3d canvas{display:block;width:100% !important;height:100% !important;}
.hero-panel{
  position:absolute;left:0;right:0;bottom:-34px;margin:0 22px;
  background:rgba(6,26,42,.62);border:1px solid rgba(133,183,235,.25);border-radius:12px;
  padding:22px 26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;box-shadow:var(--shadow-lg);
}
.hero-panel .stat{text-align:left;}
.hero-panel .stat .k{font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.03em;}
.hero-panel .stat .v{font-family:var(--serif);font-size:22px;color:var(--lightblue);margin-top:4px;}

/* ===== SECTIONS ===== */
section{padding:96px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:52px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(26px,3vw,38px);margin-top:14px;max-width:14em;}
.section-head p{max-width:380px;color:var(--text-soft);font-size:14.5px;line-height:1.7;}
.more-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--midblue);white-space:nowrap;}
.more-link svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.more-link:hover svg{transform:translateX(4px);}

/* Capabilities grid — tilt cards */
.bg-tint{background:var(--offwhite);}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;perspective:1200px;}
.cap-card{
  background:#fff;padding:34px 28px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--line);border-radius:12px;transition:transform .12s linear,box-shadow .4s var(--ease),border-color .4s var(--ease);
  will-change:transform;transform-style:preserve-3d;
}
.cap-card:hover{box-shadow:var(--shadow-md);border-color:var(--lightblue);}
.cap-num{font-family:var(--serif);font-size:13px;color:var(--lightblue);font-weight:600;}
.cap-card h3{font-size:19px;margin-top:16px;line-height:1.3;}
.cap-card p{font-size:13.5px;color:var(--text-soft);margin-top:10px;line-height:1.6;}
.cap-card .cap-link{margin-top:20px;font-size:13px;font-weight:700;color:var(--midblue);display:flex;align-items:center;gap:6px;transition:gap .3s var(--ease);}
.cap-card:hover .cap-link{gap:10px;}

/* Industries grid */
.ind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.ind-card{
  position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  background:linear-gradient(200deg,var(--navy),var(--midblue-dark));
  display:flex;align-items:flex-end;padding:20px;color:#fff;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.ind-card::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(5,28,44,.92),rgba(5,28,44,.55) 45%,rgba(5,28,44,.22) 100%);
  transition:background .4s var(--ease);
}
.ind-card:hover::before{background:linear-gradient(0deg,rgba(5,28,44,.94),rgba(5,28,44,.45) 45%,rgba(5,28,44,.14) 100%);}
.ind-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);}
.ind-card:hover .ind-img{transform:scale(1.07);}
.ind-card span{position:relative;z-index:2;font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.25;}
.ind-card::after{
  content:'→';position:absolute;top:16px;right:16px;z-index:2;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:13px;
  transition:all .35s var(--ease-spring);
}
.ind-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.ind-card:hover::after{background:#fff;color:var(--navy);border-color:#fff;transform:rotate(45deg);}
.ind-more{grid-column:span 5;text-align:center;margin-top:8px;}

/* Insights */
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.insight-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:box-shadow .4s var(--ease),transform .4s var(--ease),border-color .4s var(--ease);}
.insight-card:hover{box-shadow:var(--shadow-md);transform:translateY(-6px);border-color:var(--lightblue);}
.insight-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--lightblue-tint),var(--offwhite));position:relative;overflow:hidden;}
.insight-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .7s var(--ease);}
.insight-card:hover .insight-thumb img{transform:scale(1.04);}
.insight-tag{z-index:2;}
.insight-thumb::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(120deg,rgba(26,95,168,.07) 0 2px,transparent 2px 26px);transition:transform .6s var(--ease);}
.insight-card:hover .insight-thumb::before{transform:translateX(10px) scale(1.05);}
.insight-tag{
  position:absolute;left:16px;bottom:16px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--midblue-dark);background:#fff;padding:5px 10px;border-radius:20px;
}
.insight-body{padding:22px 22px 26px;}
.insight-date{font-size:12px;color:var(--text-soft);}
.insight-body h3{font-size:18px;margin-top:10px;line-height:1.35;}
.insight-body .more-link{margin-top:16px;font-size:13px;}

/* Partner band */
.partner-band{
  background:var(--lightblue-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden;
}
.partner-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.partner-row h2{font-size:clamp(24px,2.8vw,32px);}
.partner-row p{margin-top:18px;color:var(--text-soft);font-size:14.5px;line-height:1.75;}
.partner-logos{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:26px;}
.partner-chip{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:12px 18px;font-weight:700;font-size:14px;color:var(--navy);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.partner-chip:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);}
.partner-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--midblue);}
.partner-visual{
  aspect-ratio:1/1;border-radius:16px;background:linear-gradient(160deg,var(--navy),var(--midblue));
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.partner-visual svg{width:44%;position:relative;z-index:2;animation:orbit 12s linear infinite;}
@keyframes orbit{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

/* Numbers */
.numbers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.numbers-item{border-left:2px solid var(--lightblue);padding-left:22px;}
.numbers-item .num{font-family:var(--serif);font-size:clamp(32px,3.4vw,48px);color:var(--navy);font-weight:600;}
.numbers-item .lbl{margin-top:10px;font-size:13.5px;color:var(--text-soft);max-width:22ch;line-height:1.6;}

/* Careers */
.careers{background:var(--navy);color:#fff;}
.careers-row{display:grid;grid-template-columns:1fr .8fr;gap:60px;align-items:center;}
.careers h2{color:#fff;font-size:clamp(26px,3vw,40px);margin-top:14px;}
.careers p{margin-top:20px;color:rgba(255,255,255,.72);line-height:1.75;font-size:15px;max-width:480px;}
.careers-list{margin-top:8px;}
.careers-list .row{
  display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.15);
  transition:padding-left .3s var(--ease),background .3s var(--ease);
}
.careers-list .row:first-child{border-top:1px solid rgba(255,255,255,.15);}
.careers-list .row:hover{padding-left:10px;background:rgba(255,255,255,.04);}
.careers-list .role{font-weight:700;font-size:15px;}
.careers-list .loc{font-size:12.5px;color:rgba(255,255,255,.5);}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
.contact-info h2{font-size:clamp(26px,3vw,36px);}
.contact-info p{margin-top:16px;color:var(--text-soft);font-size:14.5px;line-height:1.7;max-width:440px;}
.contact-detail{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);transition:padding-left .3s var(--ease);}
.contact-detail:hover{padding-left:6px;}
.contact-detail:last-of-type{border-bottom:1px solid var(--line);}
.contact-detail .k{font-size:12px;color:var(--text-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:700;min-width:110px;}
.contact-detail .v{font-size:14.5px;color:var(--navy);font-weight:600;}
.contact-form{background:var(--offwhite);border:1px solid var(--line);border-radius:14px;padding:34px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:12.5px;font-weight:700;color:var(--navy);}
.form-field input,.form-field select,.form-field textarea{
  border:1px solid var(--line);border-radius:7px;padding:12px 14px;font-size:14px;font-family:var(--sans);
  background:#fff;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--midblue);box-shadow:0 0 0 4px rgba(26,95,168,.12);}
.contact-form button{width:100%;background:var(--midblue);color:#fff;padding:15px;border-radius:7px;font-weight:700;font-size:14.5px;margin-top:6px;transition:background .3s var(--ease),transform .3s var(--ease);}
.contact-form button:hover{background:var(--midblue-dark);transform:translateY(-2px);}
.form-note{font-size:12px;color:var(--text-soft);margin-top:12px;line-height:1.6;}

/* Legal / simple pages */
.legal{padding:70px 0 110px;}
.legal .container{max-width:840px;}
.legal h1{font-size:clamp(28px,4vw,40px);}
.legal .updated{margin-top:10px;color:var(--text-soft);font-size:13px;}
.legal h2{font-size:20px;margin-top:44px;margin-bottom:14px;}
.legal p,.legal li{color:var(--text);font-size:14.5px;line-height:1.8;margin-bottom:10px;}
.legal ul{padding-left:20px;list-style:disc;}
.legal a{color:var(--midblue);font-weight:700;}
.legal a:hover{text-decoration:underline;}

/* Page hero (simple pages) */
.page-hero{background:var(--navy);color:#fff;padding:70px 0 64px;position:relative;overflow:hidden;}
.page-hero::after{
  content:'';position:absolute;right:-10%;top:-40%;width:50%;height:180%;
  background:radial-gradient(circle, rgba(133,183,235,.14), transparent 65%);
  animation:driftGlow 14s ease-in-out infinite alternate;
}
.page-hero .eyebrow{margin-bottom:14px;position:relative;z-index:2;}
.page-hero h1{color:#fff;font-size:clamp(30px,4vw,46px);max-width:16em;position:relative;z-index:2;}
.page-hero p{margin-top:16px;color:rgba(255,255,255,.72);max-width:560px;font-size:15.5px;line-height:1.7;position:relative;z-index:2;}

/* Footer */
footer{background:var(--navy);color:rgba(255,255,255,.7);padding-top:70px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.14);}
.footer-brand{font-family:var(--serif);font-size:21px;color:#fff;font-weight:600;}
.footer-logo{display:inline-block;line-height:0;}
.footer-logo img{height:46px;width:auto;opacity:.95;transition:opacity .3s var(--ease);}
.footer-logo:hover img{opacity:1;}
.footer-brand span{color:var(--lightblue);}
.footer-tag{margin-top:16px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.5);max-width:28ch;}
.footer-social{display:flex;gap:10px;margin-top:22px;}
.footer-social a{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;
  justify-content:center;transition:all .3s var(--ease);
}
.footer-social a:hover{background:var(--lightblue);border-color:var(--lightblue);transform:translateY(-3px);}
.footer-social svg{width:15px;height:15px;stroke:#fff;}
.footer-col h4{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--lightblue);margin-bottom:18px;font-weight:700;}
.footer-col a{display:block;font-size:13.5px;color:rgba(255,255,255,.62);padding:6px 0;transition:color .25s var(--ease),transform .25s var(--ease);}
.footer-col a:hover{color:#fff;transform:translateX(4px);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;font-size:12px;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:rgba(255,255,255,.5);}
.footer-bottom a:hover{color:#fff;}

/* Reveal / stagger */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.show{opacity:1;transform:translateY(0);}
.reveal-stagger.show > *{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal-stagger.show > *:nth-child(1){transition-delay:.02s;}
.reveal-stagger.show > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger.show > *:nth-child(3){transition-delay:.16s;}
.reveal-stagger.show > *:nth-child(4){transition-delay:.23s;}
.reveal-stagger.show > *:nth-child(5){transition-delay:.30s;}
.reveal-stagger.show > *:nth-child(6){transition-delay:.37s;}

@media(max-width:1080px){
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ind-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ind-more{grid-column:span 3;}
  .insight-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-panel{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:860px){
  .nav-main,.nav-right .nav-cta{display:none;}
  .mobile-toggle{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;}
  .hero-grid,.partner-row,.careers-row,.contact-grid{grid-template-columns:minmax(0,1fr);}
  .hero-3d{aspect-ratio:16/10;}
  .hero-panel{position:static;margin:26px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));}
  .ind-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ind-card{align-items:center;justify-content:center;text-align:center;padding:14px;}
  .ind-card span{font-size:14px;line-height:1.3;}
  .ind-more{grid-column:span 2;}
  .cap-grid,.insight-grid{grid-template-columns:minmax(0,1fr);}
  .numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-row{grid-template-columns:minmax(0,1fr);}
  .cursor-glow{display:none;}
  .nav-cta-mobile{
    display:block;margin-top:10px;padding:12px 16px;border-top:1px solid var(--line);
    background:var(--midblue);color:#fff !important;text-align:center;border-radius:7px;font-weight:700;
  }
  .nav-item{position:static;}
  .mega{
    position:static !important;transform:none !important;width:100%;max-width:100%;opacity:1;visibility:visible;
    display:none;box-shadow:none;border:none;background:transparent;backdrop-filter:none;
    -webkit-backdrop-filter:none;padding:8px 4px 12px 4px;border-radius:0;
  }
  .nav-item.open .mega{display:block;}
  .mega-grid{grid-template-columns:minmax(0,1fr);gap:2px;}
  .nav-main.mobile-open{
    display:flex !important;flex-direction:column;align-items:stretch;
    position:fixed !important;left:0;right:0;width:100vw !important;max-width:100vw !important;bottom:0;background:#fff;
    padding:14px 24px 24px;overflow-y:auto;z-index:940;border-bottom:none;box-shadow:none;
  }
}
@media(max-width:520px){
  section{padding:64px 0;}
  .container{padding:0 20px;}
  .footer-top{grid-template-columns:minmax(0,1fr);}
  .numbers-grid{grid-template-columns:minmax(0,1fr);}
  .hero-panel{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ===================================================================
   MODERNISIERUNG & NEUE SEITENVORLAGEN (Leistungen, Branchen, Über uns,
   Karriere, Insights, Terminbuchung)
   =================================================================== */

/* Subtle noise/gradient-mesh accent used behind several sections */
.mesh-accent{position:relative;isolation:isolate;}
.mesh-accent::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(26,95,168,.07), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(133,183,235,.10), transparent 40%);
}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.55);margin-bottom:18px;position:relative;z-index:2;flex-wrap:wrap;}
.breadcrumb a{color:rgba(255,255,255,.75);transition:color .25s var(--ease);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:var(--lightblue);font-weight:600;}

/* Detail hero badges (leistung / branche) */
.detail-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;position:relative;z-index:2;}
.detail-badge{
  display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:8px 14px;
  backdrop-filter:blur(6px);
}
.detail-badge svg{width:13px;height:13px;stroke:var(--lightblue);}

/* Two-column detail layout with sticky sidebar */
.detail-layout{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start;}
.detail-main h2{font-size:clamp(21px,2.4vw,26px);margin-top:52px;margin-bottom:18px;}
.detail-main h2:first-child{margin-top:0;}
.detail-main p{color:var(--text-soft);font-size:15px;line-height:1.8;max-width:64ch;}
.detail-main p + p{margin-top:14px;}

.block-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;}
.block-card{
  border:1px solid var(--line);border-radius:12px;padding:24px 22px;background:#fff;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.block-card:hover{border-color:var(--lightblue);box-shadow:var(--shadow-md);transform:translateY(-4px);}
.block-card .icn{
  width:38px;height:38px;border-radius:9px;background:var(--lightblue-tint);color:var(--midblue);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.block-card .icn svg{width:18px;height:18px;}
.block-card h4{font-size:15.5px;color:var(--navy);font-family:var(--serif);font-weight:600;}
.block-card p{margin-top:8px;font-size:13.5px;color:var(--text-soft);line-height:1.65;}

/* Process steps (Vorgehen) */
.process-steps{display:flex;flex-direction:column;margin-top:22px;border-left:2px solid var(--line);padding-left:0;}
.process-step{position:relative;padding:0 0 30px 30px;}
.process-step:last-child{padding-bottom:0;}
.process-step::before{
  content:attr(data-n);position:absolute;left:-19px;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--midblue);color:#fff;font-family:var(--serif);font-weight:600;font-size:14px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px #fff;
}
.process-step h4{font-size:15.5px;color:var(--navy);margin-bottom:6px;}
.process-step p{font-size:13.5px;color:var(--text-soft);line-height:1.65;max-width:52ch;}

/* Sticky sidebar CTA card */
.side-cta{
  position:sticky;top:104px;background:linear-gradient(160deg,var(--navy),var(--navy-2));color:#fff;
  border-radius:14px;padding:30px 26px;box-shadow:var(--shadow-lg);overflow:hidden;
}
.side-cta::after{
  content:'';position:absolute;right:-30%;top:-30%;width:80%;height:80%;
  background:radial-gradient(circle, rgba(133,183,235,.22), transparent 70%);
}
.side-cta h3{color:#fff;font-size:18px;position:relative;z-index:2;}
.side-cta p{margin-top:10px;font-size:13px;color:rgba(255,255,255,.68);line-height:1.6;position:relative;z-index:2;}
.side-cta .btn{margin-top:20px;width:100%;justify-content:center;position:relative;z-index:2;}
.side-list{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);position:relative;z-index:2;}
.side-list a{
  display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13px;
  color:rgba(255,255,255,.68);transition:color .25s var(--ease),transform .25s var(--ease);
}
.side-list a:hover{color:#fff;transform:translateX(3px);}

/* Related grid (branche → capabilities / other branches) */
.related-strip{margin-top:60px;padding-top:40px;border-top:1px solid var(--line);}
.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.chip-link{
  font-size:13.5px;font-weight:600;color:var(--navy);background:var(--offwhite);border:1px solid var(--line);
  border-radius:20px;padding:9px 16px;transition:all .25s var(--ease);
}
.chip-link:hover{background:var(--midblue);color:#fff;border-color:var(--midblue);transform:translateY(-2px);}

/* Challenge list (Branchenseiten) */
.challenge-list{display:flex;flex-direction:column;gap:14px;margin-top:22px;}
.challenge-item{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--offwhite);border-radius:10px;border:1px solid var(--line);}
.challenge-item .dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--midblue);margin-top:7px;}
.challenge-item p{font-size:14px;color:var(--text);line-height:1.6;}

/* Über uns — Werte / Timeline */
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.value-card{padding:26px 22px;border:1px solid var(--line);border-radius:12px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.value-card .num{font-family:var(--serif);color:var(--lightblue);font-size:13px;font-weight:600;}
.value-card h4{margin-top:12px;font-size:16px;color:var(--navy);}
.value-card p{margin-top:8px;font-size:13px;color:var(--text-soft);line-height:1.6;}

.timeline{margin-top:10px;}
.tl-item{display:grid;grid-template-columns:100px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line);}
.tl-item:last-child{border-bottom:1px solid var(--line);}
.tl-item .yr{font-family:var(--serif);font-size:19px;color:var(--midblue);font-weight:600;}
.tl-item h4{font-size:15.5px;color:var(--navy);}
.tl-item p{margin-top:6px;font-size:13.5px;color:var(--text-soft);line-height:1.6;max-width:56ch;}

.profile-card{
  display:flex;gap:22px;align-items:center;background:var(--offwhite);border:1px solid var(--line);
  border-radius:14px;padding:26px;margin-top:26px;
}
.profile-avatar{
  width:76px;height:76px;border-radius:50%;flex-shrink:0;background:linear-gradient(160deg,var(--midblue),var(--navy));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:24px;font-weight:600;
}
.profile-card h4{font-size:16.5px;color:var(--navy);}
.profile-card .role{font-size:12.5px;color:var(--midblue);font-weight:700;margin-top:2px;}
.profile-card p{margin-top:8px;font-size:13px;color:var(--text-soft);line-height:1.6;}

/* Karriere — Jobliste & Benefits */
.job-list-full{display:flex;flex-direction:column;gap:14px;margin-top:24px;}
.job-card{
  display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 26px;
  border:1px solid var(--line);border-radius:12px;background:#fff;transition:all .3s var(--ease);flex-wrap:wrap;
}
.job-card:hover{border-color:var(--midblue);box-shadow:var(--shadow-md);transform:translateY(-3px);}
.job-card .role{font-size:16px;color:var(--navy);font-family:var(--serif);font-weight:600;}
.job-card .meta{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap;}
.job-tag{font-size:11.5px;font-weight:700;color:var(--midblue);background:var(--lightblue-tint);padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;}
.job-card .apply-btn{
  background:var(--midblue);color:#fff;padding:11px 20px;border-radius:6px;font-size:13.5px;font-weight:700;
  transition:all .3s var(--ease);white-space:nowrap;
}
.job-card .apply-btn:hover{background:var(--midblue-dark);transform:translateY(-2px);}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.benefit-card{text-align:center;padding:28px 18px;}
.benefit-card .icn{
  width:46px;height:46px;border-radius:50%;background:var(--lightblue-tint);color:var(--midblue);margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
}
.benefit-card .icn svg{width:20px;height:20px;}
.benefit-card h4{font-size:14.5px;color:var(--navy);}
.benefit-card p{margin-top:6px;font-size:12.5px;color:var(--text-soft);line-height:1.6;}

/* Insights — Filter */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;}
.filter-chip{
  font-size:13px;font-weight:700;padding:9px 18px;border-radius:20px;border:1px solid var(--line);color:var(--text-soft);
  transition:all .25s var(--ease);background:#fff;
}
.filter-chip.active,.filter-chip:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ===================================================================
   TERMINBUCHUNG (Booking Widget)
   =================================================================== */
.booking-wrap{
  max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-lg);overflow:hidden;position:relative;
}
.booking-head{
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 55%,#0d3155 100%);color:#fff;
  padding:34px 40px;position:relative;overflow:hidden;text-align:left;
}
.booking-head::after{
  content:'';position:absolute;right:-15%;top:-60%;width:60%;height:220%;
  background:radial-gradient(circle, rgba(133,183,235,.18), transparent 65%);
}
.booking-head h3{color:#fff;font-size:21px;position:relative;z-index:2;}
.booking-head p{margin-top:6px;color:rgba(255,255,255,.7);font-size:13.5px;position:relative;z-index:2;}

.booking-steps{display:flex;position:relative;z-index:2;margin-top:24px;gap:6px;}
.booking-steps .bstep{
  flex:1;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.4);
}
.booking-steps .bstep .n{
  width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:flex;align-items:center;
  justify-content:center;font-size:11.5px;flex-shrink:0;transition:all .3s var(--ease);
}
.booking-steps .bstep.active{color:#fff;}
.booking-steps .bstep.active .n{background:var(--lightblue);border-color:var(--lightblue);color:var(--navy);}
.booking-steps .bstep.done .n{background:#fff;border-color:#fff;color:var(--navy);}
.booking-steps .bar{flex:1;height:1.5px;background:rgba(255,255,255,.22);margin-top:12px;}

.booking-body{padding:36px 40px 40px;}
.b-panel{display:none;}
.b-panel.active{display:block;animation:bfade .4s var(--ease);}
@keyframes bfade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.b-label{font-size:12.5px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;margin-bottom:16px;}

.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.service-opt{
  display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:10px;padding:16px 18px;
  transition:all .25s var(--ease);text-align:left;
}
.service-opt:hover{border-color:var(--lightblue);background:var(--lightblue-tint);}
.service-opt.sel{border-color:var(--midblue);background:var(--lightblue-tint);box-shadow:0 0 0 3px rgba(26,95,168,.12);}
.service-opt .dotmark{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;position:relative;}
.service-opt.sel .dotmark{border-color:var(--midblue);}
.service-opt.sel .dotmark::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--midblue);}
.service-opt span{font-size:13.5px;font-weight:600;color:var(--navy);}

.date-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;}
.date-chip{
  flex-shrink:0;width:74px;padding:14px 8px;border:1.5px solid var(--line);border-radius:10px;text-align:center;
  transition:all .25s var(--ease);
}
.date-chip:hover{border-color:var(--lightblue);}
.date-chip.sel{background:var(--midblue);border-color:var(--midblue);}
.date-chip.sel .dow,.date-chip.sel .dnum,.date-chip.sel .mon{color:#fff;}
.date-chip .dow{font-size:11px;color:var(--text-soft);text-transform:uppercase;font-weight:700;}
.date-chip .dnum{font-size:19px;font-family:var(--serif);color:var(--navy);font-weight:600;margin-top:4px;}
.date-chip .mon{font-size:10.5px;color:var(--text-soft);margin-top:2px;}

.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px;}
.time-chip{
  padding:12px 8px;border:1.5px solid var(--line);border-radius:8px;text-align:center;font-size:13.5px;font-weight:600;
  color:var(--navy);transition:all .25s var(--ease);
}
.time-chip:hover{border-color:var(--lightblue);}
.time-chip.sel{background:var(--midblue);border-color:var(--midblue);color:#fff;}
.time-chip.taken{opacity:.35;text-decoration:line-through;pointer-events:none;}

.b-nav{display:flex;justify-content:space-between;align-items:center;margin-top:32px;}
.b-back{font-size:13.5px;font-weight:700;color:var(--text-soft);transition:color .25s var(--ease);}
.b-back:hover{color:var(--navy);}
.b-next{background:var(--midblue);color:#fff;padding:13px 26px;border-radius:7px;font-weight:700;font-size:14px;transition:all .3s var(--ease);}
.b-next:hover{background:var(--midblue-dark);transform:translateY(-2px);}
.b-next:disabled{opacity:.4;pointer-events:none;}

.b-summary{background:var(--offwhite);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:22px;display:flex;gap:24px;flex-wrap:wrap;}
.b-summary .item .k{font-size:11px;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
.b-summary .item .v{font-size:14px;color:var(--navy);font-weight:600;margin-top:3px;}

/* Calendly-Kalender (Schritt 2 der Terminbuchung)

   WICHTIG: Calendly haengt ein iframe mit height:100% in diesen Kasten.
   Eine Prozenthoehe braucht eine ECHTE Hoehe am Elternelement — mit
   blossem min-height faellt das iframe auf wenige Pixel zusammen,
   waehrend darunter der reservierte Platz als weisse Flaeche stehen
   bleibt. Deshalb hier height (nicht nur min-height). Passt Calendly
   die Hoehe per Nachricht selbst an, gewinnt dieser Wert. */
.calendly-mount{min-width:0;width:100%;height:780px;}
.calendly-mount .calendly-inline-widget{
  min-width:0 !important;width:100% !important;height:100% !important;
}
.calendly-mount iframe{
  border:0;display:block;width:100% !important;height:100% !important;
}
.calendly-laedt{
  display:flex;align-items:center;justify-content:center;height:100%;
  margin:0;font-size:13.5px;color:var(--text-soft);
}
@media(max-width:860px){
  /* Mobil stapelt Calendly Kalender und Uhrzeiten untereinander */
  .calendly-mount{height:1080px;}
}

.b-success{text-align:center;padding:20px 0 6px;}
.b-success .checkmark{
  width:64px;height:64px;border-radius:50%;background:var(--lightblue-tint);color:var(--midblue);margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;animation:popIn .5s var(--ease-spring);
}
@keyframes popIn{0%{transform:scale(0);}100%{transform:scale(1);}}
.b-success .checkmark svg{width:30px;height:30px;}
.b-success h3{font-size:21px;}
.b-success p{margin-top:10px;color:var(--text-soft);font-size:14px;max-width:44ch;margin-left:auto;margin-right:auto;line-height:1.65;}

@media(max-width:900px){
  .detail-layout{grid-template-columns:minmax(0,1fr);}
  .side-cta{position:static;}
  .values-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .booking-head,.booking-body{padding:26px 22px;}
  .service-grid{grid-template-columns:minmax(0,1fr);}
  .time-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tl-item{grid-template-columns:minmax(0,1fr);gap:6px;}
}
@media(max-width:640px){
  .block-grid{grid-template-columns:minmax(0,1fr);}
  .booking-steps .bstep span.lbl{display:none;}
}
@media(max-width:480px){
  .job-card{flex-direction:column;align-items:flex-start;}
  .job-card .apply-btn{width:100%;text-align:center;}
}
@media(max-width:640px){
  .values-grid,.benefit-grid{grid-template-columns:minmax(0,1fr) !important;}
}

/* ===== HERO — schlichte Variante (Startseite) ===== */
.hero-simple{background:var(--navy);padding:0;}
.hero-simple::after{display:none;}
.hero-simple .container{position:relative;z-index:2;}
.hero-simple h1{margin-top:18px;color:#fff;font-size:clamp(30px,3.6vw,46px);line-height:1.18;max-width:22em;}
.hero-simple .hero-lead{margin-top:20px;font-size:16.5px;line-height:1.75;color:rgba(255,255,255,.76);max-width:64ch;}
.hero-simple .hero-actions{margin-top:30px;}
.hero-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  margin-top:0;padding-top:28px;border-top:1px solid rgba(255,255,255,.16);
}
.hero-fact .k{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.hero-fact .v{display:block;margin-top:7px;font-family:var(--serif);font-size:20px;color:#fff;line-height:1.25;}

/* Sprungziel Team-Abschnitt (Über uns) */
.team-anchor{scroll-margin-top:90px;}

@media(max-width:860px){
  .hero-simple .hero-lead{font-size:15.5px;}
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:0;}
}
@media(max-width:520px){
  .hero-simple .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-simple .hero-actions .btn{justify-content:center;}
}

/* ===== Startseite: Hero-Visual ===== */
.hero-simple .hero-simple-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:56px;align-items:center;position:relative;z-index:2;padding-top:82px;padding-bottom:34px;}
.hero-simple .hero-simple-grid + .container{padding-bottom:70px;}
.hero-visual{position:relative;margin:0;min-width:0;}
.hero-visual img{
  width:100%;max-width:100%;aspect-ratio:4/5;max-height:560px;object-fit:cover;border-radius:4px;display:block;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.hero-visual::before{
  content:'';position:absolute;left:-16px;top:-16px;right:26px;bottom:26px;
  border:1px solid rgba(133,183,235,.45);border-radius:4px;pointer-events:none;
}
.hero-visual figcaption{
  margin-top:16px;font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.6);
  border-left:2px solid var(--lightblue);padding-left:12px;
}

@media(max-width:960px){
  .hero-simple .hero-simple-grid{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:56px;padding-bottom:14px;}
  .hero-visual img{aspect-ratio:16/10;}
  /* Der Zierrahmen haengt an .hero-visual - also am Bild UND an der
     Bildunterschrift. Vergroessert man den Abstand der Unterschrift, waechst
     der Rahmen mit nach unten. Damit nur der Text tiefer rutscht und die
     Linie bleibt, wo sie ist, wird "bottom" um denselben Betrag erhoeht:
     16px Grundwert + 24px zusaetzlicher Textabstand = 40px. */
  .hero-visual::before{left:-10px;top:-10px;right:16px;bottom:40px;}
  .hero-visual figcaption{margin-top:40px;}
}
@media(max-width:860px){
  .hero-simple .hero-simple-grid + .container{padding-bottom:48px;}
  .nav-bar{gap:8px;}
}

/* Kopfleiste, nur Desktop (ab 861px) - Mobile bleibt unveraendert.
   Ab 1240px: Leiste darf breiter werden als der 1240px-Inhaltscontainer,
   die Menuepunkte wandern dadurch nach links, das Logo bleibt mittig. */
@media(min-width:1240px){
  .site-header .nav-bar{max-width:1640px;}
  .site-header .nav-main{gap:4px;}
  .site-header .nav-link{padding:12px 13px;}
}
/* 861-1239px: fuer ein mittiges Logo ist zu wenig Platz, die Menuepunkte
   wuerden darueber laufen. Deshalb hier klassisch: Logo links, Menue rechts. */
@media(min-width:861px) and (max-width:1239px){
  .site-header .nav-bar{display:flex;justify-content:space-between;}
  .site-header .nav-main{gap:2px;}
  .site-header .nav-link{padding:12px 10px;font-size:13.5px;}
}

/* ===== Barrierefreier, optisch unsichtbarer Text =====
   Macht mehrfach genutzte Linktexte ("Lesen", "Profil ansehen") fuer
   Suchmaschinen und Screenreader eindeutig, ohne das Layout zu aendern. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Der Cookie-Dialog bringt sein CSS selbst mit (cookie-consent.js).
   Bewusst so: dadurch sieht er auch dann richtig aus, wenn auf dem
   Server noch eine aeltere styles.css liegt oder der Browser die
   alte Version im Cache hat. */

/* Platzhalter, solange externe Bilder nicht freigegeben sind */
img.media-blocked{
  visibility:hidden;
}
.hero-visual:has(img.media-blocked),
.ind-card:has(img.media-blocked){
  background:linear-gradient(135deg,#0d3155,#051c2c);
}
.hero-visual:has(img.media-blocked){border-radius:4px;}

@media (prefers-reduced-motion: reduce){
}

/* ===== Formulare: Statusmeldungen und Spamfalle ===== */
/* Das Feld muss fuer Bots im Quelltext normal aussehen, darf aber weder
   sichtbar noch per Tastatur oder Screenreader erreichbar sein. */
.hp-feld{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}

.form-status{
  margin-top:14px;padding:12px 14px;border-radius:8px;
  font-size:13.5px;line-height:1.6;
}
.form-status.ok{background:rgba(26,127,75,.1);color:#14663c;border:1px solid rgba(26,127,75,.28);}
.form-status.fehler{background:rgba(192,57,43,.08);color:#a5342a;border:1px solid rgba(192,57,43,.26);}

/* Hinweis, solange die Formulare noch keinen Versand haben */
.form-status.hinweis{
  background:rgba(26,95,168,.08);color:var(--navy);
  border:1px solid rgba(26,95,168,.28);
}

/* =====================================================================
   REINIGUNGSBRANCHE — Bausteine fuer die Funnel-Seiten (v37)

   Bewusst in der bestehenden Formensprache gebaut:
   gleiche Farbtoken, 12px-Radien, 1px --line-Rahmen, Serif-Headlines,
   Hover mit translateY(-4px) + --shadow-md. Keine neuen Farben.
   ===================================================================== */

/* ---------- Hero (hell, zentriert) ---------- */
.sp-hero{background:var(--lightblue-tint);padding:78px 0 70px;position:relative;}
.sp-hero .eyebrow{justify-content:center;}
.sp-hero-center{max-width:900px;margin:0 auto;text-align:center;}
.sp-hero h1{font-size:clamp(28px,3.7vw,44px);line-height:1.2;margin-top:16px;}
.sp-hero .sp-lead{margin:20px auto 0;max-width:62ch;font-size:16px;line-height:1.75;color:var(--text-soft);}
.sp-hero .btn{margin-top:30px;}
.sp-hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center;}
.sp-hero-split .eyebrow{justify-content:flex-start;}
.sp-hero-split h1{max-width:15em;}
.sp-hero-note{margin-top:14px;font-size:12.5px;color:var(--text-soft);}

/* ---------- Haken-Liste ---------- */
.sp-checklist{display:flex;flex-direction:column;gap:12px;margin-top:26px;text-align:left;}
.sp-checklist.center{max-width:760px;margin-left:auto;margin-right:auto;}
.sp-checklist li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.65;color:var(--text);}
.sp-checklist li::before{
  content:'';flex-shrink:0;width:19px;height:19px;border-radius:50%;margin-top:2px;
  background:var(--lightblue-tint) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A5FA8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(26,95,168,.22);
}
.sp-checklist.on-dark li{color:rgba(255,255,255,.82);}
.sp-checklist.on-dark li::before{background-color:rgba(133,183,235,.16);box-shadow:inset 0 0 0 1px rgba(133,183,235,.4);}

/* ---------- Kennzahlen-Karten ---------- */
.sp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;}
.sp-stats.four{grid-template-columns:repeat(4,1fr);}
.sp-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 20px;text-align:center;}
.sp-stat .v{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:600;color:var(--navy);line-height:1.2;}
.sp-stat .k{margin-top:8px;font-size:13px;color:var(--text-soft);line-height:1.55;}

/* ---------- Vergleich: ohne / mit ---------- */
.sp-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px;}
.sp-compare-col{border:1px solid var(--line);border-radius:12px;padding:26px 24px;background:#fff;}
.sp-compare-col.good{background:var(--lightblue-tint);border-color:rgba(26,95,168,.2);}
.sp-compare-col h3{font-size:17px;margin-bottom:16px;}
.sp-compare-col ul{display:flex;flex-direction:column;gap:12px;}
.sp-compare-col li{display:flex;gap:11px;align-items:flex-start;font-size:13.8px;line-height:1.6;color:var(--text-soft);}
.sp-compare-col li::before{flex-shrink:0;font-weight:700;font-size:14px;line-height:1.5;}
.sp-compare-col.bad li::before{content:'\2715';color:#a5342a;}
.sp-compare-col.good li::before{content:'\2713';color:var(--midblue);}

/* ---------- Nummerierte Schritte im Raster ---------- */
.sp-steps{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px;margin-top:38px;}
.sp-step{display:flex;gap:16px;align-items:flex-start;}
.sp-step .n{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:14px;
  background:var(--midblue);color:#fff;
}
.sp-step h4{font-size:16px;margin-bottom:6px;}
.sp-step p{font-size:13.5px;line-height:1.65;color:var(--text-soft);}
.sp-dark{background:var(--navy);color:#fff;}
.sp-dark h2,.sp-dark h3,.sp-dark h4{color:#fff;}
.sp-dark p{color:rgba(255,255,255,.72);}
.sp-dark .sp-step .n{background:rgba(133,183,235,.18);color:var(--lightblue);box-shadow:inset 0 0 0 1px rgba(133,183,235,.45);}
.sp-dark .sp-step p{color:rgba(255,255,255,.68);}

/* ---------- Fuer wen ist das? ---------- */
.sp-who{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;}
.sp-who-card{border:1px solid var(--line);border-radius:12px;padding:22px 22px;background:#fff;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);}
.sp-who-card:hover{border-color:var(--lightblue);box-shadow:var(--shadow-md);transform:translateY(-3px);}
.sp-who-card p{font-size:13.8px;line-height:1.65;color:var(--text-soft);}
.sp-who-card b{color:var(--navy);font-family:var(--serif);font-size:15px;display:inline;}

/* ---------- Autor / kein Berater von aussen ---------- */
.sp-author{max-width:760px;margin:0 auto;text-align:center;}
.sp-author h2{font-size:clamp(22px,2.6vw,30px);margin-top:14px;}
.sp-author p{margin-top:18px;font-size:15px;line-height:1.8;color:var(--text-soft);}
.sp-author .eyebrow{justify-content:center;}

/* ---------- Module / Leistungsbausteine ---------- */
.sp-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
.sp-module{border:1px solid var(--line);border-radius:12px;padding:24px 22px;background:#fff;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);}
.sp-module:hover{border-color:var(--lightblue);box-shadow:var(--shadow-md);transform:translateY(-4px);}
.sp-module h4{font-size:16px;}
.sp-module p{margin-top:9px;font-size:13.5px;line-height:1.65;color:var(--text-soft);}

/* ---------- Zusammenarbeit: Haken-Zeilen als Karten ---------- */
.sp-coop{display:flex;flex-direction:column;gap:12px;margin-top:32px;}
.sp-coop-row{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:18px 20px;font-size:14px;line-height:1.65;color:var(--text);}
.sp-coop-row::before{
  content:'';flex-shrink:0;width:20px;height:20px;border-radius:50%;margin-top:1px;
  background:var(--lightblue-tint) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A5FA8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- Naechste Schritte (1-2-3) ---------- */
.sp-next{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:38px;}
.sp-next-item .n{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--midblue);line-height:1;}
.sp-next-item h4{margin-top:12px;font-size:16px;}
.sp-next-item p{margin-top:9px;font-size:13.5px;line-height:1.65;color:var(--text-soft);}
.sp-dark .sp-next-item .n{color:var(--lightblue);}

/* ---------- Stufen (Homepage) ---------- */
.sp-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px;}
.sp-stage{border:1px solid var(--line);border-radius:12px;padding:24px 20px;background:#fff;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);}
.sp-stage:hover{border-color:var(--lightblue);box-shadow:var(--shadow-md);transform:translateY(-4px);}
.sp-stage .tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  background:var(--lightblue-tint);color:var(--midblue);border-radius:20px;padding:5px 12px;}
.sp-stage h4{margin-top:14px;font-size:17px;}
.sp-stage .q{margin-top:8px;font-size:13.5px;font-style:italic;color:var(--midblue);line-height:1.55;}
.sp-stage p{margin-top:12px;font-size:13.3px;line-height:1.65;color:var(--text-soft);}
.sp-stage.is-top{background:var(--navy);border-color:var(--navy);}
.sp-stage.is-top h4{color:#fff;}
.sp-stage.is-top .tag{background:rgba(133,183,235,.18);color:var(--lightblue);}
.sp-stage.is-top .q{color:var(--lightblue);}
.sp-stage.is-top p{color:rgba(255,255,255,.7);}

/* ---------- Fallstudien ---------- */
.sp-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;margin-top:34px;}
.sp-case{border:1px solid var(--line);border-radius:12px;padding:24px 22px;background:#fff;}
.sp-case .badge{display:inline-block;font-size:12px;font-weight:700;background:var(--lightblue-tint);
  color:var(--midblue);border-radius:20px;padding:5px 12px;}
.sp-case h4{margin-top:14px;font-size:16px;}
.sp-case p{margin-top:9px;font-size:13.5px;line-height:1.65;color:var(--text-soft);}
.sp-case .kpis{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;}
.sp-case .kpi .v{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy);}
.sp-case .kpi .k{font-size:11.5px;color:var(--text-soft);margin-top:2px;}
.sp-case blockquote{margin-top:16px;padding-left:14px;border-left:3px solid var(--lightblue);
  font-size:13.5px;font-style:italic;color:var(--text-soft);line-height:1.6;}

/* ---------- Platzhalter (Bilder, offene Inhalte) ---------- */
.ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--offwhite);border:1px dashed var(--line);border-radius:12px;
  color:var(--text-soft);font-size:12.5px;line-height:1.55;padding:22px;min-height:120px;
}
.ph-img{min-height:340px;}
.ph-portrait{min-height:300px;}
.sp-dark .ph{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.55);}

/* ---------- Vertrauensleiste ---------- */
.sp-trust{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sp-trust .badges{display:flex;gap:12px;flex-wrap:wrap;}
.sp-trust .badges .ph{min-height:auto;padding:12px 18px;font-size:11.5px;}
.sp-trust .rating{text-align:center;flex:1;min-width:200px;}
.sp-trust .rating .v{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy);}
.sp-trust .rating .k{font-size:12.5px;color:var(--text-soft);margin-top:4px;}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:34px auto 0;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 0;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--navy);
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--midblue);}
.faq summary::after{
  content:'';flex-shrink:0;width:16px;height:16px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A5FA8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A5FA8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.faq details p{padding:0 0 22px;font-size:14px;line-height:1.75;color:var(--text-soft);max-width:70ch;}

/* ---------- Abschluss-CTA ---------- */
.sp-cta{background:var(--navy);color:#fff;text-align:center;padding:84px 0;}
.sp-cta h2{color:#fff;font-size:clamp(24px,3vw,36px);max-width:20em;margin:0 auto;line-height:1.28;}
.sp-cta p{margin:18px auto 0;max-width:56ch;color:rgba(255,255,255,.72);font-size:15px;line-height:1.7;}
.sp-cta .btn{margin-top:30px;}

/* ---------- Zentrierte Abschnittsueberschrift ---------- */
.sp-head{text-align:center;max-width:820px;margin:0 auto 10px;}
.sp-head .eyebrow{justify-content:center;}
.sp-head h2{font-size:clamp(24px,3vw,36px);margin-top:14px;line-height:1.25;}
.sp-head p{margin-top:16px;font-size:15px;line-height:1.75;color:var(--text-soft);}
.sp-dark .sp-head p{color:rgba(255,255,255,.72);}
.sp-head-left{text-align:left;margin-left:0;}
.sp-head-left .eyebrow{justify-content:flex-start;}

/* ---------- Gerueststseiten ---------- */
.sp-stub{max-width:760px;margin:0 auto;text-align:center;}
.sp-stub .ph{margin-top:30px;text-align:center;}

/* ---------- Mobil ---------- */
@media(max-width:980px){
  .sp-hero-split{grid-template-columns:minmax(0,1fr);gap:34px;}
  .sp-stats,.sp-stats.four{grid-template-columns:1fr 1fr;}
  .sp-modules{grid-template-columns:1fr 1fr;}
  .sp-stages{grid-template-columns:1fr 1fr;}
  .sp-next{grid-template-columns:1fr;gap:26px;}
}
@media(max-width:700px){
  .sp-hero{padding:56px 0 52px;}
  .sp-compare,.sp-steps,.sp-who{grid-template-columns:minmax(0,1fr);}
  .sp-stats,.sp-stats.four,.sp-modules,.sp-stages{grid-template-columns:minmax(0,1fr);}
  .sp-steps{gap:24px;}
  .faq summary{font-size:15.5px;}
  .sp-trust{flex-direction:column;text-align:center;}
  .sp-trust .badges{justify-content:center;}
  .ph-img,.ph-portrait{min-height:220px;}
}

/* ---------- Primaerer Button (blau) ----------
   Das Grundgeruest kannte nur .btn-light und .btn-outline fuer dunkle
   Flaechen. Die Funnel-Seiten brauchen einen blauen Button auf hellem
   Grund — Farbe und Hover wie beim bestehenden .nav-cta. */
.btn-primary{background:var(--midblue);color:#fff;box-shadow:0 10px 26px rgba(26,95,168,.26);}
.btn-primary:hover{background:var(--midblue-dark);transform:translateY(-3px);box-shadow:0 16px 34px rgba(26,95,168,.32);}
/* Auf dunklen Abschnitten automatisch hell, damit er sich abhebt. */
.sp-dark .btn-primary{background:#fff;color:var(--navy);box-shadow:none;}
.sp-dark .btn-primary:hover{background:var(--lightblue);color:var(--navy);box-shadow:0 14px 30px rgba(0,0,0,.25);}

/* =====================================================================
   POLITUR v38 — ruhiger, moderner, weniger Rahmen

   Ziel: weichere Radien, leisere Schatten, mehr Luft, klarere
   Hierarchie. Farben und Schriften bleiben unveraendert.
   ===================================================================== */

/* ---------- Schrittanzeige der Buchung lesbarer ---------- */
.booking-steps .bstep{color:rgba(255,255,255,.62);font-size:12.5px;}
.booking-steps .bstep .n{
  width:26px;height:26px;font-size:12px;
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.34);
}
.booking-steps .bstep.done{color:rgba(255,255,255,.78);}
.booking-steps .bstep.done .n{
  background:rgba(133,183,235,.22);border-color:var(--lightblue);color:var(--lightblue);
}
.booking-steps .bstep.active .n{box-shadow:0 0 0 4px rgba(133,183,235,.18);}
.booking-steps .bar{height:1px;background:rgba(255,255,255,.18);margin-top:13px;}
.booking-head{padding:32px 40px 30px;}
.booking-head p{color:rgba(255,255,255,.66);}

/* ---------- Weichere Radien ---------- */
.sp-stat,.sp-compare-col,.sp-who-card,.sp-module,.sp-stage,.sp-case,.ph{border-radius:14px;}
.sp-coop-row{border-radius:12px;}
.btn{border-radius:8px;}

/* ---------- Leisere Schatten, ruhigere Hover ---------- */
.sp-who-card:hover,.sp-module:hover,.sp-stage:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(5,28,44,.08);
  border-color:rgba(26,95,168,.28);
}
.btn-primary{box-shadow:0 6px 18px rgba(26,95,168,.18);}
.btn-primary:hover{box-shadow:0 12px 26px rgba(26,95,168,.24);}

/* ---------- Mehr Luft ---------- */
.sp-hero{padding:92px 0 84px;}
.sp-head{margin-bottom:6px;}
.sp-head h2{line-height:1.22;letter-spacing:-.015em;}
.sp-head p{max-width:64ch;margin-left:auto;margin-right:auto;}
.sp-head-left p{margin-left:0;}
.sp-stats{gap:18px;margin-top:0;}
.sp-compare,.sp-who,.sp-modules{gap:18px;}
.sp-steps{gap:34px 48px;}

/* ---------- Karten: weniger Rahmen, mehr Flaeche ---------- */
.sp-module,.sp-who-card{border-color:#E8EDF2;}
.bg-tint .sp-module,.bg-tint .sp-who-card,.bg-tint .sp-stat,.bg-tint .sp-case{
  border-color:#E4EAF0;
}
.sp-stat{padding:30px 22px;}
.sp-stat .v{letter-spacing:-.02em;}

/* ---------- Platzhalter zurueckhaltender ---------- */
.ph{
  background:rgba(26,95,168,.035);
  border:1px dashed rgba(26,95,168,.22);
  color:#8796a3;font-size:12px;
}

/* ---------- Vergleich: ruhiger ---------- */
.sp-compare-col{padding:28px 26px;}
.sp-compare-col.bad{background:#FCFDFE;}
.sp-compare-col.good{background:var(--lightblue-tint);border-color:rgba(26,95,168,.18);}
.sp-compare-col h3{font-size:16.5px;letter-spacing:-.01em;}

/* ---------- FAQ: mehr Ruhe ---------- */
.faq details{border-bottom:1px solid #E8EDF2;}
.faq summary{padding:22px 4px;font-size:16.5px;}
.faq summary:hover{color:var(--midblue);}
.faq details[open] summary{color:var(--midblue);}
.faq details p{padding:0 4px 24px;}

/* ---------- Haken-Listen etwas luftiger ---------- */
.sp-checklist{gap:14px;}
.sp-coop-row{padding:20px 22px;}

/* ---------- Abschluss-CTA ---------- */
.sp-cta{padding:96px 0;}
.sp-cta h2{letter-spacing:-.015em;}

/* ---------- Vertrauensleiste dezenter ---------- */
.sp-trust{padding:30px 0;border-color:#E8EDF2;}

/* ---------- Kopfzeile: feine Trennlinie statt harter Kante ---------- */
.site-header{border-bottom:1px solid rgba(225,231,236,.9);}

@media(max-width:700px){
  .sp-hero{padding:60px 0 54px;}
  .sp-cta{padding:70px 0;}
  .booking-head{padding:24px 20px 22px;}
}

/* =====================================================================
   BRIEFING-UMSETZUNG v40 — Designsystem laut Website-Briefing
   Gold-Akzent, Inter als Fliesstext, groessere Typo, ruhigere
   Animation, neue Bausteine. Steht bewusst am Ende und ueberschreibt
   das Bisherige, damit die Herkunft nachvollziehbar bleibt.
   ===================================================================== */

:root{
  --accent:#C9962B;
  --accent-dark:#A87B1F;
  --accent-tint:#FBF4E6;
  --success:#2E7D4F;
  --danger:#B3413A;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* ---------- Grundtypografie ---------- */
body{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--text);}
.container{max-width:1200px;padding:0 24px;}
section{padding:112px 0;}

h1{font-family:var(--serif);font-weight:600;font-size:48px;line-height:1.15;letter-spacing:-.015em;}
h2{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.2;letter-spacing:-.012em;}
h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.3;}
h4{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.35;}

/* Kicker (ueber H1/H2) */
.eyebrow{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;
  line-height:1.4;text-transform:uppercase;color:var(--midblue);
}
.eyebrow::before{background:var(--accent);}
.eyebrow.on-dark{color:var(--accent);}
.eyebrow.on-dark::before{background:var(--accent);}

/* Fliesstextbreite */
.sp-lead,.sp-head p,.sp-author p{max-width:68ch;}

/* ---------- Buttons: Gold mit Navy-Text ---------- */
.btn{
  font-family:var(--sans);font-size:16px;font-weight:600;
  padding:18px 32px;border-radius:8px;box-shadow:var(--shadow-sm);
}
.btn-primary,.sp-dark .btn-primary,.btn-light{
  background:var(--accent);color:var(--navy);box-shadow:var(--shadow-sm);
}
.btn-primary:hover,.sp-dark .btn-primary:hover,.btn-light:hover{
  background:var(--accent-dark);color:var(--navy);
  transform:translateY(-2px);box-shadow:var(--shadow-md);
}
.btn-sekundaer{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--navy);color:var(--navy);background:transparent;
  padding:12px 20px;border-radius:8px;font-size:14.5px;font-weight:600;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.btn-sekundaer:hover{background:var(--navy);color:#fff;}

/* Mikrozeile unter jedem Primaerbutton */
.btn-mikro{margin-top:10px;font-size:13px;color:var(--text-soft);}
.sp-dark .btn-mikro,.sp-cta .btn-mikro{color:rgba(255,255,255,.7);}

/* ---------- Fussnote ---------- */
.fussnote{font-size:13px;line-height:1.5;color:var(--text-soft);max-width:68ch;}
.sp-dark .fussnote,footer .fussnote{color:rgba(255,255,255,.55);}
.sp-head .fussnote{margin:18px auto 0;}

/* ---------- Animation: Inhalt ist immer sichtbar ---------- */
.reveal,.reveal-stagger > *{opacity:1;transform:none;}
.reveal{opacity:.6;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;}
.reveal.show{opacity:1;transform:none;}
.reveal-stagger > *{opacity:.6;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;}
.reveal-stagger.show > *{opacity:1;transform:none;}
.reveal-stagger.show > *:nth-child(n){transition-delay:0s;}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger > *,.reveal.show,.reveal-stagger.show > *{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
}

/* ---------- Kopfzeile ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);}
.site-header.scrolled{box-shadow:var(--shadow-sm);}
.nav-cta{
  background:var(--accent);color:var(--navy);font-weight:600;
  border-radius:8px;padding:12px 20px;font-size:14.5px;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.nav-cta:hover{background:var(--accent-dark);color:var(--navy);transform:translateY(-2px);}
.nav-tel{
  display:none;align-items:center;gap:7px;font-size:14.5px;font-weight:600;
  color:var(--navy);margin-right:18px;white-space:nowrap;
}
.nav-tel svg{width:16px;height:16px;stroke:var(--midblue);}
.nav-tel:hover{color:var(--midblue);}
@media(min-width:1024px){.nav-tel{display:inline-flex;}}
.mega-cap-item .d{font-size:13px;color:var(--text-soft);}

/* ---------- Praxisleiste (4 bzw. 3 Kacheln) ---------- */
.praxis{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.praxis.drei{grid-template-columns:repeat(3,1fr);}
.praxis-item .gross{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--navy);line-height:1.2;}
.praxis-item .klein{margin-top:6px;font-size:14px;line-height:1.5;color:var(--text-soft);}
.sp-dark .praxis-item .gross{color:var(--accent);}
.sp-dark .praxis-item .klein{color:rgba(255,255,255,.72);}
.praxis-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0;}

/* ---------- Kennzahlenleiste ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.kpi .v{font-family:var(--serif);font-size:44px;font-weight:700;color:var(--accent);line-height:1.1;letter-spacing:-.02em;}
.kpi .k{margin-top:8px;font-size:15px;font-weight:500;line-height:1.4;color:var(--text);}
.sp-dark .kpi .k{color:rgba(255,255,255,.78);}

/* ---------- Vorher / Nachher ---------- */
.sp-compare-col{padding:28px;border-radius:12px;}
.sp-compare-col.bad{background:#fff;border:1px solid var(--line);}
.sp-compare-col.good{background:#fff;border:2px solid var(--success);}
.sp-compare-col li{font-size:16px;line-height:1.55;color:var(--text);}
.sp-compare-col.bad li::before{content:'\2715';color:var(--danger);font-size:15px;}
.sp-compare-col.good li::before{content:'\2713';color:var(--success);font-size:15px;}

/* ---------- Zeitleiste (Vorgehen / 3 Schritte) ---------- */
.zeitleiste{display:grid;gap:28px;position:relative;}
.zeitleiste.s3{grid-template-columns:repeat(3,1fr);}
.zeitleiste.s4{grid-template-columns:repeat(4,1fr);}
.zeitleiste.s5{grid-template-columns:repeat(5,1fr);}
.zeitleiste.s6{grid-template-columns:repeat(3,1fr);row-gap:40px;}
.zl-item{position:relative;padding-top:4px;}
.zl-item .n{
  width:48px;height:48px;border-radius:50%;background:var(--midblue);color:#fff;
  font-family:var(--serif);font-size:19px;font-weight:600;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:2;
}
.zl-item h4{margin-top:16px;font-size:19px;}
.zl-item p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--text-soft);}
.zl-item::after{
  content:'';position:absolute;left:48px;top:24px;height:1.5px;width:calc(100% - 48px + 28px);
  background:var(--line);z-index:1;
}
.zl-item:last-child::after,.zeitleiste.s6 .zl-item:nth-child(3n)::after{display:none;}
.sp-dark .zl-item .n{background:var(--accent);color:var(--navy);}
.sp-dark .zl-item p{color:rgba(255,255,255,.7);}
.sp-dark .zl-item::after{background:rgba(255,255,255,.18);}

/* ---------- Karten mit Icon ---------- */
.icon-karte .ico{
  width:28px;height:28px;margin-bottom:16px;color:var(--midblue);
  display:block;stroke-width:1.75;
}
.sp-dark .icon-karte .ico{color:var(--accent);}
.sp-module,.sp-who-card,.sp-stat,.sp-case{padding:28px;box-shadow:var(--shadow-sm);}
.sp-module h4,.sp-who-card b{font-size:19px;}
.sp-module p,.sp-who-card p{font-size:15.5px;line-height:1.6;}

/* ---------- Die 6 Bereiche (dunkel) ---------- */
.bereich-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.bereich{
  background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:28px;display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.bereich:hover{border-color:var(--accent);transform:translateY(-3px);}
.bereich-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.bereich .nr{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--accent);line-height:1;}
.bereich .ico{width:28px;height:28px;color:var(--accent);stroke-width:1.75;}
.bereich .kurz{
  margin-top:18px;font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}
.bereich h3{margin-top:6px;color:#fff;font-size:21px;}
.bereich p{margin-top:10px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);flex:1;}
.bereich .mehr{
  margin-top:18px;font-size:14.5px;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;transition:gap .3s var(--ease);
}
.bereich:hover .mehr{gap:10px;}

/* ---------- Problemliste mit rotem Punkt ---------- */
.problemliste{display:flex;flex-direction:column;gap:12px;margin-top:26px;}
.problemliste li{
  display:flex;gap:14px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:18px 20px;
  font-size:16px;line-height:1.55;color:var(--text);
}
.problemliste li::before{
  content:'';flex-shrink:0;width:9px;height:9px;border-radius:50%;
  background:var(--danger);margin-top:8px;
}

/* ---------- Beweiszeile ---------- */
.beweis{
  display:flex;align-items:flex-start;gap:9px;margin-top:20px;
  font-size:15px;font-weight:600;line-height:1.5;color:var(--navy);
}
.beweis svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;stroke:var(--success);}

/* ---------- Haken-Listen in neuer Groesse ---------- */
.sp-checklist li{font-size:18px;font-weight:500;line-height:1.5;color:var(--text);}
.sp-checklist li::before{
  background-color:transparent;box-shadow:none;width:22px;height:22px;margin-top:1px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9962B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:20px;
}
.sp-checklist.on-dark li{color:rgba(255,255,255,.85);}
.sp-checklist.on-dark li::before{background-color:transparent;box-shadow:none;}

/* ---------- Hero ---------- */
.sp-hero{padding:96px 0 88px;}
.sp-hero h1{max-width:900px;}
.sp-hero-center h1{margin-left:auto;margin-right:auto;}
.sp-hero .sp-lead{font-size:20px;line-height:1.55;color:var(--text);}
.sp-hero-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;}
.hero-grafik{width:100%;max-width:480px;margin-left:auto;}
.hero-grafik svg{width:100%;height:auto;display:block;}

/* ---------- Kein Berater von aussen ---------- */
.berater{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;}
.berater-initialen{
  width:64px;height:64px;border-radius:50%;background:rgba(201,150,43,.16);
  border:1.5px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:22px;
}
.berater h2{color:#fff;}
.berater p{color:rgba(255,255,255,.78);font-size:17px;line-height:1.7;max-width:60ch;}

/* ---------- Treppe (Stufen) ---------- */
.treppe{width:100%;overflow-x:auto;}
.treppe svg{width:100%;min-width:680px;height:auto;display:block;}
.stufen-text{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px;}
.stufe-t .nr{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--accent);}
.stufe-t h4{margin-top:6px;font-size:19px;}
.stufe-t .zitat{margin-top:6px;font-size:15px;font-style:italic;color:var(--midblue);line-height:1.5;}
.stufe-t p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--text-soft);}

/* ---------- Urlaubstest ---------- */
.test-box{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:32px;box-shadow:var(--shadow-sm);}
.test-frage{padding:20px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.test-frage:last-of-type{border-bottom:none;}
.test-frage p{font-size:16.5px;line-height:1.5;flex:1;min-width:240px;margin:0;}
.test-wahl{display:flex;gap:10px;flex-shrink:0;}
.test-wahl button{
  min-width:74px;padding:11px 18px;border-radius:8px;font-size:15px;font-weight:600;
  border:1.5px solid var(--line);background:#fff;color:var(--text);
  transition:all .2s var(--ease);font-family:inherit;
}
.test-wahl button:hover{border-color:var(--midblue);}
.test-wahl button.aktiv{background:var(--navy);border-color:var(--navy);color:#fff;}
.test-ergebnis{margin-top:26px;padding:26px;border-radius:12px;
  background:var(--accent-tint);border:1px solid rgba(201,150,43,.35);display:none;}
.test-ergebnis.an{display:block;}
.test-ergebnis h3{font-size:22px;}
.test-ergebnis p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--text);}
.test-ergebnis .btn{margin-top:20px;}
.test-hinweis{margin-top:16px;font-size:13px;color:var(--text-soft);}

/* ---------- Sticky-CTA mobil ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;
  background:var(--navy);padding:12px 16px;gap:12px;align-items:center;
  box-shadow:0 -6px 24px rgba(5,28,44,.28);
  transform:translateY(110%);transition:transform .3s var(--ease);
}
.sticky-cta.an{transform:translateY(0);}
.sticky-cta .btn{flex:1;justify-content:center;padding:14px 18px;font-size:15px;}
.sticky-cta .tel{
  width:48px;height:48px;border-radius:8px;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
}
.sticky-cta .tel svg{width:20px;height:20px;stroke:#fff;}
@media(max-width:767px){.sticky-cta{display:flex;}body{padding-bottom:76px;}}

/* ---------- Autorenbox / Artikelseiten ---------- */
.artikel{max-width:720px;margin:0 auto;}
.artikel p{font-size:18px;line-height:1.7;margin-bottom:18px;}
.autorbox{display:flex;gap:16px;align-items:center;margin-top:40px;padding:22px 24px;
  background:var(--offwhite);border:1px solid var(--line);border-radius:12px;}
.autorbox .kreis{width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:rgba(201,150,43,.16);border:1.5px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:18px;font-weight:700;}
.autorbox .n{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--navy);}
.autorbox .r{font-size:14px;color:var(--text-soft);margin-top:2px;}
.inhaltsverz{background:var(--offwhite);border:1px solid var(--line);border-radius:12px;
  padding:22px 26px;margin-bottom:32px;}
.inhaltsverz h4{font-size:15px;}
.inhaltsverz ol{margin:12px 0 0 18px;list-style:decimal;}
.inhaltsverz li{font-size:15.5px;line-height:1.9;}
.inhaltsverz a{color:var(--midblue);}

/* ---------- Footer ---------- */
footer{background:var(--navy);}
footer,footer a,footer p{color:rgba(255,255,255,.8);}
footer a:hover{color:#fff;}
.footer-rechtszeile{font-size:13px;line-height:1.6;color:rgba(255,255,255,.55);}

/* ---------- Mobil ---------- */
@media(max-width:900px){
  .praxis,.praxis.drei{grid-template-columns:repeat(2,1fr);}
  .bereich-grid{grid-template-columns:repeat(2,1fr);}
  .zeitleiste.s3,.zeitleiste.s4,.zeitleiste.s5,.zeitleiste.s6{grid-template-columns:1fr;}
  .zl-item::after{display:none;}
  .stufen-text{grid-template-columns:repeat(2,1fr);}
  .berater{grid-template-columns:1fr;gap:34px;}
}
@media(max-width:767px){
  section{padding:72px 0;}
  .container{padding:0 16px;}
  h1{font-size:32px;}
  h2{font-size:26px;}
  h3{font-size:20px;}
  body{font-size:17px;}
  .eyebrow{font-size:12px;}
  .sp-hero .sp-lead{font-size:18px;}
  .sp-checklist li{font-size:16px;}
  .kpi-row{grid-template-columns:1fr;}
  .kpi .v{font-size:34px;}
  .kpi .k{font-size:14px;}
  .praxis,.praxis.drei{grid-template-columns:1fr;gap:20px;}
  .praxis-item .gross{font-size:23px;}
  .bereich-grid{grid-template-columns:1fr;}
  .stufen-text{grid-template-columns:1fr;}
  .sp-hero{padding:64px 0 60px;}
  .btn{width:100%;justify-content:center;}
  .test-box{padding:22px 18px;}
  .test-frage{gap:14px;}
}

/* ==========================================================================
   v40 · Über uns / Team / Rechtstexte
   ========================================================================== */
.value-card{border-radius:14px;padding:28px 24px;background:#fff;}
.value-card .num{color:var(--accent);font-size:14px;letter-spacing:.04em;}
.value-card h4{font-size:18px;margin-top:10px;}
.value-card p{font-size:15px;line-height:1.65;margin-top:10px;}
.tl-item h4{font-size:18px;}
.tl-item p{font-size:16px;}
.tl-item .yr{font-size:22px;color:var(--accent);}
.ldr-photo{aspect-ratio:4/5 !important;}
.ldr-photo img{object-position:50% 22%;}
.ldr-idx{color:var(--accent) !important;}
.ldr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px;max-width:860px;margin-left:auto;margin-right:auto;}
.legal{padding:112px 0 96px;}
.legal .container{max-width:820px;}
.legal h1{font-size:40px;}
.legal h2{font-size:22px;margin-top:40px;}
.legal p{font-size:16.5px;line-height:1.75;margin-top:14px;color:var(--text);}
.legal .updated{font-size:14px;color:var(--text-soft);margin-top:10px;}
.legal a{color:var(--midblue);text-decoration:underline;text-underline-offset:2px;}
.pp-name{font-size:44px;}
.pp-text{font-size:17px;line-height:1.7;}
@media(max-width:860px){
  .values-grid{grid-template-columns:1fr 1fr;}
  .ldr-grid{grid-template-columns:1fr !important;max-width:420px;}
  .legal{padding:72px 0 64px;}
  .legal h1{font-size:30px;}
  .pp-name{font-size:32px;}
}
@media(max-width:560px){
  .values-grid{grid-template-columns:1fr;}
  .tl-item{grid-template-columns:1fr;gap:6px;}
}
.nav-cta-mobile{background:var(--accent) !important;color:var(--navy) !important;}
.nav-cta-mobile:hover{background:var(--accent-dark) !important;color:var(--navy) !important;}
.contact-form button{background:var(--accent);color:var(--navy);font-size:16px;padding:17px;border-radius:8px;}
.contact-form button:hover{background:var(--accent-dark);color:var(--navy);}

/* =====================================================================
   v41 — RUECKKEHR ZU BLAU, MODERNISIERUNG, BEWEGUNG
   Grundlage: Feedback Runde 2. Gold entfaellt, Navy plus genau eine
   Akzentfarbe (das alte Mittelblau). Fliesstext wieder Arial,
   Ueberschriften Source Serif 4. Steht am Ende und ueberschreibt
   bewusst die Gold-Schicht aus v40.
   ===================================================================== */

:root{
  --navy:#051C2C;
  --navy-2:#0E2A40;
  --accent:#1A5FA8;
  --accent-dark:#134478;
  --accent-soft:#4E8BD4;
  --accent-tint:#EBF3FC;
  --lightblue:#85B7EB;
  --bg:#FFFFFF;
  --bg-soft:#F5F7F9;
  --line:#E3E8ED;
  --line-weich:#EFF2F5;
  --text:#1B2733;
  --text-soft:#5A6875;
  --success:#1F8A5B;
  --danger:#C2413A;
  --sans:Arial, Helvetica, "Helvetica Neue", sans-serif;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --shadow-sm:0 1px 3px rgba(5,28,44,.06), 0 6px 16px rgba(5,28,44,.05);
  --shadow-md:0 10px 30px rgba(5,28,44,.09);
  --shadow-lg:0 20px 50px rgba(11,31,51,.12);
  --shadow-xl:0 34px 80px rgba(11,31,51,.18);
  --r:14px;
}

/* ---------- Grundlagen ---------- */
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--text);
  background:var(--bg);-webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums tabular-nums;
}
.container{max-width:1200px;padding:0 24px;}
section{padding:104px 0;}

h1,h2,h3,h4{
  font-family:var(--serif);font-weight:600;letter-spacing:-.01em;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal;word-break:normal;
  text-wrap:balance;
}
h1{font-size:clamp(34px,4.1vw,52px);line-height:1.1;}
h2{font-size:clamp(27px,2.9vw,38px);line-height:1.18;}
h3{font-size:21px;line-height:1.3;}
h4{font-size:18px;line-height:1.35;}
p,li{text-wrap:pretty;}

/* Zahlen immer serifenlos mit gleich breiten Ziffern */
.kpi .v,.praxis-item .gross,.zahl,.tl-item .yr,.pp-stat .v,
.zl-item .n,.bereich .nr,.value-card .num,.mk-zahl{
  font-family:var(--sans) !important;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  font-weight:700;letter-spacing:-.01em;
}

/* ---------- Kicker ---------- */
.eyebrow{
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}
.eyebrow::before{background:var(--accent);}
.eyebrow.on-dark,.eyebrow.on-dark::before{color:var(--lightblue);}
.eyebrow.on-dark::before{background:var(--lightblue);}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:-.005em;
  padding:17px 30px;border-radius:10px;position:relative;overflow:hidden;
  isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s var(--ease);
}
.btn-primary,.sp-dark .btn-primary,.btn-light{
  background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(26,95,168,.28);
}
.btn-primary:hover,.sp-dark .btn-primary:hover,.btn-light:hover{
  background:var(--accent-dark);color:#fff;
  transform:translateY(-3px);box-shadow:0 14px 32px rgba(26,95,168,.36);
}
/* Lichtwisch beim Hover */
.btn-primary::after,.btn-light::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .75s var(--ease);
}
.btn-primary:hover::after,.btn-light:hover::after{transform:translateX(120%);}
.btn-outline{border:1.5px solid rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn-mikro{margin-top:11px;font-size:13px;color:var(--text-soft);}
.sp-dark .btn-mikro,.sp-cta .btn-mikro{color:rgba(255,255,255,.66);}

/* ---------- Icon im Quadrat ---------- */
.ico-box{
  width:44px;height:44px;border-radius:10px;background:var(--accent-tint);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;
  transition:transform .4s var(--ease-spring),background .3s var(--ease);
}
.ico-box svg{width:22px;height:22px;stroke:var(--accent);}
.sp-dark .ico-box,.bereich .ico-box{background:rgba(255,255,255,.08);}
.sp-dark .ico-box svg,.bereich .ico-box svg{stroke:var(--lightblue);}
.icon-karte:hover .ico-box,.bereich:hover .ico-box{transform:translateY(-3px) scale(1.06);}

/* ---------- Kopfzeile: Logo links, Navigation Mitte, Aktion rechts ---------- */
.site-header{
  position:sticky;top:0;z-index:900;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);box-shadow:none;
  transition:height .3s var(--ease),background .3s var(--ease);
}
.site-header .nav-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:76px;gap:24px;transition:height .3s var(--ease);
}
.site-header.geschrumpft .nav-bar{height:64px;}
.site-header.geschrumpft .logo-img{height:30px;}
.site-header .nav-bar{padding:0;}
.site-header .logo{grid-area:1/1;justify-self:start;display:flex;align-items:center;}
.logo-img{height:36px;width:auto;transition:height .3s var(--ease);}
.site-header .nav-main{
  grid-area:1/2;justify-self:center;display:flex;align-items:center;gap:36px;
  position:relative;background:none;box-shadow:none;padding:0;
}
.site-header .nav-right{grid-area:1/3;justify-self:end;display:flex;align-items:center;gap:18px;}
.nav-main .nav-link,.nav-main .nav-item > .nav-link{
  font-family:var(--sans);font-size:15px;font-weight:500;color:var(--text);
  padding:6px 0;background:none;border:none;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-main .nav-link svg{width:13px;height:13px;transition:transform .3s var(--ease);}
.nav-item.open .nav-link svg{transform:rotate(180deg);}
.nav-main .nav-link::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-main .nav-link:hover::after,.nav-main .nav-link.aktiv::after,
.nav-item.open .nav-link::after{transform:scaleX(1);}
.nav-main .nav-link.aktiv{color:var(--navy);font-weight:700;}
.site-header .nav-link:hover,.site-header .nav-item.open .nav-link{background:none;color:var(--accent);}
.site-header .nav-link{padding:6px 0;border-radius:0;}
.nav-tel{
  display:none;align-items:center;gap:7px;font-size:14.5px;font-weight:400;
  color:var(--text-soft);white-space:nowrap;transition:color .25s var(--ease);
}
.nav-tel svg{width:16px;height:16px;stroke:var(--text-soft);transition:stroke .25s var(--ease);}
.nav-tel:hover{color:var(--accent);}
.nav-tel:hover svg{stroke:var(--accent);}
@media(min-width:1024px){.nav-tel{display:inline-flex;}}
.nav-cta{
  background:var(--accent);color:#fff;font-weight:700;border-radius:9px;
  padding:12px 20px;font-size:14.5px;white-space:nowrap;
  box-shadow:0 5px 14px rgba(26,95,168,.26);
  transition:background .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.nav-cta:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(26,95,168,.34);}
.mobile-toggle{display:none;}
.nav-cta-mobile{display:none;}
#sp-fortschritt,.scroll-progress,.progress-bar{display:none !important;}

/* Mega-Menue: zwei Spalten plus Gespraechskarte */
.nav-item{position:relative;}
.site-header .nav-item{position:static;}
.site-header .mega,.site-header .mega-capabilities{
  position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(960px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-xl);padding:22px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .32s var(--ease),visibility .28s;
}
.site-header .nav-item.open .mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);scale:1;}
.mega-innen{display:grid;grid-template-columns:1fr 250px;gap:22px;}
.mega-cap-list{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.mega-cap-item{
  display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;
  padding:11px 12px;border-radius:11px;transition:background .22s var(--ease);
}
.mega-cap-item:hover{background:var(--bg-soft);padding-left:12px;}
.mega-cap-item .mi{
  width:38px;height:38px;border-radius:9px;background:var(--accent-tint);
  display:flex;align-items:center;justify-content:center;
}
.mega-cap-item .mi svg{width:19px;height:19px;stroke:var(--accent);}
.mega-cap-item .t{display:block;font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.3;}
.mega-cap-item .d{display:block;font-size:12.5px;color:var(--text-soft);line-height:1.45;margin-top:3px;}
.mega-karte{
  background:var(--navy);border-radius:13px;padding:22px;color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
}
.mega-karte .mk-kicker{font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lightblue);}
.mega-karte h4{font-family:var(--serif);font-size:19px;color:#fff;margin-top:9px;line-height:1.25;}
.mega-karte p{font-size:13px;color:rgba(255,255,255,.7);margin-top:9px;line-height:1.5;}
.mega-karte .btn{margin-top:16px;width:100%;text-align:center;justify-content:center;
  padding:13px 16px;font-size:14px;}

/* ---------- Mobile Kopfzeile (unter 1024 px) ---------- */
@media(max-width:1023px){
  .site-header .nav-bar{grid-template-columns:1fr auto;height:66px;}
  .site-header.geschrumpft .nav-bar{height:58px;}
  .nav-right{gap:10px;}
  .nav-right .nav-cta{display:none;}
  .mobile-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:10px;border:1px solid var(--line);
    background:#fff;cursor:pointer;
  }
  .mt-bars{position:relative;display:block;width:18px;height:12px;}
  .mt-bars i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
    background:var(--navy);transition:transform .35s var(--ease),opacity .25s var(--ease);}
  .mt-bars i:nth-child(1){top:0;}
  .mt-bars i:nth-child(2){top:5px;}
  .mt-bars i:nth-child(3){top:10px;}
  .mobile-toggle[aria-expanded="true"] .mt-bars i:nth-child(1){transform:translateY(5px) rotate(45deg);}
  .mobile-toggle[aria-expanded="true"] .mt-bars i:nth-child(2){opacity:0;}
  .mobile-toggle[aria-expanded="true"] .mt-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
  .nav-main{
    position:fixed;top:66px;left:0;right:0;bottom:0;display:block;
    background:#fff;padding:22px 22px 40px;overflow-y:auto;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s;
  }
  .nav-main.mobile-open{transform:none;opacity:1;visibility:visible;}
  .nav-main .nav-link{display:flex;width:100%;justify-content:space-between;
    font-size:19px;font-weight:700;padding:16px 0;border-bottom:1px solid var(--line-weich);}
  .nav-main .nav-link::after{display:none;}
  .mega,.mega-capabilities{
    position:static;transform:none;width:100%;opacity:1;visibility:visible;
    pointer-events:auto;border:none;box-shadow:none;padding:4px 0 10px;
    display:none;border-radius:0;
  }
  .nav-item.open .mega{display:block;transform:none;}
  .mega-innen{grid-template-columns:1fr;gap:14px;}
  .mega-cap-list{grid-template-columns:1fr;}
  .nav-cta-mobile{
    display:block;margin-top:18px;padding:16px;border-radius:10px;
    background:var(--accent);color:#fff !important;text-align:center;font-weight:700;
    font-size:16px;border:none;
  }
}

/* ---------- Abschnittskopf ---------- */
.sp-head{max-width:760px;margin:0 auto;text-align:center;}
.sp-head .eyebrow{justify-content:center;}
.sp-head h2{margin-top:14px;}
.sp-head p{margin-top:16px;font-size:17.5px;color:var(--text-soft);line-height:1.7;}
.sp-head-left{margin:0;text-align:left;}
.sp-head-left .eyebrow{justify-content:flex-start;}

/* ---------- Hero: Weiss mit feinem Punktraster ---------- */
.sp-hero,.page-hero{
  position:relative;overflow:hidden;background:#fff;
  padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,104px);
}
.sp-hero::before,.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 35%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 35%,transparent 100%);
  opacity:.75;
}
.sp-hero > .container,.page-hero > .container{position:relative;z-index:2;}
.sp-hero-split{
  display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,64px);
  align-items:center;
}
.sp-hero h1{max-width:none;}
.sp-hero-split > div:first-child{min-width:0;}
.sp-hero .sp-lead{margin-top:20px;font-size:19px;line-height:1.65;color:var(--text-soft);max-width:54ch;}
.hero-grafik{position:relative;width:100%;max-width:520px;margin-left:auto;}
.hero-grafik::before{
  content:'';position:absolute;left:50%;top:50%;width:min(420px,96%);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,var(--accent-tint) 0%,rgba(235,243,252,0) 70%);
  opacity:.9;z-index:0;
}
.beweis{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-size:14.5px;font-weight:700;color:var(--accent);
}
.beweis svg{width:17px;height:17px;stroke:var(--accent);}

/* ---------- Mockup-Grafiken ---------- */
.mk{position:relative;z-index:1;width:100%;aspect-ratio:520/440;
  font-family:var(--sans);font-size:13px;color:var(--text);}
.mk-karte{
  position:absolute;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:16px;
}
.mk-haupt{left:0;top:6%;width:80%;}
.mk-neben{right:0;width:52%;}
.mk-o{top:0;}
.mk-u{bottom:0;left:0;right:auto;}
.mk-titel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-soft);}
.mk-h{font-size:15px;font-weight:700;color:var(--navy);margin-top:2px;line-height:1.3;}
.mk-zeile{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  font-size:12.5px;margin-top:11px;}
.mk-zeile .n{color:var(--text);}
.mk-zeile .w{font-weight:700;color:var(--navy);}
.mk-balken{grid-column:1/-1;height:6px;border-radius:99px;background:var(--bg-soft);
  overflow:hidden;margin-top:4px;}
.mk-balken i{display:block;height:100%;border-radius:99px;background:var(--accent);
  transform-origin:left;}
.mk-balken.warn i{background:var(--danger);}
.mk-balken.soft i{background:var(--accent-soft);}
.mk-chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px;
  background:var(--accent-tint);color:var(--accent);font-size:11px;font-weight:700;
}
.mk-chip.gruen{background:#E6F4EC;color:var(--success);}
.mk-chip.grau{background:var(--bg-soft);color:var(--text-soft);}
.mk-punkt{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px;}
.mk-punkt.gruen{background:var(--success);}
.mk-av{
  width:26px;height:26px;border-radius:50%;background:var(--accent-tint);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;border:2px solid #fff;
}
.mk-av.dunkel{background:var(--navy);color:#fff;}
.mk-avs{display:flex;}
.mk-avs .mk-av + .mk-av{margin-left:-7px;}
.mk-liste{margin-top:10px;display:grid;gap:8px;}
.mk-li{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.mk-li svg{width:14px;height:14px;stroke:var(--success);flex:0 0 14px;}
.mk-fuss{margin-top:12px;font-size:10.5px;color:var(--text-soft);}
.mk-zahl{font-size:26px;color:var(--navy);line-height:1.1;}
.mk-spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px;}
.mk-sp{background:var(--bg-soft);border-radius:9px;padding:7px 6px;}
.mk-sp .k{font-size:9.5px;font-weight:700;color:var(--text-soft);text-transform:uppercase;
  letter-spacing:.04em;display:flex;justify-content:space-between;}
.mk-mini{background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:5px 6px;margin-top:5px;font-size:9.5px;line-height:1.35;color:var(--text);}
.mk-schritt{display:grid;grid-template-columns:22px 1fr;gap:9px;align-items:center;
  font-size:12.5px;margin-top:9px;}
.mk-schritt .s{width:22px;height:22px;border-radius:50%;background:var(--bg-soft);
  color:var(--text-soft);display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;}
.mk-schritt.fertig .s{background:#E6F4EC;color:var(--success);}
.mk-schritt.aktiv .s{background:var(--accent);color:#fff;}
.mk-schritt.aktiv span{font-weight:700;color:var(--navy);}
.mk-woche{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:11px;}
.mk-tag{height:34px;border-radius:7px;background:var(--bg-soft);display:flex;
  align-items:flex-start;justify-content:center;padding-top:4px;
  font-size:9.5px;color:var(--text-soft);}
.mk-urlaub{grid-column:2/7;height:22px;border-radius:7px;background:var(--accent-tint);
  color:var(--accent);font-size:10.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:5px;}
.mk-orga{margin-top:12px;position:relative;}
.mk-orga .reihe{display:flex;justify-content:center;gap:34px;margin-top:16px;}
.mk-orga .gruppe{display:flex;gap:4px;}
.mk-linie{position:absolute;background:var(--line);}

/* ---------- Handy-Grafik ---------- */
.handy-wrap{position:relative;z-index:1;display:flex;justify-content:center;padding:10px 0;}
.handy{
  position:relative;width:300px;aspect-ratio:300/610;border-radius:44px;
  background:linear-gradient(170deg,#0A2338 0%,#1D3B57 100%);
  border:9px solid #0a1520;box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.06) inset;
  transform:rotate(-4deg);padding:16px 13px;overflow:hidden;
}
.handy::before{
  content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:86px;height:22px;border-radius:99px;background:#0a1520;
}
.handy-uhr{margin-top:34px;text-align:center;color:#fff;}
.handy-uhr .t{font-size:44px;font-weight:300;letter-spacing:-.02em;line-height:1;}
.handy-uhr .d{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:4px;}
.handy-liste{margin-top:22px;display:grid;gap:9px;}
.hn{
  display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:start;
  background:rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 11px;
}
.hn-app{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;}
.hn-app svg{width:16px;height:16px;stroke:#fff;}
.hn-tel{background:#34C759;} .hn-chat{background:#25D366;} .hn-mail{background:#2F77E8;}
.hn-txt .a{font-size:11.5px;font-weight:700;color:#fff;}
.hn-txt .b{font-size:11.5px;color:rgba(255,255,255,.74);line-height:1.4;margin-top:1px;}
.hn-zeit{font-size:10px;color:rgba(255,255,255,.52);white-space:nowrap;padding-top:2px;}

/* ---------- Stufenleiste statt Saeulen ---------- */
.treppe,.stufen-saeulen{display:none;}
.stufenleiste{position:relative;margin-top:40px;padding-top:56px;}
.stufenleiste::before{
  content:'';position:absolute;top:34px;left:6%;right:6%;height:2px;
  background:linear-gradient(90deg,var(--line) 0%,var(--accent-soft) 70%,var(--accent) 100%);
  transform:rotate(-1.4deg);transform-origin:left;
}
.stufen-punkte{position:absolute;top:0;left:0;right:0;height:56px;
  display:grid;grid-template-columns:repeat(4,1fr);}
.stufen-punkt{display:flex;align-items:center;justify-content:center;position:relative;}
.stufen-punkt i{
  width:16px;height:16px;border-radius:50%;background:#fff;
  border:3px solid var(--line);display:block;position:absolute;top:27px;
  transition:border-color .3s var(--ease),transform .35s var(--ease-spring),box-shadow .3s var(--ease);
}
.stufen-punkt:nth-child(1) i{--y:-2px;transform:translateY(var(--y));}
.stufen-punkt:nth-child(2) i{--y:-11px;transform:translateY(var(--y));}
.stufen-punkt:nth-child(3) i{--y:-20px;transform:translateY(var(--y));border-color:var(--accent-soft);}
.stufen-punkt:nth-child(4) i{--y:-28px;transform:translateY(var(--y));
  border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 0 6px rgba(26,95,168,.14);}
.stufen-text{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.stufe{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s var(--ease);
}
.stufe:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.stufe .nr{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);}
.stufe h4{margin-top:7px;font-size:19px;}
.stufe .zitat{margin-top:10px;font-style:italic;font-size:14.5px;color:var(--navy);line-height:1.55;}
.stufe p{margin-top:9px;font-size:14px;color:var(--text-soft);line-height:1.6;}
.stufenleiste:has(.stufe:nth-child(1):hover) .stufen-punkt:nth-child(1) i,
.stufenleiste:has(.stufe:nth-child(2):hover) .stufen-punkt:nth-child(2) i,
.stufenleiste:has(.stufe:nth-child(3):hover) .stufen-punkt:nth-child(3) i,
.stufenleiste:has(.stufe:nth-child(4):hover) .stufen-punkt:nth-child(4) i{
  border-color:var(--accent);transform:translateY(var(--y,0)) scale(1.35);
}

/* ---------- Kennzahlen als Beweiskarte ---------- */
.kpi-karte{margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(26px,3.5vw,44px);box-shadow:var(--shadow-md);}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.kpi{text-align:center;}
.kpi .ico-box{margin:0 auto 14px;}
.kpi .v{font-size:clamp(30px,3.4vw,42px);color:var(--navy);line-height:1.05;}
.kpi .k{margin-top:8px;font-size:14.5px;color:var(--text-soft);line-height:1.55;}

/* ---------- Bereiche, Karten ---------- */
.bereich{transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .35s var(--ease);}
.bereich:hover{transform:translateY(-6px);}
.bereich .nr{color:var(--lightblue) !important;}
.icon-karte,.sp-module,.sp-who-card,.value-card{
  border-radius:var(--r);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s var(--ease);
}
.icon-karte:hover,.sp-module:hover,.sp-who-card:hover,.value-card:hover{
  transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent;
}
.value-card .num{color:var(--accent) !important;}
.zl-item .n,.tl-item .yr{color:var(--accent) !important;}
.zl-item .n{background:var(--accent);color:#fff !important;}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:36px auto 0;}
.faq details{
  border:1px solid var(--line);border-radius:12px;margin-top:10px;background:#fff;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.faq details[open]{background:var(--bg-soft);border-color:var(--line);box-shadow:var(--shadow-sm);}
.faq summary{
  font-family:var(--sans);font-size:17px;font-weight:700;color:var(--navy);
  padding:20px 56px 20px 22px;position:relative;cursor:pointer;list-style:none;
  line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'';position:absolute;right:20px;top:50%;width:22px;height:22px;
  margin-top:-11px;border-radius:7px;background:var(--accent-tint);
}
.faq summary::before{
  content:'+';position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;
  display:flex;align-items:center;justify-content:center;z-index:2;
  color:var(--accent);font-size:17px;font-weight:700;line-height:1;
  transition:transform .35s var(--ease-spring);
}
.faq details[open] summary::before{content:'+';transform:rotate(135deg);}
.faq details p{padding:0 22px 22px;font-size:16px;line-height:1.7;color:var(--text-soft);max-width:70ch;}

/* ---------- Footer ---------- */
footer .footer-col h4{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
footer .footer-col a{font-size:14.5px;color:rgba(255,255,255,.82);}
footer .footer-col a:hover{color:#fff;}
footer .footer-rechtszeile{font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.6;}

/* ---------- Sticky-CTA ---------- */
.sticky-cta{box-shadow:0 -6px 26px rgba(5,28,44,.16);}
.sticky-cta .tel svg{stroke:var(--accent);}

/* =====================================================================
   BEWEGUNG — sichtbar, aber nie im Weg
   ===================================================================== */
.reveal,.reveal-stagger > *{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .95s var(--ease),filter .85s var(--ease);
  filter:blur(6px);
}
.reveal.show,.reveal-stagger.show > *{opacity:1;transform:none;filter:blur(0);}
.reveal-stagger.show > *:nth-child(1){transition-delay:.04s;}
.reveal-stagger.show > *:nth-child(2){transition-delay:.12s;}
.reveal-stagger.show > *:nth-child(3){transition-delay:.20s;}
.reveal-stagger.show > *:nth-child(4){transition-delay:.28s;}
.reveal-stagger.show > *:nth-child(5){transition-delay:.36s;}
.reveal-stagger.show > *:nth-child(6){transition-delay:.44s;}
.reveal-stagger.show > *:nth-child(7){transition-delay:.52s;}

/* Zeilenweiser Auftritt von Ueberschriften */
.zeile{display:block;overflow:hidden;}
.zeile > span{
  display:block;transform:translateY(105%);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.show .zeile > span,.zeile.show > span{transform:none;}
.zeile:nth-child(2) > span{transition-delay:.08s;}
.zeile:nth-child(3) > span{transition-delay:.16s;}
.zeile:nth-child(4) > span{transition-delay:.24s;}

/* Schwebende Mockup-Karten */
@keyframes schweben{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes schweben2{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
.mk-haupt{animation:schweben 7s ease-in-out infinite;}
.mk-neben.mk-o{animation:schweben2 6s ease-in-out infinite .6s;}
.mk-neben.mk-u{animation:schweben 8s ease-in-out infinite 1.2s;}
.handy{animation:schweben 9s ease-in-out infinite;}

/* Balken in den Mockups wachsen beim Sichtbarwerden */
.mk-balken i{transform:scaleX(0);transition:transform 1.2s var(--ease);}
.show .mk-balken i,.mk.show .mk-balken i{transform:scaleX(1);}
.mk-balken i:nth-of-type(1){transition-delay:.15s;}

/* Leichter Parallax im Hero */
.parallax{will-change:transform;}

/* Karten-Glanz, der dem Zeiger folgt */
.glanz{position:relative;overflow:hidden;}
.glanz::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
    rgba(26,95,168,.10),transparent 60%);
  transition:opacity .4s var(--ease);
}
.glanz:hover::before{opacity:1;}
.sp-dark .glanz::before,.bereich.glanz::before{
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
    rgba(133,183,235,.16),transparent 60%);
}

/* Zaehlende Kennzahlen: Platz reservieren, damit nichts springt */
.zaehler{font-variant-numeric:lining-nums tabular-nums;}

/* Trennlinie, die beim Scrollen aufzieht */
.linie-auf{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease);}
.linie-auf.show{transform:scaleX(1);}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-stagger > *,.reveal.show,.reveal-stagger.show > *{
    opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;
  }
  .zeile > span{transform:none !important;transition:none !important;}
  .mk-haupt,.mk-neben,.handy{animation:none !important;}
  .mk-balken i{transform:scaleX(1) !important;transition:none !important;}
  .linie-auf{transform:scaleX(1) !important;}
  *{scroll-behavior:auto !important;}
}

/* =====================================================================
   MOBIL
   ===================================================================== */
@media(max-width:1023px){
  .sp-hero-split{grid-template-columns:1fr;gap:34px;}
  .hero-grafik{margin:0 auto;max-width:460px;}
  .kpi-row{grid-template-columns:1fr;gap:30px;}
  .stufen-text{grid-template-columns:1fr 1fr;}
  .stufenleiste{padding-top:0;}
  .stufenleiste::before,.stufen-punkte{display:none;}
  .mega-innen{grid-template-columns:1fr;}
}
@media(max-width:720px){
  section{padding:68px 0;}
  .container{padding:0 18px;}
  body{font-size:16.5px;}
  .sp-hero .sp-lead{font-size:17.5px;}
  .stufen-text{grid-template-columns:1fr;}
  .mk{aspect-ratio:400/400;font-size:12px;}
  .mk-haupt{width:86%;}
  .mk-neben{width:56%;}
  .handy{width:250px;}
  .faq summary{font-size:16px;padding:17px 50px 17px 18px;}
  .btn{width:100%;justify-content:center;padding:16px 22px;}
  .kpi-karte{padding:24px 18px;}
}
@media(min-width:1600px){
  .container{max-width:1280px;}
}

/* ---------- Praxis-Kacheln (Hero Ueber uns) ---------- */
.praxis-kacheln{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.pk{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;
  box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pk:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.pk-gross{font-family:var(--sans);font-size:23px;font-weight:700;color:var(--navy);
  line-height:1.15;font-variant-numeric:lining-nums tabular-nums;}
.pk-klein{margin-top:8px;font-size:13.5px;color:var(--text-soft);line-height:1.5;}
@media(max-width:720px){.praxis-kacheln{gap:12px;}.pk{padding:18px 15px;}.pk-gross{font-size:20px;}}

/* ---------- Haken-Listen in Akzentblau ---------- */
.sp-checklist li{font-size:16.5px;font-weight:400;line-height:1.6;color:var(--text);gap:13px;}
.sp-checklist li::before{
  background-color:var(--accent-tint);box-shadow:none;width:24px;height:24px;
  border-radius:7px;margin-top:2px;background-position:center;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A5FA8' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:15px;
}
.sp-checklist.on-dark li{color:rgba(255,255,255,.86);}
.sp-checklist.on-dark li::before{
  background-color:rgba(133,183,235,.16);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385B7EB' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- Hero-Verhaeltnisse ---------- */
.sp-hero{padding:clamp(52px,6vw,84px) 0 clamp(64px,7vw,96px);}
.sp-hero h1{max-width:none;font-size:clamp(32px,3.7vw,47px);}
.sp-hero-split{grid-template-columns:6.6fr 5.4fr;align-items:start;}
.sp-hero-split > div:last-child{position:sticky;top:110px;}
.hero-grafik{margin-top:6px;}
@media(max-width:1023px){
  .sp-hero-split > div:last-child{position:static;}
}
.bg-tint{background:var(--bg-soft);}
.sp-dark{background:var(--navy);}

/* ---------- Zielgruppenzeile unter der Subline ---------- */
.hero-zielgruppe{
  margin-top:14px;font-size:13.5px;color:var(--text-soft);
  display:inline-flex;align-items:center;gap:8px;
}
.hero-zielgruppe::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 6px;
}
/* Produktseiten-H1 kleiner, damit sie hoechstens drei Zeilen braucht */
.sp-hero h1{font-size:clamp(30px,3.2vw,44px);}
body.startseite .sp-hero h1{font-size:clamp(32px,3.7vw,48px);}

/* ---------- „Für wen ist das hier?“ ---------- */
.sp-who-card p b{font-family:var(--sans);font-weight:700;color:var(--navy);}
/* ---------- Nummernkreise im Vorgehen ---------- */
.zl-item .n{
  font-family:var(--sans) !important;background:var(--accent);color:#fff !important;
  font-weight:700;
}
.zeitleiste .zl-item::after{background:var(--line);}

/* ---------- Teamfotos: natuerliche Farben, ruhiger Rahmen ---------- */
.ldr-photo img{
  filter:none !important;transform:none !important;object-position:50% 20%;
  transition:transform 1s var(--ease);
}
.ldr-card:hover .ldr-photo img{filter:none !important;transform:scale(1.04) !important;}
.ldr-veil{
  background:linear-gradient(180deg,rgba(5,28,44,0) 55%,rgba(5,28,44,.28) 100%) !important;
}
.ldr-frame{display:none !important;}
.ldr-photo{border-radius:var(--r) var(--r) 0 0;background:var(--bg-soft);}
.ldr-card{border-radius:var(--r);box-shadow:var(--shadow-sm);}
.ldr-card:hover{box-shadow:var(--shadow-lg);}
.ldr-name{font-family:var(--serif);font-size:22px;}
.ldr-role{font-family:var(--sans);font-size:14px;color:var(--text-soft);margin-top:3px;}
.ldr-loc{
  display:inline-flex;margin-top:10px;padding:5px 11px;border-radius:99px;
  background:var(--accent-tint);color:var(--accent);font-size:12.5px;font-weight:700;
}
.ldr-kw{background:rgba(5,28,44,.7) !important;}
.pp-portrait img{filter:none !important;}
.pp-portrait .ring{border-color:var(--accent-tint) !important;}

/* ---------- Portraits: gleicher ruhiger Hintergrund fuer beide ---------- */
.ldr-photo{
  background:linear-gradient(170deg,#F4F6F8 0%,#E4E9EE 100%) !important;
  border-bottom:1px solid var(--line);
}
.ldr-photo img{object-fit:cover !important;object-position:50% 50% !important;}
.ldr-veil{display:none !important;}
.pp-portrait{aspect-ratio:4/5 !important;background:linear-gradient(170deg,#F4F6F8 0%,#E4E9EE 100%);
  border-radius:var(--r);overflow:hidden;}
.pp-portrait img{object-fit:cover !important;object-position:50% 50% !important;
  width:100% !important;height:100% !important;}
.pp-portrait .ring{display:none !important;}

/* ---------- 404 ---------- */
.fehler{max-width:640px;}
.fehler-aktionen{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.fehler-liste{
  margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
  max-width:820px;border-top:1px solid var(--line);padding-top:24px;
}
@media(max-width:720px){.fehler-liste{grid-template-columns:1fr;}}
.faq details[open] summary{color:var(--navy);}
.faq details[open] summary::after{background:var(--accent);}
.faq details[open] summary::before{color:#fff;}
.sp-hero .sp-lead{margin-left:0;margin-right:0;}
.sp-hero-split .eyebrow,.fehler .eyebrow{justify-content:flex-start;}

/* =====================================================================
   MOBIL — steht bewusst ganz am Ende, damit nichts mehr dazwischenfunkt
   ===================================================================== */
@media(max-width:1023px){
  .sp-hero-split{grid-template-columns:1fr !important;gap:34px;align-items:start;}
  .sp-hero-split > div:last-child{position:static !important;}
  .hero-grafik{margin:0 auto !important;max-width:520px;}
  .praxis-kacheln{max-width:520px;margin:0 auto;}
}
@media(max-width:720px){
  .sp-hero h1{font-size:clamp(27px,7.4vw,34px);hyphens:auto;}
  .sp-hero .eyebrow{font-size:11px;letter-spacing:.07em;}
  .mk{aspect-ratio:1/1;font-size:11px;}
  .mk-karte{padding:12px;border-radius:12px;}
  .mk-haupt{position:relative !important;top:auto !important;left:auto !important;
    width:100% !important;}
  .mk-neben{position:relative !important;right:auto !important;left:auto !important;
    bottom:auto !important;top:auto !important;width:100% !important;margin-top:10px;}
  .mk{aspect-ratio:auto;}
  .mk-haupt,.mk-neben.mk-o,.mk-neben.mk-u{animation:none;}
  .hero-grafik::before{display:none;}
  .mk-spalten{grid-template-columns:1fr 1fr;}
  .mk-zahl{font-size:22px;}
  .kpi-row{grid-template-columns:1fr !important;}
  .stufen-text{grid-template-columns:1fr !important;}
  .mega-cap-list{grid-template-columns:1fr !important;}
}

/* ---------- Handy-Grafik: Feinschliff ---------- */
.hn-txt{display:block;min-width:0;}
.hn-txt .a,.hn-txt .b{display:block;}
.hn-txt .a{margin-bottom:2px;}
.hn{align-items:center;}
@keyframes handySchweben{
  0%,100%{transform:rotate(-4deg) translateY(0);}
  50%{transform:rotate(-4deg) translateY(-8px);}
}
.handy{animation:handySchweben 9s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){
  .handy{animation:none !important;transform:rotate(-4deg);}
}
.sp-module .ico-box{margin-bottom:16px;}
.bereich-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.bereich-kopf .ico-box{width:40px;height:40px;flex:0 0 40px;}
.bereich-kopf .ico-box svg{width:20px;height:20px;}

/* =====================================================================
   VOLLBILD-MENUE hinter dem Burger — Handy und Desktop
   ===================================================================== */
.mobile-toggle{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;border:1px solid var(--line);
  background:#fff;cursor:pointer;position:relative;z-index:1002;flex:0 0 46px;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.mobile-toggle:hover{border-color:var(--accent);background:var(--accent-tint);}
.mobile-toggle:active{transform:scale(.94);}
.mt-bars{position:relative;display:block;width:19px;height:13px;}
.mt-bars i{
  position:absolute;left:0;height:2px;border-radius:2px;background:var(--navy);
  transition:transform .42s var(--ease-spring),opacity .2s ease,width .42s var(--ease),
             background .3s ease;
}
.mt-bars i:nth-child(1){top:0;width:100%;}
.mt-bars i:nth-child(2){top:5.5px;width:72%;}
.mt-bars i:nth-child(3){top:11px;width:100%;}
.mobile-toggle:hover .mt-bars i:nth-child(2){width:100%;}
.mobile-toggle[aria-expanded="true"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);}
.mobile-toggle[aria-expanded="true"] .mt-bars i{background:#fff;}
.mobile-toggle[aria-expanded="true"] .mt-bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.mobile-toggle[aria-expanded="true"] .mt-bars i:nth-child(2){opacity:0;width:0;}
.mobile-toggle[aria-expanded="true"] .mt-bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

html.menue-offen{overflow:hidden;}
html.menue-offen .site-header{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;}
html.menue-offen .logo-img{filter:brightness(0) invert(1);}
html.menue-offen .nav-main,html.menue-offen .nav-tel,html.menue-offen .nav-cta{
  opacity:0;pointer-events:none;transition:opacity .2s ease;}

.ov{position:fixed;inset:0;z-index:995;}
.ov[hidden]{display:none;}
.ov-schleier{
  position:absolute;inset:0;background:rgba(3,14,24,.5);
  opacity:0;transition:opacity .4s var(--ease);
}
.ov-blatt{
  position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  background:
    radial-gradient(900px 620px at 88% -8%, rgba(26,95,168,.38), transparent 62%),
    radial-gradient(700px 520px at 6% 105%, rgba(133,183,235,.16), transparent 60%),
    linear-gradient(170deg,#051C2C 0%,#07233A 62%,#051C2C 100%);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s cubic-bezier(.76,0,.24,1);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:110px 0 32px;
}
.ov-blatt::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
}
.ov.auf .ov-schleier{opacity:1;}
.ov.auf .ov-blatt{clip-path:inset(0 0 0 0);}

.ov-innen{
  position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(32px,6vw,90px);align-items:start;padding-top:clamp(8px,3vw,36px);
}
.ov-kicker{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(133,183,235,.85);
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px;
}
.ov-liste{list-style:none;margin:0;padding:0;}
.ov-zeile{overflow:hidden;}
.ov-zeile > a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:18px;
  padding:clamp(10px,1.4vw,17px) 0;border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;text-decoration:none;
  transform:translateY(105%);opacity:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1) calc(.14s + var(--i) * .07s),
             opacity .5s ease calc(.14s + var(--i) * .07s),
             padding-left .35s var(--ease),color .3s var(--ease);
}
.ov.auf .ov-zeile > a{transform:none;opacity:1;}
.ov-nr{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:rgba(133,183,235,.7);transition:color .3s var(--ease);
}
.ov-wort{
  font-family:var(--serif);font-weight:600;line-height:1.05;letter-spacing:-.015em;
  font-size:clamp(30px,4.6vw,58px);
}
.ov-pfeil{
  width:26px;height:26px;stroke:var(--lightblue);align-self:center;
  opacity:0;transform:translateX(-12px);
  transition:opacity .35s var(--ease),transform .4s var(--ease);
}
.ov-zeile > a:hover{padding-left:16px;color:var(--lightblue);}
.ov-zeile > a:hover .ov-pfeil{opacity:1;transform:none;}
.ov-zeile > a:hover .ov-nr{color:var(--lightblue);}
.ov-zeile > a.aktiv .ov-wort{color:var(--lightblue);}

.ov-loesungen{display:grid;gap:2px;}
.ov-loesung{
  display:grid;grid-template-columns:38px 1fr;gap:13px;align-items:center;
  padding:11px 12px;border-radius:11px;color:#fff;text-decoration:none;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease calc(.3s + var(--i) * .05s),
             transform .6s var(--ease) calc(.3s + var(--i) * .05s),
             background .25s var(--ease);
}
.ov.auf .ov-loesung{opacity:1;transform:none;}
.ov-loesung:hover{background:rgba(255,255,255,.07);}
.ov-loesung .mi{
  width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),transform .35s var(--ease-spring);
}
.ov-loesung:hover .mi{background:rgba(133,183,235,.2);transform:translateY(-2px);}
.ov-loesung .mi svg{width:19px;height:19px;stroke:var(--lightblue);}
.ov-loesung .t{display:block;font-size:15px;font-weight:700;line-height:1.3;}
.ov-loesung .d{display:block;font-size:12.5px;color:rgba(255,255,255,.6);
  line-height:1.45;margin-top:2px;}

.ov-fuss{
  position:relative;z-index:2;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding-top:24px;margin-top:34px;border-top:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease .5s,transform .6s var(--ease) .5s;
}
.ov.auf .ov-fuss{opacity:1;transform:none;}
.ov-kontakt{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.78);
  font-size:15px;text-decoration:none;transition:color .25s var(--ease);}
.ov-kontakt svg{width:17px;height:17px;stroke:var(--lightblue);}
.ov-kontakt:hover{color:#fff;}
.ov-cta{margin-left:auto;}

@media(max-width:860px){
  .ov-blatt{padding:92px 0 28px;}
  .ov-innen{grid-template-columns:1fr;gap:30px;}
  .ov-wort{font-size:clamp(27px,8.4vw,40px);}
  .ov-pfeil{width:20px;height:20px;}
  .ov-loesung .d{display:none;}
  .ov-loesung{padding:9px 10px;}
  .ov-fuss{margin-top:26px;gap:14px;}
  .ov-cta{margin-left:0;width:100%;text-align:center;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  .ov-blatt{transition:none;clip-path:none;}
  .ov-zeile > a,.ov-loesung,.ov-fuss{transition:none !important;
    transform:none !important;opacity:1 !important;}
  .ov-schleier{transition:none;}
}

/* Die alte mobile Klapp-Navigation entfaellt — es gibt nur noch das
   Vollbild-Menue. Die Menuepunkte in der Kopfzeile sind auf kleinen
   Bildschirmen schlicht ausgeblendet. */
@media(max-width:1023px){
  .site-header .nav-main{display:none !important;}
}
.nav-cta-mobile{display:none !important;}
html.menue-offen .site-header{z-index:1000;}

/* Auf mittleren Breiten bleibt der Aktionsknopf sichtbar, nur die
   Telefonnummer weicht. Erst auf dem Handy bleibt Logo plus Burger. */
@media(max-width:1023px){
  .site-header .nav-right .nav-cta{display:inline-flex;}
}
@media(max-width:700px){
  .site-header .nav-right .nav-cta{display:none;}
}
@media(max-width:1023px) and (min-width:701px){
  .site-header .nav-right .nav-cta{padding:11px 17px;font-size:14px;}
}

/* =====================================================================
   PERSONENKARTEN — kleiner, dafuer lebendiger
   ===================================================================== */
.ldr-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:24px;max-width:640px;margin-left:auto;margin-right:auto;
  perspective:1100px;
}
.ldr-card{
  position:relative;border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateY(var(--ty,0px)) scale(var(--sc,1));
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease);
  will-change:transform;
}
.ldr-card:hover{--ty:-8px;--sc:1.015;box-shadow:0 26px 60px rgba(5,28,44,.20);
  border-color:transparent;}
.ldr-card::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:16px;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(26,95,168,.16),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease);
}
.ldr-card:hover::after{opacity:1;}
/* Glanzstreifen, der einmal ueber die Karte wischt */
.ldr-card::before{
  content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .9s var(--ease);
}
.ldr-card:hover::before{transform:translateX(130%);}

.ldr-photo{
  aspect-ratio:4/5 !important;overflow:hidden;position:relative;
  border-radius:16px 16px 0 0;
}
.ldr-photo img{
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
  transform:scale(1) translateZ(0) !important;
}
.ldr-card:hover .ldr-photo img{transform:scale(1.07) !important;}
/* Blaue Lasur, die beim Zeigen weggeht */
.ldr-photo::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,28,44,0) 60%,rgba(5,28,44,.22) 100%);
  opacity:1;transition:opacity .5s var(--ease);
}
.ldr-card:hover .ldr-photo::after{opacity:.35;}

.ldr-body{position:relative;z-index:6;padding:18px 18px 20px;transform:translateZ(30px);}
.ldr-idx{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--accent) !important;}
.ldr-name{font-family:var(--serif);font-size:19px;margin-top:5px;position:relative;
  display:inline-block;}
.ldr-name::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.ldr-card:hover .ldr-name::after{transform:scaleX(1);}
.ldr-role{font-family:var(--sans);font-size:13px;color:var(--text-soft);margin-top:6px;}
.ldr-loc{
  display:inline-flex;margin-top:9px;padding:4px 10px;border-radius:99px;
  background:var(--accent-tint);color:var(--accent);font-size:11.5px;font-weight:700;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.ldr-card:hover .ldr-loc{background:var(--accent);color:#fff;}
.ldr-open{
  display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--accent);
}
.ldr-open svg{width:15px;height:15px;transition:transform .4s var(--ease-spring);}
.ldr-card:hover .ldr-open svg{transform:translateX(5px);}
.ldr-kw{display:none !important;}
.ldr-arrow{
  position:absolute;right:12px;top:12px;z-index:6;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  opacity:0;transform:translateY(-6px) scale(.85);
  transition:opacity .35s var(--ease),transform .45s var(--ease-spring);
  box-shadow:var(--shadow-sm);
}
.ldr-card:hover .ldr-arrow{opacity:1;transform:none;}

@media(max-width:720px){
  .ldr-grid{grid-template-columns:1fr !important;max-width:340px;}
  .ldr-card{--sc:1;}
}
@media(prefers-reduced-motion:reduce){
  .ldr-card,.ldr-photo img,.ldr-card::before,.ldr-card::after,
  .ldr-name::after,.ldr-open svg,.ldr-arrow{transition:none !important;}
  .ldr-card{transform:none !important;}
}
.ldr-loc{text-transform:none !important;letter-spacing:0 !important;}
.ldr-open .sr-only{display:none;}
/* In der Flex-Spalte verhindern die auto-Seitenabstaende des Containers
   das Strecken — deshalb hier ausdruecklich volle Breite. */
.ov-blatt > .container{width:100%;}

/* =====================================================================
   v43 — MONTSERRAT ALS HAUSSCHRIFT
   Arial war der letzte altbackene Rest. Montserrat laeuft breiter und
   groesser als Arial, deshalb sind Groessen, Zeilenabstaende und
   Laufweiten hier nachgezogen.
   ===================================================================== */
:root{
  --sans:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
body{font-family:var(--sans);font-size:16.5px;line-height:1.7;letter-spacing:-.005em;}
p,li{letter-spacing:-.003em;}

/* Montserrat wirkt in Versalien sehr breit — Laufweite etwas zuruecknehmen */
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;}
.mk-titel,.ov-kicker,.mega-karte .mk-kicker,footer .footer-col h4,.stufe .nr,
.ldr-idx,.mk-sp .k{letter-spacing:.1em;}

.btn{font-weight:700;font-size:15.5px;letter-spacing:-.005em;padding:17px 30px;}
.nav-main .nav-link{font-size:14.5px;font-weight:600;letter-spacing:-.003em;}
.nav-cta{font-size:14px;font-weight:700;}
.nav-tel{font-size:14px;font-weight:500;}
.sp-hero .sp-lead{font-size:18px;line-height:1.7;}
.sp-head p{font-size:16.5px;line-height:1.75;}
.sp-checklist li{font-size:16px;line-height:1.65;}
.faq summary{font-size:16.5px;font-weight:700;letter-spacing:-.005em;}
.faq details p{font-size:15.5px;line-height:1.8;}
.kpi .k{font-size:13.5px;}
.praxis-item .klein{font-size:13px;}
.mk{font-size:12px;}
.mk-h{font-size:14px;letter-spacing:-.01em;}
.mk-zeile{font-size:11.5px;}
.mk-titel{font-size:10px;}
.ldr-role{font-size:12.5px;}
.ldr-loc{font-size:11px;font-weight:700;}
.ov-loesung .t{font-size:14px;}
.ov-loesung .d{font-size:12px;}
.mega-cap-item .t{font-size:13.5px;}
.mega-cap-item .d{font-size:12px;}
.value-card p,.sp-module p,.bereich p{font-size:14.5px;line-height:1.7;}
.stufe p{font-size:13.5px;}
.stufe .zitat{font-size:14px;}
.tl-item p,.zl-item p{font-size:14.5px;}
.footer-col a{font-size:14px;}
.hn-txt .a,.hn-txt .b{font-size:11px;}

/* =====================================================================
   HANDY ZUM ANFASSEN
   ===================================================================== */
.handy{cursor:default;}
.handy-liste{position:relative;}
.hn{
  width:100%;text-align:left;font-family:var(--sans);cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  transition:transform .42s var(--ease),opacity .32s ease,
             background .25s var(--ease),border-color .25s var(--ease);
}
.hn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.3);}
.hn:active{transform:scale(.97);}
.hn:focus-visible{outline:2px solid var(--lightblue);outline-offset:3px;}
.hn[hidden]{display:none;}
.hn.weg{transform:translateX(118%) rotate(3deg);opacity:0;pointer-events:none;}
.hn.neu{animation:hnRein .5s var(--ease-spring) both;}
@keyframes hnRein{
  from{opacity:0;transform:translateY(-14px) scale(.94);}
  to{opacity:1;transform:none;}
}

.handy-ende{
  position:absolute;left:14px;right:14px;top:132px;z-index:4;
  background:rgba(255,255,255,.12);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18);
  border-radius:18px;padding:22px 18px;text-align:center;
  animation:hnRein .55s var(--ease-spring) both;
}
.handy-ende[hidden]{display:none;}
.he-haken{
  width:44px;height:44px;margin:0 auto 14px;border-radius:50%;
  background:rgba(133,183,235,.22);color:var(--lightblue);
  display:flex;align-items:center;justify-content:center;
}
.he-haken svg{width:22px;height:22px;}
.he-h{font-family:var(--serif);font-size:19px;font-weight:600;color:#fff;line-height:1.25;}
.he-t{font-size:12px;line-height:1.6;color:rgba(255,255,255,.76);margin-top:9px;}
.he-cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  padding:11px 18px;border-radius:9px;background:var(--lightblue);color:var(--navy);
  font-size:12.5px;font-weight:700;text-decoration:none;
  transition:transform .3s var(--ease),background .25s var(--ease);
}
.he-cta svg{width:15px;height:15px;transition:transform .35s var(--ease-spring);}
.he-cta:hover{background:#a6cbf2;transform:translateY(-2px);}
.he-cta:hover svg{transform:translateX(4px);}
.he-neu{
  display:block;margin:12px auto 0;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:3px;
}
.he-neu:hover{color:#fff;}

.handy-hinweis{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:22px;font-size:13.5px;font-weight:600;color:var(--text-soft);
  text-align:center;
}
.hh-tipp{
  position:relative;width:20px;height:20px;flex:0 0 20px;border-radius:50%;
  border:2px solid var(--accent);
}
.hh-tipp::after{
  content:'';position:absolute;inset:-7px;border-radius:50%;
  border:2px solid var(--accent);opacity:0;
  animation:tippPuls 2.2s ease-out infinite;
}
@keyframes tippPuls{
  0%{transform:scale(.6);opacity:.8;}
  70%{transform:scale(1.25);opacity:0;}
  100%{opacity:0;}
}
.handy-wrap.fertig .handy-hinweis{opacity:.45;}
.handy-wrap.fertig .hh-tipp::after{animation:none;}

@media(prefers-reduced-motion:reduce){
  .hn,.hn.neu,.handy-ende{transition:none !important;animation:none !important;}
  .hh-tipp::after{animation:none !important;opacity:0;}
}
/* Beim Zeigen steht das Handy still — sonst trifft man die Meldungen schlecht. */
.handy:hover,.handy:focus-within{animation-play-state:paused;}

/* Das Handy bleibt ruhig stehen — es ist bedienbar, und ein wanderndes
   Ziel trifft niemand gern. Die Bewegung kommt stattdessen vom Licht
   dahinter und von den Meldungen selbst. */
.handy{animation:none !important;transform:rotate(-4deg);}
.handy-wrap{position:relative;}
.handy-wrap::before{
  content:'';position:absolute;left:50%;top:46%;width:min(460px,108%);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(26,95,168,.20) 0%,rgba(26,95,168,0) 68%);
  animation:glimmen 7s ease-in-out infinite;
}
@keyframes glimmen{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85;}
  50%{transform:translate(-50%,-52%) scale(1.09);opacity:1;}
}
.handy{position:relative;z-index:1;}
@media(prefers-reduced-motion:reduce){
  .handy-wrap::before{animation:none;}
}

/* Hinweis gehoert unter das Handy, nicht daneben */
.handy-wrap{flex-direction:column;align-items:center;gap:0;}
.handy-hinweis{margin-top:24px;max-width:300px;line-height:1.5;}

/* Die Pointe passt jetzt in den Bildschirm */
.handy-ende{
  top:auto;bottom:16px;left:13px;right:13px;
  max-height:calc(100% - 128px);overflow:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px 16px;
}
.he-haken{width:38px;height:38px;margin-bottom:11px;}
.he-haken svg{width:19px;height:19px;}
.he-h{font-size:17px;}
.he-t{font-size:11.5px;line-height:1.55;margin-top:8px;}
.he-cta{margin-top:14px;padding:10px 16px;font-size:12px;}
.he-neu{margin-top:10px;}

/* =====================================================================
   v43 — ZWEITE BEWEGUNGSSCHICHT
   Alles reagiert auf Zeiger und Scrollen, bleibt aber leise genug,
   dass man den Text noch lesen kann.
   ===================================================================== */

/* ---- Knoepfe ziehen den Zeiger leicht an ---- */
.btn,.nav-cta,.he-cta{will-change:transform;}
.btn-block{display:inline-block;}

/* ---- Textlinks: Unterstrich wischt durch ---- */
.legal a,.faq details p a,.sp-lead a,.fussnote a,.ov-kontakt,
.footer-col a,.mega-cap-item{position:relative;}
.footer-col a{display:inline-block;transition:transform .3s var(--ease),color .25s var(--ease);}
.footer-col a:hover{transform:translateX(5px);}
.legal a{background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  text-decoration:none;transition:background-size .4s var(--ease),color .25s var(--ease);}
.legal a:hover{background-size:100% 1.5px;}

/* ---- Lichtkegel auf dunklen Flaechen ---- */
.sp-dark,.sp-cta,.ldr-band,footer{position:relative;overflow:hidden;}
.lichtkegel{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(520px circle at var(--lx,50%) var(--ly,50%),
    rgba(133,183,235,.13),transparent 62%);
  transition:opacity .6s var(--ease);
}
.sp-dark:hover .lichtkegel,.sp-cta:hover .lichtkegel,footer:hover .lichtkegel{opacity:1;}
.sp-dark > .container,.sp-cta > .container,footer > .container{position:relative;z-index:1;}

/* ---- Ueberschriften wortweise ---- */
.wort{display:inline-block;overflow:hidden;vertical-align:bottom;}
.wort > span{
  display:inline-block;transform:translateY(102%);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.show .wort > span,.wort.show > span{transform:none;}
.wort:nth-child(1) > span{transition-delay:.02s;}
.wort:nth-child(2) > span{transition-delay:.06s;}
.wort:nth-child(3) > span{transition-delay:.10s;}
.wort:nth-child(4) > span{transition-delay:.14s;}
.wort:nth-child(5) > span{transition-delay:.18s;}
.wort:nth-child(6) > span{transition-delay:.22s;}
.wort:nth-child(7) > span{transition-delay:.26s;}
.wort:nth-child(8) > span{transition-delay:.30s;}
.wort:nth-child(n+9) > span{transition-delay:.34s;}

/* ---- Stufenlinie waechst beim Scrollen ---- */
.stufenleiste::before{transform:rotate(-1.4deg) scaleX(0);transform-origin:left center;
  transition:transform 1.5s cubic-bezier(.16,1,.3,1) .1s;}
.stufenleiste.show::before{transform:rotate(-1.4deg) scaleX(1);}
.stufen-punkt i{opacity:0;transition:opacity .4s ease,border-color .3s var(--ease),
  transform .5s var(--ease-spring),box-shadow .3s var(--ease);}
.stufenleiste.show .stufen-punkt i{opacity:1;}
.stufenleiste.show .stufen-punkt:nth-child(1) i{transition-delay:.35s;}
.stufenleiste.show .stufen-punkt:nth-child(2) i{transition-delay:.6s;}
.stufenleiste.show .stufen-punkt:nth-child(3) i{transition-delay:.85s;}
.stufenleiste.show .stufen-punkt:nth-child(4) i{transition-delay:1.1s;}

/* ---- Hero-Grafik neigt sich mit dem Zeiger ---- */
.hero-grafik,.handy{
  transform-style:preserve-3d;
}
.hero-grafik .mk{
  transform:perspective(1200px) rotateX(var(--hx,0deg)) rotateY(var(--hy,0deg));
  transition:transform .6s var(--ease);
}
.mk-karte{transition:transform .6s var(--ease),box-shadow .5s var(--ease);}
.hero-grafik:hover .mk-haupt{box-shadow:var(--shadow-xl);}

/* ---- Icons drehen beim Zeigen ---- */
.ico-box:hover,.mega-cap-item:hover .mi,.ov-loesung:hover .mi{transform:translateY(-3px) rotate(-5deg);}
.ico-box{transition:transform .45s var(--ease-spring),background .3s var(--ease);}

/* ---- Bereiche: Rand leuchtet auf ---- */
.bereich{position:relative;}
.bereich::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(133,183,235,0);
  transition:box-shadow .45s var(--ease);
}
.bereich:hover::after{box-shadow:inset 0 0 0 1px rgba(133,183,235,.45);}

/* ---- Kennzahlen: Karte hebt sich beim Zeigen ---- */
.kpi{transition:transform .4s var(--ease);}
.kpi:hover{transform:translateY(-4px);}
.kpi:hover .ico-box{background:var(--accent);}
.kpi:hover .ico-box svg{stroke:#fff;}

/* ---- Praxis-Kacheln zaehlen sich hoch ---- */
.praxis-item{transition:transform .4s var(--ease);}
.praxis-item:hover{transform:translateY(-3px);}

/* ---- Zeitleiste: Nummern pulsen beim Erscheinen ---- */
.zl-item .n{transition:transform .5s var(--ease-spring),background .3s var(--ease);}
.zl-item:hover .n{transform:scale(1.12);}

/* ---- Formularfelder ---- */
input,textarea,select{transition:border-color .25s var(--ease),box-shadow .25s var(--ease),
  background .25s var(--ease);}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent) !important;box-shadow:0 0 0 4px rgba(26,95,168,.12);outline:none;}

/* ---- Auswahl ---- */
::selection{background:var(--accent);color:#fff;}

@media(prefers-reduced-motion:reduce){
  .wort > span{transform:none !important;transition:none !important;}
  .stufenleiste::before{transform:rotate(-1.4deg) scaleX(1) !important;transition:none !important;}
  .stufen-punkt i{opacity:1 !important;transition:none !important;}
  .hero-grafik .mk,.mk-karte,.ico-box,.kpi,.praxis-item,.footer-col a{transition:none !important;}
  .lichtkegel{display:none;}
}
/* Montserrat laeuft breiter — die Kennzahl darf nicht umbrechen */
.kpi .v{font-size:clamp(25px,2.7vw,35px);white-space:nowrap;}
@media(max-width:720px){.kpi .v{font-size:30px;}}

/* =====================================================================
   v44 — LADEBILD UND SEITENWECHSEL
   ===================================================================== */
#sp-vorhang{
  position:fixed;inset:0;z-index:1900;display:grid;place-items:center;
  background:
    radial-gradient(760px 520px at 76% 6%, rgba(26,95,168,.40), transparent 62%),
    radial-gradient(620px 460px at 12% 96%, rgba(133,183,235,.14), transparent 60%),
    linear-gradient(168deg,#051C2C 0%,#07233A 60%,#051C2C 100%);
  clip-path:inset(0 0 0 0);
  transition:clip-path .78s cubic-bezier(.76,0,.24,1);
}
#sp-vorhang::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:26px 26px;
}
.vh-innen{position:relative;z-index:2;display:grid;justify-items:center;gap:26px;}
.vh-innen img{
  height:52px;width:auto;filter:brightness(0) invert(1);
  opacity:0;transform:translateY(10px) scale(.97);
}
.vh-linie{
  display:block;width:180px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.16);overflow:hidden;opacity:0;
}
.vh-linie i{
  display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--lightblue),#fff);
  transform:scaleX(0);transform-origin:left;
}
.vh-wort{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(133,183,235,.75);opacity:0;
}

/* Langes Ladebild beim ersten Aufruf */
html.vorhang-intro .vh-innen img{animation:vhLogo .7s var(--ease) .05s both;}
html.vorhang-intro .vh-linie{animation:vhZeigen .4s ease .3s both;}
html.vorhang-intro .vh-linie i{animation:vhLaden 1.25s cubic-bezier(.3,.8,.3,1) .35s both;}
html.vorhang-intro .vh-wort{animation:vhZeigen .5s ease .5s both;}
@keyframes vhLogo{from{opacity:0;transform:translateY(10px) scale(.97);}
  to{opacity:1;transform:none;}}
@keyframes vhZeigen{from{opacity:0;}to{opacity:1;}}
@keyframes vhLaden{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* Kurzer Wisch beim Seitenwechsel */
html.vorhang-kurz .vh-innen img{opacity:1;transform:none;}
html.vorhang-kurz .vh-linie,html.vorhang-kurz .vh-wort{opacity:0;}

/* Zustaende */
html.vorhang-auf #sp-vorhang{clip-path:inset(0 0 100% 0);}
html.vorhang-aus #sp-vorhang{display:none;}
html.vorhang-zu #sp-vorhang{
  clip-path:inset(100% 0 0 0);
  animation:vhZu .44s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes vhZu{from{clip-path:inset(100% 0 0 0);}to{clip-path:inset(0 0 0 0);}}

/* Inhalt faehrt beim Aufziehen leicht mit */
html.vorhang-intro body > main,html.vorhang-kurz body > main{
  opacity:0;transform:translateY(14px);
}
html.vorhang-auf body > main{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease) .18s,transform .8s var(--ease) .18s;
}
html.vorhang-aus body > main{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  #sp-vorhang{display:none !important;}
  html.vorhang-intro body > main,html.vorhang-kurz body > main{
    opacity:1 !important;transform:none !important;}
}
/* Der Cookie-Hinweis wartet, bis der Vorhang weg ist */
html:not(.vorhang-aus) .cc-banner{opacity:0 !important;pointer-events:none !important;}
html:not(.vorhang-aus) #sticky-cta{opacity:0 !important;}
/* Ladelinie fuellt sich, bevor der Vorhang aufgeht */
html.vorhang-intro .vh-linie i{animation-duration:1.0s;}

/* =====================================================================
   v44 — BILDPLAETZE
   Der Platzhalter verschwindet automatisch, sobald die Datei da ist.
   ===================================================================== */
.bildplatz{
  position:relative;margin:0;overflow:hidden;border-radius:18px;
  background:linear-gradient(170deg,#F4F6F8 0%,#E6EBF0 100%);
  border:1px solid var(--line);aspect-ratio:3/2;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.bildplatz.bp-hoch{aspect-ratio:4/5;}
.bildplatz img{
  width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2;
  transition:transform 1.1s var(--ease);
}
.bildplatz:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.bildplatz:hover img{transform:scale(1.05);}
.bildplatz.ohne-bild img{display:none;}
.bp-platz{
  position:absolute;inset:0;z-index:1;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:24px;text-align:center;
}
.bildplatz.ohne-bild .bp-platz{display:flex;}
.bp-platz::before{
  content:'';position:absolute;inset:14px;border:1.5px dashed var(--line);
  border-radius:12px;pointer-events:none;
}
.bp-ikon{
  width:46px;height:46px;border-radius:12px;background:#fff;color:var(--accent);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
}
.bp-ikon svg{width:23px;height:23px;}
.bp-motiv{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--navy);
  line-height:1.4;max-width:24ch;}
.bp-meta{font-size:11.5px;color:var(--text-soft);line-height:1.5;}

.sp-einblicke .einblick-raster{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  margin-top:48px;align-items:start;
}
.sp-einblicke .bildplatz:nth-child(1){margin-top:34px;}
.sp-einblicke .bildplatz:nth-child(3){margin-top:34px;}

/* =====================================================================
   GRUENDERWORT
   ===================================================================== */
.gruender{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4.5vw,64px);
  align-items:center;}
.gruender-bild .bildplatz{max-width:400px;}
.gruender-text h2{margin-top:14px;}
.gruender-text p{margin-top:17px;font-size:17px;line-height:1.8;color:var(--text);}
.gruender-text p:first-of-type{font-size:18.5px;}
.gruender-sig{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);}
.gruender-sig .sig{
  display:block;font-family:var(--serif);font-size:26px;font-weight:600;
  color:var(--navy);transform:rotate(-1.5deg);transform-origin:left;
}
.gruender-sig .sig-rolle{display:block;margin-top:8px;font-size:13.5px;
  color:var(--text-soft);}

/* =====================================================================
   VERSPRECHEN
   ===================================================================== */
.vsp-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  margin-top:48px;}
.vsp-karte{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s var(--ease);
}
.vsp-karte:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent;}
.vsp-karte h3{margin-top:16px;font-size:17px;line-height:1.35;}
.vsp-karte p{margin-top:10px;font-size:14px;line-height:1.7;color:var(--text-soft);}
.nicht-block{
  margin-top:36px;background:var(--navy);border-radius:18px;
  padding:clamp(28px,3.6vw,44px);color:#fff;
}
.nicht-block h3{color:#fff;font-size:21px;}
.nichtliste{list-style:none;margin:20px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:12px 32px;}
.nichtliste li{
  display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6;
  color:rgba(255,255,255,.84);
}
.nichtliste li::before{
  content:'';flex:0 0 20px;width:20px;height:20px;border-radius:6px;margin-top:2px;
  background:rgba(194,65,58,.22) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e08a85' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* =====================================================================
   KURZ-CHECK
   ===================================================================== */
.kc-box{
  max-width:820px;margin:44px auto 0;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:clamp(24px,3.2vw,40px);box-shadow:var(--shadow-md);
}
.kc-frage{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line-weich);}
.kc-frage:first-child{padding-top:0;}
.kc-text{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.55;
  font-weight:500;color:var(--navy);}
.kc-nr{
  flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:var(--accent-tint);
  color:var(--accent);font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.kc-wahl{display:flex;gap:8px;}
.kc-wahl button{
  min-width:74px;padding:11px 16px;border-radius:9px;border:1.5px solid var(--line);
  background:#fff;font-family:var(--sans);font-size:14px;font-weight:700;
  color:var(--text-soft);cursor:pointer;
  transition:all .25s var(--ease);
}
.kc-wahl button:hover{border-color:var(--accent);color:var(--accent);}
.kc-wahl button.aktiv{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 6px 16px rgba(26,95,168,.26);}
.kc-ergebnis{
  display:none;margin-top:26px;padding-top:26px;border-top:2px solid var(--accent-tint);
  animation:hnRein .5s var(--ease-spring) both;
}
.kc-ergebnis.an{display:block;}
.kc-score{
  display:inline-block;padding:5px 12px;border-radius:99px;background:var(--accent);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;
}
.kc-ergebnis h3{margin-top:14px;font-size:22px;}
.kc-ergebnis > p{margin-top:11px;font-size:16px;line-height:1.75;color:var(--text-soft);}
.kc-cta{margin-top:22px;}

/* =====================================================================
   MARGEN-RECHNER
   ===================================================================== */
.rechner{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-md);background:#fff;
}
.rechner-eingabe{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;justify-content:center;}
.re-feld + .re-feld{margin-top:26px;}
.re-feld label{display:block;font-size:14px;font-weight:600;color:var(--navy);
  line-height:1.45;}
.re-zeile{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  margin-top:12px;}
.re-zeile output{
  font-family:var(--sans);font-size:17px;font-weight:700;color:var(--accent);
  font-variant-numeric:lining-nums tabular-nums;min-width:86px;text-align:right;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent) var(--f,50%),var(--line) var(--f,50%));
  outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;
  border:3px solid var(--accent);box-shadow:0 3px 10px rgba(5,28,44,.2);cursor:grab;
  transition:transform .2s var(--ease-spring);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--accent);
  box-shadow:0 3px 10px rgba(5,28,44,.2);cursor:grab;
}
.re-hinweis{margin-top:24px;font-size:12.5px;color:var(--text-soft);line-height:1.6;}
.rechner-ausgabe{
  padding:clamp(24px,3vw,38px);color:#fff;
  background:radial-gradient(520px 340px at 88% 0%, rgba(26,95,168,.42), transparent 62%),
             linear-gradient(170deg,#051C2C,#0B2A42);
}
.ra-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(133,183,235,.85);}
.ra-satz{display:block;margin-top:8px;font-family:var(--sans);font-size:34px;
  font-weight:700;color:#fff;font-variant-numeric:lining-nums tabular-nums;}
.ra-marge{margin-top:24px;}
.ra-wert{display:block;margin-top:8px;font-family:var(--sans);font-size:30px;
  font-weight:700;font-variant-numeric:lining-nums tabular-nums;}
.ra-balken{margin-top:12px;height:8px;border-radius:99px;background:rgba(255,255,255,.12);
  overflow:hidden;}
.ra-balken i{display:block;height:100%;border-radius:99px;width:20%;
  background:linear-gradient(90deg,var(--lightblue),#fff);
  transition:width .5s var(--ease),background .4s var(--ease);}
.ra-urteil{margin-top:16px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.86);
  min-height:3.3em;}
.ra-hebel{margin-top:24px;padding:18px 20px;border-radius:13px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);}
.ra-hebel p{font-size:13px;color:rgba(255,255,255,.76);}
.ra-hebel b{color:#fff;}
.ra-hebel-wert{font-family:var(--sans) !important;font-size:24px !important;font-weight:700;
  color:var(--lightblue) !important;margin-top:6px;
  font-variant-numeric:lining-nums tabular-nums;}
.ra-klein{margin-top:8px;font-size:11.5px !important;line-height:1.55;
  color:rgba(255,255,255,.56) !important;}
.ra-cta{margin-top:24px;}
.ra-cta .btn{width:100%;justify-content:center;}
.marge-gut i{background:linear-gradient(90deg,#4ade9b,#fff) !important;}
.marge-mittel i{background:linear-gradient(90deg,var(--lightblue),#fff) !important;}
.marge-schlecht i{background:linear-gradient(90deg,#e08a85,#f6c6c3) !important;}

/* =====================================================================
   VORHER / NACHHER
   Beide Seiten liegen uebereinander und nutzen dieselbe volle Breite.
   Die linke Haelfte gehoert dem Zustand ohne Struktur, die rechte dem
   mit Struktur. Der Regler deckt die rechte Seite mehr oder weniger auf.
   ===================================================================== */
.vn{
  position:relative;margin-top:48px;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-md);user-select:none;
}
.vn-seite{padding:clamp(26px,3.4vw,44px);}
.vn-vorher{background:#fff;padding-right:calc(50% + 22px);}
.vn-nachher{
  position:absolute;top:0;bottom:0;right:0;left:auto;overflow:hidden;width:50%;
  background:linear-gradient(170deg,#051C2C,#0B2A42);padding:0;
}
.vn-innen{
  position:absolute;top:0;right:0;height:100%;
  padding:clamp(26px,3.4vw,44px) clamp(26px,3.4vw,44px) clamp(26px,3.4vw,44px)
          calc(50% + 22px);
}
.vn-titel{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-soft);margin-bottom:18px;height:17px;
}
.vn-nachher .vn-titel{color:var(--lightblue);}
.vn-zeile{
  display:grid;grid-template-columns:126px 1fr;gap:14px;align-items:center;
  min-height:62px;padding:8px 0;border-top:1px solid var(--line);
}
.vn-nachher .vn-zeile{border-top-color:rgba(255,255,255,.14);}
.vn-k{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-soft);line-height:1.35;}
.vn-nachher .vn-k{color:rgba(133,183,235,.8);}
.vn-t{font-size:15.5px;line-height:1.5;color:var(--text);}
.vn-nachher .vn-t{color:#fff;}
.vn-regler{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  z-index:5;background:none;
}
.vn-regler::-webkit-slider-thumb{width:64px;height:100%;cursor:ew-resize;}
.vn-griff{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--lightblue);
  z-index:4;pointer-events:none;
}
.vn-griff svg{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;padding:8px;border-radius:50%;
  background:var(--lightblue);color:var(--navy);box-shadow:var(--shadow-md);
}

/* =====================================================================
   STUFEN-AUSWAHL
   ===================================================================== */
.stufe{
  display:block;width:100%;text-align:left;cursor:pointer;font-family:var(--sans);
  border:1px solid var(--line);background:#fff;
}
.stufe .nr,.stufe-h,.zitat,.stufe-d,.stufe-mehr{display:block;}
.stufe-h{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy);
  margin-top:7px;}
.stufe .zitat{margin-top:10px;font-style:italic;font-size:14px;color:var(--navy);
  line-height:1.5;}
.stufe-d{margin-top:9px;font-size:13.5px;color:var(--text-soft);line-height:1.6;}
.stufe-mehr{
  margin-top:14px;font-size:12.5px;font-weight:700;color:var(--accent);
  display:flex !important;align-items:center;gap:7px;opacity:.55;
  transition:opacity .3s var(--ease);
}
.stufe-mehr svg{width:15px;height:15px;transition:transform .35s var(--ease-spring);}
.stufe:hover .stufe-mehr,.stufe.aktiv .stufe-mehr{opacity:1;}
.stufe:hover .stufe-mehr svg{transform:translateX(4px);}
.stufe.aktiv{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,95,168,.12),
  var(--shadow-lg);transform:translateY(-4px);}
.stufe:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.stufe-detail{
  margin-top:26px;border-radius:20px;overflow:hidden;
  background:linear-gradient(170deg,#051C2C,#0B2A42);color:#fff;
}
.sd-innen{padding:clamp(28px,3.6vw,46px);max-width:860px;}
.sd-kicker{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lightblue);}
.stufe-detail h3{margin-top:12px;font-size:25px;color:#fff;}
.stufe-detail > .sd-innen > p{margin-top:13px;font-size:16.5px;line-height:1.75;
  color:rgba(255,255,255,.84);}
.sd-aktionen{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;}
.stufe-detail .btn-sekundaer{border-color:rgba(255,255,255,.5);color:#fff;}
.stufe-detail .btn-sekundaer:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.stufe-detail .btn-mikro{margin-top:14px;color:rgba(255,255,255,.6);}

/* =====================================================================
   MOBIL fuer die neuen Bausteine
   ===================================================================== */
@media(max-width:1023px){
  .sp-einblicke .einblick-raster{grid-template-columns:1fr 1fr;}
  .sp-einblicke .bildplatz:nth-child(3){margin-top:0;}
  .vsp-raster{grid-template-columns:1fr 1fr;}
  .gruender{grid-template-columns:1fr;gap:30px;}
  .gruender-bild .bildplatz{max-width:320px;}
  .rechner{grid-template-columns:1fr;}
  .nichtliste{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .sp-einblicke .einblick-raster{grid-template-columns:1fr;gap:16px;}
  .sp-einblicke .bildplatz:nth-child(1),.sp-einblicke .bildplatz:nth-child(3){margin-top:0;}
  .vsp-raster{grid-template-columns:1fr;}
  .kc-frage{grid-template-columns:1fr;gap:14px;}
  .kc-wahl button{flex:1;}
  .re-zeile{grid-template-columns:1fr;gap:10px;}
  .re-zeile output{text-align:left;}
  .vn{min-height:0;}
  .vn-zeile{grid-template-columns:1fr;gap:4px;padding:12px 0;}
  .vn-t{font-size:14.5px;}
  .vn-nachher{position:relative;width:100% !important;}
  .vn-innen{width:100% !important;}
  .vn-regler,.vn-griff{display:none;}
  .sd-aktionen .btn{width:100%;justify-content:center;}
}
@media(max-width:720px){
  .vn-vorher{padding-right:clamp(26px,3.4vw,44px);}
  .vn-innen{position:relative;padding:clamp(22px,3vw,34px);width:100% !important;height:auto;}
  .vn-zeile{min-height:0;}
}
.bp-breit{aspect-ratio:21/9;max-width:1100px;margin:0 auto;}
@media(max-width:720px){.bp-breit{aspect-ratio:3/2;}}

/* =====================================================================
   v45 — PORTRAITS ALS FREISTELLER
   Die Fotos sind jetzt echte Freisteller ohne Hintergrund. Dadurch
   koennen sie auf hellem wie auf dunklem Grund stehen und wirken nicht
   mehr wie ein Passbild in einem Kasten.
   ===================================================================== */
.ldr-photo{
  aspect-ratio:4/5 !important;position:relative;overflow:hidden;
  border-radius:16px 16px 0 0;border-bottom:none !important;
  background:linear-gradient(168deg,#EEF3F9 0%,#DCE6F1 55%,#CBD9E9 100%) !important;
}
/* Weicher Lichtkreis hinter dem Kopf */
.ldr-photo::before{
  content:'';position:absolute;left:50%;top:30%;width:78%;aspect-ratio:1;z-index:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 68%);
  transition:transform .8s var(--ease);
}
.ldr-card:hover .ldr-photo::before{transform:translate(-50%,-52%) scale(1.08);}
/* Feine Grundlinie, damit die Person nicht schwebt */
.ldr-photo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;
  background:linear-gradient(180deg,rgba(26,95,168,0) 0%,rgba(26,95,168,.10) 100%);
  opacity:1 !important;
}
.ldr-photo img{
  position:relative;z-index:2;
  width:100%;height:100%;object-fit:cover !important;
  object-position:50% 0% !important;
  filter:none !important;transform:none !important;
  transition:transform .9s var(--ease);
}
.ldr-card:hover .ldr-photo img{transform:scale(1.045) !important;}

/* Profilseite: Freisteller auf Navy mit grossem Lichtkreis */
.pp-portrait{
  position:relative;aspect-ratio:4/5 !important;width:100%;max-width:380px;
  margin-left:auto;background:none !important;border-radius:20px;overflow:visible;
}
.pp-portrait::before{
  content:'';position:absolute;left:50%;top:44%;width:112%;aspect-ratio:1;z-index:0;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(133,183,235,.34) 0%,rgba(26,95,168,.16) 42%,
             rgba(5,28,44,0) 70%);
  animation:glimmen 8s ease-in-out infinite;
}
.pp-portrait::after{
  content:'';position:absolute;left:50%;bottom:-2px;width:74%;height:22px;z-index:0;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(5,28,44,.5) 0%,rgba(5,28,44,0) 70%);
}
.pp-portrait img{
  position:relative;z-index:2;width:100%;height:100%;
  object-fit:contain !important;object-position:50% 100% !important;
  filter:drop-shadow(0 26px 40px rgba(3,14,24,.45)) !important;
}
.pp-portrait .ring{display:none !important;}
@media(prefers-reduced-motion:reduce){
  .pp-portrait::before{animation:none;}
}
@media(max-width:860px){
  .pp-portrait{margin:0 auto;max-width:300px;}
}

/* Unsichtbare Bruecke ueber der Klappe: der Spalt zwischen Menuepunkt
   und Menue zaehlt dadurch noch als "drin". */
.site-header .mega::before{
  content:'';position:absolute;left:0;right:0;top:-26px;height:26px;
}
/* Waehrend das Menue offen ist, bleibt der Menuepunkt aktiv markiert */
.site-header .nav-item.open .nav-link::after{transform:scaleX(1);}
/* Der alte runde Rahmen um das Portrait entfaellt — der Freisteller
   braucht keinen Kreis mehr. */
.pp-portrait img{
  border:none !important;border-radius:0 !important;background:none !important;
  box-shadow:none !important;
  filter:drop-shadow(0 26px 44px rgba(3,14,24,.5)) !important;
  transform:none !important;
}
/* Unten weich auslaufen lassen, damit der Freisteller nicht abgeschnitten wirkt */
.pp-portrait img{
  -webkit-mask-image:linear-gradient(180deg,#000 76%,rgba(0,0,0,.35) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 76%,rgba(0,0,0,.35) 92%,transparent 100%);
}
.pp-portrait::after{display:none;}
.pp-portrait{max-width:420px;}

/* =====================================================================
   v46 — Bildbereiche erscheinen erst mit dem echten Foto
   Vorher stand dort ein grauer Kasten mit Formatangabe. Das sah nach
   Baustelle aus. Jetzt ist der Bereich schlicht nicht da, bis die
   Datei im Ordner bilder/ liegt.
   ===================================================================== */
.bildplatz{opacity:0;transition:opacity .6s var(--ease);}
.bildplatz.hat-bild{opacity:1;}
.bildplatz[hidden]{display:none !important;}
.bp-platz{display:none !important;}
[data-bild-huelle][hidden]{display:none !important;}
.gruender.nur-text{grid-template-columns:1fr;max-width:860px;}
.gruender.nur-text .gruender-bild{display:none;}
.legal .rechtsliste{margin:16px 0 0;padding-left:22px;}
.legal .rechtsliste li{font-size:16px;line-height:1.75;margin-top:10px;color:var(--text);}
.legal .rechtsliste li b{color:var(--navy);}
/* Organigramm: Rollen statt erfundener Initialen */
.mk-av svg{width:13px;height:13px;stroke:var(--accent);}
.mk-av.dunkel svg{stroke:#fff;}
.mk-av-gross{width:34px !important;height:34px !important;}
.mk-av-gross svg{width:16px;height:16px;}
.mk-av-klein{width:22px !important;height:22px !important;}
.mk-av-klein svg{width:11px;height:11px;}
.mk-rolle{display:flex;flex-direction:column;align-items:center;gap:4px;}
.mk-rolle-t{font-size:9.5px;font-weight:700;color:var(--text-soft);line-height:1.3;
  text-align:center;letter-spacing:.02em;}
.mk-rolle .mk-chip{margin-top:2px;font-size:9px;padding:3px 7px;}
.gruender.nur-text{margin-left:auto;margin-right:auto;text-align:left;}

/* =====================================================================
   v47 — MOCKUP-ZEILEN, DIE AUF DEN ZEIGER REAGIEREN
   Die Grafiken auf Management Beratung und Advisory & Beirat waren
   statische Zeichnungen. Jetzt sind es Oberflaechen: Zeilen heben
   sich beim Zeigen an, bekommen eine Akzentkante und ihr Chip faerbt
   sich. Die uebrigen Zeilen treten dabei leicht zurueck.
   ===================================================================== */
.mk-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.mk-baum{margin-top:12px;display:grid;gap:2px;}

.mk-reihe{
  position:relative;display:grid;
  grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:7px 9px;border-radius:9px;
  transition:background .25s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease),opacity .25s var(--ease);
}
.mk-reihe.mk-reihe-nr{grid-template-columns:20px 1fr auto;}
.mk-reihe .s{
  width:20px;height:20px;border-radius:6px;background:var(--bg-soft);
  color:var(--text-soft);display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;transition:background .25s var(--ease),color .25s var(--ease);
}
/* Verbindungslinie im Baum: eine Schiene statt vieler Striche */
.mk-ast{
  position:relative;margin-left:18px;padding-left:14px;
  border-left:1px solid var(--line);
}
.mk-ast > *::before{
  content:'';position:absolute;left:0;width:12px;height:1px;background:var(--line);
  margin-top:14px;
}
.mk-ast > .mk-team::before{margin-top:12px;}
.mkr-txt{min-width:0;}
.mkr-t{display:block;font-size:11.5px;font-weight:700;color:var(--navy);line-height:1.3;}
.mkr-u{display:block;font-size:10px;color:var(--text-soft);line-height:1.4;margin-top:1px;}
.mkr-rechts{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.mk-reihe .mk-chip{font-size:9.5px;padding:3px 8px;}
.mk-team{
  position:relative;display:flex;align-items:center;gap:6px;padding:8px 9px;
}
.mk-team .mk-av{margin:0;}
.mk-zeit{
  font-size:9.5px;font-weight:700;color:var(--accent);
  font-variant-numeric:lining-nums tabular-nums;flex:0 0 30px;
}
.mk-sitzfuss{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
}

/* Reaktion beim Zeigen */
@media(hover:hover) and (pointer:fine){
  .mk-baum:hover .mk-reihe{opacity:.55;}
  .mk-baum .mk-reihe:hover{
    opacity:1;background:var(--accent-tint);transform:translateX(3px);
    box-shadow:0 4px 14px rgba(26,95,168,.14);
  }
  .mk-reihe:hover .s{background:var(--accent);color:#fff;}
  .mk-reihe:hover .mkr-t{color:var(--accent);}
  .mk-reihe:hover .mk-av{background:var(--accent);}
  .mk-reihe:hover .mk-av svg{stroke:#fff;}
  .mk-reihe:hover .mk-av.dunkel{background:var(--navy);}
  .mk-reihe::after{pointer-events:none;}
}
.mk-av{transition:background .25s var(--ease);}
.mk-av svg{transition:stroke .25s var(--ease);}
@media(prefers-reduced-motion:reduce){
  .mk-reihe{transition:none !important;}
  .mk-baum:hover .mk-reihe{opacity:1;}
}
/* Beim Zeigen stehen die Karten still — bewegliche Zeilen trifft man schlecht. */
.hero-grafik:hover .mk-karte{animation-play-state:paused;}
/* Etwas mehr Raum, damit sich die beiden Karten nicht ins Gehege kommen */
.mk{aspect-ratio:520/480;}
.mk-neben .mk-liste{gap:7px;}
.mk-neben .mk-li{font-size:11.5px;line-height:1.4;}

/* =====================================================================
   HOVER IM LOESUNGS-MENUE
   Der Eintrag unter dem Zeiger tritt hervor, die anderen treten
   zurueck. Ein Pfeil faehrt von rechts ein, eine Akzentkante links.
   ===================================================================== */
.mega-cap-item{
  overflow:hidden;position:relative;padding-right:30px;
  transition:background .25s var(--ease),transform .3s var(--ease);
}
.mega-cap-item::before{
  content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;
  background:var(--accent);transform:scaleY(0);transform-origin:center;
  transition:transform .35s var(--ease-spring);
}
.mega-pfeil{
  position:absolute;right:11px;top:50%;margin-top:-8px;
  width:16px;height:16px;stroke:var(--accent);
  opacity:0;transform:translateX(-7px);
  transition:opacity .3s var(--ease),transform .38s var(--ease);
}
.mega-cap-item:hover .mega-pfeil{transform:translateX(0);}
@media(hover:hover) and (pointer:fine){
  .mega-cap-list:hover .mega-cap-item{opacity:.5;}
  .mega-cap-list .mega-cap-item:hover{
    opacity:1;background:var(--accent-tint);transform:translateX(3px);
  }
  .mega-cap-item:hover::before{transform:scaleY(1);}
  .mega-cap-item:hover .mega-pfeil{opacity:1;transform:none;}
  .mega-cap-item:hover .t{color:var(--accent);}
  .mega-cap-item:hover .mi{background:var(--accent);}
  .mega-cap-item:hover .mi svg{stroke:#fff;}
  /* Gespraechskarte reagiert mit */
  .mega-karte{transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
  .mega-karte:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
}
.mega-cap-item .mi,.mega-cap-item .mi svg,.mega-cap-item .t{
  transition:background .25s var(--ease),stroke .25s var(--ease),color .25s var(--ease);
}
/* Dasselbe im Vollbild-Menue */
@media(hover:hover) and (pointer:fine){
  .ov-loesungen:hover .ov-loesung{opacity:.5;}
  .ov-loesungen .ov-loesung:hover{opacity:1;}
}
@media(prefers-reduced-motion:reduce){
  .mega-cap-item,.mega-pfeil,.mega-karte{transition:none !important;}
  .mega-cap-list:hover .mega-cap-item,.ov-loesungen:hover .ov-loesung{opacity:1;}
}

/* =====================================================================
   v48 — ENTSCHEIDUNGSMATRIX (Management Beratung)
   ===================================================================== */
.mk-matrix{margin-top:12px;gap:1px;}
.mk-reihe-m{
  grid-template-columns:1fr auto !important;
  border-bottom:1px solid var(--line-weich);border-radius:0;padding:8px 8px;
}
.mk-reihe-m:last-child{border-bottom:none;}
.mk-ol{
  display:inline-block;padding:4px 9px;border-radius:99px;font-size:9.5px;
  font-weight:700;background:#E6F4EC;color:var(--success);white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.mk-ol.du{background:var(--accent-tint);color:var(--accent);}
.mk-reihe-m.mk-chef{background:rgba(26,95,168,.045);}
@media(hover:hover) and (pointer:fine){
  .mk-matrix:hover .mk-reihe-m{opacity:.5;}
  .mk-matrix .mk-reihe-m:hover{
    opacity:1;background:var(--accent-tint);border-radius:9px;
    transform:translateX(3px);box-shadow:0 4px 14px rgba(26,95,168,.14);
  }
}
.mk-kette{display:grid;gap:4px;margin-top:10px;justify-items:start;}
.mk-kglied{
  display:block;width:100%;padding:8px 11px;border-radius:9px;
  background:var(--bg-soft);font-size:11px;font-weight:600;color:var(--text-soft);
  line-height:1.4;
}
.mk-kglied.aktiv{background:var(--accent);color:#fff;}
.mk-kglied.gruen{background:#E6F4EC;color:var(--success);}
.mk-kpfeil{font-size:11px;color:var(--line);line-height:1;padding-left:11px;}

/* =====================================================================
   v48 — EIN HOVER FUER ALLE KARTEN
   Der wandernde blaue Lichtfleck war der "komische" Effekt. Er ist
   weg. Stattdessen ueberall dasselbe: die Karte hebt sich leicht,
   oben waechst eine Akzentlinie ein, das Symbol fuellt sich.
   ===================================================================== */
.glanz::before{display:none !important;}

.sp-module,.sp-who-card,.value-card,.icon-karte,.vsp-karte,.stufe,.pk,.kpi,
.mega-karte,.bereich{
  position:relative;
}
.sp-module::before,.sp-who-card::before,.value-card::before,.vsp-karte::before,
.stufe::before,.pk::before{
  content:'';position:absolute;left:14px;right:14px;top:0;height:2px;
  border-radius:0 0 2px 2px;background:var(--accent);
  transform:scaleX(0);transform-origin:center;
  transition:transform .45s var(--ease);
}
.sp-module:hover::before,.sp-who-card:hover::before,.value-card:hover::before,
.vsp-karte:hover::before,.stufe:hover::before,.pk:hover::before{transform:scaleX(1);}

.sp-module,.sp-who-card,.value-card,.vsp-karte,.stufe,.pk{
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
             border-color .3s var(--ease),background .3s var(--ease);
}
.sp-module:hover,.sp-who-card:hover,.value-card:hover,.vsp-karte:hover,
.stufe:hover,.pk:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(5,28,44,.10);
  border-color:var(--accent-tint);background:#fff;
}
.sp-module:hover .ico-box,.vsp-karte:hover .ico-box,.kpi:hover .ico-box{
  background:var(--accent);transform:translateY(-2px) rotate(-4deg);
}
.sp-module:hover .ico-box svg,.vsp-karte:hover .ico-box svg,.kpi:hover .ico-box svg{
  stroke:#fff;
}
.sp-module:hover h4,.vsp-karte:hover h3,.value-card:hover h4{color:var(--accent);}
.sp-who-card:hover p b{color:var(--accent);}
.sp-module h4,.vsp-karte h3,.value-card h4,.sp-who-card p b{
  transition:color .25s var(--ease);
}
/* Die dunklen Bereich-Karten bekommen ihre eigene, ruhige Variante */
.bereich::after{box-shadow:inset 0 0 0 1px rgba(133,183,235,0);}
.bereich:hover{background:rgba(255,255,255,.05);transform:translateY(-5px);}
.bereich:hover::after{box-shadow:inset 0 0 0 1px rgba(133,183,235,.4);}
@media(prefers-reduced-motion:reduce){
  .sp-module,.sp-who-card,.value-card,.vsp-karte,.stufe,.pk,.bereich{
    transition:none !important;transform:none !important;}
  .sp-module::before,.sp-who-card::before,.value-card::before,.vsp-karte::before,
  .stufe::before,.pk::before{display:none;}
}

/* Derselbe Hover im Vollbild-Menue wie im Klappmenue */
.ov-loesung{position:relative;overflow:hidden;padding-right:32px;}
.ov-loesung::before{
  content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:var(--lightblue);transform:scaleY(0);
  transition:transform .35s var(--ease-spring);
}
.ov-loesung .mega-pfeil{
  position:absolute;right:12px;top:50%;margin-top:-8px;width:16px;height:16px;
  stroke:var(--lightblue);opacity:0;transform:translateX(-7px);
  transition:opacity .3s var(--ease),transform .38s var(--ease);
}
@media(hover:hover) and (pointer:fine){
  .ov-loesung:hover::before{transform:scaleY(1);}
  .ov-loesung:hover .mega-pfeil{opacity:1;transform:none;}
  .ov-loesung:hover .t{color:var(--lightblue);}
}
.ov-loesung .t{transition:color .25s var(--ease);}

/* Fusszeile: Loesungen bekommen denselben Pfeil */
footer .footer-col a{position:relative;padding-right:14px;}
footer .footer-col a::after{
  content:'→';position:absolute;right:0;top:50%;transform:translate(-5px,-50%);
  font-size:12px;color:var(--lightblue);opacity:0;
  transition:opacity .25s var(--ease),transform .3s var(--ease);
}
@media(hover:hover) and (pointer:fine){
  footer .footer-col a:hover::after{opacity:1;transform:translate(0,-50%);}
}
@media(prefers-reduced-motion:reduce){
  .ov-loesung::before,.ov-loesung .mega-pfeil,footer .footer-col a::after{
    transition:none !important;}
}
.mk-reihe-m{padding:7px 8px;}
.mk-kette{gap:3px;}
.mk-kglied{padding:7px 10px;font-size:10.5px;}
/* Eskalationskette ohne Pfeilzeichen, dafuer mit feiner Schiene */
.mk-kette{position:relative;gap:6px;margin-top:11px;padding-left:12px;}
.mk-kette::before{
  content:'';position:absolute;left:3px;top:12px;bottom:12px;width:1px;background:var(--line);
}
.mk-kglied{position:relative;padding:7px 11px;font-size:10.5px;}
.mk-kglied::before{
  content:'';position:absolute;left:-9px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--line);
}
.mk-kglied.aktiv::before{background:var(--accent);}
.mk-kglied.gruen::before{background:var(--success);}
.mk-kpfeil{display:none;}
.mk-reihe-m{padding:5px 8px;}
.mk-matrix .mkr-u{font-size:9.5px;}
.mk-kette{margin-top:9px;}
.mk-kglied{padding:6px 10px;font-size:10px;}

/* =====================================================================
   =====================================================================
   v49 — MAENGELRUEGE RUNDE 3
   Dieser Block steht bewusst ganz unten: was hier steht, gilt.
   Reihenfolge wie in der Liste.
   ===================================================================== */

/* ---------------------------------------------------------------------
   12 — Kein blauer Kasten mehr beim Antippen (Handy)
   Der Tastfokus bleibt erhalten, nur die Browser-Markierung geht weg.
   --------------------------------------------------------------------- */
html{-webkit-tap-highlight-color:transparent;}
a,button,summary,label,input,select,textarea,[role="button"],[tabindex],
.service-opt,.hn,.stufe,.pk,.sp-module,.bereich,.mobile-toggle,.nav-link{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ---------------------------------------------------------------------
   1 — Kopfzeile auf dem Handy: Logo mittig, Burger mit Luft zum Rand
   --------------------------------------------------------------------- */
.site-header .nav-bar{padding:0 24px;}
@media(max-width:1023px){
  .site-header .nav-bar{
    grid-template-columns:44px minmax(0,1fr) 44px;
    gap:10px;padding:0 16px;
  }
  .site-header .logo{grid-area:1/2;justify-self:center;}
  .site-header .nav-right{grid-area:1/3;justify-self:end;}
  .site-header .nav-right{gap:0;}
  .mobile-toggle{margin-right:0;}
}
@media(max-width:380px){
  .site-header .nav-bar{padding:0 12px;grid-template-columns:40px minmax(0,1fr) 44px;}
  .logo-img{height:27px;}
}

/* ---------------------------------------------------------------------
   2 — Alle Abstaende zwischen den Abschnitten gleich und knapper
   Ein Wert, ueberall. Dadurch verschwindet das Wechselspiel aus
   96/104/112 px, das sich ueber die Versionen angesammelt hatte.
   --------------------------------------------------------------------- */
:root{--sec:76px;}
section{padding:var(--sec) 0;}
section.sp-hero{padding-top:calc(var(--sec) - 8px);padding-bottom:var(--sec);}
.sp-einblicke,.sp-gruender,.sp-cta,.ldr-band,.sp-dark{padding:var(--sec) 0;}
/* Zwei gleich eingefaerbte Abschnitte hintereinander: dazwischen reicht
   einmal Abstand, nicht zweimal. */
section + section.bg-tint,section.bg-tint + section.bg-tint,
section.sp-dark + section.sp-dark{padding-top:var(--sec);}
/* Was bewusst oben buendig anschliesst, bleibt buendig. */
section[style*="padding-top:0"]{padding-top:0 !important;}

@media(max-width:1023px){:root{--sec:60px;}}
@media(max-width:720px){:root{--sec:50px;}section{padding:var(--sec) 0;}}

/* Innenabstaende der Bloecke mitziehen, sonst wirkt es gestaucht */
.sp-head + *{margin-top:40px;}
@media(max-width:720px){.sp-head + *{margin-top:28px;}}

/* ---------------------------------------------------------------------
   3 — "Das System": Ueberschrift hoeher, mehr Luft bis zu den 6 Kacheln
   --------------------------------------------------------------------- */
section.sp-dark{padding-top:calc(var(--sec) - 18px);}
section.sp-dark .sp-head{margin-bottom:0;}
section.sp-dark .sp-head .eyebrow{margin-bottom:2px;}
section.sp-dark .sp-head h2{margin-top:10px;}
.bereich-grid{margin-top:56px;}
@media(max-width:720px){
  section.sp-dark{padding-top:calc(var(--sec) - 10px);}
  .bereich-grid{margin-top:40px;}
}

/* ---------------------------------------------------------------------
   4 — Text in jedem Knopf mittig
   --------------------------------------------------------------------- */
.btn{justify-content:center;text-align:center;}
.btn > span,.btn > *{text-align:center;}

/* ---------------------------------------------------------------------
   6 — Verweise in der Fusszeile stehen untereinander, nicht nebeneinander
   (Der Pfeil-Hover aus v48 hatte sie auf inline-block gesetzt.)
   --------------------------------------------------------------------- */
footer .footer-col{display:flex;flex-direction:column;align-items:flex-start;}
footer .footer-col a,.footer-col a{
  display:block;width:auto;max-width:max-content;
}
footer .footer-col a{padding:7px 18px 7px 0;}

/* ---------------------------------------------------------------------
   7 — Personenkarten auf "Ueber uns" kleiner
   --------------------------------------------------------------------- */
.ldr-grid{max-width:520px !important;gap:20px;}
.ldr-body{padding:15px 15px 17px;}
.ldr-name{font-size:17px;}
.ldr-role{font-size:12px;}
@media(max-width:720px){
  .ldr-grid{max-width:300px !important;gap:16px;}
}

/* ---------------------------------------------------------------------
   8 — Kopf der Terminbuchung: alles mittig, auch die Schrittanzeige
   --------------------------------------------------------------------- */
.booking-head{text-align:center;}
.booking-head h3,.booking-head p{text-align:center;}
.booking-steps{
  max-width:330px;margin-left:auto;margin-right:auto;
  justify-content:center;align-items:center;
}
.booking-steps .bstep{flex:0 0 auto;justify-content:center;}
.booking-steps .bar{flex:1 1 auto;min-width:40px;margin-top:0;align-self:center;}
@media(max-width:720px){
  .booking-steps{max-width:260px;}
}

/* ---------------------------------------------------------------------
   10 — Loesungsseiten: die Grafik ist nicht mehr in einen festen
   Kasten gezwungen. Die Karten stehen jetzt im Fluss und bekommen
   genau so viel Hoehe, wie ihr Inhalt braucht — versetzt, damit der
   gestapelte Eindruck bleibt. Dazu ein ruhiger, einheitlicher Hover.
   --------------------------------------------------------------------- */
.mk{
  aspect-ratio:auto !important;
  display:flex;flex-direction:column;align-items:stretch;
  width:100%;max-width:100%;
}
.mk-karte{
  position:relative !important;
  top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;
  width:auto !important;
}
.mk-karte.mk-neben.mk-o{order:1;align-self:flex-end;width:62% !important;
  margin-bottom:-18px;z-index:3;}
.mk-karte.mk-haupt{order:2;align-self:flex-start;width:100% !important;z-index:2;}
.mk-karte.mk-neben{order:3;align-self:flex-end;width:66% !important;
  margin-top:-18px;z-index:3;}
.mk-karte.mk-neben.mk-u{order:3;align-self:flex-end;width:66% !important;
  margin-top:-18px;z-index:3;}
@media(max-width:720px){
  .mk-karte.mk-neben,.mk-karte.mk-neben.mk-o,.mk-karte.mk-neben.mk-u{
    width:100% !important;align-self:stretch;margin-top:10px;margin-bottom:0;}
  .mk-karte.mk-neben.mk-o{margin-top:0;margin-bottom:10px;}
}
/* Das leichte Schweben bleibt, faellt aber kleiner aus, damit im Fluss
   nichts wackelt. */
@keyframes schwebenLeicht{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.mk-haupt{animation:schwebenLeicht 8s ease-in-out infinite;}
.mk-neben.mk-o{animation:schwebenLeicht 7s ease-in-out infinite .6s;}
.mk-neben.mk-u{animation:schwebenLeicht 9s ease-in-out infinite 1.1s;}

/* Hover auf den Mockup-Karten: eine Sprache fuer alle Loesungsseiten */
.mk-karte{
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             border-color .3s var(--ease);
}
@media(hover:hover) and (pointer:fine){
  .hero-grafik:hover .mk-karte{animation-play-state:paused;}
  /* Bewusst keine Transparenz: weisse Karten wuerden sonst den
     Seitenhintergrund durchscheinen lassen. Die uebrigen Karten
     treten stattdessen minimal zurueck. */
  .hero-grafik:hover .mk-karte{transform:scale(.985);box-shadow:var(--shadow-sm);}
  .hero-grafik .mk-karte:hover{
    transform:translateY(-6px) scale(1);
    box-shadow:0 26px 54px rgba(5,28,44,.16);
    border-color:var(--accent);z-index:9;
  }
}
@media(prefers-reduced-motion:reduce){
  .mk-haupt,.mk-neben.mk-o,.mk-neben.mk-u{animation:none !important;}
  .mk-karte{transition:none !important;}
}
/* Die Neigung der Hero-Grafik darf den Fluss nicht stauchen */
.hero-grafik .mk{transform:perspective(1400px) rotateX(var(--hx,0deg)) rotateY(var(--hy,0deg));}

/* ---------------------------------------------------------------------
   9 — Organigramm bei "Management Beratung"
   Drei Ebenen, die nacheinander einwachsen. Erst die Linien, dann die
   Kaesten. Beim Zeigen hebt sich der Kasten und sagt, was dort
   entschieden wird.
   --------------------------------------------------------------------- */
.og{margin-top:14px;display:flex;flex-direction:column;align-items:center;}
.og-ebene{display:flex;justify-content:center;gap:8px;width:100%;}
.og-e2{gap:7px;}
.og-e3{gap:6px;margin-top:0;}

.og-knoten{
  display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 0;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;position:relative;
  /* fill-mode "backwards": der Kasten ist vorher unsichtbar, danach
     gelten wieder die normalen Regeln — sonst wuerde die Animation den
     Hover ueberstimmen. */
  animation:ogRein .5s var(--ease) backwards;
  animation-delay:calc(.45s + var(--i,0) * .12s);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             border-color .3s var(--ease),background .3s var(--ease);
}
.og-knoten.og-chef{
  flex:0 1 auto;background:var(--navy);border-color:var(--navy);
  animation-delay:.12s;padding:9px 14px;
}
.og-chef .og-r{color:#fff;}
.og-chef .og-t{color:rgba(255,255,255,.62);}
.og-chef .og-av{background:rgba(255,255,255,.14);}
.og-chef .og-av svg{stroke:#fff;}

.og-av{
  width:22px;height:22px;flex:0 0 22px;border-radius:50%;
  background:var(--accent-tint);display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease);
}
.og-av svg{width:12px;height:12px;stroke:var(--accent);}
.og-txt{display:flex;flex-direction:column;min-width:0;}
.og-r{font-size:11.5px;font-weight:700;color:var(--navy);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.og-t{font-size:9.5px;color:var(--text-soft);line-height:1.3;margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;}

/* Verbindungen */
.og-stamm{display:block;width:2px;height:16px;position:relative;}
.og-stamm i{
  display:block;width:100%;height:100%;background:var(--line);
  transform:scaleY(0);transform-origin:top;
  animation:ogWachsen .32s var(--ease) .3s forwards;
}
.og-stamm-2{height:14px;}
.og-stamm-2 i{animation-delay:.9s;}
/* Impuls, der von oben nach unten laeuft */
.og-puls{
  position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--accent);opacity:0;
  animation:ogPuls 3.2s ease-in-out 1.6s infinite;
}
.og-bus{
  display:block;width:76%;height:2px;position:relative;
}
.og-bus i{
  display:block;width:100%;height:100%;background:var(--line);
  transform:scaleX(0);transform-origin:center;
  animation:ogBreit .42s var(--ease) .56s forwards;
}
.og-tropfen{display:flex;justify-content:space-between;width:76%;height:12px;}
.og-tropfen b{
  display:block;width:2px;height:100%;background:var(--line);
  transform:scaleY(0);transform-origin:top;
  animation:ogWachsen .26s var(--ease) forwards;
  animation-delay:calc(.84s + var(--i,0) * .07s);
}
.og-blatt{
  flex:1 1 0;min-width:0;text-align:center;
  background:var(--bg-soft);border:1px solid var(--line-weich);border-radius:8px;
  padding:6px 7px;font-size:10px;font-weight:700;color:var(--text-soft);
  line-height:1.25;
  animation:ogRein .45s var(--ease) backwards;
  animation-delay:calc(1.05s + var(--i,0) * .1s);
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease);
}
.og-blatt i{display:block;font-style:normal;font-weight:500;font-size:9px;
  color:var(--text-soft);opacity:.75;margin-top:2px;}

@keyframes ogRein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes ogWachsen{to{transform:scaleY(1);}}
@keyframes ogBreit{to{transform:scaleX(1);}}
@keyframes ogPuls{
  0%{opacity:0;transform:translateY(0);}
  12%{opacity:1;}
  40%{opacity:1;transform:translateY(14px);}
  52%{opacity:0;transform:translateY(16px);}
  100%{opacity:0;transform:translateY(16px);}
}

@media(hover:hover) and (pointer:fine){
  /* Bewusst ohne Abdunkeln der uebrigen Kaesten: halbdurchsichtige
     Flaechen liessen den Hintergrund durchscheinen und das sah
     schmuddelig aus. Stattdessen tritt der gezeigte Kasten hervor. */
  .og .og-knoten:hover,.og .og-blatt:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(5,28,44,.14);
    border-color:var(--accent);background:#fff;
  }
  .og .og-knoten:hover .og-av{background:var(--accent);}
  .og .og-knoten:hover .og-av svg{stroke:#fff;}
  .og .og-knoten.og-chef:hover{border-color:var(--lightblue);}
  .og .og-knoten.og-chef:hover .og-av{background:var(--lightblue);}
  .og .og-knoten.og-chef:hover .og-av svg{stroke:var(--navy);}
  .og .og-blatt:hover{background:#fff;color:var(--accent);}
}
@media(prefers-reduced-motion:reduce){
  .og-knoten,.og-blatt{opacity:1 !important;transform:none !important;animation:none !important;}
  .og-stamm i,.og-bus i,.og-tropfen b{transform:none !important;animation:none !important;}
  .og-puls{display:none;}
}
@media(max-width:720px){
  .og-e2{flex-direction:column;gap:6px;}
  .og-bus,.og-tropfen{display:none;}
  .og-knoten{flex:1 1 auto;}
  .og-e3{flex-wrap:wrap;}
  .og-blatt{flex:1 1 30%;}
}

/* ---------------------------------------------------------------------
   11 — Sauberere Seitenwechsel: knapper, ohne Nachwippen
   --------------------------------------------------------------------- */
#sp-vorhang{transition:clip-path .62s cubic-bezier(.76,0,.24,1);}
html.vorhang-zu #sp-vorhang{animation:vhZu .34s cubic-bezier(.76,0,.24,1) forwards;}
html.vorhang-auf body > main{
  transition:opacity .5s var(--ease) .1s,transform .55s var(--ease) .1s;
}
html.vorhang-intro body > main,html.vorhang-kurz body > main{transform:translateY(10px);}
html.vorhang-intro .vh-linie i{animation-duration:.72s;}
html.vorhang-intro .vh-innen img{animation-duration:.5s;}

/* ---------------------------------------------------------------------
   5 — Platzhalter: falls doch irgendwo noch ein Bildbereich steht,
   bleibt er unsichtbar, solange keine echte Datei dahinterliegt.
   --------------------------------------------------------------------- */
.bildplatz:not(.hat-bild){display:none !important;}
.sp-einblicke{display:none !important;}

/* =====================================================================
   v50 — PERSONENKARTEN AUF "UEBER UNS" WIEDER SAUBER
   Drei Dinge waren schief:
   1. Der weisse Lichtkreis hinter dem Kopf hatte eine sichtbare Kante
      und zog einen Streifen quer durch beide Fotos.
   2. Die beiden Karten waren unterschiedlich hoch, weil der blaue
      Bereichs-Chip bei einem Namen umbricht. Dadurch stand
      "Profil ansehen" bei beiden auf anderer Hoehe.
   3. Die Karten waren zu eng fuer die laengere Bereichszeile.
   ===================================================================== */

/* ---- Hintergrund im Foto: ein ruhiger Verlauf, keine Kante ---- */
.ldr-photo{
  background:linear-gradient(168deg,#F2F6FA 0%,#E4ECF5 58%,#D7E3F0 100%) !important;
  border-bottom:none !important;
}
.ldr-photo::before{
  left:50%;top:38%;width:112%;
  background:radial-gradient(circle,rgba(255,255,255,.72) 0%,
             rgba(255,255,255,.28) 42%,rgba(255,255,255,0) 70%) !important;
}
/* Die fruehere "Grundlinie" am unteren Rand ist raus: sie hatte eine
   sichtbare Oberkante und zog genau den Streifen quer durchs Bild,
   der stoerte. Ein einziger ruhiger Verlauf reicht. */
.ldr-photo::after{display:none !important;}
/* Das Foto fuellt den Rahmen exakt — beide Dateien sind 4:5 wie der
   Rahmen, es wird also nichts beschnitten. */
.ldr-photo img{object-position:50% 0% !important;}

/* ---- Beide Karten gleich hoch, Verweis unten buendig ---- */
.ldr-grid{
  max-width:560px !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px;align-items:stretch;
}
.ldr-card{display:flex;flex-direction:column;height:100%;}
.ldr-photo{flex:0 0 auto;}
.ldr-body{display:flex;flex-direction:column;flex:1 1 auto;padding:17px 17px 18px;}
.ldr-idx{font-size:10.5px;}
.ldr-name{font-size:18px;}
.ldr-role{font-size:12.5px;margin-top:5px;line-height:1.45;}
.ldr-loc{
  display:inline-block;margin-top:11px;align-self:flex-start;
  background:var(--accent-tint);color:var(--accent);
  font-size:11.5px;font-weight:700;line-height:1.35;
  padding:6px 11px;border-radius:99px;
}
.ldr-open{
  margin-top:auto;padding-top:15px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--navy);
}
.ldr-open svg{stroke:var(--accent);}
.ldr-card:hover .ldr-open{color:var(--accent);}

@media(max-width:720px){
  .ldr-grid{max-width:330px !important;grid-template-columns:minmax(0,1fr) !important;gap:18px;}
}