/* Schlafkompass: full-width editorial theme */
:root{--font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-serif:var(--font-sans);--container:1500px;--container-narrow:820px;--radius:20px;--radius-lg:32px;--color-bg:#0a141f;--color-surface:#11202f;--color-text:#f4efe3;--color-muted:#a9b6c8;--color-border:rgba(244,239,227,.14);--color-accent:#c9a468;--color-accent-strong:#132339;--color-accent-contrast:#050a10;--gradient-gold:linear-gradient(135deg,#dcc294 0%,#c9a468 50%,#9c7847 100%);--shadow-soft:0 16px 48px rgba(0,0,0,.5)}
html{background:var(--color-bg);color-scheme:dark}
body{background:var(--color-bg);color:var(--color-text)}
.container{width:92%;max-width:none}
.site-header{background:transparent;border:0;padding:.65rem 6%;position:sticky;top:0;z-index:50;backdrop-filter:none}
.header-inner{background:transparent;border:0;border-radius:999px;box-shadow:none;min-height:112px;padding:.6rem .7rem;position:relative;transition:background-color .3s ease,min-height .3s ease;width:100%;max-width:none}
/* In diesem Theme trägt nur die Kapsel (.header-inner) einen Hintergrund. global.css gibt
   .site-header.is-scrolled eine vollflächige Hintergrundfarbe samt Rand und Blur; das ist
   spezifischer als das .site-header hier oben und würde sich beim Scrollen als durchgehendes
   dunkles Band über die ganze Breite legen. Deshalb hier gezielt zurückgesetzt. */
.site-header.is-scrolled{background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none}
/* min-height bewusst NICHT mit umgeschaltet: die Kapsel (.header-inner) sitzt in position:sticky
   im normalen Dokumentfluss, eine Höhenänderung beim Scrollen verschiebt dadurch schlagartig den
   gesamten Seiteninhalt darunter — bei jedem Über-/Unterschreiten der 16-40px-Schwelle ein
   sichtbarer Sprung, der bei minimalem Scrollen (Trackpad-Nachlauf um genau diese Schwelle) wie
   Zittern wirkte. Logo/Wortmarke dürfen weiterhin schrumpfen (eigene, layoutneutrale
   Höhenanimation der <img>/<span> selbst), nur die Kapselhöhe bleibt konstant. */
.site-header.is-scrolled .header-inner{background:rgba(17,32,47,.94);min-height:76px}
.brand-mark{color:var(--color-text);font-size:1rem;text-transform:none}
/* Wortmarke als echter Text statt Serifen-SVG (schriftzug.svg) — bei kleiner Darstellung im
   Header kaum noch lesbar. Läuft in derselben Schrift wie der Rest der Seite, mit demselben
   Gold-Verlauf wie die übrigen Akzentflächen (siehe --gradient-gold). */
.brand-wordmark{color:var(--color-accent);font-family:var(--font-sans);letter-spacing:.04em;text-transform:uppercase}
.nav{gap:.2rem;font-size:.9rem}
.nav a{border-radius:999px;min-height:2.45rem;padding:.45rem .9rem;position:relative}
.nav a:not(:last-child)::after{background:var(--color-accent);border-radius:999px;bottom:.32rem;content:"";height:2px;left:.9rem;position:absolute;right:.9rem;transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.22,.75,.25,1)}
.nav a[aria-current=page]:not(:last-child),.nav a:not(:last-child):hover{background:transparent;color:var(--color-accent)}
.nav a[aria-current=page]:not(:last-child)::after,.nav a:not(:last-child):hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.nav a::after{transition:none}}
.nav a:last-child{background:var(--color-accent-strong);color:var(--color-text);margin-left:auto;padding-inline:1.15rem}
.nav a:last-child:hover{background:var(--gradient-gold);color:var(--color-accent-contrast)}
.button-icon{align-items:center;display:inline-flex;gap:.65rem}
.button-icon span{align-items:center;background:var(--gradient-gold);border-radius:50%;display:inline-flex;font-size:0;height:1.7rem;justify-content:center;width:1.7rem}
.button-icon span::before{background-color:var(--color-accent-contrast);content:"";display:block;height:.8rem;width:.8rem;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m17.1 30.208a1 1 0 0 1 -.908-1.417l12.108-26.415a1 1 0 0 1 1.818.834l-12.112 26.414a1 1 0 0 1 -.906.584z'/%3E%3Cpath d='m2.794 15.9a1 1 0 0 1 -.418-1.909l26.414-12.107a1 1 0 1 1 .834 1.816l-26.414 12.113a1 1 0 0 1 -.416.087z'/%3E%3Cpath d='m17.1 30.207a1 1 0 0 1 -.984-.83l-2.105-12.2a1 1 0 1 1 1.971-.34l2.105 12.2a1 1 0 0 1 -.815 1.155 1.018 1.018 0 0 1 -.172.015z'/%3E%3Cpath d='m14.992 18.009a.97.97 0 0 1 -.171-.015l-12.2-2.1a1 1 0 0 1 .34-1.971l12.2 2.1a1 1 0 0 1 -.169 1.985z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m17.1 30.208a1 1 0 0 1 -.908-1.417l12.108-26.415a1 1 0 0 1 1.818.834l-12.112 26.414a1 1 0 0 1 -.906.584z'/%3E%3Cpath d='m2.794 15.9a1 1 0 0 1 -.418-1.909l26.414-12.107a1 1 0 1 1 .834 1.816l-26.414 12.113a1 1 0 0 1 -.416.087z'/%3E%3Cpath d='m17.1 30.207a1 1 0 0 1 -.984-.83l-2.105-12.2a1 1 0 1 1 1.971-.34l2.105 12.2a1 1 0 0 1 -.815 1.155 1.018 1.018 0 0 1 -.172.015z'/%3E%3Cpath d='m14.992 18.009a.97.97 0 0 1 -.171-.015l-12.2-2.1a1 1 0 0 1 .34-1.971l12.2 2.1a1 1 0 0 1 -.169 1.985z'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* Eyebrows sind als generisches Kicker-Label über Überschriften bewusst aus, nur beim
   Blogartikel steht dort das Veröffentlichungsdatum — das ist Information, kein Kicker,
   und bleibt deshalb sichtbar. */
.eyebrow{display:none}
.hero-article .eyebrow{display:block}
/* Footer-Markenname wie der Header-Schriftzug: golden, in Versalien. */
.footer-brand strong{color:var(--color-accent);font-family:var(--font-sans);letter-spacing:.04em;text-transform:uppercase}
.button{background:var(--color-accent-strong);border-color:var(--color-accent);box-shadow:0 4px 18px rgba(0,0,0,.4);border-radius:999px;color:var(--color-text);font-weight:500;min-height:3rem;padding:.7rem 1.25rem;transition:background-color .28s ease,border-color .28s ease,color .28s ease,box-shadow .32s ease,transform .28s cubic-bezier(.22,.75,.25,1)}
.button.secondary{background:transparent;border-color:var(--color-border);color:var(--color-text)}
.button.light{background:transparent;border-color:var(--color-accent);color:var(--color-accent)}
.text-link{align-items:center;color:var(--color-text);display:inline-flex;font-weight:500;gap:.65rem;text-decoration:none}
.text-link span{align-items:center;background:var(--gradient-gold);border-radius:50%;display:inline-flex;font-size:0;height:2.3rem;justify-content:center;width:2.3rem}
.text-link span::before{background-color:var(--color-accent-contrast);content:"";display:block;height:1.05rem;width:1.05rem;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m17.1 30.208a1 1 0 0 1 -.908-1.417l12.108-26.415a1 1 0 0 1 1.818.834l-12.112 26.414a1 1 0 0 1 -.906.584z'/%3E%3Cpath d='m2.794 15.9a1 1 0 0 1 -.418-1.909l26.414-12.107a1 1 0 1 1 .834 1.816l-26.414 12.113a1 1 0 0 1 -.416.087z'/%3E%3Cpath d='m17.1 30.207a1 1 0 0 1 -.984-.83l-2.105-12.2a1 1 0 1 1 1.971-.34l2.105 12.2a1 1 0 0 1 -.815 1.155 1.018 1.018 0 0 1 -.172.015z'/%3E%3Cpath d='m14.992 18.009a.97.97 0 0 1 -.171-.015l-12.2-2.1a1 1 0 0 1 .34-1.971l12.2 2.1a1 1 0 0 1 -.169 1.985z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m17.1 30.208a1 1 0 0 1 -.908-1.417l12.108-26.415a1 1 0 0 1 1.818.834l-12.112 26.414a1 1 0 0 1 -.906.584z'/%3E%3Cpath d='m2.794 15.9a1 1 0 0 1 -.418-1.909l26.414-12.107a1 1 0 1 1 .834 1.816l-26.414 12.113a1 1 0 0 1 -.416.087z'/%3E%3Cpath d='m17.1 30.207a1 1 0 0 1 -.984-.83l-2.105-12.2a1 1 0 1 1 1.971-.34l2.105 12.2a1 1 0 0 1 -.815 1.155 1.018 1.018 0 0 1 -.172.015z'/%3E%3Cpath d='m14.992 18.009a.97.97 0 0 1 -.171-.015l-12.2-2.1a1 1 0 0 1 .34-1.971l12.2 2.1a1 1 0 0 1 -.169 1.985z'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.text-link:hover span::before,.text-link:focus-visible span::before,.button-icon:hover span::before,.button-icon:focus-visible span::before{animation:needle-wobble .6s ease-in-out}
@keyframes needle-wobble{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-14deg)}65%{transform:rotate(10deg)}}
@media(prefers-reduced-motion:reduce){.text-link:hover span::before,.text-link:focus-visible span::before,.button-icon:hover span::before,.button-icon:focus-visible span::before{animation:none}}
.section-intro{color:var(--color-muted);font-size:clamp(1.08rem,1.5vw,1.35rem);line-height:1.65}
/* Struktur (Grid-Spalten, Hoehen, Bildradius) ist jetzt globales Styling, identisch zu w12
   (siehe global.css .hero/.hero-shell/.hero-visual) — hier nur noch Marken-Hintergrund und
   z-index (für die schwebenden Badges/Karten, siehe .hero-note/.sleep-analysis-card unten). */
.hero{background:var(--color-bg);border:0}
.hero-copy{position:relative;z-index:3}
.hero-note,.floating-label,.image-tag{background:rgba(17,32,47,.94);border:1px solid rgba(244,239,227,.16);border-radius:999px;box-shadow:0 12px 32px rgba(0,0,0,.4);color:var(--color-text);font-size:1rem;font-weight:500;padding:.7rem 1rem;position:absolute;z-index:2}
.hero-note-a{left:-2.5rem;top:14%}
.hero-note-b{bottom:21%;right:4%}
.hero-note-c{right:7%;top:33%}
.hero-mini-card{background:var(--color-surface);border:1px solid var(--color-accent);border-radius:1.25rem;bottom:4%;display:grid;gap:.2rem;left:-3rem;padding:1rem 1.2rem;position:absolute;width:180px}
.hero-mini-card strong{font-size:1.7rem}
.hero-mini-card span{font-size:.8rem;line-height:1.3}
.hero-default,.hero-blog,.hero-article{padding-bottom:4rem}
.hero-default .hero-shell,.hero-blog .hero-shell,.hero-article .hero-shell{min-height:clamp(490px,67vh,680px)}
.hero-default h1,.hero-blog h1{font-size:clamp(3.2rem,5.5vw,5.8rem)}
.hero-article h1{font-size:clamp(2.6rem,4.2vw,4.4rem);line-height:.98}
.hero-default .hero-visual,.hero-blog .hero-visual,.hero-article .hero-visual{height:clamp(430px,60vh,620px)}
.editorial-positioning{align-items:start;display:grid;grid-template-columns:57% 43%;padding:clamp(5rem,10vw,10rem) 6% clamp(5rem,10vw,10rem) 0}
.positioning-image{margin-left:0;position:relative}
/* Hochformatiges Motiv: Der Rahmen ist bewusst hoch gehalten, damit vom Bild mehr als ein
   schmaler Streifen zu sehen ist. Der Ausschnitt sitzt leicht oberhalb der Mitte, wo Buch,
   Kissen und Holzboden zusammenkommen. */
.positioning-image img{border-radius:0 2rem 2rem 0;display:block;height:clamp(560px,62vw,840px);object-fit:cover;object-position:center 38%;width:100%}
.positioning-copy{padding:clamp(2rem,7vw,8rem) 0 0 clamp(2rem,6vw,7rem)}
.positioning-copy h2,.service-story h2,.analysis-spread h2,.environment-copy h2,.seo-editorial h2,.faq-editorial h2,.home-final-cta h2{font-family:var(--font-sans);font-size:var(--sk-display-size-lg);font-weight:470;letter-spacing:-.045em;line-height:.95}
.topic-lines{border-top:1px solid var(--color-border);margin-top:3rem}
.topic-lines a{align-items:center;border-bottom:1px solid var(--color-border);color:var(--color-text);display:flex;font-size:clamp(1rem,1.3vw,1.2rem);gap:1.25rem;padding:1.1rem 0;text-decoration:none}
.topic-lines span{color:var(--color-muted);font-size:.75rem}
.service-story{background:var(--color-surface);padding:clamp(6rem,10vw,10rem) 6%}
.service-story-head{align-items:start;display:grid;gap:1.5rem 5vw;grid-template-columns:minmax(0,1fr) minmax(300px,520px);margin-bottom:clamp(3rem,6vw,6rem)}
.service-story-head .eyebrow{grid-column:1/-1}
.service-story-head h2{margin:0}
.service-story-head h2 span{color:var(--color-text);display:inline-block;position:relative}
.service-story-head>p:last-child{color:var(--color-muted);font-size:1.1rem;line-height:1.6;max-width:520px}
.service-stage{display:grid;gap:clamp(2.5rem,4.5vw,5.5rem);grid-template-columns:minmax(0,1fr) minmax(300px,520px)}
.service-main{border-radius:2rem;color:var(--color-text);display:block;min-height:680px;overflow:hidden;position:relative}
.service-main:after{background:linear-gradient(180deg,transparent 40%,rgba(4,10,18,.82));content:"";inset:0;position:absolute}
.service-main img{height:100%;object-fit:cover;position:absolute;width:100%}
.service-main>div{bottom:2.2rem;left:2.2rem;position:absolute;z-index:2}
.service-main h3{font-size:var(--sk-h3-size-lg);font-weight:500;margin:0}
.service-main p{font-size:1.05rem;max-width:460px}
.service-number{font-size:5rem;font-weight:300;left:2rem;position:absolute;top:1.4rem;z-index:2}
.service-secondary{display:grid;gap:1.5rem}
.service-secondary a{border-top:1px solid var(--color-border);color:var(--color-text);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem 0;text-decoration:none}
.service-secondary span{color:var(--color-muted)}
.service-secondary h3{font-size:clamp(1.7rem,2.5vw,2.7rem);font-weight:500;line-height:1;margin:1rem 0}
.service-secondary p{color:var(--color-muted);line-height:1.6;max-width:520px}
.analysis-spread{background:var(--color-accent-strong);color:var(--color-text);display:grid;gap:8vw;grid-template-columns:1.15fr .85fr;padding:clamp(7rem,12vw,12rem) 6%}
.analysis-spread .eyebrow,.analysis-spread .section-intro{color:var(--color-muted)}
.analysis-spread h2{color:var(--color-text);margin-top:2rem}
.analysis-copy{align-self:end}
.process-list{list-style:none;margin:2.5rem 0;padding:0}
.process-list li{border-top:1px solid rgba(255,255,255,.3);display:grid;gap:1rem;grid-template-columns:3rem 1fr;padding:1.1rem 0}
.process-list li:last-child{border-bottom:1px solid rgba(255,255,255,.3)}
.process-list span{color:var(--color-accent);font-size:.75rem}
.analysis-spread .text-link{color:var(--color-text)}
.sleep-environment{padding:clamp(6rem,10vw,10rem) 4%}
.environment-image{position:relative}
.environment-image img{border-radius:2.2rem;display:block;height:min(52vw,620px);object-fit:cover;width:100%}
.image-tag{color:var(--color-text);text-decoration:none}
.tag-mattress{bottom:12%;left:42%}
.tag-pillow{right:22%;top:38%}
.tag-light{left:8%;top:28%}
.tag-climate{right:8%;top:12%}
.environment-copy{display:grid;gap:1.5rem 6vw;grid-template-columns:1.15fr .7fr;padding:3rem 2% 0}
.environment-copy h2{margin:0}
.environment-copy p{color:var(--color-muted);font-size:1.1rem;line-height:1.7}
.environment-copy .text-link{grid-column:2}
.trust-numbers{border-bottom:1px solid var(--color-border);border-top:1px solid var(--color-border);display:grid;gap:2.5rem 0;grid-template-columns:repeat(3,1fr);margin:0 6%;padding:clamp(4rem,7vw,7rem) 0}
.trust-numbers div{display:flex;flex-direction:column;gap:1.2rem}
.trust-numbers strong{font-size:clamp(3rem,5vw,5.8rem);font-weight:470;letter-spacing:-.04em}
.trust-numbers span{color:var(--color-muted);line-height:1.5}
.trust-numbers-head{display:grid;grid-column:1/-1}
.trust-numbers-head>div{max-width:44rem}
.trust-numbers-head h2{font-size:var(--sk-display-size-sm);font-weight:470;letter-spacing:-.03em;line-height:1.05;margin:.6rem 0 0}
@media(max-width:760px){.trust-numbers{grid-template-columns:1fr;gap:2.5rem}}
/* Homepage-Teaser für den neuesten Blogbeitrag — dieselbe Kartenoptik wie der featured Beitrag
   auf der Blog-Übersicht (.blog-card-large.featured), damit ein neuer Beitrag automatisch mit
   passender Bild-/Textzuordnung hier auftaucht, ohne die Startseite manuell pflegen zu müssen. */
