/* onoria.de
   Layout: one working day in two columns. A sticky sky keeps the hour on the left while the
   case's seven stations scroll past on the right; everything else is left-aligned on one
   measure and stays quiet, so the sky is the one bold thing on the page.
   Type: Urbanist only, the wordmark's own face. Thin and large for the hours and headlines,
   regular for reading. Colour: the brand teal on cool morning mist; night, dawn, day and dusk
   appear only where the hour is shown. Every font and image is served from this site. */

@font-face{font-family:"Urbanist";src:url("../fonts/urbanist-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --mist:#EDF1F0;        /* page ground: cool morning mist with a trace of the brand teal */
  --sheet:#FFFFFF;       /* paper and screens */
  --ink:#132126;
  --ink-2:#42525A;
  --line:#C9D4D3;
  --teal:#2A6470;        /* the mark */
  --teal-ink:#FFFFFF;
  --teal-wash:#DCE8E7;
  --glow:#E2A66A;        /* dawn */
  --ground:#F7F9F8;      /* below the sky's horizon, where the hour is written */
  --bezel:#1B2529;
  --sky-day:linear-gradient(to top,#E9EFEE 0%,#CFE0E2 45%,#A9C6CC 100%);
  --sky-dawn:linear-gradient(to top,#F0B47A 0%,#EBCDAE 22%,#C3CDCD 60%,#8FAAB2 100%);
  --sky-dusk:linear-gradient(to top,#E39A63 0%,#D7B0A3 22%,#A49EB5 58%,#615F7E 100%);
  --sky-night:linear-gradient(to top,#1A333B 0%,#0F1F25 55%,#0A1518 100%);
  --sun:#2A6470;
  --dusk:#37344A;        /* the closing band, after sunset */
  --dusk-ink:#F2EEE7;
  --dusk-ink-2:#D3CCDA;
  --shadow:0 1px 2px rgba(19,33,38,.06),0 28px 56px -32px rgba(19,33,38,.35);
  --font:"Urbanist","Avenir Next","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --max:1280px;
  --header-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mist:#0D181C;--sheet:#14232A;--ink:#E7EDEC;--ink-2:#AEBBBE;--line:#263A40;
    --teal:#7DBAC4;--teal-ink:#0B1B1F;--teal-wash:#173238;--glow:#E0A262;--ground:#101E23;--bezel:#05090B;
    --sky-day:linear-gradient(to top,#3B5C63 0%,#2C4A52 45%,#1E3940 100%);
    --sun:#9FD0D8;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 28px 56px -30px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --mist:#0D181C;--sheet:#14232A;--ink:#E7EDEC;--ink-2:#AEBBBE;--line:#263A40;
  --teal:#7DBAC4;--teal-ink:#0B1B1F;--teal-wash:#173238;--glow:#E0A262;--ground:#101E23;--bezel:#05090B;
  --sky-day:linear-gradient(to top,#3B5C63 0%,#2C4A52 45%,#1E3940 100%);
  --sun:#9FD0D8;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 28px 56px -30px rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--mist);color:var(--ink);font:400 1.125rem/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol,dl,dd,figure{margin:0;padding:0}
img{display:block;max-width:100%;height:auto}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
::selection{background:color-mix(in srgb,var(--glow) 45%,transparent)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-64px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--teal);color:var(--teal-ink);font-weight:650;text-decoration:none}
.skip:focus{top:12px}
@media (max-width:600px){p{hyphens:auto}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:8px;font:600 1rem/1 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.btn-primary{background:var(--teal);color:var(--teal-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--teal) 86%,var(--ink))}
.btn-quiet{border-color:var(--line);color:var(--ink)}
.btn-quiet:hover{border-color:var(--teal);color:var(--teal)}
.btn-small{min-height:40px;padding:0 16px;font-size:.94rem}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--mist) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-bottom-color:var(--line)}
.header-row{display:flex;align-items:center;gap:32px;height:var(--header-h)}
.brand{display:block;border-radius:6px}
.logo{display:block;width:auto;height:32px;aspect-ratio:304/82}
.logo-mark{fill:var(--teal)}
.logo-word{fill:var(--ink-2)}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{padding:6px 0;color:var(--ink-2);font-size:.97rem;font-weight:550;text-decoration:none}
.nav a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:900px){.nav{display:none}.header-row .btn{margin-left:auto}}
@media (max-width:420px){:root{--header-h:60px}.logo{height:26px}.header-row .btn{padding:0 12px;font-size:.88rem}}

/* Hero: the logo's sun rises over a horizon that runs across the page. */
.hero{--mark-w:clamp(260px,22vw,330px);--mark-bottom:40px;position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(600px,calc(100svh - var(--header-h)),840px);padding:40px 0 calc(var(--mark-bottom) + var(--mark-w) * 15.5 / 76 + 40px)}
.hero-copy{position:relative;z-index:2;max-width:40rem}
.hero h1{margin-bottom:28px}
.h1-kicker{display:block;margin-bottom:20px;color:var(--teal);font-size:1.06rem;font-weight:650;line-height:1.4}
.h1-main{display:block;font-size:clamp(2.7rem,1.3rem + 4.4vw,5.1rem);font-weight:300;line-height:1.03;letter-spacing:-.03em}
.lead{max-width:34rem;color:var(--ink-2);font-size:clamp(1.12rem,1rem + .4vw,1.3rem)}
.hero .actions{margin-top:36px}
.trust{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:32px;list-style:none;color:var(--ink-2);font-size:.92rem;font-weight:550}
.hero-copy>*{animation:up 1s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:.15s}
.hero-copy>:nth-child(3){animation-delay:.3s}
.hero-copy>:nth-child(4){animation-delay:.45s}
@keyframes up{from{opacity:0;transform:translateY(14px)}}

.hero-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.dawn{position:absolute;bottom:var(--mark-bottom);right:max(calc(3vw + 60px),calc((100vw - var(--max)) / 2 + var(--gutter) + 80px));width:var(--mark-w);height:auto;overflow:visible}
.horizon{position:absolute;left:0;right:0;bottom:calc(var(--mark-bottom) + var(--mark-w) * 15.5 / 76);height:1px;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--teal) 62%,var(--line) 92%,transparent);opacity:.7;transform-origin:72% 50%;animation:grow 2s var(--ease) .1s both}
.dawn-sun,.dawn-bar{fill:var(--teal)}
.dawn-sun{animation:rise 2.8s cubic-bezier(.16,.84,.24,1) .2s both}
.halos circle{fill:none;stroke:var(--teal);stroke-width:1;transform-origin:50px 46px;animation:halo 2.4s var(--ease) both}
.halos circle:nth-child(1){opacity:.42;animation-delay:1.1s}
.halos circle:nth-child(2){opacity:.28;animation-delay:1.3s}
.halos circle:nth-child(3){opacity:.18;animation-delay:1.5s}
.halos circle:nth-child(4){opacity:.1;animation-delay:1.7s}
.dawn-glow{transform-origin:50px 62px;animation:glow 3.4s ease-out .5s both}
.dawn-bar{transform-box:fill-box;transform-origin:center;animation:grow 1.2s var(--ease) both}
.dawn-bar-2{animation-delay:.25s}
.glow-stop{stop-color:var(--glow)}
@keyframes halo{from{opacity:0;transform:scale(.82)}}
@keyframes rise{from{transform:translateY(49px)}to{transform:none}}
@keyframes glow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
/* On narrow screens the sun comes first, above the headline, so it is seen without scrolling. */
@media (max-width:1099px){
  .hero{--mark-w:min(40vw,200px);--mark-bottom:16px;flex-direction:column;align-items:stretch;min-height:0;padding:0 0 56px}
  .hero-art{position:relative;inset:auto;order:-1;height:calc(var(--mark-w) * 100 / 76 + var(--mark-bottom));margin-bottom:8px}
  .dawn{right:auto;left:50%;margin-left:calc(var(--mark-w) / -2)}
  .horizon{transform-origin:50% 50%}
  .halos circle:nth-child(n+3){display:none}
}

/* The day */
.day{padding-block:clamp(72px,9vw,128px) clamp(40px,6vw,80px)}
.day-head{max-width:44rem;margin-bottom:clamp(40px,6vw,72px)}
.day-head h2,.section-head h2{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.4rem);font-weight:350;line-height:1.08;letter-spacing:-.02em}
.day-head p,.section-head p{max-width:40rem;margin-top:20px;color:var(--ink-2);font-size:1.18rem}
.section-head p+p{margin-top:12px}
.day-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}

