/* =========================
   Self-hosted fonts (no third-party origin)
   ========================= */
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/dm-sans-400.woff2') format('woff2'); }
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/dm-sans-500.woff2') format('woff2'); }
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/dm-sans-600.woff2') format('woff2'); }
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/dm-sans-700.woff2') format('woff2'); }
/* Manrope 600 omitted: headings use 650 (→700), 700 and 800 only; no glyph ever matches 600. */
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/manrope-700.woff2') format('woff2'); }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/manrope-800.woff2') format('woff2'); }

/* =========================
   Design tokens + scaling
   ========================= */
:root{
  /* Colors — SOLIS palette */
  --bg:#f6f6ef;              /* warm cream */
  --panel:#ffffff;
  --panel-alt:#eef1e7;       /* soft green-grey card */

  --text:#202820;            /* dark green ink */
  --text-strong:#141a14;
  --muted:#5c6356;           /* darkened for WCAG AA on cream (was #697166) */
  --border:#dce0d5;
  --line:var(--border);

  --primary:#0f7d56;         /* SOLIS mint, deepened for AA contrast on cream (logo mint #48d9a2) */
  --primary-600:#0f7d56;
  --primary-700:#0a5e40;
  --on-primary:#ffffff;      /* text/icons on a --primary fill */
  --brand-mint:#48d9a2;      /* exact logo mint, for dark surfaces */

  --danger:#b83535;          /* muted red */
  --danger-700:#9a2a2a;
  --warn:#c47b15;            /* muted amber */
  --warn-700:#a36210;
  --ok:#27774e;              /* forest green */

  /* Interactive surfaces */
  --hover:#f3f4f6;           /* item hover bg */
  --icon-bg:#f3f4f6;         /* icon circle bg */
  --input-bg:#ffffff;        /* input/select bg */
  --panel-glass:rgba(255,255,255,.92); /* frosted-glass header */

  /* Toast — base (info) */
  --toast-bg:#111827;
  --toast-color:#ffffff;
  /* Toast variants */
  --toast-ok-bg:#1f6640;   --toast-ok-color:#dcfce7;
  --toast-err-bg:#9a2a2a;  --toast-err-color:#fee2e2;
  --toast-warn-bg:#7a4a0a; --toast-warn-color:#fef3c7;

  /* Danger tints */
  --danger-hover:#fee2e2;
  --danger-surface:#fff5f5;
  --danger-border-light:#fecaca;

  /* Role badge */
  --role-bg:#eef2ff;
  --role-color:#1e3a8a;

  /* Status badge */
  --ok-subtle:#065f46;

  /* Focus ring */
  --focus-ring-color: rgba(15,125,86,.45);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);
  --focus-border: #7fcfae;       /* soft mint */

  /* Radius / shadows */
  --radius:12px;
  --shadow-lg:0 20px 50px rgba(0,0,0,.10);
  --shadow-md:0 10px 30px rgba(0,0,0,.08);
  --shadow-sm:0 6px 16px rgba(0,0,0,.06);

  /* Spacing scale (base-4) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;

  /* Radius scale */
  --radius-sm:  8px;
  --radius-md: 10px;
  --radius-lg: var(--radius); /* 12px */
  --radius-xl: 16px;

  /* Layout scale */
  --gap: clamp(12px, 1.6vw, 20px);
  --container: 1200px;
  --dialog-w: 640px;
  --font: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-head: 'Manrope', 'DM Sans', system-ui, Segoe UI, Arial, sans-serif;

  /* Header sizing baseline */
  --header-button-h: 40px;
  --site-logo-scale: 1.5;
}

/* =========================
   Dark mode
   ========================= */
/* Dark tokens. Applied when the OS prefers dark (unless the user forced light),
   OR when the user explicitly chose dark via the theme toggle.
   NOTE: the two token blocks below must stay in sync. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101719; --panel:#182326; --panel-alt:#1e2b2f;
    --text:#eef3f1; --text-strong:#f8fbfa; --muted:#93a6a2; --border:#2c3c40; --line:#2c3c40;
    --hover:#263539; --icon-bg:#263539; --input-bg:#1e2b2f; --panel-glass:rgba(24,35,38,.92);
    --toast-bg:#e2e8f0; --toast-color:#101719;
    --danger-hover:rgba(184,53,53,.2); --danger-surface:rgba(184,53,53,.08); --danger-border-light:rgba(184,53,53,.3);
    --role-bg:rgba(59,94,166,.25); --role-color:#8aaee8; --ok-subtle:#5cb88a;
    --shadow-lg:0 20px 50px rgba(0,0,0,.5); --shadow-md:0 10px 30px rgba(0,0,0,.35); --shadow-sm:0 6px 16px rgba(0,0,0,.25);
    --focus-ring-color:rgba(72,217,162,.6); --focus-border:#48d9a2;
    --primary:#48d9a2; --primary-600:#48d9a2; --primary-700:#7fe6bf; --on-primary:#101719;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101719; --panel:#182326; --panel-alt:#1e2b2f;
  --text:#eef3f1; --text-strong:#f8fbfa; --muted:#93a6a2; --border:#2c3c40; --line:#2c3c40;
  --hover:#263539; --icon-bg:#263539; --input-bg:#1e2b2f; --panel-glass:rgba(24,35,38,.92);
  --toast-bg:#e2e8f0; --toast-color:#101719;
  --danger-hover:rgba(184,53,53,.2); --danger-surface:rgba(184,53,53,.08); --danger-border-light:rgba(184,53,53,.3);
  --role-bg:rgba(59,94,166,.25); --role-color:#8aaee8; --ok-subtle:#5cb88a;
  --shadow-lg:0 20px 50px rgba(0,0,0,.5); --shadow-md:0 10px 30px rgba(0,0,0,.35); --shadow-sm:0 6px 16px rgba(0,0,0,.25);
  --focus-ring-color:rgba(72,217,162,.6); --focus-border:#48d9a2;
    --primary:#48d9a2; --primary-600:#48d9a2; --primary-700:#7fe6bf; --on-primary:#101719;
  color-scheme:dark;
}
:root{ color-scheme:light; }

/* Responsive scale */
@media (min-width: 1440px){
  :root{ --header-button-h:44px; --gap:20px; --container:1280px; }
}
@media (max-width: 1023.98px){
  :root{ --header-button-h:38px; --gap:18px; --container:1100px; }
}
@media (max-width: 767.98px){
  :root{ --header-button-h:36px; --gap:16px; --container:100%; }
}
@media (max-width: 639.98px){
  :root{ --header-button-h:34px; --gap:14px; }
}

/* =========================
   Base / reset
   ========================= */
*{ box-sizing:border-box; }

/* Remove browser default focus outlines; keyboard rings are added below */
*:focus         { outline: none; }
/* Global keyboard focus ring — covers any element not given a custom rule */
*:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 3px; }

