/* ==========================================================================
   Leistungsseiten · eigene Seitenkomposition (Branch premium-uiux)
   Gilt für Leistungsseiten, deren <main> zusätzlich die Klasse „premium“ trägt
   (derzeit: Entrümpelung).

   Kompositionsprinzip: Die Seite erzählt „von voll bis frei“ und folgt dabei
   einem einzigen Raster und einer einzigen Abstandslogik.
     1. Hero          weiß      Text links, ein ruhiges Foto rechts, gleich hoch
     2. Leistungen    hellblau  Kopfzeile + sechs Karten, scharfe Kanten
     3. Von voll bis frei  weiß  gleiche Kopfzeile, drei gleich große Bilder in Leserichtung
     4. Anfrage       Karte, die genau auf der Kante zwischen Weiß und Blau steht
     5. Abschluss     blau, läuft in den Footer aus
   Abschnitte 2 und 3 teilen dieselbe Kopfzeile (Überschrift links, Einleitung
   rechts). Keine Zierformen: Gliederung entsteht durch Flächen, Linien und Abstände.
   ========================================================================== */
.premium.service-page{
 --pad:clamp(56px,5.5vw,84px);          /* vertikaler Abschnittsabstand */
 --head-gap:clamp(28px,3vw,44px);       /* Kopfzeile → Inhalt */
 --tint:#f4f8fb;                        /* Fläche der Leistungen */
 --zone:#edf4fa;                        /* Fläche von Anfrage und Abschluss */
 --straddle:210px;                      /* so weit schiebt sich die Anfragekarte über den Ergebnis-Abschnitt */
 --on-blue:100px;                       /* davon liegt auf der blauen Fläche */
}
.premium.service-page .service-container{width:min(var(--home-max),calc(100% - 48px));max-width:none}

/* Gemeinsame Kopfzeile für „Leistungen“ und „Von voll bis frei“.
   Bis 1100 px steht alles untereinander im normalen Textfluss (keine Grid-Zeilen, damit nichts
   übereinanderliegen kann). Erst darüber werden Überschrift und Text in zwei Spalten gesetzt. */
.premium .service-overview-copy>p:not(.service-eyebrow),.premium .service-result-copy>p:not(.service-eyebrow){margin:18px 0 0;color:var(--muted);max-width:40em;line-height:1.65}
.premium .service-overview-copy .service-eyebrow,.premium .service-result-copy .service-eyebrow{margin-bottom:18px}
.premium .service-overview-copy h2,.premium .service-result-copy h2{margin:0}
.premium .service-result-copy>p.service-lead{font-size:21px;font-weight:650;line-height:1.4;color:var(--ink)}
.premium .service-result-copy>p.service-lead+p{margin-top:10px}
.premium .service-result-copy .service-result-meta{margin:22px 0 0;padding:0;border:0}
@media(min-width:1101px){
 .premium .service-overview-copy,.premium .service-result-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);column-gap:clamp(40px,6vw,120px);align-content:end;align-items:end}
 .premium .service-overview-copy .service-eyebrow,.premium .service-result-copy .service-eyebrow{grid-column:1;grid-row:1}
 .premium .service-overview-copy h2,.premium .service-result-copy h2{grid-column:1;grid-row:2}
 .premium .service-overview-copy>p:not(.service-eyebrow),.premium .service-result-copy>p:not(.service-eyebrow){grid-column:2;grid-row:2;align-self:end;margin:0 0 6px;max-width:32em}
 .premium .service-overview-copy>p:last-child{grid-row:1 / span 2}
 .premium .service-result-copy>p.service-lead{grid-row:1;align-self:start;margin-bottom:12px}
 .premium .service-result-copy .service-result-meta{grid-column:1;grid-row:3}
}

/* --------------------------------------------------------------------------
   1 · Hero
   -------------------------------------------------------------------------- */
.premium .service-entry{background:#fff}
.premium .service-breadcrumb{padding-top:16px}
.premium .service-entry-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(48px,7vw,128px);align-items:center;
 min-height:calc(var(--hero-media-w) * 2 / 3);padding-block:max(16px,calc(var(--hero-pad-top) - 36px)) var(--hero-pad-bottom)}
.premium .service-entry-copy{max-width:680px;padding:0;align-self:start}
.premium .service-entry-copy .service-eyebrow{margin-bottom:18px}
.premium .service-entry-copy 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}
.premium .service-entry-copy h1:after{display:none}
.premium .service-entry-copy>p:not(.service-eyebrow){font-size:18px;line-height:1.6;color:var(--muted);max-width:34em}
.premium .home-hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:var(--hero-actions-gap)}

