@font-face{font-family:Literata;src:url('/assets/fonts/Literata-Roman.ttf');font-weight:200 900;font-display:swap}
@font-face{font-family:Literata;src:url('/assets/fonts/Literata-Italic.ttf');font-weight:200 900;font-style:italic;font-display:swap}
@media screen{
:root{--serif:Literata,Georgia,serif!important;--sans:'Source Sans 3',system-ui,sans-serif!important;--ink:#292f35!important;--text:#292f35!important;--muted:#596573!important;--paper:#fafaf7!important;--white:#ffffff!important;--line:#dde0e3!important;--page-wash-start:#fafaf7!important;--page-wash-end:#fafaf7!important;--editorial-section-gap:24px!important}
:root[data-theme=dark]{--ink:#dadde2!important;--text:#dadde2!important;--muted:#a4adb8!important;--paper:#0e1319!important;--white:#151b23!important;--line:#2e343c!important;--page-wash-start:#0e1319!important;--page-wash-end:#0e1319!important}
html body{font-family:var(--sans)!important;font-size:15px!important;line-height:1.55!important;background:var(--paper)!important;color:var(--text)!important}
html body .page-wash{background:var(--paper)!important}
html body :is(h1,h2){font-family:var(--serif)!important;font-weight:450!important;letter-spacing:-.02em!important}
html body .header{position:relative!important;top:auto!important;background:var(--white)!important;color:var(--ink)!important;border-bottom:1px solid var(--line)!important;min-height:56px!important;padding-block:6px!important;box-shadow:none!important}
html body .header :is(a,button,summary){color:var(--ink)!important}
html body .header .brand{font-family:var(--serif)!important;font-size:24px!important;font-weight:480!important;gap:7px!important}
html body .header .brand svg{width:34px!important;height:29px!important}
html body .header .nav a{font-size:14px!important}
html body .header .nav-more225-panel{background:var(--white)!important;border:1px solid var(--line)!important;border-radius:5px!important;box-shadow:0 8px 18px #0000000d!important}
html body #main{max-width:1200px!important;margin-inline:auto!important}
html body #main[data-design-integration] .portrait-heading{display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:4px 16px!important;margin:0 0 10px!important;padding:0!important}
html body #main[data-design-integration] .portrait-heading .eyebrow{flex-basis:100%!important;font:400 13px/1.4 var(--sans)!important;margin:0!important}
html body #main[data-design-integration] .portrait-heading h1{font:450 clamp(27px,3vw,34px)/1.2 var(--serif)!important;margin:0!important;letter-spacing:-.02em!important}
html body #main[data-design-integration] .portrait-heading .latin{font:400 14px/1.5 var(--sans)!important;margin:0!important;color:var(--muted)!important}
html body #main[data-design-integration] .integrated-intro{padding:10px 0 12px!important;border-bottom:1px solid var(--line)!important;margin-bottom:16px!important}
html body #main[data-design-integration] .portrait-lead{font:400 15px/1.55 var(--sans)!important;max-width:85ch!important;margin:0 0 8px!important}
html body #main[data-design-integration] .fieldguide-status-card{border:0!important;border-radius:0!important;background:none!important;padding:0!important;margin:0!important;font-size:14px!important;box-shadow:none!important}
html body #main[data-design-integration] .integrated-overview{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)!important;gap:24px!important;align-items:start!important}
html body #main[data-design-integration] .integrated-overview>:is(figure,div){min-width:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
html body #main[data-design-integration] .gallery-stage{width:100%!important;aspect-ratio:1.6!important;height:auto!important;min-height:0!important;max-height:360px!important;border-radius:4px!important;padding:0!important;overflow:hidden!important}
html body #main[data-design-integration] .gallery-stage :is(picture,img){display:block!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important}
html body #main[data-design-integration] .gallery-thumbs{display:flex!important;gap:6px!important;margin:6px 0!important;overflow:auto!important}
html body #main[data-design-integration] .gallery-thumbs button{flex:0 0 52px!important;width:52px!important;min-height:44px!important;padding:3px!important;border-radius:3px!important}
html body #main[data-design-integration] .gallery-thumbs img{width:44px!important;height:34px!important;object-fit:cover!important}
html body #main[data-design-integration] .gallery-thumbs span{display:none!important}
html body #main[data-design-integration] figcaption{padding:0!important;font-size:13px!important}
html body #main[data-design-integration] :is(.credit,.photo-caption,.photo-limit,.gallery-toolbar){font-size:13px!important;line-height:1.45!important;margin-block:4px!important}
html body #main[data-design-integration] .feature-row{display:block!important;border:0!important;padding:0!important;margin:0 0 12px!important;font-size:15px!important;line-height:1.55!important}
html body #main[data-design-integration] .feature-row :is(dt,dd){display:inline!important;margin:0!important;padding:0!important}
html body #main[data-design-integration] .feature-row dt{font-size:15px!important;font-weight:600!important;margin-right:6px!important}
html body #main[data-design-integration] :is(.fieldguide-features,.section-block){margin-top:24px!important;padding-top:16px!important;border-top:1px solid var(--line)!important}
html body #main[data-design-integration] .integrated-overview .fieldguide-features{margin:0!important;padding:0!important;border:0!important}
html body #main[data-design-integration] :is(.section-heading,.fieldguide-section-heading) h2{font:450 23px/1.25 var(--serif)!important;margin:0 0 12px!important}
html body #main[data-design-integration] .fieldguide-features h2{font:600 17px/1.4 var(--sans)!important}
html body #main[data-design-integration] .fieldguide-navigation{position:sticky!important;top:0!important;z-index:20!important;background:var(--paper)!important;margin:0!important;border-block:1px solid var(--line)!important;border-inline:0!important;border-radius:0!important;padding:4px 0!important}
html body #main[data-design-integration] .fieldguide-navlinks{gap:4px 20px!important}
html body #main[data-design-integration] .fieldguide-navlinks a{font:400 14px/1.5 var(--sans)!important;padding:6px 0!important}
html body #main[data-design-integration] .integrated-residual{display:block!important;margin:8px 0!important;padding:0!important}
html body #main[data-design-integration] .integrated-residual .detail-title{display:block!important}
html body #main[data-design-integration] .portrait-body{margin-top:8px!important;padding-top:4px!important;border-top:1px solid var(--line)!important}
html body #main[data-design-integration] .actions{margin:0!important;gap:12px!important}
html body #main[data-design-integration] .actions .button{background:transparent!important;border-color:transparent!important;box-shadow:none!important;font-size:13px!important;min-height:40px!important;padding:4px 8px!important}
html body #main[data-design-integration] section{scroll-margin-top:64px!important}
@media(min-width:701px){html body #main[data-design-integration] .fieldguide-navigation>summary{display:none!important}html body #main[data-design-integration] .fieldguide-navigation .fieldguide-navlinks{display:flex!important}html body #main[data-design-integration] #quellen .sources{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px 24px!important}}
@media(max-width:700px){html body #main{padding-inline:16px!important}html body #main[data-design-integration] .integrated-overview{display:block!important}html body #main[data-design-integration] .integrated-overview .fieldguide-features{margin-top:20px!important}html body #main[data-design-integration] .gallery-stage{aspect-ratio:1.5!important}html body .header .brand{font-size:23px!important}}
}
@media screen{
html body .header .brand .brand-name{font:480 24px/1.15 Literata,Georgia,serif!important;letter-spacing:-.025em!important;transform:none!important}
html body #main[data-design-integration] .feature-row :is(dd,.feature-description){font:400 15px/1.55 var(--sans)!important;display:inline!important;margin:0!important}
html body #main[data-design-integration] .fieldguide-features .eyebrow{display:none!important}
html body #main[data-design-integration] .fieldguide-section-heading{padding:0!important;margin:0 0 12px!important;border:0!important}
html body #main[data-design-integration] .fieldguide-navigation{box-shadow:none!important;min-height:40px!important}
html body #main[data-design-integration] .fieldguide-navigation nav{margin:0!important;padding:0!important;background:transparent!important;border:0!important}
html body #main[data-design-integration] .integrated-intro{padding-top:12px!important}
html body #main[data-design-integration] .fieldguide-status-card details{font-size:13px!important;padding:0!important;margin:0!important}
html body #main[data-design-integration] .fieldguide-status-card summary{min-height:30px!important;padding-block:4px!important}
html body #main[data-design-integration] .gallery-stage img{object-fit:cover!important}
}
/* Integration refinement: explicit type roles and compact reading rhythm. */
@font-face{font-family:'Mykolog Sans';src:url('/assets/fonts/SourceSans3VF-Upright.ttf.woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Mykolog Sans';src:url('/assets/fonts/SourceSans3VF-Italic.ttf.woff2');font-weight:200 900;font-style:italic;font-display:swap}
@media screen{
:root{--sans:'Mykolog Sans',system-ui,sans-serif!important}
html body .header .brand .brand-name{color:var(--ink)!important}
html body #main[data-design-integration]{padding-top:14px!important}
html body #main[data-design-integration] .breadcrumb{margin:0 0 12px!important;font:400 13px/1.4 var(--sans)!important}
html body #main[data-design-integration] .portrait-heading .eyebrow{font-size:13px!important}
html body #main[data-design-integration] .fieldguide-navigation{min-height:40px!important;margin-bottom:0!important;border-left:0!important;border-right:0!important;outline:0!important}
html body #main[data-design-integration] .fieldguide-navigation .fieldguide-navlinks{min-height:32px!important;padding:0!important;gap:0 20px!important}
html body #main[data-design-integration] .fieldguide-navigation a{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;min-height:32px!important}
html body #main[data-design-integration] .fieldguide-navigation a:hover{color:var(--ink)!important;text-decoration:underline!important;text-underline-offset:6px}
html body #main[data-design-integration] .integrated-intro{margin-top:0!important;padding-top:10px!important;padding-bottom:12px!important}
html body #main[data-design-integration] .integrated-intro .edibility-panel{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:4px 16px!important;padding:0!important;margin:0!important;background:none!important}
html body #main[data-design-integration] .edibility-badge{font:400 13px/1.5 var(--sans)!important;gap:8px!important}
html body #main[data-design-integration] .edibility-label{font-size:14px!important;font-weight:600!important}
html body #main[data-design-integration] .status-evidence[open]{flex-basis:100%}
html body #main[data-design-integration] .fieldguide-status-card :is(.edibility-warning,.warning){flex-basis:100%;font-size:14px!important}
html body #main[data-design-integration] .gallery-stage{height:250px!important;aspect-ratio:auto!important;max-height:none!important}
html body #main[data-design-integration] .gallery-toolbar{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;padding:0!important;min-height:32px!important;margin:0!important}
html body #main[data-design-integration] .gallery-selection{font:400 13px/1.4 var(--sans)!important;min-width:0!important}
html body #main[data-design-integration] .gallery-enlarge{flex:none!important;font:400 13px/1.4 var(--sans)!important;min-height:32px!important;padding:0!important;background:none!important;border:0!important;text-decoration:none!important}
html body #main[data-design-integration] .photo-metas{margin:0!important;padding:0!important}
html body #main[data-design-integration] .photo-meta{padding:0!important;border:0!important;background:none!important}
html body #main[data-design-integration] .integrated-photo-details{margin:0!important;padding:0!important;border:0!important;background:none!important}
html body #main[data-design-integration] .integrated-photo-details>summary{font:400 13px/1.4 var(--sans)!important;min-height:32px!important;padding-block:6px!important;color:var(--muted)!important}
html body #main[data-design-integration] :is(.section-block,.detail-sections) :is(p,li,dd){font-size:15px!important;line-height:1.55!important}
html body #main[data-design-integration] .section-block>h2{font:450 23px/1.25 var(--serif)!important;margin:0 0 12px!important}
html body #main[data-design-integration] .section-block>.eyebrow{display:none!important}
html body #main[data-design-integration] .comparison-note{padding:14px 0!important;background:none!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important}
html body #main[data-design-integration] .comparison-heading h3{font:600 16px/1.4 var(--sans)!important;margin:0!important}
html body #main[data-design-integration] .comparison-heading .latin{font:italic 13px/1.4 var(--sans)!important;margin:2px 0!important}
html body #main[data-design-integration] :is(.comparison-notes,.insight-grid){gap:12px 24px!important}
@media(min-width:701px){html body #main[data-design-integration] .comparison-note{display:grid!important;grid-template-columns:230px minmax(0,1fr)!important;gap:8px 24px!important}html body #main[data-design-integration] .comparison-heading{grid-row:span 3!important}html body #main[data-design-integration] .comparison-portrait-image{flex:0 0 64px!important;width:64px!important}html body #main[data-design-integration] .comparison-portrait-image img{width:64px!important;height:54px!important;object-fit:cover!important}}
@media(max-width:700px){html body #main[data-design-integration] .portrait-heading{gap:4px 10px!important}html body #main[data-design-integration] .portrait-heading h1{font-size:27px!important}html body #main[data-design-integration] .fieldguide-navigation{margin-inline:0!important;width:100%!important}html body #main[data-design-integration] .fieldguide-navigation>summary{min-height:44px!important;padding:8px 0!important;font:600 14px/1.4 var(--sans)!important}html body #main[data-design-integration] .gallery-stage{height:auto!important;aspect-ratio:3/2!important}html body #main[data-design-integration] .section-block{margin-top:20px!important;padding-top:16px!important}}
}
@media screen{
html body #main#main[data-design-integration] .detail{display:block!important;gap:0!important}
html body #main#main[data-design-integration] .gallery-thumbs>button{min-width:52px!important;max-width:52px!important;width:52px!important;flex:0 0 52px!important;height:44px!important;min-height:44px!important;box-shadow:none!important}
html body #main#main[data-design-integration] .gallery-thumbs img{width:44px!important;height:34px!important;min-height:0!important;aspect-ratio:auto!important;object-fit:cover!important}
html body #main#main[data-design-integration] .gallery-thumbs span{display:none!important}
html body #main#main[data-design-integration] .fieldguide-navigation{border:0!important;border-block:1px solid var(--line)!important}
html body #main#main[data-design-integration] .fieldguide-navigation .fieldguide-navlinks{border:0!important;box-shadow:none!important}
html body #main#main[data-design-integration] .section-block :is(.context-panel,.insight){padding:12px!important;background:transparent!important;box-shadow:none!important;border-color:var(--line)!important}
}
@media screen{
html body #main#main[data-design-integration] .portrait-reading-bar{position:sticky!important;top:0!important;z-index:20!important;display:flex!important;align-items:center!important;gap:8px!important;width:100%!important;margin:0!important;padding:0!important;min-height:40px!important;background:var(--paper)!important;border:0!important;box-shadow:none!important}
html body #main#main[data-design-integration] .portrait-reading-bar .fieldguide-navigation{position:static!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;max-width:100%!important;margin:0!important;padding:0!important;transform:none!important}
html body #main#main[data-design-integration] .portrait-reading-bar summary{padding:8px 0!important;min-height:44px!important}
html body #main#main[data-design-integration] .portrait-back-top{background:none!important;border:0!important;box-shadow:none!important;width:36px!important;height:36px!important;min-height:36px!important;padding:8px!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .portrait-heading{margin-bottom:10px!important}
}
/* Reference sections share a single reading scale and aligned row structure. */
@media screen{
html body #main#main[data-design-integration] :is(#aehnliche,#namen,#quellen){padding:16px 0 0!important;margin:24px 0 0!important;background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important}
html body #main#main[data-design-integration] :is(#aehnliche,#namen,#quellen) :is(h3,p,li,summary,button){font-family:var(--sans)!important}
html body #main#main[data-design-integration] :is(#aehnliche,#namen,#quellen) :is(p,li){font-size:15px!important;line-height:1.5!important}
html body #main#main[data-design-integration] :is(#aehnliche,#namen,#quellen) p{margin:0 0 8px!important}
html body #main#main[data-design-integration] :is(#aehnliche,#namen,#quellen) summary{font-size:13px!important;line-height:1.4!important;min-height:32px!important;padding-block:7px!important;color:var(--muted)!important}
html body #main#main[data-design-integration] :is(#aehnliche,#namen,#quellen) details{background:transparent!important;box-shadow:none!important;border-radius:0!important}
html body #main#main[data-design-integration] .unified-comparisons{display:block!important}
html body #main#main[data-design-integration] #aehnliche .comparison-note{display:grid!important;grid-template-columns:minmax(200px, .8fr) minmax(0,1.8fr)!important;gap:4px 24px!important;margin:0!important;padding:14px 0!important;border:0!important;border-bottom:1px solid var(--line)!important}
html body #main#main[data-design-integration] .comparison-heading{display:flex!important;align-items:flex-start!important;gap:12px!important;grid-column:1!important;grid-row:1/3!important;margin:0!important;padding:0!important}
html body #main#main[data-design-integration] .comparison-heading>div{min-width:0!important}
html body #main#main[data-design-integration] .comparison-heading h3{font:600 16px/1.35 var(--sans)!important}
html body #main#main[data-design-integration] .comparison-heading .latin{font:italic 13px/1.4 var(--sans)!important;margin:3px 0!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .comparison-portrait-image{flex:0 0 64px!important;width:64px!important}
html body #main#main[data-design-integration] .comparison-portrait-image img{width:64px!important;height:54px!important;object-fit:cover!important;border-radius:3px!important}
html body #main#main[data-design-integration] .comparison-status{font:400 13px/1.4 var(--sans)!important;margin:0!important;display:inline-flex!important;align-items:center!important;gap:4px!important}
html body #main#main[data-design-integration] .comparison-description{grid-column:2!important;margin:0!important;padding:0!important;min-width:0!important}
html body #main#main[data-design-integration] .comparison-actions{grid-column:2!important;display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:0 20px!important;margin:0!important;padding:0!important;border:0!important}
html body #main#main[data-design-integration] .comparison-action{font:400 13px/1.4 var(--sans)!important;min-height:32px!important;display:inline-flex!important;align-items:center!important;padding:0!important;border:0!important;background:none!important}
html body #main#main[data-design-integration] .comparison-evidence[open]{flex-basis:100%!important}
html body #main#main[data-design-integration] #namen .section-heading{display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:4px 16px!important;margin:0 0 8px!important}
html body #main#main[data-design-integration] #namen .section-heading h2{margin:0!important}
html body #main#main[data-design-integration] #namen .section-meta{font:400 13px/1.4 var(--sans)!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .names-context{display:flex!important;flex-wrap:wrap!important;gap:0 16px!important;margin:0 0 8px!important;padding:0!important}
html body #main#main[data-design-integration] .names-context p{font:400 13px/1.4 var(--sans)!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .names-columns{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:0 28px!important;align-items:start!important}
html body #main#main[data-design-integration] .names-column{display:contents!important}
html body #main#main[data-design-integration] .names-entry{margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid var(--line)!important;min-width:0!important}
html body #main#main[data-design-integration] .names-trigger{display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;align-items:baseline!important;gap:12px!important;padding:10px 0!important;min-height:44px!important;font:400 15px/1.5 var(--sans)!important}
html body #main#main[data-design-integration] .names-language{font:600 13px/1.5 var(--sans)!important;color:var(--muted)!important;display:flex!important;align-items:center!important;gap:6px!important}
html body #main#main[data-design-integration] :is(.names-text,.names-values,.names-name,.names-original){font:400 15px/1.5 var(--sans)!important;min-width:0!important;overflow-wrap:anywhere!important}
html body #main#main[data-design-integration] .names-proof{margin:0!important;padding:0 0 10px 124px!important}
html body #main#main[data-design-integration] .names-proof :is(p,button){font:400 13px/1.45 var(--sans)!important;overflow-wrap:anywhere!important}
html body #main#main[data-design-integration] .names-copy{padding:6px 0!important;background:none!important;border:0!important;min-height:32px!important}
html body #main#main[data-design-integration] #quellen>.sources-review-note{font:400 14px/1.5 var(--sans)!important;max-width:85ch!important;margin-bottom:12px!important;padding:0!important;background:none!important;border:0!important}
html body #main#main[data-design-integration] #quellen>details{padding:0!important;margin:0 0 4px!important;border:0!important}
html body #main#main[data-design-integration] #quellen .source-list{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:0 28px!important;padding:0!important;margin:12px 0!important;list-style:none!important;counter-reset:source-row}
html body #main#main[data-design-integration] #quellen .source-work{min-width:0!important;margin:0!important;padding:10px 0!important;border:0!important;border-top:1px solid var(--line)!important;background:none!important}
html body #main#main[data-design-integration] #quellen .source-title{font:600 15px/1.45 var(--sans)!important;overflow-wrap:anywhere!important}
html body #main#main[data-design-integration] #quellen .reference-meta{margin:0!important;padding:0!important;border:0!important}
html body #main#main[data-design-integration] #quellen .reference-meta p{font:400 13px/1.5 var(--sans)!important;margin-bottom:6px!important}
html body #main#main[data-design-integration] #quellen .sources-scope{font:400 13px/1.4 var(--sans)!important}
@media(max-width:700px){
html body #main#main[data-design-integration] #aehnliche .comparison-note{display:block!important;padding:12px 0!important}
html body #main#main[data-design-integration] .comparison-heading{margin-bottom:8px!important}
html body #main#main[data-design-integration] :is(.names-columns,#quellen .source-list){grid-template-columns:minmax(0,1fr)!important}
html body #main#main[data-design-integration] .names-trigger{grid-template-columns:100px minmax(0,1fr)!important;gap:10px!important}
html body #main#main[data-design-integration] .names-proof{padding-left:0!important}
html body #main#main[data-design-integration] :is(#aehnliche,#namen,#quellen){margin-top:20px!important}
}
@media(max-width:350px){html body #main#main[data-design-integration] .names-trigger{grid-template-columns:90px minmax(0,1fr)!important;gap:8px!important}}
}
@media screen{
html body #main#main[data-design-integration] .comparison-note{align-items:start!important;grid-template-rows:auto auto!important}
html body #main#main[data-design-integration] .comparison-description{align-self:start!important;padding-top:0!important}
html body #main#main[data-design-integration] .comparison-description>p:first-child{margin-top:0!important}
html body #main#main[data-design-integration] .comparison-status{padding:0!important;margin-top:2px!important}
html body #main#main[data-design-integration] .names-value{padding-left:0!important}
html body #main#main[data-design-integration] .names-value::before{display:none!important}
html body #main#main[data-design-integration] .names-caveat{margin:3px 0 0!important;font:400 13px/1.4 var(--sans)!important}
html body #main#main[data-design-integration] .names-context{justify-content:flex-start!important}
html body #main#main[data-design-integration] .names-columns{margin-top:0!important}
html body #main#main[data-design-integration] #namen .section-heading{justify-content:flex-start!important}
html body #main#main[data-design-integration] .names-missing{margin-top:12px!important;padding:8px 0!important}
html body #main#main[data-design-integration] .names-endnote{margin-top:8px!important;font:400 13px/1.45 var(--sans)!important}
html body #main#main[data-design-integration] :is(.names-trigger,.reference-meta>summary,.comparison-evidence>summary):hover{background:color-mix(in srgb,var(--ink) 4%,transparent)!important}
}
/* Habitat and deeper reading use the same quiet reference-section rhythm. */
@media screen{
html body #main#main[data-design-integration] :is(#lebensraum,#vertiefung){margin:24px 0 0!important;padding:16px 0 0!important;background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important}
html body #main#main[data-design-integration] :is(#lebensraum,#vertiefung) .eyebrow{display:none!important}
html body #main#main[data-design-integration] :is(#lebensraum,#vertiefung) :is(.section-heading,.fieldguide-section-heading){display:flex!important;align-items:baseline!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:4px 16px!important;margin:0 0 12px!important;padding:0!important}
html body #main#main[data-design-integration] :is(#lebensraum,#vertiefung) h2{font:450 23px/1.25 var(--serif)!important;margin:0!important}
html body #main#main[data-design-integration] :is(#lebensraum,#vertiefung) .section-meta{font:400 13px/1.4 var(--sans)!important;color:var(--muted)!important}
html body #main#main[data-design-integration] :is(#lebensraum,#vertiefung) h3{font:600 16px/1.4 var(--sans)!important;letter-spacing:0!important;margin:0 0 6px!important}
html body #main#main[data-design-integration] :is(#lebensraum,#vertiefung) p{font:400 15px/1.55 var(--sans)!important;margin:0 0 8px!important;max-width:78ch!important}
html body #main#main[data-design-integration] .fieldguide-ecology-content{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px 28px!important;align-items:start!important}
html body #main#main[data-design-integration] .fieldguide-ecology-content>.feature-row{grid-column:1/-1!important;margin:0!important;padding:0!important}
html body #main#main[data-design-integration] #lebensraum .ecology-summary{display:block!important}
html body #main#main[data-design-integration] #lebensraum :is(.tree-associations,.season-band){margin:0!important;padding:10px 0 0!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;min-width:0!important}
html body #main#main[data-design-integration] #lebensraum :is(.tree-panel-heading,.tree-panel-content){margin:0!important;padding:0!important;border:0!important;background:none!important}
html body #main#main[data-design-integration] #lebensraum :is(.tree-panel-heading h3,.season-title){font-size:14px!important}
html body #main#main[data-design-integration] .tree-chips{display:flex!important;flex-wrap:wrap!important;gap:6px 18px!important;margin:0!important;padding:0!important}
html body #main#main[data-design-integration] .tree-chips li{display:flex!important;align-items:center!important;gap:7px!important;padding:0!important;margin:0!important;border:0!important;background:none!important;font:400 14px/1.4 var(--sans)!important}
html body #main#main[data-design-integration] .tree-chips img{width:34px!important;height:38px!important;object-fit:contain!important}
html body #main#main[data-design-integration] .season-months{margin:8px 0!important;gap:4px!important}
html body #main#main[data-design-integration] #lebensraum .season-summary{font-size:13px!important;line-height:1.45!important;margin-bottom:0!important}
html body #main#main[data-design-integration] #vertiefung .insight-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:start!important;gap:0 28px!important;margin:0!important}
html body #main#main[data-design-integration] #vertiefung .insight{display:block!important;min-width:0!important;margin:0!important;padding:12px 0!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:none!important;box-shadow:none!important}
html body #main#main[data-design-integration] #vertiefung .insight-heading{margin:0!important;padding:0!important;min-height:0!important}
html body #main#main[data-design-integration] #vertiefung .insight-heading h3{display:flex!important;align-items:baseline!important;gap:8px!important}
html body #main#main[data-design-integration] #vertiefung .insight-number{flex:0 0 auto!important;font:400 13px/1.4 var(--sans)!important;color:var(--muted)!important;background:none!important;border:0!important;border-radius:0!important;min-width:0!important;width:auto!important;height:auto!important;padding:0!important}
html body #main#main[data-design-integration] :is(#lebensraum,#vertiefung) details{margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
html body #main#main[data-design-integration] :is(#lebensraum,#vertiefung) summary{font:400 13px/1.4 var(--sans)!important;min-height:32px!important;padding-block:7px!important;color:var(--muted)!important}
html body #main#main[data-design-integration] :is(.insight-evidence-panel,.fieldguide-evidence-body){padding:6px 0 0!important;background:none!important;border:0!important}
html body #main#main[data-design-integration] :is(.insight-evidence-panel,.fieldguide-evidence-body) :is(p,h3){font-size:13px!important;line-height:1.5!important;overflow-wrap:anywhere!important}
html body #main#main[data-design-integration] #lebensraum>.ecology-evidence{margin-top:6px!important}
@media(max-width:700px){
html body #main#main[data-design-integration] :is(#lebensraum,#vertiefung){margin-top:20px!important}
html body #main#main[data-design-integration] :is(.fieldguide-ecology-content,#vertiefung .insight-grid){grid-template-columns:minmax(0,1fr)!important}
html body #main#main[data-design-integration] #vertiefung .insight{padding:12px 0!important}
}
}
@media screen{
html body #main#main[data-design-integration] #lebensraum :is(.tree-associations,.season-band){display:block!important;grid-column:auto!important;grid-row:auto!important}
html body #main#main[data-design-integration] #lebensraum .tree-panel-heading{display:block!important;margin-bottom:6px!important}
html body #main#main[data-design-integration] #lebensraum .season-months{width:100%!important;max-width:420px!important}
html body #main#main[data-design-integration] #vertiefung :is(p,h3){hyphens:manual!important;-webkit-hyphens:manual!important;word-break:normal!important}
}
/* The gallery exposes metadata only for its selected photo. */
@media screen{
html body #main#main[data-design-integration] .photo-meta[aria-hidden="true"],html body #main#main[data-design-integration] .photo-meta[hidden]{display:none!important}
html body #main#main[data-design-integration] .photo-meta:not([aria-hidden="true"]):not([hidden]){display:block!important}
html body #main#main[data-design-integration] .feature-support{display:block!important;margin:12px 0 0!important;padding:6px 0 0!important;border-top:1px solid var(--line)!important}
html body #main#main[data-design-integration] .feature-support>details{display:block!important;width:100%!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
html body #main#main[data-design-integration] .feature-support>details>summary{min-height:36px!important;font:400 13px/1.4 var(--sans)!important;padding-block:8px!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .feature-support summary h3{display:inline!important;font:inherit!important;margin:0!important;color:inherit!important}
html body #main#main[data-design-integration] .feature-support :is(.context-panel,.field-note,.fieldguide-evidence-body){margin:0 0 8px!important;padding:8px 0!important;background:none!important;border:0!important}
html body #main#main[data-design-integration] .fieldguide-meta{margin:0!important;padding:0!important;border:0!important}
html body #main#main[data-design-integration] .integrated-residual{margin:12px 0 0!important;padding:6px 0 0!important;border-top:1px solid var(--line)!important}
html body #main#main[data-design-integration] .utility-actions{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:0 20px!important;margin:0!important;padding:0!important}
html body #main#main[data-design-integration] .utility-actions :is(button,summary,a){font:400 13px/1.4 var(--sans)!important;min-height:36px!important;padding-block:8px!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .utility-actions>.slip-menu{margin:0!important}
}
@media screen{
html body #main#main[data-design-integration] #namen .names-proof{padding:6px 0 10px!important;margin:0!important;border:0!important;background:none!important}
html body #main#main[data-design-integration] .names-actions{display:flex!important;flex-wrap:wrap!important;gap:0 16px!important;margin:0 0 6px!important;padding:0!important}
html body #main#main[data-design-integration] .translation-details{margin-top:6px!important;border-top:1px solid var(--line)!important}
html body #main#main[data-design-integration] .names-meaning-evidence{margin:0!important;padding:4px 0!important;border:0!important}
html body #main#main[data-design-integration] .names-proof p{max-width:72ch!important}
}
@media screen{
html body #main#main[data-design-integration] .breadcrumb{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:4px 8px!important;line-height:1.4!important}
html body #main#main[data-design-integration] .gallery-thumbs{align-items:center!important;gap:6px!important;padding:2px 0!important;overflow:visible!important}
html body #main#main[data-design-integration] .gallery-thumbs>button{display:flex!important;align-items:center!important;justify-content:center!important;height:46px!important;min-height:46px!important;width:56px!important;min-width:56px!important;max-width:56px!important;flex-basis:56px!important;padding:3px!important;border:1px solid transparent!important;border-radius:4px!important;outline:none;box-shadow:none!important;background:none!important}
html body #main#main[data-design-integration] .gallery-thumbs>button[aria-pressed=true]{border-color:var(--ink)!important;background:transparent!important}
html body #main#main[data-design-integration] .gallery-thumbs>button:focus-visible{outline:2px solid var(--ink)!important;outline-offset:2px!important}
html body #main#main[data-design-integration] .gallery-thumbs>button img{display:block!important;width:48px!important;height:38px!important;max-width:none!important;object-fit:cover!important;border-radius:2px!important;margin:0!important}
html body #main#main[data-design-integration] .gallery-selection{font-weight:400!important;color:var(--muted)!important}
}
@media screen{
html body #main#main[data-design-integration] .gallery-thumbs>button img{block-size:38px!important;inline-size:48px!important;max-block-size:38px!important;min-block-size:38px!important}
html body #main#main[data-design-integration] .gallery-thumbs>button{overflow:hidden!important}
}
@media screen{
html body #main#main[data-design-integration] #quellen>.genus-literature{display:block!important;margin:8px 0 0!important;padding:0!important;border:0!important;border-top:1px solid var(--line)!important;background:none!important}
html body #main#main[data-design-integration] #quellen .genus-literature>summary{min-height:40px!important;font:400 13px/1.4 var(--sans)!important;padding-block:10px!important;color:var(--muted)!important}
html body #main#main[data-design-integration] #quellen .genus-literature .taxon-research{margin:0!important;padding:0 0 10px!important;border:0!important;background:none!important}
html body #main#main[data-design-integration] #quellen .genus-literature :is(p,a){font:400 14px/1.5 var(--sans)!important;max-width:78ch!important}
}
@media screen{
html body #main#main[data-design-integration] .fieldguide-navigation{border-top:0!important}
html body #main#main[data-design-integration] .feature-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;align-items:start!important}
html body #main#main[data-design-integration] .feature-action{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;min-height:34px!important;padding:7px 0!important;margin:0!important;font:400 13px/1.4 var(--sans)!important;background:none!important;border:0!important;box-shadow:none!important;color:var(--muted)!important;text-align:left!important}
html body #main#main[data-design-integration] .feature-action svg{width:12px!important;height:12px!important;flex:none!important}
html body #main#main[data-design-integration] .portrait-secondary-actions{padding:0!important;margin:0!important;border:0!important;background:none!important}
html body #main#main[data-design-integration] .portrait-secondary-actions>summary{font:400 13px/1.4 var(--sans)!important;min-height:34px!important;padding-block:8px!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .integrated-residual{margin-top:8px!important;padding-top:0!important;border:0!important}
@media(min-width:701px) and (max-width:820px){
html body #main#main[data-design-integration] .fieldguide-navigation>summary{display:flex!important;align-items:center!important;min-height:44px!important;padding:8px 0!important}
html body #main#main[data-design-integration] .fieldguide-navigation:not([open]) .fieldguide-navlinks{display:none!important}
}
}
/* One responsive section-navigation contract; expanded links occupy real space. */
@media screen{
html body #main#main[data-design-integration] .portrait-reading-bar{height:auto!important;block-size:auto!important;max-height:none!important;align-items:flex-start!important;overflow:visible!important}
html body #main#main[data-design-integration] .fieldguide-navigation{height:auto!important;block-size:auto!important;max-height:none!important;overflow:visible!important}
html body #main#main[data-design-integration] .fieldguide-navlinks{position:static!important;inset:auto!important;transform:none!important;width:100%!important;height:auto!important;block-size:auto!important;max-height:none!important;box-sizing:border-box!important;background:var(--paper)!important}
html body #main#main[data-design-integration] .portrait-heading .latin{font:400 16px/1.4 var(--sans)!important;color:var(--muted)!important;letter-spacing:0!important}
@media(max-width:820px){
html body #main#main[data-design-integration] .fieldguide-navigation>summary{display:flex!important;align-items:center!important;gap:10px!important;min-height:44px!important;padding:8px 0!important;font:600 14px/1.4 var(--sans)!important;box-sizing:border-box!important;border:0!important;background:none!important}
html body #main#main[data-design-integration] .fieldguide-navigation:not([open])>.fieldguide-navlinks{display:none!important}
html body #main#main[data-design-integration] .fieldguide-navigation[open]>.fieldguide-navlinks{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:2px 8px!important;padding:5px 0 7px!important;border-top:1px solid var(--line)!important
}
html body #main#main[data-design-integration] .fieldguide-navigation[open] .portrait-menu-current{display:none}
html body #main#main[data-design-integration] .fieldguide-navigation[open] .portrait-menu-chevron{margin-inline-start:auto}
html body #main#main[data-design-integration] .fieldguide-navlinks>a{
  display:flex;align-items:center;min-height:40px!important;padding:6px 8px!important;
  line-height:1.4!important;border-radius:4px
}
html body #main#main[data-design-integration] .fieldguide-navlinks>a[aria-current="location"]{
  background:color-mix(in srgb,currentColor 7%,transparent)!important;font-weight:600!important
}
@media(min-width:600px){
  html body #main#main[data-design-integration] .fieldguide-navigation[open]>.fieldguide-navlinks{
    grid-template-columns:repeat(4,minmax(0,1fr))!important
  }
}
html body #main#main[data-design-integration] .fieldguide-navigation>summary:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}
}
@media(min-width:821px){html body #main#main[data-design-integration] .fieldguide-navigation>summary{display:none!important}html body #main#main[data-design-integration] .fieldguide-navigation>.fieldguide-navlinks{display:flex!important;flex-wrap:wrap!important}}
}
/* Shared, quiet utility-icon family. Touch targets remain generous. */
@media screen{
html body .header :is(.header-glossary,.theme-toggle,.header-search-toggle){display:inline-flex;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:10px!important;border:0!important;border-radius:7px!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important}
html body .header :is(.header-glossary,.theme-toggle,.header-search-toggle) svg{width:19px!important;height:19px!important;display:block!important;flex:none!important;fill:none!important;stroke:currentColor!important;stroke-width:1.5!important;stroke-linecap:round!important;stroke-linejoin:round!important;opacity:.85;transform:none!important}
html body .header :is(.header-glossary,.theme-toggle,.header-search-toggle):hover{background:color-mix(in srgb,var(--ink) 6%,transparent)!important}
html body .header :is(.header-glossary,.theme-toggle,.header-search-toggle):focus-visible{outline:2px solid var(--muted)!important;outline-offset:1px!important}
html body .header .header-tools{align-items:center!important;gap:4px!important}
html body #main#main[data-design-integration] .portrait-heading .latin{font:italic 400 16px/1.4 Literata,Georgia,serif!important;font-optical-sizing:auto!important}
@media(pointer:coarse){html body .header :is(.header-glossary,.theme-toggle,.header-search-toggle){width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}}
}
/* Portrait variety review: one predictable place for context and actions. */
@media screen {
html body #main#main[data-design-integration] .portrait-context{margin:16px 0 0!important;padding:12px 0 0!important;border-top:1px solid var(--line)!important}
html body #main#main[data-design-integration] .portrait-context>aside .context-panel{display:grid!important;grid-template-columns:110px minmax(0,1fr)!important;column-gap:16px!important;row-gap:6px!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
html body #main#main[data-design-integration] .portrait-context .observation-heading{grid-column:1!important;margin:0!important;font:600 15px/1.55 var(--sans)!important}
html body #main#main[data-design-integration] .portrait-context .context-panel>:not(.observation-heading){grid-column:2!important;margin:0!important;font-size:15px!important;line-height:1.55!important}
html body #main#main[data-design-integration] .portrait-context .context-panel>details>summary{padding:5px 0!important;font-size:13px!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .detail-figure .portrait-body{display:flex!important;flex-wrap:wrap!important;align-items:start!important;gap:0 16px!important;margin-top:12px!important;padding-top:8px!important;border-top:1px solid var(--line)!important}
html body #main#main[data-design-integration] .portrait-body>.actions{display:flex!important;flex-wrap:wrap!important;gap:4px 16px!important;margin:0!important;padding:0!important;border:0!important}
html body #main#main[data-design-integration] .portrait-body>.portrait-secondary-actions{flex:1 1 115px!important;min-width:0!important}
html body #main#main[data-design-integration] .portrait-body>.portrait-secondary-actions>summary{white-space:nowrap!important}
html body #main#main[data-design-integration] .portrait-body .utility-actions{display:grid!important;gap:8px!important;padding:8px 0!important;margin:0!important}
@media(max-width:700px){
html body #main#main[data-design-integration] .portrait-context>aside .context-panel{grid-template-columns:1fr!important;gap:6px!important}
html body #main#main[data-design-integration] .portrait-context .context-panel>:not(.observation-heading){grid-column:1!important}
}
}

@media screen{html body #main#main[data-design-integration] .portrait-context>aside{display:block!important;margin:0!important;padding:0!important}html body #main#main[data-design-integration] .portrait-context h3{margin:0!important;font:600 15px/1.55 var(--sans)!important}}
@media screen and (max-width:700px){html body #main#main[data-design-integration] .portrait-heading .latin{flex-basis:100%!important;margin:3px 0 0!important}}
@media screen and (min-width:700px){
html:root body .header .nav-more225{position:relative!important}
html:root body .header .nav-more225>.nav-more225-panel{position:absolute!important;inset:calc(100% + 6px) auto auto 0!important;width:240px!important;min-width:0!important;max-width:calc(100vw - 32px)!important;margin:0!important;transform:none!important}
}
/* Compact control rhythm, with 44px targets on small/touch screens. */
@media screen{
html body #main :is(input[type=search],#search,#register-search,select){box-sizing:border-box!important;height:40px!important;min-height:40px!important;padding-block:7px!important;font-size:14px!important;line-height:1.4!important;border-radius:4px!important}
html body #main :is(.mobile-filters,.view-toggle button){box-sizing:border-box!important;height:40px!important;min-height:40px!important;padding-block:7px!important}
}
@media screen and (max-width:700px),screen and (pointer:coarse){
html body #main :is(input[type=search],#search,#register-search,select,.mobile-filters,.view-toggle button){height:44px!important;min-height:44px!important}
html body #main :is(input[type=search],#search,#register-search,select){font-size:16px!important}
}
@media screen{html body #main :is(.styled-select-trigger,[data-density]){box-sizing:border-box!important;height:40px!important;min-height:40px!important;padding-block:7px!important;font-size:14px!important;line-height:1.4!important}html body #main [data-density]{width:40px!important;min-width:40px!important}}
@media screen and (max-width:700px),screen and (pointer:coarse){html body #main :is(.styled-select-trigger,[data-density]){height:44px!important;min-height:44px!important}html body #main [data-density]{width:44px!important;min-width:44px!important}}
/* Size the visible search frame, not just its inner input. */
@media screen{
html body #main .atlas-search .searchbox{box-sizing:border-box!important;height:40px!important;min-height:40px!important;padding:0 12px!important;align-items:center!important;border-width:1px!important;border-radius:4px!important}
html body #main .atlas-search .searchbox #search{height:100%!important;min-height:0!important;padding-block:0!important;border:0!important;box-shadow:none!important}
}
@media screen and (max-width:700px),screen and (pointer:coarse){html body #main .atlas-search .searchbox{height:44px!important;min-height:44px!important}}

/* The same anatomical view and its published distinction stay together. */
#pair-guide .paired-feature { grid-column: 1 / -1; min-width: 0; }
#pair-guide .paired-feature h3 { margin: 0 0 .5rem; }
.paired-feature-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap: .75rem 1.25rem; }
.paired-feature-list article { display: grid; grid-template-columns: clamp(5rem,10vw,8rem) minmax(0,1fr); align-items: center; gap: .75rem; }
.paired-feature-list img { width: 100%; height: auto; border-radius: .25rem; }
.paired-feature-list p { margin: .2rem 0; }
.paired-feature-list small { display: block; font-size: .8125rem; overflow-wrap: anywhere; }
.paired-feature-list .paired-warning { color: var(--danger,currentColor); font-weight: 700; }
@media (min-width:1000px) and (max-width:1023px){
 html body #main[data-page="atlas"] .atlas-search{display:flex;align-items:center;gap:8px}
 html body #main[data-page="atlas"] .atlas-search .searchbox{flex:1;min-width:0;width:auto;margin:0}
 html body #main[data-page="atlas"] .atlas-search #filter-toggle{flex:none;margin:0}
}
@media (min-width:1024px){
 html body #main[data-page="atlas"] .workspace > #filters .filter-top{padding-top:0!important;align-items:flex-start}
 html body #main[data-page="atlas"] .filter-top :is(h2,button){display:inline-flex;align-items:center;box-sizing:border-box;height:44px;min-height:44px;margin-block:0!important;padding-block:0!important}
}
html body #main #atlas-register-link:not(:hover):not(:focus-visible),
html body #main #atlas-register-link:not(:hover):not(:focus-visible) span{text-decoration:none!important;border-bottom:0;box-shadow:none}
html body #consent:not([hidden]),html[data-consent-ask]:not([data-consent]) body #consent[hidden]{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding-inline:max(var(--page-gutter,16px),calc((100% - 1200px)/2 + var(--page-gutter,16px)))}
html body #consent #consent-text{min-width:0;margin:0;text-align:start}
html body #consent .consent-actions{margin:0;justify-self:end}
@media (max-width:700px){
 html body #consent:not([hidden]),html[data-consent-ask]:not([data-consent]) body #consent[hidden]{grid-template-columns:minmax(0,1fr)}
 html body #consent .consent-actions{justify-self:stretch;width:100%;max-width:none;flex-wrap:wrap}
 html body #consent .consent-actions .button{flex:1 1 max-content}
 html body .footer[data-footer-revision="240"] :is(.footer-date,.footer-identity strong){white-space:normal;overflow-wrap:anywhere}
}
@media (min-width:701px) and (max-width:1023px){
 html body #main[data-page="atlas"] :is(#filter-toggle,.sort-control .select-shell){box-sizing:border-box;width:11.5rem!important;min-width:11.5rem!important}
 html body #main[data-page="atlas"] .sort-control :is(.styled-select,.styled-select-trigger,#sort){width:100%!important;box-sizing:border-box}
}
@media screen and (min-width:1024px){
 html body #main[data-page="atlas"] .atlas-intro{position:relative;border-bottom-color:transparent}
 html body #main[data-page="atlas"] .atlas-intro::after{content:"";position:absolute;inset:auto 0 -1px;height:1px;padding-inline:inherit;background:var(--line);background-clip:content-box;pointer-events:none}
}

@media screen {
 :root[data-theme="dark"] .guided-question img[src^="/assets/trees/"]{filter:brightness(0) invert(.88)}
 html body #main.guided-identification #guided-summary:not([hidden]){margin-block-end:.5rem}
 html body #main.guided-identification #guided-summary:not([hidden]) + #guided-panel{padding-block-start:.25rem;margin-block-start:0}
}

@media screen {
 html:root body .header.header {
  --nav-marker:#535e6b;
  --nav-hover-fill:color-mix(in srgb,var(--ink) 6%,transparent);
  --nav-selected-fill:color-mix(in srgb,var(--ink) 5%,transparent);
 }
 html:root[data-theme=dark] body .header.header {
  --nav-marker:#a1c0ad;
  --nav-hover-fill:color-mix(in srgb,var(--ink) 9%,transparent);
  --nav-selected-fill:color-mix(in srgb,var(--ink) 7%,transparent);
 }
 html:root body .header.header .nav>a:is(.active,[aria-current=page])::before {
  background:var(--nav-surface)!important;
 }
 html:root body .header.header .nav:has(.nav-more225[open])>a:is(.active,[aria-current=page])::before {background:transparent!important}
 html:root body .header.header .nav-more225-panel>a:is(.active,[aria-current=page]){
  background:linear-gradient(var(--nav-marker),var(--nav-marker)) left center / 2px 16px no-repeat,var(--nav-selected-fill)!important;
 }
}

@media screen and (max-width:1023px){
 html body #main[data-page="atlas"] :is(.atlas-search #search,.atlas-search #filter-toggle,.sort-control #sort,.sort-control .styled-select-trigger){font-family:var(--sans)!important;font-size:1rem!important;font-weight:500!important;color:var(--ink)!important}
 html body #main[data-page="atlas"] .atlas-search #search::placeholder{color:var(--muted);opacity:1;font:inherit}
}
@media screen and (hover:hover) and (pointer:fine){
 html body #main[data-page="atlas"] .atlas-search #filter-toggle:hover{background:color-mix(in srgb,var(--ink) 8%,var(--control-bg))!important;border-color:var(--muted)!important;color:var(--ink)!important}
}

/* Stable, content-aware desktop photo column; full images retain their proportions. */
@media screen and (min-width:850px){
 html body #main#main[data-design-integration] .integrated-overview{grid-template-columns:minmax(0,var(--portrait-photo-width,42%)) minmax(0,1fr)!important}
 html body #main#main[data-design-integration] .integrated-overview[data-photo-sticky]>.detail-figure{position:sticky!important;top:var(--portrait-photo-top,64px)!important;align-self:start!important}
}

html body #main .merkmalsweg-return{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;align-items:center;background:color-mix(in srgb,var(--ink) 5%,var(--paper));border:0;border-inline-start:3px solid var(--muted);padding:.65rem .9rem}
html body #main .merkmalsweg-return p{margin:0;font-weight:400}
.merkmalsweg-return p:first-child strong{display:block;margin-bottom:.15rem}
html body #main .merkmalsweg-return a{grid-column:2;grid-row:1 / 3}
@media(max-width:700px){html body #main .merkmalsweg-return{grid-template-columns:1fr}html body #main .merkmalsweg-return a{grid-area:auto;justify-self:start;padding-block:.35rem}}
html body #main .feature-row .inline-term{
 color:inherit;text-decoration:underline dotted!important;text-decoration-thickness:1px!important;
 text-decoration-color:color-mix(in srgb,currentColor 38%,transparent)!important;text-underline-offset:.18em;
}
@media(hover:hover){html body #main .feature-row .inline-term:hover{text-decoration-color:currentColor!important}}
html body #main .feature-row .inline-term:focus-visible{text-decoration-color:currentColor!important;outline:2px solid currentColor;outline-offset:2px}

/* Let the feature label carry the glossary action without repeating the term. */
.feature-row dt .inline-term[data-term="sporenpulver"] {
  font: inherit;
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}
.feature-row dt .inline-term[data-term="sporenpulver"]:is(:hover, :focus-visible) {
  text-decoration: underline dotted;
  text-underline-offset: .18em;
}

/* A quiet reading highlight follows the glossary entry across both themes. */
@media (hover: hover) and (pointer: fine) {
  #glossary-dialog .glossary-list article[data-glossary-item]:hover {
    background-color: color-mix(in srgb, var(--ink) 4%, transparent);
  }
}
#glossary-dialog .glossary-list article[data-glossary-item]:has(:focus-visible) {
  background-color: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* The outline belongs to the view switch. Each half owns its fill. */
html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker {
  position: relative;
  gap: 0;
  border: 0;
  border-radius: var(--control-radius);
  overflow: hidden;
  background: var(--control-bg);
  box-shadow: none;
}
html:root body #main[data-page="atlas"] .toolbar .density-picker::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--control-border);
  border-radius: inherit;
  pointer-events: none;
}
html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button {
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--text-secondary, var(--muted));
  opacity: 1;
}
html:root body #main[data-page="atlas"] .toolbar .density-picker button[aria-pressed=true] {
  background: color-mix(in srgb, var(--ink) 13%, var(--control-bg));
  color: var(--ink);
}
html:root body #main[data-page="atlas"] .toolbar .density-picker button:focus-visible {
  outline-offset: -3px;
}

#main .toxin-card .toxin-card-head .chemical-formula,
#main.toxicology-detail .chemical-facts dd.chemical-formula { font-weight: 400; }

@media screen and (max-width:760px) {
  #main.toxicology-detail .toxin-detail-head > .molecule-figure {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding: clamp(8px, 2vw, 14px);
  }
  #main.toxicology-detail .toxin-detail-head .molecule-link picture { display: block; }
  #main.toxicology-detail .toxin-detail-head .molecule-link img {
    width: 100%;
    height: auto;
    max-height: clamp(220px, 72vw, 360px);
    object-fit: contain;
  }
}

@media screen {
  html body #main[data-page="compare"] .comparison-tools > button.compare-layout-toggle {
    inline-size: fit-content;
    max-inline-size: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 14px;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ink);
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
  }
}
@media (hover:hover) and (pointer:fine) {
  html body #main[data-page="compare"] .comparison-tools > button.compare-layout-toggle:hover {
    background: var(--control-hover-bg);
  }
}

/* Shared feedback for glossary actions, photo links and illustration credits. */
@media (hover:hover) and (pointer:fine) {
  html:root body #main.guided-identification .guided-shape-help :is(a[href],button.text-button):hover {
    color: var(--ink);
    background: transparent !important;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
  }
}
html:root body #main.guided-identification .guided-shape-help :is(a[href],button.text-button):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