html,body{ height:100%; }
html{
  -webkit-text-size-adjust:100%;
  /* Offset in-page anchors so section headings aren't hidden under the sticky header */
  scroll-padding-top:110px;
}
@media (max-width:960px){ html{ scroll-padding-top:88px; } } /* single-row header; nav is now a dropdown */
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.45;
  /* Safety net against incidental horizontal overflow on small screens.
     `clip` (not `hidden`) avoids turning body into a scroll container,
     so the sticky header keeps working. */
  overflow-x:clip;
}

.hidden,.hf-hidden{ display:none !important; }

/* =========================
   Skip-to-content
   ========================= */
.skip-link{
  position:fixed;
  top:0;
  left:var(--sp-4);
  padding:var(--sp-2) var(--sp-3);
  background:var(--primary);
  color:var(--on-primary);
  font-weight:600;
  font-size:.9rem;
  border-radius:0 0 var(--radius-md) var(--radius-md);
  z-index:9999;
  text-decoration:none;
  transform:translateY(-100%);
  transition:transform .15s ease;
}
.skip-link:focus-visible{
  outline:none;             /* handled by visibility */
  transform:translateY(0);
  box-shadow:var(--focus-ring);
}

/* =========================
   Utility classes
   ========================= */
.w-full{ width:100%; }
.mt{ margin-top:var(--gap); }
.row{ display:flex; align-items:center; }
.gap{ gap:var(--gap); }
.title{ font-weight:700; font-size:1rem; }
.muted{ color:var(--muted); }
.form{ display:grid; gap:var(--sp-4); }

.container{
  width:min(100% - 2rem, var(--container));
  margin:auto;
  padding:0 1rem;
}

/* =========================
   Header
   ========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--panel-glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  padding:clamp(10px, 1.5vw, 16px) 0;
  min-height: calc(var(--header-button-h) * var(--site-logo-scale));
  column-gap: clamp(16px, 3vw, 40px);
  row-gap:10px;
}
.brand{ order:1; display:flex; align-items:center; gap:11px; color:var(--text); }
.brandmark{ display:block; width:34px; height:34px; border-radius:7px; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.app-title{ font-family:var(--font-head); font-weight:800; margin:0; font-size:clamp(18px, 2vw, 22px); letter-spacing:.02em; }
.brand-sub{ font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:2px; white-space:nowrap; }

/* Middle section navigation */
.site-nav{
  order:2;
  display:flex;
  flex:1;
  justify-content:center;
  align-items:center;
  gap:clamp(8px, 1.4vw, 24px);
  font-size:13px;
  font-weight:600;
  flex-wrap:wrap;
}
.site-nav a{
  color:var(--text);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color .15s ease, border-color .15s ease;
}
.site-nav a:hover{ color:var(--primary); border-bottom-color:var(--primary); }
.site-nav a:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:4px; }
.header-actions{ order:3; }

/* Mobile nav toggle (hamburger) — hidden on desktop, shown ≤960px */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:var(--header-button-h);
  height:var(--header-button-h);
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:999px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease, transform .04s ease;
  flex-shrink:0;
}
.nav-toggle:hover{ box-shadow:var(--shadow-md); }
.nav-toggle:active{ transform:translateY(1px); }
.nav-toggle:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.nav-toggle .nav-toggle-close{ display:none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open{ display:none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close{ display:block; }

/* Language + appearance controls inside the menu panel — mobile only */
.nav-tools{ display:none; }

@media (max-width: 960px){
  /* One row that never wraps: logo left, Login + menu button right.
     Language and theme move into the menu panel to free up the space. */
  .site-header .container{ width:90%; padding:0; } /* aligns with .sol-wrap */
  .header{ flex-wrap:nowrap; column-gap:12px; }
  .brand,
  .header-actions{ flex:0 0 auto; }
  .header .header-actions{ align-items:center; gap:8px; }
  .header .guest-actions{ flex-wrap:nowrap; }
  .header .theme-toggle,
  .header .guest-actions .lang-dd,
  .header .guest-actions .guest-lang{ display:none; }
  #btnHeaderLogin{ min-height:44px; white-space:nowrap; }
  .header .hf-menu-trigger{ min-height:44px; }

  /* Menu button: always the rightmost control, 44×44 tap target */
  .nav-toggle{ display:inline-flex; order:99; width:44px; height:44px; }

  /* Section nav becomes a full-width dropdown panel under the header */
  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:0 5%;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-md);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    font-size:15px;
    /* collapsed by default — animated open/close via max-height */
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .28s ease, opacity .2s ease;
    pointer-events:none;
  }
  .site-nav.open{
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    opacity:1;
    pointer-events:auto;
  }

  .nav-tools{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:14px 0 16px;
    border-top:1px solid var(--border);
  }
  .nav-tool{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
  body[data-auth="in"] .nav-tool-lang{ display:none; } /* logged in: language comes from settings */
  .nav-tool-label{ font-size:13px; font-weight:600; color:var(--muted); }
  .nav-seg{
    display:inline-flex;
    gap:2px;
    padding:2px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--panel-alt);
  }
  .nav-seg button{
    min-width:44px;
    min-height:44px;
    padding:0 12px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
  }
  .nav-seg button[aria-pressed="true"]{ background:var(--primary); color:var(--on-primary); }
  .nav-seg button:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
  .site-nav a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:12px 6px;
    border-bottom:1px solid var(--border);
    border-left:2px solid transparent;
  }
  .site-nav a:last-of-type{ border-bottom:0; }
  .site-nav a:hover,
  .site-nav a.active{ border-bottom-color:var(--border); border-left-color:var(--primary); padding-left:12px; }
  @media (prefers-reduced-motion: reduce){
    .site-nav{ transition:none; }
  }
}

.header-actions{
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  gap:12px;
}
.header-actions.align-center{ align-items:center; }

/* =========================
   Header: guest actions (logged-out)
   ========================= */

/* Guest header actions (logged out): language + register + login */
.guest-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* Make the language selector look like a button */
.guest-actions .guest-lang{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right: 34px;              /* room for chevron */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
  cursor:pointer;
}

/* Native <option> popup theming. A styled select (appearance:none + author
   background) renders its dropdown with a white background in Chromium even when
   color-scheme is dark — forcing the option colors keeps the list readable and
   on-theme in both light and dark mode. */
.guest-lang option,
#lang option,
#prefLang option,
select.input option,
.iss-field select option{
  background: var(--panel);
  color: var(--text-strong);
}
/* Force the native popup *canvas* (the area beside short labels + the scrollbar)
   to follow the theme — otherwise a styled (appearance:none) select shows a white
   panel in dark mode. color-scheme on the control itself drives the popup chrome. */