.sky{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 24px);display:grid;grid-template-areas:"air" "horizon" "ground";grid-template-rows:minmax(0,1fr) 8px auto;height:min(calc(100svh - var(--header-h) - 48px),760px);min-height:460px;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--ground)}
.sky-air{grid-area:air;position:relative;overflow:hidden}
.sky-layer{position:absolute;inset:0}
.sky-day{background:var(--sky-day)}
.sky-dawn{background:var(--sky-dawn);opacity:0}
.sky-dusk{background:var(--sky-dusk);opacity:0}
.sky-night{background:var(--sky-night)}
.sun-glow{position:absolute;left:0;top:0;width:var(--glow-d,300px);height:var(--glow-d,300px);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 70%,transparent),transparent);opacity:0;will-change:transform,opacity}
.sky-path{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--sun);stroke-width:1.5;stroke-dasharray:1 7;stroke-linecap:round;opacity:.45}
.sun{position:absolute;left:0;top:0;width:var(--sun-d,96px);height:var(--sun-d,96px);fill:none;stroke:var(--sun);stroke-width:10;overflow:visible;will-change:transform;transform:translate(-200px,999px)}
.sky-horizon{grid-area:horizon;background:var(--teal)}
.sky-ground{grid-area:ground;padding:18px 28px 26px}
.clock{font-size:clamp(4.5rem,8vw,9rem);font-weight:200;line-height:1;letter-spacing:-.02em}
.clock .d{display:inline-block;width:.56em;text-align:center}
.clock .c{display:inline-block;width:.24em;text-align:center}
.clock-step{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-top:10px;font-size:1.15rem;font-weight:650}
.clock-of{color:var(--ink-2);font-size:.95rem;font-weight:500}
@media (scripting:none){.sky{display:none}.day-grid{grid-template-columns:minmax(0,1fr)}}