/* Text actions underline their label; controls keep feedback on their surface. */
@media screen and (hover:hover) and (pointer:fine) {
  html body :is(#main,.footer) :is(a[data-text-link],.kb-paths a,.kb-card,.fieldguide-navlinks a,.inline-term,.text-button):not(.button):hover {
    background-color: transparent !important;
    box-shadow: none;
  }
  html body :is(#main p,.footer) a[href]:not(.button,[role=button]):hover {
    background-color: transparent !important;
  }
  html body :is(#main p,.footer) a[href]:not(.button,[data-text-link],[role=button]):hover {
    text-decoration: underline;
    text-underline-offset: var(--link-line-offset, .2em);
  }
  html body #main .fieldguide-navlinks a[aria-current]:hover {
    text-decoration: underline;
  }
  html body #main .inline-term:hover {
    text-decoration: underline dotted;
  }
  html body :is(#main,.footer) :is(.button,button,summary):not(.inline-term,.text-button):hover,
  html body :is(#main,.footer) :is(.button,button,summary):not(.inline-term,.text-button):hover :is(.link-label241,strong,.kb-read-label),
  html body #main.kb-home .kb-glossary-entry:hover .kb-glossary-copy>strong {
    text-decoration: none !important;
  }
  html body #main .card-bottom :is(.save-card,.compare-toggle):hover,
  html body #main.kb-home .kb-glossary-hint .kb-glossary-entry:hover {
    background-color: var(--control-hover-bg) !important;
  }
}