.blog-teaser-section{padding:clamp(5rem,9vw,9rem) 6%}
.blog-teaser-main header{margin-bottom:clamp(2rem,3.5vw,3rem);max-width:34rem}
.blog-teaser-main header h2{font-size:var(--sk-display-size-sm);font-weight:470;letter-spacing:-.03em;line-height:1.05;margin:.6rem 0 0}
.blog-teaser-all{margin-top:2.5rem}
/* Titel + die zwei Text-Teaser links, das große Bild rechts — startet auf Höhe des Titels und
   bekommt dadurch über die volle Spaltenhöhe ein deutlich hochformatigeres, ruhigeres Format
   statt einer flachen, festen Bildhöhe. */
.blog-teaser-grid{align-items:stretch;display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr 1.05fr}
.blog-teaser-main{align-items:flex-start;display:flex;flex-direction:column}
.blog-teaser-featured{display:flex;flex-direction:column}
.blog-teaser-featured .blog-card-media{border-radius:1.25rem;flex:1;margin-bottom:1.5rem;min-height:320px}
.blog-teaser-featured h3{font-size:clamp(1.5rem,2vw,1.9rem);font-weight:540;letter-spacing:-.02em;line-height:1.15;margin:.5rem 0}
.blog-teaser-featured>p:not(.blog-card-meta){-webkit-box-orient:vertical;-webkit-line-clamp:3;color:var(--color-muted);display:-webkit-box;line-height:1.6;margin-bottom:1rem;max-width:32rem;overflow:hidden}
.blog-teaser-list{display:grid;gap:2rem}
.blog-teaser-item{border-top:1px solid var(--color-border);padding-top:1.75rem}
.blog-teaser-item:first-child{border-top:0;padding-top:0}
.blog-teaser-item h3{font-size:1.2rem;font-weight:500;letter-spacing:-.01em;line-height:1.25;margin:.4rem 0 .5rem}
.blog-teaser-item>p:not(.blog-card-meta){-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--color-muted);display:-webkit-box;font-size:.92rem;line-height:1.55;margin-bottom:.9rem;overflow:hidden}
@media(max-width:900px){.blog-teaser-grid{grid-template-columns:1fr}.blog-teaser-featured{order:-1}}
@media(max-width:700px){.blog-teaser-featured .blog-card-media{height:70vw}}
.seo-editorial{padding:clamp(7rem,12vw,12rem) 6%}
.seo-editorial header{margin-bottom:5rem}
.seo-columns{display:grid;gap:clamp(3rem,6vw,7rem) 7vw;grid-template-columns:repeat(2,minmax(0,1fr))}
.seo-columns article{max-width:650px}
.seo-columns h3{font-size:clamp(1.55rem,2.2vw,2.35rem);font-weight:520;line-height:1.1}
.seo-columns p{color:var(--color-muted);font-size:1.02rem;line-height:1.75}
.seo-columns figure{grid-column:1/-1;margin:1rem 0}
.seo-columns figure img{border-radius:2rem;display:block;height:min(34vw,460px);object-fit:cover;width:100%}
.seo-cta{background:var(--color-surface);border-radius:1.5rem;display:flex;flex-direction:column;gap:1rem;justify-content:center;padding:2.25rem}
.seo-cta h3{font-size:var(--sk-h3-size);font-weight:520;line-height:1.15;margin:0}
.seo-cta .button{align-self:flex-start;margin-top:.5rem}
.seo-cta p:not(.eyebrow){color:var(--color-muted);line-height:1.65;margin:0}
/* Einzelnes Cross-Sell-Angebot (Schlaftracking-Auswertung), das sonst nirgends verlinkt wäre.
   Volle Breite mit eigenem Hintergrund und Icon-Badge statt einer freistehenden Karte, die als
   kleiner Zettel in leerer Fläche wirkte — liest sich jetzt als bewusste Bannersektion. */
