/*
Theme Name: Glöckner
Theme URI: https://www.andreasgloeckner.de/
Author: Andreas Glöckner
Description: Persönliche Website von Prof. Dr. Andreas Glöckner – zweisprachig (DE/EN), mit selbst pflegbaren Medienbeiträgen, Vorträgen, Publikationen, Social-Media-Beiträgen, automatischem YouTube-Feed und Kontaktformular. Schriften lokal eingebunden.
Version: 1.7.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gloeckner
*/

/* Layout: asymmetric hero with a live coherence network; sections as a narrow label rail beside wide content. */
:root{
  --paper:#F2F4F6; --panel:#E7EBF0; --ink:#121A24; --muted:#56626F; --line:#D3DAE2;
  --accent:#2C49A8; --accent-ink:#FFFFFF; --signal:#C98612; --ok:#1F7A4D; --err:#B3261E;
  --f-display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body:"Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --step--1:0.84rem; --step-0:1rem; --step-1:1.2rem; --step-2:1.6rem; --step-3:2.2rem; --step-4:clamp(2.4rem, 6vw, 4.4rem);
  --wrap:1120px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --paper:#0E131A; --panel:#151C26; --ink:#E5EAF0; --muted:#97A3B1; --line:#253040;
  --accent:#93A8FF; --accent-ink:#0E131A; --signal:#EDB24A; --ok:#6CCB97; --err:#F2B8B5; color-scheme:dark } }

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto}
a{color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
h1,h2,h3{font-family:var(--f-display); font-weight:500; line-height:1.15; text-wrap:balance; margin:0}
p{margin:0}
[id]{scroll-margin-top:72px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.label{font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted)}
.skip{position:absolute; left:-9999px; top:8px; background:var(--ink); color:var(--paper); padding:8px 12px; z-index:20}
.skip:focus{left:8px}

/* Kopfzeile */
header.top{position:sticky; top:0; z-index:9; background:var(--paper); background:color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top, 0px)}
.admin-bar header.top{top:32px}
@media (max-width:782px){ .admin-bar header.top{top:0; position:relative} }
.top .wrap{display:flex; align-items:center; gap:12px 24px; padding-block:12px; flex-wrap:wrap}
.brand{font-family:var(--f-display); font-size:1.15rem; font-weight:600; color:var(--ink); text-decoration:none; margin-right:auto}
nav.main{display:flex; gap:18px; flex-wrap:wrap}
nav.main a{color:var(--muted); text-decoration:none; font-size:var(--step--1); font-weight:500}
nav.main a:hover, nav.main a[aria-current="page"]{color:var(--ink)}
.lang{display:flex; border:1px solid var(--line); border-radius:999px; padding:2px}
.lang a{font:500 0.75rem var(--f-mono); letter-spacing:0.06em; color:var(--muted); padding:4px 10px; border-radius:999px; text-decoration:none}
.lang a[aria-current="true"]{background:var(--ink); color:var(--paper)}
@media (max-width:860px){ nav.main{order:3; width:100%; gap:16px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; scrollbar-width:none} nav.main a{white-space:nowrap} }

/* Einstieg */
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:48px; padding-block:64px 48px; align-items:center}
.hero-text{min-width:0}
.hero h1{font-size:var(--step-4); font-weight:500; letter-spacing:-0.01em}
.hero .thesis{font-family:var(--f-display); font-style:italic; font-size:var(--step-2); color:var(--accent); margin-top:14px; line-height:1.25}
.hero .lede{margin-top:22px; max-width:62ch}
.hero .eyebrow{margin-bottom:18px}
.paths{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.paths a{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:500; font-size:0.92rem; background:var(--paper)}
.paths a:first-child{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.paths a:hover{border-color:var(--accent)}
.figure{position:relative; display:grid; gap:12px; min-width:0}
.portrait-wrap{position:relative}
.portrait{position:relative; width:100%; aspect-ratio:347/434; border-radius:6px; overflow:hidden; background:var(--panel)}
.portrait img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.02)}
.net{position:absolute; left:-28px; bottom:-28px; width:58%; aspect-ratio:1.25; background:var(--paper); border:1px solid var(--line); border-radius:6px; cursor:pointer; padding:0; display:block}
.net canvas{width:100%; height:100%; display:block}
.net-cap{font-size:var(--step--1); color:var(--muted); max-width:42ch; margin-top:40px; margin-left:auto; text-align:right}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr); padding-block:40px 32px; gap:36px}
  .figure{max-width:420px}
  .net{left:auto; right:-8px; bottom:-20px; width:56%}
  .net-cap{text-align:left; margin-left:0; margin-top:32px}
}