/* Desktop review, 2026-11-05: correct measured geometry without changing type roles. */
@media screen and (min-width:701px) {
  /* Legacy grid-row placement left an empty first track above the explanation. */
  html body #main#main[data-design-integration] #aehnliche .comparison-description {
    grid-column:2!important;
    grid-row:1!important;
  }
  html body #main#main[data-design-integration] #aehnliche .comparison-actions {
    grid-column:2!important;
    grid-row:2!important;
  }
  /* A two-line name occupied 90px because the row carried 40px of padding. */
  html body #main#main[data-page="register"] .register-row {
    min-height:64px!important;
    padding:10px 12px!important;
    column-gap:16px!important;
  }
}
@media screen and (min-width:701px){html body #main#main[data-design-integration] #aehnliche .comparison-note{grid-template-rows:auto auto!important}}
/* Portrait reading rhythm: stable label column and one photo navigation rail. */
html body #main#main[data-design-integration] .fieldguide-morphology .feature-row{display:grid!important;grid-template-columns:100px minmax(0,1fr)!important;gap:14px!important;margin:0!important;padding:8px 0!important;align-items:start!important}
html body #main#main[data-design-integration] .fieldguide-morphology .feature-row :is(dt,dd,.feature-description){display:block!important;margin:0!important}
html body #main#main[data-design-integration] .fieldguide-morphology .feature-row dt{font-size:14px!important;line-height:1.65!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .fieldguide-morphology .feature-list{margin:4px 0 12px!important}
html body #main#main[data-design-integration] .gallery-navigation{display:flex;align-items:center;gap:12px;margin:8px 0}
html body #main#main[data-design-integration] .gallery-navigation .gallery-thumbs{flex:0 1 auto;min-width:0;margin:0!important;padding:2px!important}
html body #main#main[data-design-integration] .gallery-navigation .gallery-toolbar{flex:1;min-width:0;flex-wrap:wrap;gap:2px 8px!important}
html body #main#main[data-design-integration] .gallery-navigation .gallery-thumbs button{width:44px!important;height:36px!important;min-width:44px!important}
html body #main#main[data-design-integration] .detail-figure .portrait-body{gap:0 10px!important;margin-top:8px!important;padding-top:4px!important}
html body #main#main[data-design-integration] .portrait-body>.actions{gap:4px 12px!important}
html body #main#main[data-design-integration] .portrait-body>.portrait-secondary-actions{flex:0 1 auto!important}
@media(max-width:700px){
 html body #main#main[data-design-integration] .fieldguide-morphology .feature-row{grid-template-columns:86px minmax(0,1fr)!important;gap:12px!important;padding:7px 0!important}
 html body #main#main[data-design-integration] .gallery-navigation{flex-wrap:wrap;gap:4px 12px}
 html body #main#main[data-design-integration] .gallery-navigation .gallery-thumbs button{height:44px!important;min-width:44px!important}
 html body #main#main[data-design-integration] .gallery-navigation .gallery-thumbs{max-width:100%}
}
/* One quiet closing row for the whole portrait overview. */
html body #main#main[data-design-integration] .integrated-overview>.portrait-action-footer{grid-column:1/-1!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:4px 20px!important;margin:0!important;padding:8px 0 0!important;border-top:1px solid var(--line)!important}
html body #main#main[data-design-integration] .portrait-action-footer>.feature-action{width:auto!important;flex:0 1 auto!important;margin:0!important;padding:8px 4px!important;border:0!important;min-height:36px!important}
html body #main#main[data-design-integration] .portrait-action-footer>.feature-support-panel{flex-basis:100%!important;width:100%!important}
html body #main#main[data-design-integration] .feature-support{border:0!important;margin-top:8px!important;padding:0!important}
html body #main#main[data-design-integration] .photo-meta:not([aria-hidden="true"]){display:flex!important;flex-wrap:wrap;align-items:baseline;gap:0 12px}
html body #main#main[data-design-integration] .photo-meta>.credit{flex:1 1 200px;margin:0!important}
html body #main#main[data-design-integration] .photo-meta>.integrated-photo-details{flex:0 1 auto;margin:0!important}
html body #main#main[data-design-integration] .photo-meta>.integrated-photo-details[open]{flex-basis:100%}
@media(max-width:700px){
 html body #main#main[data-design-integration] .integrated-overview>.portrait-action-footer{margin-top:12px!important;gap:0 16px!important}
 html body #main#main[data-design-integration] .portrait-action-footer>.feature-action{min-height:44px!important}
}
html body #main#main[data-design-integration] .photo-meta>.integrated-photo-details{width:auto!important;min-width:0!important;padding:0!important;border:0!important}
html body #main#main[data-design-integration] .photo-meta>.integrated-photo-details[open]{width:100%!important}
html body #main#main[data-design-integration] .integrated-overview{row-gap:12px!important}
/* Shared spacing rhythm: one boundary between sections, no stacked empty margins. */
html body #main#main[data-design-integration] .integrated-residual[hidden]{display:none!important}
html body #main#main[data-design-integration] .photo-meta:not([aria-hidden="true"]):not([hidden]){display:flex!important;align-items:center!important}
html body #main#main[data-design-integration] .gallery-navigation{margin:6px 0 2px!important}
html body #main#main[data-design-integration] .integrated-overview{row-gap:8px!important}
html body #main#main[data-design-integration] .integrated-overview>.portrait-action-footer{padding-top:4px!important}
html body #main#main[data-design-integration] :is(#aehnliche,#lebensraum,#vertiefung,#namen,#fundmeldungen,#quellen){margin-top:20px!important;padding-top:12px!important}
html body #main#main[data-design-integration] #aehnliche .comparison-notes{row-gap:0!important}
html body #main#main[data-design-integration] #aehnliche .comparison-heading{grid-row:1 / span 2!important}
html body #main#main[data-design-integration] .portrait-context{margin-top:12px!important;padding-top:10px!important}
@media(max-width:700px){
 html body #main#main[data-design-integration] .integrated-overview>.portrait-action-footer{margin-top:8px!important}
 html body #main#main[data-design-integration] :is(#aehnliche,#lebensraum,#vertiefung,#namen,#fundmeldungen,#quellen){margin-top:16px!important;padding-top:12px!important}
}
/* Keep identification primary; supporting controls use the secondary text tone. */
html body #main#main[data-design-integration] .portrait-action-footer :is(.button,.feature-action,summary){color:var(--muted)!important;font-weight:400!important}
html body #main#main[data-design-integration] .portrait-action-footer [aria-pressed="true"]{color:var(--ink)!important;font-weight:600!important}
html body #main#main[data-design-integration] .fieldguide-morphology>.fieldguide-section-heading{margin-bottom:4px!important}
html body #main#main[data-design-integration] #aehnliche .comparison-note{padding:10px 0!important}
html body #main#main[data-design-integration] #aehnliche .comparison-description>p:last-child{margin-bottom:0!important}
html body #main#main[data-design-integration] #aehnliche .comparison-actions{gap:0 16px!important}
html body #main#main[data-design-integration] #lebensraum .fieldguide-ecology-content{gap:8px 24px!important}
html body #main#main[data-design-integration] #lebensraum .fieldguide-ecology-content>.feature-row{display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;gap:16px!important}
html body #main#main[data-design-integration] #lebensraum .fieldguide-ecology-content>.feature-row h3{font-size:14px!important;color:var(--muted)!important;margin:0!important}
html body #main#main[data-design-integration] #lebensraum .fieldguide-ecology-content>.feature-row p{margin:0!important}
html body #main#main[data-design-integration] #lebensraum :is(.tree-associations,.season-band){padding-top:8px!important}
html body #main#main[data-design-integration] #vertiefung .insight{padding:0!important}
html body #main#main[data-design-integration] #vertiefung .insight-disclosure>summary{display:flex!important;align-items:center!important;gap:8px!important;min-height:44px!important;padding:8px 0!important;color:var(--ink)!important}
html body #main#main[data-design-integration] #vertiefung .insight-disclosure>summary h3{font-size:15px!important;line-height:1.4!important;margin:0!important}
html body #main#main[data-design-integration] #vertiefung .insight-number{display:none!important}
html body #main#main[data-design-integration] #vertiefung .insight-reading{padding:0 0 8px 20px}
html body #main#main[data-design-integration] #vertiefung .insight-reading>p:last-of-type{margin-bottom:2px!important}
@media(max-width:700px){
 html body #main#main[data-design-integration] #lebensraum .fieldguide-ecology-content>.feature-row{grid-template-columns:1fr!important;gap:4px!important}
 html body #main#main[data-design-integration] #aehnliche :is(.comparison-action,.comparison-evidence>summary){min-height:44px!important}
}
html body #main#main[data-design-integration] .edibility-panel>.status-evidence{display:contents!important}
html body #main#main[data-design-integration] .edibility-panel>.status-evidence>summary{flex:0 0 auto!important;margin:0!important}
html body #main#main[data-design-integration] .status-evidence-content{flex:0 0 100%;min-width:0;padding:8px 0 0}
html body #main#main[data-design-integration] .status-evidence:not([open])>.status-evidence-content{display:none!important}
html body #main#main[data-design-integration] .status-evidence-toggle{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;border:0;background:none;color:var(--muted);font:400 13px/1.4 var(--sans);padding:7px 0;cursor:pointer}
html body #main#main[data-design-integration] .status-evidence-toggle::before{content:'';width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);margin:0 4px}
html body #main#main[data-design-integration] .status-evidence-toggle[aria-expanded="true"]::before{transform:rotate(45deg)}
html body #main#main[data-design-integration] .status-evidence-content[hidden]{display:none!important}
html body #main#main[data-design-integration] .status-evidence-toggle:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)}
/* Photo navigation responds to its column width, not only the viewport.
   The selection stays readable when a two-column portrait first fits. */
html body #main#main[data-design-integration] .gallery-navigation{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:4px!important;margin:6px 0 2px!important;container-type:inline-size}
html body #main#main[data-design-integration] .gallery-navigation .gallery-thumbs{width:100%!important;max-width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important;box-sizing:border-box!important}
html body #main#main[data-design-integration] .gallery-navigation .gallery-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;width:100%!important;min-height:32px!important;gap:0 12px!important;align-items:center!important}
html body #main#main[data-design-integration] .gallery-navigation .gallery-selection{min-width:0!important}
html body #main#main[data-design-integration] .photo-meta:not([aria-hidden="true"]):not([hidden]){display:block!important}
html body #main#main[data-design-integration] .photo-meta>.credit{min-width:0!important;margin:2px 0 0!important}
html body #main#main[data-design-integration] .photo-details-content{min-width:0;padding:4px 0 8px}
html body #main#main[data-design-integration] .photo-details-content[hidden]{display:none!important}
/* Matching actions have the same type, icon box and interaction surface. */
html body #main#main[data-design-integration] .gallery-toolbar :is(.gallery-enlarge,.photo-details-shared){display:flex!important;align-items:center!important;justify-content:flex-start!important;justify-self:start!important;box-sizing:border-box!important;min-height:32px!important;margin:0!important;font:400 13px/1.4 var(--sans)!important;color:var(--muted)!important;text-align:left;text-decoration:none!important;gap:6px!important;padding:6px 4px!important;border:0!important;border-radius:4px!important;background:transparent!important;box-shadow:none!important;cursor:pointer}
html body #main#main[data-design-integration] .gallery-toolbar :is(.gallery-enlarge,.photo-details-shared) span{text-decoration:none!important;border:0!important}
html body #main#main[data-design-integration] .photo-details-shared::before{display:none!important}
html body #main#main[data-design-integration] .gallery-toolbar :is(.gallery-enlarge,.photo-details-shared) svg{display:block!important;width:16px!important;height:16px!important;flex:0 0 16px!important;stroke-width:1.5!important}
html body #main#main[data-design-integration] .photo-details-shared[aria-expanded="true"] svg{transform:rotate(90deg)}
@media(hover:hover){html body #main#main[data-design-integration] .gallery-toolbar :is(.gallery-enlarge,.photo-details-shared):hover{background:color-mix(in srgb,var(--ink) 5%,transparent)!important;color:var(--ink)!important;text-decoration:none!important}}
html body #main#main[data-design-integration] .gallery-toolbar :is(.gallery-enlarge,.photo-details-shared):focus-visible{outline:2px solid var(--muted)!important;outline-offset:2px!important}
@container(max-width:380px){
 html body #main#main[data-design-integration] .gallery-navigation .gallery-toolbar{grid-template-columns:1fr 1fr!important;gap:0 16px!important}
 html body #main#main[data-design-integration] .gallery-navigation .gallery-selection{grid-column:1/-1!important}
}
@media(max-width:700px){
 html body #main#main[data-design-integration] .gallery-toolbar :is(.gallery-enlarge,.photo-details-shared){min-height:44px!important}
 html body #main#main[data-design-integration] .status-evidence-toggle{min-height:44px;box-sizing:border-box}
}
html body #main#main[data-design-integration] .status-evidence-toggle:focus-visible{outline:2px solid var(--muted);outline-offset:2px}
/* Desktop follows the same ordered reading sequence as mobile. */
html body #main#main[data-design-integration] #lebensraum .fieldguide-ecology-content{display:block!important}
html body #main#main[data-design-integration] #lebensraum :is(.tree-associations,.season-band){display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;gap:4px 16px!important;border:0!important;padding:10px 0 0!important}
html body #main#main[data-design-integration] #lebensraum .tree-panel-heading{grid-column:1!important;margin:0!important}
html body #main#main[data-design-integration] #lebensraum .tree-panel-content{grid-column:2!important}
html body #main#main[data-design-integration] #lebensraum .season-band>:first-child{grid-column:1!important}
html body #main#main[data-design-integration] #lebensraum .season-band>:not(:first-child){grid-column:2!important;margin-top:0!important}
html body #main#main[data-design-integration] #lebensraum :is(.tree-panel-heading h3,.season-title){color:var(--muted)!important;font-weight:600!important}
html body #main#main[data-design-integration] #vertiefung .insight-grid{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
html body #main#main[data-design-integration] #vertiefung .insight-reading{max-width:82ch}
html body #main#main[data-design-integration] #aehnliche .comparison-note{grid-template-columns:240px minmax(0,1fr)!important;column-gap:24px!important}
html body #main#main[data-design-integration] .fieldguide-comparisons-more>summary{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:fit-content!important;gap:8px!important;background:none!important;border:0!important;border-radius:0!important;padding:8px 0!important;box-shadow:none!important}
@media(max-width:700px){
 html body #main#main[data-design-integration] #lebensraum :is(.tree-associations,.season-band){grid-template-columns:minmax(0,1fr)!important;gap:4px!important;padding-top:12px!important}
 html body #main#main[data-design-integration] #lebensraum :is(.tree-panel-content,.season-band>:not(:first-child)){grid-column:1!important}
}
html body #main#main[data-design-integration] .comparison-scope{display:flex;flex-wrap:wrap;gap:0 16px;align-items:baseline;margin-top:6px}
html body #main#main[data-design-integration] #aehnliche .comparison-scope>p{font-size:13px!important;color:var(--muted);margin:0!important}
html body #main#main[data-design-integration] .comparison-scope>details{margin:0!important;padding:0!important;border:0!important}
html body #main#main[data-design-integration] .comparison-scope>details[open]{flex-basis:100%}
html body #main#main[data-design-integration] .comparison-scope>details>summary{width:fit-content}
html body #main#main[data-design-integration] .comparison-scope{display:block}
/* Brand lockup: give the detailed impression enough pixels to read. */
html body .header.header .brand.brand-lockup{display:inline-flex!important;align-items:center!important;gap:6px!important;flex-shrink:0!important}
html body .header.header .brand.brand-lockup .brand-fieldmark{width:40px!important;height:40px!important;flex:0 0 40px!important;transform:none!important}
html body .header.header .brand.brand-lockup .brand-name{font:450 23px/1.1 Literata,Georgia,serif!important;letter-spacing:-.025em!important;transform:translateY(-1px)!important}
@media(max-width:700px){
 html body .header.header .brand.brand-lockup{gap:5px!important}
 html body .header.header .brand.brand-lockup .brand-fieldmark{width:36px!important;height:36px!important;flex-basis:36px!important}
 html body .header.header .brand.brand-lockup .brand-name{font-size:22px!important}
}

/* Long bibliographic labels must not widen the entire mobile document. */
html body #main#main[data-design-integration] #quellen .source-work .source-page{white-space:normal!important;overflow-wrap:anywhere}
html body #main#main[data-design-integration] .portrait-action-footer>.portrait-more-panel{flex:0 0 100%!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important;gap:4px 16px!important;border-top:1px solid var(--line)!important;padding:8px 0!important;margin:0!important}
html body #main#main[data-design-integration] .portrait-action-footer>.portrait-more-panel[hidden]{display:none!important}
html body #main#main[data-design-integration] .portrait-icon-action{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:40px!important;padding:6px 4px!important;border:0!important;background:none!important;color:var(--muted)!important;font:400 13px/1.4 var(--sans)!important;cursor:pointer}
html body #main#main[data-design-integration] .portrait-icon-action::before,html body #main#main[data-design-integration] .portrait-icon-action::after{display:none!important}
html body #main#main[data-design-integration] .portrait-action-icon{flex:0 0 16px;width:16px;height:16px}
html body #main#main[data-design-integration] .portrait-icon-action:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)!important;border-radius:4px}
html body #main#main[data-design-integration] .portrait-icon-action:focus-visible{outline:2px solid var(--muted);outline-offset:2px}
html body .header.header .brand.brand-lockup .brand-fieldmark{width:43px!important;height:43px!important;flex-basis:43px!important}
html body .header.header .brand.brand-lockup{gap:5px!important}
html body .header.header .brand.brand-lockup .brand-name{transform:translateY(-.5px)!important}
@media(max-width:700px){
 html body .header.header .brand.brand-lockup .brand-fieldmark{width:39px!important;height:39px!important;flex-basis:39px!important}
 html body .header.header .brand.brand-lockup{gap:4px!important}
 html body #main#main[data-design-integration] .portrait-icon-action{min-height:44px!important}
}

html body #main#main[data-design-integration] .portrait-more-panel>*{justify-self:start!important;text-align:left!important}
html body #main#main[data-design-integration] .portrait-icon-action[data-save]::before,html body #main#main[data-design-integration] .portrait-icon-action[data-add]::before{display:block!important}
html body #main#main[data-design-integration] .credit-quiet{display:flex!important;align-items:baseline;gap:4px;min-width:0;font-size:13px!important;line-height:1.5!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .credit-quiet .credit-author{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
html body #main#main[data-design-integration] .credit-quiet .credit-license{flex:none;white-space:nowrap}
html body #main#main[data-design-integration] .credit-quiet a,html body #main#main[data-design-integration] .credit-quiet a span{text-decoration:none!important;border:0!important;color:inherit!important}
html body #main#main[data-design-integration] .credit-quiet a:hover,html body #main#main[data-design-integration] .credit-quiet a:focus-visible{text-decoration:underline!important}
html body #main#main[data-design-integration] .portrait-icon-action::before{display:none!important}
html body #main#main[data-design-integration] .portrait-action-icon{width:18px!important;height:18px!important;flex-basis:18px!important}
html body #main#main[data-design-integration] .inline-term{text-decoration-skip-ink:none!important}
html body #main#main[data-design-integration] .portrait-action-footer .portrait-icon-action>.portrait-action-icon{display:block!important;position:static!important;opacity:1!important;visibility:visible!important;width:18px!important;height:18px!important;flex:0 0 18px!important}
/* One reading measure for the introduction and its safety context. */
html body #main#main[data-design-integration] .integrated-intro .portrait-lead{max-width:88ch!important;font-size:15px!important;line-height:1.55!important;text-wrap:pretty;margin:0!important}
html body #main#main[data-design-integration] .integrated-intro .edibility-panel>p{max-width:88ch!important;font-size:14px!important;line-height:1.6!important;text-wrap:pretty;margin:0!important}
html body #main#main[data-design-integration] .integrated-intro .fieldguide-status-card{margin:10px 0 0!important}
html body #main#main[data-design-integration] .integrated-intro .edibility-panel{row-gap:6px!important}
/* Keep the observation and its evidence directly reachable below the feature list. */
html body #main#main[data-design-integration] .feature-support>.feature-actions {
 display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;
 margin:0!important;padding:0!important;border:0!important;
}
html body #main#main[data-design-integration] .feature-support>.feature-actions>:is(.feature-action,.feature-support-panel){order:0!important}
html body #main#main[data-design-integration] .feature-support>.feature-actions>.feature-action {
 width:100%!important;min-height:36px!important;text-align:left!important;
 border-top:1px solid var(--line)!important;
}
@media(max-width:700px){
 html body #main#main[data-design-integration] .feature-support>.feature-actions>.feature-action{min-height:44px!important}
}
/* A repeatable feature-reading rhythm, independent of portrait length. */
html body #main#main[data-design-integration] .fieldguide-morphology>.fieldguide-section-heading{margin:0 0 12px!important;padding:0!important}
html body #main#main[data-design-integration] .fieldguide-morphology>.fieldguide-section-heading>.section-title{font:600 16px/1.4 var(--sans)!important;margin:0!important;padding:0!important}
html body #main#main[data-design-integration] .fieldguide-morphology>.feature-list{margin:0!important;padding:0!important}
html body #main#main[data-design-integration] .fieldguide-morphology>.feature-list>.feature-row{padding:7px 0!important}
html body #main#main[data-design-integration] .fieldguide-morphology>.feature-list>.feature-row:first-child{padding-top:0!important}
html body #main#main[data-design-integration] .fieldguide-morphology>.feature-list>.feature-row:last-child{padding-bottom:0!important}
/* Attribution always follows the photo controls on the image's left edge. */
html body #main#main[data-design-integration] .gallery-navigation{margin-bottom:0!important}
html body #main#main[data-design-integration] .photo-metas{margin:8px 0 0!important;padding:0!important;min-width:0!important}
html body #main#main[data-design-integration] .photo-meta>.credit-quiet{width:100%;box-sizing:border-box;margin:0!important;padding:0!important;flex-wrap:nowrap!important;gap:4px!important}
html body #main#main[data-design-integration] .credit-quiet>span{flex:none;white-space:nowrap}
/* Names follow the same compact label/value rhythm as portrait features. */
html body #main#main[data-design-integration] .names-trigger{padding:8px 0!important;font-size:14px!important;line-height:1.5!important;min-height:44px!important}
html body #main#main[data-design-integration] :is(.names-text,.names-values,.names-name,.names-original){font-size:14px!important;line-height:1.5!important}
html body #main#main[data-design-integration] .names-gloss{font-size:13px!important;line-height:1.45!important;margin-top:1px!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .names-proof{margin:0!important;padding:4px 0 10px!important}
html body #main#main[data-design-integration] .names-proof .names-caveat{margin:0 0 8px!important}
html body #main#main[data-design-integration] .names-original{min-height:0!important}
html body #main#main[data-design-integration] .names-gloss{display:block!important;min-height:0!important;padding:0!important}
html body #main#main[data-design-integration] .names-values{display:grid!important;gap:8px!important}
html body #main#main[data-design-integration] .names-trigger .names-copy{display:none!important}
@media(min-width:1000px){
 html body #main#main[data-design-integration] #vertiefung .insight-grid:has(.insight-column){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 28px!important}
 html body #main#main[data-design-integration] #aehnliche .comparison-note{grid-template-columns:220px minmax(0,1fr) 150px!important;grid-template-rows:auto!important;gap:0 24px!important}
 html body #main#main[data-design-integration] #aehnliche .comparison-heading{grid-column:1!important;grid-row:1!important}
 html body #main#main[data-design-integration] #aehnliche .comparison-description{grid-column:2!important;grid-row:1!important}
 html body #main#main[data-design-integration] #aehnliche .comparison-actions{grid-column:3!important;grid-row:1!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important}
}
html body #main#main[data-design-integration] .insight-column{min-width:0}
html body #main#main[data-design-integration] #namen .names-proof{padding:10px 12px 12px!important;border-left:2px solid var(--line)!important;background:color-mix(in srgb,var(--ink) 2%,transparent)!important}
html body #main#main[data-design-integration] .names-proof :is(.name-primary-source,.name-source-addition){padding:8px 0!important;margin:0!important;border:0!important;border-bottom:1px solid var(--line)!important}
html body #main#main[data-design-integration] .names-proof p{margin:0 0 5px!important;line-height:1.55!important}
html body #main#main[data-design-integration] .names-proof .names-proof-label{font-weight:600!important;margin:8px 0 0!important}
html body #main#main[data-design-integration] .names-proof .translation-details{margin-top:4px!important}
html body #glossary-dialog .glossary-head{padding:14px 20px 12px!important}
html body #glossary-dialog .dialog-head{align-items:center!important;margin:0 0 8px!important;gap:12px!important}
html body #glossary-dialog .dialog-head>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
html body #glossary-dialog .dialog-head h2{order:-1;font-size:21px!important;line-height:1.3!important;margin:0!important}
html body #glossary-dialog .dialog-head .eyebrow{font:400 13px/1.4 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;margin:0!important;color:var(--muted)!important}
html body #glossary-dialog .dialog-close{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-color:transparent!important;background:transparent!important}
html body #glossary-dialog .dialog-close:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)!important}
html body #glossary-dialog .glossary-search{margin:0!important;display:block!important}
html body #glossary-dialog #glossary-search{height:40px!important;min-height:40px!important;margin:0!important;padding:8px 12px!important;font-size:14px!important}
@media(max-width:700px){html body #glossary-dialog .glossary-head{padding:10px 14px 12px!important}html body #glossary-dialog :is(.dialog-close,#glossary-search){height:44px!important;min-height:44px!important}}
html body #main#main[data-design-integration] .comparison-actions{align-self:start!important;justify-content:flex-start!important}
html body #main#main[data-design-integration] .comparison-source-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 0;border:0;background:none;color:var(--muted);font:400 13px/1.4 var(--sans);cursor:pointer;text-align:left}
html body #main#main[data-design-integration] .comparison-source-toggle:before{content:'';width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);margin:0 4px 0 2px}
html body #main#main[data-design-integration] .comparison-source-toggle[aria-expanded=true]:before{transform:rotate(45deg)}
html body #main#main[data-design-integration] .comparison-source-panel{grid-column:2/-1!important;padding:8px 0 2px!important;border-top:1px solid var(--line);min-width:0}
html body #main#main[data-design-integration] .comparison-source-panel[hidden]{display:none!important}
html body #main#main[data-design-integration] .comparison-source-panel ul{margin:0!important;padding:0!important;list-style:none!important;display:grid;gap:6px}
html body #main#main[data-design-integration] .comparison-source-panel li{font:400 13px/1.55 var(--sans)!important;margin:0!important;overflow-wrap:anywhere}
html body #main#main[data-design-integration] :is(.insight-reading,.names-proof){overflow-wrap:anywhere}
html body #main#main[data-design-integration] .insight-reading{padding:4px 0 12px 20px!important}
html body #main#main[data-design-integration] .insight-reading p{margin:0 0 8px!important;line-height:1.6!important}
html body #main#main[data-design-integration] .translation-details>div{padding:6px 0 0!important}
@media(max-width:700px){html body #main#main[data-design-integration] .comparison-source-toggle{min-height:44px}html body #main#main[data-design-integration] .comparison-source-panel{margin-top:6px!important}}
/* Compact page entrances share a single rhythm with the portraits. */
html body #main:is([data-page=compare],[data-page=notebook])>.intro{padding:20px 0 16px!important;margin:0!important}
html body #main:is([data-page=compare],[data-page=notebook])>.intro .eyebrow{margin:0 0 6px!important;font-size:13px!important}
html body #main:is([data-page=compare],[data-page=notebook])>.intro h1{font-size:30px!important;line-height:1.2!important;margin:0 0 8px!important}
html body #main:is([data-page=compare],[data-page=notebook])>.intro p{font-size:15px!important;line-height:1.55!important;margin:0!important;max-width:72ch;text-wrap:pretty}
html body #main[data-page=compare]>.notice{margin:0 0 16px!important;padding:8px 12px!important;font-size:13px!important;line-height:1.55!important}
html body #main[data-page=compare]>.comparison{padding-top:0!important}
html body #main[data-page=notebook] .notebook{padding-top:0!important}
html body #main[data-page=notebook] .empty{padding:18px 0!important;margin:0!important}
html body #main[data-page=notebook] .empty h2{font-size:22px!important;line-height:1.3!important;margin:0 0 8px!important}
html body #main[data-page=notebook] .empty p{margin:0 0 12px!important;font-size:14px!important;line-height:1.55!important}
html body #main[data-page=notebook] .notebook-tools{margin-top:20px!important;padding-top:16px!important}
html body #main[data-page=notebook] .notebook-tools h2{font-size:21px!important;margin:0 0 10px!important}
/* Knowledge is a readable index, with quiet topic groups rather than nested cards. */
html body #main.kb-home .kb-intro{padding:20px 0 18px!important;margin:0!important}
html body #main.kb-home .kb-intro h1{font-size:30px!important;line-height:1.2!important;margin:6px 0 8px!important}
html body #main.kb-home .kb-deck{font-size:15px!important;line-height:1.6!important;max-width:76ch!important;margin:0!important}
html body #main.kb-home .kb-start{display:block!important;padding:18px 0!important;margin:0!important}
html body #main.kb-home .kb-start>div:first-child{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-bottom:12px}
html body #main.kb-home .kb-start>div:first-child>.eyebrow{display:none!important}
html body #main.kb-home .kb-start h2{font-size:22px!important;margin:0!important}
html body #main.kb-home .kb-glossary-hint{margin:0!important}
html body #main.kb-home .kb-glossary-entry{background:transparent!important;border:0!important;padding:6px 0!important;min-height:44px!important;box-shadow:none!important}
html body #main.kb-home .kb-glossary-copy>span{display:none!important}
html body #main.kb-home .kb-paths{gap:24px!important}
html body #main.kb-home .kb-paths article{background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:12px 0 0!important}
html body #main.kb-home .kb-paths h3{font:600 16px/1.4 var(--sans)!important;margin:0 0 6px!important}
html body #main.kb-home .kb-paths p{font-size:14px!important;line-height:1.55!important;margin:0 0 8px!important}
html body #main.kb-home .kb-paths article>a{font-size:14px!important;padding:10px 0!important;min-height:44px;box-sizing:border-box}
html body #main.kb-home .kb-catalogue{padding-top:18px!important;margin-top:0!important}
html body #main.kb-home .kb-card{background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:12px 0!important;min-height:0!important}
html body #main.kb-home .kb-card-meta{display:none!important}
html body #main.kb-home .kb-card h3{font:600 16px/1.4 var(--sans)!important;margin:0 0 6px!important}
html body #main.kb-home .kb-card p{font-size:14px!important;line-height:1.55!important;margin:0 0 8px!important}
html body #main.kb-home .kb-card:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)!important}
@media(max-width:700px){html body #main:is([data-page=compare],[data-page=notebook])>.intro,html body #main.kb-home .kb-intro{padding-top:16px!important}html body #main.kb-home .kb-paths{gap:16px!important}}
/* Full diagnostic view: the image sets its own frame, without blank strips. */
html body #main#main[data-design-integration] .gallery-stage{height:auto!important;aspect-ratio:auto!important;max-height:none!important}
html body #main#main[data-design-integration] .gallery-stage picture{height:auto!important;display:block!important}
html body #main#main[data-design-integration] .gallery-stage img{position:static!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;max-height:none!important}
html body #main#main[data-design-integration] .integrated-intro .critical-status{border-left:3px solid #a84434!important;padding:8px 12px!important;margin:0 0 10px!important;background:color-mix(in srgb,#a84434 4%,transparent)!important}
html[data-theme=dark] body #main#main[data-design-integration] .integrated-intro .critical-status{border-left-color:#d59081!important}
html body #main#main[data-design-integration] .critical-status .edibility-panel>p{font-size:15px!important;line-height:1.55!important}
/* Compact observation chart; the full table and methodological notes remain available. */
html body #main#main[data-design-integration] .occurrence-panel .section-heading{margin-bottom:10px!important}
html body #main#main[data-design-integration] .occurrence-heading-group{display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:4px 16px!important}
html body #main#main[data-design-integration] .occurrence-heading-group>.eyebrow{flex-basis:100%;margin:0 0 3px!important}
html body #main#main[data-design-integration] .occurrence-heading-group>.section-title{margin:0!important}
html body #main#main[data-design-integration] .occurrence-panel .record-total{display:inline-flex!important;align-items:baseline!important;gap:5px!important;margin:0!important;text-align:left!important;color:var(--muted)!important}
html body #main#main[data-design-integration] .occurrence-panel .record-total :is(strong,span){font:400 13px/1.5 var(--sans)!important;color:inherit!important}
html body #main#main[data-design-integration] .occurrence-panel .record-total strong{font-weight:600!important}
html body #main#main[data-design-integration] .occurrence-panel .chart-intro{max-width:850px!important;margin:0 0 12px!important;font-size:14px!important;line-height:1.55!important}
html body #main#main[data-design-integration] .occurrence-panel .month-chart{width:100%!important;max-width:850px!important;height:auto!important;margin:0 0 12px!important;padding-top:0!important;gap:8px!important}
html body #main#main[data-design-integration] .occurrence-panel .bar-track{height:120px!important}
html body #main#main[data-design-integration] .occurrence-panel .chart-note{max-width:850px!important;margin:8px 0!important;font-size:14px!important;line-height:1.5!important}
/* Fundverlauf 08.11.2026: the GBIF-key note above the chart (51 portraits) had no rule of its own: no bottom margin, so it touched the month counts, and it ran wider than the chart. Same width and type as the intro, even gaps, room for the link underline. */
html body #main#main[data-design-integration] .occurrence-panel .chart-caveat{max-width:850px!important;margin:16px 0!important;font-size:14px!important;line-height:1.55!important}
html body #main#main[data-design-integration] .occurrence-panel .chart-caveat a .link-label241{text-underline-offset:4px!important}
@media(max-width:700px){
html body #main#main[data-design-integration] .occurrence-panel .month-chart{gap:3px!important;padding-top:24px!important}
html body #main#main[data-design-integration] .occurrence-panel .bar-track{height:100px!important}
html body #main#main[data-design-integration] .occurrence-heading-group{gap:4px 12px!important}
}

/* Observation disclosures follow the chart's reading width and stable row rhythm. */
html body #main#main[data-design-integration] .occurrence-panel>.data-details{max-width:850px!important;margin:0!important;padding:0!important;border-bottom:0!important}
html body #main#main[data-design-integration] .occurrence-panel>.data-details>summary{min-height:40px!important;padding:10px 0!important;margin:0!important;font:400 13px/1.5 var(--sans)!important}
html body #main#main[data-design-integration] .occurrence-panel .data-explainer{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;margin:0!important;padding:6px 0 16px 18px!important}
html body #main#main[data-design-integration] .occurrence-panel .data-explainer>div{display:grid!important;grid-template-columns:170px minmax(0,1fr)!important;column-gap:20px!important;row-gap:6px!important;align-items:baseline!important}
html body #main#main[data-design-integration] .occurrence-panel .data-explainer h3{margin:0!important;font:600 13px/1.55 var(--sans)!important;color:var(--ink)!important}
html body #main#main[data-design-integration] .occurrence-panel .data-explainer p{margin:0!important;font:400 14px/1.55 var(--sans)!important}
html body #main#main[data-design-integration] .occurrence-panel .data-explainer>div>a{grid-column:2;font:400 13px/1.5 var(--sans)!important;justify-self:start}
@media(max-width:600px){
html body #main#main[data-design-integration] .occurrence-panel .data-explainer>div{grid-template-columns:1fr!important;gap:4px!important}
html body #main#main[data-design-integration] .occurrence-panel .data-explainer>div>a{grid-column:1}
html body #main#main[data-design-integration] .occurrence-panel>.data-details>summary{min-height:44px!important}
}

html body #main#main[data-design-integration] #quellen#quellen p.source-notes{font-size:14px!important;line-height:1.5!important}

@media screen {
  html body #main#main[data-design-integration] .month-chart .month-value {
    display:block; position:static; visibility:visible; transform:none;
    padding:0; border:0; background:transparent; color:var(--muted);
    font:400 12px/1.25 var(--sans); font-variant-numeric:tabular-nums;
    text-align:center;
  }
  html body #main#main[data-design-integration] .occurrence-panel .month-chart {
    padding-top:0!important;
  }
}
@media screen and (max-width:400px) {
  html body #main#main[data-design-integration] .month-chart .month-value {font-size:11px}
  html body #main#main[data-design-integration] .occurrence-panel .month-chart {gap:1px!important}
}

@media screen and (max-width:360px) {
  html body #main#main[data-design-integration] .month-chart .month-value[data-ungrouped] {font-size:0}
  .month-value[data-ungrouped]::before {content:attr(data-ungrouped);font-size:11px}
}

html body #main#main[data-design-integration] #vertiefung .insight-inline {
 padding-block:10px!important;
}
html body #main#main[data-design-integration] #vertiefung .insight-inline h3 {
 margin:0 0 4px!important;font:600 15px/1.4 var(--sans)!important;
}
html body #main#main[data-design-integration] #vertiefung .insight-inline>p {
 margin:0!important;max-width:72ch;
}

