/* ========================================================================= White Silhouette – Mobiler Feinschliff Wird als letztes Stylesheet im geladen und gewinnt dadurch bei gleicher Spezifitaet gegen die seiteneigenen Regeln. WICHTIG: Jede Regel steht in einer Media Query (max-width 900 / 760 / 680 / 560 px). Einzige Ausnahme ist der Block "Hero-CTA (Grundzustand)" – er versteckt ein Element, das es vor diesem Update ueberhaupt nicht gab, und kann die Desktop-Ansicht deshalb nicht veraendern. ========================================================================= */ /* --- Hero-CTA (Grundzustand): neu eingefuegter Button, Desktop unveraendert --- */ .hero .hero-cta{display:none} /* ========================================================================= 1 + 2 Header: Logo unverzerrt, kompakter Termin-Button, Zeile ausbalanciert ========================================================================= */ @media(max-width:900px){ /* Kopfleiste auf 62 px statt 86 px */ .site-header{padding:0} .site-header .nav{height:62px;padding:0 16px;gap:10px} .site-header .nav-right{gap:6px} /* Logo: 1000x175 -> bei 150 px Breite rund 26 px Hoehe (vorher 158x46 gestaucht) */ .site-header .logo{flex:0 0 auto;min-width:0;line-height:0} .site-header .logo img{width:150px;max-width:150px;height:auto;object-fit:contain} /* Termin-Button: kompakt, kurzes Label, ca. 39 px hoch */ .site-header .nav-right .btn{flex:0 0 auto;padding:12px 15px;font-size:11px; letter-spacing:.13em;white-space:nowrap;line-height:1.2} .site-header .nav-right .btn-long{display:none} /* Burger als saubere 44er-Tippflaeche */ .site-header .burger{display:flex;align-items:center;justify-content:center; width:44px;height:44px;margin-right:-8px;font-size:22px;padding:0;line-height:1} } /* ========================================================================= 4 Hero der Unterseiten: vollflaechig, Inhalt unten, mit Termin-CTA ========================================================================= */ @media(max-width:900px){ /* Der Header liegt (body.home .site-header{position:fixed}) transparent ueber dem Hero – der Hero darf deshalb die volle Bildschirmhoehe einnehmen. */ .hero{min-height:100vh;align-items:flex-end} .hero{min-height:100svh} /* Verlauf von unten statt flaechigem Schleier */ .hero::after{background:linear-gradient(180deg, rgba(18,18,18,.46) 0%, rgba(18,18,18,.20) 30%, rgba(18,18,18,.30) 52%, rgba(18,18,18,.74) 82%, rgba(18,18,18,.88) 100%)} /* 62 px Header + Luft, greift nur wenn der Text laenger als der Hero wird */ .hero .wrap{padding-top:86px;padding-bottom:38px} .hero .eyebrow{font-size:10.5px;letter-spacing:.22em;margin-bottom:10px;opacity:.88} .hero h1{font-size:32px;line-height:1.06;letter-spacing:.03em} .hero p{font-size:14.5px;line-height:1.62;margin-top:14px;max-width:36ch} /* Termin-Button nur mobil einblenden */ .hero .hero-cta{display:inline-block;margin-top:24px;width:100%;max-width:290px; padding:16px 20px;font-size:11.5px;letter-spacing:.2em} /* dezenter Scroll-Hinweis am unteren Rand */ .hero::before{content:"";position:absolute;left:50%;bottom:12px;width:1px;height:26px; z-index:3;transform:translateX(-50%); background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.75)); opacity:.7} /* Magazinbeitraege: gleiche Hoehe/Ausrichtung, kleinere Schrift, kein CTA */ .hero.art-hero h1{font-size:27px;line-height:1.14;letter-spacing:.02em} .hero.art-hero .wrap{padding-bottom:44px} } @media(max-width:380px){ .hero h1{font-size:29px} .hero.art-hero h1{font-size:25px} } /* ========================================================================= 5 Kollektion: groessere Kacheln, Schnitt dauerhaft sichtbar ========================================================================= */ @media(max-width:680px){ /* Seitenrand 28 -> 14 px und Abstaende 26/22 -> 14/10 px ergibt bei 375 px Kacheln von rund 168 x 225 px statt 149 x 198 px */ .shop{padding:0 14px} .shop .grid{grid-template-columns:repeat(2,1fr);gap:14px 10px} .dressgrid{padding:0 14px;gap:16px 10px} .grid .card-cap{padding:14px 12px 13px} .card-cap h3{font-size:18px} /* Ohne Hover blieb der Schnitt mobil unsichtbar – jetzt dauerhaft */ .grid .card-cap .card-meta{opacity:.85;max-height:26px;margin:0;font-size:10px; letter-spacing:.14em;transition:none} } /* ========================================================================= 6 Kollektions-Popup: Kleid fast in voller Breite, Termin-Button sichtbar ========================================================================= */ @media(max-width:760px){ /* Die Polsterung fuer die Nachbarkleid-Vorschau frisst mobil 192 der 375 px. .gal-step ist hier ohnehin ausgeblendet, nur die Pfeile bleiben. */ .gal-single{padding:6px 14px!important} /* Pfeile halbtransparent ueber dem Bildrand */ .gal-prev{left:8px!important} .gal-next{right:8px!important} .gal-zur{left:6px!important} .gal-vor{right:6px!important} .gal-nav{width:40px;height:40px;font-size:18px; background:rgba(16,16,16,.46);border-color:rgba(255,255,255,.34); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} /* Kopf- und Fusszeile schmaler, damit .gal-book ohne Scrollen sichtbar bleibt */ .gal-top{padding:14px 16px} .gal-title{font-size:10px;letter-spacing:.2em} .gal-bottom{padding:0 16px} .gal-thumbs{padding:10px 0 4px;justify-content:flex-start} .gal-thumbs img{height:50px} .gal-foot{padding:6px 0 16px;gap:10px} .gal-count{font-size:17px} .gal-book{padding:14px 22px;font-size:11px;letter-spacing:.16em} } /* ========================================================================= 7 Video-Baender: Video vollstaendig sichtbar, Beschriftung darunter ========================================================================= */ @media(max-width:900px){ /* Die 640er-Regel .vband video{height:clamp(280px,54vh,420px)} hat die korrekte height:auto-Regel von .vband-full ueberschrieben -> schwarze Balken */ .vband video{height:auto;object-fit:contain} .vband:not(.vband-full) video{aspect-ratio:16/9} /* Verlauf wuerde sonst ueber dem Video liegen */ .vband::after,.vband-cta::after{display:none} /* Beschriftung unter das Video statt als Overlay */ .vband{line-height:1.4} .vb-cap{position:static;padding:20px 22px 26px;background:var(--ink,#212121); pointer-events:auto} .vb-eyebrow{font-size:10.5px;letter-spacing:.22em;margin-bottom:8px} .vb-title{font-size:23px;line-height:1.18;max-width:26ch} .vband-cta .vb-btn{margin-top:18px;width:100%;max-width:290px;text-align:center; padding:15px 20px;font-size:11.5px;letter-spacing:.18em} } /* ========================================================================= 8 Allgemeine Abstaende und Typografie auf Mobil ========================================================================= */ @media(max-width:900px){ /* Abschnittsabstaende: clamp() greift mobil zu gross */ .sec{padding:54px 0} .lp-sec{padding:56px 0} /* Ueberschriften auf Handybreite herunterziehen */ .lp-h2{font-size:26px;line-height:1.16} .lp-eyebrow{font-size:10.5px;letter-spacing:.22em} .lp-sub{font-size:14.5px;line-height:1.65} /* Footer-Spalten enger stapeln */ .site-footer .foot-grid{gap:26px} } @media(max-width:560px){ /* Seitenraender leicht schmaler – gibt Bildern und Text mehr Luft */ .wrap{padding:0 22px} .site-header .nav{padding:0 16px} .sec{padding:46px 0} .lp-sec{padding:48px 0} /* Buttons in Reihen mobil voll ausnutzen */ .lp-cta-row .btn{min-width:0} } /* ===== Startseiten-Hero mobil: volle Höhe, Buttons nebeneinander, Bewertung mittig über der Presseleiste, Logos als Laufband ===== */ @media(max-width:900px){ .lp-hero{min-height:100vh;min-height:100svh;position:relative; display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch} .lp-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lp-hero-center{position:relative;z-index:2;margin-top:auto; width:100%;max-width:none;padding:0 20px 14px;text-align:center} .lp-hero-wordmark{width:min(84vw,520px)} /* Beide Knöpfe in einer Zeile, gleich breit */ .lp-cta-row{display:flex;flex-wrap:nowrap;gap:9px;justify-content:center;margin-bottom:16px} .lp-cta-row .btn{flex:1 1 0;min-width:0;padding:13px 8px;font-size:10.5px;letter-spacing:.11em; text-align:center;white-space:nowrap} /* Bewertungszeile mittig, direkt über dem unteren Videorand */ .lp-trust{flex-direction:column;gap:5px;justify-content:center;align-items:center; text-align:center;font-size:12px;line-height:1.5;margin:0 auto;max-width:32ch} .lp-trust .stars{letter-spacing:3px} /* Presseleiste als durchlaufendes Band in einer Zeile */ .lp-hero-press{position:relative;z-index:3;width:100%; display:block;padding:12px 0 calc(14px + env(safe-area-inset-bottom,0px)); background:none; overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} .lp-hero-press .lp-press-label{display:block;width:100%;text-align:center;font-size:12px; margin:0 0 9px;opacity:.9;text-shadow:0 1px 10px rgba(0,0,0,.75)} .lp-press-track{display:flex;align-items:center;gap:30px;width:max-content; animation:wsMarquee 26s linear infinite} .lp-press-track img{height:24px;width:auto;max-width:none;object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.6));opacity:.95;flex:0 0 auto} .lp-press-track .lp-press-txt{font-size:17px;flex:0 0 auto;white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,.7)} @keyframes wsMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .lp-press-track{animation:none;width:auto;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none} .lp-press-track::-webkit-scrollbar{display:none} } } @media(max-width:380px){ .lp-cta-row .btn{font-size:9.5px;letter-spacing:.08em;padding:12px 6px} .lp-hero-wordmark{width:min(88vw,420px)} }