/* Kennzahlen */
.facts{border-block:1px solid var(--line)}
.facts dl{display:grid; grid-template-columns:repeat(var(--n,5), minmax(0,1fr)); margin:0; padding-block:22px}
.facts dl > div{padding:4px 18px; border-left:1px solid var(--line); min-width:0}
.facts dl > div:first-child{border-left:0; padding-left:0}
.facts dt{font-family:var(--f-display); font-size:var(--step-2); font-variant-numeric:tabular-nums; line-height:1.1}
.facts dd{margin:6px 0 0; font-size:var(--step--1); color:var(--muted); line-height:1.4}
@media (max-width:900px){ .facts dl{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:18px} .facts dl > div{border-left:0; padding-left:0} }

/* Abschnitte */
.block{padding-block:72px}
.block + .block{border-top:1px solid var(--line)}
.block .wrap{display:grid; grid-template-columns:200px minmax(0,1fr); gap:40px}
.rail .label{position:sticky; top:84px; display:block}
.rail .aud{display:block; margin-top:8px; font-size:var(--step--1); color:var(--muted); line-height:1.4}
.content{min-width:0}
.content > h2{font-size:var(--step-3); max-width:22ch}
.intro{margin-top:16px; max-width:64ch; color:var(--muted); font-size:1.05rem}
h3.sub{font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-top:44px}
.more{margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:0.94rem}
@media (max-width:760px){ .block .wrap{grid-template-columns:minmax(0,1fr); gap:12px} .rail .label{position:static} .block{padding-block:52px} }

/* Forschungssäulen */
.pillars{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px; margin-top:40px}
.pillar{border-top:2px solid var(--ink); padding-top:18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.pillar h3{font-size:var(--step-1); font-weight:600}
.pillar .apply{font-size:var(--step--1); color:var(--muted)}
.pillar .apply b{color:var(--ink); font-weight:600}
.pillar ul{list-style:none; padding:0; margin:4px 0 0; display:grid; gap:6px; font-size:var(--step--1)}
.pillar ul li{padding-left:14px; position:relative; color:var(--muted)}
.pillar ul li::before{content:""; position:absolute; left:0; top:0.62em; width:6px; height:6px; border-radius:50%; background:var(--signal)}
@media (max-width:900px){ .pillars{grid-template-columns:minmax(0,1fr)} }

/* Politik & Gesellschaft */
.society{background:var(--panel)}
.block.society + .block{border-top:0}
.impact{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; margin-top:36px}
.impact-item{background:var(--paper); border-radius:6px; padding:22px; display:flex; flex-direction:column; gap:10px; min-width:0}
.impact-item h3{font-size:var(--step-1); font-weight:600}
.impact-item p{color:var(--muted); font-size:0.96rem}
.impact-item a{margin-top:auto; font-size:0.92rem; font-weight:500}

/* Angebote */
.formats{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:36px; border-top:1px solid var(--line)}
.format{padding:22px 24px 24px 0; border-bottom:1px solid var(--line); display:grid; gap:8px; align-content:start; min-width:0}
.format:nth-child(2n){padding-left:24px; border-left:1px solid var(--line)}
.format h3{font-size:var(--step-1); font-weight:600}
.format p{color:var(--muted); font-size:0.96rem}
@media (max-width:700px){ .formats{grid-template-columns:minmax(0,1fr)} .format:nth-child(2n){padding-left:0; border-left:0} }
.clients{margin-top:36px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px}
.clients > div{min-width:0}
.clients ul{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px}
.clients li{font-family:var(--f-display); font-size:1.08rem}
@media (max-width:760px){ .clients{grid-template-columns:minmax(0,1fr)} }
.cta{display:inline-flex; align-items:center; margin-top:32px; padding:12px 20px; border-radius:999px; background:var(--accent); color:var(--accent-ink); text-decoration:none; font:600 1rem var(--f-body); border:0; cursor:pointer}
.cta:hover{filter:brightness(1.08)}

/* Listen: Medien und Vorträge */
.rows{list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--line)}
.rows li{display:grid; grid-template-columns:90px 190px minmax(0,1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--line); align-items:baseline}
.rows .when{font-family:var(--f-mono); font-size:0.8rem; color:var(--muted); font-variant-numeric:tabular-nums}
.rows .kind{font-weight:600; font-size:0.94rem; min-width:0; overflow-wrap:anywhere}
.rows .what{font-family:var(--f-display); font-size:1.08rem; line-height:1.35; min-width:0}
.rows .venue{display:block; font-family:var(--f-body); font-size:0.9rem; color:var(--muted); margin-top:2px}
.press{margin-top:36px}
@media (max-width:700px){ .rows li{grid-template-columns:minmax(0,1fr); gap:2px} }
.topics{display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; padding:0; list-style:none}
.topics li{font-size:0.88rem; padding:6px 12px; border-radius:999px; background:var(--panel)}