.guest-lang,
#lang,
#prefLang,
select.input,
.iss-field select{ color-scheme: light; }
:root[data-theme="dark"] .guest-lang,
:root[data-theme="dark"] #lang,
:root[data-theme="dark"] #prefLang,
:root[data-theme="dark"] select.input,
:root[data-theme="dark"] .iss-field select{ color-scheme: dark; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .guest-lang,
  :root:not([data-theme="light"]) #lang,
  :root:not([data-theme="light"]) #prefLang,
  :root:not([data-theme="light"]) select.input,
  :root:not([data-theme="light"]) .iss-field select{ color-scheme: dark; }
}

/* Custom language dropdown — replaces the native <select> popup (which Chromium
   paints white in dark mode). The native select stays in the DOM, visually hidden
   but functional, and is driven by this control. Built by js/lang-select.js. */
.lang-native-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;
}
.lang-dd{ position:relative; display:inline-block; }
.lang-dd-btn{ display:inline-flex; align-items:center; gap:8px; }
.lang-dd-chev{ font-size:10px; line-height:1; color:var(--muted); transition:transform .15s ease; }
.lang-dd-btn[aria-expanded="true"] .lang-dd-chev{ transform:rotate(180deg); }
.lang-dd-list{
  position:absolute; top:calc(100% + 6px); right:0; z-index:1000;
  min-width:100%; margin:0; padding:4px; list-style:none;
  background:var(--panel); color:var(--text-strong);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
}
.lang-dd-list[hidden]{ display:none; }
.lang-dd-list li{
  padding:8px 16px; border-radius:6px; cursor:pointer;
  font-size:.9rem; font-weight:600; white-space:nowrap; color:var(--text-strong);
}
.lang-dd-list li:hover,
.lang-dd-list li.active{ background:var(--hover); }
.lang-dd-list li[aria-selected="true"]{ color:var(--primary); }

/* On wider screens keep them in one row (lang left of register) */
@media (min-width: 640px){
  .guest-actions{ flex-wrap:nowrap; }
}

.guest-actions .btn,
.guest-actions .input{
  white-space:nowrap;
}

/* Mobile: allow wrapping and make buttons easier to tap */
@media (max-width: 480px){
  .guest-actions{ gap:var(--sp-2); }
  .guest-actions .btn{ flex:1 1 auto; justify-content:center; }
  .guest-actions .guest-lang,
  .guest-actions #lang{ flex:0 0 auto; }
}

#siteLogo{
  height: calc(var(--header-button-h) * var(--site-logo-scale));
  width:auto;
  align-self:flex-start;
  display:block;
  transition: filter .2s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #siteLogo { filter: invert(1); }
}
:root[data-theme="dark"] #siteLogo { filter: invert(1); }

/* =========================
   User menu trigger + menu
   ========================= */
.hf-user{ position:relative; }

.hf-menu-trigger{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  user-select:none;
  transition: box-shadow .15s ease, transform .04s ease, border-color .15s ease;
  min-height: var(--header-button-h);
}
.hf-menu-trigger:hover{ box-shadow:var(--shadow-md); border-color:var(--border); }
.hf-menu-trigger:active{ transform:translateY(1px); }
.hf-menu-trigger:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

.hf-hamb{ color:var(--text); }
.hf-first{
  font-weight:600;
  color:var(--text);
  max-width:14ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hf-avatar{
  inline-size: calc(var(--header-button-h) - 6px);
  block-size: calc(var(--header-button-h) - 6px);
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  font-weight:700;
  font-size:12px;
  background: linear-gradient(135deg, #5079c2, #3b5ea6);
}
.hf-avatar-imgSmall{
  inline-size: calc(var(--header-button-h) - 6px);
  block-size: calc(var(--header-button-h) - 6px);
  border-radius:999px;
  object-fit:cover;
  border:1px solid var(--border);
}

.hf-menu{
  position:absolute;
  top: calc(100% + var(--sp-2));
  right:0;
  width: min(92vw, 320px);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  transform-origin:top right;
  transform:scale(.98) translateY(-4px);
  opacity:0;
  pointer-events:none;
  transition: transform .16s ease, opacity .16s ease;
  z-index:50;
}
.hf-menu.open{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }

.hf-section{ padding:var(--sp-2); }
.hf-divider{ height:1px; background:var(--line); margin:var(--sp-2) 0; }

.hf-item{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  width:100%;
  text-align:left;
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-md);
  background:transparent;
  border:0;
  color:var(--text);
  cursor:pointer;
  transition: background .15s ease;
  min-height:40px;
}
.hf-item:hover{ background:var(--hover); }
.hf-item:focus-visible{ outline:none; background:var(--hover); box-shadow:inset 0 0 0 2px var(--focus-ring-color); }

.hf-item.hf-danger{ color:var(--danger-700); }
.hf-item.hf-danger:hover{ background:var(--danger-hover); }

.hf-icon{
  inline-size:36px;
  block-size:36px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--icon-bg);
  color:var(--text);
}