.tracking-banner{align-items:center;background:var(--color-accent-strong);border-radius:2rem;display:flex;gap:2rem;margin:clamp(1.5rem,3vw,2.5rem) 6% clamp(4rem,7vw,7rem);padding:clamp(2rem,3.5vw,3rem) clamp(2rem,4vw,3.5rem)}
.tracking-banner-copy{flex:1}
.tracking-banner-copy h3{font-size:var(--sk-h3-size);font-weight:520;line-height:1.2;margin:0 0 .6rem}
.tracking-banner-copy p{color:var(--color-muted);line-height:1.65;margin:0;max-width:40rem}
.tracking-banner .button{flex:none}
@media(max-width:900px){.tracking-banner{flex-direction:column;text-align:center}.tracking-banner .button{width:100%}}
.faq-editorial{background:var(--color-surface);display:grid;gap:8vw;grid-template-columns:.85fr 1.15fr;padding:clamp(6rem,10vw,10rem) 6%}
.faq-title{position:sticky;top:8rem;align-self:start}
.faq-list details{border-top:1px solid var(--color-border);padding:0}
.faq-list details:last-child{border-bottom:1px solid var(--color-border)}
.faq-list summary{cursor:pointer;font-size:clamp(1.1rem,1.7vw,1.45rem);list-style:none;padding:1.6rem 3rem 1.6rem 0;position:relative}
.faq-list summary:after{content:"+";font-size:1.7rem;font-weight:300;position:absolute;right:.2rem;top:1.25rem}
.faq-list details[open] summary:after{content:"−"}
.faq-list details p{color:var(--color-muted);line-height:1.7;margin:0;max-width:none;padding:0 2rem 1.7rem 0}
.home-final-cta{background:var(--color-accent-strong);color:var(--color-text);overflow:hidden;padding:clamp(6rem,10vw,10rem) 6%;position:relative}
.home-final-cta>*{position:relative;z-index:1}
.home-final-cta .eyebrow{color:var(--color-muted)}
.home-final-cta h2{color:var(--color-text);max-width:1100px}
.home-final-cta>p:not(.eyebrow){color:var(--color-muted);font-size:1.15rem;line-height:1.65;max-width:650px}
.home-final-cta .button-row{margin-top:2.5rem}
.light-link{color:var(--color-text)}
.light-link span{color:var(--color-accent-contrast)}
@media(max-width:900px){.home-final-cta .compass-watermark{display:none}}
/* Existing subpages and blog inherit the editorial language without floating card sections. */
.section{padding-block:clamp(4rem,8vw,8rem)}
.content-layout,.contact-layout,.article-layout{background:transparent;border-radius:0;box-shadow:none;padding:0}
.split-rich,.contact-layout,.article-layout{width:88%;max-width:none}
.editorial-panel,.home-cta-panel,.article-cta{background:transparent;border:0;border-radius:0;box-shadow:none}
.text h2,.text h3,.section-head h2,.article-cta h2{font-family:var(--font-sans);letter-spacing:-.03em}
.text h2,.section-head h2,.article-cta h2{font-size:clamp(2rem,3.8vw,4rem)}
.blog-magazine-grid{display:grid;gap:4rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.blog-card-large,.blog-card-large.featured{background:transparent;border:0;border-radius:0;display:grid;grid-column:auto;grid-template-columns:1fr;overflow:visible}
.blog-card-large.featured{align-items:center;column-gap:4rem;grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.blog-card-media{background:#142236;border-radius:1.5rem;display:block;height:360px;min-height:0;overflow:hidden;position:relative}
.blog-card-content{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;padding:1.5rem 0}
.blog-card-content h2{font-family:var(--font-sans);font-size:clamp(1.5rem,2.5vw,2.7rem);letter-spacing:-.03em}
.feature-card-large,.related-card,.panel,.form,.contact-card{border-radius:1.25rem}
.article-cta{border-top:1px solid var(--color-border);margin-top:4rem;padding-top:4rem}
.site-footer{background:#070d16;color:var(--color-muted)}
/* Hero-Struktur (Grid-Kollaps, Höhen, Bildradius, Home-Ausnahme) ist ab 1050px jetzt globales
   Styling, identisch zu w12 (siehe global.css). */
@media(max-width:1050px){.editorial-positioning{grid-template-columns:1fr}.positioning-image{margin-left:-7%;order:2}.positioning-copy{order:1;padding-left:0}.service-story-head,.analysis-spread,.environment-copy,.faq-editorial{grid-template-columns:1fr}.service-stage{grid-template-columns:1fr}.service-main{min-height:600px}.service-secondary{grid-template-columns:repeat(2,1fr)}.analysis-copy{max-width:760px}.environment-copy .text-link{grid-column:auto}.faq-title{position:static}.blog-card-large.featured{grid-template-columns:1fr}}
@media(max-width:760px){.site-header{padding:.45rem}.header-inner{border-radius:1.25rem;min-height:64px}.brand{max-width:calc(100% - 60px)}.brand-logo{flex-shrink:0;height:36px}.brand-wordmark{flex-shrink:1;height:auto;max-width:100%;width:130px}.site-header.is-scrolled .header-inner{min-height:56px}.site-header.is-scrolled .brand-logo{height:32px}.hero{padding-top:.25rem}.hero-shell{padding:1.2rem 0 0}.hero-copy{padding-inline:1rem}.hero-home .hero-shell{padding:1.2rem 1rem 0}.hero-home .hero-copy{padding-inline:0}.hero h1,.hero-default h1,.hero-blog h1{font-size:clamp(2.7rem,13vw,4.25rem);line-height:.94}.hero-article h1{font-size:clamp(2.25rem,10vw,3.2rem)}.hero-visual,.hero-default .hero-visual,.hero-blog .hero-visual,.hero-article .hero-visual{height:75vw;min-height:300px}.hero-note-c,.hero-mini-card{display:none}.hero-note-a{left:-.3rem}.hero-note-b{right:-.3rem}.editorial-positioning,.service-story,.analysis-spread,.sleep-environment,.seo-editorial,.faq-editorial,.home-final-cta{padding-left:1rem;padding-right:1rem}.positioning-image{margin-left:-1rem;margin-right:0}.positioning-image img{border-radius:0 1.4rem 1.4rem 0;height:85vw;min-height:0}.positioning-copy h2,.service-story h2,.analysis-spread h2,.environment-copy h2,.seo-editorial h2,.faq-editorial h2,.home-final-cta h2{font-size:clamp(2.5rem,12vw,4rem)}.service-story-head{margin-bottom:2.5rem}.service-main{min-height:400px}.service-secondary{grid-template-columns:1fr}.environment-image img{border-radius:1.25rem;height:85vw}.environment-copy{padding:2rem 0}.trust-numbers{grid-template-columns:1fr;gap:3rem;margin:0 1rem}.seo-columns{grid-template-columns:1fr}.seo-columns figure{grid-column:auto;margin:0}.seo-columns figure img{height:75vw}.blog-magazine-grid{grid-template-columns:1fr}.blog-card-large.featured{grid-column:auto}.blog-card-media{height:65vw}.hero-note{font-size:.7rem;padding:.5rem .7rem}.image-tag{font-size:.7rem;padding:.5rem .7rem}.br-desktop{display:none}}
/* Vier Begriffe im "Der Raum schläft mit"-Bild: die Desktop-Prozentwerte drängten auf dem
   schmaleren, flacheren Mobile-Zuschnitt drei der vier Badges (Raumklima/Licht/Kissen) in die
   obere rechte Bildhälfte, während unten links nichts stand. Feste Eckpositionen verteilen sie
   stattdessen gleichmäßig auf alle vier Ecken. */
@media(max-width:760px){
  .tag-climate{bottom:auto;left:auto;right:.75rem;top:.75rem}
  .tag-light{bottom:auto;left:.75rem;right:auto;top:.75rem}
  .tag-pillow{bottom:.75rem;left:.75rem;right:auto;top:auto}
  .tag-mattress{bottom:.75rem;left:auto;right:.75rem;top:auto}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Sleep-analysis card in the home hero */
.sleep-analysis-card{align-items:center;background:rgba(17,32,47,.96);border:1px solid rgba(244,239,227,.16);border-radius:1.5rem;box-shadow:0 16px 42px rgba(0,0,0,.4);display:grid;gap:1rem;grid-template-columns:1fr 7.4rem;left:-6rem;padding:1rem 1rem 1rem 1.2rem;position:absolute;top:12%;width:20rem;z-index:2}
.sleep-analysis-card-copy{display:flex;flex-direction:column;gap:.3rem}
.sleep-analysis-card-copy span{color:var(--color-muted);font-size:.72rem;font-weight:700}
.sleep-analysis-card-copy strong{color:var(--color-text);font-size:1.02rem;line-height:1.2}
.sleep-analysis-chart{display:block;height:7.4rem;overflow:visible;transform:rotate(-90deg);width:7.4rem}
.sleep-analysis-chart circle{fill:none;stroke-linecap:round}
.chart-track{stroke:#1f2f45;stroke-width:7}
.chart-value{stroke:var(--color-accent);stroke-width:7;transform-origin:60px 60px}
.chart-value-1{animation:chart-close-1 1.15s cubic-bezier(.3,.8,.2,1) .15s both;stroke-dasharray:308;stroke-dashoffset:308}
.chart-value-2{animation:chart-close-2 1.05s cubic-bezier(.3,.8,.2,1) .32s both;stroke-dasharray:233;stroke-dashoffset:233}
.chart-value-3{animation:chart-close-3 .95s cubic-bezier(.3,.8,.2,1) .49s both;stroke-dasharray:157;stroke-dashoffset:157}
.chart-core{animation:chart-core-in .45s ease-out .95s both;fill:var(--color-text);stroke:none;transform-box:fill-box;transform-origin:center}
@keyframes chart-close-1{to{stroke-dashoffset:31}}
@keyframes chart-close-2{to{stroke-dashoffset:35}}
@keyframes chart-close-3{to{stroke-dashoffset:16}}
@keyframes chart-core-in{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@media(max-width:1050px){.sleep-analysis-card{bottom:-2.2rem;left:1.5rem;top:auto}}
@media(max-width:760px){.sleep-analysis-card{border-radius:1.1rem;bottom:-2.6rem;gap:.6rem;grid-template-columns:1fr 5.2rem;left:1.1rem;padding:.7rem .7rem .7rem .9rem;width:15.5rem}.sleep-analysis-chart{height:5.2rem;width:5.2rem}.sleep-analysis-card-copy strong{font-size:.9rem}.sleep-analysis-card-copy span{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.chart-value-1{animation:none;stroke-dashoffset:31}.chart-value-2{animation:none;stroke-dashoffset:35}.chart-value-3{animation:none;stroke-dashoffset:16}.chart-core{animation:none;opacity:1;transform:scale(1)}}
/* Dedicated contact CTA: always contained by the header capsule. */
.header-contact-cta{align-items:center;align-self:center;background:var(--gradient-gold);border-radius:999px;color:var(--color-accent-contrast);display:inline-flex;font-weight:500;justify-content:center;min-height:2.75rem;padding:.55rem 1.3rem;text-decoration:none;transition:background-color .28s ease,color .28s ease,box-shadow .32s ease,transform .28s cubic-bezier(.22,.75,.25,1);white-space:nowrap}
.header-contact-cta:hover,.header-contact-cta[aria-current="page"]{background:var(--color-accent);color:var(--color-accent-contrast)}
/* Auf der Startseite tritt die Bildmarke bewusst größer auf als auf den Unterseiten. Nur der
   Kompass wächst — der Schriftzug bleibt unverändert, damit die Wortmarke gleich groß wirkt. */
[data-template="home"] .brand-logo{height:96px}
[data-template="home"] .site-header.is-scrolled .brand-logo{height:56px}
@media(max-width:760px){
  [data-template="home"] .brand-logo{height:48px}
  [data-template="home"] .site-header.is-scrolled .brand-logo{height:40px}
}
/* Drei Spalten mit gleich breiten Außenspalten: Dadurch liegt die Navigation exakt in der
   Seitenmitte und bleibt dort. Zuvor teilte sich der Header den Platz flexibel auf und die
   Navigation zentrierte sich nur im verbleibenden Raum neben dem Logo — sobald dieses beim
   Scrollen kleiner wurde, verschob sich das Menü sichtbar mit. */
@media(min-width:1360px){
  .header-inner{align-items:center;display:grid;grid-template-columns:1fr auto auto;max-width:100%}
  .header-inner .brand{grid-column:1;justify-self:start;min-width:0}
  .site-header .nav{grid-column:2;justify-self:end;margin-left:0;min-width:0;overflow:visible;width:auto}
  .header-contact-cta{grid-column:3;justify-self:end;margin-left:2.5rem}
}
.hero-title{
  max-width:100%;
  overflow-wrap:normal;
  text-wrap:balance;
}
/* Individually composed service pages */
.service-hero{align-items:center;display:grid;grid-template-columns:44% 56%;min-height:clamp(650px,82vh,850px);padding:1rem 0 clamp(5rem,8vw,8rem) 6%}
.service-hero-copy{padding-right:clamp(2rem,5vw,6rem);position:relative;z-index:2}
.service-hero h1,.room-hero h1{font-size:clamp(3.2rem,5.6vw,6rem);font-weight:470;letter-spacing:-.045em;line-height:.94;margin:.8rem 0 1.5rem}
.service-hero .lead{color:var(--color-muted);font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.65}
.service-hero-meta{align-items:center;border-bottom:0;border-top:0;display:flex;flex-wrap:wrap;gap:0;margin:1.75rem 0 2rem;padding:.25rem 0}
.service-hero-meta span{align-items:center;border:0;border-radius:0;display:inline-flex;font-size:.95rem;font-weight:500;gap:.55rem;letter-spacing:0;padding:0 1rem;white-space:nowrap}
.service-hero-media{height:clamp(540px,72vh,760px);position:relative}
.service-hero-media img{border-radius:2.5rem 0 0 2.5rem;height:100%;object-fit:cover;width:100%}
.service-tag{background:rgba(17,32,47,.94);border:1px solid var(--color-border);border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.4);font-size:.78rem;font-weight:700;padding:.65rem .9rem;position:absolute}
.service-tag-1{left:-2rem;top:14%}
.service-tag-2{right:5%;top:28%}
.service-tag-3{bottom:20%;left:8%}
.service-tag-4{bottom:8%;right:8%}
.service-intro,.coaching-manifesto,.product-principle{display:grid;gap:2rem 8vw;grid-template-columns:.8fr 1.2fr;padding:clamp(6rem,10vw,10rem) 6%}
.product-principle{grid-template-columns:1fr 1fr}
.service-intro .eyebrow,.coaching-manifesto .eyebrow,.product-principle .eyebrow{grid-column:1/-1}
.service-intro h2,.coaching-manifesto h2,.product-principle h2{font-size:clamp(2.8rem,5vw,5.5rem);font-weight:470;letter-spacing:-.045em;line-height:.96;margin:0}
.service-intro>p:last-child,.coaching-manifesto>p:last-child,.product-principle>p:last-child{align-self:end;color:var(--color-muted);font-size:1.15rem;line-height:1.7;max-width:650px}
.analysis-topics,.coaching-themes,.product-categories{background:var(--color-surface);padding:clamp(6rem,10vw,10rem) 6%}
.analysis-topics header,.coaching-themes header,.product-categories header,.editorial-seo header,.service-faq header,.coaching-offers header{display:grid;gap:1rem 5vw;grid-template-columns:.7fr 1.3fr;margin-bottom:4rem}
.analysis-topics header .eyebrow,.coaching-themes header .eyebrow,.product-categories header .eyebrow,.editorial-seo header .eyebrow,.service-faq header .eyebrow,.coaching-offers header .eyebrow{grid-column:1/-1}
.analysis-topics h2,.coaching-themes h2,.product-categories h2,.editorial-seo h2,.service-faq h2,.coaching-offers h2{font-size:clamp(2.8rem,4.8vw,5rem);font-weight:470;letter-spacing:-.04em;line-height:.96;margin:0}
/* Ohne Umbruch quetschte sich der Titel auf Mobile in die .7fr-Spalte neben dem leeren Rest der
   Kopfzeile und wurde vom JS-Schrumpf-Skript (main h2 in site.js) bis auf die Mindestgröße
   heruntergerechnet, weil er in der schmalen Spalte sonst nie in maxLines gepasst hätte. */
@media(max-width:760px){.analysis-topics header,.coaching-themes header,.product-categories header,.editorial-seo header,.coaching-offers header{grid-template-columns:1fr}}
.topic-landscape{display:grid;grid-template-columns:repeat(4,1fr)}
.topic-landscape article{border-left:1px solid var(--color-border);min-height:230px;padding:1.5rem}
.topic-landscape span{color:var(--color-muted);font-size:.72rem}
.topic-landscape h3{font-size:1.4rem;margin-top:3rem}
.topic-landscape p{color:var(--color-muted);line-height:1.55}
.analysis-process{background:var(--color-accent-strong);color:var(--color-text);display:grid;gap:8vw;grid-template-columns:1.1fr .9fr;padding:clamp(6rem,10vw,10rem) 6%}
.analysis-process .eyebrow{color:var(--color-muted)}
.analysis-process h2{color:var(--color-text)}
.analysis-process ol{list-style:none;margin:0;padding:0}
.analysis-process li{border-top:1px solid rgba(255,255,255,.25);display:grid;gap:1rem;grid-template-columns:3rem 1fr;padding:1.3rem 0}
.analysis-process li:last-child{border-bottom:1px solid rgba(255,255,255,.25)}
.analysis-process li>span{color:var(--color-accent);font-size:.72rem}
.analysis-process h3{font-size:1.35rem;margin:0}
.analysis-process p{color:var(--color-muted);margin:.3rem 0 0}
.service-situations,.personal-guidance,.product-consulting,.room-detail,.room-intro{align-items:center;display:grid;gap:clamp(3rem,7vw,8rem);grid-template-columns:1.1fr .9fr;padding:clamp(6rem,10vw,10rem) 6%}
.situations-image img,.personal-guidance img,.product-consulting img,.room-detail img,.room-intro img{border-radius:2rem;display:block;height:clamp(480px,55vw,760px);object-fit:cover;width:100%}
.service-situations h2,.personal-guidance h2,.product-consulting h2,.room-detail h2{font-size:clamp(2.5rem,4.2vw,4.5rem);font-weight:470;letter-spacing:-.04em;line-height:.98}
.personal-guidance p,.product-consulting p,.room-detail p,.room-intro p{margin-bottom:1.75rem;max-width:26rem}
.personal-guidance .button,.product-consulting .button,.room-detail .button,.room-intro .button{margin-top:0}
.service-situations ul{list-style:none;padding:0}
.service-situations li{border-top:1px solid var(--color-border);padding:.9rem 0}
.service-situations li:last-child{border-bottom:1px solid var(--color-border)}
.editorial-seo{padding:clamp(6rem,10vw,10rem) 6%}
.service-seo-text{columns:1;max-width:780px}
.service-seo-text>h2{break-after:avoid;column-span:all;font-size:clamp(1.45rem,2vw,2rem);font-weight:470;letter-spacing:-.025em;line-height:1.18;margin:3.25rem 0 1rem}
.service-seo-text>h2:first-child{margin-top:0}
.service-seo-text p,.service-seo-text li{color:var(--color-muted);font-size:1rem;line-height:1.7}
.service-seo-text ul{break-inside:avoid;padding-left:1.2rem}
.price-feature{align-items:center;background:var(--color-surface);border:1px solid var(--color-accent);display:grid;gap:3rem;grid-template-columns:.8fr 1fr auto;padding:clamp(4rem,7vw,7rem) 6%}
.price-feature strong{color:var(--color-accent);display:block;font-size:clamp(4rem,7vw,7rem);font-weight:450;letter-spacing:-.05em}
.price-feature small{font-size:1rem}
.price-feature ul{line-height:1.8}
.service-faq{background:var(--color-surface);display:grid;gap:7vw;grid-template-columns:.8fr 1.2fr;padding:clamp(6rem,10vw,10rem) 6%}
.service-faq header{display:block;margin:0}
.service-faq details{border-top:1px solid var(--color-border)}
.service-faq details:last-child{border-bottom:1px solid var(--color-border)}
.service-faq summary{cursor:pointer;font-size:1.15rem;padding:1.4rem 2rem 1.4rem 0}
.service-faq details p{color:var(--color-muted);line-height:1.7;padding:0 2rem 1rem 0}
.service-final-cta{background:var(--color-accent-strong);color:var(--color-text);overflow:hidden;padding:clamp(6rem,10vw,10rem) 6%;position:relative}
.service-final-cta>*{position:relative;z-index:1}
.service-final-cta .eyebrow,.service-final-cta>p{color:var(--color-muted)}
.service-final-cta h2{color:var(--color-text);font-size:var(--sk-display-size-lg);font-weight:470;letter-spacing:-.045em;line-height:.94;max-width:1100px}
.service-final-cta>p{font-size:1.15rem;line-height:1.7;max-width:680px}
.coaching-themes>div{display:grid;grid-template-columns:repeat(3,1fr)}
.coaching-themes article{border-bottom:1px solid var(--color-border);padding:2rem 3rem 2rem 0}
.coaching-themes article:nth-child(3n+2),.coaching-themes article:nth-child(3n+3){padding-left:3rem}
.coaching-themes h3{font-size:1.5rem}
.coaching-themes p{color:var(--color-muted);line-height:1.6}
.coaching-journey{display:grid;grid-template-columns:1.15fr .85fr}
.journey-image{border-radius:0 2.5rem 2.5rem 0;overflow:hidden}
.journey-image img{display:block;height:820px;object-fit:cover;width:100%}
.journey-steps{align-self:center;padding:5vw}
.journey-steps>div{align-items:center;border-top:1px solid var(--color-border);display:grid;grid-template-columns:3rem 1fr;padding:1.3rem 0}
.journey-steps>div:last-child{border-bottom:1px solid var(--color-border)}
.journey-steps span{color:var(--color-muted);font-size:.72rem}
.journey-steps h3{font-size:1.5rem;margin:0}
.coaching-offers{background:var(--color-surface);padding:clamp(6rem,10vw,10rem) 6%}
.offer-rows article{align-items:center;border-top:1px solid var(--color-border);display:grid;gap:2rem;grid-template-columns:8rem 1fr 8rem 3rem;padding:1.4rem}
.offer-rows article:last-child{border-bottom:1px solid var(--color-border)}
.offer-rows h3{font-size:clamp(1.25rem,1.6vw,1.55rem);line-height:1.15;margin:0}
.offer-rows p{color:var(--color-muted);line-height:1.55;margin:1rem 0 .3rem}
/* Randlos wie die anderen Hero-Bilder (siehe .hero in global.css): links bündig mit dem
   Content-Rand, rechts bis zur echten Fensterkante inklusive Scrollbar-Breite (--scrollbar-w aus
   site.js) — die abgerundeten Ecken bleiben dabei erhalten, wirken freistehend über der Seite. */
.room-hero{border-radius:2.5rem;height:min(52vh,560px);margin:1rem 6% 0;overflow:hidden;position:relative}
.room-hero>img{height:100%;object-fit:cover;width:100%}
.room-hero-content{padding:clamp(3rem,6vw,5rem) 6% 0}
.room-hero-content .eyebrow{color:var(--color-muted)}
.room-hero-content h1{color:var(--color-text);margin:.8rem 0 1.5rem;max-width:900px}
.room-hero-content>p{color:var(--color-muted);font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.65;margin-bottom:2rem;max-width:640px}
.room-tag{background:rgba(17,32,47,.94);border-radius:999px;font-size:.78rem;font-weight:700;padding:.65rem .9rem;position:absolute;z-index:3}
.room-factors{background:var(--color-surface);display:grid;grid-template-columns:repeat(3,1fr);padding:clamp(5rem,8vw,8rem) 6%}
.room-factors article{border-left:1px solid var(--color-border);min-height:240px;padding:1.5rem}
.room-factors span{color:var(--color-muted);font-size:.72rem}
.room-factors h3{font-size:1.6rem;margin-top:3rem}
.room-factors p{color:var(--color-muted);line-height:1.6}
.product-material-stage{margin:0 4%;position:relative}
.product-material-stage>img{border-radius:2rem;display:block;height:min(65vw,820px);object-fit:cover;width:100%}
.material-caption{background:var(--color-surface);border:1px solid var(--color-accent);border-radius:1.5rem;bottom:3rem;left:4%;max-width:480px;padding:2rem;position:absolute}
.material-caption h2{font-size:2.4rem;line-height:1}
.material-caption span{font-size:.72rem}
.product-categories>div{display:grid;grid-template-columns:repeat(2,1fr)}
.product-categories article{padding:2rem 3rem 2rem 0}
.product-categories article:nth-child(even){border-left:1px solid var(--color-border);padding-left:3rem}
.product-categories h3{font-size:2rem}
.product-categories p{color:var(--color-muted);line-height:1.65}
.product-categories article>span{font-size:.75rem;font-weight:700}
.material-values{background:var(--color-accent-strong);color:var(--color-text);display:grid;gap:1rem 5vw;grid-template-columns:.7fr 1.3fr;padding:clamp(6rem,10vw,10rem) 6%}
.material-values h2{color:var(--color-text)}
.material-values dl>div{border-top:1px solid rgba(255,255,255,.25);display:grid;gap:0 2.5rem;grid-template-columns:10rem 1fr;padding:1.2rem 0}
.material-values dl>div:last-child{border-bottom:1px solid rgba(255,255,255,.25)}
.material-values dd{color:var(--color-muted);margin:0}
@media(max-width:1000px){.service-hero{grid-template-columns:1fr;padding:3rem 0 5rem}.service-hero-copy{padding:2rem 5%}.service-hero-media{height:62vw;min-height:430px}.service-hero-media img{border-radius:0}.service-intro,.coaching-manifesto,.product-principle,.analysis-process,.service-situations,.personal-guidance,.product-consulting,.room-detail,.room-intro,.material-values,.service-faq{grid-template-columns:1fr}.topic-landscape{grid-template-columns:repeat(2,1fr)}.coaching-journey{grid-template-columns:1fr}.journey-image{border-radius:0}.journey-image img{height:65vw}.room-factors{grid-template-columns:repeat(2,1fr)}.price-feature,.room-visit{grid-template-columns:1fr 1fr}.price-feature>a{grid-column:1/-1}.service-seo-text{columns:1}.service-tag-1{left:2%}}
@media(max-width:700px){.service-hero h1,.room-hero h1{font-size:clamp(2.5rem,12vw,4rem)}.service-hero-media{height:82vw;min-height:330px}.service-tag{font-size:.65rem;padding:.5rem .7rem}.service-tag-4{display:none}.service-intro,.coaching-manifesto,.product-principle,.analysis-topics,.coaching-themes,.product-categories,.analysis-process,.service-situations,.personal-guidance,.product-consulting,.room-detail,.editorial-seo,.coaching-offers,.service-faq,.service-final-cta,.room-intro,.room-factors,.room-visit,.material-values{padding-left:1rem;padding-right:1rem}.topic-landscape,.coaching-themes>div,.product-categories>div,.room-factors{grid-template-columns:1fr}.topic-landscape article{border-bottom:1px solid var(--color-border);min-height:0}.room-factors article{border:0;min-height:0;padding:1.25rem 0}.coaching-themes article,.coaching-themes article:nth-child(3n+2),.coaching-themes article:nth-child(3n+3),.product-categories article,.product-categories article:nth-child(even){border-left:0;padding:1.5rem 0}.offer-rows article{align-items:start;grid-template-columns:1fr auto}.offer-rows article>span,.offer-rows article>div{grid-column:1}.offer-rows article>a{grid-column:2;grid-row:1/3}.price-feature,.room-visit{grid-template-columns:1fr}.room-hero{border-radius:1.5rem;height:70vw;margin:1rem 6% 0;min-height:300px}.room-hero-content{padding-left:1rem;padding-right:1rem}.room-tag{font-size:.65rem}.room-hero .tag-pillow{left:5%}.room-hero .tag-mattress{left:35%}.product-material-stage{margin:0}.product-material-stage>img{border-radius:0;height:85vw}.material-caption{bottom:-5rem;left:1rem;right:1rem}.product-categories{padding-top:10rem}.material-values dl>div{grid-template-columns:1fr}.material-values dd{margin-top:.4rem}.situations-image img,.personal-guidance img,.product-consulting img,.room-detail img,.room-intro img{border-radius:0;height:85vw}}
/* About and contact compositions */
.about-hero,.contact-hero{align-items:center;display:grid;gap:5vw;grid-template-columns:.8fr 1.2fr;min-height:78vh;padding:1rem 0 6rem 6%}
.about-hero>div:not(.about-hero-media),.contact-hero>div{padding-right:2rem}
.about-hero h1,.contact-hero h1{font-size:clamp(3rem,5.2vw,5.7rem);font-weight:470;letter-spacing:-.045em;line-height:.95}
.about-hero p,.contact-hero p{color:var(--color-muted);font-size:1.15rem;line-height:1.7}
.about-hero img,.contact-hero img{border-radius:2.5rem 0 0 2.5rem;height:68vh;min-height:520px;object-fit:cover;width:100%}
.about-origin{display:grid;gap:2rem 8vw;grid-template-columns:.8fr 1.2fr;padding:clamp(6rem,10vw,10rem) 6%}
.about-origin .eyebrow{grid-column:1/-1}
.about-origin h2{align-self:start}
.about-origin>p:last-child{align-self:end;color:var(--color-muted);font-size:1.15rem;line-height:1.7}
.about-hero-media{height:100%;overflow:visible;position:relative}
.about-hero-tag-1{left:1rem;top:16%}
.about-hero-tag-2{right:1.5rem;top:8%}
.about-hero-tag-3{bottom:10%;right:1.5rem}
@media(max-width:900px){.about-hero-tag-1{left:1rem}.about-hero-tag-3{right:1rem}}
.about-people{background:var(--color-surface);display:grid;grid-template-columns:repeat(2,1fr);padding:clamp(6rem,9vw,9rem) 6%}
.about-brands header{max-width:700px}
.about-brands h2{margin:0 0 1.25rem}
.about-brands header>p:last-child{color:var(--color-muted);font-size:1.05rem;line-height:1.7}
/* Feste Breite UND Höhe pro Logo (object-fit:contain) statt fixer Höhe mit freier Breite: so
   bekommt jedes Logo dieselbe Box-Fläche und wirkt gleich schwer, auch wenn breite Logos wie
   Prolana/Zirbenfamilie und schmale/quadratische wie Tjornbo sehr unterschiedliche
   Seitenverhältnisse haben. flex:1 verteilt die Boxen in einer Zeile über die volle Breite. */
.brand-grid{display:flex;flex-wrap:nowrap;align-items:center;gap:1.75rem}
.brand-grid img{background:var(--color-text);border-radius:1rem;box-sizing:border-box;flex:1;height:8rem;object-fit:contain;padding:1.6rem 2rem}
@media(max-width:900px){.brand-grid{flex-wrap:wrap}.brand-grid img{flex:0 1 calc(33.33% - 1.2rem);height:6rem}}
@media(max-width:700px){.brand-grid{flex-wrap:wrap;gap:1rem}.brand-grid img{flex:0 1 calc(50% - .5rem);height:5rem;padding:1rem 1.2rem}}
.about-people article{padding:2rem 5vw 2rem 0}
.about-people article+article{border-left:1px solid var(--color-border);padding:2rem 0 2rem 5vw}
.about-people h2{font-size:clamp(2.5rem,4vw,4.5rem);font-weight:470;white-space:nowrap}
.about-people span{color:var(--color-muted);font-size:.75rem}
.about-people p{color:var(--color-muted);font-size:1.05rem;line-height:1.7}
.about-image-statement{margin:clamp(5rem,8vw,8rem) 4%;position:relative}
.about-image-statement img{border-radius:2rem;display:block;height:min(55vw,720px);object-fit:cover;width:100%}
.about-image-statement>div{bottom:4%;display:flex;flex-wrap:wrap;gap:.6rem;left:3%;position:absolute}
.about-image-statement strong{background:rgba(17,32,47,.94);border:1px solid rgba(244,239,227,.16);border-radius:999px;box-shadow:0 12px 32px rgba(0,0,0,.4);color:var(--color-text);font-size:1rem;font-weight:500;padding:.7rem 1rem}
.about-values{background:var(--color-surface);display:grid;grid-template-columns:repeat(4,1fr);padding:clamp(5rem,8vw,8rem) 6%}
.about-values article{border-left:1px solid var(--color-border);min-height:240px;padding:1.5rem}
.about-values h3{font-size:1.6rem;margin-top:3rem}
.about-values p{color:var(--color-muted);line-height:1.6}
@media(max-width:900px){.about-values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.about-values{grid-template-columns:1fr}.about-values article{border-left:0;border-top:1px solid var(--color-border);min-height:0}}
.contact-choice{background:var(--color-surface);padding:clamp(6rem,9vw,9rem) 6%}
.contact-choice header{display:grid;gap:1rem 5vw;grid-template-columns:.7fr 1.3fr;margin-bottom:4rem}
.contact-choice header .eyebrow{grid-column:1/-1}
.contact-form-wrap>h2{font-weight:470;letter-spacing:-.04em;line-height:.96}
.contact-choice>div{display:grid;grid-template-columns:repeat(4,1fr)}
.contact-choice article{border-left:1px solid var(--color-border);padding:1.5rem}
.contact-choice h3{font-size:1.4rem;margin-top:3rem}
.contact-choice p{color:var(--color-muted);line-height:1.6}
.contact-main{align-items:start;display:grid;gap:clamp(3rem,6vw,7rem);grid-template-areas:"form copy";grid-template-columns:1fr 1.05fr;padding:clamp(2.5rem,4vw,4rem) 6% clamp(4rem,7vw,6.5rem)}
.contact-copy>.text{color:var(--color-muted);font-size:1.15rem;line-height:1.7}
.contact-copy>.lead{color:var(--color-muted);font-size:1.1rem;line-height:1.7;margin:0}
.studio-address{border-top:1px solid var(--color-border);margin-top:2.5rem;padding-top:2.5rem}
.studio-address h2{font-size:2rem}
.studio-address a{color:var(--color-text)}
/* Anker-Ziele für Direktlinks zum Formular (Angebots-Karten, offer.php) — ohne scroll-margin-top
   läge die Kapsel beim Sprung genau unter dem sticky Header und wäre teils verdeckt. */
#formular,#anfrage{scroll-margin-top:7rem}
.contact-form-wrap{align-self:start;background:var(--color-surface);border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);grid-area:form;padding:clamp(2rem,3.2vw,3.5rem)}
.contact-form-wrap .form{background:transparent;border:0;padding:0}
.contact-form-wrap>h2{font-size:var(--sk-display-size-sm);max-width:20ch}
@media(max-width:900px){.about-hero,.contact-hero,.about-origin,.contact-main{grid-template-columns:1fr}.about-hero,.contact-hero{padding-left:5%;padding-right:0}.about-hero img,.contact-hero img{height:60vw;min-height:400px}.about-values{grid-template-columns:repeat(2,1fr);gap:3rem}.contact-choice>div{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.about-hero,.contact-hero{padding:2rem 0 5rem}.about-hero>div:not(.about-hero-media),.contact-hero>div{padding:1rem}.about-hero img,.contact-hero img{border-radius:1.5rem;height:80vw;min-height:320px}.about-origin,.about-people,.about-values,.contact-choice,.contact-main{padding-left:1rem;padding-right:1rem}.about-people{grid-template-columns:1fr}.about-people article,.about-people article+article{border-left:0;border-top:1px solid var(--color-border);padding:2rem 0}.about-image-statement{margin-left:0;margin-right:0}.about-image-statement img{border-radius:0;height:85vw}.about-values{grid-template-columns:1fr;margin:0 1rem}.contact-choice>div{grid-template-columns:1fr}.contact-choice article{border-bottom:1px solid var(--color-border)}.contact-form-wrap{border-radius:1.25rem;padding:1rem}}
.legal-hero{border-bottom:1px solid var(--color-border);padding:clamp(6rem,12vw,12rem) 6% clamp(4rem,8vw,8rem)}
.legal-hero h1{font-size:clamp(3.5rem,8vw,8rem);font-weight:470;letter-spacing:-.05em;line-height:.92;margin:.8rem 0;max-width:1200px}
.legal-hero>p:last-child{color:var(--color-muted);font-size:1.15rem;max-width:720px}
@media(max-width:700px){.legal-hero{padding-left:1rem;padding-right:1rem}.legal-hero h1{font-size:clamp(2.8rem,15vw,5rem)}}
/* Refined Schlafanalyse dramaturgy */
.analysis-reason{align-items:start;display:grid;gap:3rem 8vw;grid-template-columns:1fr 1fr;padding:clamp(5rem,8vw,8rem) 6%}
.analysis-reason h2{margin:.8rem 0 0;max-width:900px}
.analysis-reason-copy>p{color:var(--color-muted);font-size:1.15rem;line-height:1.7;margin:0;max-width:680px}
.analysis-process>div>p:last-child{color:var(--color-muted);line-height:1.65;max-width:560px}
.analysis-audience{padding-bottom:clamp(5rem,8vw,8rem)}
.analysis-package{align-items:stretch;background:var(--color-surface);display:grid;gap:clamp(3rem,7vw,8rem);grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);padding:clamp(5rem,8vw,8rem) 6%}
.analysis-package-included h2{font-size:clamp(2.5rem,3.3vw,3.25rem);font-weight:470;letter-spacing:-.04em;line-height:1;margin:1rem 0 2.5rem;max-width:760px}
.analysis-package-included h2 span{display:block;white-space:nowrap}
/* Fließtext zwischen Überschrift und Leistungsliste — auf der Schlafanalyse-Seite gibt es das
   nicht (Überschrift geht direkt in die Liste über), auf den generischen Angebotsseiten
   (templates/offer.php) aber schon, weil dort der ausführliche Text-Inhalt reinmuss. */
.analysis-package-included .text p{color:var(--color-muted);font-size:1.05rem;line-height:1.75;margin:0 0 1.2rem}
.analysis-package-included .text+ul{margin-top:1rem}
.analysis-package-included ul{display:grid;gap:0;list-style:none;margin:0;padding:0}
.analysis-package-included li{align-items:center;display:flex;gap:.75rem;padding:1rem 0}
.analysis-package-included li::before{align-items:center;background:var(--color-accent);border-radius:50%;color:var(--color-accent-strong);content:"✓";display:inline-flex;flex:0 0 1.15rem;font-size:.68rem;font-weight:800;height:1.15rem;justify-content:center}
.analysis-seo-detail{padding:clamp(6rem,10vw,10rem) 6%}
.analysis-seo-detail>header{display:grid;gap:1rem 6vw;grid-template-columns:.7fr 1.3fr;margin-bottom:4rem}
.analysis-seo-detail>header .eyebrow{grid-column:1/-1}
.analysis-seo-detail>header h2{margin:0;max-width:900px}
.analysis-seo-grid{display:grid;gap:2rem 5vw;grid-template-columns:repeat(3,1fr)}
.analysis-seo-grid article{border-top:1px solid var(--color-border);padding-top:1.4rem}
.analysis-seo-grid article>span{color:var(--color-muted);font-size:.72rem}
.analysis-seo-grid h3{font-size:var(--sk-h3-size);font-weight:560;line-height:1.15;margin:2rem 0 1rem}
.analysis-seo-grid p{color:var(--color-muted);font-size:1rem;line-height:1.72}
.analysis-faq{margin-top:0}
@media(max-width:950px){.analysis-reason,.analysis-package{grid-template-columns:1fr}.analysis-package-price{position:static}.analysis-seo-grid{grid-template-columns:1fr 1fr}.analysis-seo-grid article:last-child{grid-column:1/-1;max-width:650px}}
@media(max-width:700px){.analysis-package-included h2 span{white-space:normal}.analysis-reason,.analysis-package,.analysis-seo-detail{padding-left:1rem;padding-right:1rem}.analysis-reason h2,.analysis-seo-detail>header h2{font-size:clamp(2.4rem,11vw,3.6rem)}.analysis-package-price{border-radius:1.2rem}.analysis-seo-grid{grid-template-columns:1fr}.analysis-seo-grid article:last-child{grid-column:auto}.analysis-seo-detail>header{grid-template-columns:1fr}}
/* Schlafanalyse: stronger type, one numbered module only */
.service-hero-analysis{grid-template-columns:52% 48%;min-height:clamp(680px,86vh,900px)}
.service-hero-analysis .service-hero-copy{padding-right:clamp(2rem,4vw,4.5rem)}
.service-hero-analysis h1{font-size:clamp(4.5rem,6.7vw,6.25rem);line-height:.97;max-width:1000px}
.service-hero-analysis .service-hero-media{height:clamp(590px,78vh,820px)}
.service-hero-analysis .service-tag-4{display:none}
.analysis-topics-editorial header{display:block;max-width:none}
.analysis-topics-editorial header h2{max-width:1250px;width:90%}
.analysis-topics-editorial .topic-landscape article{position:relative}
.analysis-topics-editorial .topic-landscape h3{margin-top:0}
.topics-material-image{margin:clamp(3rem,6vw,6rem) 0 0;position:relative}
.topics-material-image img{border-radius:2rem;display:block;height:min(45vw,620px);object-fit:cover;width:100%}
.analysis-process>div h2{max-width:1000px}
/* Die Desktop-Feinjustierung von .analysis-reason/.analysis-process oben (ohne Media Query,
   gleiche Spezifität) steht nach dem 950px-Umbruch weiter oben im Stylesheet und gewann dadurch
   auf Mobile immer — beide Bereiche blieben zweispaltig und quetschten den Text zusammen.
   Diese Regel steht bewusst danach, damit der Umbruch auch unter 950px wieder greift. */
@media(max-width:950px){.analysis-reason,.analysis-process{grid-template-columns:1fr}}
.analysis-audience h2{max-width:900px}
.analysis-audience .situations-image>img{aspect-ratio:4/5;height:auto}
.analysis-seo-editorial>header{display:block}
.analysis-seo-editorial>header h2{max-width:1250px;width:88%}
.analysis-seo-composition{display:grid;gap:clamp(3rem,6vw,6rem) 7vw;grid-template-columns:1.15fr .85fr}
.analysis-seo-composition h3{font-size:var(--sk-h3-size-lg);font-weight:540;letter-spacing:-.025em;line-height:1.1}
.analysis-seo-composition p{color:var(--color-muted);font-size:1.03rem;line-height:1.75}
.seo-main-topic{max-width:760px}
.seo-main-image{margin:2.5rem 0 0}
.seo-main-image img{border-radius:1.5rem;display:block;height:min(30vw,400px);object-fit:cover;width:100%}
.seo-side-topics{align-self:start;display:flex;flex-direction:column;gap:clamp(2rem,3vw,3rem)}
.seo-side-topics article{border-top:1px solid var(--color-border);padding:0 0 1.5rem}
.seo-side-topics article+article{margin-top:1.5rem}
.analysis-seo-composition blockquote{border-left:3px solid var(--color-accent);font-size:clamp(2rem,3.4vw,3.4rem);font-weight:480;grid-column:1/-1;letter-spacing:-.035em;line-height:1.15;margin:0;padding-left:clamp(1.5rem,3vw,3rem);width:82%}
.analysis-seo-composition>figure{grid-column:1/-1;margin:0}
.analysis-seo-composition>figure img{border-radius:2rem;display:block;height:min(45vw,620px);object-fit:cover;width:100%}
.analysis-next-links{display:grid;gap:1rem;grid-column:1/-1;grid-template-columns:repeat(2,1fr)}
.analysis-next-links a{align-items:center;border-bottom:1px solid var(--color-border);border-top:1px solid var(--color-border);color:var(--color-text);display:flex;justify-content:space-between;padding:1.3rem 0;text-decoration:none}
.analysis-next-links a+a{margin-left:3rem}
.analysis-next-links span{color:var(--color-muted)}
@media(max-width:1050px){.service-hero-analysis{grid-template-columns:1fr}.service-hero-analysis h1{font-size:clamp(4rem,9vw,5.5rem)}.analysis-package{grid-template-columns:1fr 1fr}.analysis-package-included{grid-column:1/-1}.analysis-seo-composition{grid-template-columns:1fr}.analysis-seo-composition blockquote,.analysis-seo-composition>figure,.analysis-next-links{grid-column:auto;width:100%}
  /* .seo-main-topic endet mit einem Bild, .seo-side-topics beginnt mit einem — im gestapelten
     Mobile-Layout standen dadurch zwei fremde Bilder ohne trennenden Text direkt hintereinander.
     Das Seitenbild rutscht deshalb hinter seine eigenen zwei Textblöcke. */
  .seo-side-image{order:1}
}
@media(max-width:700px){.service-hero-analysis h1{font-size:clamp(3rem,14vw,4.5rem)}.analysis-topics-editorial header h2,.analysis-seo-editorial>header h2{width:100%}.topics-material-image img{border-radius:0;height:82vw}.topics-material-image figcaption{bottom:.7rem;left:.7rem;right:.7rem}.analysis-package{grid-template-columns:1fr}.analysis-package-included{grid-column:auto}.analysis-package-image img{min-height:0;height:80vw}.analysis-package-price{border-left:0;border-top:1px solid var(--color-border);padding:2rem 0 0}.analysis-seo-composition>figure img{border-radius:0;height:82vw}.seo-main-image img{border-radius:0;height:60vw}.analysis-next-links{grid-template-columns:1fr}.analysis-next-links a+a{border-top:0;margin-left:0}.analysis-next-links a{align-items:flex-start;flex-direction:column;gap:.4rem}}
/* Premium analysis price box */
.analysis-package-price{align-self:start;background:var(--color-surface);border:1px solid var(--color-accent);border-radius:1.75rem;box-shadow:none;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(2rem,3.5vw,3.5rem);position:sticky;top:7rem}
.analysis-package-price>strong{color:var(--color-accent);font-size:clamp(4.25rem,6vw,6.25rem);font-weight:430;letter-spacing:-.06em;line-height:.9;margin:0 0 2.5rem}
.analysis-package-price>strong small{font-size:.9rem;font-weight:500;letter-spacing:.02em}
.analysis-package-price .price-description{color:var(--color-muted);font-size:1.05rem;font-weight:400;line-height:1.6;margin:0}
.analysis-package-price .price-ideal{margin-top:2.8rem}
.analysis-package-price .price-ideal b{display:block;font-size:1.05rem;font-weight:550;margin-bottom:.8rem}
.analysis-package-price .price-ideal p{color:var(--color-muted);font-size:.98rem;line-height:1.55;margin:0}
.analysis-package-price .button{margin-top:2.5rem;text-align:center;width:100%}
@media(max-width:950px){.analysis-package{grid-template-columns:1fr}.analysis-package-price{position:static}}
@media(max-width:700px){.analysis-package-price{border:1px solid var(--color-accent);border-radius:1.2rem;padding:1.75rem}.analysis-package-price>strong{margin-bottom:2rem}.analysis-package-price .price-ideal{margin-top:2.2rem}}
.service-hero-meta span:first-child{padding-left:0}
.service-hero-meta span::before{
  background:var(--color-accent);
  border:1px solid rgba(19,35,57,.18);
  border-radius:50%;
  content:"";
  flex:0 0 auto;
  height:.55rem;
  width:.55rem;
}
@media(max-width:700px){
  .service-hero-meta{align-items:flex-start;flex-direction:column;gap:.65rem}
  .service-hero-meta span,.service-hero-meta span:first-child{padding:0}
}
/* Leichter Parallax der Begriffe auf den Bildern. Bewusst über `translate` und nicht über
   `transform`: Die Einblend-Animation der Begriffe läuft bereits über `transform`, und eine
   zweite Angabe dort würde sie ersetzen statt sich mit ihr zu verbinden. Beide Eigenschaften
   werden dagegen zusammen angewendet. Den Wert setzt das Skript beim Scrollen. */
/* Gemeinsamer Schatten für alle Begriffe auf Bildern. Er hebt sie vom Motiv ab und ist die
   Voraussetzung dafür, dass der Parallax darunter überhaupt als Ablösung wahrgenommen wird.
   Zuvor fehlte er bei .room-tag ganz, und die übrigen trugen zwei minimal verschiedene Werte. */
.hero-note,.image-tag,.floating-label,.room-tag,.service-tag{align-items:center;box-shadow:0 12px 32px rgba(0,0,0,.4);display:inline-flex;gap:.45rem;translate:0 var(--parallax,0px)}
.tag-icon{color:var(--color-accent);flex:none;height:1.3rem;width:1.3rem}
@media(prefers-reduced-motion:reduce){
  .hero-note,.image-tag,.floating-label,.room-tag,.service-tag{translate:none}
}
/* Analysis-hero sequence: a self-playing entrance animation, not gated behind any JS-added
   class — content must never depend on the reveal script succeeding to become visible. */
.js .service-hero-analysis .lead{animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) var(--hero-lead,0ms) both}
.js .service-hero-analysis .service-hero-meta{animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) calc(var(--hero-lead,0ms) + 90ms) both}
.js .service-hero-analysis .button{animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) calc(var(--hero-lead,0ms) + 180ms) both}
.js .service-hero-analysis .service-hero-media>*:not(.service-tag){animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) var(--hero-lead,0ms) both}
@media(prefers-reduced-motion:reduce){
  .js .service-hero-analysis .lead,
  .js .service-hero-analysis .service-hero-meta,
  .js .service-hero-analysis .button,
  .js .service-hero-analysis .service-hero-media>*:not(.service-tag){
    animation:none;
    opacity:1;
    transform:none;
    visibility:visible;
  }
}
/* Keep major headings within three lines */
/* Keine automatische Silbentrennung: In den großen Display-Überschriften zerreißt sie Wörter
   ("Re-geln"), obwohl die Zeile auch ungetrennt passt. Nur überlange Einzelwörter, die sonst
   aus dem Layout laufen würden, dürfen umbrechen. */
main h2{max-width:100%;overflow-wrap:break-word;text-wrap:balance}
/* Global polished button interactions */
.button:hover{
  background:var(--gradient-gold);
  border-color:var(--color-accent);
  box-shadow:0 .7rem 1.6rem rgba(19,35,57,.32);
  color:var(--color-accent-contrast);
  transform:translateY(-2px);
}
.button:active{
  box-shadow:0 .25rem .7rem rgba(19,35,57,.24);
  transform:translateY(0);
  transition-duration:.1s;
}
.button.secondary:hover{
  background:var(--gradient-gold);
  border-color:var(--color-accent);
  color:var(--color-accent-contrast);
}
.button.light:hover{
  background:var(--gradient-gold);
  border-color:var(--color-accent);
  color:var(--color-accent-contrast);
}
/* Der Icon-Kreis (.button-icon span) ist selbst golden — auf dem golden gewordenen Hover-
   Hintergrund des Buttons verschwand er dadurch fast. Im Hover deshalb umgekehrter Kontrast:
   dunkler Kreis, goldener Pfeil, statt goldener Kreis mit dunklem Pfeil. */
/* .button-icon steht immer auf demselben Element wie .button (nie verschachtelt) — der
   Nachfahren-Selektor ".button:hover .button-icon" traf dadurch nie zu, wodurch der goldene
   Pfeil-Kreis beim Hover auf dem jetzt ebenfalls goldenen Button-Hintergrund unsichtbar
   verschwand statt sich umzukehren. */
.button.button-icon:hover span{background:var(--color-accent-contrast)}
.button.button-icon:hover span::before{background-color:var(--color-accent)}
.button:focus-visible,
.header-contact-cta:focus-visible{
  outline:3px solid color-mix(in srgb,var(--color-accent) 72%,#fff);
  outline-offset:3px;
}
a:focus-visible,
.nav a:focus-visible,
input:focus-visible,
textarea:focus-visible,
.faq-list summary:focus-visible,
.service-faq summary:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}
.header-contact-cta:hover{
  background:var(--gradient-gold);
  box-shadow:0 .55rem 1.3rem rgba(19,35,57,.3);
  color:var(--color-accent-contrast);
  transform:translateY(-1px);
}
@media(prefers-reduced-motion:reduce){
  .button,.header-contact-cta{transition:none}
  .button:hover,.button:active,.header-contact-cta:hover{transform:none}
}
/* Large watermark brand mark on every closing CTA section (home + service pages) */
.home-final-cta .compass-watermark,
.service-final-cta .compass-watermark{
  background:url('/assets/images/brand/bildmarke.svg') no-repeat center/contain;
  height:30rem;
  opacity:1;
  pointer-events:none;
  position:absolute;
  right:-4rem;
  /* Unten verankert statt vertikal an der Abschnittsmitte (top:30%/translateY(-50%)): Die
     Abschnittshöhe schwankt mit der Textlänge (2 vs. 3 Zeilen Headline je Unterseite) — bei
     mittiger Verankerung sprang die Marke dadurch mal hoch/groß wirkend, mal tief abgeschnitten.
     Von unten aus bleibt sie unabhängig von der Texthöhe immer gleich weit im Abschnitt „unten“. */
  bottom:-3rem;
  width:30rem;
  z-index:0;
}
/* Marke bleibt überall gleich groß, die Überschrift bekommt eine Breite, die vor ihr umbricht.
   Großzügig genug bemessen, dass Zwei-Zeiler auf großen Screens nicht unnötig eng umbrechen —
   calc() greift nur dort ein, wo der Platz neben der Marke tatsächlich knapp wird. */
@media(min-width:901px){
  .home-final-cta h2,
  .service-final-cta h2{max-width:min(68rem,calc(100% - 22rem))}
  .home-final-cta>p:not(.eyebrow),
  .service-final-cta>p:not(.eyebrow){max-width:min(38rem,calc(100% - 26rem))}
}
@media(max-width:900px){
  .home-final-cta .compass-watermark,
  .service-final-cta .compass-watermark{bottom:-1rem;height:10rem;opacity:.28;right:-1rem;width:10rem}
}
.hero-home .hero-mini-card{display:none}
/* Unterschiedliche Höhen und großzügigere, uneinheitliche Abstände statt exaktem Eckenraster —
   wirkt organisch über dem Foto verteilt statt mechanisch an den Rand gepinnt. Schlafanalyse-Karte
   unten links verankert, die beiden Notes auf unterschiedlicher Höhe rechts, nicht an einer Kante. */
.hero-home .hero-note-c{right:9%;top:9%}
.hero-home .hero-note-b{bottom:auto;right:4%;top:46%}
@media(max-width:1050px){.hero-home .sleep-analysis-card{bottom:2rem;left:2rem;top:auto}.hero-home .hero-note-c{right:1.5rem;top:1.5rem}.hero-home .hero-note-b{bottom:auto;right:1.5rem;top:6rem}}
@media(max-width:760px){.hero-home .sleep-analysis-card{bottom:1.25rem;left:1.25rem;width:14.5rem}.hero-home .hero-note-b{bottom:auto;right:.75rem;top:38%}.hero-home .hero-note-c{right:.75rem;top:.75rem}}
/* Natural client portraits in the home hero */
.hero-trust{align-items:center;display:flex;gap:1rem;margin-top:2rem}
.hero-trust-avatars{display:flex;padding-left:.2rem}
.hero-trust-avatars span{background-image:url('../images/schlafkompass/client-portraits-v2.webp');background-repeat:no-repeat;background-size:400% auto;border:2px solid var(--color-bg);border-radius:50%;display:block;height:3rem;margin-left:-.65rem;width:3rem}
.hero-trust-avatars span:first-child{background-position:0% 45%;margin-left:0}
.hero-trust-avatars span:nth-child(2){background-position:33.333% 45%}
.hero-trust-avatars span:nth-child(3){background-position:66.666% 42%}
.hero-trust-avatars span:nth-child(4){background-position:100% 38%}
.hero-trust p{display:flex;flex-direction:column;gap:.12rem;margin:0}
.hero-trust strong{font-size:1rem}
.hero-trust p span{color:var(--color-muted);font-size:.78rem;line-height:1.35;max-width:250px}
@media(max-width:760px){.hero-trust{margin-top:1.4rem}.hero-trust-avatars span{height:2.65rem;width:2.65rem}.hero-trust p span{font-size:.72rem}}
/* Scroll-progress statement on the home page */
.scroll-quote-section{align-items:center;background:var(--color-surface);display:flex;flex-direction:column;padding:9rem 6%;text-align:center}
.scroll-quote-mark{align-items:center;background:transparent;border:1.5px solid var(--color-accent);border-radius:50%;color:var(--color-accent);display:flex;font-size:.72rem;font-weight:800;height:3.25rem;justify-content:center;margin-bottom:2.5rem;outline:1.5px solid var(--color-accent);outline-offset:4px;width:3.25rem}
.scroll-quote{color:rgba(244,239,227,.16);display:block;font-size:76px;font-weight:470;letter-spacing:-.045em;line-height:1.04;margin:0;max-width:1450px}
.scroll-quote-char{color:rgba(244,239,227,.16);display:inline-block;transition:color .28s ease}
.scroll-quote-char.is-active{color:var(--color-text)}
.scroll-quote-section>p{color:var(--color-muted);display:flex;flex-direction:column;font-size:.78rem;gap:.2rem;margin:2.5rem 0 0}
.scroll-quote-section.reveal-up{transform:translateY(1.25rem)}
.scroll-quote-section.reveal-up.is-visible{transform:translateY(0)}
@media(max-width:1100px){.scroll-quote{font-size:56px}.scroll-quote-section{padding-bottom:7rem;padding-top:7rem}}
@media(max-width:700px){.scroll-quote-section{padding:5rem 1rem}.scroll-quote{font-size:clamp(1.7rem,7.5vw,2.4rem);line-height:1.15}.scroll-quote-mark{height:2.75rem;margin-bottom:2rem;width:2.75rem}}
@media(prefers-reduced-motion:reduce){.scroll-quote-char{color:var(--color-text);transition:none}}
.scroll-quote-word{display:inline-block;white-space:nowrap}
.scroll-quote-section>p strong{color:var(--color-text);font-size:.88rem}
.scroll-quote-section>p span{color:var(--color-muted);font-size:.75rem}
/* Sequenced home hero and vertical sleep-profile card */
/* Höhe von .hero-home .hero-shell/.hero-visual ist jetzt globales Styling (siehe global.css) —
   Effekt soll auf jeder Site gleich sein, hier bleiben nur noch die Schlafkompass-Inhalte
   (Schlafanalyse-Karte, Notes), die es nur auf dieser Marke gibt.
   Abstand größer als der Bild-Radius (2.5rem) an dieser Ecke, sonst wirkt die Karte durch die
   Rundung hindurch geschnitten statt mit sauberem Rand zum Bild zu stehen. */
.hero-home .sleep-analysis-card{align-items:flex-start;bottom:2.5rem;display:flex;flex-direction:column;gap:.75rem;left:2.5rem;padding:1.15rem;top:auto;width:13rem}
.hero-home .sleep-analysis-chart{align-self:center;height:6.6rem;order:1;width:6.6rem}
.hero-home .sleep-analysis-card-copy{align-items:center;order:2;text-align:center;width:100%}
.hero-home .sleep-analysis-card-copy span{font-size:.68rem}
.hero-home .sleep-analysis-card-copy strong{font-size:1rem}
@media(max-width:1050px){.hero-home .sleep-analysis-card{bottom:2rem;left:2rem;top:auto}}
@media(max-width:760px){.hero-home .sleep-analysis-card{bottom:1.25rem;gap:.45rem;left:1.25rem;padding:.75rem;width:10rem}.hero-home .sleep-analysis-chart{height:4.6rem;width:4.6rem}.hero-home .sleep-analysis-card-copy strong{font-size:.82rem}}
.hero-home .chart-value-1{animation-delay:2.05s}
.hero-home .chart-value-2{animation-delay:2.2s}
.hero-home .chart-value-3{animation-delay:2.35s}
.hero-home .chart-core{animation:none;animation-delay:2.75s;opacity:1;transform:scale(1)}
/* Scroll-controlled sleep-profile chart */
.hero-home .chart-value{animation:none;stroke:var(--color-accent);transition:stroke-dashoffset .9s cubic-bezier(.22,.75,.25,1)}
/* More breathing room between home hero title lines */
.hero-home .hero-title{line-height:.98}
@media(max-width:760px){.hero-home .hero-title{line-height:1}}
/* Rounded product material caption */
@media(max-width:700px){.product-material-stage>img{height:85vw}.material-caption{border-radius:1.25rem;margin:-2rem 4% 0;max-width:none;padding:1.25rem 1.5rem;position:static}.material-caption h2{font-size:1.5rem;font-weight:500;line-height:1.2}.material-caption span{font-size:.68rem}.material-caption p{font-size:.9rem;line-height:1.5}}
/* Rounded caption on the analysis material image */
.topics-material-image figcaption{background:var(--color-surface);border:1px solid var(--color-accent);border-radius:1.25rem;bottom:1.5rem;left:1.5rem;max-width:340px;padding:1rem 1.2rem;position:absolute}
@media(max-width:700px){.topics-material-image figcaption{border-radius:1rem}}
/* Schlafanalyse quote matches the home-page statement */
.analysis-scroll-quote{background:transparent;grid-column:1/-1;padding:clamp(5rem,8vw,8rem) 0}
.analysis-seo-composition .analysis-scroll-quote .scroll-quote{border:0;font-size:76px;margin:0;max-width:1450px;padding:0;width:100%}
@media(max-width:1100px){.analysis-seo-composition .analysis-scroll-quote .scroll-quote{font-size:56px}}
@media(max-width:700px){.analysis-scroll-quote{padding:4rem 0}.analysis-seo-composition .analysis-scroll-quote .scroll-quote{font-size:clamp(1.7rem,7.5vw,2.4rem);line-height:1.15}}
/* Visual introduction for the analysis detail column */
.analysis-seo-composition .seo-side-topics article{border:0;margin:0;padding:0}
.analysis-seo-composition .seo-side-topics article+article{margin-top:0}
.seo-side-image{margin:0}
.seo-side-image img{border-radius:1.5rem;display:block;height:clamp(190px,20vw,285px);object-fit:cover;width:100%}
@media(max-width:700px){.seo-side-image img{border-radius:0;height:60vw}}
/* Switch to the animated burger menu before navigation labels get clipped */
@media(max-width:1359px){
  /* Unterhalb der Desktop-Navigation trägt die Kapsel nur noch Logo und Menü-Button. Ohne diese
     Rücknahme behielte sie die für die Desktop-Zeile gedachte Mindesthöhe und wirkte auf Tablets
     unnötig wuchtig — mit dem größeren Startseiten-Logo umso mehr. */
  .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:76px;overflow:visible}
  [data-template="home"] .brand-logo{height:56px}
  [data-template="home"] .site-header.is-scrolled .brand-logo{height:44px}
  /* Der Logo-Link füllt sonst die komplette erste Spalte (mehrere hundert Pixel breit) und
     reicht damit weit über das Logo hinaus bis unter das Menüpanel. Er darf nur so breit sein
     wie sein Inhalt. */
  .header-inner .brand{justify-self:start;width:max-content;max-width:100%}
  .nav-toggle-button{align-items:center;border:1px solid var(--color-border);border-radius:999px;cursor:pointer;display:inline-flex;flex-direction:column;gap:4px;height:42px;justify-content:center;justify-self:end;position:relative;width:48px}
  .nav-toggle-button{transition:background .2s ease,border-color .2s ease,transform .2s ease}
  .nav-toggle-button span{background:currentColor;border-radius:999px;display:block;height:2px;transform-origin:center;transition:transform .24s ease,opacity .18s ease,background .2s ease;width:18px}
  .nav-toggle:checked+.nav-toggle-button{background:var(--gradient-gold);border-color:var(--color-accent);color:var(--color-accent-contrast)}
  .nav-toggle:checked+.nav-toggle-button span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle:checked+.nav-toggle-button span:nth-child(2){opacity:0;transform:scaleX(0)}
  .nav-toggle:checked+.nav-toggle-button span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .header-contact-cta{display:none}
  /* Das Panel ist ein Dropdown unter dem Menü-Button, keine vollflächige Leiste: ohne
     max-width zieht es sich über die gesamte Seitenbreite und die Einträge stehen weit
     auseinandergezogen darin. grid-template-columns und justify-content sind nötig, weil das
     Panel sonst die Zeilen-Ausrichtung der Desktop-Navigation erbt — die Spalte wäre dann nur
     so breit wie der längste Linktext und würde an einer Kante kleben.
     Schlafkompass hat mehr/längere Nav-Punkte als andere Sites und wechselt deshalb schon bei
     1359px statt erst bei 820px (siehe global.css) auf den Burger-Button. Die schwebende
     Panel-Optik (position:absolute, Karten-Look) und die Kollaps-Mechanik sind global ab 820px
     definiert (siehe global.css) — dazwischen (820–1359px) fehlte beides komplett: das Menü
     stand ungestyled in-flow im Dokument und schob den restlichen Seiteninhalt nach unten, statt
     als schwebendes Panel darüberzuliegen. Hier dieselben Regeln wie in global.css, nur auf diese
     Site-eigene Breite gehoben. Nur der Farbverlauf des mobilen Kontakt-Buttons ist unten davon
     getrennt, weil er Schlafkompass' Marken-Gradient ist. */
  .site-header .nav{background:var(--color-surface);border:1px solid var(--color-border);border-radius:1.25rem;box-shadow:var(--shadow-soft);display:grid;grid-template-columns:1fr;justify-content:stretch;margin:0;max-width:min(24rem,100%);max-height:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;right:0;top:100%;transform:translateY(-8px) scale(.98);transition:max-height .32s ease,opacity .22s ease,padding .24s ease,transform .28s ease;width:min(20rem,100%)}
  .site-header .nav a{justify-content:space-between;min-height:2.8rem;opacity:0;padding-inline:1rem;transform:translateY(-4px);transition:opacity .18s ease,transform .24s ease,background .2s ease}
  .nav-toggle:checked~.nav{max-height:480px;opacity:1;padding-block:.65rem;pointer-events:auto;transform:translateY(0) scale(1)}
  .nav-toggle:checked~.nav a{opacity:1;transform:translateY(0)}
  .site-header .nav .nav-contact-mobile{background:var(--gradient-gold);border-radius:999px;color:var(--color-accent-contrast);display:flex!important;font-weight:600;justify-content:center;margin:.4rem 0 0;margin-left:0}
  .header-inner:has(.nav-toggle:checked){border-radius:1.5rem}
}
@media(min-width:1360px){.nav-toggle-button{display:none}}
/* Beide Themen-Karussells (Schlafanalyse "Acht Blickwinkel", Coaching "Was Ihren Rhythmus
   beeinflusst") zeigen absichtlich einen Zipfel der nächsten Karte an, damit klar ist, dass
   mehr folgt — der harte Schnitt am rechten Rand wirkte dabei aber wie ein Rendering-Fehler
   statt einer Andeutung. Ein Fade-out blendet die angeschnittene Karte stattdessen weich aus. */
.topic-carousel-viewport{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 3rem),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 3rem),transparent 100%)}
/* Schlafanalyse topic carousel */
.analysis-topics-editorial{overflow:hidden}
.analysis-topics-editorial .topic-carousel{position:relative}
.analysis-topics-editorial .topic-carousel-viewport{cursor:grab;overflow:hidden}
.analysis-topics-editorial .topic-carousel-viewport:active{cursor:grabbing}
.analysis-topics-editorial .topic-landscape{display:flex;gap:clamp(2rem,3vw,3.5rem);touch-action:pan-y pinch-zoom}
.analysis-topics-editorial .topic-landscape article{background:transparent;border:0;border-radius:0;box-shadow:none;display:flex;flex:0 0 22%;flex-direction:column;justify-content:flex-start;min-height:250px;padding:0;position:relative}
.analysis-topics-editorial .topic-card-icon{height:2.15rem;margin:0 0 2.8rem;width:2.15rem}
.analysis-topics-editorial .topic-landscape h3{font-size:var(--sk-h3-size);font-weight:500;margin:0 0 1.15rem}
.analysis-topics-editorial .topic-landscape p{font-size:1rem;line-height:1.55;margin:0;max-width:31ch}
.analysis-topics-editorial .topic-carousel-controls{display:flex;gap:.65rem;justify-content:flex-end;margin-top:2.5rem}
.analysis-topics-editorial .topic-carousel-controls button{align-items:center;background:transparent;border:1px solid rgba(244,239,227,.32);border-radius:50%;color:var(--color-text);cursor:pointer;display:flex;font:inherit;font-size:1.25rem;height:3rem;justify-content:center;padding:0;transition:border-color .2s ease,opacity .2s ease,transform .2s ease;width:3rem}
.analysis-topics-editorial .topic-carousel-controls button:hover{border-color:var(--color-text);transform:translateY(-2px)}
.analysis-topics-editorial .topic-carousel-controls button:disabled{cursor:default;opacity:.25;transform:none}
@media(max-width:1050px){.analysis-topics-editorial .topic-landscape article{flex-basis:42%}}
@media(max-width:700px){
  .analysis-topics-editorial .topic-landscape{gap:1.5rem}
  .analysis-topics-editorial .topic-landscape article{border:0;flex-basis:82%;min-height:230px;padding:0}
  .analysis-topics-editorial .topic-card-icon{margin-bottom:2.25rem}
  .analysis-topics-editorial .topic-carousel-controls{justify-content:flex-start;margin-top:1.75rem}
}
/* Schlafanalyse benefits timeline */
.analysis-benefits{border:0;display:grid;gap:clamp(2rem,4vw,5rem);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:3.25rem;position:relative}
.analysis-benefits::before{background:var(--color-border);content:"";height:1px;left:0;position:absolute;right:0;top:.28rem}
.analysis-benefits article{align-items:start;border:0;display:block;padding:0;position:relative}
.analysis-benefits i{background:var(--color-accent);border-radius:50%;display:block;height:.55rem;position:relative;width:.55rem;z-index:1}
.analysis-benefits strong{display:block;font-size:1rem;font-weight:500;line-height:1.4;margin-top:1.65rem;max-width:18ch}
@media(max-width:700px){
  .analysis-benefits{gap:1.75rem;grid-template-columns:1fr;padding-left:2rem}
  .analysis-benefits::before{bottom:.25rem;height:auto;left:.27rem;right:auto;top:.25rem;width:1px}
  .analysis-benefits article{min-height:3.5rem}
  .analysis-benefits i{left:-2rem;position:absolute;top:.2rem}
  .analysis-benefits strong{margin-top:0;max-width:none}
}
/* Shared Schlafkompass subpage design system — based on Schlafanalyse.
   Typo-Skala: H2 hat drei benannte Stufen (Standard/lg/sm), H3 zwei (Standard/lg). Neue Sections
   sollen eine dieser Variablen referenzieren statt eigene clamp()-Werte zu erfinden — das war der
   Grund, warum H2/H3 projektweit in ~15 bzw. ~20 leicht unterschiedlichen Größen auseinanderliefen. */