/* Aktuelles */
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin-top:16px}
.card{border:1px solid var(--line); border-radius:6px; padding:18px; display:flex; flex-direction:column; gap:10px; min-width:0; background:var(--paper)}
.card-meta{font-family:var(--f-mono); font-size:0.75rem; color:var(--muted); letter-spacing:0.04em}
.plat{font-weight:500; color:var(--ink)}
.card-text{font-family:var(--f-display); font-size:1.08rem; line-height:1.4}
.card-link{margin-top:auto; font-size:0.92rem; font-weight:500}
.videos{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; margin-top:16px}
.video{display:grid; gap:8px; text-decoration:none; color:var(--ink); min-width:0}
.video-thumb{position:relative; display:block; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--panel)}
.video-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.play{position:absolute; left:12px; bottom:12px; width:38px; height:38px; border-radius:50%; background:var(--paper); box-shadow:0 1px 3px rgba(0,0,0,.25)}
.play::after{content:""; position:absolute; left:15px; top:12px; border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent var(--ink)}
.video-title{font-family:var(--f-display); font-size:1.05rem; line-height:1.3}
.video:hover .video-title{text-decoration:underline; text-underline-offset:3px}
.video-date{font-size:var(--step--1); color:var(--muted)}

/* Publikationen */
.research-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:48px; margin-top:36px}
@media (max-width:960px){ .research-grid{grid-template-columns:minmax(0,1fr)} }
.pubs{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.pubs li{padding:16px 0; border-bottom:1px solid var(--line); display:grid; gap:4px}
.pubs .cite{font-size:0.9rem; color:var(--muted)}
.pubs .cite i{color:var(--ink)}
.pubs .title{font-family:var(--f-display); font-size:1.12rem; line-height:1.3}
.pubs .plain{font-size:0.92rem}
.side{display:grid; gap:28px; align-content:start}
.side h3{font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:500}
.side ul{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; font-size:0.94rem}
.side .y{font-family:var(--f-mono); font-size:0.78rem; color:var(--muted); margin-left:6px; white-space:nowrap}

/* Werdegang */
.cv{list-style:none; margin:32px 0 0; padding:0; border-top:1px solid var(--line)}
.cv li{display:grid; grid-template-columns:130px minmax(0,1fr); gap:20px; padding:12px 0; border-bottom:1px solid var(--line)}
.cv .y{font-family:var(--f-mono); font-size:0.82rem; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:2px}
.cv .r{font-weight:500}
.cv .o{color:var(--muted); font-size:0.94rem}
@media (max-width:560px){ .cv li{grid-template-columns:minmax(0,1fr); gap:2px} }

/* Ehemalige und Kooperationen */
.people{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px; margin-top:8px}
.people > div{min-width:0}
.people.single{grid-template-columns:minmax(0,1fr); max-width:760px}
.people.single .people-list{margin-top:24px}
.people h3.sub{margin-top:28px}
.people-list{list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--line)}
.people-list li{display:grid; gap:2px; padding:14px 0; border-bottom:1px solid var(--line)}
.pname{font-weight:600; font-size:1.02rem}
.pname a{color:var(--ink); text-decoration-color:var(--line)}
.pname a:hover{color:var(--accent); text-decoration-color:currentColor}
.pnow{color:var(--ink); font-size:0.95rem}
.pwhen{color:var(--muted); font-size:var(--step--1)}
.people-note{margin-top:12px; color:var(--muted); font-size:var(--step--1)}
@media (max-width:760px){ .people{grid-template-columns:minmax(0,1fr); gap:0} }

