/* ==========================================================================
   ci.css — corporate design layer (October 2026), loaded last.
   Logo, header theme switch, relocated controls, pixel hero background,
   heading typography and contrast fixes. Colours are the theme variables
   from 2026.css (anthracite #2B3035, petrol #2C6E73, negative #1F2427 /
   #8CC3C6).
   ========================================================================== */

.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- logo ---- */
body.era-2026 .logo { display:inline-flex; align-items:center; line-height:0; margin-right:auto; font-size:0; }
body.era-2026 .logo::after { content:none; }
.logo-img { display:block; height:42px; width:auto; }
body.era-2026 .logo-neg { display:none; }
body.era-2026:not(.theme-light) .logo-pos { display:none; }
body.era-2026:not(.theme-light) .logo-neg { display:block; }
body.era-2026 #site-header.shrunk .logo-img { height:38px; }
body.era-2026 .logo:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }

/* ---- theme switch: one small icon in the header ---- */
body.era-2026 .theme-toggle { display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line-2); border-radius:50%; background:none; color:var(--ink); cursor:pointer; flex:none; transition:border-color .2s ease, color .2s ease, background .2s ease; }
body.era-2026 .theme-toggle:hover { border-color:var(--accent); color:var(--accent); }
body.era-2026 .theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
body.era-2026 .theme-toggle::before, body.era-2026 .theme-toggle::after { content:none; }
.theme-toggle svg { width:20px; height:20px; }
/* Shows what a click switches to: the moon in Hell, the sun in Dunkel/Verspielt. */
body.era-2026 .theme-toggle .i-sun { display:block; }
body.era-2026 .theme-toggle .i-moon { display:none; }
body.era-2026.theme-light .theme-toggle .i-sun { display:none; }
body.era-2026.theme-light .theme-toggle .i-moon { display:block; }
body.era-1993 .theme-toggle svg { display:none; }