:root{
  --sk-page-gutter:6%;
  --sk-section-space:clamp(6rem,10vw,10rem);
  --sk-display-size:clamp(2.8rem,4.8vw,5rem);
  --sk-display-size-lg:clamp(3.1rem,5.4vw,5.8rem);
  --sk-display-size-sm:clamp(2.2rem,3.4vw,3.5rem);
  --sk-display-weight:470;
  --sk-display-tracking:-.04em;
  --sk-display-leading:.96;
  --sk-h3-size:clamp(1.4rem,1.8vw,1.8rem);
  --sk-h3-size-lg:clamp(1.8rem,2.8vw,2.8rem);
  --sk-card-radius:1.75rem;
}
.service-hero,.about-hero,.contact-hero{align-items:center;display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);min-height:clamp(680px,86vh,900px);padding:1rem 0 clamp(5rem,8vw,8rem) var(--sk-page-gutter)}
.service-hero-copy,.about-hero>div:not(.about-hero-media),.contact-hero>div{padding-right:clamp(2rem,4vw,4.5rem);position:relative;z-index:2}
.service-hero h1,.about-hero h1,.contact-hero h1,.room-hero h1{font-size:clamp(4.5rem,6.7vw,6.25rem);font-weight:470;letter-spacing:-.045em;line-height:.97;margin:.8rem 0 1.5rem;max-width:1000px;overflow-wrap:break-word;hyphens:auto}
.service-hero .lead,.about-hero>div>p:last-child,.contact-hero>div>p:last-child{color:var(--color-muted);font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.65;max-width:42rem}
.service-hero-media,.about-hero-media,.contact-hero>img{height:clamp(590px,78vh,820px)}
.service-hero-media img,.about-hero-media img,.contact-hero>img{border-radius:2.5rem 0 0 2.5rem;height:100%;object-fit:cover;width:100%}
.service-intro h2,.coaching-manifesto h2,.product-principle h2,.analysis-topics h2,.coaching-themes h2,.product-categories h2,.editorial-seo h2,.service-faq h2,.coaching-offers h2,.room-intro h2,.about-origin h2,.contact-choice h2,.analysis-process h2,.about-brands h2,.material-values h2,.analysis-seo-detail>header h2,.analysis-process>div h2,.analysis-audience h2,.analysis-reason h2{font-size:var(--sk-display-size);font-weight:var(--sk-display-weight);letter-spacing:var(--sk-display-tracking);line-height:var(--sk-display-leading)}
.coaching-themes h3,.product-categories h3,.room-factors h3,.offer-rows h3,.contact-choice h3,.about-values h3{font-weight:500}
/* Schlafraum-Hero hat eine zusätzliche Stufe davor: erst animiert das Bild ein, danach starten
   Titel-Buchstaben und Begriffwolken gleichzeitig, und erst wenn der Titel fertig getippt ist,
   folgen Absatz und Button. --room-image-lead ist die Bild-Animationsdauer; der Buchstaben-Start
   wird um denselben Wert in site.js verzögert, damit "gleichzeitig mit der h1" stimmt. */
