/* smaints Help Center — Chatwoots Portal (support.smaints.de/hc/hilfe) im smaints-Design (Christian 03.11.2026).
   Geladen von help-center/portal/_portal_head.html.erb nach Chatwoots Bündel. Chatwoot schreibt die Portal-Farben als
   feste Hex-Werte in Tailwind-Klassen (text-slate-900 → #111113), deshalb hier Klassen unter #portal neu statt Variablen.
   Regeln: design-system/smaints/DESIGN.md (Web-Regeln G1–G16, Freigabe 16.10.2026) — Crème-Grund, Ink-Schrift,
   Olivbraun als einziger Akzent, 1-px-Linien, kein Schatten, New Order für Überschriften, Arboria für Text.
   Werte aus design-system/smaints/tokens.css (über Donna, 03.11.2026); test_portal_design.py gleicht sie mit
   tokens.json ab, wo der Workspace daneben liegt. Nie Hex außerhalb des :root-Blocks. */
@font-face{font-family:'Arboria';src:url('Arboria-Book.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Arboria';src:url('Arboria-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'New Order';src:url('NewOrder-Semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}

:root{
  --color-bg:#FAF4F0;
  --color-surface:#FFFFFF;
  --color-ink:#1A1402;
  --color-muted:#595342;
  --color-accent:#595342;
  --color-accent-dark:#3D3629;
  --color-accent-light:#F0EBE3;
  --color-warm-mid:#C5B9AE;
  --color-line:#EFE9E3;
  --color-border:#E9E0D6;
  --color-link:#E2DAD2;
  --font-display:'New Order', sans-serif;
  --font-body:'Arboria', sans-serif;
  --radius-pill:9999px;
  --radius-card:10px;
  --radius-sm:5px;
  --motion-duration-fast:180ms;
  --motion-easing-out:cubic-bezier(0, 0, 0.2, 1);
  /* Logo nur als Shopify-CDN-URL (DESIGN.md, Logo), dieselbe Datei wie im Shop-Header */
  --sm-logo:url('https://smaints.de/cdn/shop/files/Union_1_fae787be-c0c4-40c9-aa8c-23c53cdd408c.png?v=1754029066&width=240');
}

/* ---------- Grund, Schrift, Farben ---------- */
html, body{background:var(--color-bg) !important;color:var(--color-ink)}
body, #portal, #portal .font-inter, #portal input, #portal button, #portal select{
  font-family:var(--font-body) !important;font-weight:400;-webkit-font-smoothing:antialiased}
#portal h1, #portal h2, #portal h3, #portal h4{font-family:var(--font-display) !important;font-weight:600;color:var(--color-ink)}
#portal .bg-white{background-color:var(--color-bg)}
#portal :is(.text-slate-900, .text-slate-800, .text-slate-700){color:var(--color-ink)}
#portal :is(.text-slate-600, .text-slate-500, .text-slate-400){color:var(--color-muted)}
#portal :is(.stroke-slate-700, .stroke-slate-800){stroke:var(--color-ink)}
#portal :is(.border-slate-100, .border-slate-200, .border-slate-50){border-color:var(--color-line)}
#portal .bg-slate-50{background-color:var(--color-accent-light)}
#portal :is(.shadow-sm, .shadow-inner, .shadow-lg, .shadow-xl, .shadow){box-shadow:none !important}
#portal .max-w-5xl{max-width:1140px}
#portal a{transition:opacity var(--motion-duration-fast) var(--motion-easing-out)}
#portal :focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ---------- Kopfzeile: Logo statt Name, „Zurück zu smaints.de“, kein Hell/Dunkel ---------- */
#portal header{background:var(--color-bg) !important;border-bottom:1px solid var(--color-line)}
#portal header a.min-w-0.h-10::before{content:"";display:block;width:80px;height:43px;
  background:var(--sm-logo) left center / contain no-repeat}
#portal header a.min-w-0.h-10 > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#portal #header-action-button{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--color-ink)}
#portal #header-action-button svg{display:none}
#portal #header-action-button:hover{opacity:.7}
#portal div:has(> #toggle-appearance), #portal div:has(> #mobile-appearance-dropdown){display:none !important}
#portal #mobile-menu-toggle ~ div a{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--color-ink)}
#portal #mobile-menu-toggle ~ div a svg{display:none}
#portal div:has(> #mobile-appearance-dropdown) + span.h-px{display:none}