.stations{list-style:none}
.station{padding-block:clamp(48px,11vh,120px)}
.station:first-child{padding-top:0}
.station-time{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:14px}
.station-time time{color:var(--teal);font-size:1.5rem;font-weight:300;letter-spacing:-.01em}
.station-step{color:var(--ink-2);font-size:1rem;font-weight:650}
.station h3{max-width:28ch;font-size:clamp(1.65rem,1.2rem + 1.3vw,2.3rem);font-weight:400;line-height:1.14;letter-spacing:-.015em}
.station-text{max-width:36rem;margin-top:18px;color:var(--ink-2)}

/* What Onoria takes care of, ticked like the boxes on the Abholschein. */
.facts{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:22px;list-style:none;font-size:.98rem;font-weight:550}
.facts li{display:flex;align-items:center;gap:9px}
.facts li::before{content:"";flex:none;width:14px;height:14px;border:1.5px solid var(--teal);border-radius:2px;background:linear-gradient(45deg,transparent 44%,var(--teal) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--teal) 44% 56%,transparent 56%)}

.shot{margin-top:36px}
.shot figcaption{margin-top:14px;color:var(--ink-2);font-size:.95rem}
.shot-screen img{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--sheet);box-shadow:var(--shadow)}
.shot-phone img{width:min(300px,72vw);border:8px solid var(--bezel);border-radius:40px;background:var(--bezel);box-shadow:var(--shadow)}
.net-frames{display:grid}
.net-frame{grid-area:1/1}
.shot-network figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;max-width:34rem}
.switch{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 10px 0 16px;border:1px solid var(--line);border-radius:999px;background:var(--sheet);color:var(--ink);font:600 1rem var(--font);cursor:pointer}
.switch-track{position:relative;width:42px;height:24px;border-radius:12px;background:var(--line);transition:background-color .2s}
.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--sheet);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.switch[aria-pressed="true"] .switch-track{background:var(--teal)}
.switch[aria-pressed="true"] .switch-track::after{transform:translateX(18px)}
.net-note{flex:1 1 16rem}
@media (scripting:none){.switch{display:none}}

