/* ==========================================================================
   Gemeinsame Premium-Bausteine (Branch premium-uiux)
   Gilt für jede Seite, deren <main> die Klasse „premium“ trägt.
   Anfragekarte mit Akzentlinie und randbündigem Bild, Abschluss mit weichem
   Übergang in den Footer. Formularfelder, Versand und Empfänger bleiben in
   homepage-final.css bzw. contact-handler.php unverändert.
   ========================================================================== */
.premium{
 --ink:#1c293c;--muted:#5c6979;--line:#dbe3ea;
 --section:clamp(72px,8vw,112px);
 --ease-out:cubic-bezier(.22,1,.36,1);
 --headline-gradient:var(--heading-gradient-light);
 --home-max:var(--page-max,1720px);
 --edge:max(24px,calc((100% - var(--home-max)) / 2));
 /* Gemeinsame Hero-Größe (Startseite und Leistungsseiten): Bildfläche 3:2 und Abstände */
 --hero-media-w:min(828px,calc(.468 * min(var(--home-max),100vw - 48px)));
 --hero-pad-top:clamp(36px,3.8vw,66px);
 --hero-pad-bottom:clamp(36px,3.4vw,60px);
 --hero-h1:clamp(40px,4.2vw,66px);
 --hero-actions-gap:28px;
}
@media(max-width:800px){.premium{--section:64px}}
/* Haupt-CTA und Telefonzeile, wie im Hero der Startseite */
.home-button{display:inline-flex;align-items:center;gap:16px;min-height:54px;padding:15px 26px;
 background:#087fe5;color:#fff;font-weight:700;font-size:15px;border-radius:2px;
 transition:background-color .2s ease}
