/* ============================================================================
   ivo's café — UI 10/2026 für die Unterseiten ("Hell & ruhig", wie /).
   Wird als LETZTES Stylesheet im <head> geladen.
   Farben: kommen aus /theme.css.php (Venue „ivoscafe“, Design-Menü in NettoShot,
   Standard = helles Design) — hier per @import, damit auch Seiten ohne eigenen
   theme.css.php-Link den Menü-Stand bekommen. Diese Datei setzt nur Schriften,
   Alias-Tokens und ein paar Einzelfixes. Keine Struktur, kein Inhalt, keine Funktion.
   Rollback: /root/rollback-ivoscafe-unterseiten.sh (entfernt den <link>).
   ============================================================================ */
@import url('/theme.css.php');
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/bricolage-grotesque-latin-ext-800-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mulish Variable";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url('/fonts/mulish-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Mulish Variable";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url('/fonts/mulish-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Schriften + Alias-Tokens (Farben selbst kommen aus /theme.css.php) */
html:root{
  --brass:var(--sky); --st-unklar:var(--st-pending);
  --display:"Bricolage Grotesque","Mulish Variable","Avenir Next","Avenir",system-ui,sans-serif;
  --stencil:var(--display);
  --body:"Mulish Variable","Avenir Next","Avenir","Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Token-Namen der Seiten mit eigenem Set (fuer-ki, impressum, offline) */
  --bg:var(--paper); --mut:var(--muted); --acc:var(--orange); --acc2:var(--sky); --serif:var(--display);
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em}
h1{line-height:1}
:focus-visible{outline-color:var(--orange)}
::selection{background:rgba(235,100,115,.28)}

/* Karten/Panels: weiß auf Creme, weicher Schatten statt Dunkel-Glow */
html .mil-edge{box-shadow:0 10px 30px -22px rgba(14,22,34,.35)}

/* Nav (partials/nav.php): Hover/aktiv-Tönungen hell statt Orange-auf-Navy */
html .sn-brand{font-family:var(--display);font-weight:800;font-size:1.08rem;letter-spacing:-.01em}
html .sn-burger[open] summary,html .sn-globe[open] summary{background:rgba(168,54,74,.08)}
html .sn-menu,html .sn-globe .sn-langs{box-shadow:0 18px 50px -24px rgba(14,22,34,.35)}
html .sn-menu a{font-size:.9rem;opacity:.85}
html .sn-menu a[aria-current="page"],html .sn-globe .sn-langs a[aria-current]{background:rgba(168,54,74,.08)}
@media (hover:hover) and (pointer:fine){
  html .sn-menu a:hover,html .sn-globe .sn-langs a:hover{background:rgba(14,22,34,.05)}}

/* Fest verdrahtete Dunkel-Schrift auf Akzent-Flächen → hell, damit lesbar */
html .btn.primary,html .drow .tag,html .ev-add-btn:hover,html .verdict.premium,html .badge.live,
html .admbar .btn,html .admlogin .btn,html .savebar .btn,html .invite .btn:not(.ghost),html .btn.primary:hover{color:#fff}
html .cta{color:#fff!important} /* Journal-CTA setzt #0e1622!important */

/* /zeiten: "Öffnet bald" in lesbarem Koralle-Dunkel (wie / Livebar) */
html .live.is-soon{color:#b8323f}

/* /faq: Name „ivo's café“ wird von ivo-sc.js in ein <span> gepackt → im Flex-
   Summary zerfiel die Frage in drei Spalten. Als Fließtext setzen, ± rechts. */
html summary:has(+ .ans){display:block;position:relative;padding-inline-end:2.8rem}
html summary:has(+ .ans)::after{position:absolute;inset-inline-end:1.15rem;top:50%;transform:translateY(-50%)}

/* /journal: Titel-Artikel als Navy-Band (wie Journal auf /), Karten weiß */
html a.feature{--paper:#0e1622;--ink:#f4efe6;--sand:#d6dee8;--muted:#a9bccf;--orange:#eb6473;color:var(--ink);
  background:linear-gradient(158deg,#22346a,#15202f 64%,#0e1622)}
html a.feature:hover{border-color:#eb6473}
html a.card{background:#fff;box-shadow:0 10px 30px -22px rgba(14,22,34,.35)}
html a.card:hover{background:#fff}

/* /allergene: Hinweis-Box war Flex → Text + Link zerfielen in Spalten. Fließtext, Punkt links. */
html p.note:has(> .dot){display:block;position:relative;padding-inline-start:calc(1.1rem + .5em + .6rem)}
html p.note > .dot{position:absolute;inset-inline-start:1.1rem;top:calc(.85rem + .5em);margin:0}

/* /shop: "Auf Lager"-Grün lesbar auf Weiß */
html .stock.in{color:#1e7a46}
/* /stempel: Speichern-Button */
html .savebtn{color:#fff}
/* /fuer-ki: GET-Label auf Navy */
html .verb{color:#fff}
/* Offline-Seite (partials/offline.php): weiße Karte statt Dunkel-Verlauf */
html body > main:has(> p.eyebrow + h1 + p.lede + a.btn){background:var(--panel);border-radius:22px;border:2px solid var(--ink)}
html body > main:has(> p.eyebrow + h1 + p.lede + a.btn) h1{font-style:normal;text-transform:none}
html body > main:has(> p.eyebrow + h1 + p.lede + a.btn) a.btn{background:var(--ink);border-color:var(--ink);color:var(--paper);border-radius:999px}

/* /zeiten + Admin-Editoren: „Mission-Control“-Panel hell (eigene lokale Tokens) */
html .adm{--pnl:#ffffff;--pnl2:#fbf8f2;--gnd:#ffffff;--edge:rgba(14,22,34,.14);--ink2:#0e1622;--mut:#4a5566;
  --acc:#a8364a;--sky:#22477e;--yel:#5f6f00;--cor:#b8323f;box-shadow:0 24px 60px -40px rgba(14,22,34,.35)}
html .adm button{color:#fff}
html .adm .adm-tag button{color:var(--ink2)}
html .admflash{background:#fff;color:#0e1622;border-color:rgba(14,22,34,.14);box-shadow:0 10px 30px -22px rgba(14,22,34,.35)}
/* /stempel/scan: Kopfzeile liegt halbtransparent schwarz über dem Kamerabild → Schrift weiß lassen */
html header:has(> span + a[href="admin"]){color:#fff}
/* /community/admin: Login-Box (fest verdrahtete Dunkel-Farben) */
html body:has(> form input[type=password]){background:var(--paper);color:var(--ink)}
html body > form:has(input[type=password]){background:var(--panel);border:2px solid var(--ink);border-radius:22px}
html body > form:has(input[type=password]) h1{color:var(--ink)}
html body > form:has(input[type=password]) input{background:var(--panel-2);color:var(--ink);border-color:var(--line)}
html body > form:has(input[type=password]) button{background:var(--ink);color:var(--paper)}