/* ju-ser.de – "Die Akte". Single stylesheet, mobile-first, no framework.
   World: a well-kept case file. White sheet, ink, hairline form rules, a margin column for
   real references (§§, Fristen, Jahre), Juser blue as the Aktenreiter colour for actions. */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-400.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/montserrat-600.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-700.woff2) format("woff2")}

:root{
  --brand:#275fa3;          /* Juser blue (fixed brand colour), AA on white and on --surface */
  --brand-strong:#1d4a82;
  --brand-bright:#4189e0;   /* logo blue: focus ring */
  --ink:#1c2631;
  --ink-2:#47525e;          /* secondary text, 7.6:1 on white */
  --rule:#cfd6dd;           /* hairline form rules */
  --rule-strong:#9aa5b1;
  --surface:#f1f3f5;        /* figures, forms, quiet fields */
  --surface-2:#e6eaee;
  --deep:#13263f;           /* deep field (KI on home, footer) */
  --paper:#fff;
  --accent:var(--brand);
  --ki:#6d46c9;             /* JuserKI violet, /ki/ only */

  --face-display:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --face-text:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-body:1rem;
  --lh-body:1.65;

  --t-s:.875rem;
  --t-l:1.1875rem;
  --t-h3:1.25rem;
  --t-h2:clamp(1.65rem,1.15rem + 1.9vw,2.5rem);
  --t-h1:clamp(2.2rem,1.1rem + 4.2vw,4.25rem);

  --wrap:1200px;
  --gutter:clamp(1.25rem,.6rem + 2.6vw,2.5rem);
  --sec:clamp(3.75rem,2.4rem + 5vw,7rem);
  --r:3px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --shadow-2:0 2px 4px rgba(19,38,63,.06),0 14px 34px rgba(19,38,63,.12);
}
/* JuserKI pages: violet takes over the accent role (links/rules stay readable) */
.section-ki,.ki-accent{--accent:var(--ki)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/var(--lh-body) var(--face-text);font-kerning:normal;text-rendering:optimizeLegibility}
::selection{background:#cfe0f5;color:var(--ink)}
img,picture,svg{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--brand);text-decoration-thickness:.07em;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:color 150ms ease,text-decoration-color 150ms ease}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--brand-strong);text-decoration-color:currentColor}}
:focus-visible{outline:2px solid var(--brand-bright);outline-offset:3px;border-radius:2px}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--face-display);font-weight:600;line-height:1.12;margin:0 0 .55em;color:var(--ink);text-wrap:balance}
h1{font-size:var(--t-h1);line-height:1.04;letter-spacing:-.032em;max-width:18ch}
h2{font-size:var(--t-h2);letter-spacing:-.022em}
h3{font-size:var(--t-h3);letter-spacing:-.012em;line-height:1.25}
/* safety net for long German compounds on small phones */
@media (max-width:480px){h1,h2{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}}
@media (max-width:380px){h1{font-size:2rem}h2{font-size:1.5rem}}
p,ul,ol{margin:0 0 1em}
p,li,dd{text-wrap:pretty}
ul,ol{padding-left:1.2em}
small,.small{font-size:var(--t-s)}
.muted{color:var(--ink-2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Labels over headings are retired in this world. */
.eyebrow{display:none}

/* ---- header / nav ---- */
.site-header{background:var(--paper);position:relative;z-index:50;border-bottom:1px solid var(--rule)}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem;min-height:72px}
.brand{display:block}
.brand img{width:132px;height:36px}
.nav-btn{display:inline-flex;align-items:center;gap:.6rem;background:none;border:0;padding:.7rem .25rem;font:600 1rem/1 var(--face-display);color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.nav-btn-bars{position:relative;width:20px;height:2px;background:currentColor;transition:background-color 150ms ease}
.nav-btn-bars::before,.nav-btn-bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform 200ms var(--ease-out)}
.nav-btn-bars::before{transform:translateY(-6px)}
.nav-btn-bars::after{transform:translateY(6px)}
.nav-open .nav-btn-bars{background:transparent}
.nav-open .nav-btn-bars::before{transform:rotate(45deg)}
.nav-open .nav-btn-bars::after{transform:rotate(-45deg)}
.site-nav{display:none;flex-basis:100%;padding:.25rem 0 1.25rem}
.nav-open .site-nav,.no-js .site-nav{display:block}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav a{display:block;padding:.7rem 0;text-decoration:none;color:var(--ink);font:600 1rem/1.3 var(--face-display);border-radius:2px}
.site-nav>ul>li{border-top:1px solid var(--rule)}
.site-nav li li a{font-weight:400;font-family:var(--face-text);padding:.55rem 0 .55rem 1rem;color:var(--ink-2)}
.site-nav .nav-cta{border-top:0;margin-top:1rem}
.site-nav .nav-cta .btn,.site-nav .nav-cta .btn:hover{display:inline-block;color:#fff;padding:.85rem 1.4rem}
@media (min-width:960px){
  .nav-btn{display:none}
  .site-nav{display:block;flex-basis:auto;padding:0}
  .site-nav>ul{display:flex;align-items:center;gap:.15rem}
  .site-nav>ul>li{border-top:0}
  .site-nav a{padding:.6rem .7rem;font-size:.95rem}
  @media (hover:hover){.site-nav>ul>li>a:hover{color:var(--brand)}}
  .has-sub{position:relative}
  .has-sub>ul{position:absolute;top:calc(100% + 4px);left:0;min-width:260px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow-2);padding:.4rem;
    display:block;visibility:hidden;opacity:0;transform:translateY(-4px);transform-origin:top left;
    transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out),visibility 0s linear 150ms}
  .has-sub:hover>ul,.has-sub:focus-within>ul{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .site-nav li li a{padding:.5rem .7rem;color:var(--ink);white-space:nowrap}
  @media (hover:hover){.site-nav li li a:hover{background:var(--surface);color:var(--ink)}}
  .site-nav .nav-cta{margin:0 0 0 .6rem}
  .site-nav .nav-cta .btn{padding:.6rem 1rem}
}

/* ---- buttons ---- */
.btn{cursor:pointer;display:inline-block;background:var(--brand);color:#fff;font:600 1rem/1.2 var(--face-display);letter-spacing:-.005em;text-decoration:none;padding:.85rem 1.4rem;border-radius:var(--r);border:0;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  transition:background-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--brand-strong);color:#fff}}
/* secondary actions are text links in this world */
.btn-secondary{background:none;color:var(--brand);padding:.85rem .2rem;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.25em}
@media (hover:hover) and (pointer:fine){.btn-secondary:hover{background:none;color:var(--brand-strong)}}
.btn-light{background:#fff;color:var(--brand)}
@media (hover:hover) and (pointer:fine){.btn-light:hover{background:#e7eef8;color:var(--brand-strong)}}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin:1.75rem 0 0}

/* ---- sections & rhythm ---- */
.section{padding:var(--sec) 0}
.section:not(.section-tint):not(.section-accent)+.section:not(.section-tint):not(.section-accent){padding-top:0}
.section-tint,.section-accent{background:var(--surface)}
.lead{font-size:var(--t-l);line-height:1.55;color:var(--ink);max-width:58ch}
.intro{max-width:64ch;color:var(--ink-2)}
.page-head{padding-top:clamp(1.5rem,1rem + 2vw,3rem);padding-bottom:clamp(1rem,.5rem + 2vw,2.5rem)}
.page-head .lead{max-width:60ch}

/* margin column (Randspalte): references that carry information */
.marg{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.marg li{border-top:1px solid var(--rule);padding-top:.7rem;font-size:var(--t-s);line-height:1.45;color:var(--ink-2)}
.marg b{display:block;font:600 1.15rem/1.2 var(--face-display);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-bottom:.15rem}
.marg a{color:inherit}

/* statement opening: margin column + main column */
.stmt{padding:clamp(2.25rem,1.2rem + 4vw,5rem) 0 clamp(2rem,1rem + 3vw,4rem)}
.stmt-grid{display:grid;gap:2rem}
.stmt .lead{margin-top:.25rem}
.stmt .marg{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
@media (min-width:1000px){
  .stmt-grid{grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:3rem;align-items:start}
  .stmt-grid>.marg{grid-template-columns:1fr;order:-1;padding-top:.9rem}
}

/* rows: heading in the left column, content on the right */
.rows{display:grid;gap:1.25rem}
.rows>*{min-width:0}
@media (min-width:1000px){
  .rows{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:3rem;align-items:start}
  .rows>.rows-head{position:sticky;top:2rem}
}
.rows-head h2{margin-bottom:.4rem}
@media (min-width:1000px){.rows-head h2{font-size:clamp(1.6rem,.9rem + 1.25vw,2.15rem);hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 6 6}}
.rows-head p{color:var(--ink-2);font-size:var(--t-s);margin:0}
.rows-body>:last-child{margin-bottom:0}

/* ---- the boundary (signature): Umgebung des Trägers ---- */
.boundary{display:grid;gap:1.25rem;margin-top:clamp(1.5rem,1rem + 2vw,3rem)}
.bnd-in{position:relative;border:2px dashed var(--brand);border-radius:var(--r);padding:2.4rem clamp(1rem,.6rem + 1.5vw,1.75rem) 1.4rem}
.bnd-label{position:absolute;top:-.85rem;left:1rem;background:var(--paper);padding:0 .5rem;font:600 .95rem/1.6 var(--face-display);color:var(--brand)}
.bnd-sub{font-size:var(--t-s);color:var(--ink-2);margin:-.9rem 0 1rem}
.bnd-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:700px){.bnd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bnd-grid li{background:var(--surface);border-radius:var(--r);padding:1rem 1.1rem 1.1rem}
.bnd-grid b{display:block;font:600 1.05rem/1.25 var(--face-display);margin-bottom:.3rem}
.bnd-grid span{display:block;font-size:var(--t-s);color:var(--ink-2);line-height:1.45}
.bnd-grid .is-ki{background:#ece7fa}
.bnd-grid .is-ki b{color:#4f2fa3}
.bnd-out{display:grid;gap:.6rem;align-content:center}
.bnd-out .bnd-gate{font-size:var(--t-s);color:var(--ink-2);display:flex;align-items:center;gap:.6rem}
.bnd-out .bnd-gate::before{content:"";flex:none;width:2.5rem;height:0;border-top:2px solid var(--rule-strong)}
.bnd-out .bnd-ext{border:1px solid var(--rule-strong);border-radius:var(--r);padding:1rem 1.1rem}
.bnd-out b{display:block;font:600 1.05rem/1.25 var(--face-display);margin-bottom:.3rem}
.bnd-out span{display:block;font-size:var(--t-s);color:var(--ink-2);line-height:1.45}
.boundary figcaption{grid-column:1/-1;margin-top:.25rem}
@media (min-width:1000px){.boundary{grid-template-columns:minmax(0,9fr) minmax(0,3fr);column-gap:0;align-items:center}
  .bnd-out .bnd-gate{margin-left:-1px}
  .bnd-out .bnd-gate::before{width:2rem}
  .bnd-out{padding-left:0}}

/* ---- process line (Weg einer Hilfe) ---- */
.process,.flow,.steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.75rem 1.5rem;counter-reset:p}
.process>li,.flow>li,.steps>li{counter-increment:p;border-top:3px solid var(--accent);padding-top:.9rem;position:relative;min-width:0}
.process>li::before,.flow>li::before,.steps>li::before{content:counter(p,decimal-leading-zero);display:block;font:600 1.6rem/1 var(--face-display);color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-bottom:.6rem}
.process h3{font-size:1.15rem;margin:0 0 .3rem;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 6 6}
.process h3 a,.flow a{color:var(--ink);text-decoration:none}
.process h3 a::after,.flow a::after{content:"";position:absolute;inset:0}
.process p,.flow span{display:block;margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.5}
.flow strong,.flow a{display:block;font:600 1.1rem/1.25 var(--face-display);margin-bottom:.3rem}
@media (hover:hover) and (pointer:fine){.process>li:hover h3 a,.flow>li:hover a{color:var(--brand);text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.22em}}
.process>li:has(a:focus-visible),.flow>li:has(a:focus-visible){outline:2px solid var(--brand-bright);outline-offset:6px}
.process a:focus-visible,.flow a:focus-visible{outline:none}
.steps>li{padding-left:0}
.steps strong{font-family:var(--face-display);font-weight:600}
@media (min-width:640px){.process,.flow,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.process,.flow{grid-template-columns:repeat(5,minmax(0,1fr))}.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rows-body .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flow-also{margin:2rem 0 0;color:var(--ink-2)}

/* text index of further functions */
.index{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:0 3rem;border-bottom:1px solid var(--rule)}
@media (min-width:800px){.index{grid-template-columns:repeat(2,minmax(0,1fr))}}
.index li{border-top:1px solid var(--rule);padding:1rem 0 1.1rem;position:relative}
.index h2,.index h3{font-size:1.1rem;letter-spacing:-.012em;line-height:1.25;margin:0 0 .2rem}
.index h2 a,.index h3 a{color:var(--ink);text-decoration:none}
.index h2 a::after,.index h3 a::after{content:"";position:absolute;inset:0}
.index p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.5}
@media (hover:hover) and (pointer:fine){.index li:hover :is(h2,h3) a{color:var(--brand);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:.07em}}
.index li:has(a:focus-visible){outline:2px solid var(--brand-bright);outline-offset:2px}
.index a:focus-visible{outline:none}

/* ---- cards (kept as quiet tone fields, no outlines) ---- */
.cards{display:grid;gap:1rem;list-style:none;padding:0;margin:2rem 0 0}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;background:var(--surface);border-radius:var(--r);padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;transition:background-color 150ms ease}
.section-tint .card,.section-accent .card{background:var(--paper)}
.card h3{font-size:1.15rem;margin-bottom:.45rem}
.card h3 a{text-decoration:none;color:var(--ink)}
.card h3 a::after{content:"";position:absolute;inset:0}
.card p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.card .more{display:none}
@media (hover:hover) and (pointer:fine){.card:has(h3 a):hover{background:var(--surface-2)}.card:has(h3 a):hover h3 a{color:var(--brand)}}
.card:has(a:focus-visible){outline:2px solid var(--brand-bright);outline-offset:2px}
.card h3 a:focus-visible{outline:none}
.card .checklist{margin:.75rem 0 0}
.card .checklist li{font-size:.95rem;color:var(--ink-2)}

/* ---- split text/figure ---- */
.split{display:grid;gap:2rem;align-items:start;padding-top:var(--sec);padding-bottom:0}
.split+.split{padding-top:calc(var(--sec) * .8)}
@media (min-width:1000px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem}.split.reverse{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.split.reverse>:first-child{order:2}}

/* ---- figures: unframed screenshots on the surface tone ---- */
.shot{background:var(--surface);padding:clamp(.6rem,.3rem + 1vw,1.25rem)}
.shot img{width:100%;background:#fff;box-shadow:0 1px 2px rgba(19,38,63,.08)}
figcaption{font-size:var(--t-s);color:var(--ink-2);margin-top:.65rem;line-height:1.45}
.shot figcaption{margin:.7rem 0 0}
.figure-wide{margin-top:clamp(2rem,1rem + 3vw,3.5rem)}
/* small crops at their natural size, never upscaled */
.figure-wide.fit{width:fit-content;max-width:100%}
.figure-wide.fit .shot img{width:auto;max-width:100%}
/* small screens: keep screenshots at native size and let them scroll sideways */
@media (max-width:760px){.figure-wide .shot{overflow-x:auto;-webkit-overflow-scrolling:touch}.figure-wide .shot img{width:auto;max-width:none}}

/* ---- lists ---- */
.checklist{list-style:none;padding:0;margin:1.1rem 0}
.checklist li{position:relative;padding-left:1.35rem;margin-bottom:.5rem}
.checklist li::before{content:"";position:absolute;left:.15rem;top:.62em;width:.42rem;height:.42rem;background:var(--accent)}

/* ---- facts (legacy hero list) ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem 2rem;list-style:none;padding:0;margin:2rem 0 0}
.facts li{border-top:1px solid var(--rule);padding-top:.7rem;font-size:var(--t-s);color:var(--ink-2)}
.facts strong{display:block;font:600 1.05rem/1.25 var(--face-display);color:var(--ink)}

/* ---- deep field (KI on home) ---- */
.field-deep{background:var(--deep);color:#dfe6ee;padding:var(--sec) 0}
.field-deep h2,.field-deep h3{color:#fff}
.field-deep a{color:#fff}
.field-deep .lead,.field-deep p{color:#dfe6ee}
.field-deep .muted,.field-deep figcaption{color:#b9c5d2}
.field-deep .btn{background:#fff;color:var(--deep)}
@media (hover:hover) and (pointer:fine){.field-deep .btn:hover{background:#e7eef8;color:var(--deep)}}
.field-deep .btn-secondary{background:none;color:#fff}
.field-deep .index{border-color:rgba(255,255,255,.18)}
.field-deep .index li{border-color:rgba(255,255,255,.18)}
.field-deep .index h3 a{color:#fff}
.field-deep .index p{color:#b9c5d2}
.field-grid{display:grid;gap:2.5rem}
@media (min-width:1000px){.field-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;align-items:start}}

/* ---- chat demo as a transcript ---- */
.chatdemo{background:var(--paper);color:var(--ink);border-radius:var(--r);overflow:hidden;font-size:.98rem;position:relative}
.field-deep .chatdemo{box-shadow:0 20px 50px rgba(0,0,0,.25)}
.chat-bar{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.85rem 1.2rem;border-bottom:1px solid var(--rule)}
.chat-bar span{display:none}
.chat-bar em{font:600 .85rem/1.3 var(--face-display);font-style:normal;color:var(--ink)}
.chat-stream{padding:1.2rem 1.2rem .4rem;display:flex;flex-direction:column;gap:1rem}
.chat-stream .msg{line-height:1.55;overflow-wrap:anywhere}
.chat-stream .user{font-weight:600;font-family:var(--face-display);font-size:.95rem;color:var(--ink)}
.chat-stream .bot{padding-left:1rem;border-left:1px solid var(--accent);color:var(--ink)}
.chat-stream .tag{display:block;font:600 .75rem/1.4 var(--face-display);color:var(--accent);margin-bottom:.2rem}
.chat-stream .caret{display:inline-block;width:1px;height:1em;background:currentColor;vertical-align:-.15em;margin-left:1px}
.chat-stream .typing{display:flex;gap:.35rem;padding:.55rem 0 .55rem 1rem;min-height:1.55em;align-items:center}
.chat-stream .typing i{width:.4rem;height:.4rem;border-radius:50%;background:var(--accent);opacity:.35;animation:pulse 1s ease-in-out infinite}
.chat-stream .typing i:nth-child(2){animation-delay:.15s}.chat-stream .typing i:nth-child(3){animation-delay:.3s}
@keyframes pulse{50%{opacity:1}}
.chat-stream .msg.enter{animation:msg-in 240ms var(--ease-out) both}
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}}
.chat-stage{position:relative}
.chat-stage>.chat-stream.chat-src{visibility:hidden}
.chat-stage>.chat-anim{position:absolute;inset:0}
.chat-input{display:flex;justify-content:space-between;align-items:center;margin:.6rem 1.2rem 1.2rem;padding:.65rem .9rem;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink-2);font-size:.9rem}
.chat-input b{display:none}
.chat-skip{flex:none;background:none;border:0;color:var(--ink-2);font-size:.8rem;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;padding:.25rem 0}
.chatdemo-note{font-size:var(--t-s);color:var(--ink-2);margin:.75rem 0 0}
.field-deep .chatdemo-note{color:#b9c5d2}

/* ---- closing (one blue field per page) ---- */
.cta-band{background:var(--brand);color:#fff;padding:clamp(3.5rem,2.4rem + 4vw,6rem) 0}
.cta-band h2{color:#fff;max-width:22ch}
.cta-band p{color:#e3ecf8;max-width:56ch}
.cta-band a:not(.btn){color:#fff}
.cta-band .inner{display:grid;gap:1.75rem;align-items:end}
@media (min-width:1000px){.cta-band .inner{grid-template-columns:minmax(0,1fr) auto}}
.cta-band .btn-row{margin:0}
.cta-band .btn-light+.btn-light{background:none;color:#fff;padding-left:.2rem;padding-right:.2rem;text-decoration:underline;text-underline-offset:.25em}
.closing-phone{display:block;font:600 var(--t-h2)/1.1 var(--face-display);letter-spacing:-.02em;color:#fff;text-decoration:none;margin:.25rem 0 0;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.closing-phone:hover{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.05em}}

/* ---- FAQ ---- */
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font:600 1.05rem/1.4 var(--face-display);padding:1.05rem 0;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:color 150ms ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;margin-top:.35em;background:
  linear-gradient(var(--accent),var(--accent)) center/14px 2px no-repeat,
  linear-gradient(var(--accent),var(--accent)) center/2px 14px no-repeat;transition:transform 200ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--brand)}}
.faq details>div{padding:0 0 1.25rem;color:var(--ink-2);max-width:68ch}
:root{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size 250ms var(--ease-out),content-visibility 250ms allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* ---- breadcrumbs ---- */
.crumbs{font-size:var(--t-s);padding:1rem var(--gutter) 0;max-width:var(--wrap);margin:0 auto;color:var(--ink-2)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem}
.crumbs li+li::before{content:"/";margin:0 .5rem;color:var(--rule-strong)}
.crumbs a{color:var(--ink-2);display:inline-block;padding:.35rem 0}
.crumbs [aria-current]{color:var(--ink)}

/* ---- prose (Wissen) ---- */
.prose{max-width:68ch}
article.wrap.prose{max-width:var(--wrap);padding-top:clamp(1.5rem,1rem + 2vw,3rem);padding-bottom:var(--sec)}
article.wrap.prose>*{max-width:68ch}
article.prose h1{font-size:clamp(2rem,1.1rem + 3vw,3.25rem)}
.prose h2{margin-top:2.6rem;font-size:clamp(1.4rem,1.15rem + .9vw,1.75rem)}
.prose h3{margin-top:1.8rem;font-size:1.2rem}
.prose li{margin-bottom:.4rem}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1rem 0;font-variant-numeric:tabular-nums}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:.65rem .5rem;text-align:left;vertical-align:top}
.prose th{font:600 .9rem/1.35 var(--face-display);border-bottom:2px solid var(--ink)}
.table-wrap{overflow-x:auto}
.table-wrap.wide table{min-width:640px}
.swipe-hint{display:none;font-size:var(--t-s);color:var(--ink-2);margin:.25rem 0 0}
@media (max-width:700px){.swipe-hint{display:block}}
address{font-style:normal}
/* legal and short pages without an article wrapper get the same top air */
main>.wrap.prose{padding-top:clamp(1.5rem,1rem + 2vw,3rem)}

/* ---- link box at page end ---- */
.linkbox{border-top:1px solid var(--rule);padding:1.25rem 0 0;margin:var(--sec) 0}
.linkbox p{margin:0 0 .6rem;font:600 1rem/1.3 var(--face-display)}
.linkbox ul{margin:0;padding-left:0;list-style:none}
.linkbox li{margin-bottom:.6rem;color:var(--ink-2)}

/* ---- contact / demo ---- */
.contact-grid{display:grid;gap:1.5rem;margin-top:1.5rem}
.contact-grid>*,.demo-grid>*,.form>*{min-width:0}
@media (min-width:800px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-card{background:var(--surface);border-radius:var(--r);padding:1.5rem}
.contact-card.booking{background:#e7eef8}
.contact-card+.contact-card{margin-top:1rem}
.contact-card .btn{margin:.5rem 0 .75rem}
.contact-card h2,.contact-card h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.contact-card .big{font:600 1.3rem/1.3 var(--face-display);text-decoration:none;display:inline-block;margin:.25rem 0;font-variant-numeric:tabular-nums}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1rem 0}
.tags li{border:1px solid var(--rule-strong);color:var(--ink);font:600 .8rem/1.4 var(--face-display);padding:.25rem .6rem;border-radius:2px}

/* TODO placeholders – deliberately loud so they are caught on staging */
.todo{background:#fff4c2;border:2px dashed #d9a400;border-radius:var(--r);padding:1rem 1.25rem;margin:1.5rem 0;font-size:.95rem}
.todo::before{content:"TODO(alex)";display:block;font-weight:700;font-size:.8rem;letter-spacing:.06em;margin-bottom:.3rem}

/* ---- footer ---- */
.site-footer{background:var(--deep);color:#c6d0db;margin-top:0;font-size:.95rem}
main>:last-child:not(.cta-band):not(.field-deep){margin-bottom:var(--sec)}
.site-footer a{color:#fff;text-decoration-color:rgba(255,255,255,.35)}
.footer-grid{display:grid;gap:2rem;padding:clamp(3rem,2rem + 3vw,4.5rem) var(--gutter) 2rem}
@media (min-width:800px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-about img{width:132px;height:36px;margin-bottom:1rem}
.footer-about p{max-width:36ch}
.footer-title{font:600 .95rem/1.3 var(--face-display);color:#fff;margin-bottom:.6rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.1rem}
.site-footer li a{display:inline-block;padding:.3rem 0;text-decoration:none}
@media (hover:hover) and (pointer:fine){.site-footer li a:hover{text-decoration:underline}}
.site-footer address{line-height:1.8}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid rgba(255,255,255,.14);padding:1.25rem var(--gutter);font-size:var(--t-s)}
.footer-bottom p{margin:0}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:0 1.25rem}
.footer-bottom li{margin:0}

/* ---- forms ---- */
.form{display:grid;gap:1.1rem}
@media (min-width:640px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.form label{display:block;font:600 .9rem/1.35 var(--face-display);margin-bottom:.35rem}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{width:100%;padding:.75rem .85rem;border:1px solid var(--rule-strong);border-radius:var(--r);background:#fff;color:var(--ink);font-size:1rem;transition:border-color 150ms ease}
@media (hover:hover){.form input:hover,.form textarea:hover{border-color:#6b7785}}
.form textarea{min-height:8rem;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--brand-bright);outline-offset:1px;border-color:var(--brand)}
.form .check{display:flex;gap:.65rem;align-items:flex-start;font:400 .92rem/1.5 var(--face-text)}
.form .check input{margin-top:.25rem;width:1.1rem;height:1.1rem;flex:none;accent-color:var(--brand)}
.form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form .hint{font-size:var(--t-s);color:var(--ink-2);margin:0}
.form-msg{display:none;background:#fdecec;border-left:0;border:1px solid #d33a3a;color:#7a1414;border-radius:var(--r);padding:.85rem 1rem;margin-bottom:1rem}
.form-msg:target{display:block}
.form-card{background:var(--surface);border-radius:var(--r);padding:clamp(1.25rem,1rem + 1vw,2rem);position:relative}
.demo-grid{display:grid;gap:2rem;margin-top:1rem}
@media (min-width:1000px){.demo-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem;align-items:start}}

/* ---- JuserKI architecture (7 Säulen): two tones, no rainbow ---- */
.pillars{display:grid;gap:1.25rem;margin:2rem 0 1rem}
.pillar-group{border:2px dashed var(--ki);border-radius:var(--r);padding:2rem 1rem 1rem;position:relative}
.pillar-group-label{position:absolute;top:-.85rem;left:1rem;background:var(--paper);color:var(--ki);font:600 .95rem/1.6 var(--face-display);padding:0 .5rem;margin:0}
.section-tint .pillar-group-label,.section-accent .pillar-group-label{background:var(--surface)}
.pillar-row{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.pillar{background:var(--paper);border-top:3px solid var(--pc,var(--ki));padding:.9rem .9rem 1rem;position:relative;min-width:0}
.pillar .num{font:600 .8rem/1.3 var(--face-display);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pillar h3{font-size:1rem;margin:.2rem 0 .4rem;line-height:1.3}
.pillar-sub{font:600 .85rem/1.35 var(--face-display);color:var(--ink-2);margin:0 0 .5rem}
.pillar ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule);padding-top:.5rem}
.pillar li{font-size:.88rem;color:var(--ink-2);margin:0 0 .3rem;padding-left:.9rem;position:relative}
.pillar li::before{content:"";position:absolute;left:0;top:.6em;width:.35rem;height:.35rem;background:var(--pc,var(--ki))}
.p1,.p2,.p3,.p4{--pc:var(--ki)}.p5,.p6,.p7{--pc:var(--ink-2)}
@media (min-width:560px){.pillar-row{grid-template-columns:repeat(2,minmax(0,1fr))}.pillar-group .pillar-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.pillars{grid-template-columns:minmax(0,4fr) minmax(0,3fr);align-items:start}.pillar-group .pillar-row{grid-template-columns:repeat(2,minmax(0,1fr))}.pillar-rest{grid-template-columns:1fr;padding-top:1.75rem}}

/* inside a rows body the architecture stacks: the shared-knowledge group of three on top, the other four in one row */
@media (min-width:1000px){.rows-body .pillars{grid-template-columns:1fr}.rows-body .pillar-group .pillar-row{grid-template-columns:repeat(3,minmax(0,1fr))}.rows-body .pillar-rest{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:0}}

/* ---- legacy helpers ---- */
.subhead{margin:3rem 0 .4rem;font-size:1.3rem}
.card-static:hover{background:var(--surface)}
.section-tint .card-static:hover{background:var(--paper)}

/* ---- timeline (Arbeitstag) ---- */
.timeline{list-style:none;padding:0;margin:2rem 0 0;max-width:68ch}
.timeline li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;border-top:1px solid var(--rule);padding:.9rem 0}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.timeline .when{font:600 1rem/1.5 var(--face-display);color:var(--brand);font-variant-numeric:tabular-nums}
@media (max-width:520px){.timeline li{grid-template-columns:1fr;gap:.1rem}}

/* ---- support downloads ---- */
.dl-grid{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
@media (min-width:640px){.dl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.dl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dl-card{background:var(--surface);border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column;gap:.45rem;outline:2px solid transparent;outline-offset:-2px}
.dl-card h2,.dl-card h3{margin:0;font-size:1.15rem;letter-spacing:-.012em;line-height:1.25}
.dl-card p{margin:0;font-size:.92rem;color:var(--ink-2)}
.dl-card .btn{margin-top:auto;text-align:center}
.dl-card .dl-alt{font-size:var(--t-s)}
.dl-card.recommended{outline-color:var(--brand);background:#fff}
@media (max-width:639px){.dl-card.recommended{order:-1}}
.dl-badge{display:none;align-self:flex-start;background:var(--brand);color:#fff;font:600 .75rem/1.4 var(--face-display);padding:.2rem .55rem;border-radius:2px}
.dl-card.recommended .dl-badge{display:inline-block}
.dl-ios{display:none;margin-top:1rem}
.dl-grid ~ p{margin-top:1rem}
.dl-ios.recommended{display:block;color:var(--ink);font-weight:600}

/* ---- numbers in schedules, tables, timelines ---- */
.timeline,.prose td,.marg,.closing-phone,.contact-card .big{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color,text-decoration-color!important;animation:none!important}
  .btn:active{transform:none}
  .faq details::details-content{transition:none}
}

/* ---- home: roles and hosting models ---- */
.roles{display:grid;gap:1.75rem 2rem}
@media (min-width:760px){.roles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.roles h3{font-size:1.1rem;border-top:1px solid var(--rule);padding-top:.8rem;margin-bottom:.2rem}
.roles .checklist li{font-size:.95rem}
@media (min-width:1000px){.process.models{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- chat demo motion ---- */
.chat-stream .ink-later{color:transparent}
.chat-anim{transition:opacity 400ms ease}
.chat-anim.fade-out{opacity:0}
.chat-input span.typing-in{color:var(--ink)}
.chat-input span.typing-in::after{content:"";display:inline-block;width:1px;height:1em;background:currentColor;vertical-align:-.15em;margin-left:1px}