.home-button b{color:#fff;font-size:20px;line-height:1;transition:transform .2s var(--ease-out)}
.home-button:hover,.home-button:focus-visible{background:#066dca}
.home-button:hover b,.home-button:focus-visible b{transform:translateX(4px)}
.home-button:active{background:#0560b3}

.home-hero-phone{display:inline-flex;align-items:baseline;gap:12px;padding-block:6px;color:var(--ink);line-height:1.2}
.home-hero-phone span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.home-hero-phone strong{font-size:19px;font-weight:700;color:#087fe5;letter-spacing:.01em;
 background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s var(--ease-out)}
.home-hero-phone:hover strong,.home-hero-phone:focus-visible strong{background-size:100% 1px}

/* ==========================================================================
   Hero-Foto mit versetzter Konturlinie (Leistungsseiten und Über uns)
   Rahmen im Verlauf der blau hervorgehobenen Überschriften, 16 px nach oben und
   rechts versetzt, zur Hälfte hinter dem Bild; links läuft er leise aus.
   ========================================================================== */
.premium :is(.service-entry-image,.about-hero-image){--frame-offset:16px;--frame-line:2px;
 /* exakt der Verlauf der blau hervorgehobenen Überschriften (service-page.css) */
 --frame-gradient:linear-gradient(105deg,#1c293c 0%,#1c293c 20%,#087fe5 55%,#087fe5 100%);
 position:relative;width:100%;max-width:760px;height:auto;aspect-ratio:3/2;justify-self:end;margin:0;overflow:visible;isolation:isolate}
.premium :is(.service-entry-image,.about-hero-image):after{content:none}
.premium :is(.service-entry-image,.about-hero-image) img{position:static;display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%;border-radius:0;clip-path:none;box-shadow:0 30px 56px -36px rgba(28,41,60,.4)}
/* Konturrahmen im Headline-Verlauf, um 16 px nach oben und rechts versetzt, zur Hälfte hinter dem Bild.
   Links läuft er leise aus, rechts steht er kräftig. */
.premium :is(.service-entry-image,.about-hero-image):before{content:'';position:absolute;z-index:-1;pointer-events:none;
 inset:calc(var(--frame-offset) * -1) calc(var(--frame-offset) * -1) var(--frame-offset) var(--frame-offset);
 border:var(--frame-line) solid transparent;border-radius:0 0 18px 0;clip-path:none;
 background:linear-gradient(#fff,#fff) padding-box,var(--frame-gradient) border-box;
 -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.22) 0%,#000 62%);mask-image:linear-gradient(90deg,rgba(0,0,0,.22) 0%,#000 62%)}
@media(min-width:1600px){.premium :is(.service-entry-image,.about-hero-image){max-width:800px}}
@media(max-width:800px){.premium :is(.service-entry-image,.about-hero-image){--frame-offset:12px;--frame-line:1.5px;max-width:none;justify-self:stretch;aspect-ratio:4/3}}

/* Die Anfragekarte schiebt sich mit 120 px (mobil 72 px) über den vorherigen Abschnitt.
   Dieser braucht deshalb entsprechend Innenabstand nach unten. */
.premium .home-contact{position:relative;z-index:1;margin-top:-120px;margin-bottom:var(--section);padding:0 0 0 clamp(32px,4vw,56px);
 grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,3.5vw,56px);align-items:stretch;
 background:#fff;border:1px solid var(--line);box-shadow:0 44px 80px -52px rgba(28,41,60,.42),0 2px 10px -6px rgba(28,41,60,.08)}
.premium .home-contact:before{content:'';position:absolute;top:-1px;left:-1px;width:min(220px,40%);height:3px;background:linear-gradient(90deg,#087fe5,#8fd7f5 70%,transparent)}
.premium .home-contact:after{display:none}
.premium .home-contact-copy,.premium .home-contact form{padding-block:clamp(40px,4.5vw,64px)}
.premium .home-contact-copy{align-self:center}
.premium .home-contact form{align-self:center}
.premium .home-contact h2{width:fit-content;padding-bottom:.14em;background:var(--headline-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.premium .home-contact img{display:block;width:100%;height:100%;min-height:320px;object-fit:cover;object-position:82% 50%;clip-path:none}
.premium .home-contact input,.premium .home-contact textarea,.premium .home-contact-actions button,.premium .home-whatsapp{font-family:inherit}
.premium .home-contact-actions button,.premium .home-whatsapp{letter-spacing:.06em;border-radius:2px}
.premium .home-contact-actions button b,.premium .home-whatsapp b{transition:transform .2s var(--ease-out)}
.premium .home-contact-actions button:hover b,.premium .home-contact-actions button:focus-visible b,.premium .home-whatsapp:hover b{transform:translateX(3px)}
@media(hover:hover) and (pointer:fine){
 .premium .home-contact-actions button:hover,.premium .home-whatsapp:hover{transform:none}
}
/* Einheitliche Typografie für Anfrage und Abschluss, unabhängig vom Seitentyp */
.premium .home-contact .home-eyebrow,.premium .home-closing .home-eyebrow{font-size:12px;letter-spacing:.13em;color:#087fe5;margin:0 0 20px}
.premium .home-contact-copy>p:not(.home-eyebrow),.premium .home-closing>p:not(.home-eyebrow){font-size:16px}
.premium .home-closing h2{text-wrap:balance}
.premium .home-closing{border-top:0;background:linear-gradient(180deg,#fff 0%,#f3f6f8 100%);padding-bottom:calc(var(--section) * .9)}
.premium ~ .global-footer{border-top-color:transparent}
.premium ~ .global-footer .global-footer-inner{border-top:0}
@media(max-width:1100px){
 .premium .home-contact{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
 .premium .home-contact-copy{grid-column:1;grid-row:1;padding-bottom:0}
 .premium .home-contact form{grid-column:1;grid-row:2;padding-top:0}
 .premium .home-contact img{grid-column:2;grid-row:1 / span 2}
}
@media(max-width:800px){
 .premium .home-contact{margin-top:-72px;padding:0 20px;grid-template-columns:1fr;gap:24px}
 .premium .home-contact-copy,.premium .home-contact form,.premium .home-contact img{grid-column:auto;grid-row:auto}
 .premium .home-contact-copy{padding-block:40px 0}
 .premium .home-contact form{padding-block:0}
 .premium .home-contact img{order:3;width:calc(100% + 40px);margin:0 -20px;min-height:0;height:auto;aspect-ratio:5/4;object-position:92% 50%}
}
@media(max-width:640px){
 .premium .home-closing h2 br{display:none}
}