/* Allow full image-source URLs to wrap in the expanded portrait credits. */
#main[data-design-integration] .source-extras .reference-meta > p {
  overflow-wrap: anywhere !important;
}

/* Observation disclosures continue the feature text instead of nesting a heavy card. */
@media screen {
 html body #main#main[data-design-integration] #merkmale .feature-support-panel.feature-observation{margin:0 0 8px!important;padding:0!important;background:none!important;border:0!important}
 html body #main#main[data-design-integration] #merkmale .fieldguide-observation-note{margin:0!important;padding:4px 0 0 18px!important;min-height:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 html body #main#main[data-design-integration] #merkmale .fieldguide-observation-note .observation-heading:not(:has(h3)){display:none!important}
 html body #main#main[data-design-integration] #merkmale .fieldguide-observation-note>:is(.observation-copy,.observation-note){font-size:14px!important;font-weight:400!important;line-height:1.55!important;padding:0!important;margin:0!important;max-width:75ch}
 html body #main#main[data-design-integration] #merkmale .fieldguide-observation-note>.observation-note{margin-top:6px!important;color:var(--muted)!important}
 html body #main#main[data-design-integration] #merkmale .observation-evidence{margin:2px 0 0!important;padding:0!important;background:none!important;border:0!important}
 html body #main#main[data-design-integration] #merkmale .observation-evidence>summary{min-height:36px!important;padding:6px 0!important;box-sizing:border-box;justify-content:flex-start!important;align-items:center!important;font:400 13px/1.5 var(--sans)!important}
 html body #main#main[data-design-integration] #merkmale .observation-evidence>.observation-evidence-panel{position:static!important;inset:auto!important;width:auto!important;max-height:none!important;padding:0 0 6px!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
 html body #main#main[data-design-integration] #merkmale .observation-evidence-panel p{font:400 14px/1.55 var(--sans)!important;margin:0 0 8px!important}
 html body #main#main[data-design-integration] #merkmale .observation-evidence-panel p:last-child{margin-bottom:0!important}
}
@media screen and (pointer:coarse){html body #main#main[data-design-integration] #merkmale .observation-evidence>summary{min-height:44px!important}}
/* Optional odour research belongs to the same compact disclosure stack. */
@media screen {
 html body #main#main[data-design-integration] .fieldguide-features .odour-evidence{margin:0!important;padding:0!important;border-top:1px solid var(--line)!important}
 html body #main#main[data-design-integration] .fieldguide-features .odour-evidence>summary{display:flex;align-items:center;min-height:36px!important;padding:8px 0!important;box-sizing:border-box;font:400 13px/1.4 var(--sans)!important;color:var(--muted)!important}
 html body #main#main[data-design-integration] .fieldguide-features .odour-evidence>p{font:400 14px/1.55 var(--sans)!important;margin:4px 0 8px!important}
}
@media screen and (max-width:700px){html body #main#main[data-design-integration] .fieldguide-features .odour-evidence>summary{min-height:44px!important}}

/* Mobile polish: retain compact content while keeping long labels and photo sets contained. */
@media screen and (max-width:700px){
 html body #main#main[data-design-integration] .portrait-heading>h1,
 html body #main#main[data-design-integration] .portrait-heading>.latin{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:break-word!important;
 }
 /* Five or more photos remain one row; the page itself must never scroll sideways. */
 html body #main#main[data-design-integration] .gallery-thumbs{
  flex-wrap:nowrap!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain;
  scroll-padding-inline:2px;
  padding:3px 2px!important;
  box-sizing:border-box!important;
 }
 html body #main#main[data-design-integration] .gallery-selection{
  flex:1 1 auto!important;
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
 }
 html body #main#main[data-design-integration] .gallery-enlarge,
 html body #main#main[data-design-integration] .portrait-body .actions>.button,
 html body #main#main[data-design-integration] .portrait-secondary-actions>summary{
  min-height:44px!important;
  box-sizing:border-box!important;
 }
 html body #main#main[data-design-integration] .gallery-enlarge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
 }
 html body #main#main[data-design-integration] .portrait-secondary-actions>summary{
  display:flex!important;
  align-items:center!important;
 }
 html body #main#main[data-design-integration] .photo-meta .credit{
  overflow-wrap:anywhere!important;
 }
}
@media screen and (max-width:700px){
 html body #main#main[data-page="register"] .register-row{
  padding:10px 8px!important;
  row-gap:5px!important;
 }
 html body #main#main[data-page="register"] .register-row .coverage-tag{
  padding:2px 6px!important;
  font-size:13px!important;
  line-height:1.4!important;
 }
}