.room-hero,.room-hero-content{--room-image-lead:700ms}
.js .room-hero img{animation:analysis-hero-content-in .7s cubic-bezier(.22,.75,.25,1) both}
.js .room-hero .room-tag:nth-of-type(1){animation:analysis-hero-content-in .6s cubic-bezier(.22,.75,.25,1) var(--room-image-lead) both}
.js .room-hero .room-tag:nth-of-type(2){animation:analysis-hero-content-in .6s cubic-bezier(.22,.75,.25,1) calc(var(--room-image-lead) + 90ms) both}
.js .room-hero .room-tag:nth-of-type(3){animation:analysis-hero-content-in .6s cubic-bezier(.22,.75,.25,1) calc(var(--room-image-lead) + 180ms) both}
.js .room-hero .room-tag:nth-of-type(4){animation:analysis-hero-content-in .6s cubic-bezier(.22,.75,.25,1) calc(var(--room-image-lead) + 270ms) both}
.js .room-hero .room-tag:nth-of-type(5){animation:analysis-hero-content-in .6s cubic-bezier(.22,.75,.25,1) calc(var(--room-image-lead) + 360ms) both}
.js .room-hero-content>*:not(.eyebrow):not(.hero-title){animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) calc(var(--room-image-lead) + var(--hero-lead,0ms)) both}
@media(prefers-reduced-motion:reduce){
  .js .room-hero-content>*,
  .js .room-hero img,
  .js .room-hero .room-tag{animation:none;opacity:1;transform:none;visibility:visible}
}
/* Kontakt- und Über-uns-Hero folgen derselben Reihenfolge wie die Service-Heros: erst die
   Überschrift, dann der übrige Inhalt. Ohne diese Regeln stand deren Fließtext sofort da,
   während sich die Überschrift noch eintippte. */
