/*
Theme Name: 4D Media
Description: Individuelles Block-Child-Theme für 4D Media, basierend auf Twenty Twenty-Five.
Version: 0.1.27
Template: twentytwentyfive
Requires at least: 6.7
Requires PHP: 8.0
Text Domain: fourdmedia
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root{--paper:#f7f6f2;--ink:#172b32;--muted:#52636a;--accent:#b84414;--line:#d9dedb;--soft:#e9ede8;--white:#fff;--gutter:clamp(22px,5.5vw,88px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}a{color:inherit;text-underline-offset:5px}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.08;letter-spacing:-.045em}h1{font-weight:500}h2{font-weight:500}h3{font-weight:500}p{max-width:62ch}.wrap{max-width:1520px;margin:auto;padding-inline:var(--gutter)}.note{padding:9px var(--gutter);background:var(--ink);color:var(--white);letter-spacing:.04em}.note span{opacity:.8}header{border-bottom:1px solid var(--line)}.header-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:100px}.brand{text-decoration:none;display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-weight:700;letter-spacing:-1.6px}.brand strong{color:var(--accent);line-height:1}.brand span{font-weight:400}.legacy-navigation{display:flex;gap:30px;align-items:center}.legacy-navigation a{text-decoration:none;}.legacy-navigation a:hover{text-decoration:underline}.nav-contact{border-bottom:1px solid var(--accent);padding-bottom:5px}.menu-toggle{display:none;background:none;border:1px solid var(--line);padding:9px 15px;min-height:44px}.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.13em;text-transform:uppercase}.hero{padding-block:76px 56px}.hero-top{display:grid;grid-template-columns:1.3fr 1fr;gap:7%;align-items:end}.hero .eyebrow{margin-bottom:25px}.hero h1 em{color:var(--accent);font-style:normal}.hero-copy{padding-bottom:8px}.hero-copy p{line-height:1.65;color:var(--muted)}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:52px;padding:13px 22px;background:var(--accent);color:white;text-decoration:none;}.button:hover{background:#96330d}.quiet{}.hero-project{margin-top:50px;display:grid;grid-template-columns:.68fr 1.32fr;background:var(--soft);min-height:355px}.project-intro{padding:38px;display:flex;flex-direction:column;justify-content:space-between;gap:36px}.project-intro h2{margin:12px 0 18px}.project-intro p{color:var(--muted)}.project-intro a{}.hero-image{position:relative;min-height:355px;overflow:hidden}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:right center;position:absolute}.hero-caption{display:flex;justify-content:space-between;gap:18px;margin-top:11px;color:var(--muted)}.section{padding-block:85px;border-top:1px solid var(--line)}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:48px}.section-head .eyebrow{margin-bottom:17px}.section-head>p{color:var(--muted)}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.service{padding-top:25px;border-top:1px solid var(--ink)}.number{display:block;color:var(--accent);margin-bottom:29px}.service h3{margin-bottom:20px}.service p{color:var(--muted)}.service small{display:block;margin-top:22px;color:var(--muted);}.projects{background:var(--ink);color:var(--white)}.projects .eyebrow{color:#ffb287}.projects .section-head>p{color:#c1cece}.project-list{display:grid;grid-template-columns:1fr 1fr;gap:0 55px}.project-row{border-top:1px solid #53646a;padding-block:30px}.project-row .tag{color:#c1cece;letter-spacing:.07em;text-transform:uppercase}.project-row h3{margin:12px 0 17px}.project-row p{color:#d0d9d9;}.project-row .role{margin-top:22px;color:#c1cece}.project-row a{display:inline-block;margin-top:15px;color:#ffb287}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.step{border-top:1px solid var(--line);padding-top:18px}.step .number{margin-bottom:24px}.step h3{margin-bottom:18px}.step p{color:var(--muted)}.ai-note{margin-top:45px;padding:26px 0;border-block:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:35px}.ai-note h3{}.ai-note p{color:var(--muted)}.about{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:start}.about .eyebrow{margin-bottom:20px}.about p{color:var(--muted);margin-bottom:20px}.about strong{color:var(--ink);font-weight:500;}.contact{background:#e9e4d9}.contact .section-head{margin-bottom:30px}.contact h2{max-width:14ch}.contact-links{display:flex;gap:30px;flex-wrap:wrap;align-items:center}.contact-meta{color:var(--muted);}.contact details{margin-top:34px;border-top:1px solid #c5c4bb;padding-top:20px;max-width:850px}.contact summary{min-height:44px;cursor:pointer}.contact details p{padding-block:15px;color:var(--muted);}footer{padding-block:32px}footer .wrap{display:flex;justify-content:space-between;gap:24px;color:var(--muted)}.skip{position:absolute;left:-1000px}.skip:focus{left:20px;top:20px;z-index:10;background:white;padding:15px}dialog{max-width:540px;width:calc(100% - 32px);border:0;background:var(--paper);color:var(--ink);padding:32px}dialog::backdrop{background:#172b3288}dialog h2{margin-bottom:20px}dialog p{margin-bottom:24px}dialog button{background:var(--ink);color:white;border:0;min-height:44px;padding:10px 20px}
@media(min-width:1100px){.hero-image img{width:153%;max-width:none;right:0}}
@media(max-width:850px){.header-inner{min-height:85px}.hero{padding-block:50px 42px}.hero-top{grid-template-columns:1fr;gap:27px}.hero-copy{max-width:600px}.hero h1{max-width:12ch}.hero-project{grid-template-columns:1fr 1fr}.project-intro{padding:25px}.services{gap:25px}.section{padding-block:60px}.workflow{grid-template-columns:1fr 1fr;gap:32px}.section-head{gap:30px}.legacy-navigation{gap:18px}}
@media(max-width:650px){body{}.header-inner{flex-wrap:wrap;gap:0;padding-block:18px;min-height:82px}.brand{}.brand strong{}.menu-toggle{display:block}.legacy-navigation{display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;padding-top:20px}.legacy-navigation.open{display:flex}.legacy-navigation a{padding:12px 0;min-height:44px;border-top:1px solid var(--line)}.nav-contact{border-bottom:0}.hero{padding-top:38px}.hero .eyebrow{letter-spacing:.09em;margin-bottom:19px}.hero-copy p{}.actions{gap:18px;margin-top:24px}.hero-project{grid-template-columns:1fr;margin-top:32px}.project-intro{padding:27px;gap:22px}.project-intro h2{max-width:14ch}.hero-image{min-height:250px}.hero-image img{width:177%;max-width:none;right:0;object-fit:cover}.hero-caption{flex-direction:column;gap:2px}.section-head{grid-template-columns:1fr;gap:23px;margin-bottom:34px}.services{grid-template-columns:1fr;gap:32px}.service .number{margin-bottom:17px}.project-list{grid-template-columns:1fr}.workflow{grid-template-columns:1fr;gap:28px}.step .number{margin-bottom:12px}.ai-note,.about{grid-template-columns:1fr;gap:24px}.contact-links{gap:20px;align-items:flex-start;flex-direction:column}footer .wrap{flex-direction:column;gap:12px}.note{}.section{padding-block:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}




:root{--accent:#ff921a}
body{font-family:Roboto,Arial,sans-serif;font-size:16px}
h1{font-size:64px}h2{font-size:40px}h3,.step h3,.ai-note h3{font-size:24px}
p,.legacy-navigation a,.button,.quiet,.project-intro p,.project-intro a,.service p,.project-row p,.project-row a,.step p,.ai-note p,.contact-meta,.contact details p,dialog p{font-size:16px}
.note,.eyebrow,.hero .eyebrow,.number,.service small,.project-row .tag,.project-row .role,.hero-caption,footer .wrap{font-size:13px}
.eyebrow{color:var(--ink);letter-spacing:.08em}
.hero h1 em{color:#d65c00}
.brand{letter-spacing:normal}.brand img{width:210px;height:auto}
.button{background:var(--accent);color:var(--ink);font-weight:500}.button:hover{background:#ffab4f}
.projects .eyebrow,.project-row a{color:var(--accent)}.number{color:var(--ink)}
.nav-contact{border-bottom:2px solid var(--accent)}
.menu-toggle{padding:10px;width:46px;height:46px;align-items:center;justify-content:center;border:0}
.menu-lines{display:flex;width:24px;flex-direction:column;gap:5px}
.menu-lines span{display:block;height:2px;background:var(--ink);width:24px;transform-origin:center;transition:transform .15s,opacity .15s}
.menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.case-visual{height:300px;background:#e9ede8;display:flex;justify-content:center;align-items:center;margin-bottom:25px;overflow:hidden}
.case-visual img{height:90%;width:auto;object-fit:contain}.timension-visual{position:relative}
.timension-visual img{position:absolute;right:0;width:175%;max-width:none;height:100%;object-fit:cover;object-position:right center}
.project-row .tag{margin-top:0}.about strong{font-size:24px}dialog h2{font-size:40px}
@media(max-width:850px){h1{font-size:56px}}
@media(max-width:650px){h1,h2,dialog h2{font-size:40px}.hero-copy p{font-size:16px}.brand img{width:180px}.menu-toggle{display:flex}.case-visual{height:270px}.hero h1{max-width:14ch}}
@media(prefers-reduced-motion:reduce){.menu-lines span{transition:none}}
@media(min-width:1100px){.project-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}}

.wp-site-blocks{padding:0}.wp-site-blocks>*,.wp-site-blocks>*>*{margin-block-start:0}
.wp-block-image{margin:0}.brand .wp-block-image{width:210px}.brand .wp-block-image img{width:100%;height:auto}
.hero-image .wp-block-image{margin:0;height:100%}.hero-image img{max-width:none}
.case-visual .wp-block-image{height:90%;margin:0;display:flex;align-items:center;justify-content:center}
.case-visual .wp-block-image img{height:100%;width:auto;max-width:100%;object-fit:contain}
.timension-visual .wp-block-image{height:100%;width:100%}.timension-visual .wp-block-image img{width:175%;max-width:none;object-fit:cover}
.actions>p{margin:0}.wp-block-post-content{max-width:none!important;margin:0}.wp-block-post-title{margin-bottom:30px}
.fourd-navigation{font-size:16px;display:flex!important}.fourd-navigation .wp-block-navigation__container{gap:24px}
.fourd-navigation .wp-block-navigation-item__content{min-height:44px;display:flex;align-items:center}
.fourd-navigation .wp-block-navigation__responsive-container.is-menu-open{background:var(--paper);color:var(--ink);padding:30px}
.fourd-navigation .wp-block-navigation__responsive-container-open,.fourd-navigation .wp-block-navigation__responsive-container-close{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.fourd-navigation .wp-block-navigation__responsive-container-open svg{width:28px;height:28px}
@media(max-width:650px){.brand .wp-block-image{width:180px}.header-inner{flex-wrap:nowrap!important}.fourd-navigation{width:auto!important}.fourd-navigation .wp-block-navigation__container{align-items:stretch;gap:16px}}

.fourd-legal-page h1,.fourd-legal-page h2,.fourd-legal-page h3,.fourd-legal-page .wp-block-post-title{font-weight:400}

p.note{max-width:none;width:100%}.wp-block-group.hero-project{margin-top:50px}.wp-block-group.actions{margin-top:30px}.wp-block-group.hero-caption{margin-top:11px}.hero-caption p{font-size:13px}.wp-block-group.ai-note{margin-top:45px}
@media(max-width:650px){.wp-block-group.hero-project{margin-top:32px}.wp-block-group.actions{margin-top:24px}}

/* Progressive enhancement: project contents remain readable without JavaScript. */
.project-carousel.is-ready .hero-project{margin-top:0;min-height:390px}
.project-carousel.is-ready .hero-project[hidden]{display:none!important}
.project-carousel{margin-top:50px}
.project-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.project-controls button{min-height:44px;min-width:44px;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:8px 14px;cursor:pointer}
.project-controls button[aria-current="true"]{background:var(--ink);color:white}
.project-controls .project-status{font-size:13px;margin-right:auto}
.project-carousel .app-image img{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center;padding:20px}
.project-carousel .app-image{background:#dbe2df}
@media(max-width:650px){.project-carousel{margin-top:32px}.project-carousel.is-ready .hero-project{min-height:590px}.project-carousel .hero-image{height:270px}.project-controls{gap:8px}}
@media(max-width:650px){.project-controls{gap:6px}.project-controls .project-status{flex-basis:100%}.project-controls button{padding:8px 10px}.project-controls button:last-child{font-size:13px}}

.keep-together{white-space:nowrap}
.fourd-legal-page .wp-block-post-title,.fourd-legal-page h1,.fourd-legal-page h2,.fourd-legal-page h3{font-size:18px;line-height:1.4;letter-spacing:normal;font-weight:400}
.fourd-legal-page main p{font-size:16px}

.project-carousel.is-ready{position:relative}
.project-carousel.is-ready .hero-project{padding-bottom:52px}
.project-controls{position:absolute;inset:0;margin:0;pointer-events:none;display:block}
.project-controls button{position:absolute;pointer-events:auto;background:var(--paper);border:0;box-shadow:0 1px 6px #172b3220}
.project-controls .project-prev,.project-controls .project-next{top:calc(50% - 22px);font-size:24px;width:44px;height:44px;padding:0;border-radius:50%}
.project-controls .project-prev{left:8px}.project-controls .project-next{right:8px}
.project-controls .project-status{position:absolute;bottom:13px;left:24px;font-size:13px;margin:0}
.project-controls .project-pause{bottom:4px;right:12px;font-size:13px;min-height:40px;box-shadow:none;padding:8px 12px;background:transparent}
@media(min-width:651px){.project-carousel.is-ready .project-intro{padding-left:64px}}
@media(max-width:650px){.project-controls .project-prev,.project-controls .project-next{top:auto;bottom:165px}.project-controls .project-status{left:20px}}

/* Visible controls at 60% of their original 44px/24px size; touch targets stay 44px. */
.project-controls .project-prev,.project-controls .project-next{font-size:14.4px;background:transparent;box-shadow:none;isolation:isolate;line-height:44px;text-align:center}
.project-controls .project-prev::before,.project-controls .project-next::before{content:"";position:absolute;width:26.4px;height:26.4px;left:8.8px;top:8.8px;border-radius:50%;background:var(--paper);box-shadow:0 1px 4px #172b3220;z-index:-1}

/* Geometrische Dreiecke statt fontabhängiger Glyphenmetriken. */
.project-controls .project-prev,.project-controls .project-next{font-size:0;line-height:0}
.project-controls .project-prev::after,.project-controls .project-next::after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;transform:translate(-50%,-50%)}
.project-controls .project-prev::after{border-right:8px solid var(--ink)}
.project-controls .project-next::after{border-left:8px solid var(--ink)}

.reference-history{margin-top:38px;border-top:1px solid #53646a;padding-top:20px}
.reference-history summary{min-height:44px;cursor:pointer;font-size:16px}
.reference-history>p{margin-top:16px;color:#c1cece}
.reference-history-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:24px}
.reference-history h3{font-size:24px;margin-bottom:16px}
.reference-history-grid p{color:#d0d9d9;line-height:1.9}
@media(max-width:650px){.reference-history-grid{grid-template-columns:1fr;gap:28px}}

/* Hide the default WordPress outline on pointer focus only. */
.wp-site-blocks :focus:not(:focus-visible) {
    outline: none;
}

/* No click-focus rectangle on disclosure headings; keep keyboard focus visible. */
body .wp-block-details>summary{border:0;box-shadow:none}
body .wp-block-details>summary:focus:not(:focus-visible){outline:none;box-shadow:none}
body .wp-block-details>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;box-shadow:none}

/* One shared presentation for service, process and budget items. */
.services,.workflow{gap:32px}
.service,.step{border-top:1px solid var(--line);padding-top:24px}
.service>*,.step>*{margin-block:0}
.service .number,.step .number{display:block;font-size:13px;font-weight:400;line-height:1.6;color:var(--muted);letter-spacing:.04em;margin:0 0 20px}
.service h3,.step h3{font-size:24px;font-weight:500;line-height:1.2;letter-spacing:-.035em;margin:0 0 16px}
.service p,.step p{font-size:16px;line-height:1.65;color:var(--muted)}
.service p+p,.step p+p{margin-top:12px}
.contact{background:var(--paper)}
.section-head{margin-bottom:40px}
@media(max-width:650px){.services,.workflow{gap:32px}.service,.step{padding-top:24px}.service .number,.step .number{margin-bottom:20px}.section-head{margin-bottom:32px}}

/* Datenschutz: 18px headings, bold, one body line of preceding space. */
body.fourd-legal-page main h1,body.fourd-legal-page main h2,body.fourd-legal-page main h3{font-weight:700}
body.fourd-legal-page main h2,body.fourd-legal-page main h3{margin-block-start:26.4px;margin-block-end:12px}

.contact .section-head{align-items:start}
.contact-intro>p{color:var(--muted)}
.contact .contact-intro details{margin-top:20px;max-width:none}

/* Mobile spacing and unobtrusive navigation, 2026-11-04. */
.link-arrow{display:inline-block;width:.55em;height:.55em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-.1em);margin-left:.3em}
@media(max-width:650px){
 .wp-block-group.header-inner{padding-block:0;min-height:44px}
 .wp-block-group.hero{padding-top:19px}
 .link-arrow,.services .number,.workflow .number{display:none!important}
 .wp-block-post-content ul,.wp-block-post-content ol{list-style:none;padding-inline-start:0}
}

.project-intro h2{font-size:24px;font-weight:500}

/* Complete user-supplied portrait artwork for TIMENSION and GuideMaster. */
.project-carousel .hero-image.mockup-visual{height:480px;min-height:480px;background:#25323f;display:flex;align-items:center;justify-content:center}
.project-carousel .hero-image.mockup-visual .wp-block-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.project-carousel .hero-image.mockup-visual img{position:static;width:100%;max-width:100%;height:100%;object-fit:contain;object-position:center;padding:0}
.case-visual.mockup-visual{height:auto;aspect-ratio:3/4;background:#25323f}
.case-visual.mockup-visual .wp-block-image{width:100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center}
.case-visual.mockup-visual img{position:static;width:100%;max-width:100%;height:100%;object-fit:contain;object-position:center}
@media(max-width:650px){.project-carousel .hero-image.mockup-visual{height:auto;min-height:0;aspect-ratio:3/4}}

/* Four project examples in a balanced desktop grid. */
@media(min-width:1100px){.project-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 55px}}