/* Kontakt */
.contact-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:48px; margin-top:32px}
.contact-info{display:grid; gap:28px; align-content:start}
.contact-info > div, .contact-form{min-width:0}
.mail{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px}
.mail code{font-family:var(--f-mono); font-size:0.95rem; user-select:all; overflow-wrap:anywhere}
.copy{font:500 0.75rem var(--f-mono); letter-spacing:0.05em; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:999px; padding:5px 12px; cursor:pointer}
.copy:hover{border-color:var(--accent)}
.note{margin-top:8px; color:var(--muted); font-size:0.94rem}
.profiles{list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:6px 18px}
address{font-style:normal; margin-top:10px; color:var(--muted)}
@media (max-width:860px){ .contact-layout{grid-template-columns:minmax(0,1fr)} }
.contact-layout.no-form{grid-template-columns:minmax(0,1fr)}
.contact-layout.no-form .contact-info{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr); gap:32px}
.contact-layout.no-form .mail code{overflow-wrap:normal; word-break:keep-all}
@media (max-width:820px){ .contact-layout.no-form .contact-info{grid-template-columns:minmax(0,1fr)} }
.cform{margin-top:12px}
.cform-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 16px}
.cform-grid p{display:grid; gap:6px; min-width:0}
.cform-grid .full{grid-column:1 / -1}
.cform label{font-size:0.9rem; font-weight:500}
.cform input[type=text], .cform input[type=email], .cform select, .cform textarea{width:100%; font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:10px 12px}
.cform input:focus, .cform select:focus, .cform textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.cform .consent{display:flex; gap:10px; align-items:flex-start}
.cform .consent input{margin-top:5px; flex:none}
.cform .consent label{font-weight:400; color:var(--muted)}
.cform .cta{margin-top:18px}
.cform-msg{padding:12px 14px; border-radius:4px; margin-bottom:16px; border:1px solid currentColor}
.cform-msg.ok{color:var(--ok)}
.cform-msg.err{color:var(--err)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:560px){ .cform-grid{grid-template-columns:minmax(0,1fr)} }
.cform-note{margin-top:14px; color:var(--muted); font-size:0.88rem}
.contact-form > .label{display:block}
.contact-form > .cform-msg{margin:10px 0 0}

/* Einzelseiten (Impressum, Datenschutz) */
.page-main{padding-block:56px 72px}
.prose-wrap{max-width:760px}
.prose h1{font-size:var(--step-3); margin-bottom:24px}
.prose h2{font-size:var(--step-2); margin:32px 0 12px}
.prose p, .prose ul, .prose ol{margin:0 0 14px}
.prose + .prose{margin-top:40px; padding-top:32px; border-top:1px solid var(--line)}
.back{margin-top:40px}

/* Fußzeile */
.foot{border-top:1px solid var(--line); padding-block:28px; color:var(--muted); font-size:var(--step--1)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 18px}
.foot a{color:var(--muted)}

/* Seitenkopf für Blog und Fotografie */
.page-head{max-width:760px; display:grid; gap:12px; margin-bottom:40px}
.page-head h1{font-size:var(--step-4)}
.page-head .label a{color:var(--muted); text-decoration:none}
.page-head .label a:hover{color:var(--ink)}
.empty{color:var(--muted); padding-block:24px; border-top:1px solid var(--line)}

/* Blogübersicht */
.posts{list-style:none; margin:0; padding:0; border-top:1px solid var(--line); max-width:920px}
.post-item{display:grid; grid-template-columns:150px minmax(0,1fr); gap:8px 32px; padding:28px 0; border-bottom:1px solid var(--line); align-items:start}
.post-item.has-thumb{grid-template-columns:150px minmax(0,1fr) 200px}
.post-meta{display:flex; flex-direction:column; gap:2px; font-family:var(--f-mono); font-size:0.78rem; color:var(--muted); font-variant-numeric:tabular-nums}
.post-body{min-width:0; display:grid; gap:8px}
.post-body h2{font-size:var(--step-2); line-height:1.2}
.post-body h2 a{color:var(--ink); text-decoration:none}
.post-body h2 a:hover{text-decoration:underline; text-decoration-thickness:1px}
.post-body p{color:var(--muted)}
.post-thumb img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; display:block}
.lang-tag{display:inline-block; width:max-content; margin-top:4px; padding:1px 8px; border:1px solid var(--line); border-radius:999px}
.pager{display:flex; justify-content:space-between; gap:16px; margin-top:28px; max-width:920px}
@media (max-width:760px){ .post-item, .post-item.has-thumb{grid-template-columns:minmax(0,1fr)} .post-meta{flex-direction:row; flex-wrap:wrap; gap:4px 14px} .post-thumb{order:-1} }