/* ---------- Startseite: Hero mit Eyebrow, Suche ---------- */
#portal #portal-bg, #portal #portal-bg-gradient{background:var(--color-bg) !important;background-image:none !important}
#portal section#portal-bg #portal-bg-gradient{padding-top:96px;padding-bottom:64px}
#portal section#portal-bg #portal-bg-gradient > div > span:first-child{
  display:inline-flex !important;align-items:center;margin-bottom:24px;padding:5px 14px;border-radius:var(--radius-pill);
  background:var(--color-accent-light);color:var(--color-accent);font-family:var(--font-display);font-weight:600;
  font-size:12px;line-height:1.4;letter-spacing:0.12em;text-transform:uppercase}
#portal section#portal-bg h1{font-size:52px;line-height:1.05;letter-spacing:-0.035em}
#portal section#portal-bg h1 + p{font-size:20px;line-height:1.5;color:var(--color-muted);padding-top:16px;padding-bottom:32px;max-width:680px}
#portal #search-wrap form > div{height:56px;padding:0 24px;border-radius:var(--radius-pill) !important;
  border:1px solid var(--color-border) !important;background:var(--color-surface) !important;color:var(--color-muted);box-shadow:none !important}
#portal #search-wrap form > div:focus-within{border-color:var(--color-accent) !important}
#portal #search-wrap input{background:transparent !important;color:var(--color-ink);font-size:17px}
#portal #search-wrap input::placeholder{color:var(--color-muted);opacity:1}
#portal #search-wrap form + div > div{border:1px solid var(--color-line) !important;border-radius:var(--radius-card);
  background:var(--color-surface) !important;box-shadow:none !important}
#portal #search-wrap li{border-radius:var(--radius-sm)}
#portal #search-wrap li:hover, #portal #search-wrap li:focus{background:var(--color-accent-light)}
#portal #search-wrap li .text-n-slate-12{color:var(--color-ink);font-family:var(--font-display);font-weight:600}
#portal #search-wrap li :is(.text-n-slate-11, .text-n-slate-10){color:var(--color-muted)}
#portal #search-wrap mark{background:var(--color-accent-light);color:var(--color-ink);border-radius:3px;padding:0 2px}

/* ---------- Karten: „Häufig gefragt“ und Kategorien ---------- */
#portal section.lg\:container > div{background:var(--color-surface);border:1px solid var(--color-line) !important;
  border-radius:var(--radius-card);padding:24px;gap:16px;transition:border-color var(--motion-duration-fast) var(--motion-easing-out)}
#portal #category-block:hover{border-color:var(--color-warm-mid) !important}
#portal section.lg\:container h3{font-size:24px;line-height:1.1;letter-spacing:-0.02em;padding-left:0}
#portal section.lg\:container h3 + *, #portal #category-block h3 ~ span{font-size:15px}
#portal #category-block .px-2, #portal #category-block .px-1, #portal section.lg\:container .px-2{padding-left:0;padding-right:0}
#portal #category-block > div:first-child span.text-base{padding-left:0;font-size:15px;line-height:1.5;color:var(--color-muted)}
/* mehr Gewicht als die .px-2-Regel darüber: Text bündig mit der Überschrift, Hover-Fläche ragt 12 px heraus */
#portal section.lg\:container #category-item{padding:8px 12px;margin:0 -12px;border-radius:var(--radius-sm);font-size:16px;line-height:1.5;color:var(--color-ink)}
#portal #category-item:hover{background-color:var(--color-accent-light) !important}
#portal #category-item svg{color:var(--color-muted);stroke:var(--color-muted)}
/* „• 7 Artikel“: die Autorenzeile davor ist leer (_authors.html.erb), der Punkt steht dann allein vorn */
#portal div.flex-row.items-center.gap-1 > span.text-slate-600:first-child:not(:only-child){display:none}
#portal #category-block > div:last-child{padding-top:16px;border-top:1px solid var(--color-line)}
#portal #category-block > div:last-child span, #portal #category-block > div:last-child a{font-size:14px}
#portal #category-block > div:last-child a{font-family:var(--font-display);font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--color-accent)}
#portal #category-block > div:last-child a:hover{color:var(--color-accent-dark)}