@media (max-width: 600px) {
  html body #main#main[data-design-integration] #namen .names-expand + .names-endnote {
    margin-block-start: 12px !important;
  }
}

/* Give the title and its bibliography separate targets on one line. */
@media screen and (max-width: 760px) {
 html body #main#main[data-design-integration] #quellen li.source-work:has(>.source-title + details.reference-meta) {
  display:block!important;position:relative;min-height:44px;box-sizing:border-box;
  padding:0!important;
 }
 html body #main#main[data-design-integration] #quellen .source-work:has(>.source-title + details.reference-meta)>.source-title {
  display:flex!important;align-items:center;box-sizing:border-box;min-height:44px;
  margin:0 48px 0 0!important;padding:6px 0!important;overflow-wrap:anywhere;
 }
 html body #main#main[data-design-integration] #quellen .source-title + details.reference-meta {
  position:static!important;margin:0!important;padding:0!important;
 }
 html body #main#main[data-design-integration] #quellen .source-work>.source-title + details.reference-meta>summary {
  position:absolute!important;inset:0 0 auto auto;display:grid!important;place-content:center;
  width:44px!important;height:44px!important;box-sizing:border-box;margin:0!important;
  padding:0!important;font-size:0!important;gap:0!important;list-style:none;
 }
 html body #main#main[data-design-integration] #quellen .source-title + details.reference-meta>summary::after {content:none!important}
 html body #main#main[data-design-integration] #quellen .source-title + details.reference-meta>summary::before {
  content:''!important;position:static!important;display:block!important;width:7px!important;height:7px!important;
  background:transparent!important;border:solid currentColor!important;border-width:0 1.5px 1.5px 0!important;
  transform:rotate(45deg)!important;margin:0!important;
 }
 html body #main#main[data-design-integration] #quellen .source-title + details.reference-meta[open]>summary::before {transform:rotate(225deg)!important}
 html body #main#main[data-design-integration] #quellen .source-title + details.reference-meta[open] {padding-bottom:8px!important}
}

/* Shared-control audit: compact visible rhythm, intact labels and focus. */
@media screen {
  /* Truncate only the visual value; aria-labelledby retains its full text. */
  html body #main .styled-select-trigger > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }
  html body #main .styled-select-trigger {
    gap: 12px;
    padding-inline: 12px;
  }
  html body .styled-select-option {
    box-sizing: border-box;
    min-height: 40px;
    padding: 6px 10px;
    gap: 10px;
    line-height: 1.4;
  }
  /* A search with a value must not expand when its clear control appears. */
  html body #main .searchbox input { min-width: 0; }
  html body #main .searchbox .clear-search {
    box-sizing: border-box;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 6px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
  html body #main .searchbox > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
  html body #main .searchbox .clear-search:focus-visible {
    outline: 2px solid var(--focus-ring, var(--ink));
    outline-offset: 1px;
  }
}
@media screen and (pointer: coarse), screen and (max-width: 700px) {
  html body .styled-select-option { min-height: 44px; }
  html body #main .searchbox .clear-search {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin-inline-end: -10px;
  }
}
@media screen{
html body #main .register-search-line{align-items:center!important}
html body #main .register-search-line>.searchbox,
html body #main .register-search-line>.button{box-sizing:border-box!important;height:40px!important;min-height:40px!important;padding-block:0!important;align-items:center!important}
html body #main .register-search-line>.searchbox input{height:100%!important;min-height:0!important;padding-block:0!important}
html body #main #register-clear{min-height:38px!important;padding-block:0!important}
}
@media screen and (pointer:coarse),screen and (max-width:700px){
html body #main .register-search-line>.searchbox,
html body #main .register-search-line>.button{height:44px!important;min-height:44px!important}
html body #main #register-clear{min-height:42px!important}
}
@media screen and (hover:hover) and (pointer:fine){
html:root body .header .nav-more225-panel>a:hover{
 background:color-mix(in srgb,var(--ink) 6%,transparent)!important;
 box-shadow:none!important;
 text-decoration:none!important;
}
}
@media screen{
html:root body .header .nav-more225>summary,
html:root body .header .nav-more225-panel>a{transition:background-color 120ms ease!important}
}
@media(prefers-reduced-motion:reduce){
html:root body .header .nav-more225>summary,
html:root body .header .nav-more225-panel>a{transition:none!important}
}

/* The trigger already paints its rounded surface through ::before. */
@media screen{
html:root body .header .nav .nav-more225>summary{background:transparent!important;box-shadow:none!important}
html:root body .header .nav .nav-more225>summary::before{transition:background-color 120ms ease!important}
}
@media screen and (hover:hover) and (pointer:fine){
html:root body .header .nav .nav-more225>summary:hover{background:transparent!important;--nav-surface:color-mix(in srgb,var(--ink) 6%,transparent)}
}
@media(prefers-reduced-motion:reduce){html:root body .header .nav .nav-more225>summary::before{transition:none!important}}
/* Expanded mobile utilities are menu rows, not header icon buttons. */
@media screen{
html:root body .header .nav-more225-tools{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:0!important}
html:root body .header .nav-more225-tools>:is(.header-glossary,.theme-toggle){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;height:auto!important;min-height:48px!important;padding:10px 20px!important;border:0!important;border-radius:0!important;border-top:1px solid var(--line)!important;background:transparent!important;box-shadow:none!important;font:400 15px/1.4 var(--sans)!important;white-space:normal!important;text-align:left!important}
html:root body .header .nav-more225-tools>:is(.header-glossary,.theme-toggle)::before{display:none!important;content:none!important}
html:root body .header .nav-more225-tools .glossary-label{display:inline!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;font:inherit!important}
html:root body .header .nav-more225-tools .theme-toggle::after{position:static!important;inset:auto!important;width:auto!important;height:auto!important;min-width:0!important;flex:1!important;transform:none!important;background:none!important;border:0!important;font:inherit!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important}
html:root body .header .nav-more225-tools :is(.glossary-symbol,.theme-symbol){flex:0 0 19px!important;width:19px!important;height:19px!important}
}
/* Shared feedback for the quiet portrait controls and disclosure rows. */
@media screen and (hover:hover) and (pointer:fine){
html body #main[data-design-integration] :is(.feature-action,.gallery-enlarge,.portrait-body .button,details>summary):hover{
 background:color-mix(in srgb,var(--ink) 5%,transparent)!important;
 color:var(--ink)!important;
 border-radius:4px;
}
html body #main[data-design-integration] .gallery-thumbs>button:not([aria-pressed=true]):hover{border-color:var(--muted)!important;background:color-mix(in srgb,var(--ink) 5%,transparent)!important}
html body #main[data-design-integration] a[href]:hover{color:var(--ink)!important;text-decoration:underline;text-underline-offset:3px}
html:root body .header .nav-more225-tools>:is(.header-glossary,.theme-toggle):hover{background:color-mix(in srgb,var(--ink) 6%,transparent)!important}
}
@media screen{
html body #main[data-design-integration] :is(.feature-action,.gallery-enlarge,.portrait-body .button,details>summary,.gallery-thumbs>button):focus-visible{
 outline:2px solid var(--muted)!important;outline-offset:2px!important;
}
html:root body .header .nav-more225-tools>:is(.header-glossary,.theme-toggle):focus-visible{outline:2px solid var(--muted)!important;outline-offset:-3px!important}
}
/* Single navbar state system: soft sage hover, persistent selected surface. */
@media screen{
html:root body .header.header{--nav-hover-fill:#e7e9eb;--nav-selected-fill:#dadde1;--nav-pressed-fill:#d1d5d9}
html:root[data-theme=dark] body .header.header{--nav-hover-fill:#232932;--nav-selected-fill:#2f353d;--nav-pressed-fill:#3a4149}
html:root body .header.header :is(.nav>a,.nav-more225>summary,.header-glossary,.header-search,.theme-toggle){background:transparent!important;box-shadow:none!important;--nav-surface:transparent!important;--nav-edge:transparent!important;text-decoration:none!important;transition:color 140ms ease!important}
html:root body .header.header :is(.nav>a,.nav-more225>summary,.header-glossary,.header-search,.theme-toggle)::before{background:var(--nav-surface)!important;border:0!important;border-radius:6px!important;inset:6px 2px!important;transition:background-color 140ms ease!important;pointer-events:none!important}
html:root body .header.header .nav>a:is(.active,[aria-current=page]),html:root body .header.header .nav-more225[open]>summary{--nav-surface:var(--nav-selected-fill)!important;color:var(--ink)!important}
html:root body .header.header :is(a,button,summary):focus-visible{outline:2px solid var(--muted)!important;outline-offset:2px!important}
html:root body .header.header .nav-more225-panel>a{border-radius:4px!important;text-decoration:none!important}
html:root body .header.header .nav-more225-panel>a:is(.active,[aria-current=page]){background:var(--nav-selected-fill)!important}
}
@media screen and (hover:hover) and (pointer:fine){
html:root body .header.header :is(.nav>a,.nav-more225>summary,.header-glossary,.header-search,.theme-toggle):hover{--nav-surface:var(--nav-hover-fill)!important;color:var(--ink)!important;background:transparent!important}
html:root body .header.header .nav>a:is(.active,[aria-current=page]):hover,html:root body .header.header .nav-more225[open]>summary:hover{--nav-surface:var(--nav-selected-fill)!important}
html:root body .header.header .nav-more225-panel>a:hover,html:root body .header.header .nav-more225-tools>:is(.header-glossary,.theme-toggle):hover{background:var(--nav-hover-fill)!important;text-decoration:none!important}
}
html:root body .header.header :is(.nav>a,.nav-more225>summary,.header-glossary,.header-search,.theme-toggle):active{--nav-surface:var(--nav-pressed-fill)!important}
@media(prefers-reduced-motion:reduce){html:root body .header.header :is(.nav>a,.nav-more225>summary,.header-glossary,.header-search,.theme-toggle),html:root body .header.header :is(.nav>a,.nav-more225>summary,.header-glossary,.header-search,.theme-toggle)::before{transition:none!important}}
/* Stable, shared evidence controls: no separate open-state surface or moving label. */
html body #main#main[data-design-integration] details.quiet-evidence{padding:0!important;background:transparent!important;box-shadow:none!important}
html body #main#main[data-design-integration] details.quiet-evidence>summary{display:flex!important;align-items:center!important;gap:8px!important;box-sizing:border-box!important;width:fit-content!important;max-width:100%!important;min-height:36px!important;margin:0!important;padding:8px 6px!important;border:0!important;border-radius:4px!important;background:transparent!important;box-shadow:none!important;color:var(--muted)!important;font:400 13px/1.45 var(--sans)!important;text-decoration:none!important;list-style:none!important;cursor:pointer;transform:none!important}
html body #main#main[data-design-integration] details.quiet-evidence>summary::-webkit-details-marker{display:none}
html body #main#main[data-design-integration] details.quiet-evidence>summary::after{content:none!important}
html body #main#main[data-design-integration] details.quiet-evidence>summary::before{content:''!important;display:block!important;position:static!important;flex:0 0 5px!important;width:5px!important;height:5px!important;margin:0 3px 0 1px!important;border:0!important;border-right:1px solid currentColor!important;border-bottom:1px solid currentColor!important;background:none!important;transform:rotate(-45deg)!important}
html body #main#main[data-design-integration] details.quiet-evidence[open]>summary::before{transform:rotate(45deg)!important}
html body #main#main[data-design-integration] details.quiet-evidence>summary:focus-visible{outline:2px solid var(--muted)!important;outline-offset:2px!important}
@media(hover:hover) and (pointer:fine){html body #main#main[data-design-integration] details.quiet-evidence>summary:hover{color:var(--ink)!important;background:color-mix(in srgb,var(--ink) 5%,transparent)!important}}
html body #main#main[data-design-integration] details.quiet-evidence>summary:active{background:color-mix(in srgb,var(--ink) 7%,transparent)!important}
html body #main#main[data-design-integration] .comparison-scope>details.quiet-evidence>p{margin:4px 0 10px!important;padding-left:24px!important;max-width:80ch;font:400 13px/1.55 var(--sans)!important;color:var(--muted)}
@media(max-width:700px){html body #main#main[data-design-integration] details.quiet-evidence>summary{min-height:44px!important}}
/* Name evidence is a quiet continuation of its language row. */
html body #main#main[data-design-integration] #namen .names-refined-evidence .names-proof{border:0!important;border-top:1px solid var(--line)!important;background:transparent!important;padding:8px 12px 12px!important}
html body #main#main[data-design-integration] #namen .names-refined-evidence .names-actions{display:flex!important;gap:8px!important;margin:0 0 6px!important;padding:0!important}
html body #main#main[data-design-integration] #namen .names-refined-evidence .names-actions button{display:inline-flex!important;align-items:center;gap:6px;min-height:32px;padding:4px 0!important;font:400 13px/1.4 var(--sans)!important;color:var(--muted);border:0;background:none;text-decoration:none!important}
html body #main#main[data-design-integration] #namen .names-refined-evidence .names-actions svg{display:block!important;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
html body #main#main[data-design-integration] #namen .names-refined-evidence .names-proof-label{display:none!important}
html body #main#main[data-design-integration] #namen .names-refined-evidence .name-primary-source{padding:0!important;border:0!important}
html body #main#main[data-design-integration] #namen .names-refined-evidence .name-source{font:400 13px/1.5 var(--sans)!important}
/* Strong meaning, restrained surface: retain the warning before the description. */
html body #main#main[data-design-integration] .integrated-intro .critical-status{background:transparent!important;border-left-width:2px!important;border-left-color:color-mix(in srgb,#a84434 55%,var(--line))!important;padding:6px 10px!important;margin-bottom:8px!important}
html[data-theme=dark] body #main#main[data-design-integration] .integrated-intro .critical-status{border-left-color:color-mix(in srgb,#d59081 60%,var(--line))!important}

/* Filter heading belongs to the interface hierarchy, not the editorial titles. */
html body #filters .filter-top h2{font:600 16px/1.4 var(--sans)!important;letter-spacing:0!important;margin:0!important;color:var(--ink)!important}

/* Glossary categories are navigation labels, not editorial serif headings. */
html body .learning-dialog .glossary-group-title{font:600 14px/1.45 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;margin:0!important;padding:14px 0 8px!important}

/* A shared reading rhythm for the glossary and its source disclosures. */
html body #glossary-dialog .glossary-list{padding:0 20px 12px!important;scrollbar-gutter:stable;min-width:0}
html body #glossary-dialog .glossary-list article{padding:14px 0!important;margin:0!important;scroll-margin-top:12px}
html body #glossary-dialog .glossary-list article h3{font:600 16px/1.4 var(--sans)!important;margin:0 0 6px!important;letter-spacing:0!important}
html body #glossary-dialog .glossary-list article>p{font:400 15px/1.55 var(--sans)!important;margin:0!important;hyphens:none!important;overflow-wrap:break-word}
html body #glossary-dialog .glossary-references{margin:6px 0 0!important;padding:0!important;border:0!important;background:none!important}
html body #glossary-dialog .glossary-references>summary{font:400 13px/1.45 var(--sans)!important;min-height:36px!important;padding:8px 0!important;margin:0!important;color:var(--muted)!important;box-sizing:border-box;text-decoration:none!important}
html body #glossary-dialog .glossary-references>ul{margin:2px 0 0!important;padding:0 0 0 18px!important;list-style:none!important}
html body #glossary-dialog .glossary-references li{font:400 13px/1.5 var(--sans)!important;margin:0!important;padding:6px 0!important;overflow-wrap:anywhere}
html body #glossary-dialog .glossary-references li+li{border-top:1px solid var(--line)}
html body #glossary-dialog .glossary-references a{font:inherit!important;margin:0!important;display:inline!important}
html body #glossary-dialog .glossary-list article>.glossary-figure-note{font-size:13px!important;line-height:1.5!important;color:var(--muted)!important;margin-top:8px!important}
html body #glossary-dialog .glossary-shapes{margin:10px 0 0!important;gap:8px!important}
html body #glossary-dialog .glossary-shapes figcaption{font:600 13px/1.4 var(--sans)!important}
@media(max-width:700px){
html body #glossary-dialog .glossary-list{padding:0 14px 12px!important}
html body #glossary-dialog #glossary-search{font-size:16px!important}
html body #glossary-dialog .glossary-references>summary{min-height:44px!important;padding:12px 0!important}
}

html body #main#main[data-design-integration] .names-refined-evidence .names-actions{display:flex!important;flex-wrap:wrap!important;gap:4px 16px!important}
html body #main#main[data-design-integration] .names-actions .names-copy svg{display:block!important;width:15px!important;height:15px!important;flex:none;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
html body #main#main[data-design-integration] .names-actions .names-copy span{overflow-wrap:anywhere;text-align:left}

/* Copy belongs beside its name, independent of the evidence disclosure. */
html body #main#main[data-design-integration] .names-original{display:flex!important;align-items:center!important;gap:2px!important;min-width:0}
html body #main#main[data-design-integration] .names-original .names-copy-inline{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 28px!important;width:28px!important;height:28px!important;min-height:28px!important;margin:-4px 0!important;padding:6px!important;border:0!important;border-radius:4px!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important;vertical-align:middle}
html body #main#main[data-design-integration] .names-copy-inline svg{display:block!important;width:15px!important;height:15px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) {
  html body #main#main[data-design-integration] .names-original .names-copy-inline:hover {
    background:color-mix(in srgb,var(--ink) 8%,transparent)!important;
    color:var(--ink)!important;
  }
}
html body #main#main[data-design-integration] .names-copy-inline:focus-visible{outline:2px solid var(--muted)!important;outline-offset:1px}
@media(pointer:coarse){html body #main#main[data-design-integration] .names-original .names-copy-inline{width:36px!important;height:36px!important;flex-basis:36px!important;margin:-6px 0!important}}

html body #main#main[data-design-integration] .names-original .names-copy-inline{position:static!important;inset:auto!important;opacity:1!important;visibility:visible!important;transform:none!important}
html body #main#main[data-design-integration] .names-original .names-name{flex:0 1 auto!important;min-width:0!important}

html body #main#main[data-design-integration] .names-entry:not([open]) .names-original .names-copy-inline {
  display:none!important;
}

/* In expanded entries, reveal each action on hover or focus on desktop. */
@media (hover:hover) and (pointer:fine) and (not (any-pointer:coarse)) {
  html body #main#main[data-design-integration] .names-original .names-copy-inline {
    opacity:0!important;
  }
  html body #main#main[data-design-integration] .names-original:is(:hover,:focus-within) .names-copy-inline {
    opacity:1!important;
  }
}
html body #main#main[data-design-integration] .names-original .names-copy-inline svg {
  opacity:.82;
}

/* The section title and current location form one disclosure control. */
@media (hover:hover) and (pointer:fine) {
  html body #main#main[data-design-integration] .fieldguide-navigation > summary:hover {
    background-color:color-mix(in srgb,var(--ink) 5%,var(--paper))!important;
  }
}
html body #main#main[data-design-integration] .fieldguide-navigation > summary:active {
  background-color:color-mix(in srgb,var(--ink) 9%,var(--paper))!important;
}
html body #main#main[data-design-integration] .fieldguide-navigation > summary:focus-visible {
  outline:2px solid var(--muted);
  outline-offset:-2px;
}

.pair-editor {margin-block:8px 16px;border-block:1px solid var(--line)}
.pair-editor>summary {cursor:pointer;padding:10px 0;font:600 14px/1.45 var(--sans)}
.pair-editor[open] {padding-bottom:12px}
html body #filters .filter-group legend {width:100%;margin:0}
html body #filters .filter-group legend::after {content:none}
#filters .filter-group-toggle {display:inline-flex;align-items:center;gap:8px;max-width:90%;min-height:44px;padding:4px 0;background:transparent;border:0;color:var(--ink);font:600 14px/1.4 var(--sans);text-align:left;cursor:pointer}
.filter-group-toggle:before {content:'';width:6px;height:6px;flex:none;border:solid currentColor;border-width:0 1px 1px 0;transform:rotate(-45deg)}
.filter-group-toggle[aria-expanded=true]:before {transform:rotate(45deg)}
.filter-selection-summary {font:400 13px/1.4 var(--sans);color:var(--muted)}
html body #filters .filter-group {padding-block:0!important;margin-block:0!important}
html body #filters .filter-group>div[hidden] {display:none!important}
@media screen {
 html body #main.guided-identification form.guided-question.has-selection .guided-submit-bar {
   position:sticky!important;bottom:0;z-index:4;background:var(--paper)!important;
   border-top:1px solid var(--line);padding:6px 0 max(6px,env(safe-area-inset-bottom))!important;
 }
}
html body #main#main[data-design-integration] .edibility-panel .status-evidence-content:not([hidden]) {padding:0!important;margin:0!important}
html body #main#main[data-design-integration] .status-evidence-content .status-citation-links {display:flex!important;flex-wrap:wrap;align-items:center;gap:2px 12px!important;margin:0!important;padding:2px 0!important;border:0!important}
html body #main#main[data-design-integration] .status-evidence-content .status-citation-label {display:none!important}
html body #main#main[data-design-integration] .status-citation-links :is(ul,li) {display:contents!important}
html body #main#main[data-design-integration] .status-citation-links a {display:inline-flex!important;align-items:center;min-height:28px!important;padding:2px 0!important;margin:0!important;font-size:13px!important}