/* Blogbeitrag */
.article-head{display:grid; gap:14px; margin-bottom:32px}
.article-head h1, .article-head .post-meta{max-width:22ch}
.article-head .post-meta{max-width:none}
.article-head .label a{color:var(--muted); text-decoration:none}
.article-head h1{font-size:var(--step-4)}
.article-head .post-meta{flex-direction:row; flex-wrap:wrap; gap:4px 18px}
.article-hero{margin-top:0; margin-bottom:40px}
.article-hero img{width:100%; max-width:1000px; border-radius:6px; display:block}
.article-body{max-width:700px; font-size:1.08rem; line-height:1.7}
.article-body > * + *{margin-top:1.1em}
.article-body p, .article-body ul, .article-body ol{margin:0}
.article-body h2{font-size:var(--step-2); margin-top:1.8em}
.article-body h3{font-size:var(--step-1); margin-top:1.5em}
.article-body blockquote{margin:1.6em 0; padding-left:20px; border-left:2px solid var(--accent); font-family:var(--f-display); font-size:1.25rem; line-height:1.45}
.article-body blockquote cite{display:block; margin-top:8px; font-family:var(--f-body); font-size:0.9rem; font-style:normal; color:var(--muted)}
.article-body figure{margin:1.6em 0}
.article-body figure img{border-radius:4px}
.article-body figcaption{font-size:var(--step--1); color:var(--muted); margin-top:6px}
.article-body .alignwide, .article-body .alignfull{width:min(1000px, 100vw - 32px); max-width:none}
.article-body code{font-family:var(--f-mono); font-size:0.9em; background:var(--panel); padding:1px 5px; border-radius:3px}
.article-body hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.article-body a{overflow-wrap:anywhere}
.article-foot{max-width:700px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line)}
.article-foot .cta{margin-top:0}
.share{font-size:0.94rem}
.comments-wrap{max-width:700px; margin-top:48px}
.comment-list{list-style:none; padding:0; display:grid; gap:20px}
.comment-list .comment-body{border-top:1px solid var(--line); padding-top:14px}
.comment-meta{font-size:var(--step--1); color:var(--muted)}
.comment-form{display:grid; gap:12px}
.comment-form-cookies-consent{display:flex; gap:8px; align-items:flex-start}
.comment-form-cookies-consent label{font-weight:400; color:var(--muted)}
.comment-form label{display:block; font-size:0.9rem; font-weight:500; margin-bottom:4px}
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea{width:100%; font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:10px 12px}

/* Fotografie */
.photo-page .page-head{margin-bottom:36px}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.filters button{font:500 0.9rem var(--f-body); color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 16px; cursor:pointer}
.filters button:hover{border-color:var(--accent)}
.filters button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.series-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:36px 24px}
.series-card{display:grid; gap:8px; color:var(--ink); text-decoration:none; min-width:0}
.series-cover{display:block; aspect-ratio:4/3; overflow:hidden; border-radius:4px; background:var(--panel)}
.series-cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.series-card:hover .series-cover img{transform:scale(1.025)}
.series-title{font-family:var(--f-display); font-size:var(--step-1); line-height:1.25}
.series-meta{font-family:var(--f-mono); font-size:0.78rem; color:var(--muted); letter-spacing:0.03em}
.photo-grid{columns:3 280px; column-gap:20px}
.photo{break-inside:avoid; margin:0 0 20px}
.photo a{display:block; border-radius:3px; overflow:hidden; background:var(--panel); cursor:zoom-in}
.photo img{width:100%; height:auto; display:block}
.photo figcaption{font-size:var(--step--1); color:var(--muted); margin-top:6px}
@media (prefers-reduced-motion: reduce){ .series-cover img{transition:none} .series-card:hover .series-cover img{transform:none} }