/* ---- 1993 only: the way back ---- */
body.era-2026 .retro-bar { display:none; }
body.era-1993 .retro-bar { padding:10px; border:2px ridge #999; text-align:center; }

/* ---- hero ---- */
body.era-2026 .hero-flow { display:none; }
body.era-2026 .hero-pixels { position:absolute; z-index:-1; pointer-events:none; right:0; top:0; width:54%; height:100%; mask-image:linear-gradient(90deg,transparent 0,#000 38%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%); }
body.era-2026 .hero-pixels canvas { display:block; width:100%; height:100%; }
body.era-1993 .hero-pixels { display:none; }
body.era-2026 .hero-sub { max-width:58ch; }
body.era-2026 .hero-actions + .hero-tools { margin-top:26px; }
body.era-2026 .hero-tools { display:flex; justify-content:flex-end; }
body.era-2026 .hero-tools #ambientPause { margin-left:0; }
@media(max-width:760px) {
  body.era-2026 .hero-pixels { width:100%; opacity:.4; mask-image:linear-gradient(90deg,transparent 0,#000 70%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70%); }
  body.era-2026 .hero-tools { justify-content:flex-start; }
}

/* ---- services section opening line ---- */
body.era-2026 .section-slogan { margin:0 0 40px; font:900 clamp(26px,3.6vw,44px)/1.12 var(--f-display); letter-spacing:-.02em; color:var(--ink); -webkit-hyphens:manual; hyphens:manual; text-wrap:balance; }
body.era-2026 .section-slogan[data-jargon-copy] { overflow-wrap:break-word; -webkit-hyphens:manual; hyphens:manual; }
body.era-2026.theme-spectrum .section-slogan { text-transform:uppercase; }
body.era-2026 .service-link + .service-link { margin-left:14px; }

/* ---- headings: no automatic hyphenation, balanced lines ---- */
body.era-2026 h1, body.era-2026 h2, body.era-2026 h3,
body.era-2026 h1[data-jargon-copy], body.era-2026 h2[data-jargon-copy], body.era-2026 h3[data-jargon-copy] {
  -webkit-hyphens:manual; hyphens:manual; overflow-wrap:break-word; text-wrap:balance;
}

/* ---- jargon / Tonlage control (legacy standalone layout) ---- */
body.era-2026 .jargon-control { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin:30px 0 8px; padding:14px 18px; border:1px dashed var(--line-2); border-radius:6px; max-width:760px; font-size:13px; color:var(--ink-dim); }
body.era-2026 .jargon-control .jargon-slider { display:flex; align-items:center; gap:12px; margin:0; }
body.era-2026 .jargon-control .jargon-label { font:11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
body.era-2026 .jargon-control input { width:170px; min-height:32px; }
body.era-2026 .jargon-control output { min-width:4ch; font:12px var(--f-mono); color:var(--ink); }
body.era-2026 .jargon-control p { margin:0; font-size:13px; }
body.era-2026.theme-spectrum .jargon-control { border-radius:0; }

/* ---- Gestaltungslabor: theme demonstration ---- */
body.era-2026 .lab-demo-theme { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-dim); }
body.era-2026 .lab-demo-theme button { min-height:40px; padding:8px 14px; border:1px solid var(--accent); border-radius:999px; background:none; color:var(--ink); font:12px var(--f-mono); letter-spacing:.04em; cursor:pointer; }
body.era-2026 .lab-demo-theme button:hover, body.era-2026 .lab-demo-theme button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
body.era-2026 .lab-demo-theme button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ---- team: where we are ---- */
body.era-2026 .team-place { display:inline-flex; align-items:center; gap:8px; font:12px var(--f-mono); letter-spacing:.05em; color:var(--ink-dim); margin:0 0 6px; }
body.era-2026 .team-place::before { content:""; width:8px; height:8px; background:var(--accent); }
body.era-2026 .team-degrees { color:var(--ink); }

/* ---- references (hidden until the first pilot customer) ---- */
body.era-2026 .references[hidden] { display:none; }

/* ---- prices: net shown next to gross ---- */
body.era-2026 .net { color:var(--ink-dim); font-weight:400; white-space:nowrap; }
body.era-2026 .price-start + .price-net { margin:-6px 0 10px; font:13px/1.5 var(--f-mono); color:var(--ink-dim); }

/* ---- contact ---- */
body.era-2026 .kontakt-promise { display:inline-flex; align-items:center; gap:10px; margin:6px 0 0; font:14px/1.5 var(--f-body); color:var(--ink); }
body.era-2026 .kontakt-promise::before { content:""; width:8px; height:8px; background:var(--accent); flex:none; }

/* ---- small print: at least 4.5:1 in both themes ---- */
body.era-2026 .cf-fallback, body.era-2026 .contact-preview-note, body.era-2026 .form-hint,
body.era-2026 .lab-small, body.era-2026 .sketch-hint, body.era-2026 .product-video-note,
body.era-2026 .price-note, body.era-2026 #site-footer, body.era-2026 #site-footer p,
body.era-2026 .model-attribution, body.era-2026 .footer-legal a, body.era-2026 .label span,
body.era-2026 label span, body.era-2026 .lab-next, body.era-2026 .jargon-control p { color:var(--ink-dim); opacity:1; }

/* ---- footer ---- */
body.era-2026 .footer-brand { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 40px; margin-bottom:22px; }
body.era-2026 .footer-logo { display:block; height:64px; width:auto; }
body.era-2026 .footer-logo-neg { display:none; }
body.era-2026:not(.theme-light) .footer-logo-pos { display:none; }
body.era-2026:not(.theme-light) .footer-logo-neg { display:block; }
body.era-2026 .footer-place { margin:0; font:13px/1.6 var(--f-mono); color:var(--ink); }
body.era-2026 .footer-place a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
body.era-2026 .footer-time-travel { min-height:44px; padding:6px 0; border:0; background:none; color:var(--ink-dim); font:12px var(--f-mono); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
body.era-2026 .footer-time-travel:hover { color:var(--accent); }
body.era-1993 .footer-brand img { display:none; }
body.era-2026 .footer-services ul { display:flex; flex-wrap:wrap; gap:6px 20px; list-style:none; margin:0 0 16px; padding:0; }
body.era-2026 .footer-services a { color:var(--ink); font:13px/1.6 var(--f-mono); text-decoration:underline; text-underline-offset:3px; }
body.era-2026 .footer-services a:hover { color:var(--accent); }

/* ---- mobile header ---- */
@media(max-width:680px) {
  .logo-img, body.era-2026 #site-header.shrunk .logo-img { height:38px; }
  body.era-2026 .theme-toggle { width:44px; height:44px; }
  body.era-2026 .jargon-control input { width:auto; flex:1; min-width:90px; }
  body.era-2026 .jargon-control .jargon-slider { width:100%; }
}

/* ---- Verspielt keeps its loudness ---- */
body.era-2026.theme-spectrum .theme-toggle { border-radius:0; }

/* ---- team backgrounds and prepared references ---- */
body.era-2026 .team-backgrounds { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 28px; padding:0; }
body.era-2026 .team-backgrounds li { padding:6px 12px; border:1px solid var(--line-2); border-radius:999px; font:12px/1.4 var(--f-mono); color:var(--ink); }
body.era-2026.theme-spectrum .team-backgrounds li { border-radius:0; }
body.era-2026 .reference-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; list-style:none; margin:28px 0 0; padding:0; }
body.era-2026 .reference { padding:22px; border:1px solid var(--line); border-radius:6px; }
body.era-2026 .reference img { height:48px; width:auto; margin-bottom:14px; }
body.era-2026 .kontakt-promise { display:flex; width:fit-content; }

/* Tonlage der Seitentexte (Gestaltungslabor) */
body.era-2026 .lab-tone { padding-top:16px; border-top:1px solid var(--line); }
body.era-2026 .lab-tone .lab-dial-value { font:12px var(--f-mono); color:var(--ink); }
body.era-2026 .lab-tone-track { padding:12px 0 4px; }
body.era-2026 .lab-tone-track input[type="range"] { -webkit-appearance:none; appearance:none; display:block; width:100%; min-height:28px; margin:0; background:linear-gradient(var(--line-2),var(--line-2)) center/100% 2px no-repeat; cursor:pointer; }
body.era-2026 .lab-tone-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--accent); }
body.era-2026 .lab-tone-track input[type="range"]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--accent); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--accent); }
body.era-2026 .lab-tone-track input[type="range"]::-moz-range-track { background:transparent; }
body.era-2026 .lab-tone-track input[type="range"]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
body.era-2026 .lab-tone-scale { display:flex; justify-content:space-between; margin:0; font:10px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); }
body.era-2026 .lab-tone .lab-small { margin-top:12px; }
body.era-2026 .lab-tone-scale { margin-bottom:4px; }