main .section-link-target {scroll-margin-block-start:64px}
main a.section-permalink {
  display:inline;position:relative;margin-inline-start:0!important;padding-inline-start:.375rem!important;vertical-align:.14em;
  font-size:.62em;font-weight:400;line-height:1;color:var(--muted);
  text-decoration:none;border:0;background:none;opacity:0;
}
main a.section-permalink::after {content:"";position:absolute;inset:-6px -4px}
main :is(h2,h3,h4,h5,h6,dt):hover>a.section-permalink,
main a.section-permalink:focus-visible {opacity:.75}
main a.section-permalink:hover {opacity:1;color:var(--ink)}
@media (hover:none) {main a.section-permalink {opacity:.4}}
@media print {main a.section-permalink {display:none}}

main summary:hover a.section-permalink {opacity:.75}
main summary a.section-permalink {
  display:inline-flex; align-items:center; justify-content:flex-start;
  min-inline-size:24px; min-block-size:24px; vertical-align:middle;
  z-index:1; pointer-events:auto;
}

/* Lesson navigation scrolls with the page. Give shared headings one inset. */
html:has(main.kb-lesson) {scroll-padding-block-start:20px}
main.kb-lesson .section-link-target {scroll-margin-block-start:0}
/* Chart and section title links share the inline heading treatment. */
html body main :is(h2,h3,h4,h5,h6,dt) > a.section-permalink {
  display:inline; margin:0!important; padding:0 0 0 .375rem!important;
  text-decoration:none; background:transparent; border:0; box-shadow:none;
}
/* The compact portrait section menu already supplies these destinations. */
@media screen and (max-width:820px) {
  html body main[data-page="species"] :is(h2,h3,h4,h5,h6,dt) > a.section-permalink {
    display:none;
  }
}
.slip-print-dialog .slip-print-close {display:grid;place-items:center;padding:0;line-height:1}
.slip-print-close svg {display:block;pointer-events:none}
@media (hover:hover) {
  body :is(.slip-print-options,.slip-menu-panel) button[data-print-label]:hover,
  .slip-print-dialog .slip-print-close:hover {
    background:color-mix(in srgb,var(--ink) 7%,var(--paper));
    border-color:color-mix(in srgb,var(--ink) 30%,var(--line));
  }
}
body :is(.slip-print-options,.slip-menu-panel) button[data-print-label]:active,
.slip-print-dialog .slip-print-close:active {
  background:color-mix(in srgb,var(--ink) 12%,var(--paper));
}

/* Follow the centered content column while keeping the header background full width. */
@media (min-width:1200px) {
  body:has(main[data-page="atlas"]) header.header {--nav-content-inset:48px}
  body:has(main[data-page="species"]) header.header {--nav-content-inset:min(3vw,40px)}
  body:has(main:is([data-page="atlas"],[data-page="species"])) header.header {
    padding-inline:calc((100% - 1200px)/2 + var(--nav-content-inset))!important;
  }
}
@media (min-width:1600px) {
  body:has(main[data-page="atlas"]) header.header {--nav-content-inset:0px}
}
@media screen and (max-width:700px) {
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar {
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:8px;
  }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar>.sorting-tools {grid-area:1/1}
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar>.density-picker {grid-area:1/2;justify-self:end}
}

#results .atlas-feature-line {display:none}
#results.list-view .atlas-feature-line {
  display:block;margin:4px 0 0;font:400 .9375rem/1.4 var(--sans);color:var(--ink);
}
@media screen and (min-width:501px) and (max-width:559px) {
  html:root body .header .nav {justify-content:flex-end!important}
}

/* The query and its clear action already sit in the search field. */
#main[data-page="atlas"] #active-filters [data-remove-filter="q"],
#main[data-page="atlas"] .active-filter-bar:has([data-remove-filter="q"]):not(:has([data-remove-filter]:not([data-remove-filter="q"]))) {
  display:none!important;
}

/* The disclosure wrapper must let choices participate in the fieldset's grid. */
#filters .filter-group > [id^="filter-options-"]:not([hidden]) {display:contents}
.mobile-filter-dialog #filters .filter-group legend {padding-block:2px}
.mobile-filter-dialog #filters .filter-group:has([aria-expanded="true"]) {padding-bottom:12px!important}
.mobile-filter-dialog #filters .filter-group label:focus-within {outline:2px solid var(--ink);outline-offset:1px}
@media (hover:hover) {
  .mobile-filter-dialog #filters label:hover {border-color:var(--muted)}
}

.mobile-filter-dialog .filter-dialog-head [data-reset="traits"] {
  margin-inline-start: auto;
  font-size: .8125rem;
}
html .mobile-filter-dialog .filter-dialog-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: .5rem;
}
.mobile-filter-dialog .filter-dialog-foot > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
}
html .mobile-filter-dialog .filter-dialog-foot:has(.filter-next-trait[hidden]) {
  grid-template-columns: 1fr;
}
.mobile-filter-dialog .filter-dialog-foot > button {
  width: 100%;
  padding-inline: .375rem;
  font-size: .875rem;
  border-radius: 4px;
}
.filter-next-trait::after {
  content: "";
  display: inline-block;
  width: .36em;
  height: .36em;
  margin-inline-start: .5em;
  vertical-align: .1em;
  border-block-start: 1.5px solid;
  border-inline-end: 1.5px solid;
  transform: rotate(45deg);
}
.filter-next-trait {
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: transparent;
  border: 1px solid var(--control-border);
  border-radius: 4px;
  cursor: pointer;
}
.filter-next-trait:hover { background: color-mix(in srgb,currentColor 6%,transparent); }
.filter-next-trait[hidden] { display: none; }

#main[data-page="atlas"] .active-filter-bar:has([data-remove-filter]:not([data-remove-filter="q"])) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .25rem .65rem;
  margin: .4rem 0 .6rem;
}
#main[data-page="atlas"] #active-filters button[data-remove-filter] {
  background: color-mix(in srgb,currentColor 7%,transparent);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: .375rem;
  min-height: 32px;
  padding: .25rem .55rem;
  font-weight: 500;
}
#main[data-page="atlas"] #active-filters button[data-remove-filter]:hover {
  background: color-mix(in srgb,currentColor 12%,transparent);
}
#main[data-page="atlas"] .active-filter-bar:has([data-remove-filter]:only-child) .reset-all,
#main[data-page="atlas"] .active-filter-bar:has(#active-filters[hidden]) {display:none}

/* Let the reset action share the last line of selected traits. */
#main[data-page="atlas"] .active-filter-bar #active-filters:not([hidden]) {
  display: contents;
}
#main[data-page="atlas"] .active-filter-bar:has([data-remove-filter]:not([data-remove-filter="q"])) {
  gap: .25rem .375rem;
}
#main[data-page="atlas"] #active-filters button[data-remove-filter] {
  max-inline-size: 100%;
  white-space: normal;
  font-size: .875rem;
  line-height: 1.25;
}
#main[data-page="atlas"] .active-filter-bar .reset-all {
  min-height: 32px;
  font-size: .875rem;
}

html .filter-modal-layer .mobile-filter-dialog[open] {
  height: min(44rem, 90dvh);
}
html .filter-modal-layer .mobile-filter-dialog .filter-dialog-foot > button {
  min-height: max(48px, 3em);
  padding: .25rem .375rem;
  font-size: .875rem;
  line-height: 1.2;
}
html .filter-modal-layer .mobile-filter-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
html .filter-modal-layer .filter-dialog-body {
  overflow-y: auto;
  min-height: 0;
}

@media (min-width: 700px) {
  #main[data-page="atlas"] .atlas-search { margin-block-end: .75rem; }
  html body #main[data-page="atlas"] .workspace .atlas-result-controls,
  #main[data-page="atlas"] .atlas-result-controls .toolbar { padding-block-start: 0; }
}

@media (max-width: 380px) {
  html:root body #main[data-page="atlas"] .sorting-tools:has(#sort-direction:not([hidden])) .styled-select-trigger {
    padding-inline: 6px;
    gap: 4px;
  }
  html:root body #main[data-page="atlas"] .sorting-tools:has(#sort-direction:not([hidden])) .styled-select-trigger > span {
    white-space: normal;
    line-height: 1.12;
    text-align: start;
    text-overflow: clip;
  }
}

/* Header and content share the same edges within each layout band. */
html:root body header.header.header {
  --bar-height:52px;
  box-sizing:border-box!important;
  height:var(--bar-height)!important;
  min-height:var(--bar-height)!important;
  padding-block:0!important;
}
@media (min-width:560px) {html:root body header.header.header {--bar-height:60px}}
@media (min-width:1101px) {html:root body header.header.header {--bar-height:68px}}
@media (max-width:419px) {
  html:root body header.header.header {padding-inline:8px!important}
}
@media (min-width:420px) {
  html:root body:has(main[data-page]) header.header.header {
    --page-inset:clamp(20px,4vw,48px);
    padding-inline:calc(max(0px,(100% - 1200px)/2) + var(--page-inset))!important;
  }
  html:root body:has(main[data-page="species"]) header.header.header {--page-inset:min(3vw,40px)}
}
@media (min-width:420px) and (max-width:700px) {
  html:root body:has(main[data-page="atlas"]) header.header.header {--page-inset:calc(16px + clamp(20px,4vw,48px))}
  html:root body:has(main:is([data-page="compare"],[data-page="species"])) header.header.header {--page-inset:16px}
}
@media (min-width:701px) and (max-width:760px) {
  html:root body:has(main[data-page="species"]) header.header.header {--page-inset:4vw}
}
@media (min-width:701px) {
  html body #main[data-page="compare"] {box-sizing:border-box;padding-inline:clamp(20px,4vw,48px)!important}
}
@media (min-width:1600px) {
  html:root body:has(main[data-page="atlas"]) header.header.header {--page-inset:0px}
}
html:root body .header.header :is(.nav>a,.nav-more225>summary,.header-tools>a,.header-tools>button,.header-search) {border-radius:6px!important}
html:root body .header.header .brand.brand-lockup .brand-name {transform:translateY(-2px)!important}
html body #main#main .portrait-reading-bar :is(.fieldguide-navigation,.fieldguide-navigation>summary,.fieldguide-navlinks,.portrait-back-top) {border-radius:4px!important}
html body #filters#filters fieldset.filter-group:not(:last-of-type) {padding-bottom:16px!important;margin-bottom:16px!important}

/* Keep identification text on a common reading edge in Atlas list rows. */
@media screen and (max-width: 600px) {
  html:root body #main #results.list-view .species-card {
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas: "photo body" "photo actions" "reason reason";
    column-gap: .75rem;
  }
  html:root body #main #results.list-view .species-card .card-photo {
    width: 3rem;
    align-self: start;
  }
  html:root body #main #results.list-view .species-card .card-bottom {
    width: auto;
    flex-direction: row;
    justify-content: start;
    justify-self: start;
    gap: .25rem;
  }
}
@media screen and (min-width: 601px) {
  #main #results.list-view .card-body .atlas-feature-line {max-width: 60ch}
}

/* Give each thumbnail a stable place beside the species name. */
html:root body #main #results.list-view .species-card {
  --list-photo-width: clamp(4rem, 17vw, 7rem);
  grid-template-columns: var(--list-photo-width) minmax(0, 1fr) auto;
}
@media (max-width: 600px) {
  html:root body #main #results.list-view .species-card {
    grid-template-columns: var(--list-photo-width) minmax(0, 1fr);
  }
}
html:root body #main #results.list-view .species-card .card-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  align-self: start;
}
html:root body #main #results.list-view .species-card .card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Atlas list: a continuous index with one divider per species. */
@media screen {
  #main #results.list-view {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  html:root body #main #results.list-view .species-card {
    padding: .625rem 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}
@media screen and (min-width: 1000px) {
  html:root body #main #results.list-view .species-card .card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10rem;
    column-gap: 1rem;
    align-items: start;
  }
  #main #results.list-view .card-body > :is(.card-title,.latin,.atlas-feature-line) {
    grid-column: 1;
  }
  #main #results.list-view .card-body > .card-tags {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
  }
}

#results.list-view:has(+ .atlas-table-scroll:not([hidden])) > .species-card {display:none}
.atlas-table-scroll[hidden] {display:none}
.atlas-table-scroll {max-width:100%;min-width:0;overflow-x:auto}
.atlas-table-scroll table {width:100%;border-collapse:collapse;text-align:left;font:inherit}
.atlas-table-scroll :is(td,th) {padding:.55rem .65rem;border-bottom:1px solid var(--line);vertical-align:top}
.atlas-table-scroll thead th {font-size:.85rem;color:var(--muted);white-space:nowrap}
.atlas-table-scroll th button {font:inherit;color:inherit;background:none;border:0;padding:.4rem 0;cursor:pointer}
.atlas-table-scroll th button:hover {text-decoration:underline}
.atlas-table-scroll .card-link {position:static;font-weight:600}
.atlas-table-scroll .card-link::after {display:none}
.atlas-table-scroll p {margin:0;font-size:.875rem}
.atlas-table-scroll .latin {font-style:italic;min-width:8rem}
.atlas-table-scroll .card-bottom {display:flex;flex-direction:column;border:0;padding:0}
@media (max-width:700px) {
  .atlas-table-scroll {
    --name-column: min(39vw, 12rem);
    scroll-padding-inline: .65rem;
  }
  .atlas-table-scroll table {table-layout:fixed;min-width:calc(var(--name-column) + 36rem)}
  .atlas-table-scroll tr > :first-child {
    position:static;
    width:var(--name-column);box-sizing:border-box;background:var(--paper);
    box-shadow:inset -1px 0 var(--line);overflow-wrap:anywhere;hyphens:auto;
  }
  .atlas-table-scroll thead th:first-child button {white-space:normal;text-align:start;line-height:1.25}
  .atlas-table-scroll thead th:first-child {background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
  .atlas-table-scroll thead th:nth-child(2) {width:9rem}
  .atlas-table-scroll thead th:nth-child(3) {width:10rem}
  .atlas-table-scroll thead th:last-child {width:7rem}
}

@media (max-width:700px) {
  html:root body #main[data-page="atlas"] {padding-inline:0!important}
}
.atlas-table-scroll {font-variant-numeric:tabular-nums}
.atlas-table-scroll thead {background:color-mix(in srgb,currentColor 4%,transparent)}
.atlas-table-scroll :is(th,td) + :is(th,td) {border-inline-start:1px solid var(--line)}
.atlas-table-scroll tbody :is(th,td) {font-weight:400;font-size:.875rem;line-height:1.45}
html body .atlas-table-scroll :is(a,button) {text-decoration:none;border-bottom:0}
@media (hover:hover) {
  html body .atlas-table-scroll a:hover {text-decoration:underline;text-underline-offset:.18em}
  .atlas-table-scroll button:hover {background:color-mix(in srgb,currentColor 6%,transparent)}
}
.atlas-table-scroll .atlas-row-action {
  display:block;position:relative;color:inherit;background:transparent;font:inherit;
  border:0;border-radius:3px;padding:.25rem .4rem;cursor:pointer;min-height:32px;
}
.atlas-row-action .toggle-label {display:inline}
.atlas-row-action[aria-pressed=false] .toggle-label > :last-child,
.atlas-row-action[aria-pressed=true] .toggle-label > :first-child {display:none}
.atlas-row-action[aria-pressed=true] {font-weight:600}
@media (pointer:coarse) {.atlas-table-scroll .atlas-row-action {min-height:44px}}

.atlas-table-scroll thead th {vertical-align:middle;line-height:1.25;padding-block:.35rem}
.atlas-table-scroll thead th button {display:inline-flex;align-items:baseline;gap:.3em;font:inherit;color:inherit;white-space:nowrap;padding:.4rem 0}
.atlas-table-scroll .atlas-sort-arrow {font-size:.85em;opacity:.55}
.atlas-table-scroll th[aria-sort] .atlas-sort-arrow {opacity:.95}
.atlas-table-scroll .atlas-feature-line {line-height:1.4;margin-top:.15rem}

.atlas-table-actions {white-space:nowrap}
.atlas-table-scroll .atlas-row-action {
  display:inline-grid;place-items:center;vertical-align:middle;
  inline-size:36px;block-size:36px;padding:0;color:var(--muted);
}
.atlas-table-scroll .atlas-row-action .toggle-label {display:none}
.atlas-row-action svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.atlas-table-scroll .atlas-row-action[aria-pressed=true] {color:var(--ink);background:color-mix(in srgb,currentColor 12%,transparent)}
.atlas-row-action[data-save][aria-pressed=true] svg {fill:currentColor}
@media (pointer:coarse) {.atlas-table-scroll .atlas-row-action {inline-size:44px;block-size:44px}}


/* Complete Atlas metadata may wrap, but must never disappear behind controls. */
@media screen and (min-width:701px) {
  html:root body #main[data-page="atlas"] .atlas-result-controls {display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
  html:root body #main[data-page="atlas"] .atlas-result-controls .atlas-results-meta {flex:1 1 24rem;flex-wrap:wrap;gap:4px 16px}
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar {flex:0 0 auto;margin-inline-start:auto}
  html:root body #main[data-page="atlas"] .atlas-results-meta .atlas-register-bridge {flex:1 1 auto;max-width:none;overflow:visible}
  html:root body #main[data-page="atlas"] #atlas-register-link .link-label241 {white-space:normal;overflow:visible;text-overflow:clip}
  html:root body #main[data-page="atlas"] .atlas-results-meta #result-count {flex:0 1 auto;overflow:visible;text-overflow:clip;white-space:normal}
  html:root body #main[data-page="atlas"] .atlas-result-controls #next-observation:not([hidden]) {flex-basis:100%}
}
/* Flexible title; intact reset and close targets even on a 320px screen. */
html .mobile-filter-dialog .filter-dialog-head {display:grid;grid-template-columns:minmax(0,1fr) max-content 44px;gap:8px;padding:12px;align-items:center}
.mobile-filter-dialog .filter-dialog-head [data-reset="traits"] {white-space:nowrap;hyphens:none;padding-inline:0;margin:0}
html .mobile-filter-dialog .filter-dialog-head .filter-close {width:44px;height:44px;min-width:44px;margin:0}

/* Comparison actions share the available width; focus actions never squeeze their neighbours. */
@media screen {
  html body #main[data-page="compare"] .comparison-tools > :is(button,a) {min-height:44px}
}
@media screen and (max-width:650px) {
  html body #main[data-page="compare"] .comparison-tools {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html body #main[data-page="compare"] .comparison-tools > :is(button,a) {min-width:0;max-width:100%;box-sizing:border-box;min-height:44px;line-height:1.4;hyphens:none;overflow-wrap:normal}
  html body #main[data-page="compare"] .comparison-tools > #save-comparison {justify-self:stretch;width:100%}
  html body #main[data-page="compare"] .comparison-tools > :is(#show-detail-views,.compare-trait-jump) {justify-self:stretch;width:100%;padding:8px 12px;white-space:normal;text-align:center}
}
@media screen and (max-width:480px) {
  html body #main[data-page="compare"] .comparison-tools > :is(#show-detail-views,.compare-trait-jump) {grid-column:1/-1}
}

/* Expanded language evidence stays on the same reading edge as its names. */
@media screen {
 html body #main#main[data-design-integration] #namen .names-refined-evidence .names-proof {
  padding:8px 0 10px!important;background:transparent!important;border-left:0!important;
 }
 html body #main#main[data-design-integration] #namen .names-proof :is(.name-primary-source,.name-source-addition) {
  padding:6px 0!important;margin:0!important;
 }
 html body #main#main[data-design-integration] #namen .names-proof :is(p,li) {
  font-size:14px!important;line-height:1.5!important;margin-block:0 6px!important;
 }
 html body #main#main[data-design-integration] #namen .names-proof :is(.translation-details,.names-meaning-evidence) {
  margin:4px 0 0!important;padding:0!important;background:transparent!important;
 }
 html body #main#main[data-design-integration] #quellen :is(.editorial-audit,.status-reference-context) > :not(summary) {
  margin:0 0 8px!important;padding:4px 0!important;background:transparent!important;
 }
 html body #main#main[data-design-integration] #quellen :is(.reference-meta,.editorial-audit,.status-reference-context) p {
  font-size:14px!important;line-height:1.5!important;margin:0 0 6px!important;
 }
 html body #main#main[data-design-integration] #quellen .source-bib {
  padding:4px 0 8px!important;margin:0!important;background:transparent!important;
 }
 html body #main#main[data-design-integration] .names-language {min-width:0;white-space:nowrap}
}
@media screen and (max-width:380px) {
 html body #main#main[data-design-integration] .names-trigger {
  grid-template-columns:minmax(0,1fr)!important;gap:4px!important;align-items:start!important;
 }
 html body #main#main[data-design-integration] .names-values {gap:6px!important}
}

/* Evidence continues the reading flow without another nested card. */
@media screen {
 html body #main#main[data-design-integration] #vertiefung .insight-reading {
  padding:4px 0 8px 0!important;
 }
 html body #main#main[data-design-integration] #vertiefung .insight-reading>p {
  margin:0 0 8px!important;font-size:15px!important;line-height:1.55!important;
 }
 html body #main#main[data-design-integration] #vertiefung .insight-evidence {
  margin:0!important;padding:0!important;background:none!important;border:0!important;
 }
 html body #main#main[data-design-integration] #vertiefung .insight-evidence-panel {
  padding:2px 0 8px!important;margin:0!important;box-shadow:none!important;
 }
 html body #main#main[data-design-integration] #vertiefung .insight-evidence-panel p {
  font-size:14px!important;line-height:1.5!important;margin:0 0 6px!important;
 }
 html body #main#main .toxin-evidence {
  margin:4px 0 0!important;padding:0!important;background:transparent!important;border:0!important;
 }
 html body #main#main .toxin-evidence>summary {
  display:flex!important;align-items:center!important;min-height:36px!important;box-sizing:border-box;
  margin:0!important;padding:8px 0!important;font:400 13px/1.5 var(--sans)!important;
 }
 html body #main#main .toxin-evidence-panel {
  position:static!important;inset:auto!important;transform:none!important;
  width:auto!important;min-width:0!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:2px 0 8px!important;background:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;
  font:400 14px/1.5 var(--sans)!important;
 }
 html body #main#main .toxin-evidence-panel>p {
  margin:0 0 6px!important;font:inherit!important;
 }
 html body #main#main :is(.toxin-evidence-panel,.insight-evidence-panel)>:last-child {margin-bottom:0!important}
}
@media screen and (max-width:700px) {
 html body #main#main .toxin-evidence>summary {min-height:44px!important}
}