.lightbox{border:0; padding:0; max-width:none; max-height:none; width:100%; height:100%; background:rgba(8,10,14,.96); color:#E5EAF0}
.lightbox::backdrop{background:rgba(8,10,14,.96)}
.lightbox[open]{display:grid; place-items:center}
.lightbox figure{margin:0; display:grid; gap:10px; justify-items:center; padding:56px max(64px, env(safe-area-inset-left, 0px)) 48px}
.lightbox img{max-width:calc(100vw - 140px); max-height:calc(100vh - 140px); width:auto; height:auto; object-fit:contain}
.lightbox figcaption{font-size:0.9rem; color:#B9C3CF; text-align:center; max-width:70ch}
.lb-btn{position:fixed; background:transparent; color:#E5EAF0; border:1px solid rgba(229,234,240,.3); border-radius:999px; width:44px; height:44px; font:500 1.1rem var(--f-body); cursor:pointer}
.lb-btn:hover, .lb-btn:focus-visible{border-color:#E5EAF0; outline:none}
.lb-close{top:calc(14px + env(safe-area-inset-top, 0px)); right:calc(14px + env(safe-area-inset-right, 0px))}
.lb-prev{left:calc(14px + env(safe-area-inset-left, 0px)); top:50%; transform:translateY(-50%)}
.lb-next{right:calc(14px + env(safe-area-inset-right, 0px)); top:50%; transform:translateY(-50%)}
.lb-count{position:fixed; top:calc(26px + env(safe-area-inset-top, 0px)); left:calc(20px + env(safe-area-inset-left, 0px)); font:0.78rem var(--f-mono); color:#97A3B1}
@media (max-width:700px){ .lightbox figure{padding:60px 8px 70px} .lightbox img{max-width:calc(100vw - 16px); max-height:calc(100vh - 150px)} .lb-prev, .lb-next{top:auto; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); transform:none} }

/* Fotografie-Band auf der Startseite */
.band-intro{margin-top:0; font-family:var(--f-display); font-style:italic; font-size:var(--step-1); color:var(--ink)}
.band-photos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.band-intro + .band-photos{margin-top:24px}
.band-photos a{display:grid; gap:6px; color:var(--muted); text-decoration:none; font-size:var(--step--1); min-width:0}
.band-photos img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; display:block}
.band-photos a:hover span{color:var(--ink)}
@media (max-width:600px){ .band-photos{grid-template-columns:repeat(2, minmax(0,1fr))} .band-photos a:nth-child(3){display:none} }

/* ================================================================== */
/* Darstellung "Modern": serifenlose Schrift, Foto in Farbe,          */
/* größere Typografie, weichere Flächen.                              */
/* ================================================================== */
body.style-modern{
  --paper:#FAFAFB; --panel:#EEF0F4; --ink:#0F1420; --muted:#5A6272; --line:#E1E4EA;
  --accent:#2F4BD9; --accent-ink:#FFFFFF; --signal:#E2962B;
  --f-display:"Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-body:"Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --step-4:clamp(2.6rem, 6.4vw, 5rem);
  font-size:1.03rem;
}
@media (prefers-color-scheme: dark){
  body.style-modern{ --paper:#0B0E14; --panel:#151A23; --ink:#ECEFF4; --muted:#98A1B0; --line:#232A36; --accent:#8FA2FF; --accent-ink:#0B0E14; --signal:#F0B04D }
}
.style-modern h1, .style-modern h2, .style-modern h3{font-weight:650; letter-spacing:-0.02em}
.style-modern .hero h1{font-weight:700; letter-spacing:-0.035em; line-height:1.02}
.style-modern .hero .thesis{font-style:normal; font-weight:500; letter-spacing:-0.01em; font-size:clamp(1.35rem, 2.4vw, 1.75rem)}
.style-modern .content > h2{font-size:clamp(1.8rem, 3.4vw, 2.6rem); max-width:24ch}
.style-modern .portrait{border-radius:14px}
.style-modern .portrait img{filter:none}
.style-modern .net{border-radius:14px; box-shadow:0 10px 30px rgba(15,20,32,.10)}
.style-modern .facts{background:var(--panel); border-block:0}
.style-modern .facts dt{font-weight:700; letter-spacing:-0.02em}
.style-modern .pillar{border-top:3px solid var(--accent)}
.style-modern .pillar h3, .style-modern .format h3{font-size:1.25rem}
.style-modern .clients li, .style-modern .rows .what, .style-modern .pubs .title, .style-modern .card-text,
.style-modern .video-title, .style-modern .series-title{font-weight:500; letter-spacing:-0.005em}
.style-modern .topics li{background:transparent; border:1px solid var(--line)}
.style-modern .card, .style-modern .video-thumb, .style-modern .series-cover, .style-modern .band-photos img,
.style-modern .post-thumb img, .style-modern .article-hero img{border-radius:12px}
.style-modern .card{background:var(--panel); border-color:transparent}
.style-modern .impact-item{border-radius:14px}
.style-modern .cform input[type=text], .style-modern .cform input[type=email], .style-modern .cform select, .style-modern .cform textarea{border-radius:8px; background:var(--panel); border-color:transparent}
.style-modern .band-intro{font-style:normal}
.style-modern .article-body blockquote{font-weight:500}
.style-modern .brand{font-weight:700; letter-spacing:-0.02em}
[hidden]{display:none !important}