.js .contact-hero>div>p:not(.eyebrow),
.js .about-hero>div>p:not(.eyebrow){animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) var(--hero-lead,0ms) both}
.js .contact-hero>div>.button,
.js .about-hero>div>.button{animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) calc(var(--hero-lead,0ms) + 90ms) both}
.js .contact-hero>img,
.js .about-hero>img,
.js .about-hero>.about-hero-media{animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) var(--hero-lead,0ms) both}
@media(prefers-reduced-motion:reduce){
  .js .contact-hero>div>p:not(.eyebrow),
  .js .about-hero>div>p:not(.eyebrow),
  .js .contact-hero>div>.button,
  .js .about-hero>div>.button,
  .js .contact-hero>img,
  .js .about-hero>img,
  .js .about-hero>.about-hero-media{animation:none;opacity:1;transform:none;visibility:visible}
}
.js .service-hero .lead{animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) var(--hero-lead,0ms) both}
.js .service-hero .service-hero-meta{animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) calc(var(--hero-lead,0ms) + 90ms) both}
.js .service-hero .button{animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) calc(var(--hero-lead,0ms) + 180ms) both}
.js .service-hero .service-hero-media>*:not(.service-tag){animation:analysis-hero-content-in .75s cubic-bezier(.22,.75,.25,1) var(--hero-lead,0ms) both}
/* Fest statt über --sk-display-size: auf der Angebote-Übersicht (templates/offers.php) stehen
   zwei .coaching-offers-Gruppen mit je eigener Überschrift untereinander; die 1.3fr-Spalte ist
   schmaler als die Stellen, für die --sk-display-size gedacht ist, wodurch die Zeilenumbruch-Logik
   (main h2 in site.js) je nach Textlänge unterschiedlich stark schrumpfte und die beiden
   Gruppen-Überschriften unterschiedlich groß wirkten. Bei dieser Größe passen beide bereits ohne
   Schrumpfen in zwei Zeilen — beide bleiben dadurch garantiert gleich groß. Nur für diese Seite
   scope't (data-template), damit die einzelne .coaching-offers-Überschrift auf schlafcoaching.php
   weiterhin die normale große Sektionsüberschrift ihrer Geschwister-Sections bekommt. */