/* ---------- Kategorie- und Artikelseite ---------- */
#portal div#portal-bg #portal-bg-gradient{padding-top:64px;padding-bottom:32px;border-bottom:1px solid var(--color-line)}
#portal div#portal-bg h1{font-size:44px;line-height:1.05;letter-spacing:-0.03em;font-weight:600}
#portal div#portal-bg a.text-sm, #portal div#portal-bg span.text-sm{font-family:var(--font-body);font-weight:400;font-size:14px}
/* Brotkrumen: „Help Center“ brach auf dem Handy in zwei Zeilen um (Max 04.11.); der Artikeltitel dahinter kürzt mit … */
#portal div#portal-bg a.text-sm{white-space:nowrap}
#portal div#portal-bg span.text-base{font-size:14px;font-weight:400;color:var(--color-muted)}
#portal div#portal-bg h1 + span{margin-top:8px;font-size:17px;line-height:1.55;font-weight:400;color:var(--color-muted)}
#portal .max-w-3xl{max-width:680px;margin-left:0}  /* bündig mit Überschrift und Brotkrumen */
#portal #cw-article-content{color:var(--color-ink);font-size:17px;line-height:1.55}
#portal #cw-article-content :is(p, li, td, blockquote){font-family:var(--font-body);font-weight:400;color:var(--color-ink)}
#portal #cw-article-content :is(strong, b){font-weight:700;color:var(--color-ink)}
#portal #cw-article-content :is(h1, h2, h3, h4){font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;color:var(--color-ink)}
#portal #cw-article-content h2{font-size:24px;line-height:1.1}
#portal #cw-article-content h3{font-size:20px;line-height:1.2}
#portal #cw-article-content a{color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-accent);
  text-decoration-thickness:1px;text-underline-offset:3px}
#portal #cw-article-content a:hover{text-decoration-color:var(--color-ink)}
#portal #cw-article-content li::marker{color:var(--color-accent)}
#portal #cw-article-content hr{border-color:var(--color-line)}
#portal #cw-article-content blockquote{border-left:2px solid var(--color-accent);color:var(--color-muted)}
#portal #cw-article-content .tableWrapper{border-color:var(--color-line) !important;border-radius:var(--radius-card)}
#portal #cw-article-content th{background:var(--color-accent-light) !important;color:var(--color-ink) !important;border-color:var(--color-line) !important}
#portal #cw-article-content td{color:var(--color-ink) !important;border-color:var(--color-line) !important}
#portal #cw-article-content img{border-radius:var(--radius-sm)}
/* Artikelliste auf der Kategorieseite */
#portal section.max-w-5xl > div.gap-6 > div.border{background:var(--color-surface);border-color:var(--color-line);
  border-radius:var(--radius-card);transition:border-color var(--motion-duration-fast) var(--motion-easing-out)}
#portal section.max-w-5xl > div.gap-6 > div.border:hover{border-color:var(--color-warm-mid)}
#portal section.max-w-5xl > div.gap-6 > div.border > a{padding:24px}
#portal section.max-w-5xl > div.gap-6 h3{font-size:20px;line-height:1.2;letter-spacing:-0.02em}
#portal section.max-w-5xl > div.gap-6 p{font-size:15px;line-height:1.5;color:var(--color-muted)}
#portal section.max-w-5xl > div.gap-6 span.text-sm{font-size:13px}

/* ---------- Fußzeile (help-center/portal/_footer.html.erb) ---------- */
.sm-footer{margin-top:0;border-top:1px solid var(--color-line)}
.sm-kontakt{max-width:680px;margin:0 auto;padding:96px 40px;text-align:center;display:flex;flex-direction:column;align-items:center}
.sm-eyebrow{display:inline-flex;align-items:center;padding:5px 14px;border-radius:var(--radius-pill);background:var(--color-accent-light);
  color:var(--color-accent);font-family:var(--font-display);font-weight:600;font-size:12px;line-height:1.4;letter-spacing:0.12em;text-transform:uppercase}
.sm-kontakt h2{margin:24px 0 0;font-size:44px;line-height:1.05;letter-spacing:-0.03em}
.sm-kontakt p{margin:16px 0 32px;font-size:17px;line-height:1.55;color:var(--color-muted)}
.sm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;border-radius:var(--radius-pill);
  background:var(--color-ink);color:var(--color-bg) !important;font-family:var(--font-display);font-weight:600;font-size:14px;line-height:1;
  letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;
  transition:opacity var(--motion-duration-fast) var(--motion-easing-out)}
.sm-btn:hover{opacity:.85}
.sm-rechtliches{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px;padding:24px 16px 40px;border-top:1px solid var(--color-line)}
.sm-rechtliches a{font-size:14px;line-height:1.5;color:var(--color-muted);text-decoration:none}
.sm-rechtliches a:hover{color:var(--color-ink)}

/* ---------- Mobil (G4: H1 40, H2 32, Body 16) ---------- */
@media (max-width:767px){
  #portal section#portal-bg #portal-bg-gradient{padding-top:64px;padding-bottom:40px}
  #portal section#portal-bg h1{font-size:40px}
  #portal section#portal-bg h1 + p{font-size:17px}
  #portal div#portal-bg #portal-bg-gradient{padding-top:40px}
  #portal div#portal-bg h1{font-size:32px}
  #portal #cw-article-content{font-size:16px}
  .sm-kontakt{padding:64px 16px}
  .sm-kontakt h2{font-size:32px}
}
@media (prefers-reduced-motion:reduce){#portal *, .sm-btn{transition:none !important}}