/* Wide screens: use the available width (sections, header, footer) instead of a
   fixed 1320px column. Running text keeps its own ch-based measure. */
@media (min-width:1500px) {
  body.era-2026 section, body.era-2026 .nav-inner, body.era-2026 .kontakt,
  body.era-2026 .studio-playground, body.era-2026.lp-page .lp,
  body.era-2026 .legal { max-width:min(1760px, 100%); padding-left:5vw; padding-right:5vw; }
  body.era-2026 .nav-inner { padding-left:5vw; padding-right:5vw; box-sizing:border-box; }
  body.era-2026 .hero h1 { max-width:1400px; }
}
@media (min-width:2200px) {
  body.era-2026 section, body.era-2026 .nav-inner, body.era-2026 .kontakt,
  body.era-2026.lp-page .lp, body.era-2026 .legal { max-width:2000px; }
}

/* ---- team portraits ---- */
body.era-2026 .team-card { display:grid; grid-template-columns:minmax(120px,38%) minmax(0,1fr); gap:0 28px; align-items:start; align-content:start; padding:28px; }
body.era-2026 .team-photo { margin:0; grid-column:1; grid-row:1; overflow:hidden; border-radius:6px; border:1px solid var(--line); background:var(--bg-elev); aspect-ratio:4/5; }
body.era-2026 .team-photo img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.03); transition:transform .5s ease; }
body.era-2026 .team-card:hover .team-photo img { transform:scale(1.025); }
body.era-2026 .team-text { grid-column:2; grid-row:1; min-width:0; }
body.era-2026 .team-card .team-text > * { grid-column:auto; }
body.era-2026 .team-text .team-name { margin-top:2px; }
body.era-2026.theme-spectrum .team-photo { border-radius:0; }
@media (max-width:1100px) and (min-width:721px) {
  body.era-2026 .team-card { grid-template-columns:1fr; }
  body.era-2026 .team-photo { max-width:240px; margin-bottom:20px; }
  body.era-2026 .team-text { grid-column:1; grid-row:2; }
}
@media (max-width:720px) {
  body.era-2026 .team-card { grid-template-columns:34% minmax(0,1fr); gap:0 16px; padding:20px 16px; }
}
@media (prefers-reduced-motion: reduce) { body.era-2026 .team-photo img { transition:none; } }
@media (max-width:720px) {
  body.era-2026 .team-card { grid-template-columns:104px minmax(0,1fr); align-content:start; }
  body.era-2026 .team-photo { grid-row:1 / span 3; align-self:start; }
  body.era-2026 .team-text { display:contents; }
  body.era-2026 .team-card .team-text > .team-name, body.era-2026 .team-card .team-text > .team-role, body.era-2026 .team-card .team-text > .team-degrees { grid-column:2; }
  body.era-2026 .team-card .team-text > .team-bio, body.era-2026 .team-card .team-text > .team-mail { grid-column:1 / -1; }
  body.era-2026 .team-card .team-text > .team-bio { margin-top:16px; }
  body.era-2026 .team-card .team-name { font-size:21px; }
}