[data-template="offers"] .coaching-offers header h2{font-size:clamp(1.8rem,2.6vw,2.6rem)}
.coaching-offers+.coaching-offers{background:var(--color-bg)}
.offer-rows{display:grid;gap:clamp(1rem,1.8vw,1.75rem);grid-template-columns:repeat(4,minmax(0,1fr))}
/* Dreispaltig für Gruppen mit nur drei Karten (z. B. Einzelangebote) — sonst wirkt eine vierte,
   leere Spalte wie ein Layoutfehler. Muss nach der Basisregel stehen, um sie zu überschreiben. */
.offer-rows.offer-rows-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Einzelangebote sind fest 3 Karten — bei 3 Spalten passt das exakt, deshalb bleibt die
   Lückenfüller-Kachel dort standardmäßig versteckt (siehe @media(max-width:1320px) unten). */
.offer-filler-cta{display:none}
/* Vierspaltig braucht mehr Platz, als ein normaler Laptop-Bildschirm (13"-15", ~1366-1440px
   Breite) bietet — dort wirkten die Karten gequetscht. Umbruch greift deshalb deutlich früher als
   nur bei echten Tablet-Breiten. */
@media(max-width:1600px){.offer-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1320px){.offer-rows.offer-rows-3{grid-template-columns:repeat(2,minmax(0,1fr))}.offer-filler-cta{display:flex}}
.offer-rows article,.offer-rows article.is-featured{align-items:stretch;background:#142236;border:1px solid transparent;border-radius:var(--sk-card-radius);display:flex;flex-direction:column;gap:0;min-height:470px;padding:clamp(1.5rem,2.4vw,2.25rem);transition:border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.22,.75,.25,1)}
.offer-rows article.is-featured{background:var(--color-surface);border-color:var(--color-accent)}
.offer-rows article:hover{border-color:var(--color-accent);box-shadow:var(--shadow-soft);transform:translateY(-6px)}
@media(prefers-reduced-motion:reduce){
  .offer-rows article{transition:none}
  .offer-rows article:hover{transform:none}
}
.offer-rows article>strong{color:var(--color-accent);font-size:clamp(2.4rem,3.3vw,3.65rem);font-weight:430;letter-spacing:-.05em;line-height:1;order:-3}
.offer-rows article>span{color:var(--color-muted);font-size:.8rem;font-weight:500;margin-top:1rem;order:-2}
.offer-rows article>div{margin-top:clamp(3rem,5vw,5rem);order:-1}
.offer-rows .button{width:100%}
.offer-rows article>a.button{margin-top:auto}
.offer-row-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:auto}
.offer-row-more{color:var(--color-muted);font-size:.9rem;font-weight:500;text-align:center;text-decoration:underline;text-underline-offset:.2em}
.offer-row-more:hover{color:var(--color-accent)}
.button.button-filled{background:var(--gradient-gold);border-color:var(--color-accent);color:var(--color-accent-contrast)}
.room-visit{align-items:stretch;background:var(--color-surface);border-top:1px solid var(--color-border);display:grid;gap:clamp(3rem,8vw,9rem);grid-template-columns:minmax(320px,.7fr) minmax(0,1.15fr);padding:var(--sk-section-space) var(--sk-page-gutter)}
/* Preisbox links, Text rechts — auf Mobile (siehe Media Query unten) bleibt die DOM-Reihenfolge
   (Text zuerst, Box danach) unangetastet, hier wird nur die Spaltenreihenfolge visuell getauscht. */
.room-visit>div:first-child{align-self:center;max-width:760px;order:2}
.room-visit h2{font-size:var(--sk-display-size);font-weight:var(--sk-display-weight);letter-spacing:var(--sk-display-tracking);line-height:var(--sk-display-leading)}
.room-visit>div:first-child>p:last-child{color:var(--color-muted);font-size:1.05rem;line-height:1.7;max-width:42rem}
.visit-price{background:var(--color-surface);border:1px solid var(--color-accent);border-radius:var(--sk-card-radius);display:flex;flex-direction:column;min-height:480px;order:1;padding:clamp(2rem,3.5vw,3.5rem)}
.visit-price>span{font-size:1rem;font-weight:550}
.visit-price strong{color:var(--color-accent);font-size:clamp(4rem,6vw,6rem);font-weight:430;letter-spacing:-.06em;line-height:.95;margin-top:1.5rem}
.visit-price small{color:var(--color-muted);font-size:.95rem;line-height:1.55;margin-top:1.25rem;max-width:28ch}
.visit-price .button{margin-top:auto;text-align:center;width:100%}
@media(max-width:1050px){
  .service-hero,.about-hero,.contact-hero{grid-template-columns:1fr;padding:3rem 0 5rem}
  .service-hero-copy,.about-hero>div:not(.about-hero-media),.contact-hero>div{padding:2rem 5%}
  .service-hero h1,.about-hero h1,.contact-hero h1{font-size:clamp(4rem,9vw,5.5rem)}
  .service-hero-media,.service-hero-analysis .service-hero-media,.about-hero>img,.contact-hero>img{height:62vw;min-height:430px}
  .service-hero-media img,.about-hero>img,.about-hero-media img,.contact-hero>img{border-radius:0}
  .offer-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .room-visit{grid-template-columns:1fr}
  .room-visit>div:first-child,.visit-price{order:0}
}
@media(max-width:700px){
  :root{--sk-page-gutter:1rem;--sk-section-space:clamp(5rem,14vw,7rem);--sk-display-size:clamp(2.5rem,12vw,4rem)}
  /* Vertikaler Sektionsabstand: die einzelnen Sections tragen ihr eigenes clamp(Xrem,Yvw,Zrem)
     statt der globalen --space-*-Tokens, mit hohem rem-Sockel (meist 5-7rem) fürs Desktop-Layout.
     Auf Mobile (gestapelte Sections, kein Nebeneinander mehr) addierte sich Padding-Bottom der
     einen mit Padding-Top der nächsten Section zu spürbar leerem Raum zwischen den Abschnitten.
     Ein Wert für alle, angelehnt an global.css .section (3.25rem), statt 25 Einzelwerte zu pflegen. */
  .editorial-positioning,.service-story,.analysis-spread,.blog-teaser-section,.seo-editorial,
  .faq-editorial,.home-final-cta,.analysis-process,.editorial-seo,.price-feature,.service-faq,
  .service-final-cta,.coaching-offers,.room-factors,.material-values,.about-origin,.about-people,
  .about-values,.contact-choice,.analysis-reason,.analysis-package,.analysis-seo-detail{
    padding-top:3.25rem;
    padding-bottom:3.25rem;
  }
  .service-hero,.about-hero,.contact-hero{padding:2rem 0 5rem}
  .service-hero-copy,.about-hero>div:not(.about-hero-media),.contact-hero>div{padding:1rem}
  .service-hero h1,.about-hero h1,.contact-hero h1,.room-hero h1{font-size:clamp(3rem,14vw,4.5rem)}
  .service-hero-media,.service-hero-analysis .service-hero-media,.about-hero>img,.contact-hero>img{height:82vw;min-height:320px}
  .service-hero-media img,.about-hero>img,.about-hero-media img,.contact-hero>img{border-radius:0}
  .offer-rows,.offer-rows.offer-rows-3{grid-template-columns:1fr}
  .offer-rows article,.offer-rows article.is-featured{min-height:420px}
  .room-visit{padding-left:1rem;padding-right:1rem}
  .visit-price{border-radius:1.2rem;min-height:430px;padding:1.75rem}
  /* .about-hero/.service-hero haben schon padding-bottom:5rem, die jeweils direkt folgende
     Sektion nochmal padding-top:clamp(6rem,10vw,10rem) — zusammen eine unnötig große
     Leerfläche zwischen Foto und Überschrift auf Mobile. Betrifft alle Seiten mit diesem
     Hero+Intro-Muster (Über uns, Schlafanalyse, Coaching, Produkte). */
  .about-origin,.service-intro,.coaching-manifesto,.product-principle{padding-top:2.5rem}
}
@media(prefers-reduced-motion:reduce){
  .js .service-hero .lead,.js .service-hero .service-hero-meta,.js .service-hero .button,.js .service-hero .service-hero-media>*{animation:none;opacity:1;transform:none;visibility:visible}
}
/* Reusable three-step consultation timeline */
.contact-process{padding:var(--sk-section-space) var(--sk-page-gutter)}
.contact-process header{margin:0 auto clamp(4rem,7vw,7rem);max-width:900px;text-align:center}
.contact-process h2{font-size:var(--sk-display-size);font-weight:var(--sk-display-weight);letter-spacing:var(--sk-display-tracking);line-height:var(--sk-display-leading);margin:0}
.contact-process header>p:last-child{color:var(--color-muted);font-size:1.05rem;line-height:1.7;margin:1.75rem auto 0;max-width:650px}
/* .process-timeline (Kreis-Marker, Verbindungslinie, Grid) ist jetzt global (siehe global.css) —
   identischer Aufbau für jede Site, nur Theme-Variablen unterscheiden. */
