/* ==========================================================================
   Über uns · Redesign im Designsystem der Startseite (Variablen, Navigation, Footer, CTA aus sub-master.css)
   Geladen nach seiten.css, überschreibt dessen Über-uns-Regeln.
   ========================================================================== */
.about-page.premium{
 --ink:#16233a;--muted:#3a4a5f;--blue-text:#0660b5;--btn:#0668c9;--sky:#8fd7f5;
 --soft:#eef5fb;--line:#d3e0ec;
 --gx:var(--heading-gradient-light);
 --gx-dark:var(--heading-gradient-dark);
 --ease-soft:cubic-bezier(.32,.72,0,1);
 --sec:clamp(56px,5.6vw,88px);
 --wrap:min(var(--home-max),calc(100% - 48px));
 color:var(--ink)}

/* ---- Navigation, größer (wie Startseite) ---- */
@media(min-width:1191px){
 body:has(.about-page) .global-nav{font-size:clamp(14px,1.1vw,16.5px);font-weight:600;letter-spacing:.004em;gap:clamp(15px,1.5vw,34px)}
 body:has(.about-page) .global-nav>a{color:#16233a;padding-block:18px}
 body:has(.about-page) .global-nav>a:hover{color:#0660b5}
 body:has(.about-page) .global-nav>a[aria-current]{color:#0660b5;font-weight:700}
 body:has(.about-page) .global-nav>a[aria-current]::after{background:#0660b5;bottom:7px}
 body:has(.about-page) .global-contact strong{font-size:18px;color:#0660b5}
 body:has(.about-page) .global-contact small{font-size:10px;color:#3a4a5f}
}

/* ---- 5 · Abschluss (Navy, kompakt) ---- */
.sub-cta{background:radial-gradient(640px 400px at 20% 70%,rgba(30,120,215,.55),transparent 70%),radial-gradient(780px 540px at 90% 24%,rgba(8,127,229,.46),transparent 68%),linear-gradient(158deg,#0b1428 0%,#15294d 46%,#0e2039 100%);color:#fff}
.sub-cta-inner{width:var(--wrap);margin-inline:auto;padding-block:clamp(44px,4.6vw,68px);display:grid;gap:26px;align-items:center}
.sub-cta .sub-h2{color:#fff;font-size:clamp(30px,3.2vw,44px)}
.sub-cta .gx{background:var(--gx-dark);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sub-cta p{margin:14px 0 0;max-width:32em;font-size:17px;line-height:1.65;color:rgba(255,255,255,.9)}
.sub-cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sub-cta .home-hero-phone{color:#fff}
.sub-cta .home-hero-phone span{color:rgba(255,255,255,.82)}
.sub-cta .home-hero-phone strong{color:var(--sky);background-image:linear-gradient(currentColor,currentColor)}
.sub-cta .sub-fine{margin:0;font-size:14px;color:rgba(255,255,255,.82)}
@media(min-width:1101px){
 .sub-cta-inner{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(48px,6vw,104px)}
 .sub-cta-actions{align-items:flex-end}
}

/* ---- Footer: Textfarben mit Mindestkontrast (hell, wie Startseite) ---- */
body:has(.about-page) .global-footer-brand p,body:has(.about-page) .global-footer-hours dl,body:has(.about-page) .global-footer-contact .footer-phone-row span,body:has(.about-page) .global-footer-bottom{color:#3a4a5f}
body:has(.about-page) .global-footer-contact>a:not(.global-footer-phone),body:has(.about-page) .global-footer-bottom a{color:#16233a}
body:has(.about-page) .global-footer-contact .footer-phone-row a,body:has(.about-page) .footer-credit-brand{color:#0660b5}
body:has(.about-page) .global-footer{background:#f4f8fc}

/* Überschriften der Unterseite: keine ererbten Textverläufe aus service-page.css */
.about-page.premium .sub-h2,.about-page.premium .sub-grid h3,.about-page.premium .sub-step-body h3,.about-page.premium .sub-cta .sub-h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor}
.about-page.premium .sub-grid h3,.about-page.premium .sub-step-body h3,.about-page.premium .sub-h2{color:var(--ink)}
.about-page.premium .sub-cta .sub-h2{color:#fff}
.about-page.premium .sub-h2 .gx,.about-page.premium .service-entry-copy h1 .gx{background:var(--gx);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.about-page.premium .sub-cta .sub-h2 .gx{background:var(--gx-dark);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body:has(.about-page) .global-contact strong{color:#0660b5}
body:has(.about-page) .global-contact small{color:#3a4a5f}

/* Hero: keine Einblend-Animation (Performance) */


@media(max-width:1100px){.sub-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}.sub-steps li:nth-child(2) .sub-step-no:after{display:none}}
@media(max-width:800px){.sub-steps{grid-template-columns:1fr;row-gap:0}.sub-steps li:nth-child(2) .sub-step-no:after{display:none}}

.sub-steps figure img{image-rendering:auto}

.about-page.premium{--wrap:min(var(--home-max),calc(100% - 48px))}
.about-page.premium .gx{background:var(--gx);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.about-page.premium .sub-h2,.about-page.premium .about-hero h1{font-family:'Manrope',Arial,sans-serif;font-weight:750;letter-spacing:-.045em;color:var(--ink);text-wrap:balance;margin:0;background:none;-webkit-text-fill-color:currentColor}
.about-page.premium .sub-h2{font-size:clamp(32px,3.6vw,50px);line-height:1.06;padding-bottom:.08em}
.about-page.premium .sub-eyebrow{display:block;margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-text)}

/* ---- Hero: Stempel bleibt, Fläche und Typografie wie die Referenzseiten ---- */
.about-page.premium .about-hero{background:linear-gradient(180deg,#fff 0,#f7fbfe 100%);width:100%;max-width:none;padding-inline:max(24px,calc((100% - var(--home-max)) / 2))}
.about-page.premium .about-hero .home-eyebrow{display:inline-flex;margin:0 0 18px;padding:7px 14px;border-radius:999px;background:rgba(8,127,229,.08);box-shadow:inset 0 0 0 1px rgba(8,127,229,.16);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--blue-text)}
.about-page.premium .about-hero h1{font-size:var(--hero-h1);line-height:1;padding-bottom:.24em;margin-bottom:12px;width:fit-content;max-width:100%}
.about-page.premium .about-hero h1 span{background:none;-webkit-text-fill-color:currentColor;color:var(--ink);display:block;font-size:.62em;line-height:1.15;letter-spacing:-.035em;margin-top:.1em}
.about-page.premium .about-hero h1 .gx{display:inline;font-size:inherit;margin:0;background:var(--gx);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.about-page.premium .about-hero-description{max-width:640px}
.about-page.premium .about-hero-description>p{margin:0;font-size:18px;line-height:1.6;color:var(--muted);max-width:34em}
.about-page.premium .about-stamp{width:calc(var(--hero-media-w) * .8)}

/* ---- 2 · Was uns ausmacht: Navy-Fläche, weiße Box, links Werte, rechts Geschichte ---- */
.about-page.premium .about-who{padding:calc(var(--sec) * .8) 0;border:0;
 background:radial-gradient(640px 360px at 10% 50%,rgba(8,127,229,.22),transparent 70%),radial-gradient(520px 320px at 96% 40%,rgba(79,180,242,.12),transparent 70%),linear-gradient(180deg,#1c293c 0,#13203a 100%)}
.about-page.premium .about-who-inner{--r:10px;position:relative;isolation:isolate;width:var(--wrap);margin-inline:auto;padding:clamp(34px,4vw,60px) clamp(28px,4vw,64px);border-radius:var(--r);
 background:linear-gradient(150deg,#fff 0%,#f4f9fe 55%,#e9f3fc 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 40px 70px -36px rgba(0,0,0,.65);display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
.about-page.premium .about-who-inner:before{content:'';position:absolute;z-index:-1;inset:-10px -10px 10px 10px;padding:1.5px;border-radius:var(--r);background:linear-gradient(135deg,#8fd7f5,#087fe5 60%,#1c6fd0);opacity:.7;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.about-page.premium .about-values-title{font:750 clamp(30px,3.2vw,44px)/1.06 'Manrope',Arial,sans-serif;letter-spacing:-.045em;margin:0 0 6px;padding-bottom:.08em;color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
.about-page.premium .about-values{list-style:none;margin:24px 0 0;padding:0}
.about-page.premium .about-values li{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-top:1px solid rgba(8,127,229,.2)}
.about-page.premium .about-value-no{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px #087fe5;font:700 16px/1 'Manrope',Arial,sans-serif;color:#0660b5;margin:0;padding:0;-webkit-text-fill-color:currentColor;background-image:none}
.about-page.premium .about-values h3{margin:2px 0 6px;font:750 19px/1.25 'Manrope',Arial,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.about-page.premium .about-values p{margin:0;font-size:16px;line-height:1.55;color:var(--muted);max-width:26em}
.about-page.premium .about-divider{display:none}
.about-page.premium .about-story .home-eyebrow{margin:0 0 14px;color:var(--blue-text)}
.about-page.premium .about-story h2{margin:0 0 22px;font:750 clamp(26px,2.7vw,38px)/1.12 'Manrope',Arial,sans-serif;letter-spacing:-.04em;color:var(--ink);max-width:20em;text-wrap:balance}
.about-page.premium .about-story p{margin:0 0 18px;font-size:17px;line-height:1.75;color:var(--muted);max-width:40em}
.about-page.premium .about-story p strong{color:var(--ink);font-weight:650}
.about-page.premium .about-story .about-story-close{margin:26px 0 0;color:#0660b5;font:750 20px/1.4 'Manrope',Arial,sans-serif;letter-spacing:-.02em}
@media(min-width:1101px){
 .about-page.premium .about-who-inner{grid-template-columns:minmax(0,.4fr) 1px minmax(0,.6fr);column-gap:clamp(36px,5vw,84px)}
 .about-page.premium .about-divider{display:block;width:1px;align-self:stretch;background:linear-gradient(180deg,#1c293c,#087fe5 60%,rgba(8,127,229,0))}
}

/* ---- 3 · Mertako: leise, weiße Fläche; links der Text, rechts ein Partner-Panel ---- */
.about-page.premium .about-partner{background:#fff;padding:calc(var(--sec) * .9) 0}
.about-page.premium .about-partner-inner{width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1fr;gap:32px;align-items:center;padding:0;position:static}
.about-page.premium .about-partner-inner:before{display:none}
.about-page.premium .about-partner h2{font:750 clamp(28px,3vw,42px)/1.08 'Manrope',Arial,sans-serif;letter-spacing:-.045em;margin:0 0 16px;padding-bottom:.08em;color:var(--ink);background:none;-webkit-text-fill-color:currentColor;text-wrap:balance}
.about-page.premium .about-partner h2 .gx{background:var(--gx);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.about-page.premium .about-partner .home-eyebrow{margin:0 0 14px;color:var(--blue-text)}
.about-page.premium .about-partner-copy>p:not(.home-eyebrow){margin:0 0 14px;font-size:17px;line-height:1.7;color:var(--muted);max-width:36em}
.about-page.premium .about-partner-copy>p.about-partner-lead{color:var(--ink);font-weight:500}
.about-page.premium .about-partner-logo{padding:clamp(24px,3vw,40px);border:0;border-radius:0 28px 0 28px;background:linear-gradient(150deg,#f7fbfe,#eaf3fb);box-shadow:inset 0 0 0 1px #d3e4f2;align-items:flex-start;justify-content:center}
.about-page.premium .about-partner-logo img{width:min(100%,380px);height:auto}
.about-page.premium .mertako-caption{margin:18px 0 20px;font-size:15px;line-height:1.5;color:var(--muted);text-align:left}
.about-page.premium .mertako-button{display:inline-flex;align-items:center;gap:14px;min-width:0;padding:8px 8px 8px 24px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #0668c9;color:#0660b5;font-weight:700;font-size:15px;transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft)}
.about-page.premium .mertako-button b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0668c9;color:#fff;font-size:17px;font-weight:400}
.about-page.premium .mertako-button:hover,.about-page.premium .mertako-button:focus-visible{background:#0668c9;color:#fff}
.about-page.premium .mertako-button:hover b,.about-page.premium .mertako-button:focus-visible b{background:rgba(255,255,255,.18)}
@media(min-width:1101px){.about-page.premium .about-partner-inner{grid-template-columns:minmax(0,.58fr) minmax(0,.42fr);column-gap:clamp(48px,6vw,104px)}.about-page.premium .about-partner-logo{padding-left:clamp(32px,4vw,56px);border-left:0}}

/* ---- 4 · Abschluss ---- */
.about-page.premium .about-cta{padding:0}
.about-page.premium .sub-cta .sub-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.about-page.premium .sub-cta .sub-points li{display:flex;gap:12px;align-items:center;font-size:17px;font-weight:600;color:#fff}
.about-page.premium .sub-cta .sub-points svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--sky);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.about-page.premium .sub-cta .sub-eyebrow{color:var(--sky)}
.about-page.premium .sub-cta-panel{padding:clamp(24px,2.4vw,34px);border-radius:0 28px 0 28px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:420px}
.about-page.premium .sub-cta-panel .sub-fine{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#d3efff}
.about-page.premium .sub-cta .home-hero-phone strong{color:var(--sky)}
.about-page.premium .sub-cta .home-hero-phone span{color:rgba(255,255,255,.82)}
.about-page.premium .home-button{gap:18px;padding:8px 8px 8px 28px;border-radius:999px;min-height:60px;background:var(--btn);color:#fff;box-shadow:0 18px 32px -18px rgba(8,127,229,.7)}
.about-page.premium .home-button b{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);font-size:18px}
.about-page.premium .about-partner-logo:before,.about-page.premium .about-partner-logo:after{display:none}
.about-page.premium .about-hero{min-height:0;padding-block:max(16px,calc(var(--hero-pad-top) - 36px)) var(--hero-pad-bottom);align-items:center}
@media(min-width:1101px){.about-page.premium .about-hero{min-height:calc(var(--hero-media-w) * 2 / 3 + 60px)}}
.about-page.premium .about-cta.sub-cta{padding:0;background:radial-gradient(640px 400px at 20% 70%,rgba(30,120,215,.55),transparent 70%),radial-gradient(780px 540px at 90% 24%,rgba(8,127,229,.46),transparent 68%),linear-gradient(158deg,#0b1428 0%,#15294d 46%,#0e2039 100%)}
.about-page.premium .about-cta h2{background:none;-webkit-text-fill-color:currentColor;color:#fff;padding-bottom:.08em}
.about-page.premium .about-cta h2 .gx{background:var(--gx-dark);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(min-width:1101px){.about-page.premium .about-hero{align-items:start}.about-page.premium .about-stamp{margin-top:-6px}}
@media(min-width:1101px){.about-page.premium .about-hero-copy{padding-top:34px}}

/* Mertako: keine eigene Kachel, Logo direkt auf der weißen Fläche, Trennlinie zwischen den Spalten */
.about-page.premium .about-partner-logo{padding:0;border-radius:0;background:none;box-shadow:none}
@media(min-width:1101px){.about-page.premium .about-partner-logo{padding:4px 0 4px clamp(40px,5vw,84px);border-left:1px solid rgba(8,127,229,.2);align-self:stretch;justify-content:center}}
@media(max-width:1100px){.about-page.premium .about-partner-logo{padding:28px 0 0;border-top:1px solid rgba(8,127,229,.2);border-radius:0}}

.about-page.premium .about-cta .sub-h2{font-size:clamp(30px,3.2vw,44px)}

/* Mobile composition: short context, team image, then the full introduction. */
@media(max-width:800px){
 .about-page.premium{--wrap:calc(100% - 40px);--stamp-w:min(100%,340px);--sec:40px}
 .about-page.premium .about-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "stamp" "description";grid-template-rows:auto auto auto;row-gap:clamp(12px,3.5vw,18px);width:100%;min-height:0;padding:24px 20px 34px;align-content:start;align-items:start}
 .about-page.premium .about-hero-copy{grid-area:copy;max-width:640px}
 .about-page.premium .about-hero-copy .home-eyebrow{margin-bottom:14px}
 .about-page.premium .about-hero h1{font-size:clamp(38px,10.5vw,48px);margin-bottom:0}
 .about-page.premium .about-stamp{grid-area:stamp;justify-self:center;align-self:center;width:min(100%,340px);margin:0;transform:none}
 .about-page.premium .about-stamp img{width:100%;height:auto;max-height:260px;object-fit:contain}
 .about-page.premium .about-hero-description{grid-area:description;max-width:40rem}
 .about-page.premium .about-hero-description>p{font-size:16.5px;line-height:1.65}

 .about-page.premium .about-who{padding-block:32px}
 .about-page.premium .about-who-inner{grid-template-columns:minmax(0,1fr);gap:24px}
 .about-page.premium .about-values-title{font-size:clamp(27px,8vw,32px);margin-bottom:0}
 .about-page.premium .about-values{margin-top:14px}
 .about-page.premium .about-values li{gap:13px;padding:15px 0}
 .about-page.premium .about-values h3{font-size:18px;margin-bottom:4px}
 .about-page.premium .about-values p{font-size:16px;line-height:1.55}
 .about-page.premium .about-story .home-eyebrow{margin-bottom:10px}
 .about-page.premium .about-story h2{font-size:clamp(25px,7.4vw,30px);line-height:1.12;margin-bottom:16px}
 .about-page.premium .about-story p{font-size:16px;line-height:1.65;margin-bottom:14px}
 .about-page.premium .about-story .about-story-close{font-size:18px;margin-top:18px}

 .about-page.premium .about-partner{padding-block:36px}
 .about-page.premium .about-partner-inner{gap:22px}
 .about-page.premium .about-partner-copy>p:not(.home-eyebrow){font-size:16px;line-height:1.65}
 .about-page.premium .about-partner-logo{padding-top:20px}
 .about-page.premium .about-partner-logo img{width:min(100%,320px)}
 .about-page.premium .about-cta .sub-cta-inner{padding-block:38px;gap:22px}
 .about-page.premium .sub-cta-panel{padding:20px;gap:13px}
 .about-page.premium .home-button{width:100%;justify-content:space-between}
}

@media(min-width:801px){
 .about-page.premium .about-hero{grid-template-areas:"copy stamp" "description stamp";grid-template-rows:auto auto;row-gap:16px}
 .about-page.premium .about-hero-copy{grid-area:copy}
 .about-page.premium .about-stamp{grid-area:stamp;grid-row:1 / span 2;align-self:center}
 .about-page.premium .about-hero-description{grid-area:description}
}
@media(min-width:1101px){.about-page.premium .about-hero{align-content:start}.about-page.premium .about-stamp{align-self:start}}