/* Kundenportal app.werqo.at im WERQO-Look (Graphit & Glut, nur dunkel). Farben NUR über die Variablen unten (Werte wie ../app.css,
   shk Core Farbwelt.cs). Schriften lokal (Portal.cs reicht ../schriften/ unter /portal/schriften/ durch). Keine Inline-Stile (CSP). */
@font-face { font-family: "Inter"; src: url(schriften/Inter-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(schriften/Inter-SemiBold.ttf) format("truetype"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(schriften/Inter-Bold.ttf) format("truetype"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Archivo Breit"; src: url(schriften/ArchivoBreit-ExtraBold.ttf) format("truetype"); font-weight: 600 900; font-display: swap; }

:root {
  --grund: #16181B; --flaeche: #1E2125; --karte: #272A2F; --karte2: #31353B;
  --linie: rgba(255,255,255,.08); --linie-stark: rgba(255,255,255,.14); --feldrand: #737B87;
  --ink: #EDEFF2; --ink2: #B4BAC3; --muted: #979EA8;
  --glut: #FF7A33; --glut-text: #FF9A5C; --auf-glut: #16181B;
  --wasser: #3CC6D4; --fehler: #FF6B85; --gruen: #4FCB8D;
  --glut-grund: rgba(255,122,51,.16); --wasser-grund: rgba(60,198,212,.14); --gruen-grund: rgba(79,203,141,.14);
  --taste: #2C3036; --taste-hover: #343840; --taste-druck: #262A2F;
  --taste-rand: rgba(255,255,255,.14); --taste-rand-hover: rgba(255,255,255,.20);
  --taste-schatten: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --glut-verlauf: linear-gradient(#FF8A47, #F26A24);
  --glut-verlauf-hover: linear-gradient(#FF9A5C, #FF7A33);
  --glut-verlauf-druck: linear-gradient(#F57A3A, #E8631F);
  --glut-schein: inset 0 1px 0 rgba(255,255,255,.30), 0 6px 16px -6px rgba(255,122,51,.55);
  --fokus: 0 0 0 3px rgba(255,122,51,.45);
  --licht-glut: rgba(255,122,51,.16); --licht-wasser: rgba(60,198,212,.08);
  --schrift: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --anzeige: "Archivo Breit", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --rund: 10px; --rund-karte: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100vh; color: var(--ink); font: 15px/1.55 var(--schrift); -webkit-font-smoothing: antialiased;
  background: radial-gradient(1000px 560px at 84% -10%, var(--licht-glut), transparent 62%),
              radial-gradient(900px 500px at -6% 108%, var(--licht-wasser), transparent 62%), var(--grund);
  background-attachment: fixed;
}
a { color: var(--glut-text); text-underline-offset: 3px; }
a:hover { color: var(--glut); }
h1 { font-family: var(--anzeige); font-weight: 800; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 0; letter-spacing: -.005em; }
h2 { font-size: 22px; font-weight: 600; margin: 0; }
h3 { font-size: 17px; font-weight: 600; margin: 0; }
p { margin: 0; }
code { font-family: var(--mono); font-size: 13px; }
.leise { color: var(--ink2); }
.klein { font-size: 13.5px; }
.glut-text { color: var(--glut-text); }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 6px; }

/* Kopf und Fuß */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--linie); }
.kopf-links, .kopf-rechts { display: flex; align-items: center; gap: clamp(12px, 3vw, 40px); flex-wrap: wrap; }
.kopf-rechts { gap: 14px; }
.kopf-rechts a.leise { text-decoration: none; }
.marke { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.marke span { font-family: var(--anzeige); font-weight: 800; font-size: 21px; letter-spacing: .04em; }
.marke:hover { color: var(--ink); }
.reiter { display: flex; gap: 4px; flex-wrap: wrap; }
.reiter a { padding: 8px 14px; border-radius: 8px; color: var(--ink2); text-decoration: none; font-weight: 500; }
.reiter a:hover { background: var(--taste); color: var(--ink); }
.reiter a.aktiv { background: var(--karte2); color: var(--ink); }
.fuss { display: flex; gap: 24px; flex-wrap: wrap; padding: 24px clamp(16px, 4vw, 48px); font-size: 14px; color: var(--muted); margin-top: auto; }
.fuss a { color: var(--muted); }

/* Tasten (deckend, wie das Programm) */
button, .glut, .taste { font: inherit; cursor: pointer; }
.glut { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 0; border-radius: 8px;
  background: var(--glut-verlauf); color: var(--auf-glut); font-weight: 600; font-size: 16px; text-decoration: none; box-shadow: var(--glut-schein); }
.glut:hover { background: var(--glut-verlauf-hover); color: var(--auf-glut); }
.glut:active { background: var(--glut-verlauf-druck); }
.glut:disabled { opacity: .6; cursor: default; }
.taste { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--taste-rand); background: var(--taste); color: var(--ink); font-weight: 500; box-shadow: var(--taste-schatten); }
.taste:hover { background: var(--taste-hover); border-color: var(--taste-rand-hover); }
.taste:active { background: var(--taste-druck); }
.taste.klein { min-height: 36px; font-size: 14px; }
.taste.mini { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.breit-knopf { width: 100%; }
.klein-link { background: none; border: 0; padding: 0; color: var(--glut-text); font-size: 14px; }
.klein-link:hover { color: var(--glut); text-decoration: underline; }

/* Karten */
.karte { background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--rund-karte); padding: 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.oberzeile { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.oberzeile.glut-text { color: var(--glut-text); }

/* Anmelden */
.anmelden { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(32px, 7vw, 96px); flex-wrap: wrap; padding: 32px clamp(16px, 4vw, 48px); }
.anmelden-text { max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
.anmelden-text h1 { font-size: clamp(32px, 4.4vw, 46px); }
.anmelden-text p { font-size: 17px; color: var(--ink2); }
.anmelden-form { width: min(420px, 100%); gap: 18px; padding: 36px; }
.anmelden-form > div { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 14px; color: var(--ink2); }
input { height: 46px; width: 100%; background: var(--grund); color: var(--ink); border: 1px solid var(--feldrand); border-radius: 8px; padding: 0 14px; font: inherit; font-size: 16px; }
input:focus { outline: none; border-color: var(--glut); box-shadow: var(--fokus); }
.zeile-zwischen { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#schrittDaten input + .zeile-zwischen { margin-top: 10px; }
.fehler { color: var(--fehler); font-size: 14.5px; }
.hinweis { font-size: 13.5px; color: var(--muted); }
.auswahl { display: flex; flex-direction: column; gap: 8px; }
.auswahl .taste { justify-content: flex-start; }

/* Übersicht, Herunterladen */
.inhalt { width: 100%; max-width: 1280px; margin: 0 auto; padding: 36px clamp(16px, 4vw, 48px); display: flex; flex-direction: column; gap: 24px; }
.raster { display: grid; gap: 20px; }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.karte.gross { grid-column: span 2; padding: 32px; }
.karte.gross h2 { font-size: 28px; }
.breit { max-width: 560px; font-size: 16px; }
.knopfzeile { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.zustand { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); }
.daten { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; }
.daten dt { color: var(--muted); }
.daten dd { margin: 0; overflow-wrap: anywhere; }
.klein-karte { padding: 24px; gap: 10px; }
.klein-karte p { font-size: 15px; }
.geraet.hier { border: 2px solid var(--glut); }
.marke-chip { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--karte2); color: var(--glut-text); white-space: nowrap; }
.schritte { margin: 0; padding-left: 20px; font-size: 14.5px; color: var(--ink2); display: flex; flex-direction: column; gap: 4px; }
.leer { color: var(--muted); font-size: 14.5px; }
.mac-zeile { display: flex; flex-direction: column; gap: 8px; }
.kopierzeile { display: flex; gap: 8px; }
.kopierzeile code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: var(--grund); border: 1px solid var(--linie-stark); border-radius: 8px; padding: 12px; }
.qr-feld { display: flex; gap: 16px; align-items: center; }
.qr-feld img { border-radius: 8px; flex-shrink: 0; }
.details { color: var(--ink2); font-size: 14px; }
.details summary { cursor: pointer; color: var(--ink2); }
.details .daten { margin-top: 12px; }
.details code { font-size: 12.5px; }

/* Anfragen (Anfragen.cs) */
.zahl-chip { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--glut); color: var(--auf-glut); font-size: 12px; font-weight: 600; text-align: center; line-height: 18px; }
.anfragen-raster { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.spalte { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-knopf { height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--linie-stark); background: transparent; color: var(--ink2); font-size: 14px; font-weight: 500; }
.chip-knopf:hover { background: var(--taste); color: var(--ink); }
.chip-knopf.an { background: var(--karte2); color: var(--ink); border-color: transparent; font-weight: 600; }
.chip-knopf .zahl { color: var(--muted); margin-left: 4px; }
.karte.liste { padding: 0; gap: 0; overflow: hidden; }
.anfrage-zeile { display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: var(--ink); text-decoration: none; }
.anfrage-zeile + .anfrage-zeile { border-top: 1px solid var(--linie); }
.anfrage-zeile:hover { background: var(--karte); color: var(--ink); }
.neu-punkt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.anfrage-zeile.neu .neu-punkt { background: var(--glut); }
.anfrage-zeile .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.anfrage-zeile .titel { font-weight: 500; overflow-wrap: anywhere; }
.anfrage-zeile.neu .titel { font-weight: 600; }
.anfrage-zeile .unter { font-size: 13.5px; color: var(--muted); }
.leer-zeile { padding: 22px 20px; color: var(--muted); }
.stand-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--karte2); color: var(--ink2); }
.stand-chip.glut { background: var(--glut-grund); color: var(--glut-text); }
.stand-chip.wasser { background: var(--wasser-grund); color: var(--wasser); }
.stand-chip.gruen { background: var(--gruen-grund); color: var(--gruen); }
.neue-anfrage { gap: 14px; position: sticky; top: 20px; }
.umschalter { display: flex; gap: 8px; }
.umschalter button { flex: 1; height: 38px; border-radius: 8px; border: 1px solid var(--linie-stark); background: transparent; color: var(--ink2); font-size: 14px; }
.umschalter button:hover { background: var(--taste); color: var(--ink); }
.umschalter button.an { background: var(--karte2); color: var(--ink); border-color: transparent; font-weight: 600; }
.feldgruppe { display: flex; flex-direction: column; gap: 7px; }
textarea { width: 100%; background: var(--grund); color: var(--ink); border: 1px solid var(--feldrand); border-radius: 8px; padding: 12px 14px; font: inherit; font-size: 15px; resize: vertical; }
textarea:focus { outline: none; border-color: var(--glut); box-shadow: var(--fokus); }
.ablage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px; border: 1px dashed var(--linie-stark); border-radius: 8px; color: var(--ink2); font-size: 14px; text-align: center; cursor: pointer; }
.ablage:hover { border-color: var(--glut); color: var(--ink); }
.ablage span { font-size: 12.5px; color: var(--muted); }
.ablage input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zurueck { font-size: 14px; text-decoration: none; }
.titelzeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.titelzeile h2 { font-size: 24px; overflow-wrap: anywhere; }
.verlauf { display: flex; flex-direction: column; gap: 12px; }
.beitrag { background: var(--flaeche); border-left: 3px solid var(--feldrand); border-radius: 10px; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.beitrag.team { background: var(--karte); border-left-color: var(--glut); }
.beitrag-kopf { font-size: 14px; font-weight: 600; }
.beitrag-kopf .leise { font-weight: 400; }
.beitrag-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink2); }
.anhaenge { display: flex; gap: 8px; flex-wrap: wrap; }
.anhang { font-size: 13px; padding: 5px 10px; border-radius: 6px; background: var(--karte2); color: var(--ink2); text-decoration: none; }
.anhang:hover { color: var(--ink); }
.antwort { padding: 16px; gap: 10px; }
.antwort textarea { border-color: var(--linie-stark); }
.glut.klein-glut { min-height: 40px; font-size: 15px; padding: 0 18px; }
label.taste { cursor: pointer; color: var(--ink); }
.seitenkarte { padding: 22px; gap: 12px; font-size: 14.5px; }
@media (max-width: 900px) {
  .anfragen-raster { grid-template-columns: minmax(0, 1fr); }
  .neue-anfrage { position: static; }
}

@media (max-width: 900px) {
  .raster.drei { grid-template-columns: minmax(0, 1fr); }
  .karte.gross { grid-column: auto; }
  #zurWebsite { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .glut, .taste, .reiter a { transition: background-color .15s ease, border-color .15s ease; }
}