@media(max-width:700px){
  .contact-process{padding-left:1rem;padding-right:1rem}
  .contact-process header{text-align:left}
  .contact-process header>p:last-child{margin-left:0}
}
/* Layered situation imagery for the analysis audience */
.analysis-audience .situations-image{position:relative}
.situation-vignettes{inset:0;pointer-events:none;position:absolute;z-index:2}
.situation-vignettes figure{background:var(--color-bg);border:1.5px solid var(--color-accent);border-radius:1.35rem;box-shadow:0 18px 40px rgba(0,0,0,.22);margin:0;overflow:hidden;position:absolute}
.situation-vignettes figure:nth-child(1){height:290px;left:1.5rem;top:14%;transform:rotate(-1.5deg);width:220px}
.situation-vignettes img{border-radius:calc(1.35rem - 1.5px);height:100%;object-fit:cover;width:100%}
@media(max-width:1050px){
  .situation-vignettes figure:nth-child(1){left:1rem}
}
@media(max-width:700px){
  .analysis-audience .situations-image{padding-top:2rem}
  .situation-vignettes figure:nth-child(1){height:145px;left:.75rem;top:4rem;width:108px}
}
/* Reusable topic carousel and shared outline-icon language */
.topic-carousel-section{overflow:hidden}
.topic-carousel-section header{display:block;max-width:none}
.topic-carousel-section header h2{max-width:1250px;width:90%}
.topic-carousel-section>.topic-carousel{display:block;position:relative}
.topic-carousel-section .topic-carousel-viewport{cursor:grab;overflow:hidden}
.topic-carousel-section .topic-carousel-viewport:active{cursor:grabbing}
.topic-carousel-section .topic-landscape{display:flex;gap:clamp(2rem,3vw,3.5rem);touch-action:pan-y pinch-zoom}
.topic-carousel-section .topic-landscape article{background:transparent;border:0;border-radius:0;box-shadow:none;display:flex;flex:0 0 22%;flex-direction:column;justify-content:flex-start;min-height:250px;padding:0;position:relative}
.topic-carousel-section .topic-card-icon{display:block;height:2.15rem;margin:0 0 2.8rem;width:2.15rem}
.topic-card-icon{color:var(--color-accent)}
.topic-carousel-section .topic-landscape h3{font-size:var(--sk-h3-size);font-weight:500;margin:0 0 1.15rem}
.topic-carousel-section .topic-landscape p{color:var(--color-muted);font-size:1rem;line-height:1.55;margin:0;max-width:31ch}
.topic-carousel-section .topic-carousel-controls{display:flex;gap:.65rem;justify-content:flex-end;margin-top:2.5rem}
.topic-carousel-section .topic-carousel-controls button{align-items:center;background:transparent;border:1px solid rgba(244,239,227,.32);border-radius:50%;color:var(--color-text);cursor:pointer;display:flex;font:inherit;font-size:1.25rem;height:3rem;justify-content:center;padding:0;transition:border-color .2s ease,opacity .2s ease,transform .2s ease;width:3rem}
.topic-carousel-section .topic-carousel-controls button:hover{border-color:var(--color-text);transform:translateY(-2px)}
.topic-carousel-section .topic-carousel-controls button:disabled{cursor:default;opacity:.25;transform:none}
.product-categories .section-card-icon,.room-factors .section-card-icon,.contact-choice .section-card-icon{margin-bottom:2.5rem}
.product-categories .section-card-icon+h3,.room-factors .section-card-icon+h3,.contact-choice .section-card-icon+h3{margin-top:0}
.contact-choice .section-card-icon+h3{margin-bottom:1rem}
@media(max-width:1050px){.topic-carousel-section .topic-landscape article{flex-basis:42%}}
@media(max-width:700px){
  .topic-carousel-section header h2{width:100%}
  .topic-carousel-section .topic-landscape{gap:1.5rem}
  .topic-carousel-section .topic-landscape article{border:0;flex-basis:82%;min-height:230px;padding:0}
  .topic-carousel-section .topic-card-icon{margin-bottom:2.25rem}
  .topic-carousel-section .topic-carousel-controls{justify-content:flex-start;margin-top:1.75rem}
}
/* Finer icon-card typography */
.analysis-topics-editorial .topic-landscape h3,
.topic-carousel-section .topic-landscape h3,
.product-categories .section-card-icon+h3,
.room-factors .section-card-icon+h3,
.contact-choice .section-card-icon+h3{
  font-size:clamp(1.08rem,1.25vw,1.3rem);
  font-weight:450;
  letter-spacing:-.015em;
  line-height:1.25;
}
/* Designed coaching detail instead of raw long-form columns */
.coaching-detail{padding:var(--sk-section-space) var(--sk-page-gutter)}
.coaching-detail>header{align-items:end;display:grid;gap:2rem 8vw;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);margin-bottom:clamp(3rem,6vw,6rem)}
.coaching-detail>header h2{font-size:var(--sk-display-size);font-weight:var(--sk-display-weight);letter-spacing:var(--sk-display-tracking);line-height:var(--sk-display-leading);margin:0}
.coaching-detail>header p{color:var(--color-muted);font-size:1.08rem;line-height:1.7;margin:0;max-width:650px}
.coaching-detail-grid{display:grid;gap:clamp(1.25rem,2.5vw,2.5rem);grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}
.coaching-detail-grid article{border-radius:var(--sk-card-radius);padding:clamp(2rem,4vw,4rem)}
.coaching-detail-list{background:var(--color-surface)}
.coaching-detail-grid h3{font-size:var(--sk-h3-size);font-weight:470;letter-spacing:-.025em;line-height:1.18;margin:0}
.coaching-detail-list ul{display:grid;gap:0;list-style:none;margin:2.5rem 0 0;padding:0}
.coaching-detail-list li{align-items:center;border-top:1px solid var(--color-border);display:flex;gap:.8rem;padding:1rem 0}
.coaching-detail-list li::before{align-items:center;background:var(--color-accent);border-radius:50%;color:var(--color-accent-strong);content:"✓";display:inline-flex;flex:0 0 1.15rem;font-size:.68rem;font-weight:750;height:1.15rem;justify-content:center}
.coaching-detail-result{background:var(--color-surface);border:1px solid var(--color-accent);display:flex;flex-direction:column;min-height:500px}
.coaching-detail-result>span{font-size:.78rem;font-weight:650}
.coaching-detail-result h3{font-size:var(--sk-h3-size-lg);margin-top:clamp(4rem,7vw,7rem);max-width:16ch}
.coaching-detail-result p{color:var(--color-muted);line-height:1.65;margin:1.5rem 0 0;max-width:36ch}
.coaching-detail-result>strong{font-size:.95rem;font-weight:550;margin-top:2.75rem}
@media(max-width:900px){
  .coaching-detail>header,.coaching-detail-grid{grid-template-columns:1fr}
  .coaching-detail-result{min-height:440px}
}
@media(max-width:700px){
  .coaching-detail{padding-left:1rem;padding-right:1rem}
  .coaching-detail-grid article{border-radius:1.2rem;padding:1.75rem}
  .coaching-detail-result{min-height:400px}
}
/* Unified blog cards and long-form service details */
.blog-section{background:var(--color-surface);padding-left:var(--sk-page-gutter);padding-right:var(--sk-page-gutter)}
.blog-section .blog-magazine-grid{max-width:none;width:100%}
.blog-card-media img{height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.75,.25,1);width:100%}
.blog-card-media:hover img{transform:scale(1.08)}
.blog-card-media>span{background:rgba(17,32,47,.92);border-radius:999px;bottom:1.25rem;color:var(--color-text);font-size:.72rem;font-weight:600;left:1.25rem;padding:.55rem .8rem;position:absolute}
.blog-card-meta{color:var(--color-muted);font-size:.78rem;font-weight:550;letter-spacing:.04em;margin:0 0 1.25rem}
.blog-card-content>p:not(.blog-card-meta){-webkit-box-orient:vertical;-webkit-line-clamp:3;color:var(--color-muted);display:-webkit-box;font-size:1.02rem;line-height:1.65;max-width:42rem;overflow:hidden}
.blog-card-content .text-link{margin-top:1.25rem}
.blog-card-large:not(.featured) .blog-card-media{aspect-ratio:4/3;height:auto}
/* Gleiches Seitenverhältnis und dieselbe column-gap wie .blog-magazine-grid (4rem): bei einem
   50/50-Split kommt die Bildspalte dadurch exakt auf dieselbe Breite wie eine normale Grid-
   Zelle darunter — vorher war sie durch ein anderes Spaltenverhältnis und eine fixe Höhe
   spürbar schmäler und viel höher (Hochformat statt Querformat). */
.blog-card-large.featured .blog-card-media{aspect-ratio:4/3;height:auto}
.blog-card-large.featured .blog-card-content{justify-content:center;padding:2rem 0}
.blog-card-media,.blog-teaser-featured .blog-card-media{border-radius:2rem}
.blog-card-large.featured .blog-card-content h2{max-width:14ch}
.blog-card-large.featured .blog-card-content>p:not(.blog-card-meta){max-width:38rem}
.service-seo{align-items:start;background:var(--color-surface);display:grid;gap:clamp(3rem,7vw,8rem);grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr)}
.service-seo>header{display:block;margin:0;position:sticky;top:7rem}
.service-seo>header h2{margin-top:0;max-width:none}
.article-body{font-size:1.08rem;line-height:1.78;max-width:840px}
/* .hero-article hat schon ein eigenes padding-bottom, die generische .section-Regel packt oben
   nochmal ihr volles padding-block obendrauf — zusammen unnötig viel Luft zwischen Bild und
   Artikeltext. */
.article-section{padding-top:clamp(2.5rem,4vw,4rem)}
.article-section .article-cta{background:var(--color-surface);border:1px solid var(--color-accent);border-radius:2rem;margin-top:clamp(4rem,7vw,7rem);padding:clamp(2rem,4.5vw,4.5rem)}
.article-section .article-cta .eyebrow{color:var(--color-accent-strong)}
/* justify-content:space-between drückte die beiden Spalten auseinander bis zum Rand des
   Containers — auf schmalen/normalen Screens kaum sichtbar, auf sehr breiten Monitoren aber
   eine riesige, unbeabsichtigte Lücke, weil die Spuren selbst (760px/340px) nicht mitwachsen.
   Eine feste Maximalbreite hält den Abstand überall im vorgesehenen Rahmen. */
/* justify-content:space-between + margin:auto zentrierte die ganze Zeile und schob den Text
   dadurch von der sonst überall gleichen linken Kante weg. start + fester Gap hält Text und
   Sidebar stattdessen an derselben linken Kante wie jede andere Sektion, mit gedeckeltem statt
   auf breiten Screens explodierendem Abstand dazwischen. */
.article-section .article-layout{gap:clamp(3rem,5vw,5rem);grid-template-columns:minmax(0,840px) minmax(250px,320px);justify-content:start}
/* Sidebar bekommt dieselbe Karten-Optik wie das Inhaltsverzeichnis auf den rechtlichen Seiten
   (.legal-toc), statt nur einzelner Trennlinien zwischen den Einträgen. */
.article-sidebar{align-self:start;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-3);position:sticky;top:7rem}
.article-sidebar h2{font-size:clamp(1.45rem,2vw,2rem);font-weight:500;letter-spacing:-.025em;margin-bottom:1.5rem}
.article-sidebar .related-list{gap:0}
.article-sidebar .related-card{background:transparent;border:0;border-radius:0;border-top:1px solid var(--color-border);box-shadow:none;display:grid;gap:.55rem;padding:1.35rem 0;transform:none}
.article-sidebar .related-card:first-child{border-top:0}
.article-sidebar .related-card:hover{border-color:var(--color-accent);box-shadow:none;transform:none}
.article-sidebar .related-card strong{font-size:1.05rem;font-weight:540;letter-spacing:-.01em}
.article-sidebar .related-card span:last-child{display:-webkit-box;font-size:.88rem;line-height:1.5;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.article-sidebar-all{margin-top:1.75rem;text-align:center;width:100%}
@media(max-width:900px){
  .blog-card-large.featured{grid-template-columns:1fr;row-gap:0}
  .article-section .article-layout{grid-template-columns:minmax(0,1fr)}
  .service-seo{grid-template-columns:1fr}
  .service-seo>header{position:static}
  .service-seo>header h2{max-width:320px}
  .article-sidebar{position:static}
}
@media(max-width:700px){
  .blog-section{padding-left:1rem;padding-right:1rem}
  .blog-card-large.featured .blog-card-media{aspect-ratio:4/3;height:auto}
  .article-section .article-cta{border-radius:1.25rem;padding:1.5rem}
  .service-seo{padding-left:1rem;padding-right:1rem}
}
/* Keep room hero labels isolated from similarly named homepage labels */
.room-hero .room-tag{inset:auto;width:max-content;white-space:nowrap}
.room-hero .tag-light{left:6%;top:32%}
.room-hero .tag-mattress{bottom:14%;left:46%}
.room-hero .tag-pillow{left:60%;top:40%}
.room-hero .tag-climate{left:36%;right:auto;top:8%}
.room-hero .tag-material{bottom:30%;right:10%}
@media(max-width:700px){
  .room-hero .tag-light{left:auto;right:7%;top:18%}
  .room-hero .tag-pillow{left:5%;top:38%}
  .room-hero .tag-mattress{bottom:16%;left:35%}
  .room-hero .tag-climate{display:none}
  .room-hero .tag-material{bottom:7%;right:5%}
}
.contact-copy>.text h2{color:var(--color-text);font-size:var(--sk-display-size-sm);font-weight:480;line-height:1.02;max-width:10ch}
/* Die Formularspalte ist schmaler als der Viewport (contact-main teilt sie sich mit der
   Adressspalte) — global.css klappt .field-grid erst bei 820px Fensterbreite auf eine Spalte um,
   das greift hier zu spät. auto-fit reagiert stattdessen auf die tatsächliche Spaltenbreite. */
.contact-form-wrap .field-grid{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
@media(max-width:900px){.contact-main{grid-template-columns:1fr}}
@media(max-width:700px){.contact-main{padding-bottom:4rem;padding-top:3rem}.contact-form-wrap{padding:1.5rem}.contact-copy>.text h2{font-size:clamp(2.2rem,10vw,3rem)}}
.contact-choice header h2{grid-column:1/-1;max-width:20ch}
/* Compact contact hero so the introductory copy reads as one sequence */
.contact-hero{min-height:auto;padding-bottom:clamp(2.5rem,4vw,4rem)}
.contact-hero img{height:clamp(400px,50vh,560px);min-height:0}
@media(max-width:700px){.contact-hero{padding-bottom:2.5rem}.contact-hero img{height:68vw;min-height:300px}.contact-main{padding-top:2.5rem}}
.contact-copy{grid-area:copy}
@media(max-width:900px){.contact-main{grid-template-areas:"form" "copy"}}
/* Serif-Test auf allen Überschriften, nicht nur der Home-Hero-H1. Viele einzelne h1/h2/h3-Regeln
   in dieser Datei setzen font-family:var(--font-sans) explizit mit eigener Klasse davor (z. B.
   ".service-story h2") — eine einzelne, unspezifische h1/h2/h3-Regel würde die alle nicht
   schlagen. !important ist hier bewusst: eine sitebreite Typografie-Entscheidung an einer
   Stelle statt Dutzende Einzelregeln in der ganzen Datei suchen und anpassen zu müssen. */
/* Fließtext lief in ~25 Komponenten mit leicht unterschiedlichen, teils fluiden Größen
   (.95rem–1.35rem via clamp) auseinander — sah beim Durchscrollen uneinheitlich aus. Eine feste
   Größe für alle Lesetext-Absätze (Hero-Intro, Section-Intros, Absätze in Karten/Detailseiten),
   angelehnt an .service-story-head>p, die als gut lesbar empfunden wurde. UI-Mikrotext (Eyebrows,
   Tags, "small"-Feinschrift, badge-artige Labels) bleibt bewusst kleiner — das ist keine
   Lesetext-Ebene, sondern Interface-Beschriftung. */
.about-brands header>p:last-child,
.about-hero p,.contact-hero p,
.about-people p,
.analysis-package-price .price-description,
.analysis-package-price .price-ideal p,
.analysis-reason-copy>p,
.analysis-seo-composition p,
.analysis-seo-grid p,
.analysis-topics-editorial .topic-landscape p,
.coaching-detail>header p,
.contact-copy>.text,
.contact-process header>p:last-child,
.environment-copy p,
.hero .lead,
.legal-hero>p:last-child,
.room-hero-content>p,
.room-visit>div:first-child>p:last-child,
.section-intro,
.seo-columns p,
.service-hero .lead,
.about-hero>div>p:last-child,
.contact-hero>div>p:last-child,
.service-seo-text p,
.topic-carousel-section .topic-landscape p{font-size:1.1rem!important}