#hl-home [hidden]{display:none!important}#hl-home .hl-topic-controls{margin:24px 0;max-width:100%}#hl-home .hl-topic-controls label{display:block;margin-bottom:8px}#hl-home .hl-topic-controls select{min-height:48px;max-width:100%;width:100%;padding:12px;font:inherit;color:var(--hl-plum);background:var(--hl-rose);border:1px solid currentColor;border-radius:12px}#hl-home .hl-topic-controls p{margin-top:12px;overflow-wrap:anywhere}#hl-home .hl-topic-controls select:focus-visible{outline:3px solid currentColor;outline-offset:3px}#hl-home .hl-search-results{list-style:none;padding:0;max-width:760px;overflow-wrap:anywhere}#hl-home .hl-search-results li{padding:24px;margin:24px 0;background:var(--hl-rose);border-radius:23px}#hl-home .hl-search-results h2{font-size:26px}#hl-home .hl-search-results p{margin-top:16px}#hl-home #hl-search-help,#hl-home #hl-search-status{overflow-wrap:anywhere}#hl-home .hl-content{max-width:1160px;margin:auto;padding:32px 5% 60px}#hl-home .hl-content>h1,#hl-home .hl-content>article>h1{margin-top:24px}#hl-home .hl-lead{font-size:17px;max-width:720px;margin:0 0 32px}#hl-home .hl-breadcrumb{font-size:12px;line-height:1.8;overflow-wrap:anywhere}#hl-home .hl-breadcrumb a,#hl-home .hl-prose a,#hl-home .hl-topics-line a,#hl-home .hl-block>p>a,#hl-home .hl-content li a{text-decoration:underline;text-underline-offset:3px}#hl-home .hl-block{margin-top:40px}#hl-home .hl-block h2{margin-bottom:24px}#hl-home .hl-content .hl-articles{margin-top:24px}#hl-home .hl-content .hl-article{padding:24px;background:var(--hl-rose);border-radius:23px}#hl-home .hl-content .hl-article p{font-size:14px}#hl-home .hl-empty{padding:24px;background:#f7ece9;border-radius:23px}#hl-home .hl-prose{max-width:760px;font-size:17px;line-height:1.8;overflow-wrap:anywhere}#hl-home .hl-prose p{font-size:16px;margin:16px 0}#hl-home .hl-prose h2{margin:36px 0 16px}#hl-home .hl-prose h3{font:26px Georgia,serif;margin-top:28px}#hl-home .hl-prose pre{overflow:auto;padding:20px;background:#f3e1e5;border-radius:16px}#hl-home .hl-prose table{display:block;overflow:auto}#hl-home .hl-toc{margin:28px 0;padding:24px;border:1px solid var(--hl-line);border-radius:23px;max-width:760px}#hl-home .hl-toc li{margin:12px 0}#hl-home .hl-alphabet{display:flex;gap:18px;flex-wrap:wrap}#hl-home .hl-alphabet a{padding:12px;background:var(--hl-rose);border-radius:12px}#hl-home .hl-content img{max-width:100%;height:auto;border-radius:23px}#hl-home .hl-search-unavailable{align-self:center;font-size:11px;color:var(--hl-muted)}#hl-home .hl-topics{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}#hl-home .hl-topics h3{overflow-wrap:normal;word-break:normal;hyphens:none}#hl-home .hl-topics>article{min-width:0}#hl-home .hl-nav{align-items:center}#hl-home #hl-mobile .hl-search-unavailable{display:block;padding:14px 0}#hl-home .hl-topics h3 a:hover,#hl-home .hl-article h3 a:hover{text-decoration:underline}#hl-home [id]{scroll-margin-top:20px}@media(max-width:580px){#hl-home .hl-content{padding:26px 6% 40px}#hl-home .hl-header .hl-menu{margin-left:auto}#hl-home .hl-content h1{font-size:38px;overflow-wrap:anywhere}#hl-home .hl-content .hl-article{padding:22px}#hl-home .hl-topics{grid-template-columns:1fr;gap:18px}#hl-home .hl-topics>article{padding:24px}#hl-home .hl-topics h3{overflow-wrap:normal;word-break:normal;hyphens:none;font-size:24px;line-height:1.25}} /* Article-only magazine layout; homepage, navigation and overview cards unchanged. */ #hl-home .hl-content--article{max-width:1240px} #hl-home .hl-content--article>article{max-width:920px;margin:0 auto} #hl-home .hl-content--article .hl-prose{max-width:860px;font-size:18px;line-height:1.75} #hl-home .hl-content--article .hl-prose p{font-size:17px;line-height:1.75;margin:18px 0} #hl-home .hl-content--article .hl-prose h2{font:400 clamp(26px,2.7vw,34px)/1.25 Georgia,serif;margin:44px 0 18px} #hl-home .hl-content--article .hl-prose h3{font:400 clamp(23px,2.2vw,28px)/1.3 Georgia,serif;margin:28px 0 14px} #hl-home .hl-content--article .hl-toc{max-width:860px;padding:0;border-radius:16px;background:#fff8f6} #hl-home .hl-content--article .hl-toc summary{padding:16px 20px;font-size:17px;font-weight:600;cursor:pointer;min-height:48px} #hl-home .hl-content--article .hl-toc nav{padding:0 20px 16px} #hl-home .hl-content--article .hl-toc li{margin:10px 0;line-height:1.5} #hl-home .hl-content--article .hl-toc summary:focus-visible{outline:3px solid #792c50;outline-offset:3px} #hl-home .hl-content--article figure{margin:24px 0;max-width:860px} #hl-home .hl-content--article figure img{display:block;width:100%;height:auto;border-radius:16px} @media(max-width:580px){#hl-home .hl-content--article .hl-prose p{font-size:16px}#hl-home .hl-content--article .hl-prose h2{margin-top:32px}} #hl-home .hl-content--article .hl-article-info{background:#f3e1e5;border-left:3px solid #792c50;padding:16px 22px;margin:28px 0;border-radius:0 16px 16px 0} #hl-home .hl-content--article .hl-article-takeaway{margin:32px 0;padding:20px 0;border-top:1px solid #edcfd5;border-bottom:1px solid #edcfd5} #hl-home .hl-content--article .hl-article-takeaway p{font:400 21px/1.6 Georgia,serif;color:#792c50} #hl-home .hl-content--article .hl-article-steps ol{padding-left:1.6em;margin:24px 0} #hl-home .hl-content--article .hl-article-steps li{padding:12px 12px 12px 8px;margin:12px 0;background:#fff8f6;border-bottom:1px solid #f3e1e5} #hl-home .hl-content--article .hl-article-steps li::marker{font-weight:bold;color:#792c50;font-size:1.2em} #hl-home .hl-content--article .hl-article-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0} #hl-home .hl-content--article .hl-article-type{padding:22px;background:#fff8f6;border:1px solid #edcfd5;border-radius:16px;min-width:0} #hl-home .hl-content--article .hl-article-type h3{margin-top:0} #hl-home .hl-content--article .hl-article-type p:last-child{margin-bottom:0} @media(max-width:650px){#hl-home .hl-content--article .hl-article-types{grid-template-columns:minmax(0,1fr)}#hl-home .hl-content--article .hl-article-info{padding:14px 18px}} /* Reusable Ratgeber frame. All existing article components and other page types remain intact. */ #hl-home .hl-content--guide{max-width:1480px;position:relative;isolation:isolate;background-image:radial-gradient(ellipse at 0 25%,#f3e1e54d,transparent 46%),radial-gradient(ellipse at 100% 65%,#f3e1e533,transparent 45%)} #hl-home .hl-content--guide>article{max-width:none;min-width:0;margin-top:48px} #hl-home .hl-content--guide>article>:is(h1,.hl-meta,.hl-lead,.hl-topics-line){max-width:860px;margin-left:auto;margin-right:auto} #hl-home .hl-guide-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;min-width:0} #hl-home .hl-guide-body{min-width:0;width:100%;max-width:860px;justify-self:center} #hl-home .hl-guide-contents{min-width:0;width:100%;max-width:860px;justify-self:center} #hl-home .hl-guide-toc-desktop{display:none} #hl-home .hl-guide-contents>.hl-toc{margin:12px 0} #hl-home .hl-guide-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;min-width:0;max-width:860px;width:100%;justify-self:center} #hl-home .hl-guide-panel{background:#fff8f6;border:1px solid #f3e1e5;border-radius:16px;padding:18px;min-width:0} #hl-home .hl-guide-panel h2{font:400 21px/1.3 Georgia,serif;color:#792c50;margin:0 0 16px} #hl-home .hl-guide-panel ul{list-style:none;padding:0;margin:0} #hl-home .hl-guide-panel li{margin:10px 0} #hl-home .hl-guide-panel a{font-size:15px;line-height:1.5;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere} #hl-home .hl-guide-coming{font-size:14px;line-height:1.6;color:#683045} #hl-home .hl-guide-panel .hl-articles{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px} #hl-home .hl-guide-panel .hl-article{padding:12px;border-radius:12px} #hl-home .hl-guide-panel .hl-article h3{font-size:18px;line-height:1.4} #hl-home .hl-guide-grid{position:relative;isolation:isolate} #hl-home .hl-guide-grid::before,#hl-home .hl-guide-grid::after{content:"";display:none;position:absolute;top:0;bottom:0;width:48px;pointer-events:none;background-repeat:repeat-y;background-size:48px 5280px;z-index:-1;mask-image:linear-gradient(to bottom,#000 calc(100% - 60px),transparent);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 60px),transparent)} #hl-home .hl-guide-grid::before{left:144px;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA1MjgwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48ZyBpZD0ibW90aWYiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M3ODM5MiIgc3Ryb2tlLXdpZHRoPSIuOCIgb3BhY2l0eT0iLjUiPjxwYXRoIGQ9Ik0tMjAgMjBDNjUgMTMwLTIwIDIyMCAzMiAzNDBTNSA0ODAgNzAgNTcwIi8+PHBhdGggZD0iTS0yNSAzMEM1MCAxMzUtMjQgMjMwIDI0IDM0NVMwIDQ4MCA2MCA1ODAiLz48cGF0aCBkPSJNMjAgMzEwUTM1IDI2MCAyMiAyMTAiLz48L2c+PGcgZmlsbD0iI2Q4YTZhZSIgb3BhY2l0eT0iLjIyIj48cGF0aCBkPSJNMjcgMjYwUTIgMjUwIDUgMjMxUTI2IDIzNiAyNyAyNjBaIi8+PHBhdGggZD0iTTI2IDI0OVEyOSAyMjIgNTEgMjE3UTQ5IDIzOCAyNiAyNDlaIi8+PHBhdGggZD0iTTI0IDIyM1E1IDIwOSAxMyAxOTNRMjkgMjA0IDI0IDIyM1oiLz48cGF0aCBkPSJNMjYgMjg2UTQyIDI2NyA1NyAyNzVRNDYgMjkzIDI2IDI4NloiLz48L2c+PC9nPjwvZGVmcz48dXNlIGhyZWY9IiNtb3RpZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSAwKSBzY2FsZSgwLjc4IDAuNikgcm90YXRlKC0zIDMwIDI4MCkiLz48dXNlIGhyZWY9IiNtb3RpZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAgMTM0MCkgc2NhbGUoMC42OCAwLjU0KSByb3RhdGUoNCAzMCAyODApIi8+PHVzZSBocmVmPSIjbW90aWYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgMjY1MCkgc2NhbGUoMC44NCAwLjY2KSByb3RhdGUoLTIgMzAgMjgwKSIvPjx1c2UgaHJlZj0iI21vdGlmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3IDM5MjApIHNjYWxlKDAuNzMgMC41OCkgcm90YXRlKDMgMzAgMjgwKSIvPjwvc3ZnPg==")} #hl-home .hl-guide-grid::after{right:-54px;transform:scaleX(-1);background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA1MjgwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48ZyBpZD0ibW90aWYiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M3ODM5MiIgc3Ryb2tlLXdpZHRoPSIuOCIgb3BhY2l0eT0iLjUiPjxwYXRoIGQ9Ik0tMjAgMjBDNjUgMTMwLTIwIDIyMCAzMiAzNDBTNSA0ODAgNzAgNTcwIi8+PHBhdGggZD0iTS0yNSAzMEM1MCAxMzUtMjQgMjMwIDI0IDM0NVMwIDQ4MCA2MCA1ODAiLz48cGF0aCBkPSJNMjAgMzEwUTM1IDI2MCAyMiAyMTAiLz48L2c+PGcgZmlsbD0iI2Q4YTZhZSIgb3BhY2l0eT0iLjIyIj48cGF0aCBkPSJNMjcgMjYwUTIgMjUwIDUgMjMxUTI2IDIzNiAyNyAyNjBaIi8+PHBhdGggZD0iTTI2IDI0OVEyOSAyMjIgNTEgMjE3UTQ5IDIzOCAyNiAyNDlaIi8+PHBhdGggZD0iTTI0IDIyM1E1IDIwOSAxMyAxOTNRMjkgMjA0IDI0IDIyM1oiLz48cGF0aCBkPSJNMjYgMjg2UTQyIDI2NyA1NyAyNzVRNDYgMjkzIDI2IDI4NloiLz48L2c+PC9nPjwvZGVmcz48dXNlIGhyZWY9IiNtb3RpZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOCA2NTApIHNjYWxlKDAuNzIgMC41Nikgcm90YXRlKDQgMzAgMjgwKSIvPjx1c2UgaHJlZj0iI21vdGlmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDE5NzApIHNjYWxlKDAuODQgMC42NCkgcm90YXRlKC00IDMwIDI4MCkiLz48dXNlIGhyZWY9IiNtb3RpZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEgMzMwMCkgc2NhbGUoMC42OCAwLjUyKSByb3RhdGUoMiAzMCAyODApIi8+PHVzZSBocmVmPSIjbW90aWYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgNDYxMCkgc2NhbGUoMC44IDAuNjEpIHJvdGF0ZSgtMiAzMCAyODApIi8+PC9zdmc+")} @media(min-width:1280px){#hl-home .hl-guide-grid::before,#hl-home .hl-guide-grid::after{display:block}} @media(min-width:1280px){#hl-home .hl-guide-grid{grid-template-columns:180px minmax(0,1fr) 200px;gap:28px;align-items:start}#hl-home .hl-guide-body{grid-column:2}#hl-home .hl-guide-sidebar{grid-column:3;display:block}#hl-home .hl-guide-panel+.hl-guide-panel{margin-top:20px}#hl-home .hl-guide-contents{grid-column:1;position:sticky;top:24px;transform:translateX(-50px);max-height:calc(100vh - 48px);overflow:auto;align-self:start}#hl-home .hl-guide-contents>.hl-toc{display:none}#hl-home .hl-guide-toc-desktop{display:block}#hl-home .hl-guide-toc-desktop h2{font:400 20px/1.3 Georgia,serif;margin:0 0 14px}#hl-home .hl-guide-toc-desktop ul{padding:0;list-style:none;margin:0}#hl-home .hl-guide-toc-desktop li{margin:0 0 12px}#hl-home .hl-guide-toc-desktop a{font:14px/1.5 Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;display:block}#hl-home .hl-guide-body .hl-prose{width:100%}} @media(min-width:1280px) and (max-height:650px){#hl-home .hl-guide-contents{position:static;max-height:none;overflow:visible}} @media(max-width:580px){#hl-home .hl-guide-sidebar{grid-template-columns:minmax(0,1fr)}#hl-home .hl-guide-grid::before,#hl-home .hl-guide-grid::after{display:none}} /* Shared overview cards also style thematic lexicon lists; guides stay first. */ #hl-home .hl-topic-section--ratgeber .hl-articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px} #hl-home .hl-topic-section--lexikon{margin-top:52px} #hl-home .hl-topic-lexicon{list-style:none;padding:0;margin:24px 0 0;display:grid} #hl-home .hl-topic-lexicon li{min-width:0;margin:0} #hl-home .hl-content--overview .hl-topic-lexicon a{height:100%;box-sizing:border-box;color:inherit;text-decoration:none;overflow-wrap:anywhere} #hl-home .hl-topic-lexicon-arrow{display:none} @media(max-width:650px){#hl-home .hl-topic-section--lexikon{margin-top:36px}} /* WH-002: Cohesive editorial hierarchy for knowledge, topic, guide and magazine indexes. */ #hl-home .hl-content--overview{padding-top:42px;padding-bottom:88px} #hl-home .hl-overview-intro{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(118deg,#f6e8e9 0%,#fff8f6 75%);border:1px solid #edd8df;border-radius:28px;padding:clamp(26px,5vw,54px);margin:24px 0 38px} #hl-home .hl-overview-intro::after{content:"";position:absolute;z-index:-1;width:230px;height:230px;border-radius:50%;right:-90px;top:-105px;background:radial-gradient(circle,#dfb5c5 0%,#f6e8e900 72%);pointer-events:none} #hl-home .hl-overview-intro h1{margin:0 0 14px;font-size:clamp(36px,4.4vw,56px)} #hl-home .hl-overview-intro .hl-lead{margin:0;max-width:640px;line-height:1.75} #hl-home .hl-overview-group{margin-top:36px} #hl-home .hl-overview-heading{margin:0 0 24px} #hl-home .hl-overview-heading h2{margin:6px 0 8px;font-size:clamp(27px,3vw,36px)} #hl-home .hl-overview-heading p{max-width:680px} #hl-home .hl-overview-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hl-plum)} #hl-home .hl-content--overview .hl-articles,#hl-home .hl-topic-lexicon{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:18px} #hl-home .hl-content--overview .hl-article,#hl-home .hl-content--overview .hl-topic-lexicon a{display:flex;flex-direction:column;min-height:196px;background:#fff8f6;border:1px solid #ecd8df;border-radius:19px;padding:24px;transition:border-color .2s,box-shadow .2s,transform .2s} #hl-home .hl-content--overview .hl-article h3,#hl-home .hl-topic-lexicon-title{font:400 clamp(21px,2vw,26px)/1.3 Georgia,serif;margin:12px 0} #hl-home .hl-content--overview .hl-article p,#hl-home .hl-topic-lexicon-description{font-size:14px;line-height:1.65;color:var(--hl-muted)} #hl-home .hl-content--overview .hl-article .hl-read{margin-top:auto;padding-top:20px;color:var(--hl-plum);font-weight:600} #hl-home .hl-content--overview .hl-article:hover,#hl-home .hl-content--overview .hl-topic-lexicon a:hover{border-color:#b77c96;box-shadow:0 10px 24px #792c5014;transform:translateY(-2px)} #hl-home .hl-content--overview .hl-article:focus-within,#hl-home .hl-content--overview .hl-topic-lexicon a:focus-visible{outline:2px solid var(--hl-plum);outline-offset:3px} #hl-home .hl-content--overview .hl-empty{border:1px dashed #d8b5c3;background:#fff8f6;max-width:740px;padding:28px;line-height:1.7} #hl-home .hl-content--overview .hl-block>h2{font-size:clamp(25px,3vw,33px)} #hl-home .hl-overview-lexicon{display:flex;justify-content:space-between;align-items:center;gap:28px;background:#f3e1e5;border-radius:24px;padding:clamp(24px,4vw,38px)} #hl-home .hl-overview-lexicon h2{margin:6px 0 10px;font-size:clamp(24px,3vw,32px)} #hl-home .hl-overview-lexicon p{max-width:580px} #hl-home .hl-overview-lexicon>a{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;min-height:44px;padding:12px 18px;border:1px solid #b8839c;border-radius:24px;font-size:13px;font-weight:600;text-decoration:none} #hl-home .hl-overview-lexicon>a:hover{background:#fff8f6} #hl-home .hl-content--alphabet .hl-alphabet{gap:8px;margin:12px 0 30px} #hl-home .hl-content--alphabet .hl-alphabet a{display:inline-flex;min-width:44px;min-height:44px;justify-content:center;align-items:center;border:1px solid #edd8df;background:#fff8f6} #hl-home .hl-content--alphabet .hl-alphabet a:hover{border-color:#792c50} #hl-home .hl-content--topic .hl-topic-section--ratgeber{margin-top:30px} @media(max-width:700px){#hl-home .hl-overview-lexicon{align-items:stretch;flex-direction:column}#hl-home .hl-overview-lexicon>a{align-self:flex-start}#hl-home .hl-content--overview{padding-top:22px;padding-bottom:55px}#hl-home .hl-overview-intro{margin:16px 0 28px;border-radius:22px}#hl-home .hl-content--overview .hl-article,#hl-home .hl-content--overview .hl-topic-lexicon a{min-height:0}} @media(prefers-reduced-motion:reduce){#hl-home .hl-content--overview .hl-article,#hl-home .hl-content--overview .hl-topic-lexicon a{transition:none}#hl-home .hl-content--overview .hl-article:hover,#hl-home .hl-content--overview .hl-topic-lexicon a:hover{transform:none}} /* WH-010: The entire topic tile is one accessible link. */ #hl-home .hl-topics>.hl-topic-tile{padding:0;overflow:hidden} #hl-home .hl-topic-tile-link{display:block;height:100%;min-height:100%;padding:24px;color:inherit;text-decoration:none;position:relative} #hl-home .hl-topic-tile-link h3{margin-top:0} #hl-home .hl-topic-tile-link p{padding-right:20px} #hl-home .hl-topic-tile-arrow{position:absolute;right:20px;bottom:16px;font-size:20px} #hl-home .hl-topic-tile-link:hover h3{text-decoration:underline;text-underline-offset:4px} #hl-home .hl-topic-tile-link:focus-visible{outline:3px solid #792c50;outline-offset:-5px;border-radius:inherit} @media(max-width:580px){#hl-home .hl-topics>.hl-topic-tile{padding:0}#hl-home .hl-topic-tile-link{padding:24px}} /* WH-008: Keep the footer at the viewport bottom on short pages. */ #hl-home { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } #hl-home > main { flex: 1 0 auto; width: 100%; } #hl-home > footer { flex-shrink: 0; } /* WH-009: Quiet, consistent card interactions without changing the color palette. */ #hl-home .hl-topics > .hl-topic-tile { border: 1px solid #e8d5dc; background: #fff8f6; box-shadow: 0 3px 12px #6d25460b; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; } #hl-home .hl-topics > .hl-topic-tile:nth-child(even) { background: #fcf3f1; } #hl-home .hl-topics > .hl-topic-tile:hover, #hl-home .hl-topics > .hl-topic-tile:focus-within { transform: translateY(-4px); border-color: #c69caf; box-shadow: 0 12px 26px #6d25461c; } #hl-home .hl-topic-tile-arrow { transition: transform .24s ease; } #hl-home .hl-topic-tile-link:hover .hl-topic-tile-arrow, #hl-home .hl-topic-tile-link:focus-visible .hl-topic-tile-arrow { transform: translate(2px, -2px); } #hl-home .wh-topic-card { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; } #hl-home .wh-topic-card:hover, #hl-home .wh-topic-card:focus-within { transform: translateY(-4px); border-color: #c69caf; box-shadow: 0 12px 26px #6d25461c; } @media (prefers-reduced-motion: reduce) { #hl-home .hl-topics > .hl-topic-tile, #hl-home .hl-topic-tile-arrow, #hl-home .wh-topic-card { transition: none; } #hl-home .hl-topics > .hl-topic-tile:hover, #hl-home .hl-topics > .hl-topic-tile:focus-within, #hl-home .wh-topic-card:hover, #hl-home .wh-topic-card:focus-within, #hl-home .hl-topic-tile-link:hover .hl-topic-tile-arrow, #hl-home .hl-topic-tile-link:focus-visible .hl-topic-tile-arrow { transform: none; } } /* WH-009 refinement: compact, centered topic cards without decorative arrows. */ #hl-home .wh-topic-arrow, #hl-home .hl-topic-tile-arrow { display: none; } #hl-home .wh-topic-body { padding: 14px 14px 18px; } #hl-home .wh-topic-body h3 { margin: 7px 0 8px; } #hl-home .wh-topic-body p { margin: 0 auto; max-width: 175px; text-align: center; } #hl-home .hl-topic-tile-link { padding: 20px 22px; } #hl-home .hl-topic-tile-link p { padding-right: 0; } /* Article cards: single full-surface link, compact layout. */ #hl-home .hl-article-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none} #hl-home .hl-article-link:focus-visible{outline:3px solid var(--hl-plum);outline-offset:4px;border-radius:8px} #hl-home .hl-content--overview .hl-article,#hl-home .hl-content--overview .hl-topic-lexicon a{min-height:0} #hl-home .hl-content--overview .hl-article p{margin-bottom:0} #hl-home .hl-articles>.hl-article,#hl-home .hl-content--overview .hl-topic-lexicon a{transition:transform .24s ease,box-shadow .24s ease} #hl-home .hl-articles>.hl-article:hover,#hl-home .hl-content--overview .hl-topic-lexicon a:hover{transform:translateY(-4px);box-shadow:0 12px 26px #6d25461c} @media(prefers-reduced-motion:reduce){#hl-home .hl-articles>.hl-article,#hl-home .hl-content--overview .hl-topic-lexicon a{transition:none}#hl-home .hl-articles>.hl-article:hover,#hl-home .hl-content--overview .hl-topic-lexicon a:hover{transform:none}} #hl-home .hl-topic-tile-arrow { display: none !important; } /* Reuse existing card feedback while pressing on touch devices; no hover emulation. */ @media (hover: none) and (pointer: coarse) { #hl-home .hl-topics > .hl-topic-tile:active, #hl-home .wh-topic-card:active { transform: translateY(-4px); border-color: #c69caf; box-shadow: 0 12px 26px #6d25461c; } #hl-home .hl-articles > .hl-article:active { transform: translateY(-4px); box-shadow: 0 12px 26px #6d25461c; } #hl-home .hl-content--overview .hl-article:active { border-color: #b77c96; } #hl-home .hl-topic-lexicon a:active { border-color: #b77c96; transform: translateY(-4px); box-shadow: 0 12px 26px #6d25461c; } @media (prefers-reduced-motion: reduce) { #hl-home .hl-topics > .hl-topic-tile:active, #hl-home .wh-topic-card:active, #hl-home .hl-articles > .hl-article:active, #hl-home .hl-topic-lexicon a:active { transform: none; } } } /* Feine-Haare article only: compact mobile rhythm; desktop and other pages unchanged. */ @media(max-width:580px){ #hl-home .hl-content--guide:has(#deine-4-tipps-fur-feine-haare)>article{margin-top:24px} #hl-home .hl-content--guide:has(#deine-4-tipps-fur-feine-haare) .hl-prose>h2{margin:26px 0 12px} #hl-home .hl-content--guide:has(#deine-4-tipps-fur-feine-haare) .hl-prose p{margin:12px 0} #hl-home .hl-content--guide:has(#deine-4-tipps-fur-feine-haare) .hl-article-info{margin:18px 0;padding:14px 16px} #hl-home .hl-content--guide:has(#deine-4-tipps-fur-feine-haare) .hl-article-info h2{font-size:22px;line-height:1.25;margin:0 0 10px} #hl-home .hl-content--guide:has(#deine-4-tipps-fur-feine-haare) .hl-article-info ol{font-size:16px;line-height:1.5;margin:8px 0 0;padding-left:22px} #hl-home .hl-content--guide:has(#deine-4-tipps-fur-feine-haare) .hl-article-info li{margin:6px 0} #hl-home .hl-content--guide:has(#deine-4-tipps-fur-feine-haare) .hl-article-steps li{margin:8px 0;padding:8px 10px} #hl-home .hl-content--guide:has(#deine-4-tipps-fur-feine-haare) .hl-article-takeaway{margin:24px 0;padding:16px 0} }