/* ==========================================================================
   Seiten im Premium-Designsystem: Über uns, Kontakt, Impressum, Datenschutz
   (Branch premium-rollout). Gilt nur für <main>-Elemente mit der Klasse „premium“.
   Übernimmt aus dem System: Raster wie Header und Footer, Foto mit Konturrahmen,
   weiße Karten auf hellblauer Fläche, ruhige Abschnittsabstände.
   Texte und Funktionen sind unverändert.
   ========================================================================== */
.premium.about-page,.premium.contact-page,.premium.legal{
 --pad:clamp(56px,5.5vw,84px);
 --head-gap:clamp(28px,3vw,44px);
 --tint:#f4f8fb;
}

/* --------------------------------------------------------------------------
   Über uns: Stempel-Hero, kompakte Editorial-Textfläche, Werte als flache Dreierreihe,
   Partnerband, Abschluss. Gleiches Raster und gleiche Hero-Größen (premium.css) wie die
   übrigen Seiten. Zwei-Spalten-Anordnungen gelten erst ab 1101 px.
   -------------------------------------------------------------------------- */
.about-page.premium{--wrap:min(var(--home-max),calc(100% - 48px));--stamp-w:calc(var(--hero-media-w) * .76)}

/* Hero: Text links, freigestellter Stempel rechts, leicht schräg aufgedrückt */
.about-page.premium .about-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(48px,7vw,128px);align-items:center;
 width:var(--wrap);max-width:none;min-height:calc(var(--hero-media-w) * .58);margin-inline:auto;padding:calc(var(--hero-pad-top) * .88) 0 calc(var(--hero-pad-bottom) * .88);background:#fff}
.about-page.premium .about-hero-copy{max-width:640px}
.about-page.premium .about-hero-copy .home-eyebrow{margin-bottom:18px}
.about-page.premium .about-hero h1{width:fit-content;max-width:100%;font-size:var(--hero-h1);line-height:1;padding-bottom:.24em;margin:0 0 12px;text-wrap:balance}
.about-page.premium .about-hero-copy>p:not(.home-eyebrow){font-size:18px;line-height:1.6;color:var(--muted);max-width:34em}
.about-page.premium .about-stamp{margin:0;width:var(--stamp-w);justify-self:end;transform:rotate(-3.5deg);transform-origin:50% 60%}
.about-page.premium .about-stamp img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(28,41,60,.22))}