/* Lean header states: quiet ink feedback and an outlined current location. */
@media screen {
 html:root body .header.header.header {
  --nav-lean-accent:#315c47;--nav-lean-line:color-mix(in srgb,var(--ink) 24%,transparent);
 }
 html:root[data-theme=dark] body .header.header.header {--nav-lean-accent:#bcd5c5}
 html:root body .header.header.header :is(.nav>a,.nav-more225>summary,.header-tools>.header-glossary,.header-tools>.header-search,.header-tools>.theme-toggle) {
  --nav-surface:transparent!important;background:transparent!important;box-shadow:none!important;
  text-decoration:none!important;
 }
 html:root body .header.header.header :is(.nav>a,.nav-more225>summary,.header-tools>.header-glossary,.header-tools>.header-search,.header-tools>.theme-toggle)::before {
  background:transparent!important;border:1px solid transparent!important;border-radius:999px!important;
  box-sizing:border-box;transition:border-color 140ms ease!important;
 }
 html:root body .header.header.header .nav>a::after {content:none!important}
 html:root body .header.header.header :is(.nav>a:is(.active,[aria-current=page]),.nav-more225[open]>summary)::before {
  border-color:var(--nav-lean-line)!important;
 }
}
@media screen and (hover:hover) and (pointer:fine) {
 html:root body .header.header.header :is(.nav>a,.nav-more225>summary,.header-tools>.header-glossary,.header-tools>.header-search,.header-tools>.theme-toggle):hover {
  color:var(--nav-lean-accent)!important;--nav-surface:transparent!important;background:transparent!important;
 }
 html:root body .header.header.header :is(.nav>a:is(.active,[aria-current=page]),.nav-more225[open]>summary):hover::before {
  border-color:color-mix(in srgb,var(--nav-lean-accent) 48%,transparent)!important;
 }
}
@media(prefers-reduced-motion:reduce) {
 html:root body .header.header.header :is(.nav>a,.nav-more225>summary)::before {transition:none!important}
}

/* One hover treatment throughout the header, including utilities and menu rows. */
@media screen {
 html:root body .header.header.header.header :is(.brand,.nav>a,.nav-more225>summary,.nav-more225-panel>a,.header-glossary,.header-search,.theme-toggle) {
  background:transparent!important;box-shadow:none!important;--nav-surface:transparent!important;
  text-decoration:none!important;transition:color 140ms ease!important;
 }
 html:root body .header.header.header.header :is(.header-glossary,.header-search,.theme-toggle)::before {
  background:transparent!important;box-shadow:none!important;border-color:transparent!important;
 }
 html:root body .header.header.header.header .nav-more225-panel>a:is(.active,[aria-current=page]) {color:var(--ink)!important;font-weight:600!important}
 html:root body .header.header.header.header :is(.brand,.nav>a,.nav-more225>summary,.nav-more225-panel>a,.header-glossary,.header-search,.theme-toggle):focus-visible {
  outline:2px solid var(--muted)!important;outline-offset:2px!important;
 }
}
@media screen and (hover:hover) and (pointer:fine) {
 html:root body .header.header.header.header :is(.brand,.nav>a,.nav-more225>summary,.nav-more225-panel>a,.header-glossary,.header-search,.theme-toggle):hover {
  color:var(--nav-lean-accent)!important;background:transparent!important;--nav-surface:transparent!important;text-decoration:none!important;
 }
 html:root body .header.header.header.header :is(.brand,.nav>a,.nav-more225>summary,.nav-more225-panel>a,.header-glossary,.header-search,.theme-toggle):hover :is(svg,span) {
  color:inherit!important;text-decoration:none!important;
 }
}
@media(prefers-reduced-motion:reduce) {
 html:root body .header.header.header.header :is(a,button,summary) {transition:none!important}
}

/* Logo hover 08.11.2026: the lockup lights up in the action green of each theme (light: forest, dark: sage-mint), not the greyed nav tint. Hover only; focus keeps ink + ring. */
@media screen {
 html:root body .header.header.header {--brand-hover-ink:var(--action-bg,#1d5c33)}
 html:root[data-theme=dark] body .header.header.header {--brand-hover-ink:var(--inverse-action-bg,#80d3a4)}
}
@media screen and (hover:hover) and (pointer:fine) {
 html:root body .header.header.header.header a.brand.brand-lockup:hover {color:var(--brand-hover-ink)!important}
}

/* Results first; optional guidance opens in place. */
@media screen {
 html body #main[data-page=atlas] #next-observation {
  display:block;margin:4px 0!important;padding:0!important;border:0!important;background:none!important;
 }
 html body #main[data-page=atlas] #next-observation[hidden] {display:none!important}
 html body #main[data-page=atlas] .atlas-suggestions>summary {
  min-height:44px;box-sizing:border-box;padding:12px 0;font:400 14px/20px var(--sans);color:var(--muted);cursor:pointer;
 }
 html body #main[data-page=atlas] .atlas-suggestions-body {padding:0 0 8px;display:grid;gap:8px}
 html body #main[data-page=atlas] .atlas-suggestions-body h2 {font:600 15px/1.4 var(--sans);margin:0 0 4px}
 html body #main[data-page=atlas] .atlas-suggestions-body p {font:400 14px/1.5 var(--sans);margin:0}
 html body #main[data-page=compare][data-comparison-ids]>.intro .eyebrow {display:none}
 html body #main[data-page=compare][data-comparison-ids]>.intro {padding-bottom:8px!important}
 html body #main[data-page=compare] #pair-guide .comparison-focus-heading {font:600 16px/1.4 var(--sans)!important;margin:0 0 10px!important}
}
@media screen {
 html body #main[data-page=atlas] .atlas-suggestions>summary {display:flex;align-items:center;gap:8px;list-style:none}
 html body #main[data-page=atlas] .atlas-suggestions>summary::-webkit-details-marker {display:none}
 html body #main[data-page=atlas] .atlas-suggestions>summary::before {content:''!important;position:static!important;display:block!important;flex:0 0 5px;width:5px;height:5px;margin:0 2px!important;border:0!important;border-right:1px solid currentColor!important;border-bottom:1px solid currentColor!important;transform:rotate(-45deg)!important;background:none!important}
 html body #main[data-page=atlas] .atlas-suggestions[open]>summary::before {transform:rotate(45deg)!important}
 html body #main[data-page=atlas] .atlas-suggestions>summary::after {content:none!important}
}
@media screen {
 html body #main[data-page=compare] .guide-check .paired-warning {display:inline-block;margin-inline-start:8px;color:var(--danger,currentColor);font-size:13px;font-weight:600}
}

/* Rounded outline feedback for navigation, with no movement or double fill. */
@media screen {
 html:root body .header.header.header.header .nav-more225-panel>a {border:0!important;border-radius:999px!important}
}
@media screen and (hover:hover) and (pointer:fine) {
 html:root body .header.header.header.header :is(.nav>a,.nav-more225>summary,.header-glossary,.header-search,.theme-toggle):hover::before {
  border:1px solid color-mix(in srgb,var(--nav-lean-accent) 48%,transparent)!important;
  border-radius:999px!important;background:transparent!important;
 }
 html:root body .header.header.header.header .nav-more225-panel>a:hover:not(:focus-visible) {
  outline:1px solid color-mix(in srgb,var(--nav-lean-accent) 48%,transparent)!important;
  outline-offset:-3px!important;
 }
}

/* Knowledge chapters: compact navigation with full-size hit areas. */
@media screen {
 html body #main.kb-lesson .kb-outline {padding-block:0!important}
 html body #main.kb-lesson .kb-outline summary {
  min-height:44px!important;box-sizing:border-box;padding:12px 0!important;
  font:600 14px/20px var(--sans)!important;
 }
 html body #main.kb-lesson .kb-outline ol {
  margin:0!important;padding:0 0 4px 22px!important;font-size:14px!important;
 }
 html body #main.kb-lesson .kb-outline li {margin:0!important;padding:0!important;break-inside:avoid}
 html body #main.kb-lesson .kb-outline li>a {
  display:flex!important;align-items:center!important;box-sizing:border-box;
  min-height:44px!important;width:100%;padding:8px 4px!important;
  font:400 14px/1.4 var(--sans)!important;
 }

}
@media screen and (max-width:899px) {
 html body #main.kb-lesson .kb-outline {margin-bottom:12px!important;border-bottom:0!important}
 html body #main.kb-lesson .kb-outline ol {columns:1!important}
}
/* Navigation audit: equal hit areas and quiet menu utility outlines. */
@media screen {
 html:root body .header.header.header.header .header-tools>:is(.header-glossary,.theme-toggle) {
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  box-sizing:border-box!important;align-self:center;
 }
 html:root body .header.header.header.header .nav-more225-tools>:is(.header-glossary,.theme-toggle) {border:0!important;border-radius:999px!important}
}
@media screen and (hover:hover) and (pointer:fine) {
 html:root body .header.header.header.header .nav-more225-tools>:is(.header-glossary,.theme-toggle):hover:not(:focus-visible) {
  outline:1px solid color-mix(in srgb,var(--nav-lean-accent) 48%,transparent)!important;
  outline-offset:-3px!important;background:transparent!important;
 }
}

/* Suggestions share the metadata row; disclosure content spans below it. */
@media screen {
 html:root body #main[data-page=atlas] .atlas-result-controls .atlas-results-meta {
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center!important;column-gap:18px!important;row-gap:0!important;
  height:auto!important;min-width:0;flex-basis:100%!important;
 }
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-register-bridge {
  display:block!important;grid-column:1;grid-row:1;max-width:none!important;margin:0!important;overflow:visible;
 }
 html:root body #main[data-page=atlas] .atlas-results-meta #atlas-register-link {display:inline-flex;align-items:center;min-height:44px}
 html:root body #main[data-page=atlas] .atlas-results-meta #result-count {grid-column:3;grid-row:1;margin:0!important;text-align:right;white-space:normal!important}
 html:root body #main[data-page=atlas] .atlas-results-meta #next-observation:not([hidden]),
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-suggestions {display:contents!important}
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-suggestions>summary {
  grid-column:2;grid-row:1;justify-self:start;min-width:0;min-height:44px;
  color:var(--muted);font-size:13px;line-height:20px;padding-block:12px;
  background:transparent!important;text-decoration:none!important;
 }
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-suggestions-body {grid-column:1/-1;grid-row:2;padding:4px 0 12px}
 html:root body #main[data-page=atlas] .atlas-results-meta #next-observation>div {grid-column:1/-1;grid-row:2}
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-suggestions>summary:focus-visible {outline:2px solid var(--muted);outline-offset:2px;border-radius:3px}
}
@media screen and (max-width:700px) {
 html:root body #main[data-page=atlas] .atlas-result-controls .atlas-results-meta {grid-template-columns:auto minmax(0,1fr);column-gap:14px!important}
 html:root body #main[data-page=atlas] .atlas-results-meta #result-count {grid-column:1/-1;grid-row:2;text-align:left!important;margin-bottom:4px!important}
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-suggestions-body,
 html:root body #main[data-page=atlas] .atlas-results-meta #next-observation>div {grid-row:3}
}
@media screen and (hover:hover) and (pointer:fine) {
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-suggestions>summary:hover {
  color:var(--ink)!important;background:transparent!important;text-decoration:underline!important;
  text-decoration-thickness:1px!important;text-underline-offset:3px!important;
 }
}
@media screen {
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-suggestions::details-content {grid-column:1/-1;grid-row:2;min-width:0}
}
@media screen and (max-width:700px) {
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-suggestions::details-content {grid-row:3}
}

/* Narrowing is the first action; metadata shares one quiet type scale. */
@media screen {
 html:root body #main[data-page=atlas] .atlas-result-controls .atlas-results-meta {grid-template-columns:minmax(0,max-content) auto minmax(0,1fr)}
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-suggestions>summary {grid-column:1}
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-register-bridge {grid-column:2;justify-self:start}
 html:root body #main[data-page=atlas] .atlas-results-meta :is(#atlas-register-link,.atlas-suggestions>summary,#result-count) {font:400 13px/20px var(--sans)!important}
 html:root body #main[data-page=atlas] .atlas-results-meta #result-count strong {font-weight:400!important}
 html:root body #main[data-page=atlas] .atlas-results-meta:not(:has(#next-observation:not([hidden]))) .atlas-register-bridge {grid-column:1}
}
@media screen and (max-width:700px) {
 html:root body #main[data-page=atlas] .atlas-result-controls .atlas-results-meta {grid-template-columns:minmax(0,1fr) auto}
}

/* Selected filters follow the control row on the same content edge. */
@media screen {
 html:root body #main[data-page=atlas] .atlas-result-controls {margin-bottom:0!important;padding-bottom:0!important}
 html:root body #main[data-page=atlas] .active-filter-bar:has([data-remove-filter]:not([data-remove-filter=q])) {
  margin:8px 0 12px!important;padding:0!important;gap:8px!important;
  align-items:center;justify-content:flex-start;min-width:0;
 }
 html:root body #main[data-page=atlas] #active-filters button[data-remove-filter] {
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  box-sizing:border-box;min-height:32px;margin:0;padding:5px 9px;
  font:400 13px/20px var(--sans);text-align:left;
 }
 html:root body #main[data-page=atlas] .active-filter-bar .reset-all {margin:0;min-height:32px;padding:5px 4px;font:400 13px/20px var(--sans)}
}
@media screen and (pointer:coarse) {
 html:root body #main[data-page=atlas] #active-filters button[data-remove-filter],
 html:root body #main[data-page=atlas] .active-filter-bar .reset-all {min-height:44px}
}

/* Mobile Atlas: gentle card alignment, with free momentum between cards. */
@media screen and (max-width:600px) and (prefers-reduced-motion:no-preference),
 screen and (max-width:1000px) and (pointer:coarse) and (prefers-reduced-motion:no-preference) {
 html:has(#main[data-page="atlas"] #results:not(.list-view) > .species-card) {
  scroll-snap-type:y proximity;
  scroll-padding-block-start:max(env(safe-area-inset-top, 0px), clamp(8px, 2svh, 16px));
 }
 #main[data-page="atlas"] #results:not(.list-view) > .species-card {
  scroll-snap-align:start;
  scroll-snap-stop:normal;
 }
 /* Keep the toolbar and first result freely reachable in both directions. */
 #main[data-page="atlas"] #results:not(.list-view) > .species-card:first-child {
  scroll-snap-align:none;
 }
}

/* Short landscape viewports favour unrestricted reading over card alignment. */
@media screen and (orientation:landscape) and (max-height:600px) {
 html:has(#main[data-page="atlas"] #results:not(.list-view) > .species-card) {scroll-snap-type:none}
}


/* Saved state: a quiet wash; the filled bookmark and label carry the state. */
html body #main .species-card .card-bottom .card-action[data-save][aria-pressed="true"] {
 background:color-mix(in srgb,var(--ink) 4%,transparent)!important;
 border-color:transparent!important;
 color:var(--ink)!important;
 font-weight:400!important;
}
@media (hover:hover) {
 html body #main .species-card .card-bottom .card-action[data-save][aria-pressed="true"]:hover {
  background:color-mix(in srgb,var(--ink) 8%,transparent)!important;
 }
}

/* Approved chanterelle lockup: optical centring and restrained wordmark spacing. */
html:root body .header.header .brand.brand-lockup {align-items:center!important;gap:5px!important}
html:root body .header.header .brand.brand-lockup .brand-fieldmark {width:38px!important;height:38px!important;flex:0 0 38px!important;transform:none!important}
html:root body .header.header .brand.brand-lockup .brand-name {font:450 23px/1.1 Literata,Georgia,serif!important;letter-spacing:-.025em!important;transform:translateY(-1px)!important}
@media(max-width:600px) {
 html:root body .header.header .brand.brand-lockup {gap:4px!important}
 html:root body .header.header .brand.brand-lockup .brand-fieldmark {width:34px!important;height:34px!important;flex-basis:34px!important}
 html:root body .header.header .brand.brand-lockup .brand-name {font-size:22px!important}
}
/* The previous filled spore mark used path-level fills; this mark is drawn in strokes. */
html:root body .header.header .brand.brand-lockup .brand-fieldmark,
html:root body .header.header .brand.brand-lockup .brand-fieldmark path {fill:none!important;stroke:currentColor!important;stroke-linecap:round;stroke-linejoin:round}
html:root body .header.header .brand.brand-lockup .brand-fieldmark path {stroke-width:2.1!important}
html:root body .header.header .brand.brand-lockup .brand-fieldmark>g>path:first-child {stroke-width:2.5!important}
html:root body .header.header .brand.brand-lockup .brand-fieldmark>g>g path {stroke-width:1.9!important}
/* Match the content gutter once the full mobile lockup has room. */
@media screen and (min-width:421px) and (max-width:600px) {
 html:root body:has(#main[data-page="atlas"]) .header.header {padding-inline:20px!important}
}

/* Atlas final polish: compact metadata on phones, one baseline on wide screens. */
@media screen and (max-width:700px) {
 html:root body #main[data-page=atlas] .atlas-results-meta .atlas-register-bridge {display:none!important}
 html:root body #main[data-page=atlas] .atlas-result-controls .atlas-results-meta:not(:has(#next-observation:not([hidden]))) {min-height:0!important;margin:0!important;padding:0!important}
}
@media screen and (min-width:1000px) {
 html:root body #main[data-page=atlas] .atlas-result-controls:not(:has(#next-observation:not([hidden]))) {
  display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:0 18px!important;
 }
 html:root body #main[data-page=atlas] .atlas-result-controls:not(:has(#next-observation:not([hidden]))) .toolbar {grid-column:3;grid-row:1;margin:0!important;width:auto!important}
 html:root body #main[data-page=atlas] .atlas-result-controls:not(:has(#next-observation:not([hidden]))) .atlas-results-meta {display:contents!important}
 html:root body #main[data-page=atlas] .atlas-result-controls:not(:has(#next-observation:not([hidden]))) .atlas-register-bridge {grid-column:1;grid-row:1}
 html:root body #main[data-page=atlas] .atlas-result-controls:not(:has(#next-observation:not([hidden]))) #result-count {grid-column:2;grid-row:1;white-space:nowrap!important}
}
@media screen and (min-width:1000px) and (max-width:1599px) {
 html:root body #main[data-page=atlas]>.atlas-search {margin-inline:4%!important}
}
@media screen {
 html:root body #main[data-page=atlas] .atlas-result-controls:not(:has(#next-observation:not([hidden]))) {margin-bottom:12px!important}
}

/* Atlas toolbar, 2026-11-07: breathing room inside the view switch and one centre line for the result row. */
html:root body #main[data-page="atlas"] .toolbar .density-picker button,
html:root body #main[data-page="atlas"] .toolbar .density-picker button:hover,
html:root body #main[data-page="atlas"] .toolbar .density-picker button[aria-pressed=true] {
  background: transparent;
}
html:root body #main[data-page="atlas"] .toolbar .density-picker button::before {
  /* The 44 px hit area stays whole; only the painted fill is inset from the outline so the rounded corners never touch it. */
  content: ""; display: block; position: absolute; inset: 3px; border-radius: 2px;
  background: transparent; pointer-events: none;
}
html:root body #main[data-page="atlas"] .toolbar .density-picker button > svg { position: relative; z-index: 1; }
html:root body #main[data-page="atlas"] .toolbar .density-picker button[aria-pressed=true]::before {
  background: color-mix(in srgb, var(--ink) 13%, var(--control-bg));
}
@media (hover: hover) and (pointer: fine) {
  html:root body #main[data-page="atlas"] .toolbar .density-picker button[aria-pressed=false]:hover::before {
    background: color-mix(in srgb, var(--ink) 6%, var(--control-bg));
  }
}
/* Keyboard focus: the ring follows the inset tile (not the 44 px hit area), so it never fuses with the outline of the view switch. */
html:root body #main[data-page="atlas"] .toolbar .density-picker button:focus-visible {
  outline: none;
}
html:root body #main[data-page="atlas"] .toolbar .density-picker button:focus-visible::before {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring, currentColor);
  outline-offset: -2px;
}
@media (forced-colors: active) {
  html:root body #main[data-page="atlas"] .toolbar .density-picker button[aria-pressed=true]::before { background: Highlight; }
  html:root body #main[data-page="atlas"] .toolbar .density-picker button[aria-pressed=true] > svg { color: HighlightText; }
}
/* One row, one centre: the 4 px under the toolbar pushed the controls 2 px above the count and the register link. */
@media screen and (min-width: 1000px) {
  html:root body #main[data-page=atlas] .atlas-result-controls:not(:has(#next-observation:not([hidden]))) .toolbar {
    padding-block-end: 0 !important;
  }
}
/* The divider under the controls sat 1 px below the toggle and the select; give it the same 12 px the search field has above. */
@media screen and (min-width: 701px) {
  html:root body #main[data-page=atlas] .atlas-result-controls { padding-block-end: 12px !important; }
}

/* Navbar pills, 2026-11-07: the label sat only 8 px from the rounded end of the current/hover pill (7 px inside its outline). Give it room to breathe at every width. */
@media screen and (min-width: 1101px) {
  /* Wide padding, equal negative margin: the label positions stay exactly where they were, only the pill grows outward into the gap (gap 20-24 px -> 8-12 px between hit areas). */
  html:root body .header.header.header.header .nav > a,
  html:root body .header.header.header.header .nav > .nav-more225 > summary {
    padding-inline: 16px !important;
    margin-inline: -6px !important;
  }
  /* Forschung keeps its larger lead-in (24 px + the hairline), less the 6 px its own margin already takes back. */
  html:root body .header.header.header.header .nav > a[href="/forschung/"] {
    margin-inline-start: 18px !important;
  }
  /* The hairline stays centred between the Wissen and Forschung pills: 6 px more than the stock offset. */
  html:root body .header.header.header.header .nav > a[href="/forschung/"]::after {
    left: calc(-1 * (var(--nav-gap) + 1.5rem) / 2 + 6px) !important;
  }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  html:root body .header.header.header.header .nav > a,
  html:root body .header.header.header.header .nav > .nav-more225 > summary {
    padding-inline: 16px !important;
  }
}
@media screen and (max-width: 700px) {
  html:root body .header.header.header.header .nav > a,
  html:root body .header.header.header.header .nav > .nav-more225 > summary {
    padding-inline: 14px !important;
  }
}

/* Edibility chips, 2026-11-07: Giftig and Lebensgefährlich giftig carried an extra 1 px inset edge the other chips (Essbar gegart, Ungenießbar, ...) do not have. Same border as the rest; only the red surface differs. */
html body #main[data-page="atlas"] .species-card .edibility-chip:is(.edibility-poisonous, .edibility-deadly) {
  --chip-edge-width: 0px;
}

/* Names block, 2026-11-07: even vertical rhythm. The language row sat 8 px above its divider and the note touched it; the disclosure below left 35 px of dead space. 12 px each side of the divider, 12 px to the disclosure label. */
@media screen {
  html body #main#main#main[data-design-integration] .names-v3 .names-missing {
    margin-top: 8px !important;
    padding: 12px 0 !important;
  }
  html body #main#main#main[data-design-integration] .names-v3 .names-endnote {
    margin: 12px 0 5px !important;
  }
  html body #main#main#main[data-design-integration] .names-v3 .nomenclature-evidence {
    margin-bottom: 0 !important;
  }
}

/* Fundverlauf summary, 2026-11-07: the month range reads as the answer (semi-bold, full ink); "Alle Monatswerte" becomes a quiet disclosure control (secondary colour, no resting underline, underline + ink on hover and keyboard focus, taller hit area). */
@media screen {
  html body #main#main#main .season-summary {
    color: var(--text-secondary, var(--muted));
  }
  html body #main#main#main .season-summary .season-peak {
    color: var(--ink);
    font-weight: 600;
  }
  html body #main#main#main .season-summary a[href="#fundmeldungen"] {
    color: inherit;
    text-decoration: none;
    position: relative;
    border-radius: 3px;
    white-space: nowrap;
  }
  /* Taller touch target without a tall focus ring: the outline hugs the text, the pseudo-element extends only the hit area. */
  html body #main#main#main .season-summary a[href="#fundmeldungen"]::after {
    content: ""; position: absolute; inset: -9px -8px;
  }
  html body #main#main#main .season-summary a[href="#fundmeldungen"] .link-label241 {
    font-size: inherit;
    text-decoration: none !important;
    text-underline-offset: 3px;
  }
  html body #main#main#main .season-summary a[href="#fundmeldungen"]:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring, currentColor);
    outline-offset: 2px;
    color: var(--ink);
  }
  html body #main#main#main .season-summary a[href="#fundmeldungen"]:focus-visible .link-label241 {
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
  }
}
@media screen and (hover: hover) and (pointer: fine) {
  html body #main#main#main .season-summary a[href="#fundmeldungen"]:hover {
    color: var(--ink);
  }
  html body #main#main#main .season-summary a[href="#fundmeldungen"]:hover .link-label241 {
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
  }
}

