/* FIX 2026-09-30 16:36 HanwareWebSeite (Neuaufbau): Hanware-Designsystem der neuen Website.
   Eigenes, schlankes CSS (kein Bootstrap, kein Fremd-Theme). Zuerst fuers Smartphone entworfen,
   heller und dunkler Modus ueber Variablen. Bausteine und Beispiele: doks\Designsystem.md */

/* ------------------------------------------------------------------ Variablen */
:root {
  --hw-navy: #14296b;
  --hw-navy-2: #1e3a8a;
  --hw-navy-tief: #0b1a45;
  --hw-blau: #2563eb;
  --hw-blau-hell: #3b82f6;
  --hw-akzent: #f59e0b;
  --hw-gruen: #16a34a;
  --hw-rot: #dc2626;

  --hw-bg: #ffffff;
  --hw-bg-2: #f4f7fb;
  --hw-bg-3: #e9eff8;
  --hw-flaeche: #ffffff;
  --hw-text: #1b2333;
  --hw-text-2: #475569;
  --hw-text-3: #56657a; /* FIX 2026-10-07 11:45 HanwareWebSeite (Plan Punkt 7, Barrierefreiheit): Kontrast mindestens 4,5:1 */
  --hw-linie: #d9e1ec;
  --hw-linie-2: #e8edf5;
  --hw-link: #1d4ed8;
  --hw-fokus: #2563eb;

  --hw-schatten-1: 0 1px 2px rgba(15, 30, 61, .06), 0 1px 3px rgba(15, 30, 61, .08);
  --hw-schatten-2: 0 6px 18px rgba(15, 30, 61, .09), 0 2px 6px rgba(15, 30, 61, .06);
  --hw-schatten-3: 0 22px 50px rgba(11, 26, 69, .18);

  --hw-radius: 12px;
  --hw-radius-klein: 8px;
  --hw-breite: 1200px;
  --hw-kopf: 68px;
  --hw-schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

[data-thema="dunkel"] {
  --hw-bg: #0b1222;
  --hw-bg-2: #101a30;
  --hw-bg-3: #16223d;
  --hw-flaeche: #131e37;
  --hw-text: #e6ecf7;
  --hw-text-2: #b3c0d6;
  --hw-text-3: #8d9bb3;
  --hw-linie: #26355a;
  --hw-linie-2: #1d2a49;
  --hw-link: #8ab4ff;
  --hw-fokus: #8ab4ff;
  --hw-schatten-1: 0 1px 2px rgba(0, 0, 0, .4);
  --hw-schatten-2: 0 6px 18px rgba(0, 0, 0, .45);
  --hw-schatten-3: 0 22px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hw-kopf) + 16px); }
