/* Shared guide layout: Pepp's article structure in SleepyPhone's own visual language. */
.guide-main{padding-top:2.25rem;padding-bottom:4rem}
.breadcrumbs{display:flex;gap:.65rem;align-items:baseline;flex-wrap:wrap;font-size:.75rem;color:var(--color-muted);margin-bottom:3rem}
.breadcrumbs a:hover{text-decoration:underline;text-underline-offset:4px}
.breadcrumbs [aria-current]{max-width:48rem}
.guide-index-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:end;margin-bottom:3.5rem}
.guide-index-heading h1{font-size:clamp(2.6rem,4.8vw,4.5rem);line-height:1.05}
.guide-index-heading h1 span{color:var(--color-accent)}
.guide-index-heading p{max-width:32rem;font-size:1.0625rem;line-height:1.85;padding-bottom:.2rem}
.featured-list,.guide-grid{list-style:none;margin:0;padding:0}
.guide-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--color-rule);background:var(--color-white);border-radius:1.4rem;overflow:hidden;transition:box-shadow var(--dur-short),border-color var(--dur-short)}
.guide-card:hover{border-color:var(--color-accent);box-shadow:0 8px 30px var(--color-shadow)}
.guide-card-copy{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.guide-card-copy h3{font-size:1.55rem;line-height:1.18;text-wrap:pretty;margin:.7rem 0 1rem}
.guide-card-copy p{font-size:.875rem;line-height:1.8}
.guide-meta{font-size:.75rem;color:var(--color-muted)}
.guide-read{font-size:.875rem;font-weight:600;margin-top:1.25rem;padding-top:.5rem;display:flex;justify-content:space-between;gap:1rem;color:var(--color-accent)}
.guide-read span{font-size:1.2rem;line-height:1}
.guide-art{position:relative;display:grid;place-items:center;isolation:isolate;overflow:hidden;height:210px;flex:none}
.tone-lavender{background:var(--color-lavender)}
.tone-peach{background:var(--color-peach)}
.tone-yellow{background:var(--color-yellow)}
.art-ring{position:absolute;width:70%;aspect-ratio:1;border:1px solid oklch(100% 0 0 / .6);border-radius:50%;transform:rotate(-20deg) scaleY(.72);z-index:-1}
.guide-art img{width:auto;height:auto;max-height:83%;max-width:70%;object-fit:contain;filter:drop-shadow(0 10px 12px var(--color-shadow))}
.guide-art img[src$="app-icon.webp"]{width:108px;height:108px;border-radius:24px}
.guide-featured{display:grid;grid-template-columns:1fr 1fr;min-height:350px;border:0;background:var(--color-lavender-light)}
.guide-featured .guide-art{height:100%;min-height:350px}
.guide-featured .guide-art img{max-width:78%;max-height:280px}
.guide-featured .guide-card-copy{padding:2.75rem}
.guide-featured h2{font-size:clamp(1.9rem,2.8vw,2.8rem);text-wrap:pretty;margin:.8rem 0 1.2rem}
.guide-featured p{font-size:1rem}
.guide-featured .guide-read{margin-top:auto;padding-top:1.5rem}
.guide-library{margin-top:4rem}
.guide-library-heading,.home-guides-heading{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;margin-bottom:2rem}
.guide-library-heading h2{font-size:2.25rem}
.guide-library-heading>span{color:var(--color-muted);font-size:.875rem;white-space:nowrap}
.guide-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:1.25rem}
.guide-filters{display:flex;gap:.45rem;flex-wrap:wrap}
.guide-filters button{font-size:.8rem;border:1px solid var(--color-rule);padding:.6rem .9rem;border-radius:.6rem;background:transparent;min-height:44px}
.guide-filters button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
.guide-search{display:flex;flex-direction:column;gap:.3rem;font-size:.75rem;min-width:200px}
.guide-search input{font:inherit;font-size:.875rem;width:100%;padding:.7rem .85rem;border:1px solid var(--color-rule);border-radius:.6rem;background:var(--color-white);color:var(--color-ink)}
.guide-results{font-size:.75rem;margin-bottom:1rem;min-height:1.4em}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.guide-card-item{min-width:0}
.guide-empty{padding:3rem 0}
.guide-editorial-note{border-top:1px solid var(--color-rule);padding-top:2rem;margin-top:3rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:.875rem}
.guide-article-heading{text-align:center;max-width:960px;margin-inline:auto}
.guide-article-heading h1{font-size:clamp(2.3rem,4.2vw,4rem);line-height:1.1;text-wrap:balance}
.guide-lead{max-width:760px;margin:1.4rem auto 0;font-size:1.1rem;line-height:1.85}
.guide-byline{display:flex;justify-content:center;gap:.5rem 1.2rem;flex-wrap:wrap;margin:1.6rem 0 2.5rem;font-size:.75rem;color:var(--color-muted)}
.guide-byline a{color:var(--color-ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.article-art{height:260px;border-radius:1.5rem;max-width:700px;margin:0 auto 4rem}
.article-art img{max-height:220px;max-width:65%}
.article-art .art-ring{width:60%}
.guide-layout{display:grid;grid-template-columns:250px minmax(0,740px);gap:4rem;justify-content:center;align-items:start}
.guide-sidebar{position:sticky;top:2rem}
.guide-toc{border-top:2px solid var(--color-ink);padding-top:1rem}
.guide-toc summary{font-family:var(--font-display);font-size:1.2rem;font-weight:700;cursor:pointer}
.guide-toc ol{list-style:none;padding:0;counter-reset:toc;margin:1rem 0}
.guide-toc li{counter-increment:toc;margin:.7rem 0;display:flex;gap:.65rem;font-size:.8rem;line-height:1.6}
.guide-toc li::before{content:counter(toc,decimal-leading-zero);color:var(--color-accent);font-size:.7rem;padding-top:.1rem}
.guide-toc a:hover{text-decoration:underline;text-underline-offset:3px}
.guide-article{min-width:0}
.guide-answer{background:var(--color-lavender-light);border-left:4px solid var(--color-accent);padding:1.6rem 1.8rem;border-radius:0 1rem 1rem 0;margin-bottom:3rem}
.guide-answer h2{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:.8rem}
.guide-answer p{color:var(--color-ink);font-size:1rem;line-height:1.9}
.guide-prose{font-size:1rem;line-height:1.95;color:var(--color-ink)}
.guide-prose section{margin:0 0 2.75rem}
.guide-prose h2,.guide-faq>h2{font-size:clamp(1.75rem,2.6vw,2.25rem);line-height:1.2;text-wrap:pretty;margin-bottom:1.2rem}
.guide-prose h3{font-size:1.35rem;margin:1.6rem 0 .7rem}
.guide-prose p{color:var(--color-ink);margin-bottom:1.2rem}
.guide-prose ul,.guide-prose ol{padding-left:1.4rem;margin:1rem 0 1.5rem}
.guide-prose li{padding-left:.3rem;margin:.5rem 0}
.guide-prose li::marker{color:var(--color-accent);font-weight:600}
.guide-prose a,.guide-sources a,.guide-author a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.guide-prose a:hover,.guide-sources a:hover{text-decoration-thickness:2px}
.guide-table{max-width:100%;overflow-x:auto;border:1px solid var(--color-rule);border-radius:.8rem;margin:1.5rem 0;-webkit-overflow-scrolling:touch}
.guide-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:.875rem;line-height:1.65;text-align:left;background:var(--color-white)}
.guide-table th{font-weight:600;background:var(--color-lavender-light)}
.guide-table td,.guide-table th{padding:1rem;vertical-align:top;border-bottom:1px solid var(--color-rule)}
.guide-table tr:last-child td{border-bottom:0}
.guide-table caption{text-align:left;padding:1rem;font-weight:600;color:var(--color-muted)}
.guide-cta{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:2.8rem;background:var(--color-brand-dark);border-radius:1.4rem;color:var(--color-paper);margin-top:3.5rem}
.guide-cta>img{flex:none;border-radius:1rem;align-self:flex-start}
.guide-cta h2{font-size:2.25rem;text-wrap:pretty;margin-bottom:.7rem}
.guide-cta p{color:var(--color-paper);max-width:42rem;margin-bottom:1.2rem;font-size:.95rem;line-height:1.8}
.guide-cta-compact{margin:2.5rem 0 3rem;padding:2rem;background:var(--color-lavender);color:var(--color-ink)}
.guide-cta-compact h2{font-size:1.8rem}
.guide-cta-compact p{color:var(--color-ink);font-size:.9rem}
.guide-faq{margin:3rem 0}
.guide-faq .faq-list summary{font-size:1rem;line-height:1.6}
.guide-faq .faq-list p{line-height:1.9}
.guide-author{display:flex;align-items:flex-start;gap:1.2rem;background:var(--color-paper-2);padding:1.5rem;border-radius:1rem;margin:3rem 0}
.guide-author>img{border-radius:.8rem;flex:none}
.guide-author h2{font-size:1.35rem;margin-bottom:.6rem}
.guide-author p{font-size:.85rem;line-height:1.8;margin-bottom:.65rem}
.guide-author a{font-size:.8rem}
.guide-sources{border-top:1px solid var(--color-rule);padding-top:2rem;font-size:.8rem;line-height:1.8}
.guide-sources h2{font-size:1.5rem;margin-bottom:.8rem;text-wrap:pretty}
.guide-sources ol{padding-left:1.2rem;margin:1.4rem 0}
.guide-sources li{padding-left:.4rem;margin-bottom:1rem}
.guide-sources li p{margin-top:.25rem}
.guide-correction{display:inline-block;margin-top:1.2rem}
.guide-related{margin-top:5rem;border-top:1px solid var(--color-rule);padding-top:3rem}
.guide-related>h2{font-size:2.4rem;margin-bottom:2rem}
.editorial-prose{max-width:740px;margin:3rem auto 0}
.editorial-prose>h2{margin-top:2.5rem}
.home-guides{padding-bottom:5rem}
.home-guides-heading{margin-bottom:2.5rem;align-items:end}
@media(min-width:64rem){.guide-main .desktop-nav a[href$="ratgeber/index.html"]{color:var(--color-accent)}}
@media(max-width:70rem){.guide-layout{grid-template-columns:215px minmax(0,1fr);gap:2.5rem}.guide-filters{gap:.35rem}.guide-filters button{padding-inline:.7rem}}
@media(max-width:63.99rem){.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-index-heading{gap:2rem}.guide-featured .guide-card-copy{padding:2rem}.guide-layout{grid-template-columns:minmax(0,1fr);max-width:760px;margin:auto;gap:2rem}.guide-sidebar{position:static}.guide-toc{border:1px solid var(--color-rule);border-radius:1rem;padding:1rem 1.5rem}.guide-toc ol{columns:2;column-gap:2rem}.guide-toc li{break-inside:avoid}.guide-editorial-note{align-items:flex-start;flex-direction:column}.guide-related .guide-grid li:last-child,.home-guides .guide-grid li:last-child{grid-column:1/-1}.guide-related .guide-grid li:last-child .guide-card,.home-guides .guide-grid li:last-child .guide-card{display:grid;grid-template-columns:1fr 1fr}.guide-related .guide-grid li:last-child .guide-art,.home-guides .guide-grid li:last-child .guide-art{height:100%;min-height:240px}.guide-search{flex:1}.article-art{margin-bottom:2.5rem}}
@media(max-width:43.99rem){.guide-main{padding-top:1.25rem}.breadcrumbs{font-size:.65rem;gap:.4rem;margin-bottom:2rem}.breadcrumbs [aria-current]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.guide-index-heading{display:block;margin-bottom:2rem}.guide-index-heading p{margin-top:1.2rem;font-size:.95rem}.guide-featured{display:flex}.guide-featured .guide-art{min-height:0;height:240px}.guide-featured .guide-art img{max-height:185px}.guide-featured .guide-card-copy{padding:1.5rem}.guide-featured h2{font-size:1.9rem}.guide-featured p{font-size:.9rem}.guide-grid{grid-template-columns:minmax(0,1fr);gap:1.4rem}.guide-card-copy h3{font-size:1.6rem}.guide-card-copy{padding:1.4rem}.guide-library{margin-top:3rem}.guide-library-heading{align-items:baseline}.guide-library-heading h2{font-size:1.8rem}.guide-library-heading>span{font-size:.7rem}.guide-search{width:100%}.guide-tools{gap:1rem}.guide-filters button{font-size:.75rem;padding:.55rem .75rem}.guide-lead{font-size:1rem;line-height:1.8}.guide-byline{font-size:.7rem;gap:.5rem 1rem;margin:1.3rem 0 1.8rem}.article-art{height:200px;border-radius:1rem}.article-art img{max-height:170px}.guide-toc ol{columns:1}.guide-toc{padding:1rem 1.25rem}.guide-answer{padding:1.2rem 1.25rem;margin-bottom:2rem}.guide-answer p{font-size:.95rem}.guide-prose{font-size:.95rem;line-height:1.9}.guide-prose section{margin-bottom:2.2rem}.guide-prose h2{font-size:1.8rem}.guide-cta{padding:1.5rem;align-items:flex-start;gap:1rem;flex-direction:column}.guide-cta h2{font-size:1.9rem}.guide-cta>img{width:48px;height:48px}.guide-cta .store-badges{gap:.6rem}.guide-cta .store-badge{width:130px!important;height:44px!important}.guide-cta .store-badge--apple img{height:44px}.guide-cta .store-badge--google img{width:148px;height:auto;max-width:none}.guide-author{padding:1.2rem;gap:.8rem}.guide-author>img{width:40px;height:40px}.guide-author h2{font-size:1.25rem}.guide-related{margin-top:3rem}.guide-related>h2{font-size:2rem}.guide-related .guide-grid li:last-child .guide-card,.home-guides .guide-grid li:last-child .guide-card{display:flex}.guide-related .guide-grid li:last-child .guide-art,.home-guides .guide-grid li:last-child .guide-art{height:210px;min-height:0}.home-guides-heading{align-items:start;flex-direction:column}.home-guides-heading h2{font-size:2.4rem}.footer-bottom nav{flex-wrap:wrap}}
@media print{.site-header,.site-footer,.guide-sidebar,.guide-cta,.guide-related,.guide-art,.guide-tools,.skip-link{display:none!important}.container{width:100%}.guide-layout{display:block}.guide-article-heading{text-align:left}.guide-prose,.guide-answer p{font-size:11pt;line-height:1.5}.guide-table{overflow:visible}.guide-table table{min-width:0}.guide-faq details::details-content{content-visibility:visible}.guide-sources a{overflow-wrap:anywhere}body{background:white;color:black}}

.table-hint{display:none}
@media(min-width:64rem){.guide-sidebar{max-height:calc(100dvh - 4rem);overflow-y:auto}}
@media(max-width:43.99rem){.guide-prose .table-hint{display:block;font-size:.75rem;color:var(--color-muted);margin-bottom:-.8rem}}

.guide-cta:not(.guide-cta-compact) :focus-visible{outline-color:var(--color-paper)}