/* Theme 08.11.2026: GitHub-inspired neutral blue-grey dark, near-neutral light, forest green kept as the accent, seven distinct edibility chips (deadly = solid). Authoritative token block; hard-coded green-grey literals above were remapped at build time. */
@media screen{
:root{--ink:#1f2328!important;--text:#1f2328!important;--text-reading:#1f2328!important;--muted:#59636e!important;--text-secondary:#59636e!important;--paper:#fafaf7!important;--white:#ffffff!important;--line:#dde2e6!important;--page-wash-start:#fafaf7!important;--page-wash-end:#fafaf7!important;--accent:#e3f3e7!important;--danger:#a40e26!important;--control-border:#7d8791!important;--control-border-hover:#59636e!important;--control-bg:#ffffff!important;--control-hover-bg:#f3f5f6!important;--action-bg:#1d5c33!important;--action-hover:#174a29!important;--action-text:#ffffff!important;--inverse-action-bg:#e3f3e7!important;--inverse-action-hover:#d2ecd9!important;--inverse-action-text:#14612a!important;--link:#0969da!important;--focus-ring:#0969da!important;--observation-surface:#f3f5f6!important;--observation-border:#c7ced5!important;--hover-edge:#59636e!important;--hover-surface:#f3f5f6!important;--card-edge:#dde2e6!important;--card-divider:#dde2e6!important;--header-border:#dde2e6!important;--header-text:#1f2328!important;--header-hover:#f3f5f6!important;--atlas-card-wash:transparent!important}
html:root main[data-page="species"]{--tier-deadly:#a40e26!important;--tier-poisonous:#a0201f!important;--tier-disputed:#7a5200!important;--tier-notRecommended:#8a3b00!important;--tier-conditional:#4a5f0a!important;--tier-edible:#14612a!important;--tier-neutral:#4b535c!important}
html body :is(.edibility-badge,.edibility-panel).edibility-edible,html body :is(.edibility-badge,.edibility-panel).edibility-edible :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#14612a!important}
html body :is(.edibility-badge,.edibility-panel).edibility-conditional,html body :is(.edibility-badge,.edibility-panel).edibility-conditional :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#4a5f0a!important}
html body :is(.edibility-badge,.edibility-panel).edibility-disputed,html body :is(.edibility-badge,.edibility-panel).edibility-disputed :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#7a5200!important}
html body :is(.edibility-badge,.edibility-panel).edibility-not-recommended,html body :is(.edibility-badge,.edibility-panel).edibility-not-recommended :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#8a3b00!important}
html body :is(.edibility-badge,.edibility-panel).edibility-inedible,html body :is(.edibility-badge,.edibility-panel).edibility-inedible :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#4b535c!important}
html body :is(.edibility-badge,.edibility-panel).edibility-unknown,html body :is(.edibility-badge,.edibility-panel).edibility-unknown :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#4b535c!important}
html body :is(.edibility-badge,.edibility-panel).edibility-poisonous,html body :is(.edibility-badge,.edibility-panel).edibility-poisonous :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#a0201f!important}
html body :is(.edibility-badge,.edibility-panel).edibility-deadly,html body :is(.edibility-badge,.edibility-panel).edibility-deadly :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#a40e26!important}
:root[data-theme=dark]{--ink:#e6edf3!important;--text:#e6edf3!important;--text-reading:#e6edf3!important;--muted:#9198a1!important;--text-secondary:#9198a1!important;--paper:#0d1117!important;--white:#151b23!important;--line:#30363d!important;--page-wash-start:#0d1117!important;--page-wash-end:#0d1117!important;--accent:#14291d!important;--danger:#ff7b72!important;--control-border:#7d8590!important;--control-border-hover:#b1bac4!important;--control-bg:#212830!important;--control-hover-bg:#262c36!important;--action-bg:#307250!important;--action-hover:#39825c!important;--action-text:#ffffff!important;--inverse-action-bg:#80d3a4!important;--inverse-action-hover:#9be4b9!important;--inverse-action-text:#0b1f14!important;--link:#4493f8!important;--focus-ring:#4493f8!important;--observation-surface:#212830!important;--observation-border:#3d444d!important;--hover-edge:#b1bac4!important;--hover-surface:#262c36!important;--card-edge:#30363d!important;--card-divider:#30363d!important;--header-border:#30363d!important;--header-text:#e6edf3!important;--header-hover:#212830!important;--atlas-card-wash:transparent!important}
:root[data-theme=dark] main[data-page="species"]{--tier-deadly:#ff7b72!important;--tier-poisonous:#ff9a93!important;--tier-disputed:#e3b341!important;--tier-notRecommended:#f0883e!important;--tier-conditional:#bdcf72!important;--tier-edible:#80d3a4!important;--tier-neutral:#b1bac4!important}
html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-edible,html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-edible :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#80d3a4!important}
html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-conditional,html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-conditional :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#bdcf72!important}
html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-disputed,html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-disputed :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#e3b341!important}
html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-not-recommended,html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-not-recommended :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#f0883e!important}
html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-inedible,html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-inedible :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#b1bac4!important}
html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-unknown,html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-unknown :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#b1bac4!important}
html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-poisonous,html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-poisonous :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#ff9a93!important}
html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-deadly,html[data-theme=dark] body :is(.edibility-badge,.edibility-panel).edibility-deadly :is(.edibility-label,.edibility-label-text,.edibility-nuance){color:#ff7b72!important}
}

/* Atlas view switch, 2026-11-08: icon centring. The 19 px icon sat on half pixels inside the 44 x 40/44 px halves (12.5 px / 10.5 px offsets), so the glyph landed 0.5 px off centre at pixel ratio 1 and 2. An even 20 px box gives whole-pixel offsets (12 px, 10 px / 12 px) on every width and DPR. */
html:root body #main[data-page="atlas"] .toolbar .density-picker button > svg {
  width: 20px; height: 20px; flex: none; display: block; margin: 0;
}
/* Edibility chips, 08.11.2026: no inset edge in either theme (dark matched light); the seven tiers differ by tint, text colour and the solid deadly chip. */

/* Atlas view switch, 2026-11-08 (final): ONE definition. The toggle had been restyled in six overlapping rule generations (44 px squares with 12 px padding and 5 px radius, 1 px transparent borders that became visible on hover/pressed, a divider border-left on the second half below 560 px, 11 % hover fills painted over the whole 44 px button, 19 px / 20 px / 1.5 / 1.6 stroke icons, grid vs inline-flex vs inline-grid centring). Which one won depended on width, state and engine, so the halves and icons landed differently. Everything below is stated explicitly, with a specificity above all of them: two equal 44 px halves in an 88 px frame, no borders or padding on the halves, icon absolutely centred in a 20 px box, fills and hover drawn only as the 3 px-inset tile (::before), outline owned by the frame (::after). */
@media screen {
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker {
    position: relative !important; display: flex !important; flex: 0 0 auto !important; gap: 0 !important;
    --density-ring: var(--focus-ring); /* read on the frame, above the per-button override that made the pressed half's ring grey and the other half's blue */
    width: 88px !important; min-width: 88px !important; max-width: 88px !important; box-sizing: border-box !important;
    margin: 0 !important; padding: 0 !important; overflow: hidden !important;
    border: 0 !important; border-radius: var(--control-radius) !important; background: var(--control-bg) !important; box-shadow: none !important;
  }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker::after {
    content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 2 !important;
    border: 1px solid var(--control-border) !important; border-radius: inherit !important; pointer-events: none !important; box-sizing: border-box !important;
  }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button {
    position: relative !important; display: block !important; flex: 0 0 44px !important;
    width: 44px !important; min-width: 44px !important; max-width: 44px !important; box-sizing: border-box !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; transform: none !important; outline: none;
    color: var(--text-secondary, var(--muted)) !important; font-size: 0 !important; line-height: 0 !important;
    -webkit-appearance: none; appearance: none; transition: color 120ms ease;
  }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button[aria-pressed="true"] { color: var(--ink) !important; }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button > svg {
    position: absolute !important; inset: 0 !important; margin: auto !important; z-index: 1 !important;
    display: block !important; width: 20px !important; height: 20px !important; flex: none !important;
    fill: none !important; stroke: currentColor !important; stroke-width: 1.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
    visibility: visible !important; pointer-events: none !important;
  }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button::before {
    content: "" !important; display: block !important; position: absolute !important; inset: 3px !important; z-index: 0 !important;
    border: 0 !important; border-radius: 1px !important; background: transparent !important; box-shadow: none !important;
    pointer-events: none !important; transition: background-color 120ms ease;
  }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button::after { content: none !important; display: none !important; }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button[aria-pressed="true"]::before {
    background: color-mix(in srgb, var(--ink) 13%, var(--control-bg)) !important;
  }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button:focus-visible { outline: none !important; }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button:focus-visible::before {
    outline: var(--focus-ring-width, 2px) solid var(--density-ring, currentColor) !important; outline-offset: -2px !important;
  }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button:active::before {
    background: color-mix(in srgb, var(--ink) 18%, var(--control-bg)) !important;
  }
}
@media screen and (hover: hover) and (pointer: fine) {
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button:hover { color: var(--ink) !important; }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button[aria-pressed="false"]:hover::before {
    background: color-mix(in srgb, var(--ink) 7%, var(--control-bg)) !important;
  }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button[aria-pressed="true"]:hover::before {
    background: color-mix(in srgb, var(--ink) 17%, var(--control-bg)) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button,
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button::before { transition: none !important; }
}
@media (forced-colors: active) {
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button[aria-pressed="true"]::before { background: Highlight !important; }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button[aria-pressed="true"] > svg { stroke: HighlightText !important; }
  html:root body #main[data-page="atlas"] .atlas-result-controls .toolbar .density-picker button > svg { stroke: CanvasText !important; }
}
/* Atlas table on phones, 08.11.2026: no sideways scrolling. Each row becomes a compact stacked entry (name, Latin, Speisewert,
   Lebensraum) with the save/compare buttons at the right edge; the column heads become a small sort bar. Desktop table untouched. */
@media screen and (max-width:700px) {
  html:root body #main[data-page="atlas"] .atlas-table-scroll {
    overflow-x:visible; --act-w:5.75rem; scroll-padding-inline:0;
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll table {
    display:block; width:100%; min-width:0; table-layout:auto;
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll :is(thead,tbody) { display:block }

  /* sort bar */
  html:root body #main[data-page="atlas"] .atlas-table-scroll thead { background:none; margin:0 0 .5rem }
  html:root body #main[data-page="atlas"] .atlas-table-scroll thead tr {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.375rem;
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll thead th {
    display:block; padding:0; border:0; background:none; box-shadow:none; width:auto;
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll thead th:last-child { display:none }
  @media (min-width:480px){ html:root body #main[data-page="atlas"] .atlas-table-scroll thead tr { grid-template-columns:repeat(4,minmax(0,1fr)) } }
  html:root body #main[data-page="atlas"] .atlas-table-scroll thead th button {
    display:flex; align-items:center; justify-content:space-between; gap:.375rem; box-sizing:border-box; width:100%;
    min-height:40px; padding:0 .625rem; border:1px solid var(--line); border-radius:8px;
    background:var(--control-bg,var(--paper)); color:var(--muted); font-size:.8125rem; line-height:1.2; white-space:nowrap;
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll thead th[aria-sort] button {
    color:var(--ink); background:color-mix(in srgb,var(--ink) 8%,var(--control-bg,var(--paper)));
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll thead th button:hover { text-decoration:none }

  /* rows: name / Latin / Speisewert + Lebensraum (the last two share a line when they fit, otherwise Lebensraum wraps below) */
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody tr {
    position:relative; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.625rem;
    min-height:3.5rem; box-sizing:border-box; padding:.4375rem var(--act-w) .4375rem .625rem; border-bottom:1px solid var(--line);
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody :is(th,td) {
    display:block; width:auto; padding:0; border:0; box-shadow:none; background:none; box-sizing:border-box;
    font-size:.875rem; line-height:1.3; overflow-wrap:break-word; hyphens:auto; min-width:0;
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody tr > :first-child { flex:0 0 100%; order:0; font-size:1rem; line-height:1.25 }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody tr > :nth-child(3) { flex:0 0 100%; order:1 }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody tr > :nth-child(2) { flex:0 1 auto; order:2; margin-top:.1875rem; color:var(--ink) }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody tr > :nth-child(4) { flex:0 1 auto; order:3; margin-top:.1875rem; color:var(--muted); font-size:.8125rem }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody tr > .atlas-table-actions {
    position:absolute; inset-block:0 0; inset-inline-end:0; margin:auto 0; height:44px; display:flex; white-space:nowrap; order:4; flex:none;
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll .latin { min-width:0; font-size:.8125rem; color:var(--muted) }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody td.atlas-risk { font-weight:600; color:var(--danger) }

  /* whole text area is the tap target of the name link; the buttons stay separate */
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody .card-link { display:inline }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody .card-link::after {
    display:block; content:""; position:absolute; inset:2px var(--act-w) 2px 0; border-radius:8px;
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody .card-link:active::after {
    background:color-mix(in srgb,var(--ink) 8%,transparent);
  }
  @media (hover:hover) and (pointer:fine) {
    html:root body #main[data-page="atlas"] .atlas-table-scroll tbody .card-link:hover::after { background:color-mix(in srgb,var(--ink) 6%,transparent) }
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody .card-link:focus-visible { outline:none }
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody .card-link:focus-visible::after {
    outline:2px solid var(--focus-ring-color,var(--ink)); outline-offset:-2px;
  }
  html:root body #main[data-page="atlas"] .atlas-table-scroll .atlas-row-action { inline-size:44px; block-size:44px; position:relative; z-index:1 }
}

/* Edibility chips, 08.11.2026: neutral. Same look as the plain tags beside them (Atlas card tag: muted text, muted 8 % surface, regular weight), in light and dark, on every page that shows the chip. Wording, icons, size and padding are unchanged; the tiers are told apart by their words (and the warning/skull icon). */
@media screen{
html body .edibility-chip,
html body .edibility-chip.edibility-edible,html body .edibility-chip.edibility-conditional,html body .edibility-chip.edibility-disputed,html body .edibility-chip.edibility-not-recommended,
html body .edibility-chip.edibility-inedible,html body .edibility-chip.edibility-unknown,html body .edibility-chip.edibility-poisonous,html body .edibility-chip.edibility-deadly{
  --chip-bg:color-mix(in srgb,var(--muted) 8%,transparent)!important;--chip-fg:var(--muted)!important;
  background:color-mix(in srgb,var(--muted) 8%,transparent)!important;color:var(--muted)!important;
  box-shadow:none!important;border-color:transparent!important;font-weight:400!important}
html body .edibility-chip :is(span,strong,b){font-weight:400!important}
}

/* Dark greens 08.11.2026: portrait status card for Essbar follows the (calmer) tier colour. */
@media screen{
:root[data-theme=dark] #main.portrait225 .fieldguide-status-card[data-edibility="edible"]{--status-accent:var(--tier-edible)!important}
}

/* Mobile Atlas: above the first aligned card the page scrolls freely (design-details.js sets data-snap-free), so scrolling up to the toolbar and the page top is never pulled back to a card. */
@media screen and (max-width:600px) and (prefers-reduced-motion:no-preference),
 screen and (max-width:1000px) and (pointer:coarse) and (prefers-reduced-motion:no-preference) {
 html[data-snap-free]:has(#main[data-page="atlas"] #results:not(.list-view) > .species-card) {
  scroll-snap-type:none;
 }
}

/* Jump targets on content pages (8 Nov 2026). The header is not sticky any more, but the old reserves
   (html scroll-padding 100 px, scroll-margin 2-7rem, section 64 px) were kept, so in-page links on these
   pages landed 100-165 px below the top of the screen. Land 20 px below the top, like the chapter sections.
   Portrait, toxin, Atlas, Bestimmen and Vergleich pages keep their own sticky-bar offsets. */
@media screen {
 html:has(main:is([data-page="knowledge"],[data-page="research"],[data-page="register"],[data-page="imprint"],[data-page="privacy"],[data-page="lesson"],.sources-curated,.editorial,.research-dossier)) {scroll-padding-top:20px}
 html body main#main:is([data-page="knowledge"],[data-page="research"],[data-page="register"],[data-page="imprint"],[data-page="privacy"],[data-page="lesson"],.sources-curated,.editorial,.research-dossier) :is([id],section) {scroll-margin-top:0!important}
}

/* Portrait pages: the spacer that lets the last section bar entries reach the top is screen-only. */
@media print {.portrait-tail-space {display:none!important}}

/* ==== ux-audit 11.11.2026 (appended block, no existing rule edited) ==== */

/* 1. Atlas table, desktop: cells vertically centred so the name and the save/compare icons share a line (no colour change) */
@media (min-width:701px){
  html:root body #main[data-page="atlas"] .atlas-table-scroll tbody :is(th,td){vertical-align:middle}
}

/* 2. One content edge: these blocks sat 20px (phone) / 4% (desktop) inside the page title because main already provides the gutter */
@media (max-width:760px){
  html body #main :is(.register-stats,.register-layout,.comparison,.notebook){margin-inline:0}
}

/* 3. Line length: running text capped where it ran 115-160 characters wide on desktop */
html body #main :is(.research-reading-events li,.privacy-facts dd,.toxin-evidence-panel p){max-width:72ch}
html body #main#main.sources-curated section p.credits-note{max-width:72ch}

/* 4. Bestimmen: tile hints were 11-12px, now 13px */
html #main.guided-identification .guided-options :is(small,label:has(.guided-bauform) small){font-size:13px}

/* 6. Portrait load: the page is built by script right after first paint (breadcrumb, section bar, safety row, columns move ~230px). Until that has run the species page body stays invisible (layout kept, header visible); failsafe after 2.5s. Set by a tiny inline script that only exists on species pages; without JS nothing is hidden. */
html[data-di-pending] main[data-page="species"]{visibility:hidden;animation:di-pending-reveal 0s 2.5s forwards}
@keyframes di-pending-reveal{to{visibility:visible}}
@media print{html[data-di-pending] main[data-page="species"]{visibility:visible;animation:none}}

/* 7. Literata as WOFF2 (same glyph data, 955+903 KB TTF -> 397+397 KB). The older TTF @font-face rules above stay as they are; these later rules with the same family/weight/style take precedence. */
@font-face{font-family:Literata;src:url('/assets/fonts/Literata-Roman.woff2') format('woff2'),url('/assets/fonts/Literata-Roman.ttf') format('truetype');font-weight:200 900;font-display:swap}
@font-face{font-family:Literata;src:url('/assets/fonts/Literata-Italic.woff2') format('woff2'),url('/assets/fonts/Literata-Italic.ttf') format('truetype');font-weight:200 900;font-style:italic;font-display:swap}
/* Artporträt hero: one row module for the bottom zone (desktop and tablet, two-column layout).
   Left toolbar, left credit and every right fold-out row are --hero-row tall, centred, with a hairline above;
   both columns end on the footer rule, so rows line up by construction for any number of fold-outs. */
@media screen and (min-width:701px){
html body #main#main[data-design-integration] .integrated-overview{--hero-row:40px;--hero-hole:160px;align-items:stretch!important;row-gap:0!important}
/* left column: stage and thumbs on top, toolbar and credit pinned to the bottom; the spacer may open up to --hero-hole */
html body #main#main[data-design-integration] .integrated-overview>.detail-figure{display:flex!important;flex-direction:column!important;container-type:inline-size!important}
html body #main#main[data-design-integration] .integrated-overview>.detail-figure>.gallery-navigation{display:contents!important;container-type:normal!important}
html body #main#main[data-design-integration] .integrated-overview>.detail-figure::after{content:""!important;display:block!important;order:1!important;flex-grow:var(--hero-hole-grow,1)!important;flex-shrink:1!important;flex-basis:var(--hero-hole-size,0px)!important;min-height:0!important;max-height:var(--hero-hole)!important}
html body #main#main[data-design-integration] .integrated-overview>.detail-figure>:is(.gallery-stage,.gallery-thumbs,.gallery-navigation>.gallery-thumbs){flex:none!important;order:0!important}
html body #main#main[data-design-integration] .integrated-overview .gallery-thumbs{margin:6px 0 0!important}
html body #main#main[data-design-integration] .integrated-overview :is(.detail-figure>.gallery-toolbar,.gallery-navigation>.gallery-toolbar){order:2!important;flex:none!important;grid-auto-rows:var(--hero-row)!important;min-height:var(--hero-row)!important;row-gap:0!important;margin:0!important;padding:0!important;align-items:center!important;background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--hero-row))!important}
html body #main#main[data-design-integration] .integrated-overview>.detail-figure>figcaption{order:2!important;flex:none!important;margin:0!important}
html body #main#main[data-design-integration] .integrated-overview .photo-metas{margin:0!important}
html body #main#main[data-design-integration] .integrated-overview .photo-meta>.credit{min-height:var(--hero-row)!important;margin:0!important;border-top:1px solid var(--line)!important;display:flex!important;align-items:center!important}
/* right column: Merkmale on top, fold-out rows pinned to the bottom */
html body #main#main[data-design-integration] .integrated-overview>.fieldguide-features{display:flex!important;flex-direction:column!important}
html body #main#main[data-design-integration] .integrated-overview>.fieldguide-features>#merkmale{flex:1 1 auto!important;align-self:stretch!important;min-width:0!important;display:flex!important;flex-direction:column!important}
html body #main#main[data-design-integration] .integrated-overview .fieldguide-morphology>.feature-list{margin-bottom:8px!important}
html body #main#main[data-design-integration] .integrated-overview .fieldguide-morphology>.feature-support{margin-top:var(--hero-fold-gap,auto)!important}
html body #main#main[data-design-integration] .integrated-overview .feature-support>.feature-actions>.feature-action{min-height:var(--hero-row)!important;box-sizing:border-box!important}
html body #main#main[data-design-integration] .integrated-overview .fieldguide-features .odour-evidence>summary{min-height:calc(var(--hero-row) - 1px)!important;box-sizing:border-box!important}
/* the footer rule closes the band */
html body #main#main[data-design-integration] .integrated-overview>.portrait-action-footer{margin-top:0!important}
@media (max-width:959px){html body #main#main[data-design-integration] .integrated-overview{--hero-hole:0px}}
}

/* ship-merkmale-label-20261112: the small "Merkmale" label above the trait list is no longer shown.
   The h2 stays in the document (outline, screen readers, #merkmale jump target); only its visible text and the "#" permalink go. */
html body #main#main[data-design-integration] .integrated-overview .fieldguide-morphology>.fieldguide-section-heading{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
html body #main#main[data-design-integration] .integrated-overview .fieldguide-morphology>.fieldguide-section-heading .section-permalink{display:none!important}
/* Portrait hero band: the credit row hairline runs the full column width (the paragraph 70ch reading cap cut it short on wide photo columns). */
@media screen and (min-width:701px){
html body #main#main[data-design-integration] .integrated-overview .photo-meta>.credit{max-width:none!important}
}