/* ein Foto, schlicht, in fester Proportion */


/* --------------------------------------------------------------------------
   2 · Leistungen
   -------------------------------------------------------------------------- */
.premium .service-overview-wrap{background:var(--tint);border-block:1px solid #e1e9f0}
.premium .service-overview{display:block;padding-block:var(--pad)}
.premium .service-overview-copy{margin-bottom:var(--head-gap)}
.premium .service-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.premium .service-benefits li{position:relative;display:flex;flex-direction:column;gap:16px;padding:28px 28px 30px;background:#fff;border:1px solid #dbe5ee;
 transition:border-color .25s ease,box-shadow .35s var(--ease-out)}
.premium .service-benefits li:before{content:'';position:absolute;top:-1px;left:-1px;width:44px;height:3px;background:linear-gradient(90deg,#087fe5,#8fd7f5);transition:width .4s var(--ease-out)}
.premium .service-check{width:40px;height:40px;margin:0;background:#e8f2fc}
.premium .service-check:after{left:14px;top:9px;width:8px;height:15px;border-color:#087fe5;border-width:0 2.5px 2.5px 0}
.premium .service-benefits h3{font-size:20px;line-height:1.25;margin:0 0 8px;padding-bottom:.12em}
.premium .service-benefits p{max-width:none;color:var(--muted);font-size:15px;line-height:1.6}
@media(hover:hover) and (pointer:fine){
 .premium .service-benefits li:hover{border-color:#b9d3e8;box-shadow:0 18px 36px -26px rgba(28,41,60,.35)}
 .premium .service-benefits li:hover:before{width:96px}
}

/* --------------------------------------------------------------------------
   3 · Von voll bis frei: Kopfzeile, darunter drei gleich große Bilder mit Beschriftung.
   Der Abschnitt endet auf weiß, die letzten Pixel gehören der blauen Fläche der Anfrage.
   -------------------------------------------------------------------------- */
.premium .service-result-wrap{border:0;background:#fff}
.premium .service-result{display:flex;flex-direction:column;gap:var(--head-gap);padding-block:var(--pad) calc(var(--straddle) + clamp(36px,5.5vw,80px))}
.premium .service-result-copy{order:1;width:100%;max-width:none;margin:0}
.premium .service-result-sequence{order:2}
.premium .service-sequence-images,.premium .service-sequence-images.story-mosaic{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:20px}
.premium .service-sequence-images figure:first-child{grid-row:auto}
.premium .service-sequence-images figure{margin:0;overflow:hidden}
.premium .service-sequence-images img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.premium .service-sequence-images figure:hover img{transform:scale(1.03)}}
.premium .service-sequence-timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:18px;padding:0}
.premium .service-sequence-timeline:before{display:none}
.premium .service-sequence-timeline>div{display:flex;align-items:baseline;gap:14px;padding:0}
.premium .service-sequence-timeline>div:before{display:none}
.premium .service-sequence-timeline span{font:200 38px/1 'Manrope',Arial,sans-serif;letter-spacing:-.04em;color:#087fe5}
.premium .service-sequence-timeline b{font-size:12px;letter-spacing:.12em;color:var(--ink)}

/* Hero-Foto der Leistungsseiten: 20 % kleiner als die Spalte, Rahmen proportional (16 → 13 px, 2 → 1,6 px).
   Das Foto sitzt bündig am rechten Spaltenrand, der Rahmen ragt um seinen Versatz darüber hinaus. */
.premium.service-page .service-entry-image{--frame-offset:13px;--frame-line:1.6px;width:clamp(374px,34.7vw,615px);justify-self:start}

/* Bildformate der Leistungsseiten: die Quelldatei der Firmenauflösung trägt am unteren Rand einen
   Streifen eines zweiten Fotos. Mit 8:5 und Anker oben wird er sauber abgeschnitten. */
.company-page.premium .service-entry-image{aspect-ratio:8/5}
.company-page.premium .service-entry-image img{object-position:50% 0}

/* --------------------------------------------------------------------------
   4 · Anfrage: die Karte steht auf der Kante zwischen Weiß und Blau
   -------------------------------------------------------------------------- */
.premium.service-page .service-finale{position:relative;margin-top:calc(var(--straddle) * -1);background:linear-gradient(180deg,#fff 0,#fff calc(var(--straddle) - var(--on-blue)),var(--zone) calc(var(--straddle) - var(--on-blue)))}
.premium.service-page .home-contact{width:min(var(--home-max),calc(100% - 48px));max-width:none;margin-top:0;margin-bottom:0}

/* --------------------------------------------------------------------------
   5 · Abschluss: blaue Fläche, die in den Footer ausläuft
   -------------------------------------------------------------------------- */
.premium.service-page .home-closing{background:linear-gradient(180deg,var(--zone) 0,#f3f6f8 100%);padding-block:var(--pad) calc(var(--pad) * .9)}

/* --------------------------------------------------------------------------
   Große Bildschirme: Bild wächst moderat mit, damit keine Lücke zum Text entsteht
   -------------------------------------------------------------------------- */
@media(min-width:1600px){
 .premium .service-entry-copy{max-width:700px}
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media(max-width:1100px){
 .premium .service-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */
@media(max-width:800px){
 .premium.service-page{--straddle:150px;--on-blue:70px}
 .premium.service-page .service-entry-image{--frame-offset:10px;--frame-line:1.5px;width:80%;justify-self:end}
 .premium.service-page .service-container,.premium.service-page .home-contact{width:calc(100% - 40px)}
 .premium .service-entry-grid{grid-template-columns:1fr;justify-content:stretch;row-gap:24px;min-height:0;padding-block:16px 28px}
 .premium .service-entry-copy h1{font-size:clamp(38px,10.5vw,52px);margin-bottom:8px}
 .premium .service-entry-copy>p:not(.service-eyebrow){font-size:16px}
 .premium .home-hero-actions{margin-top:24px}
}
@media(max-width:640px){
 .premium.service-page .service-entry-image{width:90%}
 .premium .home-button{width:100%;justify-content:space-between}
 .premium .service-benefits{grid-template-columns:1fr;gap:14px}
 .premium .service-benefits li{flex-direction:row;align-items:flex-start;gap:14px;padding:20px 20px 22px}
 .premium .service-check{flex:none;width:34px;height:34px}
 .premium .service-check:after{left:12px;top:7px;width:7px;height:13px}
 .premium .service-benefits h3{font-size:18px;margin-bottom:6px}
 .premium .service-sequence-images,.premium .service-sequence-images.story-mosaic{grid-template-columns:1fr 1fr;gap:10px}
 .premium .service-sequence-images figure:first-child{grid-column:1 / span 2}
 .premium .service-sequence-timeline{grid-template-columns:1fr;gap:12px;margin-top:20px}
 .premium .service-sequence-timeline span{font-size:32px;min-width:46px}
}
@media(prefers-reduced-motion:reduce){.premium .service-sequence-images img,.premium .service-benefits li,.premium .service-benefits li:before{transition:none}}

/* --------------------------------------------------------------------------
   Entrümpelung: kompakter Seitenabschluss statt Anfragebox (nur diese Seite)
   -------------------------------------------------------------------------- */
.entruempelung-page.premium .service-result,.company-page.premium .service-result,.umzugsservice-page.premium .service-result,.housemeister-page.premium .service-result{padding-block:var(--pad)}
.premium .service-closing{background:#fff;padding:0 0 var(--pad)}
.premium .service-closing-inner{position:relative;width:min(var(--home-max),calc(100% - 48px));margin-inline:auto;display:grid;gap:24px;align-items:center;padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.premium .service-closing-inner:before{content:'';position:absolute;top:-1px;left:0;width:min(220px,40%);height:3px;background:linear-gradient(90deg,#087fe5,#8fd7f5 70%,transparent)}
.premium .service-closing h2{font:750 clamp(32px,3.6vw,48px)/1.06 '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}
.premium .service-closing-copy>p{margin:6px 0 0;color:var(--muted);font-size:17px;line-height:1.65;max-width:34em}
@media(min-width:1101px){.premium .service-closing-inner{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(40px,6vw,96px)}}
@media(max-width:640px){.premium .service-closing .home-button{width:100%;justify-content:space-between}}

/* --------------------------------------------------------------------------
   Hero der Entrümpelung: klare Bildfläche mit versetztem Verlaufsrahmen
   Gemeinsam mit der Startseite sind nur Größe und Abstände (--hero-media-w, --hero-pad-*).
   Die Bildform ist seitenspezifisch: hier kantig statt Bogen, jede Leistungsseite erhält
   später ihre eigene Rahmenlogik (Klassen .service-entry-media / .service-media-*).
   -------------------------------------------------------------------------- */
.premium .service-entry-media{--frame-offset:16px;--frame-line:1.6px;--frame-gradient:linear-gradient(105deg,#1c293c 0%,#1c293c 20%,#087fe5 55%,#087fe5 100%);
 position:relative;width:var(--hero-media-w);aspect-ratio:3/2;justify-self:end;margin:0}
.premium .service-entry-media figure{margin:0}
.premium .service-entry-media figcaption{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);line-height:1}

.premium .service-media-before,.premium .service-media-after{margin:0}
/* Entrümpelung: „Der Schnitt“. Beide Fotos füllen die Bildfläche und greifen entlang einer schrägen
   Naht ineinander, getrennt durch einen weißen Steg. Ein Verlaufsstrich in der Naht ragt oben und
   unten über die Bilder hinaus. Links das Vorher (größer als zuvor), rechts das Nachher mit Fokus auf
   Raum und Fenster statt auf den Parkettboden. Keine Beschriftung, kein Bogen, keine Karte. */
.entruempelung-page.premium .service-entry-media{--slant:8%;--gap:1.6%;--seam-x:48%}
.entruempelung-page.premium .service-media-before{position:absolute;left:0;top:0;bottom:0;width:var(--seam-x);
 clip-path:polygon(0 0,100% 0,calc(100% - var(--slant) * 100 / 48) 100%,0 100%)}
.entruempelung-page.premium .service-media-before img{display:block;width:100%;height:100%;object-fit:cover;object-position:40% 55%}
.entruempelung-page.premium .service-media-after{position:absolute;right:0;top:0;bottom:0;width:62%;overflow:hidden;
 clip-path:polygon(calc((var(--seam-x) + var(--gap) - 38%) * 100 / 62) 0,100% 0,100% 100%,calc((var(--seam-x) - var(--slant) + var(--gap) - 38%) * 100 / 62) 100%)}
.entruempelung-page.premium .service-media-after img{display:block;width:100%;height:122%;object-fit:cover;object-position:62% 0}
.entruempelung-page.premium .service-media-seam{position:absolute;z-index:2;pointer-events:none;width:2px;top:-18px;bottom:-18px;left:calc(var(--seam-x) + var(--gap) / 2 - var(--slant) / 2);
 background:linear-gradient(180deg,#1c293c,#087fe5);transform:rotate(6.8deg)}
@media(max-width:800px){
 .premium .service-entry-media{width:100%;aspect-ratio:16/10;justify-self:stretch}
 .entruempelung-page.premium .service-media-seam{top:-12px;bottom:-12px}
}

/* --------------------------------------------------------------------------
   Hero der Firmenauflösung: „Eingestanzt“
   Das Hauptbild hat unten links eine rechteckige Aussparung, in der das zweite Bild bündig
   sitzt, getrennt durch einen weißen Steg. Das Ensemble bleibt ein klares Rechteck, die
   Kante wirkt gestanzt. Architektonische Eckwinkel im Headline-Verlauf oben und rechts.
   Kein Bogen, keine Rundung, keine Beschriftung.
   -------------------------------------------------------------------------- */
.company-page.premium .service-entry-media{--notch-w:40%;--notch-h:42%;--gap:14px;--bracket:16px;--frame-line:2px;
 --frame-gradient:linear-gradient(105deg,#1c293c 0%,#1c293c 20%,#087fe5 55%,#087fe5 100%)}
.company-page.premium .service-media-main{position:absolute;inset:0;
 clip-path:polygon(0 0,100% 0,100% 100%,var(--notch-w) 100%,var(--notch-w) calc(100% - var(--notch-h)),0 calc(100% - var(--notch-h)))}
.company-page.premium .service-media-main img{display:block;width:100%;height:100%;object-fit:cover;object-position:34% 50%}
.company-page.premium .service-media-inset{position:absolute;left:-14px;bottom:16px;width:calc(var(--notch-w) - var(--gap) + 14px);height:calc(var(--notch-h) - var(--gap));transform:rotate(-1deg)}
.company-page.premium .service-media-inset img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 50%;box-shadow:0 0 0 4px #fff,0 24px 44px -22px rgba(28,41,60,.5)}
/* Eckwinkel: Linien oben und rechts, um 16 px nach außen versetzt, laufen zur Ecke hin aus */
.company-page.premium .service-entry-media:before,.company-page.premium .service-entry-media:after{content:'';position:absolute;pointer-events:none;background:var(--frame-gradient)}
.company-page.premium .service-entry-media:before{top:calc(var(--bracket) * -1);left:36%;right:calc(var(--bracket) * -1);height:var(--frame-line)}
.company-page.premium .service-entry-media:after{top:calc(var(--bracket) * -1);right:calc(var(--bracket) * -1);bottom:42%;width:var(--frame-line);background:linear-gradient(180deg,#1c293c,#087fe5)}
@media(max-width:800px){
 .company-page.premium .service-media-inset{left:-8px;bottom:10px}
 .company-page.premium .service-entry-media{--notch-w:42%;--notch-h:40%;--gap:10px;--bracket:12px;--frame-line:1.5px;width:calc(100% - 12px);aspect-ratio:4/3}
}

/* --------------------------------------------------------------------------
   Hero des Umzugsservice: „Soft Editorial“
   Hauptfoto mit weich gerundeten Ecken (22 px), dahinter ein nach links unten versetzter Rahmen
   im Headline-Verlauf, der die Rundung aufnimmt. Eine zweite Momentaufnahme (Umzugswagen)
   überlagert rechts unten den Bildrand. Keine Bogenform, keine Punkte.
   -------------------------------------------------------------------------- */
.umzugsservice-page.premium .service-entry-media{--off:16px;--radius:22px;--frame-line:1.6px;isolation:isolate;
 --frame-gradient:linear-gradient(105deg,#1c293c 0%,#1c293c 20%,#087fe5 55%,#087fe5 100%)}
.umzugsservice-page.premium .service-media-main{position:absolute;top:0;left:var(--off);right:var(--off);bottom:var(--off)}
.umzugsservice-page.premium .service-media-main img{display:block;width:100%;height:100%;object-fit:cover;object-position:34% 50%;border-radius:var(--radius);box-shadow:0 30px 56px -36px rgba(28,41,60,.4)}
.umzugsservice-page.premium .service-media-main:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:var(--off) var(--off) calc(var(--off) * -1) calc(var(--off) * -1);
 border:var(--frame-line) solid transparent;border-radius:var(--radius);
 background:linear-gradient(#fff,#fff) padding-box,var(--frame-gradient) border-box;
 -webkit-mask-image:linear-gradient(270deg,rgba(0,0,0,.2) 0%,#000 60%);mask-image:linear-gradient(270deg,rgba(0,0,0,.2) 0%,#000 60%)}
.umzugsservice-page.premium .service-media-inset{position:absolute;right:0;bottom:0;width:38%;aspect-ratio:4/3;transform:rotate(1deg)}
.umzugsservice-page.premium .service-media-inset img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%;border-radius:16px;box-shadow:0 0 0 5px #fff,0 24px 44px -22px rgba(28,41,60,.5)}
@media(max-width:800px){
 .umzugsservice-page.premium .service-entry-media{--off:12px;--radius:16px;width:100%;aspect-ratio:4/3;justify-self:stretch}
 .umzugsservice-page.premium .service-media-inset{width:44%}
 .umzugsservice-page.premium .service-media-inset img{border-radius:12px}
}

/* --------------------------------------------------------------------------
   Hero des Hausmeisterservice: „Das Lineal“
   Großes Hauptfoto, davor eine schmale, hohe Bildkachel (Außenbereich) mit weißem Rand,
   rechts leicht nach oben versetzt. Ein feines Verlaufs-Lineal läuft links am Hauptfoto
   entlang und knickt unten in eine Grundlinie ab: klare Kanten, kein Bogen, keine Rundung.
   -------------------------------------------------------------------------- */
.housemeister-page.premium .service-entry-media{--off:16px;--line:2px}
.housemeister-page.premium .service-media-main{position:absolute;top:0;left:var(--off);bottom:var(--off);width:calc(80% - var(--off))}
.housemeister-page.premium .service-media-main img{display:block;width:100%;height:100%;object-fit:cover;object-position:46% 50%;box-shadow:0 30px 56px -36px rgba(28,41,60,.4)}
.housemeister-page.premium .service-media-tile{position:absolute;right:0;top:40%;bottom:0;width:34%;padding:6px;background:#fff;box-shadow:0 24px 44px -24px rgba(28,41,60,.5)}
.housemeister-page.premium .service-media-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:34% 50%}
.housemeister-page.premium .service-media-rule{position:absolute;pointer-events:none;left:0;top:-22px;bottom:0;width:var(--line);background:linear-gradient(180deg,#1c293c,#087fe5)}
.housemeister-page.premium .service-media-rule:after{content:'';position:absolute;left:0;bottom:0;width:calc(var(--off) + 58%);height:var(--line);background:linear-gradient(90deg,#087fe5,#1c293c 40%,rgba(28,41,60,0))}
@media(max-width:800px){
 .housemeister-page.premium .service-entry-media{--off:12px;--line:1.5px;width:100%;aspect-ratio:4/3;justify-self:stretch}
 .housemeister-page.premium .service-media-tile{width:38%;padding:5px}
}