/* ---- "Leistungen" dropdown in the main navigation (homepage and subpages) ---- */
body.era-2026 .nav-dd { position:relative; display:flex; align-items:center; gap:2px; }
body.era-2026 .nav-dd-btn { display:inline-grid; place-items:center; width:24px; height:24px; padding:0; border:0; border-radius:4px; background:none; color:var(--ink-dim); cursor:pointer; }
body.era-2026 .nav-dd-btn svg { width:12px; height:12px; transition:transform .2s ease; }
body.era-2026 .nav-dd-btn:hover, body.era-2026 .nav-dd.is-open .nav-dd-btn { color:var(--ink); }
body.era-2026 .nav-dd-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
body.era-2026 .nav-dd.is-open .nav-dd-btn svg { transform:rotate(180deg); }
body.era-2026 .nav-dd-menu { display:none; position:absolute; top:100%; left:-16px; z-index:60; min-width:230px; margin:0; padding:14px 0 0; list-style:none; }
body.era-2026 .nav-dd-menu::before { content:""; position:absolute; inset:10px 0 0; background:var(--bg); border:1px solid var(--line-2); border-radius:8px; box-shadow:0 18px 40px -18px rgba(0,0,0,.35); }
body.era-2026 .nav-dd-menu li { position:relative; }
body.era-2026 .nav-dd-menu li:first-child { margin-top:6px; }
body.era-2026 .nav-dd-menu li:last-child { margin-bottom:6px; }
body.era-2026 .nav-dd-menu a { display:block; padding:10px 18px; white-space:nowrap; }
body.era-2026 .nav-dd-menu a::after { display:none; }
body.era-2026 .nav-dd-menu a:hover, body.era-2026 .nav-dd-menu a:focus-visible { color:var(--accent); }
body.era-2026 .nav-dd:hover .nav-dd-menu, body.era-2026 .nav-dd.is-open .nav-dd-menu,
body.era-2026 .nav-dd:not(.js):focus-within .nav-dd-menu { display:block; }
body.era-2026 .lp-mainnav .nav-dd-menu a { display:block; padding:10px 18px; }
body.era-2026 .lp-mainnav ul.nav-dd-menu { padding-top:16px; }
@media (max-width:880px) {
  /* Homepage burger menu: show the services as an indented list */
  body.era-2026 #site-header.nav-open .nav-dd { flex-wrap:wrap; }
  body.era-2026 #site-header.nav-open .nav-dd-btn { display:none; }
  body.era-2026 #site-header.nav-open .nav-dd-menu { display:block; position:static; width:100%; min-width:0; padding:10px 0 0 14px; border-left:1px solid var(--line-2); margin-left:2px; }
  body.era-2026 #site-header.nav-open .nav-dd-menu::before { display:none; }
  body.era-2026 #site-header.nav-open .nav-dd-menu li { margin:0; }
  body.era-2026 #site-header.nav-open .nav-dd-menu a { padding:7px 0; font-size:13px; }
}
body.era-2026 .lp-mainnav ul.nav-dd-menu { display:none; gap:0; }
body.era-2026 .lp-mainnav .nav-dd:hover ul.nav-dd-menu, body.era-2026 .lp-mainnav .nav-dd.is-open ul.nav-dd-menu,
body.era-2026 .lp-mainnav .nav-dd:not(.js):focus-within ul.nav-dd-menu { display:block; }
body.era-2026 .lp-mainnav .nav-dd-menu a[aria-current="page"] { color:var(--accent); }

