/* ISTARIUM — smart solutions Sovereign dark landing. Self-contained: fonts + logo are local (relative paths). Palette: brand navy #2B2E83, warm ember #E94E1B. Type: Roboto (Light-led). */ /* ---- Fonts (local woff2, resolved relative to this stylesheet) ---- */ @font-face{font-family:"Roboto";font-style:normal;font-weight:300;font-display:swap;src:url("Roboto-Light.woff2") format("woff2");} @font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("Roboto-Medium.woff2") format("woff2");} /* ---- Tokens ---- */ :root{ --sky-top:#080915; --sky-mid:#101229; --sky-low:#1a1d45; --navy:#2B2E83; --ember:#E94E1B; --ember-soft:#f0693b; --text:#edeef6; --muted:#9698ba; /* 4.55:1 on the footer #080915 — clears WCAG AA for the legal text and the brand line. Lifted from #6d6f93 (4.10:1) on 2026-07-17. Consumers on LIGHTER panels (.scrollcue on the hero's #1a1d45 bottom, .contact__hint[checking] on #0d0f24) still sit under 4.5:1 — improved by this lift, but not yet fixed. */ --faint:#74769e; --line:rgba(237,238,246,.12); --line-strong:rgba(237,238,246,.24); --ease:cubic-bezier(.22,.61,.36,1); /* Height of the conditional legacy-brand notice bar (see index.php). 0 unless the bar is shown; then set once, in px, on by the notice script. Everything that must yield to the bar reads THIS — never a hardcoded number — so a 2-line wrap on narrow phones reserves its real space automatically. */ --icg-notice-h:0px; /* The page gutter: the single horizontal inset every full-width element starts at. The topbar logo, the hero logo and the .wrap content column all sit on this line, so anything that must align with the logo reads THIS, never a copy of the clamp. */ --gutter:clamp(22px,6vw,72px); /* Dark panels/foot/scrim tokenised so the light theme (html[data-theme="light"]) can flip them from ONE place — never a second hardcoded #08.. copy. --fade is the rgb triple the hero ridge fades to, used as rgba(var(--fade),a). */ --panel:#0d0f24; --foot-bg:#080915; --scrim:rgba(8,9,21,.86); --fade:8,9,21; /* The two section bands carry their own gradients as WHOLE tokens so the light theme flips them from ONE place — the old hardcoded #14163a/#101228/#0e1024 stops stayed dark under light mode and swallowed the (now dark) text. */ --band-essence:linear-gradient(180deg,var(--sky-low) 0%, #14163a 55%, #101228 100%); --band-work:linear-gradient(180deg,#101228 0%, #0e1024 100%); /* Partner band: bridges band--work's end stop into --panel (band--contact), so the two read as one continuous surface with only the hairline between them. */ --band-partners:linear-gradient(180deg,#0e1024 0%, var(--panel) 100%); /* Text colour on hover of the bordered CTAs (#fff on dark). Tokenised because plain white is invisible on the light theme — see the override below. */ --onhover:#fff; /* Header control chips (language + reading aid). Active/hover share the accent look. */ --btn-bg:rgba(237,238,246,.06); --btn-active-bg:rgba(233,78,27,.18); --btn-active-fg:#fff; /* Reading-aid font scale — the A / A+ / A++ stepper multiplies page zoom. */ --fs-scale:1; } /* ---- Light / high-contrast theme (reading aid) -------------------------------- One switch, one variable set. Dark text on near-white, ember darkened to clear WCAG AA as body text, navy kept as accent. Everything downstream reads the same tokens, so the whole site flips without touching a single component rule. */ html[data-theme="light"]{ --sky-top:#f5f6fb; --sky-mid:#eef0f8; --sky-low:#e4e7f3; --navy:#2B2E83; /* 8.6:1 on white — strong as an accent, kept */ --ember:#bc3a0e; /* 4.9:1 on the light sky — AA as text/accent */ --text:#14162b; /* ~15:1 */ --muted:#3c3e5c; /* ~8:1 */ --faint:#565879; /* ~5:1 — AA */ --line:rgba(20,22,43,.16); --line-strong:rgba(20,22,43,.30); --panel:#e8eaf6; --foot-bg:#e4e7f3; --scrim:rgba(20,22,43,.45); --fade:245,246,251; --btn-bg:rgba(20,22,43,.05); --btn-active-bg:var(--ember); --btn-active-fg:#fff; /* white on darkened ember — AA */ /* Section bands: near-white with a whisper of the sky tint, so the dark stops that used to swallow the text are gone. */ --band-essence:linear-gradient(180deg,var(--sky-low) 0%, #edeff8 55%, #f5f6fb 100%); --band-work:linear-gradient(180deg,#f5f6fb 0%, #edeff8 100%); --band-partners:linear-gradient(180deg,#edeff8 0%, var(--panel) 100%); --onhover:var(--navy); /* navy on white — 8.6:1, replaces the invisible #fff */ } /* Damp the ember dawn atmospherics so they read as warmth, not glare, on light. */ html[data-theme="light"] .hero__glow{opacity:.45;} html[data-theme="light"] .hero__fog{opacity:.4;} /* Logo: the shipped mark is white-on-dark and vanishes on the light theme. Swap all three placements (topbar, hero, footer) to the full-colour navy+ember mark. */ html[data-theme="light"] .topbar__mark img, html[data-theme="light"] img.hero__logo, html[data-theme="light"] img.pair__logo--iss, html[data-theme="light"] img.crew__hub, html[data-theme="light"] .foot__brand img{content:url("ISTARIUM_Logo_dark.png");} /* Dasselbe für den MAI-Advisory-Schriftzug: ausgeliefert wird die Negativ-Fassung (weiß), die auf hellem Grund verschwindet. Namenskonvention wie bei ISTARIUM — „light" = helles Logo für dunklen Grund, „dark" = dunkles Logo für hellen. */ html[data-theme="light"] img.pair__logo--map{content:url("MAP_Logo_dark.png");} /* Brand presence on light: the big display type carries ISTARIUM navy instead of the near-black ink — navy as TYPE, not as a background. Body/muted copy stays neutral. */ html[data-theme="light"] .promise, html[data-theme="light"] .uses__name, html[data-theme="light"] .lines p, html[data-theme="light"] .contact__lead, html[data-theme="light"] .who__name{color:var(--navy);} /* Soft cross-fade when the reader flips the switch. */ body,.band--contact,.foot{transition:background-color .35s var(--ease),color .35s var(--ease);} *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;zoom:var(--fs-scale,1);} body{ margin:0; font-family:"Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif; font-weight:300; color:var(--text); background:var(--sky-top); line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ::selection{background:rgba(233,78,27,.32);color:#fff;} /* Focus visibility (a11y floor) */ :focus-visible{outline:2px solid var(--ember-soft);outline-offset:3px;border-radius:2px;} /* ---- Shell / rhythm ---- */ /* EINE Textspalte für die ganze Seite (Owner 2026-08-30). Vorher hatte jeder Block sein eigenes Maß (bandtext 62ch, uses 720, duo 860, pair/crew 880) — im Scroll sprangen die rechten Kanten und die Seite wirkte unruhig. Maßgeblich ist die Breite, die ISTARIUM + MAI Advisory nebeneinander aufspannen: 880px. Jeder Fließtext und jeder Block hängt jetzt an --measure, nirgends mehr eine eigene Zahl. */ :root{--measure:880px;} .wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--gutter);} .eyebrow{ font-size:12px;font-weight:500;letter-spacing:.34em;text-transform:uppercase; color:var(--ember);margin:0 0 clamp(20px,3vw,34px); display:inline-flex;align-items:center;gap:14px; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--ember);opacity:.75;} /* ---- Top bar ---- */ /* Absolute against the initial containing block (document top), so it overlays the hero artwork. The notice bar is in normal flow ABOVE it, so the bar's height is exactly the topbar's start offset — logo and bar can never collide. */ .topbar{ position:absolute;top:var(--icg-notice-h);left:0;right:0;z-index:6; display:flex;align-items:center;justify-content:space-between; padding:clamp(20px,3.4vw,34px) var(--gutter); } .topbar__mark img{height:22px;width:auto;opacity:.92;} /* Header controls: language + reading aid (light/contrast toggle + font stepper). Rendered as chip buttons — same visual family as the contact CTAs — so older visitors actually SEE the language + reading options before they scroll. */ .topbar__tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;} .lang{display:flex;align-items:center;gap:8px;} .a11y{display:flex;align-items:center;gap:10px;} .fs{display:inline-flex;} .lang a,.tbtn{ font-family:inherit;font-size:14px;font-weight:500;letter-spacing:.05em;line-height:1; color:var(--text);background:var(--btn-bg); border:1px solid var(--line-strong);border-radius:999px; padding:9px 15px;cursor:pointer;white-space:nowrap; display:inline-flex;align-items:center;gap:8px; transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease); } .lang a:hover,.tbtn:hover, .lang a[aria-current="true"], .fs__btn[aria-pressed="true"], .tbtn--theme[aria-pressed="true"]{ border-color:var(--ember);background:var(--btn-active-bg);color:var(--btn-active-fg); } .tbtn--theme .tbtn__icon{font-size:16px;line-height:1;} /* Segmented A / A+ / A++ — one connected control */ .fs__btn{border-radius:0;border-left-width:0;padding-inline:13px;min-width:38px;justify-content:center;} .fs__btn:first-child{border-left-width:1px;border-top-left-radius:999px;border-bottom-left-radius:999px;} .fs__btn:last-child{border-top-right-radius:999px;border-bottom-right-radius:999px;} @media (max-width:640px){ .topbar{flex-wrap:wrap;gap:12px 14px;} .tbtn--theme .tbtn__lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;} } /* ================= HERO ================= */ .hero{ position:relative; /* The notice bar consumes real space at the top of the document, so the hero shrinks by exactly that much: bar + hero still equal one fold, never more. */ min-height:calc(100svh - var(--icg-notice-h)); display:flex;flex-direction:column;justify-content:center; overflow:hidden; isolation:isolate; /* Sky depth gradient — always present, reads as pre-dawn navy sky */ background: radial-gradient(120% 88% at 50% 118%, rgba(43,46,131,.55) 0%, rgba(43,46,131,0) 46%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%); } /* (1) OPTIONAL licensed photograph goes here — drop an INDUSTRIAL/plant key-visual (a production complex / works on the horizon) and it slots straight in beneath the atmosphere overlays; no layout changes needed. Uncomment and set the file: .hero__photo{ background-image:url("hero.jpg"); } */ .hero__photo{ position:absolute;inset:0;z-index:-3; background-size:cover;background-position:center 62%;background-repeat:no-repeat; /* background-image: none; <-- set a licensed INDUSTRIAL/plant photo here later */ } /* (2) Ember dawn glow rising off the horizon */ .hero__glow{ position:absolute;left:50%;bottom:-6%;z-index:-2; width:min(1400px,150%);height:62%;transform:translateX(-50%); background: radial-gradient(60% 100% at 50% 102%, rgba(233,78,27,.55) 0%, rgba(233,78,27,.22) 30%, rgba(233,78,27,0) 64%), radial-gradient(38% 78% at 50% 102%, rgba(246,140,80,.6) 0%, rgba(246,140,80,0) 58%), radial-gradient(24% 52% at 50% 104%, rgba(255,196,150,.5) 0%, rgba(255,196,150,0) 60%); filter:blur(5px); pointer-events:none; animation:dawn 14s ease-in-out infinite; } /* (3) Soft fog bands drifting above the skyline */ .hero__fog{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;} .hero__fog span{ position:absolute;left:-10%;right:-10%;height:120px;border-radius:50%; background:radial-gradient(closest-side, rgba(180,186,225,.10), rgba(180,186,225,0)); filter:blur(10px); } .hero__fog span:nth-child(1){bottom:22%;height:180px;opacity:.8;} .hero__fog span:nth-child(2){bottom:30%;left:8%;right:24%;height:120px;opacity:.55;} .hero__fog span:nth-child(3){bottom:14%;left:-6%;right:40%;height:150px;opacity:.5;} /* (4) Layered industrial silhouette: pale far plant in fog + darker near plant */ .hero__ridge{ position:absolute;left:0;right:0;bottom:0;z-index:-1; width:100%;height:min(46vh,420px); pointer-events:none; } .hero__ridge svg{width:100%;height:100%;display:block;} /* (5) Legibility scrim */ .hero::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg, rgba(var(--fade),.55) 0%, rgba(var(--fade),0) 26%, rgba(var(--fade),0) 60%, rgba(var(--fade),.28) 100%); } /* Hero content */ .hero__inner{position:relative;z-index:2;} .hero__logo{ height:clamp(46px,8.4vw,116px);width:auto; filter:drop-shadow(0 6px 30px rgba(0,0,0,.45)); } /* Nur für Maschinen sichtbar: Text, der im Accessibility-Tree und für Crawler da ist, aber kein Pixel belegt. Nicht display:none — das nähme ihn auch dem Screenreader. Genutzt vom Markennamen in der Hero-

. */ .u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .lockup{ margin:clamp(18px,2.4vw,30px) 0 0; font-weight:300;color:var(--ember-soft); font-size:clamp(15px,2.3vw,26px); letter-spacing:.26em;text-transform:lowercase; } .promise{ margin:clamp(26px,4vw,44px) 0 0; font-weight:300;color:var(--text); font-size:clamp(19px,2.7vw,31px); line-height:1.4;letter-spacing:.005em; max-width:22ch; } /* Discreet scroll cue */ .scrollcue{ position:absolute;left:var(--gutter);bottom:clamp(26px,4vw,44px);z-index:3; display:inline-flex;flex-direction:column;align-items:center;gap:10px; font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted); transition:color .35s var(--ease); } .scrollcue:hover{color:var(--muted);} .scrollcue i{width:1px;height:56px;background:linear-gradient(var(--faint),transparent);display:block;} .scrollcue i::after{ content:"";position:absolute;left:50%;top:0;width:1px;height:18px;background:var(--ember); transform:translateX(-50%);animation:trickle 3.4s var(--ease) infinite; } .scrollcue span{writing-mode:vertical-rl;} /* ================= SECTIONS ================= */ .band{position:relative;padding-block:clamp(96px,17vh,190px);} .band--essence{ background:var(--band-essence); border-top:1px solid var(--line); } .band--work{background:var(--band-work);border-top:1px solid var(--line);} .band--contact{background:var(--panel);border-top:1px solid var(--line);} /* Deliberately shallower than the content bands: suppliers are a footnote of substance, not a chapter. Reuses .uses for the list so no second list idiom enters the page. */ .band--partners{ background:var(--band-partners);border-top:1px solid var(--line); padding-block:clamp(64px,11vh,120px); } /* Use cases — cryptic, sparse. A bold name + one quiet line each. */ .uses{list-style:none;margin:0;padding:0;max-width:min(100%,var(--measure));display:grid;gap:0;} .uses li{ display:grid;gap:8px; padding-block:clamp(22px,3vw,32px); border-bottom:1px solid var(--line); } .uses li:first-child{padding-top:0;} .uses li:last-child{border-bottom:0;} /* Die Überschrift IST der Auslöser des Zugangsdialogs — als