.hf-user-header{ display:flex; gap:var(--sp-3); align-items:center; padding:var(--sp-3); }
.hf-user-meta{ min-width:0; }
.hf-user-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hf-user-mail{ color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hf-avatar-img{
  inline-size:60px;
  block-size:60px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid var(--border);
}

/* =========================
   Forms
   ========================= */
.field{ display:grid; gap:var(--sp-2); }
.field-inline{ display:inline-flex; align-items:center; gap:8px; }
.label{ color:var(--text); font-weight:600; font-size:.95rem; }

.input{
  width:100%;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus{
  outline:none;
  border-color:var(--focus-border);
  box-shadow:var(--focus-ring);
}
.input-sm{
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm);
  min-height: var(--header-button-h);
}

.input-wrap{ position:relative; }
.input-icon{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

.err{ color:var(--danger-700); min-height:1.2em; }
.msg{ color:var(--ok); min-height:1.2em; }
.hint{ color:var(--muted); font-size:.85rem; }
.input-code{ font-family:ui-monospace,Consolas,Menlo,monospace; font-size:1.5rem; letter-spacing:.4em; text-align:center; }

/* Field validation states */
.input--error { border-color: var(--danger); }
.input--error:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220,38,38,.15); outline: none; }
.input--ok { border-color: var(--ok); }
.input--ok:focus { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(22,163,74,.12); outline: none; }
.input:disabled, .input[readonly] { opacity: .55; cursor: not-allowed; background: var(--hover); }
.btn:disabled:not(.btn--loading) { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Password strength bar */
.pass-strength { margin-top: .35rem; }
.pass-strength-bar { display: flex; gap: 3px; margin-bottom: .25rem; }
.pass-strength-bar span { flex: 1; height: 3px; border-radius: 999px; background: var(--border); transition: background .25s ease; }
.pass-strength-bar span.ps-weak   { background: var(--danger); }
.pass-strength-bar span.ps-ok     { background: #f59e0b; }
.pass-strength-bar span.ps-good   { background: #3b82f6; }
.pass-strength-bar span.ps-strong { background: var(--ok); }
.pass-strength-label { font-size: .8rem; color: var(--muted); }

.login-row{
  display:flex;
  align-items:center;          /* same vertical center line */
  justify-content:space-between;
  margin-top: 6px;
}

.login-row .remember{
  margin:0;
}



/* =========================
   Buttons
   ========================= */
.btn{
  appearance:none;
  border:0;
  border-radius:var(--radius-md);
  background: var(--primary);
  color:var(--on-primary);
  font-weight:700;
  --btn-py: var(--sp-3);
  --btn-px: var(--sp-4);
  --btn-fs: 1rem;
  padding: var(--btn-py) var(--btn-px);
  font-size: var(--btn-fs);
  line-height: 1.2;
  cursor:pointer;
  transition: filter .15s ease, transform .04s ease;
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

.btn--mi{
  --btn-py:var(--sp-2);
  --btn-px:var(--sp-3);
  --btn-fs:.9rem;
  border-radius:var(--radius-sm);
}
.btn--sm{
  --btn-py:var(--sp-1);
  --btn-px:var(--sp-2);
  --btn-fs:.85rem;
  border-radius:var(--radius-sm);
}

/* Variants */
.btn-ghost {
  appearance: none;
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: calc(var(--sp-3) - 2px) calc(var(--sp-4) - 2px); /* compensate 2px border */
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.btn-ghost:hover {
  background-color: var(--primary);
  color: var(--on-primary);
}
.btn-ghost:focus-visible { outline:none; box-shadow:var(--focus-ring); }

.btn-link{
  background: none;
  border: 0;
  padding: 0;
  font-size: .9rem;
  color: var(--primary);
  cursor: pointer;
}

.btn-link:hover{ text-decoration: underline; }
.btn-link:focus-visible{ outline:none; text-decoration:underline; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

.btn-outline{
  background:var(--panel);
  color:var(--text-strong);
  border:1px solid var(--border);
}
.btn-outline:hover{ filter:none; background:var(--hover); }

/* Danger variants */
.btn-danger,
.hf-danger.btn{ background: var(--danger); color:#fff; }
.btn-danger:hover,
.hf-danger.btn:hover{ filter:brightness(1.05); }

.btn-outline-danger{
  background:var(--panel);
  color:var(--danger-700);
  border:1px solid var(--danger-border-light);
}
.btn-outline-danger:hover{ background:var(--danger-surface); border-color:var(--danger-border-light); }

/* =========================
   Button: loading state
   ========================= */
@keyframes spin { to{ transform:rotate(360deg); } }

.btn--loading{
  position:relative;
  color:transparent !important;
  pointer-events:none;
}
.btn--loading::after{
  content:'';
  position:absolute;
  inset:0;
  margin:auto;
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .65s linear infinite;
}

/* Warn variant (needed by your JS: btn--warn) */
.btn--warn{
  background: var(--warn);
  color: var(--text-strong);
}
.btn--warn:hover{ filter: brightness(1.03); }

/* =========================
   Cards / layout
   ========================= */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding: clamp(16px, 2vw, 24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-sm);
}
.card-title{
  margin:0 0 .5rem 0;
  font-size:clamp(20px, 2vw, 26px);
  font-weight:700;
}
.main-grid{ display:grid; grid-template-columns:1fr; gap:var(--gap); }

/* =========================
   Admin card grid (for loadAdmin UI)
   ========================= */
.admin-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.admin-user-card {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: box-shadow .15s ease;
}
.admin-user-card:hover { box-shadow: var(--shadow-sm); }
.admin-user-card.is-banned {
  border-color: rgba(220,38,38,.3);
  background: rgba(220,38,38,.04);
}
.admin-card-header { display: flex; align-items: center; gap: var(--sp-3); }
.admin-card-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .85rem; flex-shrink: 0;
}
.admin-card-info { flex: 1; min-width: 0; }
.admin-card-name  { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-card-email { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-card-meta  { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.admin-card-last-login { font-size: .65rem; color: var(--muted); margin-left: auto; }
.admin-card-counts { font-size: .8rem; color: var(--muted); }
.admin-card-actions {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
  margin-top: auto;
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; width: fit-content;
}
.badge--danger { background: rgba(220,38,38,.12); color: var(--danger-700); }
.badge--ok     { background: rgba(22,163,74,.12);  color: var(--ok-subtle); }
.badge--role   { background: var(--hover); color: var(--text); }

.is-banned { background: rgba(220,38,38,.04); }

@media (max-width: 480px) {
  .admin-section { grid-template-columns: 1fr; }
}

/* Admin tabs */
.admin-tabs {
  display: flex;
  gap: 2px;
  padding: var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}
.admin-tab {
  padding: 6px 18px;
  font-size: .85rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color .15s, border-color .15s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--accent, #2563eb); border-bottom-color: var(--accent, #2563eb); }

/* Visitor cards */
.admin-section--visitors { grid-template-columns: 1fr; }
.admin-visitor-card {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.admin-visitor-card:hover { box-shadow: var(--shadow-sm); }
.admin-visitor-header { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.admin-visitor-country {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.admin-visitor-ip   { font-weight: 600; font-size: .9rem; }
.admin-visitor-user { font-size: .82rem; color: var(--muted); }
.admin-visitor-ua   { font-size: .75rem; color: var(--muted); word-break: break-all; }
.admin-visitor-dates {
  display: flex; gap: var(--sp-4); font-size: .75rem; color: var(--muted); flex-wrap: wrap;
}
.admin-visitor-dates span { display: flex; flex-direction: column; gap: 2px; }
.admin-visitor-dates strong { font-size: .7rem; color: var(--text); text-transform: uppercase; letter-spacing: .04em; }

/* Error log */
.elog-meta   { font-size: .75rem; color: var(--muted); padding: 0 var(--sp-3) var(--sp-2); word-break: break-all; }
.elog-filter-wrap { padding: 0 var(--sp-3) var(--sp-2); }
.elog-filter {
  width: 100%; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--panel-alt);
  color: var(--text); font-size: .85rem;
}
.elog-list  { font-family: monospace; font-size: .75rem; display: flex; flex-direction: column; gap: 1px; }
.elog-line  { padding: 3px 12px; border-radius: 3px; word-break: break-all; white-space: pre-wrap; }
.elog-error      { background: rgba(220,38,38,.08);  color: var(--danger-700); }
.elog-warn       { background: rgba(234,179,8,.08);  color: #92400e; }
.elog-deprecated { background: rgba(249,115,22,.08); color: #9a3412; }
.elog-info       { color: var(--muted); }
.elog-src {
  margin-top: 2px; padding: 2px 8px; border-left: 2px solid currentColor;
  background: var(--panel-alt); color: var(--text, inherit); opacity: .85;
}
.elog-src-loc    { color: var(--muted); }

/* =========================
   Skeletons
   ========================= */
@keyframes shimmer{
  0%  { background-position:-400px 0; }
  100%{ background-position: 400px 0; }
}
.skeleton{
  background:linear-gradient(90deg, var(--hover) 25%, var(--border) 50%, var(--hover) 75%);
  background-size:800px 100%;
  animation:shimmer 1.4s infinite linear;
  border-radius:6px;
}
.skeleton-line     { height:12px; }
.skeleton-line--lg { width:55%; height:14px; }
.skeleton-line--sm { width:70%; height:10px; margin-top:6px; }
.skeleton-badge    { height:20px; width:52px; border-radius:999px; }
.skeleton-btn      { height:26px; width:54px; border-radius:var(--radius-sm); }

/* =========================
   Toast
   ========================= */
.footer{ opacity:.8; margin:var(--sp-6) 0; }
/* Toast stack — container */
.toast-stack{
  position:fixed;
  left:50%;
  bottom:var(--sp-6);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  z-index:1300;
  pointer-events:none;
  width:max-content;
  max-width:min(92vw, 380px);
}

/* Individual toast */
.toast{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  background:var(--toast-bg);
  color:var(--toast-color);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  font-size:.9rem;
  line-height:1.4;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.hide{ opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease; }

.toast-icon{ font-size:.95rem; flex-shrink:0; opacity:.85; }
.toast-msg { flex:1; }

/* Variants */
.toast--success{ background:var(--toast-ok-bg);   color:var(--toast-ok-color); }
.toast--error  { background:var(--toast-err-bg);  color:var(--toast-err-color); }
.toast--warn   { background:var(--toast-warn-bg); color:var(--toast-warn-color); }
.toast--info   { background:var(--toast-bg);      color:var(--toast-color); }

/* =========================
   Modal animations
   ========================= */
@keyframes backdropIn  { from{ opacity:0 }               to{ opacity:1 } }
@keyframes backdropOut { from{ opacity:1 }               to{ opacity:0 } }
@keyframes dialogEnter { from{ opacity:0; transform:scale(.97) translateY(-6px) } to{ opacity:1; transform:none } }
@keyframes dialogLeave { from{ opacity:1; transform:none } to{ opacity:0; transform:scale(.97) translateY(-4px) } }
@keyframes sheetEnter  { from{ transform:translateY(110%) } to{ transform:translateY(0) } }
@keyframes sheetLeave  { from{ transform:translateY(0) }    to{ transform:translateY(110%) } }

/* =========================
   Modals / dialogs
   ========================= */
.hf-modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:1200; }
.hf-modal-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.5); }

/* Backdrop fade */
.hf-modal.open .hf-modal-backdrop              { animation: backdropIn  .2s  ease both; }
.hf-modal.hf-modal--closing .hf-modal-backdrop { animation: backdropOut .22s ease both; }

/* Dialog enter / leave — desktop */
.hf-modal.open .hf-dialog              { animation: dialogEnter .22s cubic-bezier(.16,1,.3,1) both; }
.hf-modal.hf-modal--closing .hf-dialog { animation: dialogLeave .18s ease both; }

.hf-dialog{
  position:relative;
  z-index:1;
  width:min(var(--dialog-w), 92vw);
  max-height:90vh;
  overflow:auto;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:clamp(var(--sp-4), 2vw, 28px);
}
.hf-x{
  position:absolute;
  top:var(--sp-2);
  right:var(--sp-2);
  inline-size:36px;
  block-size:36px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
}

/* Tablet (541 – 768px): top-aligned, constrained height */
@media (max-width: 767.98px) and (min-width: 541px){
  .hf-modal{
    align-items: flex-start;
    padding-top: max(env(safe-area-inset-top, 0px), var(--sp-4));
    padding-bottom: var(--sp-4);
  }
  .hf-dialog{
    max-height: calc(100vh  - max(env(safe-area-inset-top, 0px), var(--sp-4)) - var(--sp-4)); /* fallback */
    max-height: calc(100svh - max(env(safe-area-inset-top, 0px), var(--sp-4)) - var(--sp-4));
  }
}

/* Mobile bottom sheet (≤ 540px) */
@media (max-width: 540px){
  .hf-modal{
    align-items: flex-end;
    padding: 0;
  }
  .hf-dialog{
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh  - max(env(safe-area-inset-top, 0px), 48px)); /* fallback */
    max-height: calc(100svh - max(env(safe-area-inset-top, 0px), 48px));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--sp-6) clamp(var(--sp-4), 5vw, 32px)
             max(var(--sp-4), env(safe-area-inset-bottom, 0px));
  }
  /* Drag handle pill */
  .hf-dialog::before{
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
    position: absolute;
    top: var(--sp-2);
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }
  /* Sheet enter / leave override */
  .hf-modal.open .hf-dialog              { animation: sheetEnter .3s  cubic-bezier(.16,1,.3,1) both; }
  .hf-modal.hf-modal--closing .hf-dialog { animation: sheetLeave .25s ease both; }
}

/* Honour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .hf-modal.open .hf-dialog,
  .hf-modal.open .hf-modal-backdrop,
  .hf-modal.hf-modal--closing .hf-dialog,
  .hf-modal.hf-modal--closing .hf-modal-backdrop { animation: none; }
}

/* Legacy modal classes still supported */
.modal{ position:fixed; inset:0; display:none; z-index:1000; }
.modal.open{ display:grid; place-items:center; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.55); z-index:0; }
.modal__dialog{ position:relative; z-index:1; }
.modal__header{ display:flex; align-items:center; justify-content:space-between; }
.modal__close{ border:0; background:transparent; font-size:20px; cursor:pointer; line-height:1; }

/* Settings sizing */
#modalSettings .avatar{ width:48px; height:48px; }
@media (min-width: 640px){
  #modalSettings .avatar{ width:96px; height:96px; }
}
@media (min-width: 768px){
  #modalSettings .avatar{ width:160px; height:160px; }
}
#modalSettings select.input{ background:var(--input-bg); }

/* Sheet-header + sheet-body (tall bottom sheets) */
.sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.sheet-header .card-title{ margin:0; flex:1; }
.sheet-header .hf-x{ position:static; flex-shrink:0; }

@media (max-width: 540px){
  #modalSettings .hf-dialog,
  #modalAdmin .hf-dialog{
    display:flex;
    flex-direction:column;
    padding:0;
    overflow:hidden;
    min-height:70svh;
    min-height:70vh; /* fallback */
  }
  .sheet-header{
    flex-shrink:0;
    margin-bottom:0;
    padding:var(--sp-6) var(--sp-4) var(--sp-3);
    border-bottom:1px solid var(--border);
  }
  .sheet-body{
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:var(--sp-3) var(--sp-4);
    padding-bottom:max(var(--sp-4), env(safe-area-inset-bottom, 0px));
  }
  .sheet-body > :first-child{ margin-top:0; }
}

/* Dialog internal sections */
.form-section{
  margin-top:var(--sp-4);
  padding:var(--sp-4);
  background:var(--panel-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.form-section h3{
  margin:0 0 var(--sp-1) 0;
  font-weight:700;
  font-size:1rem;
  color:var(--text-strong);
  text-align:left;
}
.form-section .help{
  margin:0 0 var(--sp-3) 0;
  color:var(--muted);
  font-size:.92rem;
}

.form-grid{ display:grid; gap:var(--sp-3); }
@media (min-width: 640px){
  .form-grid{ grid-template-columns:1fr 1fr; }
}
.form-grid .field{ min-width:0; }

/* Small layout tweaks */
@media (max-width: 767.98px){
  .brand-sub{ display:none; }
  .hf-first{ display:none; }
}
@media (hover:none){
  .hf-item{ min-height:44px; }
}

/* Optional: align language select with header button height */
#lang.input-sm{
  padding-top:8px;
  padding-bottom:8px;
  min-height: var(--header-button-h);
}


/* =========================
   Dropdown menu grouping
   ========================= */
.hf-section-title{
  padding: 8px 12px 6px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Role badge in user header */
.hf-user-role{
  display:inline-flex;
  align-items:center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: var(--role-bg);
  color: var(--role-color);
}

/* ≤960px: user menu becomes the same full-width drop panel as #siteNav */
@media (max-width: 960px){
  .hf-user{ position:static; } /* anchor to .site-header, like .site-nav */
  .hf-menu{
    top:100%;
    left:0;
    right:0;
    width:auto;
    padding:0 5%;
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
    box-shadow:var(--shadow-md);
    transform:none;
    /* collapsed by default — animated open/close via max-height.
       Stays rendered while closed so the slide can play; visibility keeps it out of tab order. */
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    transition:max-height .28s ease, opacity .2s ease, visibility 0s linear .28s;
  }
  .hf-menu.hf-hidden{ display:block !important; }
  .hf-menu.open{
    transform:none;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    visibility:visible;
    transition-delay:0s;
  }

  .hf-section{ padding:0; }
  .hf-divider{ display:none; }
  .hf-user-header{ padding:14px 6px; border-bottom:1px solid var(--border); }
  .hf-section-title{ /* matches .nav-tool-label */
    padding:14px 6px 4px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
  }
  .hf-item{
    min-height:48px;
    padding:12px 6px;
    font-size:15px;
    font-weight:600;
    border-radius:0;
    border-bottom:1px solid var(--border);
    border-left:2px solid transparent;
    transition:color .15s ease, border-color .15s ease, padding .15s ease;
  }
  .hf-item:hover,
  .hf-item:focus-visible{
    background:transparent;
    color:var(--primary);
    border-left-color:var(--primary);
    padding-left:12px;
  }
  .hf-item:focus-visible{ box-shadow:inset 0 0 0 2px var(--focus-ring-color); }
  .hf-item.hf-danger:hover,
  .hf-item.hf-danger:focus-visible{ background:transparent; color:var(--danger-700); border-left-color:var(--danger-700); }
  .hf-icon{ inline-size:28px; block-size:28px; }
  @media (prefers-reduced-motion: reduce){
    .hf-menu{ transition:none; }
  }
}

/* =========================
   Settings: avatar card + danger zone
   ========================= */
.settings-avatar-card{
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  padding: var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel-alt);
}
.settings-avatar-actions{
  display:flex;
  gap:var(--sp-2);
  flex-wrap:wrap;
  justify-content:flex-start;
}
.settings-avatar-hint{
  margin:0;
  color:var(--muted);
  font-size:.85rem;
}

.form-section--danger{
  border-color:var(--danger-border-light);
  background:var(--danger-surface);
}
.form-section--danger h3{ color:var(--danger); }
.form-section--danger .help{ color:var(--danger-700); }
.danger-actions{
  display:flex;
  gap:var(--sp-2);
  flex-wrap:wrap;
  align-items:center;
}


/* =========================
   SOLIS – public pages (Eigentümer · Installateure · Technik · Kontakt)
   Palette from the content template; dark variants follow the site theme
   switch (OS preference unless forced, or [data-theme="dark"]).
   NOTE: the two dark token blocks below must stay in sync.
   ========================= */
:root{
  --sol-ink:#173930; --sol-muted:#576860; --sol-paper:#f6f5ef; --sol-line:#d5ded6;
  --sol-gold:#f0c76a; --sol-gold-hover:#f0c76a; --sol-green:#e5ece2; --sol-eyebrow:#6b734f;
  --sol-number:#957021; --sol-accent:#9e721e; --sol-figure-bg:#e1e4dc; --sol-bar-pv:#35634c;
  --sol-surface:#173930; --sol-on-surface:#ffffff; --sol-on-surface-muted:#d3dfd6;
  --sol-btn-bg:#173930; --sol-btn-fg:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sol-ink:#e6eee8; --sol-muted:#a5b6ae; --sol-paper:var(--bg); --sol-line:#2c3c40;
    --sol-gold-hover:#f5d68e; --sol-green:#1a2a27; --sol-eyebrow:#bcc49c;
    --sol-number:#e2bb63; --sol-accent:#e2bb63; --sol-figure-bg:#1e2b2f; --sol-bar-pv:#5aa47c;
    --sol-surface:#1d3a31; --sol-on-surface:#f3f7f4; --sol-on-surface-muted:#c3d3c9;
    --sol-btn-bg:#f0c76a; --sol-btn-fg:#101719;
  }
}
:root[data-theme="dark"]{
  --sol-ink:#e6eee8; --sol-muted:#a5b6ae; --sol-paper:var(--bg); --sol-line:#2c3c40;
  --sol-gold-hover:#f5d68e; --sol-green:#1a2a27; --sol-eyebrow:#bcc49c;
  --sol-number:#e2bb63; --sol-accent:#e2bb63; --sol-figure-bg:#1e2b2f; --sol-bar-pv:#5aa47c;
  --sol-surface:#1d3a31; --sol-on-surface:#f3f7f4; --sol-on-surface-muted:#c3d3c9;
  --sol-btn-bg:#f0c76a; --sol-btn-fg:#101719;
}

.iss-main{ display:block; }
.sol-main{ background:var(--sol-paper); color:var(--sol-ink); font-size:17px; line-height:1.65; padding-bottom:40px; }
.sol-main:focus{ outline:none; }
.sol-wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* Typography */
.sol-main h1, .sol-main h2, .sol-main h3{ font-family:var(--font-head); font-weight:700; line-height:1.12; letter-spacing:-.03em; color:var(--sol-ink); overflow-wrap:break-word; hyphens:auto; }
.sol-main h1{ font-size:clamp(40px,5.6vw,72px); letter-spacing:-.04em; margin:0 0 28px; max-width:930px; }
.sol-main h2{ font-size:clamp(30px,3.7vw,46px); margin:0 0 24px; }
.sol-main h3{ font-size:clamp(21px,2vw,24px); letter-spacing:-.02em; margin:0 0 14px; }
.sol-main p{ margin:0 0 20px; }
.sol-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sol-eyebrow); margin:0 0 20px; }
.sol-main .sol-lead{ font-size:21px; line-height:1.55; max-width:780px; color:var(--sol-muted); }
.sol-main .sol-note{ font-size:14px; color:var(--sol-muted); }
.sol-number{ display:block; font-size:14px; font-weight:600; color:var(--sol-number); margin-bottom:17px; }
.sol-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; }

/* Links + buttons */
.sol-main a{ color:inherit; }
.sol-link{ font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.sol-main a.sol-link:hover{ color:var(--sol-accent); }
.sol-btn{ display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:12px 21px; border:1px solid var(--sol-ink); border-radius:5px; background:transparent; color:var(--sol-ink); font:inherit; font-size:15px; font-weight:600; line-height:1.3; text-decoration:none; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.sol-main a.sol-btn{ color:var(--sol-ink); }
.sol-main .sol-btn--primary, .sol-main a.sol-btn--primary{ background:var(--sol-btn-bg); border-color:var(--sol-btn-bg); color:var(--sol-btn-fg); }
.sol-main .sol-btn:hover, .sol-main a.sol-btn:hover{ background:var(--sol-gold-hover); border-color:var(--sol-gold-hover); color:#173930; }
.sol-btn[disabled]{ opacity:.6; pointer-events:none; }
.sol-main a:focus-visible, .sol-main .sol-btn:focus-visible{ outline:3px solid var(--sol-accent); outline-offset:4px; box-shadow:none; border-radius:4px; }

/* Layout */
.sol-hero{ padding:80px 0 68px; }
.sol-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.sol-block{ padding:64px 0; border-top:1px solid var(--sol-line); }
.sol-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.sol-grid > *{ min-width:0; }
.sol-grid--center{ align-items:center; margin-top:36px; }
.sol-thirds{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.sol-reading{ max-width:820px; }

/* Building blocks */
.sol-statbar{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:34px; margin-bottom:62px; border-radius:7px; background:var(--sol-surface); color:var(--sol-on-surface); }
.sol-statbar strong{ display:block; font-family:var(--font-head); font-size:clamp(30px,3.4vw,40px); font-weight:700; line-height:1.2; letter-spacing:-.04em; }
.sol-statbar span{ display:block; margin-top:9px; font-size:14px; color:var(--sol-on-surface-muted); }
.sol-panel{ padding:32px; border-radius:6px; background:var(--sol-green); }
.sol-dark{ padding:42px; border-radius:7px; background:var(--sol-surface); color:var(--sol-on-surface); }
.sol-block > .sol-panel, .sol-block > .sol-dark{ margin-top:28px; }
.sol-block > .sol-dark:first-child{ margin-top:0; }
.sol-panel > :last-child, .sol-dark > :last-child{ margin-bottom:0; }
.sol-main .sol-dark h2, .sol-main .sol-dark h3{ color:var(--sol-on-surface); }
.sol-main .sol-dark a.sol-btn{ color:var(--sol-on-surface); border-color:var(--sol-on-surface-muted); }
.sol-main .sol-dark a.sol-btn:hover{ color:#173930; border-color:var(--sol-gold-hover); }
.sol-flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0; }
.sol-flow--stack{ grid-template-columns:1fr; margin-top:0; }
.sol-flow > div{ padding:24px; border:1px solid var(--sol-line); border-radius:5px; }
.sol-flow strong{ display:block; margin-bottom:8px; }
.sol-flow span{ display:block; font-size:15px; color:var(--sol-muted); }
.sol-bar{ display:flex; height:16px; margin:22px 0; border-radius:10px; overflow:hidden; }
.sol-bar i:first-child{ width:84.7059%; background:var(--sol-bar-pv); }
.sol-bar i:last-child{ flex:1; background:var(--sol-gold); }
.sol-rule{ margin:26px 0 0; padding:4px 0 4px 22px; border-left:3px solid #b38a3a; }
.sol-rule p{ margin:0; }
.sol-toc{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.sol-main .sol-toc a{ display:inline-flex; align-items:center; min-height:40px; padding:7px 14px; border:1px solid var(--sol-line); border-radius:30px; font-size:14px; text-decoration:none; }
.sol-main .sol-toc a:hover{ background:var(--sol-green); }
.sol-main ul{ margin:0 0 20px; padding-left:23px; }
.sol-main li{ margin:8px 0; }

/* Tables */
.sol-main table{ width:100%; margin:20px 0; border-collapse:collapse; font-size:15px; }
.sol-main th, .sol-main td{ padding:13px 8px; border-bottom:1px solid var(--sol-line); text-align:left; vertical-align:top; }
.sol-main th{ font-weight:600; }
.sol-main thead th{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--sol-muted); }
.sol-main th small{ display:block; margin-top:2px; font-size:13px; font-weight:400; color:var(--sol-muted); }
.sol-main td:last-child:not(:first-child){ min-width:105px; }
.sol-main tfoot th, .sol-main tfoot td{ font-weight:700; }
.sol-table-scroll{ overflow-x:auto; margin:28px 0 0; }
.sol-table-scroll table{ margin:0; }

/* Figures: original screenshots and photos are never cropped */
.sol-figure{ margin:0; }
.sol-zoom{ display:block; overflow:hidden; border-radius:6px; background:var(--sol-figure-bg); cursor:zoom-in; }
.sol-zoom picture{ display:block; } /* WebP wrapper: same box as the bare <img> */
.sol-zoom img{ display:block; width:100%; height:auto; transition:opacity .15s ease; }
.sol-zoom:hover img{ opacity:.9; }
.sol-figure--screen .sol-zoom{ padding:12px; }
.sol-figure figcaption{ padding-top:12px; font-size:13px; line-height:1.5; color:var(--sol-muted); }
.sol-diagram{ margin:0; padding:20px 24px; border:1px solid var(--border); border-radius:12px; background:var(--panel-alt); }
.sol-diagram .iss-concept-svg{ margin:0; }

/* Contact page */
.sol-contact .iss-contact-form{ margin-top:12px; }
.sol-contact .iss-field{ font-size:14px; }
.sol-contact .iss-consent{ font-size:14px; }
.sol-contact .iss-contact-success:focus{ outline:none; }
.sol-main .iss-contact-success h3{ margin:0; }

/* Footer */
.iss-footer{ border-top:1px solid var(--border); }
.iss-footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:20px 30px; padding-top:30px; padding-bottom:30px; flex-wrap:wrap; }
.iss-footer .brand{ order:0; font-family:var(--font-head); font-weight:800; display:flex; align-items:center; gap:8px; text-decoration:none; } /* header .brand sets order:1 */
.iss-footer .brandmark{ width:auto; height:40px; border-radius:6px; }
.iss-footer p{ font-size:13px; color:var(--muted); margin:0; line-height:1.6; }
.iss-footer a{ color:inherit; }
.iss-footer a:last-child{ font-size:13px; white-space:nowrap; }
.iss-footer a:hover{ color:var(--primary); }

/* Responsive */
@media (max-width:960px){
  .sol-wrap{ padding:0 5%; } /* aligns with the 90%-wide mobile header */
}
@media (max-width:760px){
  .sol-hero{ padding:48px 0 40px; }
  .sol-main .sol-lead{ font-size:19px; }
  .sol-main h1{ font-size:clamp(34px,10vw,44px); }
  .sol-main h2{ font-size:clamp(27px,7.6vw,32px); }
  .sol-grid, .sol-thirds{ grid-template-columns:1fr; gap:30px; }
  .sol-statbar{ grid-template-columns:1fr; gap:22px; padding:24px; margin-bottom:38px; }
  .sol-statbar strong{ font-size:32px; }
  .sol-flow{ grid-template-columns:1fr; }
  .sol-block{ padding:43px 0; }
  .sol-panel, .sol-dark{ padding:26px; }
  .sol-diagram{ padding:14px; }
  .sol-main th, .sol-main td{ padding:11px 6px; }
}
@media (prefers-reduced-motion:reduce){
  .sol-zoom img{ transition:none; }
}

/* =========================
   SOLIS – interactions & theme (3.2–3.5)
   ========================= */

/* Theme toggle button (always visible in the header) */
.theme-toggle{
  order:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--header-button-h); height:var(--header-button-h);
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  border-radius:999px; cursor:pointer; font-size:15px; line-height:1;
  box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .04s ease;
  flex-shrink:0;
}
.theme-toggle:hover{ box-shadow:var(--shadow-md); }
.theme-toggle:active{ transform:translateY(1px); }
.theme-toggle:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* Scrollspy: highlight the current section's nav link */
.site-nav a.active{ color:var(--primary); border-bottom-color:var(--primary); }

/* Scroll-reveal — only engages once JS adds .js-reveal to <html> (and motion is allowed),
   so the page stays fully visible if JS is off or the user prefers reduced motion. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .iss-reveal{
    opacity:0; transform:translateY(18px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
    will-change:opacity, transform;
  }
  .js-reveal .iss-reveal.in{ opacity:1; transform:none; }
}

/* Comfortable tap areas on touch / coarse-pointer devices */
@media (hover:none){
  .theme-toggle,
  .nav-toggle,
  .hf-menu-trigger{ min-height:40px; }
}

/* =========================
   SOLIS – energy-flow diagram (Technik page) + full-resolution image dialog
   All themed via the shared CSS variables.
   ========================= */

/* SVG energy-flow diagram */
.iss-concept-svg{ display:block; width:100%; height:auto; margin:20px 0 0; }
/* The node rectangles keep their own light pastel/white fills (set as SVG
   attributes) so the dark label text stays legible in both light and dark mode —
   don't repaint them with a theme variable. */
.iss-flow-legend{ display:flex; gap:20px; flex-wrap:wrap; font-size:10px; margin:12px 0 14px; color:var(--muted); }
.iss-flow-legend>span{ display:flex; align-items:center; gap:6px; }
.iss-flow-legend i{ width:24px; border-top:2px solid #ac4a20; }
.iss-flow-legend>span+span i{ border-top:2px dashed #58724c; }

/* Full-resolution image dialog (replaces the old .iss-lb overlay) */
.iss-image-dialog{ border:1px solid var(--border); border-radius:12px; padding:18px; max-width:min(1100px,94vw); max-height:94vh; background:var(--bg); color:var(--text); box-shadow:var(--shadow-md); }
.iss-image-dialog::backdrop{ background:rgba(21,32,17,.85); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
#iss-close-image{ display:block; margin-left:auto; border:1px solid var(--border); border-radius:5px; background:transparent; color:var(--text); padding:8px 13px; font-size:12px; cursor:pointer; }
.iss-image-tools{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.iss-image-tools button, .iss-image-tools a{ font-size:12px; border:1px solid var(--border); padding:8px 12px; border-radius:5px; background:transparent; color:var(--text); cursor:pointer; }
.iss-image-tools button[aria-pressed=true]{ background:var(--sol-surface); color:var(--sol-on-surface); border-color:var(--sol-surface); }
.iss-image-viewport{ overflow:auto; max-height:72vh; margin-top:15px; }
.iss-image-viewport img{ display:block; margin:0 auto; max-width:100%; max-height:70vh; width:auto; height:auto; object-fit:contain; }
.iss-image-dialog.zoomed .iss-image-viewport{ cursor:all-scroll; }
.iss-image-dialog.zoomed .iss-image-viewport img{ max-width:none; max-height:none; }
#iss-dialog-caption{ font-size:12px; color:var(--muted); margin:15px 0 0; }

/* =========================
   SOLIS – contact form
   ========================= */
.iss-contact-form{ margin-top:4px; }
.iss-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.iss-field{ display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:600; color:var(--text); }
.iss-field>span{ letter-spacing:.01em; }
.iss-field small{ color:var(--muted); font-weight:400; }
.iss-field input, .iss-field select, .iss-field textarea{
  font:inherit; font-weight:400; color:var(--text); background:var(--panel);
  border:1px solid var(--border); border-radius:8px; padding:12px 14px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.iss-field textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.iss-field input:focus, .iss-field select:focus, .iss-field textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.iss-consent{ display:flex; align-items:flex-start; gap:10px; margin:18px 0 20px; font-size:12.5px; font-weight:400; color:var(--muted); line-height:1.6; max-width:760px; cursor:pointer; }
.iss-consent input{ margin-top:2px; width:16px; height:16px; flex-shrink:0; accent-color:var(--primary); cursor:pointer; }
.iss-form-foot{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.iss-form-error{ color:var(--danger); font-size:12.5px; margin:0; }
.iss-contact-success{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:clamp(24px,3vw,32px); background:var(--panel-alt); border:1px solid var(--border); border-radius:12px; }
.iss-contact-success[hidden]{ display:none; }   /* author display: must re-assert hidden, else the UA [hidden] rule is overridden */
.iss-contact-check{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--primary); color:var(--on-primary); font-size:22px; line-height:1; }
.iss-contact-success p{ color:var(--muted); font-size:14px; margin:0; max-width:520px; line-height:1.7; }
/* Honeypot wrapper: hidden from people (and assistive tech) but still submitted by bots */
.iss-hp{ position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
@media(max-width:600px){ .iss-form-grid{ grid-template-columns:1fr; } }

/* iOS Safari zooms into any focused field below 16px and stays zoomed
   (e.g. after login). Keep form fields at 16px on touch devices. */
@media (hover:none) and (pointer:coarse){
  .input,
  .iss-field input, .iss-field select, .iss-field textarea{ font-size:16px; }
}