body {
  margin: 0; font-family: var(--hw-schrift); font-size: 1rem; line-height: 1.65;
  color: var(--hw-text); background: var(--hw-bg); -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--hw-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; color: var(--hw-text); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
hr { border: 0; border-top: 1px solid var(--hw-linie); margin: 2rem 0; }
:focus-visible { outline: 3px solid var(--hw-fokus); outline-offset: 2px; border-radius: 4px; }
/* FIX 2026-10-07 13:02 HanwareWebSeite (Barrierefreiheit, Fokus): Videos mit Bedienelementen zeigen den Tastaturfokus sonst nicht (Edge) */
video[controls]:focus, video[controls]:focus-within { outline: 3px solid var(--hw-fokus); outline-offset: 2px; }
::selection { background: rgba(37, 99, 235, .25); }
.hw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hw-sprung { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--hw-blau); color: #fff; padding: 10px 16px; border-radius: 8px; }
.hw-sprung:focus { left: 8px; }

/* ------------------------------------------------------------------ Raster */
.hw-container { width: 100%; max-width: var(--hw-breite); margin: 0 auto; padding: 0 20px; }
.hw-container--schmal { max-width: 860px; }
.hw-section { padding: clamp(48px, 7vw, 96px) 0; }
.hw-section--eng { padding: clamp(32px, 4vw, 56px) 0; }
.hw-section--grau { background: var(--hw-bg-2); }
.hw-section--navy { background: linear-gradient(135deg, var(--hw-navy-tief), var(--hw-navy) 55%, var(--hw-navy-2)); color: #e6ecfa; }
.hw-section--navy h2, .hw-section--navy h3, .hw-section--navy h4 { color: #fff; }
.hw-section--navy a:not(.hw-btn) { color: #bcd2ff; }
.hw-kopfzeile { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.hw-kopfzeile--links { margin-left: 0; text-align: left; }
.hw-kopfzeile p { color: var(--hw-text-2); font-size: 1.1rem; margin: 0; }
.hw-section--navy .hw-kopfzeile p { color: #c7d4f0; }
.hw-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--hw-blau); margin-bottom: .7rem; }
.hw-section--navy .hw-eyebrow, .hw-hero .hw-eyebrow { color: #93b4ff; }
[data-thema="dunkel"] .hw-eyebrow { color: #93b4ff; } /* FIX 2026-10-07 11:45 HanwareWebSeite (Plan Punkt 7, Barrierefreiheit): Kontrast mindestens 4,5:1 */

.hw-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hw-grid--2, .hw-grid--3, .hw-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .hw-grid--3 { grid-template-columns: repeat(3, 1fr); } .hw-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.hw-split { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .hw-split { grid-template-columns: 1fr 1fr; }
  .hw-split--breit-links { grid-template-columns: 1.25fr 1fr; }
  .hw-split--umgekehrt > :first-child { order: 2; }
}
.hw-split + .hw-split { margin-top: clamp(40px, 6vw, 80px); }

/* ------------------------------------------------------------------ Knoepfe */
.hw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .72em 1.35em; border-radius: 10px; border: 2px solid transparent;
  font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none !important;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.hw-btn:hover { transform: translateY(-1px); }
.hw-btn:active { transform: translateY(0); }
.hw-btn--primaer { background: var(--hw-blau); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.hw-btn--primaer:hover { background: #1d4fd0; }
.hw-btn--akzent { background: var(--hw-akzent); color: #1f1300; box-shadow: 0 6px 16px rgba(245, 158, 11, .3); }
.hw-btn--akzent:hover { background: #e08e06; }
.hw-btn--navy { background: var(--hw-navy); color: #fff; }
.hw-btn--navy:hover { background: var(--hw-navy-2); }
.hw-btn--sekundaer { background: transparent; color: var(--hw-link); border-color: var(--hw-linie); }
.hw-btn--sekundaer:hover { border-color: var(--hw-blau); background: var(--hw-bg-2); }
.hw-btn--hell { background: #fff; color: var(--hw-navy); }
.hw-btn--hell:hover { background: #eef3ff; }
.hw-btn--geist { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .45); }
.hw-btn--geist:hover { background: rgba(255, 255, 255, .18); }
.hw-btn--gross { padding: .9em 1.7em; font-size: 1.06rem; }
.hw-btn--klein { padding: .45em .9em; font-size: .9rem; border-radius: 8px; }
.hw-btn--block { width: 100%; }
.hw-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.hw-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; }
.hw-aktionen--mitte { justify-content: center; }

/* ------------------------------------------------------------------ Kopf und Navigation */
.hw-kopf {
  position: sticky; top: 0; z-index: 100; height: var(--hw-kopf);
  background: color-mix(in srgb, var(--hw-bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hw-linie-2);
}
.hw-kopf__innen { display: flex; align-items: center; gap: 18px; height: 100%; }
.hw-marke { display: flex; align-items: center; flex: none; }
.hw-marke img { height: 38px; width: auto; }
.hw-marke .hw-logo-dunkel { display: none; }
[data-thema="dunkel"] .hw-marke .hw-logo-hell { display: none; }
[data-thema="dunkel"] .hw-marke .hw-logo-dunkel { display: block; }

.hw-nav { display: none; flex: 1; }
.hw-nav__liste { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.hw-nav__punkt { position: static; }
.hw-nav__link {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 8px; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--hw-text); cursor: pointer; text-decoration: none !important;
}
.hw-nav__link:hover, .hw-nav__punkt.ist-offen > .hw-nav__link { background: var(--hw-bg-3); color: var(--hw-link); }
.hw-nav__link .bi-chevron-down { font-size: .7em; transition: transform .15s; }
.hw-nav__punkt.ist-offen .bi-chevron-down { transform: rotate(180deg); }

.hw-mega {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--hw-flaeche); border-bottom: 1px solid var(--hw-linie); box-shadow: var(--hw-schatten-3);
  max-height: calc(100vh - var(--hw-kopf)); overflow-y: auto;
}
.hw-nav__punkt.ist-offen > .hw-mega { display: block; }
.hw-mega__innen { display: grid; gap: 28px; padding: 28px 20px 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hw-mega__titel { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-text-3); margin: 0 0 10px; }
.hw-mega__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hw-mega__link { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; color: var(--hw-text); text-decoration: none !important; }
.hw-mega__link:hover { background: var(--hw-bg-2); }
.hw-mega__link i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--hw-bg-3); color: var(--hw-blau); font-size: 1.05rem; }
.hw-mega__link strong { display: block; font-weight: 650; line-height: 1.3; }
.hw-mega__link small { display: block; color: var(--hw-text-3); font-size: .84rem; line-height: 1.35; margin-top: 2px; }
.hw-mega__link--schlicht { padding: 6px 10px; }
.hw-mega__mehr { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding-left: 10px; font-weight: 650; }

.hw-kopf__rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hw-icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--hw-text-2); font-size: 1.15rem; cursor: pointer; text-decoration: none !important;
}
.hw-icon-btn:hover { background: var(--hw-bg-3); color: var(--hw-link); }
.hw-kopf .hw-btn { padding: .55em 1em; font-size: .93rem; }
.hw-nur-breit { display: none; }
.hw-burger { display: grid; }
@media (min-width: 1080px) {
  .hw-nav { display: block; }
  .hw-nur-breit { display: inline-flex; }
  .hw-burger { display: none; }
}

/* Mobile Navigation */
.hw-mobil { display: none; position: fixed; inset: var(--hw-kopf) 0 0 0; z-index: 99; background: var(--hw-bg); overflow-y: auto; padding: 12px 20px 40px; }
.hw-mobil.ist-offen { display: block; }
.hw-mobil details { border-bottom: 1px solid var(--hw-linie-2); }
.hw-mobil summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 15px 2px; font-weight: 700; font-size: 1.08rem; cursor: pointer; }
.hw-mobil summary::-webkit-details-marker { display: none; }
.hw-mobil details[open] summary .bi { transform: rotate(180deg); }
.hw-mobil ul { list-style: none; margin: 0 0 14px; padding: 0; }
.hw-mobil li a { display: block; padding: 9px 10px; border-radius: 8px; color: var(--hw-text); }
.hw-mobil__titel { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-text-3); padding: 8px 10px 2px; }
.hw-mobil__direkt { display: block; padding: 15px 2px; font-weight: 700; font-size: 1.08rem; color: var(--hw-text); border-bottom: 1px solid var(--hw-linie-2); }
.hw-mobil .hw-aktionen { flex-direction: column; }
.hw-mobil .hw-aktionen .hw-btn { width: 100%; }
body.hw-gesperrt { overflow: hidden; }

/* ------------------------------------------------------------------ Hero */
.hw-hero {
  position: relative; overflow: hidden; color: #e6ecfa;
  background: radial-gradient(1100px 520px at 85% -10%, rgba(59, 130, 246, .38), transparent 60%),
              linear-gradient(135deg, var(--hw-navy-tief) 0%, var(--hw-navy) 55%, var(--hw-navy-2) 100%);
  padding: clamp(44px, 7vw, 92px) 0 clamp(48px, 7vw, 96px);
}
.hw-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.hw-hero > .hw-container { position: relative; z-index: 1; }
.hw-hero h1 { color: #fff; margin-bottom: .45em; }
.hw-hero h1 em { font-style: normal; color: #8fb4ff; }
.hw-hero__text { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: #cfdcf7; max-width: 46ch; margin-bottom: 0; }
.hw-hero__bild { width: 100%; border-radius: 14px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .16); background: #0d1b3f; }
.hw-hero__punkte { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 1.6rem 0 0; font-size: .95rem; color: #cfdcf7; }
.hw-hero__punkte li::before { content: "\F633"; font-family: bootstrap-icons; color: #6ee7a8; margin-right: 7px; vertical-align: -1px; }
.hw-hero--kompakt { padding: clamp(36px, 5vw, 64px) 0; }
.hw-hero--kompakt .hw-hero__text { max-width: 70ch; }
.hw-hero--mitte { text-align: center; }
.hw-hero--mitte .hw-hero__text { margin-left: auto; margin-right: auto; max-width: 62ch; }
.hw-hero--mitte .hw-aktionen, .hw-hero--mitte .hw-hero__punkte { justify-content: center; }

/* Brotkrumen */
.hw-krumen { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: .88rem; color: #a9bde6; }
.hw-krumen li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.hw-krumen a { color: #cfdcf7; }
.hw-krumen--hell { color: var(--hw-text-3); }
.hw-krumen--hell a { color: var(--hw-text-2); }

/* ------------------------------------------------------------------ Karten */
.hw-karte {
  display: flex; flex-direction: column; background: var(--hw-flaeche); border: 1px solid var(--hw-linie);
  border-radius: var(--hw-radius); padding: 24px; box-shadow: var(--hw-schatten-1); color: var(--hw-text);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
a.hw-karte { text-decoration: none !important; }
a.hw-karte:hover { transform: translateY(-3px); box-shadow: var(--hw-schatten-2); border-color: var(--hw-blau-hell); }
.hw-karte h3 { font-size: 1.15rem; margin-bottom: .4em; }
.hw-karte p { color: var(--hw-text-2); margin-bottom: .8em; font-size: .97rem; }
.hw-karte > :last-child { margin-bottom: 0; }
.hw-karte__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--hw-bg-3); color: var(--hw-blau); font-size: 1.35rem; margin-bottom: 16px; }
.hw-karte__mehr { margin-top: auto; padding-top: .4em; font-weight: 650; color: var(--hw-link); display: inline-flex; align-items: center; gap: 6px; }
a.hw-karte:hover .hw-karte__mehr .bi { transform: translateX(3px); }
.hw-karte__mehr .bi { transition: transform .15s; }
.hw-karte__bild { margin: -24px -24px 18px; border-radius: var(--hw-radius) var(--hw-radius) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--hw-bg-3); }
.hw-karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.hw-karte--navy { background: linear-gradient(140deg, var(--hw-navy), var(--hw-navy-2)); border-color: transparent; color: #dbe5fb; }
.hw-karte--navy h3 { color: #fff; }
.hw-karte--navy p { color: #c7d4f0; }
.hw-karte--navy .hw-karte__icon { background: rgba(255, 255, 255, .12); color: #fff; }
.hw-karte--navy .hw-karte__mehr { color: #bcd2ff; }
.hw-karte--flach { box-shadow: none; background: var(--hw-bg-2); border-color: transparent; }

.hw-kachel { display: flex; gap: 14px; align-items: flex-start; }
.hw-kachel > i { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--hw-bg-3); color: var(--hw-blau); font-size: 1.2rem; }
.hw-kachel h3, .hw-kachel h4 { font-size: 1.05rem; margin: 2px 0 4px; }
.hw-kachel p { margin: 0; color: var(--hw-text-2); font-size: .96rem; }
.hw-section--navy .hw-kachel > i { background: rgba(255, 255, 255, .12); color: #fff; }
.hw-section--navy .hw-kachel p { color: #c7d4f0; }

.hw-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--hw-bg-3); color: var(--hw-navy-2); }
[data-thema="dunkel"] .hw-badge { color: #bcd2ff; }
.hw-badge--gruen { background: rgba(22, 163, 74, .14); color: #166534; } /* FIX 2026-10-07 11:45 HanwareWebSeite (Plan Punkt 7, Barrierefreiheit): Kontrast mindestens 4,5:1 */
[data-thema="dunkel"] .hw-badge--gruen { color: #86efac; }
.hw-badge--akzent { background: rgba(245, 158, 11, .18); color: #92580a; }
.hw-badge--hell { background: rgba(255, 255, 255, .14); color: #fff; }
.hw-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1rem; padding: 0; list-style: none; }

/* ------------------------------------------------------------------ Listen, Zahlen, Schritte */
.hw-haken { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 9px; }
.hw-haken li { position: relative; padding-left: 30px; }
.hw-haken li::before { content: "\F26A"; font-family: bootstrap-icons; position: absolute; left: 0; top: 0; color: var(--hw-gruen); font-size: 1.1rem; line-height: 1.5; }
.hw-haken--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .hw-haken--2 { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.hw-section--navy .hw-haken li::before { color: #6ee7a8; }

.hw-zahlen { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 800px) { .hw-zahlen { grid-template-columns: repeat(4, 1fr); } }
.hw-zahl strong { display: block; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.05; color: var(--hw-blau); letter-spacing: -.02em; }
.hw-zahl span { color: var(--hw-text-2); font-size: .97rem; }
.hw-section--navy .hw-zahl strong { color: #fff; }
.hw-section--navy .hw-zahl span { color: #c7d4f0; }

.hw-schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0; display: grid; gap: 22px; }
@media (min-width: 800px) { .hw-schritte { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.hw-schritte > li { counter-increment: schritt; position: relative; padding: 24px; background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); }
.hw-schritte > li::before { content: counter(schritt); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hw-blau); color: #fff; font-weight: 800; margin-bottom: 14px; }
.hw-schritte h3 { font-size: 1.08rem; margin-bottom: .35em; }
.hw-schritte p { margin: 0; color: var(--hw-text-2); font-size: .96rem; }

/* ------------------------------------------------------------------ Fliesstext (Artikel, Rechtstexte) */
.hw-text { max-width: 760px; font-size: 1.05rem; }
.hw-text h2 { margin-top: 2em; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); }
.hw-text h3 { margin-top: 1.6em; }
.hw-text > :first-child { margin-top: 0; }
.hw-text li { margin-bottom: .35em; }
.hw-text blockquote { margin: 1.5em 0; padding: 14px 20px; border-left: 4px solid var(--hw-blau); background: var(--hw-bg-2); border-radius: 0 10px 10px 0; color: var(--hw-text-2); }
.hw-definition { font-size: 1.18rem; line-height: 1.6; padding: 22px 24px; border-radius: var(--hw-radius); background: var(--hw-bg-2); border-left: 5px solid var(--hw-blau); margin-bottom: 2rem; }
.hw-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--hw-text-3); font-size: .92rem; margin-bottom: 1.4rem; }
.hw-hero .hw-meta { color: #a9bde6; margin: 1rem 0 0; }

.hw-hinweis { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--hw-radius); background: rgba(37, 99, 235, .08); border: 1px solid rgba(37, 99, 235, .25); margin: 0 0 1.2em; }
.hw-hinweis > i { flex: none; font-size: 1.3rem; color: var(--hw-blau); line-height: 1.3; }
.hw-hinweis p:last-child { margin: 0; }
.hw-hinweis--erfolg { background: rgba(22, 163, 74, .09); border-color: rgba(22, 163, 74, .3); }
.hw-hinweis--erfolg > i { color: var(--hw-gruen); }
.hw-hinweis--warnung { background: rgba(245, 158, 11, .11); border-color: rgba(245, 158, 11, .4); }
.hw-hinweis--warnung > i { color: #b45309; }
.hw-hinweis--fehler { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .35); }
.hw-hinweis--fehler > i { color: var(--hw-rot); }

/* ------------------------------------------------------------------ Bilder, Galerie, Video */
.hw-bild { margin: 0; }
.hw-bild img { width: 100%; border-radius: var(--hw-radius); border: 1px solid var(--hw-linie); box-shadow: var(--hw-schatten-2); background: var(--hw-bg-2); }
.hw-bild--frei img { border: 0; box-shadow: none; background: none; }
.hw-bild figcaption { margin-top: 10px; font-size: .88rem; color: var(--hw-text-3); text-align: center; }
.hw-galerie { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .hw-galerie { grid-template-columns: repeat(3, 1fr); } }
.hw-galerie a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--hw-linie); aspect-ratio: 16 / 10; background: var(--hw-bg-3); cursor: zoom-in; }
.hw-galerie img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .25s; }
.hw-galerie a:hover img { transform: scale(1.04); }
.hw-video { position: relative; border-radius: var(--hw-radius); overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: var(--hw-schatten-2); }
.hw-video video, .hw-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.hw-lichtkasten { position: fixed; inset: 0; z-index: 250; display: none; place-items: center; background: rgba(5, 10, 25, .92); padding: 20px; }
.hw-lichtkasten.ist-offen { display: grid; }
.hw-lichtkasten img { max-width: min(1400px, 96vw); max-height: 84vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.hw-lichtkasten__text { color: #dbe5fb; text-align: center; margin-top: 12px; font-size: .95rem; }
.hw-lichtkasten button { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; }
.hw-lichtkasten button:hover { background: rgba(255, 255, 255, .28); }
.hw-lichtkasten__zu { top: 18px; right: 18px; }
.hw-lichtkasten__vor { right: 18px; top: 50%; transform: translateY(-50%); }
.hw-lichtkasten__zurueck { left: 18px; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------------ Tabellen (mit Scroll-Knoepfen) */
.hw-tabelle-wrap { position: relative; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); }
.hw-tabelle-scroll { overflow-x: auto; border-radius: var(--hw-radius); scrollbar-width: thin; }
.hw-tabelle { width: 100%; border-collapse: collapse; font-size: .96rem; }
.hw-tabelle th, .hw-tabelle td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hw-linie-2); }
.hw-tabelle thead th { background: var(--hw-bg-2); font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
.hw-tabelle tbody tr:last-child td { border-bottom: 0; }
.hw-tabelle tbody tr:hover td { background: var(--hw-bg-2); }
.hw-tabelle .hw-zahlspalte { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hw-tabelle .bi-check-circle-fill { color: var(--hw-gruen); }
.hw-tabelle .bi-x-circle { color: var(--hw-text-3); }
/* Leiste ohne eigene Hoehe, die beim Blaettern mitlaeuft; darin links und rechts je ein runder Knopf */
.hw-scrollleiste { position: sticky; top: 45vh; height: 0; z-index: 5; display: flex; justify-content: space-between; pointer-events: none; }
.hw-scrollknopf {
  pointer-events: auto; width: 40px; height: 40px; margin: 22px -14px 0; border-radius: 50%; border: 1px solid var(--hw-linie);
  background: var(--hw-flaeche); color: var(--hw-link); box-shadow: var(--hw-schatten-2); cursor: pointer; display: grid; place-items: center; font-size: 1rem;
  visibility: hidden;
}
.hw-scrollknopf.ist-sichtbar { visibility: visible; }
.hw-scrollknopf:hover { background: var(--hw-blau); color: #fff; border-color: var(--hw-blau); }

/* ------------------------------------------------------------------ FAQ */
.hw-faq { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.hw-faq details { border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); }
.hw-faq summary { list-style: none; cursor: pointer; padding: 17px 52px 17px 20px; font-weight: 650; position: relative; }
.hw-faq summary::-webkit-details-marker { display: none; }
.hw-faq summary::after { content: "\F4FE"; font-family: bootstrap-icons; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--hw-blau); font-size: 1.2rem; transition: transform .2s; }
.hw-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.hw-faq details > div { padding: 0 20px 18px; color: var(--hw-text-2); }
.hw-faq details > div > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Handlungsaufforderung */
.hw-cta {
  border-radius: clamp(14px, 2vw, 22px); padding: clamp(28px, 5vw, 56px); color: #e6ecfa; text-align: center;
  background: radial-gradient(700px 300px at 90% 0%, rgba(59, 130, 246, .45), transparent 65%), linear-gradient(135deg, var(--hw-navy-tief), var(--hw-navy) 60%, var(--hw-navy-2));
  box-shadow: var(--hw-schatten-3);
}
.hw-cta h2 { color: #fff; margin-bottom: .4em; }
.hw-cta p { color: #cfdcf7; max-width: 60ch; margin: 0 auto; font-size: 1.08rem; }
.hw-cta .hw-aktionen { justify-content: center; }
.hw-cta__klein { font-size: .9rem !important; margin-top: 1.1rem !important; color: #a9bde6 !important; }

/* ------------------------------------------------------------------ Preise */
.hw-preis { display: flex; flex-direction: column; background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: 16px; padding: 28px 24px; box-shadow: var(--hw-schatten-1); position: relative; }
.hw-preis--empfohlen { border: 2px solid var(--hw-blau); box-shadow: var(--hw-schatten-2); }
.hw-preis__marke { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--hw-blau); color: #fff; font-size: .78rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.hw-preis h3 { font-size: 1.25rem; margin-bottom: .2em; }
.hw-preis__fuer { color: var(--hw-text-3); font-size: .93rem; min-height: 2.8em; }
.hw-preis__betrag { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: .5rem 0 .1rem; }
.hw-preis__betrag small { font-size: .95rem; font-weight: 600; color: var(--hw-text-3); letter-spacing: 0; }
.hw-preis__zusatz { color: var(--hw-text-3); font-size: .88rem; margin-bottom: 1.1rem; }
.hw-preis .hw-haken { font-size: .95rem; margin-bottom: 1.4rem; }
.hw-preis .hw-btn { margin-top: auto; }

/* ------------------------------------------------------------------ Reiter */
.hw-reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; padding: 5px; background: var(--hw-bg-3); border-radius: 12px; width: fit-content; max-width: 100%; }
.hw-reiter button { border: 0; background: none; font: inherit; font-weight: 650; color: var(--hw-text-2); padding: 9px 16px; border-radius: 9px; cursor: pointer; }
.hw-reiter button[aria-selected="true"] { background: var(--hw-flaeche); color: var(--hw-link); box-shadow: var(--hw-schatten-1); }
.hw-reiter--mitte { margin-left: auto; margin-right: auto; }
[data-reiter-inhalt][hidden] { display: none; }

/* ------------------------------------------------------------------ Formulare */
.hw-form { display: grid; gap: 16px; }
.hw-form__reihe { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hw-form__reihe { grid-template-columns: 1fr 1fr; } .hw-form__reihe--3 { grid-template-columns: 1fr 2fr; } }
.hw-feld { display: grid; gap: 6px; }
.hw-feld label, .hw-label { font-weight: 650; font-size: .93rem; color: var(--hw-text); }
.hw-feld small { color: var(--hw-text-3); font-size: .85rem; }
.hw-pflicht::after { content: " *"; color: var(--hw-rot); }
.hw-eingabe, .hw-feld input[type=text], .hw-feld input[type=email], .hw-feld input[type=tel], .hw-feld input[type=password], .hw-feld input[type=number], .hw-feld input[type=search], .hw-feld input[type=date], .hw-feld select, .hw-feld textarea {
  width: 100%; font: inherit; color: var(--hw-text); background: var(--hw-flaeche); border: 1.5px solid var(--hw-linie);
  border-radius: 10px; padding: 11px 13px; transition: border-color .15s, box-shadow .15s;
}
.hw-feld textarea { min-height: 140px; resize: vertical; }
.hw-eingabe:focus, .hw-feld input:focus, .hw-feld select:focus, .hw-feld textarea:focus { outline: 0; border-color: var(--hw-blau); box-shadow: 0 0 0 4px rgba(37, 99, 235, .16); }
.hw-feld.hat-fehler input, .hw-feld.hat-fehler select, .hw-feld.hat-fehler textarea { border-color: var(--hw-rot); }
.hw-fehlertext { color: var(--hw-rot); font-size: .86rem; font-weight: 600; }
.hw-wahl { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.hw-wahl input { width: 19px; height: 19px; margin-top: 3px; flex: none; accent-color: var(--hw-blau); }
.hw-koeder { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* FIX 2026-10-01 08:01 HanwareWebSeite (Spamschutz): dezenter Hinweis der Rechenpruefung ueber dem Absende-Knopf */
.hw-rechen-status { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 8px; font-size: .78rem; color: var(--hw-text-3); }
.hw-rechen-status.ist-fertig { color: #15803d; }
/* FIX 2026-10-01 08:47 HanwareWebSeite (Spamschutz): Platz fuer das Cloudflare-Turnstile-Haekchen (nur bei Verdacht sichtbar) */
.hw-turnstile { width: 100%; }
.hw-turnstile:not(:empty) { margin: 0 0 8px; }
.hw-rechen-status.ist-fehler, .hw-rechen-status--fehler { color: #b91c1c; }
.hw-formkarte { background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: 16px; padding: clamp(20px, 3vw, 34px); box-shadow: var(--hw-schatten-2); }
.hw-formkarte--schmal { max-width: 480px; margin: 0 auto; }
.hw-form__hinweis { font-size: .86rem; color: var(--hw-text-3); margin: 0; }

/* ------------------------------------------------------------------ Modales Fenster (ersetzt alert/confirm/prompt) */
.hw-modal { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 18px; background: rgba(7, 14, 34, .62); backdrop-filter: blur(3px); }
.hw-modal.ist-offen { display: grid; }
.hw-modal__fenster { width: min(520px, 100%); max-height: 90vh; overflow-y: auto; background: var(--hw-flaeche); color: var(--hw-text); border-radius: 16px; box-shadow: var(--hw-schatten-3); border: 1px solid var(--hw-linie); }
.hw-modal__fenster--breit { width: min(820px, 100%); }
.hw-modal__kopf { display: flex; align-items: center; gap: 12px; padding: 18px 22px 0; }
.hw-modal__kopf h2 { font-size: 1.2rem; margin: 0; flex: 1; }
.hw-modal__kopf > i { font-size: 1.5rem; color: var(--hw-blau); }
.hw-modal__inhalt { padding: 14px 22px 6px; color: var(--hw-text-2); }
.hw-modal__fuss { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; flex-wrap: wrap; }

.hw-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); z-index: 320; background: #0f1e3d; color: #fff; padding: 12px 20px; border-radius: 12px; box-shadow: var(--hw-schatten-3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 92vw; }
.hw-toast.ist-sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------------------ Suche */
.hw-suche { display: flex; gap: 10px; max-width: 640px; }
.hw-suche input { flex: 1; font: inherit; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--hw-linie); background: var(--hw-flaeche); color: var(--hw-text); }
.hw-treffer { display: grid; gap: 12px; }
.hw-treffer a { display: block; padding: 16px 18px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); color: var(--hw-text); text-decoration: none !important; }
.hw-treffer a:hover { border-color: var(--hw-blau-hell); box-shadow: var(--hw-schatten-1); }
.hw-treffer strong { display: block; color: var(--hw-link); }
.hw-treffer span { color: var(--hw-text-2); font-size: .95rem; }

/* ------------------------------------------------------------------ Fuss */
.hw-fuss { background: #0a142e; color: #aebad3; padding: clamp(40px, 6vw, 72px) 0 0; font-size: .95rem; }
.hw-fuss a { color: #c9d6ee; }
.hw-fuss a:hover { color: #fff; }
.hw-fuss__raster { display: grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hw-fuss__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hw-fuss__raster { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.hw-fuss h2 { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.hw-fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hw-fuss__logo { height: 42px; width: auto; margin-bottom: 16px; }
.hw-fuss__unten { margin-top: 44px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .88rem; }
.hw-fuss__unten ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ------------------------------------------------------------------ Schulungsvideos */
.hw-videos { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .hw-videos { grid-template-columns: 1.6fr 1fr; } }
.hw-videoliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 640px; overflow-y: auto; }
.hw-videoliste button { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--hw-linie); background: var(--hw-flaeche); color: var(--hw-text); font: inherit; cursor: pointer; }
.hw-videoliste button:hover { border-color: var(--hw-blau-hell); }
.hw-videoliste button.ist-aktiv { border-color: var(--hw-blau); background: rgba(37, 99, 235, .07); }
.hw-videoliste i { font-size: 1.3rem; color: var(--hw-blau); line-height: 1.2; }
.hw-videoliste strong { display: block; font-weight: 650; }
.hw-videoliste small { display: block; color: var(--hw-text-3); }
/* FIX 2026-10-26 10:49 HanwareWebSeite (PROMPT-2026-10-26-Website-Schulungsvideos-WebERP-Cash-Business): Programm-Umschalter und Suchfeld der Schulungsvideos */
.hw-video-programme { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hw-video-programme a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hw-linie); background: var(--hw-flaeche); color: var(--hw-text); text-decoration: none; font-weight: 600; }
.hw-video-programme a:hover { border-color: var(--hw-blau-hell); }
.hw-video-programme a.ist-aktiv { border-color: var(--hw-blau); background: var(--hw-blau); color: #fff; }
.hw-video-suche { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.hw-video-suche input { flex: 1 1 260px; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hw-linie); background: var(--hw-flaeche); color: var(--hw-text); font: inherit; }
.hw-video-suche i { color: var(--hw-text-3); }
.hw-videoliste li[hidden] { display: none; }
code { background: var(--hw-bg-3); border-radius: 6px; padding: .1em .4em; font-size: .92em; }
fieldset.hw-rahmen { margin: 0; min-width: 0; }
fieldset.hw-rahmen legend { padding: 0 8px; }

/* ------------------------------------------------------------------ Hilfen */
.hw-mitte { text-align: center; }
.hw-mt-0 { margin-top: 0 !important; } .hw-mt-1 { margin-top: 12px !important; } .hw-mt-2 { margin-top: 24px !important; } .hw-mt-3 { margin-top: 40px !important; }
.hw-mb-0 { margin-bottom: 0 !important; } .hw-mb-2 { margin-bottom: 24px !important; }
.hw-gedaempft { color: var(--hw-text-2); }
.hw-klein { font-size: .9rem; }
.hw-lead { font-size: 1.15rem; color: var(--hw-text-2); }
.hw-rahmen { border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); padding: 22px; background: var(--hw-flaeche); }
.hw-nachoben { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--hw-navy); color: #fff; box-shadow: var(--hw-schatten-2); cursor: pointer; display: none; place-items: center; font-size: 1.1rem; }
.hw-nachoben.ist-sichtbar { display: grid; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

@media print {
  .hw-kopf, .hw-fuss, .hw-cta, .hw-nachoben, .hw-scrollknopf, .hw-mobil, .hw-aktionen { display: none !important; }
  .hw-hero { background: none; color: #000; padding: 0 0 12px; }
  .hw-hero h1 { color: #000; }
  .hw-section { padding: 14px 0; }
}

/* ------------------------------------------------------------------ Buehne der Startseite (Bildwechsler)
   FIX 2026-09-30 18:35 HanwareWebSeite (Startseite): zwei grosse Bilder der bisherigen Startseite im Wechsel. */
.hw-buehne { position: relative; overflow: hidden; color: #e6ecfa; background: var(--hw-navy-tief); min-height: clamp(520px, 72vh, 760px); display: flex; align-items: center; padding: clamp(56px, 8vw, 96px) 0 clamp(84px, 9vw, 112px); }
.hw-buehne__bild { position: absolute; inset: 0; background-size: cover; background-position: center right; opacity: 0; transform: scale(1.04); transition: opacity 1.1s ease, transform 7s ease-out; }
.hw-buehne__bild.ist-aktiv { opacity: 1; transform: scale(1); }
.hw-buehne::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: background-color .8s;
  background: linear-gradient(95deg, rgba(8, 17, 45, .90) 0%, rgba(8, 17, 45, .72) 36%, rgba(8, 17, 45, .18) 66%, rgba(8, 17, 45, 0) 100%); }
.hw-buehne--hell::before { background: linear-gradient(95deg, rgba(10, 22, 62, .94) 0%, rgba(10, 22, 62, .84) 40%, rgba(10, 22, 62, .38) 70%, rgba(10, 22, 62, .08) 100%); }
.hw-buehne__inhalt { position: relative; z-index: 2; display: grid; }
.hw-buehne__text { grid-area: 1 / 1; max-width: 640px; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.hw-buehne__text.ist-aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease .25s, transform .7s ease .25s, visibility 0s; }
.hw-buehne .hw-eyebrow { color: #93b4ff; }
.hw-buehne h1, .hw-buehne__titel { color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.85rem); margin: 0 0 .45em; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.hw-buehne h1 em, .hw-buehne__titel em { font-style: normal; color: #8fb4ff; }
.hw-buehne .hw-hero__text { text-shadow: 0 1px 10px rgba(0, 0, 0, .5); color: #dbe6fb; }
.hw-buehne .hw-hero__punkte { grid-area: 2 / 1; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
/* FIX 2026-09-30 23:22 HanwareWebSeite (Anwender-Vorgabe): KI-Hinweis dezent unten rechts, Text "KI Inhalte". */
.hw-buehne__ki { position: absolute; bottom: 12px; right: 14px; z-index: 3; padding: 2px 7px; border-radius: 4px; font-size: .66rem; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .82); background: rgba(15, 23, 42, .38); pointer-events: none; }
.hw-buehne__steuerung { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 10px; }
.hw-buehne__punkt { width: 34px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .38); cursor: pointer; transition: background-color .2s, width .2s; }
.hw-buehne__punkt.ist-aktiv { background: #fff; width: 52px; }
.hw-buehne__pfeil { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(8, 17, 45, .45); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 1rem; backdrop-filter: blur(4px); transition: background-color .2s; }
.hw-buehne__pfeil:hover { background: rgba(37, 99, 235, .85); }
.hw-buehne__punkt:focus-visible, .hw-buehne__pfeil:focus-visible { outline: 3px solid #93b4ff; outline-offset: 3px; }
@media (max-width: 760px) {
  .hw-buehne { min-height: 0; }
  .hw-buehne__bild { background-position: 68% center; }
  .hw-buehne::before, .hw-buehne--hell::before { background: linear-gradient(180deg, rgba(8, 17, 45, .90) 0%, rgba(8, 17, 45, .80) 60%, rgba(8, 17, 45, .66) 100%); }
  .hw-buehne__ki { bottom: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-buehne__bild, .hw-buehne__text, .hw-buehne__text.ist-aktiv { transition: none; transform: none; }
}
@media print { .hw-buehne { min-height: 0; background: none; color: #000; padding: 0 0 12px; } .hw-buehne__bild, .hw-buehne::before, .hw-buehne__ki, .hw-buehne__steuerung, .hw-buehne__text:not(.ist-aktiv) { display: none; } .hw-buehne h1 { color: #000; text-shadow: none; } }

/* ------------------------------------------------------------------ Kopfbereich und Abschnitt mit Hintergrundbild
   FIX 2026-09-30 18:40 HanwareWebSeite (KI-Bilder): Die KI-erzeugten Fotos der bisherigen Website als Hintergrund.
   Das Bild kommt ueber die Eigenschaft --hw-bild (style="--hw-bild:url('...')"); links liegt ein dunkelblauer Verlauf,
   damit der Text lesbar bleibt. Jedes dieser Bilder traegt den Hinweis .hw-ki („KI-generiert“). */
.hw-hero--bild { background: var(--hw-navy-tief); min-height: clamp(420px, 56vh, 600px); display: flex; align-items: center; }
.hw-hero--bild.hw-hero--kompakt { min-height: clamp(340px, 44vh, 470px); }
.hw-hero--bild > .hw-container { width: 100%; }
.hw-hero--bild::before { content: ""; position: absolute; inset: 0; background: var(--hw-bild) var(--hw-bild-lage, center right) / cover no-repeat; }
.hw-hero--bild::after { opacity: 1; mask-image: none; background-size: auto;
  background-image: linear-gradient(95deg, rgba(8, 17, 45, .95) 0%, rgba(8, 17, 45, .86) 38%, rgba(8, 17, 45, .42) 68%, rgba(8, 17, 45, .10) 100%); }
.hw-hero--bild h1, .hw-hero--bild .hw-hero__text, .hw-hero--bild .hw-hero__punkte { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.hw-hero--bild .hw-hero__text { color: #dbe6fb; }
.hw-hero__spalte { max-width: 660px; }
/* FIX 2026-09-30 23:22 HanwareWebSeite (Anwender-Vorgabe): KI-Hinweis dezent unten rechts im Bild, Text "KI Inhalte". */
.hw-ki { position: absolute; bottom: 10px; right: 12px; z-index: 3; padding: 2px 7px; border-radius: 4px; font-size: .66rem; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .82); background: rgba(15, 23, 42, .38); pointer-events: none; }
.hw-ki-rahmen { position: relative; }
.hw-section--bild { position: relative; overflow: hidden; }
.hw-section--bild::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 22, 62, .86), rgba(10, 22, 62, .90)), var(--hw-bild) center / cover no-repeat; }
.hw-section--bild > .hw-container { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .hw-hero--bild, .hw-hero--bild.hw-hero--kompakt { min-height: 0; }
  .hw-hero--bild::after { background-image: linear-gradient(180deg, rgba(8, 17, 45, .92) 0%, rgba(8, 17, 45, .84) 100%); }
  .hw-ki { bottom: 6px; right: 8px; }
}
@media print { .hw-hero--bild::before, .hw-section--bild::before, .hw-ki { display: none; } }

/* ------------------------------------------------------------------ Startseite: Schwerpunkt „Web ERP kostenlos testen“
   FIX 2026-09-30 18:45 HanwareWebSeite (Startseite) */
.hw-webtest { background: linear-gradient(180deg, var(--hw-bg) 0%, var(--hw-bg-2) 100%); }
/* FIX 2026-10-07 17:26 HanwareWebSeite (Anwender-Vorgabe 07.10.2026, Dunkelmodus): Texte und Verweise in der Verweisfarbe --hw-link statt der Markenfarbe --hw-blau - im Dunkelmodus helles Blau mit ausreichendem Kontrast */
.hw-webtest h2 em { font-style: normal; color: var(--hw-link); }
.hw-webtest__schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 1.4rem 0 1.6rem; display: grid; gap: 12px; }
.hw-webtest__schritte li { counter-increment: schritt; position: relative; padding-left: 52px; min-height: 38px; }
.hw-webtest__schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--hw-blau); }
.hw-webtest__schritte strong { display: block; }
.hw-webtest__schritte span { color: var(--hw-text-2, inherit); opacity: .85; font-size: .95rem; }
.hw-webtest__haken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin-top: 1.4rem; font-size: .95rem; }
.hw-webtest__bild { position: relative; margin: 0; justify-self: center; max-width: 440px; }
.hw-webtest__bild img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 70px rgba(15, 30, 61, .28); }
@media (max-width: 760px) { .hw-webtest__haken { grid-template-columns: 1fr; } .hw-webtest__bild { max-width: 320px; } }

/* ------------------------------------------------------------------ Hanware Cloud ERP: Preise und Bestellung
   FIX 2026-10-02 14:00 HanwareWebSeite (Anwender-Vorgabe Cloud-ERP-Mietpreise): Steuerung (Zahlweise, Benutzer), Paketkarten,
   Vergleich, Zusatzmodule, Bestellformular mit mitlaufender Zusammenfassung. */
.hw-cloud-steuerung { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin: 0 auto 34px; }
.hw-cloud-steuerung .hw-reiter { margin: 0; }
.hw-cloud-steuerung .hw-badge { margin-left: 6px; font-size: .72rem; padding: 2px 8px; }
.hw-cloud-benutzer { display: flex; align-items: center; gap: 12px; font-weight: 650; }
.hw-zaehler { display: inline-flex; align-items: stretch; border: 1px solid var(--hw-linie); border-radius: 10px; overflow: hidden; background: var(--hw-flaeche); }
.hw-zaehler button { border: 0; background: var(--hw-bg-3); color: var(--hw-text); width: 40px; cursor: pointer; font-size: 1rem; }
.hw-zaehler button:hover { background: var(--hw-bg-2); }
/* FIX 2026-10-18 21:52 HanwareWebSeite (Paketbestellung): ausgegrauter Zaehler-Knopf am Mindestwert */
.hw-zaehler button:disabled { opacity: .4; cursor: not-allowed; background: var(--hw-bg-3); }
.hw-zaehler input { width: 70px; border: 0; text-align: center; font: inherit; font-weight: 700; background: transparent; color: var(--hw-text); -moz-appearance: textfield; }
.hw-zaehler input::-webkit-outer-spin-button, .hw-zaehler input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hw-cloud-pakete { align-items: stretch; margin-bottom: 26px; }
.hw-cloud-plus { font-size: .88rem; font-weight: 650; color: var(--hw-text-2); margin: 0 0 .4rem; }
.hw-cloud-transparenz { max-width: 980px; margin: 0 auto; }
.hw-cloud-transparenz p { margin-bottom: .5em; }
.hw-cloud-vergleich td:first-child { min-width: 240px; }
.hw-cloud-ja { color: var(--hw-gruen); font-size: 1.15rem; }
.hw-cloud-modul h3 { font-size: 1.08rem; margin-bottom: .3em; }
.hw-cloud-modul p { color: var(--hw-text-2); font-size: .94rem; }
.hw-cloud-modul__preis { margin-top: auto; margin-bottom: .3em; font-size: 1.05rem; }
.hw-cloud-beispiel h3 { margin-top: 0; }
.hw-cloud-beispiel .hw-tabelle td { padding: 8px 4px; }

.hw-cloud-bestellung__raster { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .hw-cloud-bestellung__raster { grid-template-columns: minmax(0, 1fr) 380px; } .hw-cloud-bestellung__rechts { position: sticky; top: 90px; } }
.hw-cloud-bestellung__links { display: grid; gap: 22px; }
.hw-cloud-bestellung fieldset { margin: 0; min-width: 0; display: grid; gap: 14px; }
.hw-cloud-schritt { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 750; padding: 0; margin-bottom: 4px; }
.hw-cloud-schritt span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hw-blau); color: #fff; font-size: .95rem; }
.hw-cloud-paketwahl { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .hw-cloud-paketwahl { grid-template-columns: repeat(3, 1fr); } }
.hw-cloud-paketwahl__karte { position: relative; cursor: pointer; }
.hw-cloud-paketwahl__karte input { position: absolute; opacity: 0; pointer-events: none; }
.hw-cloud-paketwahl__inhalt { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 2px solid var(--hw-linie); border-radius: 12px; background: var(--hw-flaeche); transition: border-color .15s, box-shadow .15s; }
.hw-cloud-paketwahl__karte input:checked + .hw-cloud-paketwahl__inhalt { border-color: var(--hw-blau); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.hw-cloud-paketwahl__karte input:focus-visible + .hw-cloud-paketwahl__inhalt { outline: 2px solid var(--hw-blau); outline-offset: 2px; }
.hw-cloud-paketwahl__preis { font-size: 1.35rem; font-weight: 800; }
.hw-cloud-paketwahl__preis small { font-size: .78rem; font-weight: 600; color: var(--hw-text-3); }
.hw-cloud-optionen { display: grid; gap: 6px; }
.hw-cloud-zusatz { border: 1px solid var(--hw-linie); border-radius: 12px; padding: 0 16px; }
.hw-cloud-zusatz summary { cursor: pointer; font-weight: 650; padding: 13px 0; }
.hw-cloud-zusatz[open] { padding-bottom: 14px; }
.hw-cloud-zusatz__liste { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 10px; }
@media (min-width: 760px) { .hw-cloud-zusatz__liste { grid-template-columns: 1fr 1fr; } }
.hw-cloud-zusatz__liste [hidden] { display: none; }
.hw-cloud-demo { align-self: end; }
.hw-cloud-summe h2 { font-size: 1.25rem; margin: 0 0 10px; }
.hw-cloud-summe__tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 12px; }
.hw-cloud-summe__tabelle td { padding: 6px 0; border-bottom: 1px solid var(--hw-linie-2); vertical-align: top; }
.hw-cloud-summe__tabelle td:last-child { text-align: right; font-weight: 600; padding-left: 10px; }
.hw-cloud-summe__gesamt { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; padding: 12px 14px; border-radius: 12px; background: var(--hw-bg-2); margin-bottom: 12px; }
.hw-cloud-summe__gesamt strong { font-size: 1.6rem; font-weight: 800; }
.hw-cloud-summe__gesamt small { grid-column: 2; text-align: right; color: var(--hw-text-3); }
.hw-cloud-summe__punkte { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; font-size: .9rem; }
.hw-cloud-summe__punkte li { display: flex; gap: 8px; align-items: flex-start; }
.hw-cloud-summe__punkte i { color: var(--hw-gruen); margin-top: 2px; }
.hw-cloud-summe .hw-wahl { font-size: .86rem; margin-bottom: 10px; }
.hw-cloud-summe__klein { font-size: .8rem !important; text-align: center; margin-top: 8px !important; }
/* FIX 2026-10-02 14:00 HanwareWebSeite (Cloud-ERP-Bestellung): Zaehler im Formular nicht strecken, Abzeichen nur so breit wie der Text */
.hw-feld .hw-zaehler { justify-self: start; width: max-content; }
.hw-feld .hw-zaehler input { width: 72px; min-height: 0; border: 0; border-radius: 0; padding: 8px 4px; box-shadow: none; }
.hw-cloud-paketwahl__inhalt .hw-badge { align-self: flex-start; }
/* FIX 2026-10-07 16:42 HanwareWebSeite (Anwender-Vorgabe 07.10.2026: unter Preise zwei Menuepunkte - Cloud ERP mieten und Hanware Business kaufen): Umschalter der Preisseiten, Paketkarten und Modultabelle Hanware Business */
.hw-preiswahl { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.hw-preiswahl a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; color: #fff; font-weight: 700; text-decoration: none; }
.hw-preiswahl a small { font-weight: 500; opacity: .85; }
.hw-preiswahl a:hover { background: rgba(255, 255, 255, .14); }
.hw-preiswahl a.aktiv { background: #fff; color: var(--hw-navy, #14296b); }
.hw-business-pakete { align-items: stretch; }
.hw-business-pakete .hw-haken { font-size: .9rem; gap: 6px; }
.hw-business-module__paket { text-align: center; white-space: nowrap; }
.hw-business-module tbody th { font-weight: 500; }
/* FIX 2026-10-07 17:14 HanwareWebSeite: Modulname als Knopf fuer das Fenster mit den Menuepunkten */
/* FIX 2026-10-07 17:26 HanwareWebSeite (Anwender-Vorgabe 07.10.2026, Dunkelmodus): Texte und Verweise in der Verweisfarbe --hw-link statt der Markenfarbe --hw-blau - im Dunkelmodus helles Blau mit ausreichendem Kontrast */
.hw-modul-link { background: none; border: 0; padding: 0; font: inherit; color: var(--hw-link); font-weight: 600; cursor: pointer; text-align: left; display: inline-flex; gap: 6px; align-items: center; }
.hw-modul-link:hover { text-decoration: underline; }
.hw-modul-link .bi { font-size: .85em; opacity: .75; }
.hw-modul-gruppe { font-size: 1rem; margin: 14px 0 6px; }
.hw-modul-funktionen { font-size: .93rem; gap: 6px; margin-bottom: 4px; }
.hw-modul-funktionen span { color: var(--hw-text-3); }
.hw-preis__funktionen { font-size: .84rem; color: var(--hw-text-3); margin: -.6rem 0 1rem; }
/* FIX 2026-10-02 14:00 HanwareWebSeite (Handbuch Cloud-ERP-Miete): Zeitstrahl Testphase -> Abrechnung */
.hw-zeitstrahl { display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; overflow: hidden; margin: 18px 0 26px; font-size: .92rem; }
.hw-zeitstrahl__abschnitt { padding: 14px 16px; display: grid; gap: 2px; }
.hw-zeitstrahl__abschnitt--gratis { background: rgba(22, 163, 74, .14); border-left: 5px solid var(--hw-gruen); }
.hw-zeitstrahl__abschnitt--miete { background: rgba(37, 99, 235, .1); border-left: 5px solid var(--hw-blau); }
.hw-zeitstrahl__abschnitt span { color: var(--hw-text-2); }
@media (max-width: 560px) { .hw-zeitstrahl { grid-template-columns: 1fr; } }
/* FIX 2026-10-02 15:10 HanwareWebSeite (Anwender-Vorgabe: marktuebliche Preis- und Bestellseite): Zahlweise-Umschalter,
   waehlbare Paketkarten, Knopf „Leistungsumfang ansehen“ und Detailansicht im Dialog. */
.hw-cloud-laufzeit { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 38px; padding: 5px; gap: 4px; border-radius: 999px; background: var(--hw-bg-3); }
.hw-cloud-laufzeit label { position: relative; cursor: pointer; }
.hw-cloud-laufzeit input { position: absolute; opacity: 0; pointer-events: none; }
.hw-cloud-laufzeit span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; font-weight: 650; color: var(--hw-text-2); }
.hw-cloud-laufzeit em { font-style: normal; font-size: .74rem; padding: 2px 8px; }
.hw-cloud-laufzeit input:checked + span { background: var(--hw-flaeche); color: var(--hw-link); box-shadow: var(--hw-schatten-1); }
.hw-cloud-laufzeit input:focus-visible + span { outline: 2px solid var(--hw-blau); outline-offset: 2px; }
.hw-cloud-karte { padding: 0; }
.hw-cloud-karte__wahl { display: flex; flex-direction: column; flex: 1; padding: 28px 24px 14px; cursor: pointer; }
.hw-cloud-karte__wahl > input { position: absolute; opacity: 0; pointer-events: none; }
.hw-cloud-karte__wahl .hw-haken { flex: 1; }
.hw-cloud-karte__knopf { width: 100%; margin-top: auto; }
.hw-cloud-karte__gewaehlt { display: none; }
.hw-cloud-karte.ist-gewaehlt { border: 2px solid var(--hw-gruen); box-shadow: 0 0 0 4px rgba(22, 163, 74, .14), var(--hw-schatten-2); }
.hw-cloud-karte.ist-gewaehlt .hw-cloud-karte__waehlen { display: none; }
.hw-cloud-karte.ist-gewaehlt .hw-cloud-karte__gewaehlt { display: inline; }
.hw-cloud-karte.ist-gewaehlt .hw-cloud-karte__knopf { background: #15803d; border-color: #15803d; color: #fff; } /* FIX 2026-10-07 11:45 HanwareWebSeite (Plan Punkt 7, Barrierefreiheit): Kontrast mindestens 4,5:1 */
.hw-cloud-karte__wahl:has(input:focus-visible) { outline: 2px solid var(--hw-blau); outline-offset: -6px; border-radius: 14px; }
.hw-cloud-karte__details { margin: 0 24px 22px; padding: 8px 0 0; border: 0; border-top: 1px solid var(--hw-linie-2); background: none; font: inherit; font-weight: 650; font-size: .92rem; color: var(--hw-link); cursor: pointer; text-align: center; }
.hw-cloud-karte__details:hover { text-decoration: underline; }
.hw-cloud-umfang { color: var(--hw-text); }
.hw-cloud-umfang__kopf { padding: 10px 14px; border-radius: 10px; background: var(--hw-bg-2); font-size: .92rem; }
.hw-cloud-umfang__bereich { padding: 12px 0; border-bottom: 1px solid var(--hw-linie-2); }
.hw-cloud-umfang__bereich:last-child { border-bottom: 0; }
.hw-cloud-umfang__bereich h3 { font-size: 1.02rem; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.hw-cloud-umfang__bereich h3 i { color: var(--hw-gruen); }
.hw-cloud-umfang__bereich--extra h3 i { color: var(--hw-blau); }
.hw-cloud-umfang__bereich p { margin: 0 0 6px; font-size: .9rem; color: var(--hw-text-2); }
.hw-cloud-umfang__bereich ul { margin: 0; padding-left: 20px; columns: 2; column-gap: 26px; font-size: .9rem; color: var(--hw-text-2); }
.hw-cloud-umfang__bereich li { break-inside: avoid; margin-bottom: 3px; }
.hw-cloud-umfang__bereich li span { color: var(--hw-text-3); font-size: .84rem; }
@media (max-width: 640px) { .hw-cloud-umfang__bereich ul { columns: 1; } .hw-cloud-laufzeit span { padding: 9px 13px; } }
/* FIX 2026-10-02 15:10 HanwareWebSeite (Startseite): Preisbereich mit den Cloud-ERP-Paketen */
.hw-start-preise .hw-grid { align-items: stretch; margin-top: 10px; }
.hw-start-preise .hw-haken { flex: 1; }
.hw-start-preise__details { display: block; text-align: center; margin-top: 12px; font-weight: 650; font-size: .92rem; }
.hw-start-preise__fuss { text-align: center; margin: 26px 0 0; color: var(--hw-text-2); font-size: .95rem; }
.hw-start-preise__fuss i { color: var(--hw-gruen); }
/* FIX 2026-10-02 15:10 HanwareWebSeite: Listen in Paketkarten nicht strecken (Abstand bleibt oben, Rest frei) */
.hw-cloud-karte__wahl .hw-haken, .hw-start-preise .hw-haken { align-content: start; align-items: start; }

/* ------------------------------------------------------------------ Neuigkeiten */
/* FIX 2026-10-05 22:24 HanwareWebSeite (PROMPT-Neuigkeiten-HanwareSeite): Neuigkeiten aus dem Admin-Portal - Uebersicht mit Filter-Chips,
   grosser neuester Meldung und Kartenraster (3/2/1), Einzelansicht in Lesebreite, Kategoriefarben, Dunkelmodus und Druckansicht. */
.hw-news--neu { --news-1: #059669; --news-2: #0f766e; --news-marke: #d1fae5; --news-marke-text: #065f46; }
.hw-news--update { --news-1: #2563eb; --news-2: #1e3a8a; --news-marke: #dbeafe; --news-marke-text: #1e40af; }
.hw-news--wartung { --news-1: #f59e0b; --news-2: #c2410c; --news-marke: #fef3c7; --news-marke-text: #92400e; }
.hw-news--hinweis { --news-1: #0891b2; --news-2: #155e75; --news-marke: #cffafe; --news-marke-text: #155e75; }
.hw-news--aktion { --news-1: #9333ea; --news-2: #be185d; --news-marke: #f3e8ff; --news-marke-text: #6b21a8; }
.hw-news--allgemein { --news-1: #1e3a8a; --news-2: #0b1a45; --news-marke: #e0e7ff; --news-marke-text: #1e3a8a; }
[data-thema="dunkel"] .hw-news--neu { --news-marke: rgba(16, 185, 129, .18); --news-marke-text: #6ee7b7; }
[data-thema="dunkel"] .hw-news--update { --news-marke: rgba(59, 130, 246, .2); --news-marke-text: #93c5fd; }
[data-thema="dunkel"] .hw-news--wartung { --news-marke: rgba(245, 158, 11, .2); --news-marke-text: #fcd34d; }
[data-thema="dunkel"] .hw-news--hinweis { --news-marke: rgba(6, 182, 212, .2); --news-marke-text: #67e8f9; }
[data-thema="dunkel"] .hw-news--aktion { --news-marke: rgba(168, 85, 247, .2); --news-marke-text: #d8b4fe; }
[data-thema="dunkel"] .hw-news--allgemein { --news-marke: rgba(129, 140, 248, .2); --news-marke-text: #c7d2fe; }

.hw-news-hero { padding-bottom: clamp(96px, 10vw, 128px); }
.hw-news-hero__kopf { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: flex-end; }
.hw-news-hero__kopf h1 { margin-bottom: .3em; }
.hw-news-filter { margin-top: 22px; display: grid; gap: 10px; }
.hw-news-filter__reihe { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.hw-news-filter__chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font-weight: 650; font-size: .95rem;
  color: #e6ecfa; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s;
}
.hw-news-filter__reihe--klein .hw-news-filter__chip { padding: 6px 13px; font-size: .88rem; }
.hw-news-filter__chip:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.hw-news-filter__chip.ist-aktiv { background: #fff; color: var(--hw-navy); border-color: #fff; }

.hw-news-liste { padding-top: 0; }
.hw-news-liste > .hw-container > :first-child { margin-top: calc(-1 * clamp(64px, 7vw, 92px)); position: relative; z-index: 2; }
.hw-news-raster { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 640px) { .hw-news-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hw-news-raster { grid-template-columns: repeat(3, 1fr); } }
.hw-news-liste > .hw-container > .hw-news-raster:first-child { margin-top: calc(-1 * clamp(64px, 7vw, 92px)); }

.hw-news-karte {
  display: flex; flex-direction: column; background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: 16px; overflow: hidden;
  color: var(--hw-text); box-shadow: var(--hw-schatten-2); text-decoration: none !important; transition: transform .18s, box-shadow .18s, border-color .18s; min-width: 0;
}
.hw-news-karte:hover { transform: translateY(-4px); box-shadow: var(--hw-schatten-3); border-color: var(--hw-blau-hell); }
.hw-news-karte:focus-visible { outline: 3px solid var(--hw-fokus); outline-offset: 3px; }
.hw-news-karte__bild { aspect-ratio: 16 / 9; background: var(--hw-bg-3); overflow: hidden; }
.hw-news-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.hw-news-karte:hover .hw-news-karte__bild img { transform: scale(1.03); }
.hw-news-flaeche {
  width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  background: radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .16) 0 22%, transparent 23%),
              radial-gradient(circle at 12% 110%, rgba(255, 255, 255, .12) 0 30%, transparent 31%),
              linear-gradient(135deg, var(--news-1), var(--news-2));
}
.hw-news-karte__text { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; min-width: 0; }
.hw-news-karte__titel { font-size: 1.2rem; margin: 10px 0 .4em; overflow-wrap: anywhere; }
.hw-news-karte__kurz { color: var(--hw-text-2); font-size: .97rem; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hw-news-karte__fuss { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.hw-news-mehr { font-weight: 650; color: var(--hw-link); display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.hw-news-mehr .bi { transition: transform .15s; }
.hw-news-karte:hover .hw-news-mehr .bi { transform: translateX(3px); }
@media (min-width: 900px) {
  .hw-news-karte--gross { flex-direction: row; }
  .hw-news-karte--gross .hw-news-karte__bild { flex: 0 0 54%; aspect-ratio: auto; min-height: 320px; }
  .hw-news-karte--gross .hw-news-karte__text { padding: 34px 34px 28px; justify-content: center; }
}
.hw-news-karte--gross .hw-news-karte__titel { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); }
.hw-news-karte--gross .hw-news-karte__kurz { -webkit-line-clamp: 4; font-size: 1.05rem; }

.hw-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .86rem; color: var(--hw-text-3); }
.hw-news-meta time { display: inline-flex; align-items: center; gap: 5px; }
.hw-news-marke {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; background: var(--news-marke); color: var(--news-marke-text);
}
.hw-news-wichtig { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .78rem; background: #fef3c7; color: #92400e; }
[data-thema="dunkel"] .hw-news-wichtig { background: rgba(245, 158, 11, .2); color: #fcd34d; }
.hw-news-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.hw-news-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; font-size: .8rem; font-weight: 600; background: var(--hw-bg-2); color: var(--hw-text-2); border: 1px solid var(--hw-linie-2); }

.hw-news-seiten { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 36px; }
.hw-news-seiten a, .hw-news-seiten span {
  min-width: 42px; height: 42px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 10px; font-weight: 650;
  border: 1px solid var(--hw-linie); background: var(--hw-flaeche); color: var(--hw-text); text-decoration: none !important;
}
.hw-news-seiten a:hover { border-color: var(--hw-blau-hell); color: var(--hw-link); }
.hw-news-seiten span[aria-current] { background: var(--hw-blau); border-color: var(--hw-blau); color: #fff; }
.hw-news-leer { text-align: center; background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: 16px; padding: clamp(32px, 5vw, 56px) 20px; box-shadow: var(--hw-schatten-2); }
.hw-news-leer > .bi { font-size: 2.8rem; color: var(--hw-blau); }
.hw-news-leer h2 { margin-top: 12px; }
.hw-news-leer p { color: var(--hw-text-2); max-width: 52ch; margin: 0 auto 6px; }
.hw-news-hinweis { text-align: center; margin: 34px 0 0; }

/* Startseite / Produktseiten */
.hw-news-start__kopf { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; }
.hw-news-start .hw-news-raster { margin-top: 26px; }

/* Einzelansicht */
.hw-news-hero--artikel { padding: 26px 0 clamp(110px, 12vw, 150px); }
.hw-news-zurueck { color: #e6ecfa; font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }
.hw-news-zurueck:hover { color: #fff; }
.hw-news-artikel { max-width: 880px; margin: calc(-1 * clamp(96px, 11vw, 132px)) auto 0; padding: 0 16px 48px; position: relative; z-index: 2; }
.hw-news-artikel__karte { background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: 18px; overflow: hidden; box-shadow: var(--hw-schatten-3); }
.hw-news-artikel__bild { aspect-ratio: 16 / 9; background: var(--hw-bg-3); }
.hw-news-artikel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hw-news-artikel__innen { padding: clamp(22px, 4vw, 44px); }
.hw-news-artikel h1 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.45rem); margin: 16px 0 .35em; overflow-wrap: anywhere; }
.hw-news-vorspann { font-size: 1.15rem; color: var(--hw-text-2); margin-bottom: 1.4em; }
.hw-news-inhalt { max-width: 760px; }
.hw-news-inhalt img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--hw-linie-2); }
.hw-news-inhalt figure { margin: 1.6em 0; }
.hw-news-inhalt figcaption { font-size: .9rem; color: var(--hw-text-3); margin-top: 6px; }
.hw-news-inhalt blockquote { margin: 1.4em 0; padding: 14px 18px; border-left: 4px solid var(--hw-blau); background: var(--hw-bg-2); border-radius: 0 10px 10px 0; color: var(--hw-text-2); }
.hw-news-inhalt blockquote > :last-child { margin-bottom: 0; }
.hw-news-inhalt table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .95rem; display: block; overflow-x: auto; }
.hw-news-inhalt th, .hw-news-inhalt td { border: 1px solid var(--hw-linie); padding: 8px 10px; text-align: left; }
.hw-news-inhalt th { background: var(--hw-bg-2); }
.hw-news-inhalt pre { overflow-x: auto; padding: 12px 14px; background: var(--hw-bg-2); border-radius: 8px; font-size: .9rem; }
.hw-news-inhalt code { font-size: .92em; }
.hw-news-inhalt a { text-decoration: underline; overflow-wrap: anywhere; }
.hw-news-video { margin: 1.8em 0 0; }
.hw-news-knoepfe { margin-top: 1.6em; }
.hw-news-anhaenge { margin-top: 2em; padding-top: 1.4em; border-top: 1px solid var(--hw-linie-2); }
.hw-news-anhaenge h2 { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-text-3); margin-bottom: 12px; }
.hw-news-anhaenge ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hw-news-anhaenge a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hw-linie); border-radius: 10px; color: var(--hw-text); background: var(--hw-flaeche); text-decoration: none !important; min-width: 0; }
.hw-news-anhaenge a:hover { border-color: var(--hw-blau-hell); }
.hw-news-anhaenge a .bi { font-size: 1.35rem; color: var(--hw-blau); flex: 0 0 auto; }
.hw-news-anhaenge a span { font-weight: 600; overflow-wrap: anywhere; flex: 1; }
.hw-news-anhaenge a small { color: var(--hw-text-3); white-space: nowrap; }
.hw-news-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2em; padding-top: 1.2em; border-top: 1px solid var(--hw-linie-2); color: var(--hw-text-3); font-size: .92rem; }
.hw-news-cta {
  margin-top: 26px; padding: clamp(22px, 4vw, 34px); border-radius: 18px; color: #dbe5fb; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between;
  background: radial-gradient(600px 260px at 90% 0%, rgba(59, 130, 246, .35), transparent 60%), linear-gradient(135deg, var(--hw-navy-tief), var(--hw-navy) 60%, var(--hw-navy-2));
}
.hw-news-cta h2 { color: #fff; font-size: 1.45rem; margin-bottom: .25em; }
.hw-news-cta p { margin: 0; color: #cfdcf7; max-width: 46ch; }
.hw-news-cta .hw-aktionen { margin: 0; }
.hw-news-blaettern { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
@media (min-width: 640px) { .hw-news-blaettern { grid-template-columns: 1fr 1fr; } }
.hw-news-blaettern a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--hw-linie); border-radius: 14px; background: var(--hw-flaeche); color: var(--hw-text); text-decoration: none !important; box-shadow: var(--hw-schatten-1); }
.hw-news-blaettern a:hover { border-color: var(--hw-blau-hell); box-shadow: var(--hw-schatten-2); }
.hw-news-blaettern small { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hw-text-3); }
.hw-news-blaettern__neuer { text-align: right; align-items: flex-end; }
.hw-news-weitere { background: var(--hw-bg-2); }
.hw-news-weitere .hw-news-raster { margin-top: 10px; }

@media print {
  .hw-kopf, .hw-fuss, .hw-sprung, .hw-cta, .hw-news-hero, .hw-news-teilen, .hw-news-cta, .hw-news-blaettern, .hw-news-weitere, .hw-news-knoepfe, .hw-nachoben, .hw-toast { display: none !important; }
  .hw-news-artikel { margin: 0 auto; padding: 0; max-width: none; }
  .hw-news-artikel__karte { box-shadow: none; border: 0; }
  .hw-news-artikel__bild { max-height: 9cm; }
  .hw-news-inhalt a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* ============================================================================================================================
   FIX 2026-10-07 11:36 HanwareWebSeite (Anwender-Auftrag 07.10.2026, Plan Punkte 4, 6, 11, 14-17, 19, 24): neue Bausteine
   Hinweisbanner, englischer Kopf, Seitenbaukasten (Vergleich, Vorschau), Produktfinder, Suchvorschlaege, Newsletter, Kurzvideo
   ============================================================================================================================ */
.hw-banner { background: var(--hw-navy); color: #fff; font-size: .92rem; }
.hw-banner .hw-container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 9px; padding-bottom: 9px; justify-content: center; text-align: center; }
.hw-banner a { color: #fff; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.hw-banner--aktion { background: #0f6b3a; }
.hw-banner--warnung { background: #fef3c7; color: #5b3b00; }
.hw-banner--warnung a { color: #5b3b00; }

.hw-kopf-en__nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: 28px; }
.hw-kopf-en__nav a { color: var(--hw-text); font-weight: 600; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
/* FIX 2026-10-07 17:26 HanwareWebSeite (Anwender-Vorgabe 07.10.2026, Dunkelmodus): Texte und Verweise in der Verweisfarbe --hw-link statt der Markenfarbe --hw-blau - im Dunkelmodus helles Blau mit ausreichendem Kontrast */
.hw-kopf-en__nav a:hover, .hw-kopf-en__nav a[aria-current=page] { border-bottom-color: var(--hw-blau); color: var(--hw-link); }
@media (max-width: 760px) { .hw-kopf--en .hw-kopf__innen { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; } .hw-kopf-en__nav { order: 3; width: 100%; margin: 4px 0 0; } }

.hw-titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hw-vorschau-leiste { background: #fef3c7; color: #5b3b00; text-align: center; padding: 10px 16px; font-weight: 600; }

.hw-vergleich th[scope=row] { font-weight: 600; text-align: left; }
.hw-vergleich thead th { white-space: nowrap; }
.hw-vergleich .hw-vergleich__wir { background: color-mix(in srgb, var(--hw-blau) 7%, transparent); }
/* FIX 2026-10-07 17:26 HanwareWebSeite (Anwender-Vorgabe 07.10.2026, Dunkelmodus): Texte und Verweise in der Verweisfarbe --hw-link statt der Markenfarbe --hw-blau - im Dunkelmodus helles Blau mit ausreichendem Kontrast */
.hw-vergleich thead .hw-vergleich__wir { color: var(--hw-link); }
.hw-vergleich__ja i { color: var(--hw-gruen); font-size: 1.15rem; }
.hw-vergleich__nein i { color: var(--hw-text-3); font-size: 1.15rem; }
.hw-vergleich__teil { color: var(--hw-text-2); }
.hw-vergleich__teil i { color: var(--hw-akzent); }

.hw-finder { max-width: 820px; margin: 0 auto; }
/* FIX 2026-10-07 12:59 HanwareWebSeite (Handbuch-Bilder): ausgeblendete Knoepfe (Zurueck/Empfehlung anzeigen) blieben sichtbar - .hw-btn ueberschrieb [hidden] */
.hw-finder [hidden] { display: none !important; }
.hw-finder__fortschritt { height: 6px; border-radius: 6px; background: var(--hw-bg-3); overflow: hidden; display: none; }
.hw-finder__fortschritt span { display: block; height: 100%; width: 0; background: var(--hw-blau); transition: width .25s; }
.hw-finder--schritte .hw-finder__fortschritt { display: block; }
.hw-finder__schritt { color: var(--hw-text-3); font-size: .9rem; margin: 10px 0 0; }
.hw-finder__frage { border: 0; padding: 0; margin: 18px 0 26px; min-width: 0; }
.hw-finder__frage legend { font-size: 1.35rem; font-weight: 700; color: var(--hw-text); padding: 0; margin-bottom: 4px; }
.hw-finder__wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.hw-finder__karte { position: relative; cursor: pointer; }
.hw-finder__karte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hw-finder__karte span { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px; border: 1.5px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); font-weight: 600; transition: border-color .15s, box-shadow .15s, transform .15s; }
.hw-finder__karte span i { font-size: 1.5rem; color: var(--hw-blau); }
.hw-finder__karte:hover span { border-color: var(--hw-blau); transform: translateY(-1px); }
.hw-finder__karte input:checked + span { border-color: var(--hw-blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hw-blau) 22%, transparent); background: color-mix(in srgb, var(--hw-blau) 6%, var(--hw-flaeche)); }
.hw-finder__karte input:focus-visible + span { outline: 3px solid var(--hw-fokus); outline-offset: 2px; }
.hw-finder__ergebnis { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px; align-items: start; }
.hw-finder__haupt h2 { font-size: 1.7rem; margin: 4px 0 8px; color: #fff; }
/* FIX 2026-10-07 13:01 HanwareWebSeite (Handbuch-Bilder): Produktname und Etikett auf der dunklen Empfehlungskarte waren kaum lesbar */
.hw-finder__haupt .hw-eyebrow { color: #bcd2ff; }
.hw-finder__haupt p, .hw-finder__haupt .hw-karte__mehr { color: #e6edf9; }
.hw-finder__aktion { background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); padding: 22px; box-shadow: var(--hw-schatten-1); }
.hw-finder__aktion h2 { font-size: 1.2rem; margin-top: 0; }
.hw-finder__branche { display: inline-flex; gap: 8px; margin-top: 14px; font-weight: 600; }
@media (max-width: 820px) { .hw-finder__ergebnis { grid-template-columns: 1fr; } }

.hw-suche__feld { flex: 1; display: flex; }
.hw-suche__feld input { width: 100%; }
.hw-vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 6px; background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); box-shadow: var(--hw-schatten-2); max-height: 60vh; overflow: auto; }
.hw-vorschlaege li a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: var(--hw-radius-klein); color: var(--hw-text); text-decoration: none; }
.hw-vorschlaege li a span { color: var(--hw-text-3); font-size: .85rem; white-space: nowrap; }
/* FIX 2026-10-07 17:26 HanwareWebSeite (Anwender-Vorgabe 07.10.2026, Dunkelmodus): Texte und Verweise in der Verweisfarbe --hw-link statt der Markenfarbe --hw-blau - im Dunkelmodus helles Blau mit ausreichendem Kontrast */
.hw-vorschlaege li[aria-selected=true] a, .hw-vorschlaege li a:hover { background: var(--hw-bg-2); color: var(--hw-link); }

.hw-fuss__zeit { opacity: .8; }

.hw-kurzvideo { position: relative; border-radius: var(--hw-radius); overflow: hidden; box-shadow: var(--hw-schatten-3); background: #0b1a45; }
.hw-kurzvideo video { display: block; width: 100%; height: auto; }
.hw-kurzvideo__knopf { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(11, 26, 69, .82); color: #fff; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.hw-kurzvideo__knopf:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hw-finder__karte span, .hw-finder__fortschritt span { transition: none; } }

/* FIX 2026-10-07 11:47 HanwareWebSeite (Plan Punkt 7, Barrierefreiheit WCAG 1.4.10): Darstellung bei 320 px ohne waagerechtes Scrollen -
   Rasterspalten duerfen schmaler als ihr Inhalt werden, lange Knoepfe und lange deutsche Woerter brechen um. */
.hw-split > *, .hw-grid > *, .hw-zahlen > *, .hw-galerie > * { min-width: 0; }
body { overflow-wrap: break-word; }
h1, h2, h3, .hw-hero__text, .hw-karte h3 { hyphens: auto; -webkit-hyphens: auto; }
img, video { max-width: 100%; }
@media (max-width: 480px) {
  .hw-btn { white-space: normal; text-align: center; max-width: 100%; }
  .hw-aktionen > .hw-btn { flex: 1 1 100%; justify-content: center; }
}
/* FIX 2026-10-07 11:48 HanwareWebSeite (Plan Punkt 7): Vorlesetexte (.hw-sr) in Tabellenzellen in der Zelle verankern - sonst ragen sie
   aus dem waagerechten Scrollbereich der Tabelle heraus und verbreitern die ganze Seite. */
.hw-tabelle td, .hw-tabelle tbody th { position: relative; }
/* FIX 2026-10-08 13:50 HanwareWebSeite (PROMPT-Supportvertrag-Antrag-WebSeite): Antrag Supportvertrag (/supportvertrag) */
.hw-sv [hidden] { display: none !important; }
.hw-sv__titel { font-size: 1.2rem; margin: 1.4em 0 0; display: flex; gap: 10px; align-items: center; padding-top: 1.1em; border-top: 1px solid var(--hw-linie); }
.hw-sv__titel:first-of-type { border-top: 0; padding-top: 0; margin-top: .2em; }
.hw-sv__titel .bi { color: var(--hw-link); }
.hw-sv__schmal { max-width: 280px; }
.hw-sv__anzeige { background: var(--hw-bg-2) !important; color: var(--hw-text-2) !important; cursor: default; }
.hw-sv__leistungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 20px; padding: 18px; }
fieldset.hw-sv__gruppe { border: 0; padding: 0; margin: 0; min-width: 0; }
.hw-sv__nebeneinander { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 8px; }
.hw-sv__zustimmung { display: grid; gap: 8px; margin-top: 1.2em; padding: 16px 18px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); }
.hw-sv__zustimmung .hw-form__hinweis { margin: 4px 0 0; }
.hw-sv__pflicht { color: var(--hw-rot); font-weight: 700; }
.hw-sv-whatsapp { margin-bottom: 1.6em; }
.hw-sv-whatsapp > .bi { font-size: 1.8rem; color: #25d366; }
.hw-sv-whatsapp h2 { font-size: 1.15rem; margin: 0 0 8px; }
.hw-sv-whatsapp .hw-haken { margin: 0; }
.hw-sv__ok { font-size: 3rem; line-height: 1; color: var(--hw-gruen); margin-bottom: 12px; }
.hw-sv__vorgang { display: grid; gap: 4px; margin: 1.2em auto; padding: 14px 18px; max-width: 320px; border: 1px dashed var(--hw-linie); border-radius: var(--hw-radius); color: var(--hw-text-2); font-size: .9rem; }
.hw-sv__vorgang strong { font-size: 1.45rem; letter-spacing: .04em; color: var(--hw-text); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .hw-sv .hw-sv__ort { grid-template-columns: 1fr 2fr 1.5fr; } .hw-sv .hw-sv__name { grid-template-columns: .7fr 1fr 1fr; } }
/* FIX 2026-10-08 18:23 HanwareWebSeite (PROMPT-WhatsApp-Konditionen-Seite): Abschnitt WhatsApp-Konditionen (/Produkt/HanwareWhatsApp#konditionen) */
.hw-wa-titel { font-size: 1.2rem; margin: 2rem 0 1rem; }
.hw-wa-konditionen .hw-kopfzeile + .hw-wa-titel { margin-top: .5rem; }
.hw-wa-schritte h4, .hw-wa-konditionen .hw-karte h4 { font-size: 1.05rem; margin: 0 0 6px; }
.hw-wa-hervor { border-color: var(--hw-gruen); box-shadow: 0 0 0 1px var(--hw-gruen) inset; }
.hw-wa-preise { margin-top: .5rem; max-width: 720px; }
.hw-wa-tabelle th[scope=row] { font-weight: 600; }
.hw-wa-tabelle .hw-rechts { text-align: right; white-space: nowrap; }
.hw-wa-zusatz { display: block; font-weight: 400; font-size: .88rem; color: var(--hw-text-3); }
.hw-wa-unten { margin-top: 1.5rem; align-items: center; }
.hw-wa-abschluss h2 { margin-top: .4rem; }
.hw-wa-kontakt { margin: 1.2rem 0 0; color: var(--hw-text-2); }
.hw-wa-kontakt a { white-space: nowrap; font-weight: 600; }
/* FIX 2026-10-10 09:00 HanwareWebSeite (PROMPT-Dokumentationsbereich): Bereich Dokumentation - sachlich, Download-Karten, fruehere Fassungen */
.hw-doku__titel { font-size: 1.3rem; margin: 0 0 1rem; }
.hw-doku__titel:not(:first-child) { margin-top: 2rem; }
.hw-doku { margin: 0 0 1.25rem; }
.hw-doku__karte { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); }
.hw-doku__icon { flex: 0 0 auto; font-size: 1.8rem; line-height: 1; color: var(--hw-rot); }
.hw-doku__text { flex: 1 1 auto; min-width: 0; }
.hw-doku__text h3 { font-size: 1.05rem; margin: 0 0 4px; }
.hw-doku__text p { margin: 0 0 4px; }
.hw-doku__stand { font-size: .9rem; color: var(--hw-text-3); }
.hw-doku__knopf { flex: 0 0 auto; align-self: center; }
.hw-doku__frueher { margin: 10px 0 0 4px; }
.hw-doku__frueher h4 { font-size: .95rem; margin: 0 0 8px; }
.hw-doku__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hw-doku__liste li { display: flex; gap: 12px; align-items: flex-start; }
.hw-doku__liste li > .bi { font-size: 1.25rem; color: var(--hw-link); line-height: 1.4; }
.hw-doku__liste small { display: block; color: var(--hw-text-3); font-size: .86rem; }
.hw-doku__teile { margin: .5rem 0 1.5rem; }
.hw-doku__punkte { max-width: 760px; margin-bottom: 1.5rem; }
.hw-doku__hinweis { margin: 0; color: var(--hw-text-3); font-size: .92rem; display: flex; gap: 8px; }
@media (max-width: 560px) {
  .hw-doku__karte { flex-wrap: wrap; }
  .hw-doku__knopf { width: 100%; justify-content: center; }
}

/* FIX 2026-10-10 13:35 HanwareWebSeite (Prompt-Werbeseite-ERechnung): /Produkt/HanwareERechnung - Grafik im Kopfbereich (PDF + XML + Pruefung),
   Validierungsprotokoll in Festbreitenschrift mit farbigen Markern, Selbsttest "Sind Sie E-Rechnungs-ready?". Hell und dunkel. */
.hw-erech-grafik svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .35)); }
.hw-erech-grafik__xml rect { fill: #0d1b3f; stroke: rgba(255, 255, 255, .22); }
.hw-erech-grafik__xml text { fill: #8fb4ff; font: 600 12px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.hw-erech-grafik__pdf > rect:first-child { fill: #ffffff; }
.hw-erech-grafik__kopf { fill: var(--hw-navy-2); }
.hw-erech-grafik__titel { fill: #fff; font: 700 14px var(--hw-schrift); }
.hw-erech-grafik__zeile { fill: #dbe4f3; }
.hw-erech-grafik__summe { fill: #93c5fd; }
.hw-erech-grafik__ok rect { fill: #14532d; stroke: #22c55e; }
.hw-erech-grafik__ok circle { fill: #22c55e; }
.hw-erech-grafik__ok path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hw-erech-grafik__ok text { fill: #dcfce7; font: 700 15px var(--hw-schrift); }
@media (max-width: 899px) { .hw-erech-grafik { display: none; } }

.hw-erech-log { margin: 0; border-radius: var(--hw-radius); overflow: hidden; background: #0d1526; border: 1px solid #22314f; box-shadow: var(--hw-schatten-2); }
.hw-erech-log figcaption { padding: 10px 16px; font-size: .85rem; font-weight: 600; color: #cbd5e1; background: #16223a; border-bottom: 1px solid #22314f; }
.hw-erech-log pre { margin: 0; padding: 16px 18px; overflow-x: auto; color: #e2e8f0; font: 13px/1.6 ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; white-space: pre; }
.hw-erech-log pre:focus-visible { outline: 3px solid var(--hw-fokus); outline-offset: -3px; }
.hw-erech-log .ok { color: #4ade80; font-weight: 700; }
.hw-erech-log .warn { color: #fbbf24; font-weight: 700; }
.hw-erech-log .err { color: #f87171; font-weight: 700; }
.hw-erech-log .tun { color: #93c5fd; }
.hw-erech-log__kopf { color: #94a3b8; }
.hw-erech-log__ergebnis { color: #4ade80; font-weight: 700; }
.hw-erech-marke { font: 700 .85em ui-monospace, "Cascadia Mono", Consolas, monospace; padding: 1px 6px; border-radius: 6px; background: var(--hw-bg-3); }
.hw-erech-marke--ok { color: #15803d; }
.hw-erech-marke--warn { color: #b45309; }
.hw-erech-marke--err { color: #b91c1c; }
[data-thema="dunkel"] .hw-erech-marke--ok { color: #4ade80; }
[data-thema="dunkel"] .hw-erech-marke--warn { color: #fbbf24; }
[data-thema="dunkel"] .hw-erech-marke--err { color: #f87171; }

.hw-erech-check { display: grid; gap: 14px; }
.hw-erech-check__frage { margin: 0; padding: 16px 18px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); }
.hw-erech-check__frage legend { padding: 0 4px; font-weight: 700; color: var(--hw-text); }
.hw-erech-check__frage > p { margin: 2px 0 10px; }
.hw-erech-check__frage.ist-offen { border-color: var(--hw-rot); box-shadow: 0 0 0 2px rgba(220, 38, 38, .15); }
.hw-erech-check__wahl { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.hw-erech-check__ergebnis { padding: 18px 20px; border-radius: var(--hw-radius); border: 1px solid var(--hw-linie); background: var(--hw-bg-2); }
.hw-erech-check__ergebnis:focus { outline: none; }
.hw-erech-check__ergebnis h3 { margin: 0 0 .4em; }
.hw-erech-check__ergebnis.ist-bereit { border-color: var(--hw-gruen); }
.hw-erech-check__ergebnis.ist-bereit h3 { color: var(--hw-gruen); }
.hw-erech-check__ergebnis.ist-luecke { border-color: var(--hw-akzent); }
.hw-erech-check__liste { margin: .4em 0 .8em; padding-left: 1.2em; }
.hw-erech-check__liste li { margin: .25em 0; }
.hw-split--oben { align-items: start; }
.hw-erech-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hw-erech-legende code { display: inline-block; min-width: 4.6em; text-align: center; margin-right: 6px; }

/* ------------------------------------------------------------------ Kundenbewertungen
   FIX 2026-10-12 19:57 HanwareWebSeite (Kundenbewertungen Anwender 12.10.2026): Karten, Sterne, Kennzahlen mit Verteilung,
   Antwort von Hanware; Startseite (4 Karten) und /Kundenbewertungen; mobil einspaltig, Dunkelmodus ueber die Variablen. */
.hw-sterne { display: inline-flex; gap: 2px; color: var(--hw-akzent); font-size: 1rem; line-height: 1; white-space: nowrap; }
.hw-sterne--gross { font-size: 1.45rem; gap: 3px; }
.hw-bewertungen__raster { margin-top: 28px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.hw-bewertung { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius);
  background: var(--hw-flaeche); box-shadow: var(--hw-schatten-1); min-width: 0; }
.hw-bewertung:focus { outline: none; }
.hw-bewertung__kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hw-bewertung__datum { font-size: .85rem; color: var(--hw-text-3); }
.hw-bewertung__titel { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.hw-bewertung__text { color: var(--hw-text-2); white-space: pre-line; overflow-wrap: anywhere; }
.hw-bewertung__text.ist-gekuerzt { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.hw-bewertung__mehr { align-self: flex-start; margin-top: -4px; padding: 2px 0; border: 0; background: none; color: var(--hw-link); font: inherit; font-weight: 600; cursor: pointer; }
.hw-bewertung__mehr:hover { text-decoration: underline; }
.hw-bewertung__fuss { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 6px; }
.hw-bewertung__name { font-weight: 600; color: var(--hw-text); display: inline-flex; align-items: center; gap: 6px; }
.hw-bewertung__name .bi { color: var(--hw-text-3); }
.hw-bewertung__antwort { margin: 4px 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--hw-navy-2); border-radius: 0 var(--hw-radius-klein) var(--hw-radius-klein) 0; background: var(--hw-bg-2); }
.hw-bewertung__antwort-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .92rem; }
.hw-bewertung__antwort-kopf img { border-radius: 4px; }
.hw-bewertung__antwort-kopf time { color: var(--hw-text-3); font-size: .85rem; }
.hw-bewertung__antwort-text { margin-top: 6px; color: var(--hw-text-2); white-space: pre-line; overflow-wrap: anywhere; }
[data-thema="dunkel"] .hw-bewertung__antwort { border-left-color: var(--hw-blau-hell); }

.hw-bewertungen__schnitt { display: flex; align-items: center; gap: 14px; }
.hw-bewertungen__schnitt--start { margin-top: 10px; flex-wrap: wrap; gap: 8px 12px; }
.hw-bewertungen__zahl { font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--hw-text); }
.hw-bewertungen__anzahl { margin: 4px 0 0; color: var(--hw-text-2); }
.hw-bewertungen__schnitt--start .hw-bewertungen__anzahl { margin: 0; }

.hw-bewertungen { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .hw-bewertungen { grid-template-columns: 300px 1fr; gap: 40px; } .hw-bewertungen__kennzahlen { position: sticky; top: calc(var(--hw-kopf) + 20px); } }
.hw-bewertungen__kennzahlen { padding: 22px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); box-shadow: var(--hw-schatten-1); }
.hw-bewertungen__verteilung { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.hw-bewertungen__verteilung li { display: grid; grid-template-columns: 2.6em 1fr 2.4em; align-items: center; gap: 10px; font-size: .92rem; }
.hw-bewertungen__stufe { color: var(--hw-text-2); white-space: nowrap; }
.hw-bewertungen__stufe .bi { color: var(--hw-akzent); font-size: .8em; }
.hw-bewertungen__balken { height: 9px; border-radius: 99px; background: var(--hw-bg-3); overflow: hidden; }
.hw-bewertungen__balken > span { display: block; height: 100%; border-radius: 99px; background: var(--hw-akzent); }
.hw-bewertungen__wert { text-align: right; color: var(--hw-text-3); }
.hw-bewertungen__hinweis { margin: 18px 0 0; font-size: .86rem; color: var(--hw-text-3); display: flex; gap: 8px; }
.hw-bewertungen__hinweis .bi { color: var(--hw-gruen); }
.hw-bewertungen__auswahl { margin: 0 0 14px; color: var(--hw-text-2); }
.hw-bewertungen__liste { display: grid; gap: 16px; }
.hw-bewertungen__weitere { margin-top: 22px; text-align: center; }
.hw-bewertungen__weitere .ist-laedt { opacity: .6; pointer-events: none; }
@media print { .hw-bewertung__mehr, .hw-bewertungen__weitere { display: none !important; } .hw-bewertung__text.ist-gekuerzt { display: block; -webkit-line-clamp: none; } }

/* FIX 2026-10-13 15:08 HanwareWebSeite (WhatsApp-Preisart Anwender 13.10.2026): einmalige / monatliche Gebuehren unter "Preise je Beleg" */
.hw-wa-einmalig { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hw-wa-einmalig li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius);
  background: var(--hw-flaeche); box-shadow: var(--hw-schatten-1); }
.hw-wa-einmalig__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--hw-bg-3); color: var(--hw-navy-2); font-size: 1.15rem; }
[data-thema="dunkel"] .hw-wa-einmalig__icon { color: var(--hw-blau-hell); }
.hw-wa-einmalig__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-wa-einmalig__art { font-size: .86rem; font-weight: 600; color: #b45309; }
[data-thema="dunkel"] .hw-wa-einmalig__art { color: #fbbf24; }
.hw-wa-einmalig__betrag { flex: 0 0 auto; text-align: right; font-size: 1.15rem; white-space: nowrap; }
.hw-wa-einmalig__betrag small { display: block; font-size: .78rem; color: var(--hw-text-3); font-weight: 400; }
@media (max-width: 480px) { .hw-wa-einmalig li { flex-wrap: wrap; } .hw-wa-einmalig__betrag { width: 100%; text-align: left; padding-left: 54px; } }

/* FIX 2026-10-13 18:30 HanwareWebSeite (PROMPT-Premium-Analysen-Texte 13.10.2026): Galerie mit ganzen Bildern (breite Dashboard-Ausschnitte nicht beschneiden) */
.hw-galerie--ganz { align-items: start; }
.hw-galerie--ganz a { aspect-ratio: auto; background: var(--hw-flaeche); }
.hw-galerie--ganz img { height: auto; object-fit: contain; }

/* FIX 2026-10-13 22:30 HanwareWebSeite (Hanware Business 13.10.2026: Ausbau der Premium-Analysen auf 13 Dashboards): Gruppenueberschriften der Dashboards */
.hw-pa-gruppe { margin: 28px 0 14px; font-size: 1.1rem; color: var(--hw-text-2); }

/* FIX 2026-10-14 01:24 HanwareWebSeite (Anwender 14.10.2026: Programmnamen mit Edition - Hanware Business (Desktop), Hanware Web ERP (Cloud), Hanware Cash (Desktop)) */
.hw-prog-edition { font-size: .78em; font-weight: 500; opacity: .85; white-space: nowrap; }

/* FIX 2026-10-14 23:37 HanwareWebSeite (Forum-Auftrag Hanware Business 14.10.2026): Hanware Community (/Forum) und Selbsthilfe-Center (/Selbsthilfe) */
.hw-forum-leiste { background: var(--hw-bg-2); border-bottom: 1px solid var(--hw-linie); }
.hw-forum-leiste__innen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-top: 10px; padding-bottom: 10px; }
.hw-forum-leiste .hw-krumen { margin: 0; flex: 1 1 260px; }
.hw-forum-suche { position: relative; flex: 0 1 280px; }
.hw-forum-suche > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--hw-text-3); pointer-events: none; }
.hw-forum-suche input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--hw-linie); border-radius: 999px; background: var(--hw-flaeche); color: var(--hw-text); font: inherit; font-size: .95rem; }
.hw-forum-suche--block { flex: none; max-width: 420px; margin-bottom: 14px; }
.hw-forum-suche--block input { padding-left: 14px; }
.hw-forum-konto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hw-forum-ich { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--hw-text); }
.hw-forum-inline { display: inline; margin: 0; }
.hw-forum-vorschau { margin: 0 0 10px; padding: 8px 14px; border-radius: var(--hw-radius-klein); background: rgba(245, 158, 11, .14); color: #92580a; font-size: .92rem; }
[data-thema="dunkel"] .hw-forum-vorschau { color: #fcd34d; }

.hw-forum-hero .hw-hero__text { max-width: 760px; }
.hw-forum-hero--klein { padding-top: 34px; padding-bottom: 34px; }
.hw-forum-hero__zahlen { margin: 14px 0 0; color: #c7d4f0; font-size: .95rem; }
.hw-forum-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.hw-forum-kopf > div { flex: 1 1 320px; }
.hw-forum-kopf h1 { margin-bottom: .2em; }
.hw-forum-kopf__icon { font-size: 2.2rem; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: rgba(255, 255, 255, .12); color: #fff; }
.hw-forum-grosssuche { position: relative; display: flex; gap: 8px; max-width: 760px; margin: 20px 0 14px; flex-wrap: wrap; }
.hw-forum-grosssuche > i { position: absolute; left: 16px; top: 23px; transform: translateY(-50%); color: #64748b; z-index: 1; }
.hw-forum-grosssuche input { flex: 1 1 260px; min-height: 46px; padding: 10px 16px 10px 44px; border: 1px solid transparent; border-radius: 12px; font: inherit; background: #fff; color: #1b2333; }
.hw-forum-grosssuche select { min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--hw-linie); font: inherit; background: var(--hw-flaeche); color: var(--hw-text); }
.hw-forum-grosssuche--hell input { border-color: var(--hw-linie); }

.hw-forum-h1 { font-size: 1.7rem; }
.hw-forum-h2 { font-size: 1.25rem; margin: 26px 0 14px; }
.hw-forum-hinweise .hw-kachel { padding: 16px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); }
.hw-forum-dringend > i, .hw-forum-dringend h3 i { color: #b45309 !important; }
.hw-forum-dringend { border-color: rgba(245, 158, 11, .5) !important; }

.hw-forum-kategorien { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-bottom: 10px; }
.hw-forum-kategorie { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); color: var(--hw-text); text-decoration: none !important; transition: box-shadow .15s, border-color .15s, transform .15s; }
.hw-forum-kategorie:hover { border-color: var(--hw-blau-hell); box-shadow: var(--hw-schatten-2); transform: translateY(-1px); }
.hw-forum-kategorie > i { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--hw-bg-3); color: var(--hw-blau); font-size: 1.2rem; }
.hw-forum-kategorie__text { display: flex; flex-direction: column; gap: 3px; }
.hw-forum-kategorie__text > span { color: var(--hw-text-2); font-size: .93rem; line-height: 1.45; }
.hw-forum-kategorie__zahlen { color: var(--hw-text-3); font-size: .82rem; }

.hw-forum-zwei { display: grid; gap: 28px; }
@media (min-width: 960px) { .hw-forum-zwei { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); } }
.hw-forum-seite > .hw-karte { margin-bottom: 14px; padding: 18px; }
.hw-forum-seite h3 { font-size: 1rem; }

.hw-forum-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); overflow: hidden; }
.hw-forum-zeile { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--hw-linie-2); }
.hw-forum-zeile:first-child { border-top: 0; }
.hw-forum-zeile.ist-angeheftet { background: var(--hw-bg-2); }
.hw-forum-zeile__status { font-size: 1.3rem; color: var(--hw-text-3); padding-top: 2px; }
.hw-forum-ok { color: var(--hw-gruen); }
.hw-forum-faq { color: #b45309; }
.hw-forum-zeile__titel { font-weight: 700; font-size: 1.03rem; color: var(--hw-text); }
.hw-forum-zeile__titel:hover { color: var(--hw-link); }
.hw-forum-zeile__auszug { margin: 4px 0 0; color: var(--hw-text-2); font-size: .92rem; line-height: 1.5; }
.hw-forum-zeile__meta { margin: 4px 0 0; color: var(--hw-text-3); font-size: .85rem; }
.hw-forum-zeile__zahlen { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .85rem; color: var(--hw-text-2); white-space: nowrap; }
@media (max-width: 560px) { .hw-forum-zeile { grid-template-columns: 26px minmax(0, 1fr); } .hw-forum-zeile__zahlen { grid-column: 2; flex-direction: row; gap: 12px; align-items: center; } }
.hw-forum-marken { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.hw-forum-marken:empty { display: none; }
.hw-forum-marke { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--hw-bg-3); color: var(--hw-navy-2); }
.hw-forum-marke--ok { background: rgba(22, 163, 74, .14); color: #166534; }
.hw-forum-marke--faq { background: rgba(245, 158, 11, .18); color: #92580a; }
.hw-forum-marke--hanware { background: rgba(37, 99, 235, .13); color: #1d4ed8; }
.hw-forum-marke--warte { background: rgba(245, 158, 11, .18); color: #92580a; }
.hw-forum-marke--rot { background: rgba(220, 38, 38, .12); color: #b91c1c; }
[data-thema="dunkel"] .hw-forum-marke { color: #bcd2ff; }
[data-thema="dunkel"] .hw-forum-marke--ok { color: #86efac; }
[data-thema="dunkel"] .hw-forum-marke--faq, [data-thema="dunkel"] .hw-forum-marke--warte { color: #fcd34d; }
[data-thema="dunkel"] .hw-forum-marke--rot { color: #fca5a5; }
.hw-forum-tag { display: inline-block; margin-left: 8px; color: var(--hw-text-3); font-size: .82rem; }
.hw-forum-tags .hw-forum-tag { margin: 0 8px 0 0; }
.hw-forum-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.hw-forum-reiter a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hw-linie); color: var(--hw-text-2); font-weight: 650; font-size: .92rem; background: var(--hw-flaeche); text-decoration: none !important; }
.hw-forum-reiter a.ist-aktiv { background: var(--hw-navy); border-color: var(--hw-navy); color: #fff; }
.hw-forum-seiten { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; color: var(--hw-text-2); }
.hw-forum-leer { text-align: center; padding: 36px 16px; border: 1px dashed var(--hw-linie); border-radius: var(--hw-radius); color: var(--hw-text-2); }
.hw-forum-leer > i { font-size: 2rem; color: var(--hw-text-3); }
.hw-forum-faqliste { list-style: none; margin: 0 0 18px; padding: 0; }
.hw-forum-faqliste li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hw-linie-2); }
.hw-forum-faqliste li > i { color: #b45309; padding-top: 2px; }
@media (min-width: 900px) { .hw-forum-faqliste--spalten { columns: 2; column-gap: 32px; } .hw-forum-faqliste--spalten li { break-inside: avoid; } }
.hw-forum-mithelfen { padding: 20px; margin-bottom: 14px; }
.hw-forum-mithelfen h2 { font-size: 1.15rem; }
.hw-forum-selbsthilfe { padding: 18px; }

.hw-forum-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; color: #fff; background: #475569; font-size: 1.05rem; }
.hw-forum-ich .hw-forum-avatar { width: 30px; height: 30px; font-size: .9rem; }
.hw-forum-avatar--gross { width: 72px; height: 72px; font-size: 1.8rem; margin-bottom: 8px; }
.hw-forum-avatar--0 { background: #2563eb; } .hw-forum-avatar--1 { background: #0f766e; } .hw-forum-avatar--2 { background: #7c3aed; }
.hw-forum-avatar--3 { background: #b45309; } .hw-forum-avatar--4 { background: #be185d; } .hw-forum-avatar--5 { background: #4d7c0f; }
.hw-forum-avatar--hanware { background: var(--hw-navy) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hw-navy); font-family: Georgia, serif; }
.hw-forum-rolle { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; vertical-align: 1px; background: var(--hw-bg-3); color: var(--hw-text-2); white-space: nowrap; }
.hw-forum-rolle--hanware { background: var(--hw-navy); color: #fff; }
.hw-forum-rolle--experte { background: rgba(124, 58, 237, .14); color: #6d28d9; }
.hw-forum-rolle--erfahren { background: rgba(245, 158, 11, .18); color: #92580a; }
.hw-forum-rolle--neu { background: rgba(22, 163, 74, .12); color: #166534; }
[data-thema="dunkel"] .hw-forum-rolle--experte { color: #c4b5fd; }
[data-thema="dunkel"] .hw-forum-rolle--erfahren { color: #fcd34d; }
[data-thema="dunkel"] .hw-forum-rolle--neu { color: #86efac; }
[data-thema="dunkel"] .hw-forum-rolle--hanware { background: #2b4bb3; }

.hw-forum-thema__kopf h1 { font-size: 1.75rem; margin: 8px 0 6px; }
.hw-forum-thema__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--hw-text-2); font-size: .92rem; margin: 0 0 6px; }
.hw-forum-beitrag { position: relative; margin: 14px 0; padding: 18px 20px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); scroll-margin-top: calc(var(--hw-kopf) + 20px); }
.hw-forum-beitrag--hanware { border-color: rgba(37, 99, 235, .45); border-left: 4px solid var(--hw-navy); box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, .035); }
.hw-forum-beitrag--beste { border-color: rgba(22, 163, 74, .55); }
.hw-forum-beitrag--verborgen { opacity: .75; border-style: dashed; }
.hw-forum-beitrag:target { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
.hw-forum-beitrag__kopf { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hw-forum-beitrag__kopf > div { flex: 1 1 200px; }
.hw-forum-beitrag__zeit { font-size: .85rem; color: var(--hw-text-3); }
.hw-forum-beitrag__zeit a { color: inherit; }
.hw-forum-offiziell { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--hw-navy); color: #fff; }
.hw-forum-offiziell--beste { background: #15803d; }
.hw-forum-text { overflow-wrap: anywhere; }
.hw-forum-text p { margin: 0 0 .8em; }
.hw-forum-text ul, .hw-forum-text ol { margin: 0 0 .8em; padding-left: 1.4em; }
.hw-forum-text code { padding: 1px 5px; border-radius: 5px; background: var(--hw-bg-3); font-size: .9em; }
.hw-forum-code { margin: 0 0 .9em; padding: 12px 14px; border-radius: var(--hw-radius-klein); background: #0f172a; color: #e2e8f0; overflow-x: auto; font-size: .88rem; line-height: 1.5; white-space: pre-wrap; }
.hw-forum-code code { background: none; padding: 0; color: inherit; }
.hw-forum-bilder { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.hw-forum-bilder img { display: block; max-width: 220px; max-height: 160px; object-fit: cover; border-radius: var(--hw-radius-klein); border: 1px solid var(--hw-linie); }
.hw-forum-bearbeitet { margin: 6px 0 0; font-size: .8rem; color: var(--hw-text-3); font-style: italic; }
.hw-forum-beitrag__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hw-linie-2); }
.hw-forum-mod { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.hw-forum-statushinweis { margin: 0 0 10px; padding: 6px 12px; border-radius: var(--hw-radius-klein); background: rgba(245, 158, 11, .14); color: #92580a; font-size: .88rem; }
.hw-forum-statushinweis--rot { background: rgba(220, 38, 38, .1); color: #b91c1c; }
[data-thema="dunkel"] .hw-forum-statushinweis { color: #fcd34d; }
.hw-forum-beste { margin: 18px 0; padding: 4px 14px 2px; border-radius: var(--hw-radius); background: rgba(22, 163, 74, .08); border: 1px solid rgba(22, 163, 74, .35); }
.hw-forum-beste__titel { margin: 10px 0 0; font-weight: 700; color: #166534; }
.hw-forum-beste__titel a { font-weight: 500; font-size: .88rem; margin-left: 8px; }
[data-thema="dunkel"] .hw-forum-beste__titel { color: #86efac; }
.hw-forum-antworten { margin-top: 26px; }
.hw-forum-format { display: block; margin-top: 6px; color: var(--hw-text-3); }
.hw-forum-format code { padding: 0 4px; border-radius: 4px; background: var(--hw-bg-3); }
.hw-forum-datenhinweis { margin: 4px 0 14px; font-size: .88rem; color: var(--hw-text-2); }
.hw-forum-bildfehler { color: var(--hw-rot); }
.hw-forum-mitmachen { padding: 18px; }
.hw-forum-modkarte form { margin: 0 0 6px; }
.hw-forum-modform { margin-top: 10px !important; display: grid; gap: 6px; }
.hw-forum-modform label { font-size: .85rem; font-weight: 650; }
.hw-forum-modform select, .hw-forum-modform input { padding: 6px 10px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius-klein); background: var(--hw-flaeche); color: var(--hw-text); font: inherit; font-size: .9rem; }
.hw-forum-gefahr { color: var(--hw-rot) !important; }
.hw-forum-grosssymbol { display: block; font-size: 3rem; color: var(--hw-blau); margin-bottom: 8px; }
.hw-forum-zitat { margin: 0 0 10px; padding: 8px 14px; border-left: 3px solid var(--hw-linie); color: var(--hw-text-2); font-size: .92rem; }
.hw-forum-nowrap { white-space: nowrap; }
.hw-forum-regelliste li { margin-bottom: 8px; }
.hw-forum-statistik { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 10px 0 14px; }
.hw-forum-statistik > div { padding: 14px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); display: flex; flex-direction: column; }
.hw-forum-statistik strong { font-size: 1.5rem; color: var(--hw-navy); }
[data-thema="dunkel"] .hw-forum-statistik strong { color: #bcd2ff; }
.hw-forum-statistik span { font-size: .85rem; color: var(--hw-text-2); }
.hw-forum-statistik .ist-offen strong { color: #b45309; }
.hw-forum-startthemen { padding: 18px; margin: 16px 0; }
.hw-forum-startthemen h2 { font-size: 1.1rem; }

.hw-selbsthilfe-kacheln { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hw-selbsthilfe-kachel { padding: 20px; }
.hw-selbsthilfe-kachel h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.hw-selbsthilfe-kachel h2 > i { color: var(--hw-blau); }
.hw-selbsthilfe-kachel ul { list-style: none; margin: 0; padding: 0; }
.hw-selbsthilfe-kachel li { padding: 6px 0; border-top: 1px solid var(--hw-linie-2); }
.hw-selbsthilfe-kachel li i { margin-right: 6px; }
.hw-selbsthilfe-gruppe { font-size: 1.05rem; margin: 6px 0 10px; }
.hw-selbsthilfe-treffer { list-style: none; margin: 0 0 18px; padding: 0; }
.hw-selbsthilfe-treffer li { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--hw-linie-2); }
.hw-selbsthilfe-treffer li > a { font-weight: 700; }
.hw-selbsthilfe-weg h2 { font-size: 1.35rem; text-align: center; }
.hw-selbsthilfe-weg__schritte { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .hw-selbsthilfe-weg__schritte { grid-template-columns: repeat(3, 1fr); } }
.hw-selbsthilfe-weg__schritte li { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); }
.hw-selbsthilfe-weg__schritte h3 { font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hw-selbsthilfe-weg__schritte p { color: var(--hw-text-2); font-size: .94rem; margin: 0 0 6px; }
.hw-selbsthilfe-weg__nr { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--hw-navy); color: #fff; }
.hw-selbsthilfe-weg__vertrag { text-align: center; margin: 0; padding: 12px 16px; border-radius: var(--hw-radius); background: rgba(245, 158, 11, .12); }
.hw-selbsthilfe-weg__vertrag > i { color: var(--hw-akzent); }

/* FIX 2026-10-15 00:06 HanwareWebSeite (Forum-Test: Knopf "geist" ist fuer dunklen Grund - auf hellem Grund kaum lesbar): dezenter Knopf fuer helle Flaechen */
.hw-btn--leise { background: transparent; color: var(--hw-text-2); border-color: var(--hw-linie); }
.hw-btn--leise:hover { background: var(--hw-bg-2); color: var(--hw-text); }

/* FIX 2026-10-15 22:50 HanwareWebSeite (Auftrag Admin Portal: Branchenpaket Getraenkegrosshandel): Abschnitt Branchenpakete unter den Editionen */
.hw-cloud-branchen { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--hw-linie, #e2e8f0); }
.hw-cloud-branchen__kopf { margin-bottom: 1.25rem; }
.hw-cloud-branchen__kopf h2 { font-size: 1.45rem; margin: 0 0 .3rem; }
.hw-cloud-branchen__kopf p { color: var(--hw-text-2); margin: 0; }

/* FIX 2026-10-16 05:44 HanwareWebSeite (Auftrag Hanware Business 16.10.2026): Paketbestellung /paketbestellung fuer Hanware Business (Desktop) */
.hw-pb { padding-top: 32px; }
.hw-pb__raster { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .hw-pb__raster { grid-template-columns: minmax(0, 1fr) 360px; } }
.hw-pb__haupt { display: grid; gap: 24px; min-width: 0; }
.hw-pb__block { background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: 16px; padding: 22px 22px 24px; box-shadow: var(--hw-schatten-1); display: grid; gap: 14px; }
.hw-pb__block.hat-fehler { border-color: var(--hw-rot); }
.hw-pb__block h2 { font-size: 1.2rem; margin: 0; display: flex; gap: 10px; align-items: center; }
.hw-pb__block h2 .bi { color: var(--hw-blau); }
.hw-pb__unter { margin-top: 10px !important; }
.hw-pb__hinweis { margin: 0; color: var(--hw-text-2); font-size: .95rem; }
.hw-pb-schmal { max-width: 320px; }
.hw-pb-ort { grid-template-columns: 1fr; }
@media (min-width: 640px) { .hw-pb-ort { grid-template-columns: 140px 1fr 160px; } }
.hw-pb-aktuell__werte { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.hw-pb-aktuell__werte dt { font-size: .82rem; color: var(--hw-text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.hw-pb-aktuell__werte dd { margin: 2px 0 0; font-weight: 700; }
.hw-pb-aktuell__module { grid-column: 1 / -1; }
.hw-pb-aktuell__module dd { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 600; }
/* FIX 2026-10-18 18:09 HanwareWebSeite (Geraetenutzung auf der Bestellseite): Liste der genutzten Geraete, Hinweis bei Mehrnutzung */
.hw-pb-aktuell__werte small { font-weight: 500; }
.hw-pb-geraete { margin-top: 14px; border-top: 1px solid var(--hw-linie-2); padding-top: 10px; }
.hw-pb-geraete summary { cursor: pointer; font-weight: 600; color: var(--hw-link); }
.hw-pb-geraete summary i { margin-right: 4px; }
.hw-pb-geraete .hw-tabelle-wrap { margin-top: 10px; }
.hw-pb-geraete__tabelle td, .hw-pb-geraete__tabelle th { font-size: .9rem; }
.hw-pb-geraete__tabelle tr.ist-ruhend td { color: var(--hw-text-3); }
.hw-pb-geraete__fehlt { font-weight: 500; }
.hw-pb-geraete__mehr { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 14%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); font-size: .92rem; }

.hw-pb-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--hw-bg-2); border: 1px solid var(--hw-linie); font-size: .86rem; }
.hw-pb-pakete { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hw-pb-pakete { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .hw-pb-pakete { grid-template-columns: repeat(3, 1fr); } }
.hw-pb-paket { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border: 2px solid var(--hw-linie); border-radius: 14px; cursor: pointer; background: var(--hw-flaeche); transition: border-color .15s, box-shadow .15s; }
.hw-pb-paket:hover { border-color: var(--hw-blau); }
.hw-pb-paket input { position: absolute; opacity: 0; pointer-events: none; }
.hw-pb-paket:has(input:focus-visible) { outline: 3px solid var(--hw-blau); outline-offset: 2px; }
.hw-pb-paket.ist-gewaehlt, .hw-pb-paket:has(input:checked) { border-color: var(--hw-blau); box-shadow: var(--hw-schatten-2); }
.hw-pb-paket__kopf { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.hw-pb-paket__name { font-weight: 800; font-size: 1.12rem; }
.hw-pb-paket__text { color: var(--hw-text-2); font-size: .92rem; }
.hw-pb-paket__preis strong { font-size: 1.35rem; }
.hw-pb-paket__preis small { color: var(--hw-text-3); margin-left: 4px; }
.hw-pb-paket__preis span { color: var(--hw-text-2); font-weight: 600; }
.hw-pb-paket__liste { margin: 4px 0 0; font-size: .9rem; }
.hw-pb-paket__wahl { display: none; color: var(--hw-blau); font-weight: 700; font-size: .9rem; margin-top: auto; }
.hw-pb-paket:has(input:checked) .hw-pb-paket__wahl, .hw-pb-paket.ist-gewaehlt .hw-pb-paket__wahl { display: block; }
.hw-pb-arbeitsplaetze { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.hw-pb-arbeitsplaetze .hw-pb__hinweis { flex: 1 1 260px; }
.hw-pb-bereich { font-size: .95rem; margin: 8px 0 0; color: var(--hw-text-2); text-transform: uppercase; letter-spacing: .04em; }
.hw-pb-module { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .hw-pb-module { grid-template-columns: repeat(2, 1fr); } }
.hw-pb-modul { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--hw-linie); border-radius: 12px; cursor: pointer; background: var(--hw-flaeche); transition: border-color .15s, background .15s; }
.hw-pb-modul:hover { border-color: var(--hw-blau); }
.hw-pb-modul input { width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--hw-blau); }
.hw-pb-modul:has(input:checked) { border-color: var(--hw-blau); background: var(--hw-bg-2); }
.hw-pb-modul.ist-aus { cursor: default; opacity: .6; }
.hw-pb-modul.ist-aus:hover { border-color: var(--hw-linie); }
.hw-pb-modul__text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.hw-pb-modul__name { font-weight: 700; }
.hw-pb-modul__info { color: var(--hw-text-2); font-size: .86rem; }
.hw-pb-modul__preis { white-space: nowrap; font-size: .92rem; }
.hw-pb-modul__preis span { color: var(--hw-text-3); font-size: .84rem; }
.hw-pb__seite { min-width: 0; }
@media (min-width: 1024px) { .hw-pb__seite { position: sticky; top: 96px; } }
.hw-pb-korb { background: var(--hw-flaeche); border: 2px solid var(--hw-blau); border-radius: 16px; padding: 22px; box-shadow: var(--hw-schatten-2); display: grid; gap: 14px; }
.hw-pb-korb h2 { font-size: 1.2rem; margin: 0; display: flex; gap: 10px; align-items: center; }
.hw-pb-korb__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hw-pb-korb__liste li { display: flex; justify-content: space-between; gap: 12px; font-size: .94rem; }
.hw-pb-korb__text { display: grid; }
.hw-pb-korb__text small { color: var(--hw-text-3); }
.hw-pb-korb__betrag { white-space: nowrap; font-weight: 700; }
.hw-pb-korb__summen { margin: 0; border-top: 1px solid var(--hw-linie); padding-top: 10px; display: grid; gap: 4px; }
.hw-pb-korb__summen div { display: flex; justify-content: space-between; gap: 12px; }
.hw-pb-korb__summen dt { color: var(--hw-text-2); }
.hw-pb-korb__summen dd { margin: 0; font-weight: 600; }
.hw-pb-korb__gesamt { font-size: 1.15rem; border-top: 1px solid var(--hw-linie); padding-top: 6px; margin-top: 4px; }
.hw-pb-korb__gesamt dt, .hw-pb-korb__gesamt dd { color: var(--hw-text); font-weight: 800; }
.hw-pb-korb__support { margin: 0; font-size: .92rem; color: var(--hw-text-2); }
.hw-pb-korb__status { margin: 0; font-size: .9rem; color: var(--hw-text-3); min-height: 1.2em; }
.hw-pb-korb__status.ist-fehler { color: var(--hw-rot); font-weight: 600; }
.hw-pb-korb__abschluss { display: grid; gap: 10px; border-top: 1px solid var(--hw-linie); padding-top: 14px; }
.hw-pb-korb__abschluss .hw-wahl.hat-fehler span { color: var(--hw-rot); }
.hw-pb-korb__knopf { width: 100%; justify-content: center; }
.hw-pb-korb__knopf:disabled { opacity: .55; cursor: not-allowed; }
.hw-pb-korb__klein { margin: 0; font-size: .84rem; color: var(--hw-text-3); }
.hw-pb-hinweis { padding: clamp(40px, 7vw, 90px) 0; }
.hw-pb-hinweis__karte { background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: 18px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--hw-schatten-2); text-align: center; display: grid; gap: 12px; justify-items: center; }
.hw-pb-hinweis__karte h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; }
.hw-pb-hinweis__karte p { margin: 0; max-width: 60ch; color: var(--hw-text-2); }
.hw-pb-hinweis__symbol { font-size: 3rem; color: var(--hw-blau); }
.hw-pb-hinweis__fuss { font-size: .9rem; }
.hw-pb-danke__symbol { color: var(--hw-gruen); }
.hw-pb-danke__nummer { font-size: 1.15rem; color: var(--hw-text) !important; }
.hw-pb-danke h2 { font-size: 1.15rem; margin: 10px 0 0; }
.hw-pb-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; max-width: 560px; width: 100%; }
.hw-pb-schritte li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--hw-linie); border-radius: 12px; background: var(--hw-bg-2); }
.hw-pb-schritte .bi { color: var(--hw-blau); font-size: 1.2rem; }
/* FIX 2026-10-16 07:05 HanwareWebSeite (Paketbestellung): Suchfeld und Gruppen der Zusatzpakete */
.hw-pb-suche { max-width: 420px; }
.hw-pb-gruppe { display: grid; gap: 10px; }
.hw-pb-gruppe[hidden], .hw-pb-modul[hidden] { display: none; }
/* FIX 2026-10-16 10:50 HanwareWebSeite (SCHNITTSTELLE-Paketbestellung-Website.md Abschnitt 5, Entscheidung des Anwenders 16.10.2026) */
.hw-pb-testhinweis { margin: 0; font-size: .9rem; }
.hw-pb-testhinweis p { margin: 0 0 .25em; }

/* FIX 2026-10-17 07:26 HanwareWebSeite (Auftrag HANWARE TEST 17.10.2026): Abschnitt Hanware B2C Shop auf /Produkt/HanwareBestellsystem - Ablaufgrafik */
.hw-b2c-vorteile { margin-bottom: 2.5rem; }
.hw-b2c-titel { text-align: center; font-size: 1.3rem; margin: 0 0 1.2rem; }
.hw-b2c-ablauf { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 760px) { .hw-b2c-ablauf { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hw-b2c-ablauf { grid-template-columns: repeat(4, 1fr); gap: 34px; } }
.hw-b2c-ablauf li { position: relative; background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: 16px; padding: 22px 20px 20px; box-shadow: var(--hw-schatten-1); text-align: center; display: grid; justify-items: center; gap: 6px; }
.hw-b2c-ablauf__symbol { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--hw-blau); color: #fff; font-size: 1.7rem; box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.hw-b2c-ablauf__nr { position: absolute; top: 12px; left: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--hw-bg-2); border: 1px solid var(--hw-linie); color: var(--hw-text-2); font-weight: 800; font-size: .85rem; }
.hw-b2c-ablauf h4 { margin: 6px 0 0; font-size: 1.08rem; }
.hw-b2c-ablauf p { margin: 0; color: var(--hw-text-2); font-size: .95rem; }
@media (min-width: 1100px) {
  .hw-b2c-ablauf li:not(:last-child)::after { content: "\F138"; font-family: bootstrap-icons; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); color: var(--hw-blau); font-size: 1.4rem; }
}
.hw-b2c-ablauf li:last-child .hw-b2c-ablauf__symbol { background: var(--hw-gruen); box-shadow: 0 6px 16px rgba(22, 163, 74, .3); }
.hw-b2c-nutzen h3 { font-size: 1.2rem; margin-top: 0; }

/* FIX 2026-10-17 07:31 HanwareWebSeite (Auftrag HANWARE TEST 17.10.2026): Shopansicht der Belegerfassung auf /Produkt/HanwareBusinessWeb - gezeichnete Ansicht */
.hw-shopansicht { align-items: center; }
.hw-shopansicht__b2c { margin-top: 1.2rem; }
.hw-shopansicht__b2c p { margin: 0 0 .4em; }
.hw-shopansicht__bild { margin: 0; display: grid; gap: 10px; }
.hw-shopansicht__bild figcaption { text-align: center; color: var(--hw-text-2); font-size: .92rem; }
.hw-shopansicht__fenster { background: var(--hw-flaeche); border: 1px solid var(--hw-linie); border-radius: 18px; box-shadow: var(--hw-schatten-2); overflow: hidden; }
.hw-shopansicht__kopf { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--hw-linie); background: var(--hw-bg-2); }
.hw-shopansicht__kopf .bi { color: var(--hw-blau); }
.hw-shopansicht__reiter { margin-left: auto; font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: var(--hw-blau); color: #fff; }
.hw-shopansicht__raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
.hw-shopansicht__artikel { display: grid; justify-items: center; gap: 8px; padding: 14px 10px; border: 1px solid var(--hw-linie); border-radius: 14px; text-align: center; font-size: .92rem; }
.hw-shopansicht__foto { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-size: 1.8rem; color: #fff; }
.hw-shopansicht__foto--blau { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.hw-shopansicht__foto--rot { background: linear-gradient(135deg, #f87171, #b91c1c); }
.hw-shopansicht__foto--orange { background: linear-gradient(135deg, #fdba74, #ea580c); }
.hw-shopansicht__foto--gruen { background: linear-gradient(135deg, #bef264, #65a30d); }
.hw-shopansicht__menge { display: inline-flex; align-items: center; gap: 10px; padding: 3px 8px; border-radius: 999px; background: var(--hw-bg-2); border: 1px solid var(--hw-linie); font-weight: 700; }
.hw-shopansicht__menge .bi { color: var(--hw-blau); }
.hw-shopansicht__menge--leer { background: var(--hw-blau); border-color: var(--hw-blau); }
.hw-shopansicht__menge--leer .bi { color: #fff; }
.hw-shopansicht__fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--hw-linie); font-size: .9rem; color: var(--hw-text-2); }
.hw-shopansicht__knopf { padding: 7px 14px; border-radius: 10px; background: var(--hw-gruen); color: #fff; font-weight: 700; }
/* FIX 2026-10-19 10:50 HanwareWebSeite (Anwender 19.10.2026: Zusatzpakete als Kacheln auf den Preisseiten, schoen und professionell wie in Hanware Web ERP;
   neue Seite "Hanware Cloud ERP kaufen"): Bereichsleiste, Kacheln mit Symbol, Preis, Preis je weiterem Benutzer, Funktionen und Anfrage */
.hw-zusatz-bereiche { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 8px; }
.hw-zusatz-bereiche a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hw-linie); background: var(--hw-flaeche); color: var(--hw-text-2); font-weight: 600; font-size: .9rem; text-decoration: none; }
.hw-zusatz-bereiche a:hover { border-color: var(--hw-blau); color: var(--hw-link); }
.hw-zusatz-bereiche a span { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--hw-bg-3); font-size: .78rem; text-align: center; }
.hw-zusatz-bereich { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; font-size: 1.15rem; scroll-margin-top: calc(var(--hw-kopf) + 16px); }
.hw-zusatz-bereich .bi { color: var(--hw-blau); }
.hw-zusatzkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.hw-zusatzkachel { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 14px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); box-shadow: var(--hw-schatten-1); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; overflow: hidden; }
.hw-zusatzkachel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--hw-blau), var(--hw-blau-hell)); opacity: .85; }
.hw-zusatzkachel:hover { transform: translateY(-2px); box-shadow: var(--hw-schatten-2); border-color: color-mix(in srgb, var(--hw-blau) 45%, var(--hw-linie)); }
.hw-zusatzkachel__kopf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.hw-zusatzkachel__symbol { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(37, 99, 235, .1); color: var(--hw-blau); font-size: 1.1rem; }
.hw-zusatzkachel h4 { margin: 0; font-size: 1rem; line-height: 1.3; align-self: center; }
.hw-zusatzkachel__preis { margin: 4px 0 0; font-size: 1.45rem; font-weight: 800; color: var(--hw-text); letter-spacing: -.01em; }
.hw-zusatzkachel__preis small { font-size: .78rem; font-weight: 600; color: var(--hw-text-3); letter-spacing: 0; }
.hw-zusatzkachel__preis--anfrage { font-size: 1.1rem; color: var(--hw-link); }
.hw-zusatzkachel__klein { margin: 0; font-size: .84rem; color: var(--hw-text-3); }
.hw-zusatzkachel__fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hw-linie-2); font-size: .88rem; }
.hw-zusatzkachel__fuss .hw-modul-link { font-weight: 600; }
.hw-zusatzkachel__anfrage { margin-left: auto; font-weight: 700; color: var(--hw-link); text-decoration: none; white-space: nowrap; }
.hw-zusatzkachel__anfrage:hover { text-decoration: underline; }
[data-thema="dunkel"] .hw-zusatzkachel__symbol, [data-thema="dunkel"] .hw-kaufvorteil .bi { background: rgba(138, 180, 255, .14); color: var(--hw-link); }
[data-thema="dunkel"] .hw-zusatz-bereich .bi { color: var(--hw-link); }
@media print { .hw-zusatzkachel { break-inside: avoid; box-shadow: none; } .hw-zusatz-bereiche { display: none; } }
/* Hanware Cloud ERP kaufen: Vorteile, Zusammenspiel mit Hanware Business */
.hw-kaufvorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .hw-kaufvorteile { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .hw-kaufvorteile { grid-template-columns: 1fr; } }
.hw-schritte--vier { grid-template-columns: 1fr; }
@media (min-width: 800px) { .hw-schritte--vier { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hw-schritte--vier { grid-template-columns: repeat(4, 1fr); } }
.hw-kaufvorteil { padding: 22px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); box-shadow: var(--hw-schatten-1); }
.hw-kaufvorteil .bi { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(37, 99, 235, .1); color: var(--hw-blau); font-size: 1.3rem; margin-bottom: 10px; }
.hw-kaufvorteil h3 { font-size: 1.05rem; margin: 0 0 6px; }
.hw-kaufvorteil p { margin: 0; color: var(--hw-text-2); font-size: .95rem; }
.hw-zusammenspiel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 10px 0 6px; }
.hw-zusammenspiel__seite { padding: 20px; border-radius: var(--hw-radius); border: 1px solid var(--hw-linie); background: var(--hw-flaeche); }
.hw-zusammenspiel__seite h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 8px; }
.hw-zusammenspiel__seite ul { margin: 0; padding-left: 18px; color: var(--hw-text-2); font-size: .94rem; }
.hw-zusammenspiel__mitte { display: grid; justify-items: center; gap: 6px; text-align: center; font-weight: 700; color: var(--hw-text-2); font-size: .9rem; }
.hw-zusammenspiel__mitte .bi { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--hw-navy); color: #fff; font-size: 1.6rem; box-shadow: var(--hw-schatten-2); }
@media (max-width: 760px) { .hw-zusammenspiel { grid-template-columns: 1fr; } .hw-zusammenspiel__mitte .bi { transform: rotate(90deg); } }
/* FIX 2026-10-19 11:13 HanwareWebSeite (Anwender 19.10.2026: "Kostenpflichtig bestellen" irrefuehrend bei 30 Tagen gratis): Startknopf mit Folgehinweis, Kasten "So funktioniert der Test" */
.hw-cloud-start { flex-direction: row; gap: 10px; text-align: left; line-height: 1.2; }
.hw-cloud-start span { display: grid; gap: 2px; }
.hw-cloud-start small { font-size: .74rem; font-weight: 600; opacity: .85; }
.hw-cloud-testinfo { margin: 12px 0 6px; padding: 12px 14px; border-radius: var(--hw-radius-klein); border: 1px solid rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .08); font-size: .84rem; color: var(--hw-text-2); }
.hw-cloud-testinfo p { margin: 0 0 6px; color: var(--hw-text); }
.hw-cloud-testinfo p .bi { color: var(--hw-gruen); }
.hw-cloud-testinfo ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
/* FIX 2026-10-19 11:27 HanwareWebSeite (Auftrag Hanware Business 19.10.2026): Hinweis "Installation und Haftung" vor Download und Testlizenz */
.hw-haftung { margin: 14px 0; padding: 14px 16px; border-radius: var(--hw-radius-klein); border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); font-size: .86rem; color: var(--hw-text-2); text-align: left; }
.hw-haftung p { margin: 0 0 8px; }
.hw-haftung__titel { font-weight: 700; color: var(--hw-text); }
.hw-haftung__titel .bi { color: var(--hw-akzent); }
.hw-haftung__ok { margin-top: 4px; font-weight: 600; color: var(--hw-text); }
[data-haftung-ziel].ist-gesperrt { opacity: .55; cursor: not-allowed; box-shadow: none; }
.hw-haftung--erinnern .hw-haftung { animation: hw-haftung-blink .4s ease 3; border-color: var(--hw-akzent); }
@keyframes hw-haftung-blink { 50% { background: rgba(245, 158, 11, .22); } }
@media (prefers-reduced-motion: reduce) { .hw-haftung--erinnern .hw-haftung { animation: none; } }
/* FIX 2026-10-19 15:40 HanwareWebSeite (Auftrag Hanware Business 19.10.2026): Testversion Hanware Business (Desktop) zum Herunterladen */
.hw-testversion { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .hw-testversion { grid-template-columns: 1fr; } }
.hw-testversion__text h2 { margin: 6px 0 10px; }
.hw-testschritte { list-style: none; counter-reset: ts; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.hw-testschritte li { counter-increment: ts; position: relative; padding: 12px 14px 12px 58px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); display: grid; gap: 2px; }
.hw-testschritte li::before { content: counter(ts); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--hw-blau); color: #fff; font-weight: 800; }
.hw-testschritte span { color: var(--hw-text-2); font-size: .92rem; }
.hw-testversion__download { padding: 22px; border: 1px solid var(--hw-linie); border-radius: var(--hw-radius); background: var(--hw-flaeche); box-shadow: var(--hw-schatten-2); }
.hw-testversion__download h3 { display: flex; gap: 8px; align-items: center; font-size: 1.05rem; margin: 0 0 10px; }
.hw-testversion__download .hw-haken { font-size: .9rem; gap: 6px; }
.hw-testversion__knopf { text-align: center; line-height: 1.3; white-space: normal; }
.hw-testversion__fuss { margin: 10px 0 0; text-align: center; }
/* FIX 2026-10-27 00:48 HanwareWebSeite (Testversion nur per Link aus der E-Mail): Formular im Testversion-Kasten */
.hw-testversion__form { display: grid; gap: 12px; margin-top: 4px; }
.hw-testversion__form .hw-feld { margin: 0; }
.hw-testversion__form .hw-feld input { width: 100%; }
.hw-testversion__optional { border: 1px solid var(--hw-linie); border-radius: 10px; padding: 8px 12px; }
.hw-testversion__optional summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--hw-text-2, var(--hw-text)); }
.hw-testversion__optional[open] summary { margin-bottom: 10px; }
.hw-testversion__optional .hw-feld + .hw-feld, .hw-testversion__optional .hw-form__reihe { margin-top: 10px; }
/* FIX 2026-10-20 00:42 HanwareWebSeite (Auftrag Admin Portal 20.10.2026): Kaufpakete Web ERP - Grundmodule und Paketmodule getrennt */
.hw-kauf-liste__titel { margin: 12px 0 6px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hw-text-3); }
.hw-kauf-liste--grund { opacity: .9; }
/* FIX 2026-10-20 01:38 HanwareWebSeite (Anwender-Vorgabe 20.10.2026: Seite Hanware Gastro komplett neu): Neu-Band, Ablaufgrafik, Handy-Galerie, Verbund-Grafik, Preis */
.hw-badge--leise { background: var(--hw-bg-2); color: var(--hw-text-2); border: 1px solid var(--hw-linie); }
.hw-gastro-hero .hw-bild a { display: block; cursor: zoom-in; }
.hw-gastro-neu { display: grid; gap: 16px; }
.hw-gastro-neu__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hw-gastro-neu__kopf h2 { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.55rem); }
.hw-gastro-neu .hw-badge { background: rgba(245, 158, 11, .18); color: #92580a; }
.hw-gastro-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hw-gastro-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--hw-flaeche); border: 1px solid var(--hw-linie); font-size: .9rem; font-weight: 600; color: var(--hw-text); box-shadow: var(--hw-schatten-1); }
.hw-gastro-chips .bi { color: var(--hw-blau); }
.hw-gastro-ablauf { list-style: none; counter-reset: gs; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; position: relative; }
.hw-gastro-ablauf::before { content: ""; position: absolute; left: 4%; right: 4%; top: 30px; height: 3px; background: linear-gradient(90deg, var(--hw-blau), var(--hw-gruen)); border-radius: 3px; opacity: .45; }
.hw-gastro-ablauf li { counter-increment: gs; position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 6px; }
.hw-gastro-ablauf__symbol { position: relative; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--hw-flaeche); border: 3px solid var(--hw-blau); color: var(--hw-blau); font-size: 1.45rem; box-shadow: var(--hw-schatten-2); }
.hw-gastro-ablauf__symbol::after { content: counter(gs); position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--hw-akzent); color: #1b2333; font-size: .75rem; font-weight: 800; display: grid; place-items: center; }
.hw-gastro-ablauf li:last-child .hw-gastro-ablauf__symbol { border-color: var(--hw-gruen); color: var(--hw-gruen); }
.hw-gastro-ablauf strong { font-size: .98rem; }
.hw-gastro-ablauf span:not(.hw-gastro-ablauf__symbol) { font-size: .84rem; color: var(--hw-text-2); }
@media (max-width: 980px) {
  .hw-gastro-ablauf { grid-template-columns: 1fr; gap: 14px; }
  .hw-gastro-ablauf::before { left: 29px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; background: linear-gradient(180deg, var(--hw-blau), var(--hw-gruen)); }
  .hw-gastro-ablauf li { grid-template-columns: 60px 1fr; justify-items: start; text-align: left; column-gap: 14px; }
  .hw-gastro-ablauf__symbol { grid-row: span 2; }
}
.hw-gastro-handys { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: clamp(16px, 4vw, 48px); }
.hw-gastro-handy { margin: 0; text-align: center; }
.hw-gastro-handy a { display: block; padding: 10px; border-radius: 34px; background: #0f172a; box-shadow: var(--hw-schatten-3); cursor: zoom-in; }
.hw-gastro-handy img { display: block; width: 100%; height: auto; border-radius: 24px; }
.hw-gastro-handy figcaption { margin-top: 12px; font-size: .9rem; color: var(--hw-text-2); font-weight: 600; }
@media (max-width: 720px) { .hw-gastro-handys { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .hw-gastro-handy a { padding: 5px; border-radius: 18px; } .hw-gastro-handy img { border-radius: 13px; } .hw-gastro-handy figcaption { font-size: .78rem; } }
.hw-gastro-funktionen .hw-karte h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.hw-gastro-funktionen .hw-karte h3 .bi { color: var(--hw-blau); }
.hw-gastro-funktionen .hw-haken { font-size: .92rem; gap: 6px; }
.hw-gastro-verbund { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; max-width: 980px; margin: 0 auto; }
.hw-gastro-verbund__kachel { position: relative; padding: 20px; border-radius: var(--hw-radius); background: var(--hw-flaeche); border: 1px solid var(--hw-linie); box-shadow: var(--hw-schatten-1); text-align: center; display: grid; justify-items: center; gap: 6px; }
.hw-gastro-verbund__kachel > .bi { font-size: 1.6rem; color: var(--hw-blau); }
.hw-gastro-verbund__kachel h3 { margin: 0; font-size: 1.05rem; }
.hw-gastro-verbund__kachel p { margin: 0; font-size: .9rem; color: var(--hw-text-2); }
.hw-gastro-verbund__kachel--gastro { border: 2px solid var(--hw-blau); }
.hw-gastro-verbund__kachel--cash { border: 2px solid var(--hw-gruen); }
.hw-gastro-verbund__kachel--cash > .bi { color: var(--hw-gruen); }
.hw-gastro-verbund__pfeil { display: grid; justify-items: center; gap: 4px; color: var(--hw-text-3); font-size: .8rem; font-weight: 700; }
.hw-gastro-verbund__pfeil .bi { font-size: 1.8rem; color: var(--hw-blau); }
.hw-gastro-verbund__unten { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; padding-top: 22px; }
.hw-gastro-verbund__unten::before { content: "eine gemeinsame Datenbank"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hw-text-3); white-space: nowrap; }
@media (max-width: 720px) { .hw-gastro-verbund { grid-template-columns: 1fr; } .hw-gastro-verbund__pfeil .bi { transform: rotate(90deg); } .hw-gastro-verbund__unten { grid-template-columns: 1fr; } }
.hw-gastro-preis { align-self: stretch; }
[data-thema="dunkel"] .hw-gastro-neu .hw-badge { color: #fbbf24; }
[data-thema="dunkel"] .hw-gastro-chips .bi, [data-thema="dunkel"] .hw-gastro-funktionen .hw-karte h3 .bi, [data-thema="dunkel"] .hw-gastro-verbund__kachel > .bi { color: var(--hw-link); }
@media print { .hw-gastro-handy a { box-shadow: none; } }
/* FIX 2026-10-20 08:18 HanwareWebSeite (Anwender-Vorgabe 20.10.2026: Seite "Hanware im Verbund"): Verbund-Grafik mit Datenbank in der Mitte, Tagesablauf, gemeinsame Daten */
.hw-link-pfeil { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--hw-link); text-decoration: none; }
.hw-link-pfeil:hover { text-decoration: underline; }
.hw-verbund { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; gap: 34px 46px; max-width: 1040px; margin: 0 auto; padding: 10px 0; }
.hw-verbund__linien { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hw-verbund__linien line { stroke: var(--hw-blau); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; opacity: .75; }
.hw-verbund__linien .hw-verbund__linie-tisch { stroke: #d97706; }
.hw-verbund__tische { grid-column: 2; grid-row: 3; align-self: center; justify-self: center; position: relative; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--hw-flaeche); border: 1px solid rgba(217, 119, 6, .45); color: #92580a; font-size: .8rem; font-weight: 700; text-align: center; }
[data-thema="dunkel"] .hw-verbund__tische { color: #fbbf24; }
@media (max-width: 860px) { .hw-verbund__tische { display: none; } }
.hw-verbund__knoten, .hw-verbund__mitte { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 16px; border-radius: var(--hw-radius); background: var(--hw-flaeche); border: 1px solid var(--hw-linie); box-shadow: var(--hw-schatten-2); text-decoration: none; color: var(--hw-text); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.hw-verbund__knoten:hover { transform: translateY(-3px); box-shadow: var(--hw-schatten-3); border-color: var(--hw-blau); }
.hw-verbund__knoten > .bi { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem; color: #fff; background: var(--hw-blau); }
.hw-verbund__knoten strong { font-size: 1.02rem; }
.hw-verbund__knoten span, .hw-verbund__mitte span { font-size: .86rem; color: var(--hw-text-2); }
.hw-verbund__knoten--business { grid-column: 1; grid-row: 1; } .hw-verbund__knoten--business > .bi { background: #14296b; }
.hw-verbund__knoten--cloud { grid-column: 2; grid-row: 1; } .hw-verbund__knoten--cloud > .bi { background: #2563eb; }
.hw-verbund__knoten--shop { grid-column: 3; grid-row: 1; } .hw-verbund__knoten--shop > .bi { background: #0d9488; }
.hw-verbund__knoten--cash { grid-column: 1; grid-row: 3; } .hw-verbund__knoten--cash > .bi { background: #16a34a; }
.hw-verbund__knoten--gastro { grid-column: 3; grid-row: 3; } .hw-verbund__knoten--gastro > .bi { background: #d97706; }
.hw-verbund__mitte { grid-column: 2; grid-row: 2; background: linear-gradient(135deg, var(--hw-navy-tief), var(--hw-navy) 60%, var(--hw-navy-2)); color: #fff; border: 0; padding: 26px 18px; }
.hw-verbund__mitte > .bi { font-size: 2.2rem; color: #93b4ff; }
.hw-verbund__mitte strong { font-size: 1.15rem; }
.hw-verbund__mitte span { color: #c7d4f0; }
@media (max-width: 860px) {
  .hw-verbund { grid-template-columns: 1fr 1fr; gap: 14px; }
  .hw-verbund__linien { display: none; }
  .hw-verbund__mitte { grid-column: 1 / -1; grid-row: 1; }
  .hw-verbund__knoten--business, .hw-verbund__knoten--cloud, .hw-verbund__knoten--shop, .hw-verbund__knoten--cash, .hw-verbund__knoten--gastro { grid-column: auto; grid-row: auto; }
  .hw-verbund__knoten--gastro { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .hw-verbund { grid-template-columns: 1fr; } .hw-verbund__knoten--gastro { grid-column: auto; } }
.hw-verbund-rollen .hw-karte p strong { color: var(--hw-text); }
.hw-verbund-zeit { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(37, 99, 235, .1); color: var(--hw-link); font-weight: 700; font-size: .86rem; }
.hw-verbund-szene { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 12px 0 10px; }
.hw-verbund-handy img { max-height: 560px; width: auto; max-width: 100%; margin: 0 auto; display: block; border-radius: 26px; border: 8px solid #0f172a; box-shadow: var(--hw-schatten-3); }
.hw-verbund-handy a { display: block; cursor: zoom-in; }
.hw-verbund-doppel { display: grid; grid-template-columns: minmax(0, 210px) 1fr; gap: 18px; align-items: center; }
.hw-verbund-doppel .hw-verbund-handy img { max-height: 430px; }
@media (max-width: 560px) { .hw-verbund-doppel { grid-template-columns: 1fr; } }
.hw-verbund-gemeinsam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hw-verbund-gemeinsam > div { display: grid; gap: 6px; padding: 20px; border-radius: var(--hw-radius); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.hw-verbund-gemeinsam .bi { font-size: 1.5rem; color: #93b4ff; }
.hw-verbund-gemeinsam strong { color: #fff; font-size: 1.05rem; }
.hw-verbund-gemeinsam span { color: #c7d4f0; font-size: .92rem; }
@media (max-width: 860px) { .hw-verbund-gemeinsam { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .hw-verbund-gemeinsam { grid-template-columns: 1fr; } }
.hw-verbund-programme { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.hw-verbund-programme .hw-karte h3 { font-size: 1rem; }
.hw-verbund-programme .hw-karte p { font-size: .9rem; }
@media (max-width: 1100px) { .hw-verbund-programme { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .hw-verbund-programme { grid-template-columns: 1fr; } }
[data-thema="dunkel"] .hw-verbund-zeit { background: rgba(138, 180, 255, .14); }

/* FIX 2026-10-23 01:28 HanwareWebSeite (Auftrag HanwareShopAdmin 23.10.2026): Seite Bestellen am Tisch per Handy (/Produkt/Tischbestellung) -
   Tischaufsteller mit QR-Code, Handy mit digitaler Speisekarte, Ablauf in fuenf Schritten, Vorher/Nachher, Kuechenbon, Programme */
.hw-tisch-buehne { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3vw, 34px); min-width: 0; }
.hw-tisch-aufsteller { flex: 0 0 auto; width: clamp(120px, 15vw, 170px); padding: 14px 12px 16px; border-radius: 14px 14px 6px 6px; background: #fff; color: #0f2a4a; text-align: center; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); display: grid; gap: 8px; justify-items: center; margin-bottom: 28px; }
.hw-tisch-aufsteller__kopf { font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; }
.hw-tisch-qr { width: 100%; height: auto; display: block; border: 6px solid #fff; outline: 1px solid #dbe3ef; border-radius: 4px; }
.hw-tisch-aufsteller__text { font-size: .78rem; font-weight: 700; color: #475569; }
.hw-tisch-handy { flex: 0 1 260px; min-width: 0; padding: 10px; border-radius: 34px; background: #0f172a; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .16); }
.hw-tisch-handy__schirm { border-radius: 24px; background: #f8fafc; color: #0f172a; padding: 14px 12px 12px; display: grid; gap: 10px; font-size: .8rem; }
.hw-tisch-karte__kopf { display: flex; justify-content: space-between; align-items: center; font-size: .92rem; }
.hw-tisch-karte__sprachen { font-size: .7rem; color: #64748b; letter-spacing: .06em; }
.hw-tisch-karte__sprachen b { color: #1d4ed8; }
.hw-tisch-karte__gruppen { display: flex; gap: 6px; overflow: hidden; }
.hw-tisch-karte__gruppen span { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: #e2e8f0; font-size: .7rem; font-weight: 700; color: #334155; }
.hw-tisch-karte__gruppen .ist-aktiv { background: #1d4ed8; color: #fff; }
.hw-tisch-karte__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hw-tisch-karte__liste li { display: grid; grid-template-columns: 34px 1fr auto 22px; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; }
.hw-tisch-karte__liste b { display: block; font-size: .8rem; line-height: 1.2; }
.hw-tisch-karte__liste small { display: block; font-size: .66rem; color: #64748b; line-height: 1.2; }
.hw-tisch-karte__liste em { font-style: normal; font-weight: 700; font-size: .74rem; white-space: nowrap; }
.hw-tisch-karte__bild { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #fff; font-size: 1rem; }
.hw-tisch-karte__bild--suppe { background: linear-gradient(135deg, #f59e0b, #d97706); }
.hw-tisch-karte__bild--teller { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.hw-tisch-karte__bild--ayran { background: linear-gradient(135deg, #94a3b8, #64748b); }
.hw-tisch-karte__bild--tee { background: linear-gradient(135deg, #b45309, #78350f); }
.hw-tisch-karte__bild--baklava { background: linear-gradient(135deg, #84cc16, #4d7c0f); }
.hw-tisch-karte__plus { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1d4ed8; color: #fff; font-weight: 800; font-size: .72rem; }
.hw-tisch-karte__name { padding: 7px 9px; border-radius: 9px; background: #fff; border: 1px dashed #94a3b8; font-size: .74rem; color: #475569; }
.hw-tisch-karte__knopf { padding: 9px; border-radius: 10px; background: #16a34a; color: #fff; font-weight: 800; text-align: center; font-size: .82rem; }
.hw-tisch-ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; counter-reset: ts; }
.hw-tisch-ablauf::before { content: ""; position: absolute; left: 8%; right: 8%; top: 34px; height: 3px; background: linear-gradient(90deg, var(--hw-blau), var(--hw-gruen)); border-radius: 3px; opacity: .45; }
.hw-tisch-ablauf li { counter-increment: ts; position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 6px; }
.hw-tisch-ablauf__symbol { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--hw-flaeche); border: 3px solid var(--hw-blau); color: var(--hw-blau); font-size: 1.6rem; box-shadow: var(--hw-schatten-2); }
.hw-tisch-ablauf__symbol::after { content: counter(ts); position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--hw-akzent); color: #1b2333; font-size: .78rem; font-weight: 800; display: grid; place-items: center; }
.hw-tisch-ablauf li:last-child .hw-tisch-ablauf__symbol { border-color: var(--hw-gruen); color: var(--hw-gruen); }
.hw-tisch-ablauf strong { font-size: 1rem; }
.hw-tisch-ablauf span:not(.hw-tisch-ablauf__symbol) { font-size: .88rem; color: var(--hw-text-2); }
.hw-tisch-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hw-tisch-vergleich__spalte { padding: 18px; border-radius: var(--hw-radius); background: var(--hw-flaeche); border: 1px solid var(--hw-linie); box-shadow: var(--hw-schatten-1); }
.hw-tisch-vergleich__spalte h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 10px; }
.hw-tisch-vergleich__spalte ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: .93rem; color: var(--hw-text-2); }
.hw-tisch-vergleich__spalte--vorher { border-top: 4px solid var(--hw-rot); }
.hw-tisch-vergleich__spalte--vorher h3 .bi { color: var(--hw-rot); }
.hw-tisch-vergleich__spalte--nachher { border-top: 4px solid var(--hw-gruen); }
.hw-tisch-vergleich__spalte--nachher h3 .bi { color: var(--hw-gruen); }
.hw-tisch-bon { margin: 0; display: grid; justify-items: center; gap: 12px; }
.hw-tisch-bon__papier { width: min(280px, 100%); padding: 18px 16px 26px; background: #fffef8; color: #1f2937; font-family: Consolas, "Courier New", monospace; font-size: .9rem; box-shadow: var(--hw-schatten-3); border-radius: 4px; clip-path: polygon(0 0, 100% 0, 100% 97%, 95% 100%, 90% 97%, 85% 100%, 80% 97%, 75% 100%, 70% 97%, 65% 100%, 60% 97%, 55% 100%, 50% 97%, 45% 100%, 40% 97%, 35% 100%, 30% 97%, 25% 100%, 20% 97%, 15% 100%, 10% 97%, 5% 100%, 0 97%); }
.hw-tisch-bon__kopf { text-align: center; font-weight: 800; font-size: 1.15rem; letter-spacing: .2em; margin-bottom: 8px; }
.hw-tisch-bon__zeile { display: flex; justify-content: space-between; gap: 8px; }
.hw-tisch-bon__pos { font-size: 1rem; padding: 2px 0; }
.hw-tisch-bon__fuss { font-size: .78rem; color: #6b7280; }
.hw-tisch-bon hr { border: 0; border-top: 1px dashed #9ca3af; margin: 8px 0; }
.hw-tisch-bon figcaption { font-size: .9rem; color: var(--hw-text-2); text-align: center; max-width: 34ch; }
.hw-tisch-programme { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 14px; }
.hw-tisch-programme .hw-karte { text-decoration: none; color: inherit; }
.hw-tisch-programme__pfeil { display: grid; place-items: center; color: var(--hw-blau); font-size: 1.5rem; }
.hw-tisch-cta { margin-top: clamp(32px, 5vw, 56px); padding: clamp(22px, 4vw, 36px); border-radius: var(--hw-radius); background: var(--hw-bg-2); border: 1px solid var(--hw-linie); text-align: center; }
.hw-tisch-cta p { color: var(--hw-text-2); }
.hw-tisch-hinweis { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--hw-radius); background: var(--hw-flaeche); border: 2px solid var(--hw-blau); box-shadow: var(--hw-schatten-1); }
.hw-tisch-hinweis > .bi { font-size: 2rem; color: var(--hw-blau); }
.hw-tisch-hinweis h2 { font-size: 1.15rem; margin: 0 0 4px; }
.hw-tisch-hinweis p { margin: 0; color: var(--hw-text-2); font-size: .95rem; }
@media (max-width: 980px) {
  .hw-tisch-ablauf { grid-template-columns: 1fr; gap: 14px; }
  .hw-tisch-ablauf::before { left: 33px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; background: linear-gradient(180deg, var(--hw-blau), var(--hw-gruen)); }
  .hw-tisch-ablauf li { grid-template-columns: 68px 1fr; justify-items: start; text-align: left; column-gap: 14px; }
  .hw-tisch-ablauf__symbol { grid-row: span 2; }
  .hw-tisch-programme { grid-template-columns: 1fr; }
  .hw-tisch-programme__pfeil { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .hw-tisch-aufsteller { width: 104px; padding: 10px 8px 12px; margin-bottom: 18px; }
  .hw-tisch-handy { padding: 7px; border-radius: 26px; }
  .hw-tisch-handy__schirm { border-radius: 19px; padding: 10px 8px; }
  .hw-tisch-karte__liste li { grid-template-columns: 28px 1fr auto 20px; gap: 6px; padding: 5px; }
  .hw-tisch-karte__bild { width: 28px; height: 28px; font-size: .85rem; }
  .hw-tisch-vergleich { grid-template-columns: 1fr; }
  .hw-tisch-hinweis { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* FIX 2026-10-23 14:40 HanwareWebSeite (Zusatzauftrag Hanware Web ERP 23.10.2026): Schulungsvideo mit Ton auf Produktseiten (z. B. Ladeliste) */
.hw-schulungsvideo { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0f172a; border-radius: var(--hw-radius); border: 1px solid var(--hw-linie); box-shadow: var(--hw-schatten-2); }

/* FIX 2026-10-24 01:40 HanwareWebSeite (Anwender-Auftrag 24.10.2026): Zusammenspiel Hanware Cash, Hanware Gastro und Hanware Shop
   (/Produkt/Tischbestellung) - Uebersichtsgrafik, drei Bestellwege, Status fuer den Gast, offener Tisch in der Kasse */
.hw-zs-grafik { display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; gap: 14px; align-items: center; }
.hw-zs-spalte { display: grid; gap: 10px; align-content: center; }
.hw-zs-spalte__titel { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-text-3); text-align: center; }
.hw-zs-quelle, .hw-zs-station { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--hw-radius); background: var(--hw-flaeche); border: 1px solid var(--hw-linie); box-shadow: var(--hw-schatten-1); }
.hw-zs-quelle { grid-template-columns: auto 1fr; border-left-width: 5px; }
.hw-zs-quelle > .bi, .hw-zs-station > .bi:first-child { font-size: 1.5rem; }
.hw-zs-quelle strong, .hw-zs-station strong { display: block; font-size: .98rem; }
.hw-zs-quelle span, .hw-zs-station span { display: block; font-size: .84rem; color: var(--hw-text-2); }
.hw-zs-quelle--cash { border-left-color: #16a34a; } .hw-zs-quelle--cash > .bi { color: #16a34a; }
.hw-zs-quelle--gastro { border-left-color: var(--hw-blau); } .hw-zs-quelle--gastro > .bi { color: var(--hw-blau); }
.hw-zs-quelle--shop { border-left-color: #f59e0b; } .hw-zs-quelle--shop > .bi { color: #d97706; }
.hw-zs-station > .bi:first-child { color: var(--hw-text-2); }
.hw-zs-ok { color: #16a34a; font-size: 1.2rem; }
.hw-zs-pfeil { display: grid; place-items: center; color: var(--hw-blau); font-size: 1.8rem; }
.hw-zs-mitte { padding: 20px; border-radius: var(--hw-radius); background: var(--hw-flaeche); border: 2px solid var(--hw-blau); box-shadow: var(--hw-schatten-2); display: grid; gap: 6px; justify-items: center; text-align: center; }
.hw-zs-mitte > .bi { font-size: 2rem; color: var(--hw-blau); }
.hw-zs-mitte strong { font-size: 1.1rem; }
.hw-zs-mitte > span { font-size: .88rem; color: var(--hw-text-2); }
.hw-zs-mitte ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; width: 100%; text-align: left; font-size: .9rem; }
.hw-zs-mitte li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--hw-bg-2); }
.hw-zs-marke { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff; white-space: nowrap; }
.hw-zs-marke--cash { background: #16a34a; } .hw-zs-marke--gastro { background: #1d4ed8; } .hw-zs-marke--shop { background: #b45309; }
.hw-zs-rueck { margin-top: 22px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.hw-zs-rueck__teil { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: var(--hw-radius); background: var(--hw-bg-2); border: 1px dashed var(--hw-linie-2, var(--hw-linie)); }
.hw-zs-rueck__teil > .bi { font-size: 1.5rem; color: var(--hw-blau); }
.hw-zs-rueck__teil strong { display: block; } .hw-zs-rueck__teil span { display: block; font-size: .86rem; color: var(--hw-text-2); }
.hw-zs-rueck__teil--cash { border: 2px solid #16a34a; background: var(--hw-flaeche); } .hw-zs-rueck__teil--cash > .bi { color: #16a34a; }
.hw-zs-rueck__pfeil { color: var(--hw-blau); font-size: 1.4rem; }
.hw-zs-weg { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hw-zs-weg + .hw-zs-weg { margin-top: clamp(36px, 5vw, 64px); }
.hw-zs-weg--umgekehrt > :first-child { order: 2; }
.hw-zs-weg h3 { font-size: 1.3rem; margin: 8px 0; }
.hw-zs-weg__bild { margin: 0; }
.hw-zs-weg__bild img { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--hw-schatten-2); }
.hw-zs-weg__handy { display: flex; justify-content: center; }
.hw-zs-weg__handy .hw-tisch-handy { width: min(280px, 100%); }
.hw-zs-nummer { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 1.1rem; }
.hw-zs-nummer--cash { background: #16a34a; } .hw-zs-nummer--gastro { background: #1d4ed8; } .hw-zs-nummer--shop { background: #b45309; }
.hw-zs-ablauf { grid-template-columns: repeat(6, 1fr); }
.hw-zs-statusbuehne { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: center; }
.hw-zs-statusbuehne .hw-tisch-handy { width: min(280px, 100%); }
.hw-zs-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hw-zs-status li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; }
.hw-zs-status li > .bi { font-size: 1.05rem; line-height: 1.2; }
.hw-zs-status li b { display: block; font-size: .8rem; } .hw-zs-status li small { display: block; font-size: .68rem; color: #64748b; }
.hw-zs-status li.ist-fertig > .bi { color: #16a34a; }
.hw-zs-status li.ist-aktiv { border-color: #f59e0b; background: #fffbeb; } .hw-zs-status li.ist-aktiv > .bi { color: #d97706; }
.hw-zs-status__knopf { background: #1d4ed8; }
.hw-zs-rechnung { width: min(420px, 100%); justify-self: center; border-radius: var(--hw-radius); background: var(--hw-flaeche); border: 1px solid var(--hw-linie); box-shadow: var(--hw-schatten-2); overflow: hidden; }
.hw-zs-rechnung__kopf { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #14532d; color: #fff; }
.hw-zs-rechnung__kopf span { font-size: .85rem; color: #bbf7d0; }
.hw-zs-rechnung ul { list-style: none; margin: 0; padding: 8px 16px; display: grid; gap: 4px; }
.hw-zs-rechnung li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--hw-linie); }
.hw-zs-rechnung li em { font-style: normal; font-weight: 700; min-width: 64px; text-align: right; }
.hw-zs-rechnung__summe { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 1.1rem; }
.hw-zs-rechnung__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
.hw-zs-rechnung__knoepfe span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid var(--hw-linie); font-weight: 700; }
.hw-zs-rechnung__knoepfe .ist-primaer { background: #dc2626; border-color: #dc2626; color: #fff; }
@media (max-width: 980px) {
  .hw-zs-grafik { grid-template-columns: 1fr; }
  .hw-zs-pfeil { transform: rotate(90deg); }
  .hw-zs-rueck { grid-template-columns: 1fr; }
  .hw-zs-rueck__pfeil { transform: rotate(90deg); justify-self: center; }
  .hw-zs-weg, .hw-zs-weg--umgekehrt { grid-template-columns: 1fr; }
  .hw-zs-weg--umgekehrt > :first-child { order: 0; }
  .hw-zs-ablauf { grid-template-columns: 1fr; }
}

/* FIX 2026-10-24 02:03 HanwareWebSeite (Pruefung HanwareShopAdmin 24.10.2026): Gast-Status wie in Hanware Shop - Schritte Gesendet, Angekommen, Gedruckt */
.hw-zs-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.hw-zs-schritte li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; background: #ecfdf5; color: #166534; font-size: .68rem; font-weight: 800; text-align: center; }
.hw-zs-schritte li .bi { font-size: 1rem; color: #16a34a; }
.hw-zs-status__titel { font-size: .72rem; font-weight: 800; color: #475569; margin-top: 2px; }
.hw-zs-status__hinweis { font-size: .72rem; color: #475569; text-align: center; }

/* FIX 2026-10-24 12:16 HanwareWebSeite (Bildauftrag an Hanware Cash): kleines Bild der Einstellung Kuechendruck auf der Zusammenspiel-Seite */
.hw-zs-einstellung { max-width: 340px; margin: 14px 0 0; }
.hw-zs-einstellung img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--hw-schatten-1); }
.hw-zs-einstellung figcaption { font-size: .85rem; color: var(--hw-text-2); margin-top: 6px; }

/* FIX 2026-10-27 01:50 HanwareWebSeite (Google Ads nur mit Einwilligung): Einwilligungshinweis unten auf der Seite, beide Hauptknoepfe gleichwertig */
.hw-einwilligung { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2000; display: flex; justify-content: center; pointer-events: none; }
.hw-einwilligung[hidden], .hw-einwilligung [hidden] { display: none !important; }
.hw-einwilligung__box { pointer-events: auto; max-width: 760px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 20px; border-radius: var(--hw-radius); border: 1px solid var(--hw-linie); background: var(--hw-flaeche); color: var(--hw-text); box-shadow: 0 12px 40px rgba(15, 23, 42, .28); }
.hw-einwilligung__titel { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; }
.hw-einwilligung__box p { margin: 0 0 10px; font-size: .92rem; }
.hw-einwilligung__auswahl { display: grid; gap: 8px; margin: 4px 0 12px; font-size: .9rem; }
.hw-einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-einwilligung__knoepfe .hw-btn { flex: 1 1 160px; justify-content: center; }
@media print { .hw-einwilligung { display: none !important; } }