/* Paper: Onoria's own documents, laid on the page as printed sheets. */
.papers{display:grid;width:min(520px,100%)}
.paper{grid-area:1/1;width:100%;background:#fff;border:1px solid rgba(19,33,38,.12);box-shadow:0 1px 1px rgba(19,33,38,.08),0 18px 40px -22px rgba(19,33,38,.45)}
.papers-3 .papers{padding:0 12% 9% 0}
.papers-3 .paper:nth-child(1){transform:translate(18%,9%) rotate(3deg)}
.papers-3 .paper:nth-child(2){transform:translate(9%,4.5%) rotate(-1.5deg)}
.papers-3 .paper{width:88%}
.papers-1 .paper{transform:rotate(-1deg)}

/* Sections after the day */
.section{padding-block:clamp(72px,9vw,128px);border-top:1px solid var(--line)}
.section-head{max-width:44rem;margin-bottom:clamp(32px,5vw,56px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.split .section-head{margin-bottom:0}

/* Security, set like the Sterbezettel: labels on the left, values on ruled lines. */
.sheet{padding:clamp(20px,3vw,40px);border:1px solid var(--line);border-radius:4px;background:var(--sheet);box-shadow:var(--shadow)}
.sheet>div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:4px 24px;padding:14px 0;border-bottom:1px solid var(--line)}
.sheet>div:last-child{border-bottom:0}
.sheet dt{color:var(--ink-2);font-size:.95rem;font-weight:600}
.sheet dd{font-size:1.02rem}

.adapt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);list-style:none}
.adapt h3,.modules h3,.qa h3{font-size:1.4rem;font-weight:500;line-height:1.25}
.adapt p{margin-top:10px;color:var(--ink-2)}
.adapt .module,.module{color:var(--teal);font-size:.95rem;font-weight:650}

.modules dl{margin-top:16px}
.modules dl>div{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:4px 24px;padding:14px 0;border-top:1px solid var(--line)}
.modules dt{font-weight:650}
.modules dd{color:var(--ink-2)}

.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(32px,6vw,96px)}
.qa p{margin-top:10px;color:var(--ink-2)}

/* After sunset: the call to action */
.closing{padding-block:clamp(80px,10vw,140px);background:linear-gradient(to bottom,var(--dusk) 0%,#2B2A3B 100%);color:var(--dusk-ink)}
.closing-inner{display:grid;justify-items:start;gap:22px}
.closing-inner>*{max-width:44rem}
.dusk-sun{width:76px;height:auto;fill:var(--glow)}
.closing h2{font-size:clamp(2.3rem,1.4rem + 3vw,3.8rem);font-weight:300;line-height:1.05;letter-spacing:-.025em}
.closing p{color:var(--dusk-ink-2);font-size:1.18rem}
.closing .mail a{color:var(--dusk-ink)}
.closing .btn-light{background:var(--dusk-ink);color:#25233A}
.closing .btn-light:hover{background:#FFFFFF}
.closing .actions{margin-top:8px}

/* Footer */
.site-footer{padding-block:40px 48px;border-top:1px solid var(--line);color:var(--ink-2);font-size:.95rem}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.site-footer .logo{height:26px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none}
.foot-links a{color:var(--ink-2)}

/* Imprint, privacy, 404 */
.legal{max-width:calc(44rem + 2 * var(--gutter));padding-block:clamp(56px,8vw,104px)}
.legal h1{margin-bottom:28px;font-size:clamp(2.3rem,1.6rem + 2.2vw,3.2rem);font-weight:350;line-height:1.08}
.legal h2{margin:40px 0 10px;font-size:1.4rem;font-weight:500}
.legal p{margin-bottom:14px;color:var(--ink-2)}
.legal .draft{padding:14px 18px;border-radius:8px;background:color-mix(in srgb,var(--glow) 22%,var(--mist));color:var(--ink)}
.not-found .dusk-sun{fill:var(--teal);margin-bottom:28px}

/* Narrow screens: the sky becomes a slim band under the header, still keeping the hour. */
@media (max-width:959px){
  html{scroll-padding-top:calc(var(--header-h) + 96px)}
  .day-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .sky{z-index:20;top:calc(env(safe-area-inset-top,0px) + var(--header-h));grid-template-areas:"air ground" "horizon ground";grid-template-columns:116px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 4px;height:72px;min-height:0;margin:0 calc(-1 * var(--gutter)) 32px;border-width:0 0 1px;border-radius:0}
  .sky-ground{display:flex;align-items:center;gap:14px;padding:0 var(--gutter) 0 16px}
  .clock{font-size:2.1rem;font-weight:300}
  .clock-step{display:block;margin:0;font-size:1rem;line-height:1.3}
  .clock-of{display:block;font-size:.85rem}
  .station{padding-block:40px 56px}
  .split,.faq{grid-template-columns:minmax(0,1fr)}
  .adapt{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .sheet>div,.modules dl>div{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
@media (forced-colors:active){
  .logo-mark,.logo-word,.dawn-sun,.dawn-bar,.dusk-sun{fill:CanvasText}
  .sun{stroke:CanvasText}
}