/* Werte links, Geschichte rechts, getrennt durch einen feinen Verlaufsstrich */
.about-page.premium .about-who{background:var(--tint);border-block:1px solid #e1e9f0;padding:var(--pad) 0}
.about-page.premium .about-who-inner{width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.about-page.premium .about-values-title{margin:0 0 clamp(24px,2.6vw,36px);font:750 clamp(32px,3.6vw,48px)/1.05 'Manrope',Arial,sans-serif;letter-spacing:-.045em;padding-bottom:.24em;text-wrap:balance;
 background:var(--heading-gradient-light);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-page.premium .about-values{list-style:none;margin:0;padding:0}
.about-page.premium .about-values li{display:grid;grid-template-columns:clamp(64px,5.5vw,84px) minmax(0,1fr);column-gap:18px;align-items:baseline;padding:26px 0;border-top:1px solid #cfdbe3}
.about-page.premium .about-values li:first-child{border-top:0;padding-top:0}
.about-page.premium .about-value-no{font:200 clamp(44px,4.4vw,60px)/1 'Manrope',Arial,sans-serif;letter-spacing:-.04em;
 background:var(--heading-gradient-light);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.3em;margin-bottom:-.18em}
.about-page.premium .about-values h3{font:750 13px/1.3 'Manrope',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px;color:var(--ink)}
.about-page.premium .about-values p{margin:0;color:var(--muted);font-size:16px;line-height:1.65;max-width:26em}
.about-page.premium .about-divider{height:1px;background:linear-gradient(90deg,#1c293c,#087fe5 60%,transparent)}
.about-page.premium .about-story .home-eyebrow{margin:0 0 16px;font-size:12px;letter-spacing:.13em;color:#087fe5;font-weight:700}
.about-page.premium .about-story h2{margin:0 0 28px;max-width:20em;font:750 clamp(26px,2.7vw,38px)/1.15 'Manrope',Arial,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.about-page.premium .about-story p{margin:0 0 22px;color:var(--muted);font-size:17px;line-height:1.8;max-width:44em}
.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:#087fe5;font:750 20px/1.4 'Manrope',Arial,sans-serif;letter-spacing:-.02em}
.about-page.premium .about-partner h2,.about-page.premium .about-cta h2{
 font:750 clamp(32px,3.8vw,52px)/1.05 'Manrope',Arial,sans-serif;letter-spacing:-.045em;margin:0;padding-bottom:.24em;text-wrap:balance;
 background:var(--heading-gradient-light);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-page.premium .about-partner .home-eyebrow{margin:0 0 18px}

/* Partnerband: Text links, Logo rechts, getrennt durch eine feine Linie, ohne Karte */
.about-page.premium .about-partner{background:#fff;padding:var(--pad) 0}
.about-page.premium .about-partner-inner{width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.about-page.premium .about-partner-copy>p:not(.home-eyebrow){margin:6px 0 0;color:var(--muted);font-size:17px;line-height:1.7;max-width:38em}
.about-page.premium .about-partner-logo{display:flex;flex-direction:column;align-items:flex-start;padding-top:28px;border-top:1px solid #cfdbe3}
.about-page.premium .about-partner-logo img{display:block;width:280px;max-width:100%;height:auto}
.about-page.premium .mertako-caption{margin:14px 0 18px;color:#596a80;font-size:14px;line-height:1.45}
.about-page.premium .mertako-button{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-width:min(100%,260px);padding:12px 16px;border:1px solid #087fe5;border-radius:2px;color:#087fe5;background:#fff;font-weight:700;font-size:14px;transition:background-color .2s ease,color .2s ease}
.about-page.premium .mertako-button b{font-weight:400;font-size:18px;transition:transform .2s var(--ease-out)}
.about-page.premium .mertako-button:hover,.about-page.premium .mertako-button:focus-visible{background:#087fe5;color:#fff}
.about-page.premium .mertako-button:hover b,.about-page.premium .mertako-button:focus-visible b{transform:translateX(3px)}

/* Abschluss */
.about-page.premium .about-cta{padding:0 0 var(--pad);background:linear-gradient(180deg,#fff 0,#fff 40%,#f3f6f8 100%)}
.about-page.premium .about-cta-card{width:var(--wrap);margin-inline:auto;position:relative;display:grid;grid-template-columns:1fr;gap:24px;align-items:center;padding:clamp(28px,3.5vw,48px);background:#fff;border:1px solid #dbe5ee;box-shadow:0 30px 56px -40px rgba(28,41,60,.3)}
.about-page.premium .about-cta-card:before{content:'';position:absolute;top:-1px;left:-1px;width:min(220px,40%);height:3px;background:linear-gradient(90deg,#087fe5,#8fd7f5 70%,transparent)}
.about-page.premium .about-cta-copy>p{margin:6px 0 0;color:var(--muted);font-size:16px;line-height:1.6;max-width:34em}

@media(min-width:1101px){
 .about-page.premium .about-who-inner{grid-template-columns:minmax(0,.36fr) 1px minmax(0,.64fr);column-gap:clamp(32px,4vw,64px)}
 .about-page.premium .about-story{padding-left:clamp(0px,1vw,16px)}
 .about-page.premium .about-divider{width:1px;height:auto;align-self:stretch;background:linear-gradient(180deg,#1c293c,#087fe5 60%,rgba(8,127,229,0))}
 .about-page.premium .about-partner-inner{grid-template-columns:minmax(0,1fr) clamp(300px,24vw,380px);column-gap:clamp(48px,6vw,104px)}
 .about-page.premium .about-partner-logo{padding:0 0 0 clamp(40px,5vw,80px);border-top:0;border-left:1px solid #cfdbe3}
 .about-page.premium .about-cta-card{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(40px,6vw,96px)}
}
@media(max-width:1100px){.about-page.premium .about-hero{column-gap:40px}}
@media(max-width:800px){
 .about-page.premium{--wrap:calc(100% - 40px);--stamp-w:min(100%,420px)}
 .about-page.premium .about-hero{grid-template-columns:1fr;row-gap:28px;width:calc(100% - 40px);min-height:0;padding-block:24px 40px}
 .about-page.premium .about-hero h1{font-size:clamp(38px,10.5vw,52px);margin-bottom:8px}
 .about-page.premium .about-hero-copy>p:not(.home-eyebrow){font-size:16px}
 .about-page.premium .about-stamp{justify-self:center}
}
@media(max-width:640px){.about-page.premium .home-button{width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.about-page.premium .mertako-button,.about-page.premium .mertako-button b{transition:none}}

/* --------------------------------------------------------------------------
   Kontakt: das dunkle Formularfeld bleibt, Raster und Rhythmus folgen dem System
   -------------------------------------------------------------------------- */
.contact-page.premium .contact-intro{width:100%;max-width:none;margin:0;padding:clamp(36px,4vw,56px) var(--edge) clamp(32px,3.5vw,48px);background:var(--tint);border-bottom:1px solid #e1e9f0}
.contact-page.premium .contact-intro h1,.contact-page.premium .contact-intro>p{max-width:none;margin-left:0;margin-right:0}
.contact-page.premium .contact-intro>p:last-child{max-width:40em}
.contact-page.premium .contact-layout{width:min(var(--home-max),calc(100% - 48px));max-width:none;padding-top:var(--pad);padding-bottom:var(--pad)}

/* --------------------------------------------------------------------------
   Impressum und Datenschutz: ruhige, gut lesbare Rechtstexte im selben Raster
   -------------------------------------------------------------------------- */
.premium.legal{background:#fff}
.premium .legal-page{width:min(var(--home-max),calc(100% - 48px));max-width:none;margin-inline:auto;padding:clamp(40px,4.5vw,68px) 0 var(--pad)}
.premium .legal-page>*{max-width:44rem}
.premium .legal-page h1{font:750 clamp(40px,4.4vw,60px)/1.02 'Manrope',Arial,sans-serif;letter-spacing:-.045em;margin:0 0 12px;padding-bottom:.2em}
.premium .legal-page .eyebrow{font-size:12px;letter-spacing:.13em;font-weight:700;margin-bottom:18px}
.premium .legal-page .legal-date{margin:0 0 6px;color:var(--muted)}
.premium .legal-page h2{font-size:22px;line-height:1.25;margin:44px 0 12px;padding-top:28px;border-top:1px solid var(--line)}
.premium .legal-page h3{font-size:17px;margin:26px 0 8px}
.premium .legal-page p,.premium .legal-page li,.premium .legal-page address{line-height:1.7;color:var(--muted);font-size:16px}
.premium .legal-page a{color:#087fe5;font-weight:600;text-decoration:underline;text-decoration-color:#b8dff2;text-underline-offset:3px;transition:text-decoration-color .2s ease}
.premium .legal-page a:hover{text-decoration-color:#087fe5}
.premium .legal-page .legal-note{border-left:3px solid #087fe5;background:var(--tint);padding:18px 22px}

/* --------------------------------------------------------------------------
   Tablet und Mobil
   -------------------------------------------------------------------------- */
@media(max-width:1100px){
}
@media(max-width:800px){
 .premium.about-page,.premium.contact-page,.premium.legal{--pad:56px}
 .about-page.premium .about-hero{grid-template-columns:1fr;row-gap:32px;width:calc(100% - 40px);padding-block:24px 40px}
 .about-page.premium .about-hero h1{font-size:clamp(38px,10.5vw,52px);margin-bottom:8px}
 .about-page.premium .about-hero-copy>p:not(.home-eyebrow){font-size:16px}
 .contact-page.premium .contact-intro{padding-inline:20px}
 .contact-page.premium .contact-layout{width:calc(100% - 40px)}
 .premium .legal-page{width:calc(100% - 40px)}
}

/* Partnerbereich: ein zusammenhängendes Modul (ca. 55 / 45) mit durchgehender Verlaufslinie */
.about-page.premium .about-partner-inner{position:relative;padding-top:clamp(32px,4vw,56px);row-gap:0}
.about-page.premium .about-partner-inner:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#1c293c,#087fe5 55%,rgba(8,127,229,.15))}
.about-page.premium .about-partner-copy>p:not(.home-eyebrow){margin:14px 0 0;font-size:16px;line-height:1.7;max-width:36em}
.about-page.premium .about-partner-copy>p.about-partner-lead{margin-top:20px;color:var(--ink);font-size:18px;font-weight:500;line-height:1.6}
.about-page.premium .about-partner-logo{padding-top:clamp(28px,3vw,40px)}
.about-page.premium .about-partner-logo img{width:min(100%,420px)}
.about-page.premium .mertako-caption{margin:20px 0 24px;font-size:15px}
@media(min-width:1101px){
 .about-page.premium .about-partner-inner{grid-template-columns:minmax(0,.55fr) minmax(0,.45fr);column-gap:0}
 .about-page.premium .about-partner-copy{padding-right:clamp(40px,5vw,88px)}
 .about-page.premium .about-partner-logo{padding:8px 0 8px clamp(40px,5vw,88px);border-left:0;position:relative;align-self:stretch;justify-content:center}
 .about-page.premium .about-partner-logo:before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,#1c293c,#087fe5)}
}
.about-page.premium .mertako-caption{text-align:left}
.about-page.premium .mertako-button{margin:0}
@media(max-width:1100px){.about-page.premium .about-partner-logo{margin-top:28px}}