/* ---- AGB page ---- */
body.era-2026 .agb .section-kicker { margin-bottom:6px; }
body.era-2026 .agb-toc { margin:26px 0 8px; padding:18px 22px; border:1px solid var(--line-2); border-radius:8px; }
body.era-2026 .agb-toc ol { list-style:none; margin:0; padding:0; columns:260px; column-gap:28px; }
body.era-2026 .agb-toc li { margin:0 0 6px; break-inside:avoid; font-size:14.5px; }
body.era-2026 .agb-toc a { text-decoration:none; }
body.era-2026 .agb-toc a:hover { text-decoration:underline; }
body.era-2026 .agb h2 { scroll-margin-top:90px; }
body.era-2026 .agb-abs { list-style:none; counter-reset:abs; margin:0 0 10px; padding:0; }
body.era-2026 .agb-abs > li { counter-increment:abs; position:relative; padding-left:42px; margin-bottom:12px; }
body.era-2026 .agb-abs > li::before { content:"(" counter(abs) ")"; position:absolute; left:0; top:0; font:13px/1.9 var(--f-mono); color:var(--accent); }
body.era-2026 .agb-form { margin:26px 0 10px; padding:20px 24px; border:1px solid var(--line-2); border-radius:8px; }
body.era-2026 .agb-form h3 { margin-top:0; }
body.era-2026 .agb-form p { margin:0 0 8px; }
body.era-2026 .agb-form .agb-form-note { color:var(--ink-dim); }
@media print {
  body.era-2026 .legal-header, body.era-2026 #site-footer, body.era-2026 .agb-toc, body.era-2026 .legal-back { display:none; }
}

/* ---- web demo previews: real screenshots in a browser frame ---- */
body.era-2026 .port-grid-web .port-media.port-shot { height:auto; display:block; background:none; border:0; overflow:visible; }
body.era-2026 .shot-link { display:block; overflow:hidden; border:1px solid var(--line-2); border-radius:8px; background:var(--bg); box-shadow:0 14px 30px -22px rgba(0,0,0,.45); }
body.era-2026 .shot-bar { display:flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--ink) 5%, var(--bg)); }
body.era-2026 .shot-bar i { flex:none; width:7px; height:7px; border-radius:50%; background:var(--line-2); }
body.era-2026 .shot-bar em { min-width:0; margin-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:normal 10.5px/1 var(--f-mono); letter-spacing:.03em; color:var(--ink-dim); }
body.era-2026 .shot-link img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center; transition:transform .6s cubic-bezier(.16,1,.3,1); }
body.era-2026 .port-card:hover .shot-link img { transform:scale(1.025); }
/* the two wide cards in the second row show a wider slice of the page */
@media (min-width:1101px) {
  body.era-2026 .port-grid-web .port-card:nth-child(n+4) .shot-link img { aspect-ratio:2/1; }
}
body.era-2026 .port-grid-web .port-card::before { top:46px; right:22px; }
body.era-2026.theme-spectrum .shot-link { border-radius:0; }
@media (max-width:680px) {
  body.era-2026 .port-grid-web .port-card { display:flex; flex-direction:column; }
  body.era-2026 .port-grid-web .port-media.port-shot { height:auto; }
}
@media (prefers-reduced-motion: reduce) { body.era-2026 .shot-link img { transition:none; } }
@media (min-width:681px) and (max-width:1100px) {
  body.era-2026 .port-grid-web .port-card:last-child .shot-link img { aspect-ratio:2/1; }
}
body.era-2026 .lab-demo-theme .lab-time-hint { flex-basis:100%; margin:2px 0 0; }