/* =====================================================================
   OvisualTec V2 — Ergänzungen zu style.css
   Einstieg/Auswahl · Bereich-Umschaltung (Betriebe/Zuhause) · warmes
   "Für Zuhause"-Theme. Lädt NACH style.css. Keine externen Ressourcen.
   ===================================================================== */

/* ---------- Bereiche: Sichtbarkeit / Umschaltung ---------- */
/* Ohne JS: Einstieg + beide Bereiche sichtbar untereinander (Fallback). */
.area { display: block; }
.area + .area { border-top: 1px solid var(--line-soft); }

/* Mit JS (html.js-on): nur der aktive Bereich bzw. der Einstieg ist sichtbar. */
html.js-on body[data-view=""] .area { display: none; }
html.js-on body[data-view="betriebe"] .entry,
html.js-on body[data-view="betriebe"] #zuhause { display: none; }
html.js-on body[data-view="zuhause"] .entry,
html.js-on body[data-view="zuhause"] #betriebe { display: none; }

.nav-area.is-active { color: var(--accent); }

/* ---------- Einstieg / Auswahl ---------- */
.entry { position: relative; overflow: hidden; padding: 84px 0 92px; text-align: center; }
.entry-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.entry .eyebrow { justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.entry-title { font-size: clamp(2.6rem, 7vw, 4.4rem); margin: .12em 0 .08em; letter-spacing: -.03em; }
.entry-claim { font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: var(--text); font-weight: 600; margin: 0 0 .55em; }
.entry-lead { color: var(--text-soft); font-size: 1.06rem; max-width: 680px; margin: 0 auto 2.2em; }

.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
.choice-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px 22px; text-decoration: none !important; color: var(--text);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.choice-card:hover { transform: translateY(-4px); }
.choice-ic { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 14px; margin-bottom: 6px; }
.choice-k { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.choice-desc { color: var(--text-soft); font-size: .98rem; }
.choice-go { margin-top: auto; padding-top: 8px; font-weight: 600; }
.choice-betriebe .choice-ic { color: var(--accent); background: rgba(56,217,240,.10); }
.choice-betriebe:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.choice-betriebe .choice-go { color: var(--accent); }
.choice-zuhause .choice-ic { color: #df8a3a; background: rgba(223,138,58,.12); }
.choice-zuhause:hover { border-color: #e0a154; box-shadow: 0 0 0 1px rgba(223,138,58,.22), 0 20px 60px -28px rgba(223,138,58,.30); }
.choice-zuhause .choice-go { color: #e0954a; }
.entry-note { margin-top: 22px; color: var(--text-mut); font-size: .92rem; }

/* ---------- Bereich-Hero (h2 als Headline) ---------- */
.area-hero .hero-h { font-size: clamp(1.85rem, 4.3vw, 2.9rem); letter-spacing: -.02em; margin: .12em 0 .4em; }

/* ---------- Karten: 2-spaltig (Zuhause-Leistungen) + Listen ---------- */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cards-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 26px 0 36px; }
.card-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.card-list li { position: relative; padding-left: 18px; color: var(--text-soft); font-size: .94rem; }
.card-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- Abgrenzungs-Box ---------- */
.limits { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 22px 24px; }
.limits-h { font-size: 1.12rem; margin: 0 0 .55em; }
.limits p { color: var(--text-soft); margin: 0 0 .8em; font-size: .96rem; }
.limits p:last-child { margin-bottom: 0; }

/* ---------- Home-Screen-Mockup (warm, Demo-Daten) ---------- */
.home-screen { background: #fffaf2; border: 1px solid #ecdcc4; border-radius: 16px; padding: 16px; box-shadow: 0 24px 60px -28px rgba(120,80,40,.4); color: #3a322a; max-width: 420px; margin-left: auto; }
.hs-top { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #f0e3cf; margin-bottom: 12px; }
.hs-clock { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.hs-date { color: #93826c; font-size: .85rem; margin-right: auto; }
.hs-weather { font-size: 1.05rem; font-weight: 600; color: #d98a36; }
.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs-tile { background: #fbf3e6; border: 1px solid #f1e4cf; border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; }
.hs-tile .hs-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #a08a6e; }
.hs-tile b { font-size: 1.45rem; font-weight: 700; }
.hs-tile b small { font-size: .8rem; font-weight: 600; color: #a08a6e; margin-left: 2px; }
.hs-tile b.hs-sm { font-size: 1rem; }
.hs-bar { height: 6px; border-radius: 4px; background: #f0e3cf; margin-top: 6px; overflow: hidden; }
.hs-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f0b24a, #d98a36); }
.hs-cal { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 9px 12px; background: #fbf3e6; border-radius: 10px; font-size: .85rem; color: #6f6052; }
.hs-cal .hs-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #a08a6e; }
.hs-status { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .82rem; color: #6f6052; }
.hs-status i.d-ok { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #6fae5f; margin-right: 5px; }

/* ---------- Warmes Theme: Bereich Zuhause (immer) + ganze Seite (mit JS aktiv) ---------- */
.theme-home,
html.js-on body[data-view="zuhause"] {
  --bg:        #f5efe4;
  --bg-alt:    #efe6d6;
  --surface:   #fdf9f1;
  --surface-2: #f4ecdd;
  --line:      #e6dac6;
  --line-soft: #efe5d4;
  --text:      #2c2620;
  --text-soft: #6c6052;
  --text-mut:  #9a8c78;
  --accent:    #df8a3a;
  --accent-2:  #6fae5f;
  --accent-3:  #c9772f;
  --shadow:      0 18px 50px -22px rgba(120,90,50,.28);
  --shadow-glow: 0 0 0 1px rgba(223,138,58,.16), 0 20px 60px -28px rgba(223,138,58,.22);
}
/* sanfter, leicht schräger Verlauf statt flacher Fläche — mildert den Sprung von der dunklen Auswahlseite */
.area-zuhause { background: linear-gradient(152deg, #f9f4ea 0%, #f3ecde 46%, #e8dbc5 100%); color: var(--text); }
html.js-on body[data-view="zuhause"] { background: linear-gradient(152deg, #f9f4ea 0%, #f3ecde 46%, #e8dbc5 100%); color: var(--text); background-attachment: fixed; }
.area-zuhause .hero::after { background: radial-gradient(circle, rgba(223,138,58,.14), transparent 62%); }
.theme-home .btn-primary,
html.js-on body[data-view="zuhause"] .btn-primary { color: #2a1c0c; box-shadow: 0 10px 30px -10px rgba(223,138,58,.5); }
.theme-home .btn-primary:hover,
html.js-on body[data-view="zuhause"] .btn-primary:hover { box-shadow: 0 16px 38px -10px rgba(223,138,58,.6); }
html.js-on body[data-view="zuhause"] .site-header { background: rgba(245,239,228,.88); border-bottom-color: var(--line); }
html.js-on body[data-view="zuhause"] .brand,
html.js-on body[data-view="zuhause"] .main-nav a { color: var(--text); }
.theme-home .status-dot { box-shadow: 0 0 0 3px rgba(111,174,95,.18); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .choice-cards { grid-template-columns: 1fr; }
  .cards-2 { grid-template-columns: 1fr; }
  .cards-4 { grid-template-columns: 1fr; }
  .home-screen { margin: 0 auto; }
}

/* ---------- Showcase-Mockups: Einzelhandel (hell) + Gastro (Bordeaux/Vanille) ---------- */
/* Gastro neu eingefärbt: Bordeaux-Hintergrund, Vanille-Schrift/Akzent */
.scenario-gastro {
  --m-bg: #2a0e14; --m-bg2: #3a141d; --m-ink: #f3e7c8; --m-accent: #e6c879;
  --m-muted: #cbab8e; --m-line: rgba(230,200,121,.22);
  background: radial-gradient(120% 90% at 50% -20%, #4d1a26, #2a0e14);
}
.scenario-gastro .gx-card { background: rgba(243,231,200,.06); }

/* Einzelhandel: helles, KONTRASTREICHES Schaufenster-/Laden-Display */
.scenario-retail {
  --m-bg: #fcfdfc; --m-bg2: #ffffff; --m-ink: #15212a; --m-accent: #0e9d8a;
  --m-muted: #5e6e76; --m-line: rgba(20,40,46,.14);
  background: radial-gradient(120% 90% at 50% -20%, #ffffff, #e6f1ed);
}
.scenario-retail .gx-screen {
  background: linear-gradient(180deg, #ffffff, var(--m-bg));
  box-shadow: inset 0 0 0 1px var(--m-line), 0 14px 38px -18px rgba(15,80,70,.40);
}
.scenario-retail .gx-top { border-bottom-color: var(--m-line); }
.scenario-retail .gx-hero {
  background: linear-gradient(135deg, #16a392, #0c8273);
  border-radius: 12px; padding: 13px 14px 15px; color: #fff;
  box-shadow: 0 10px 24px -12px rgba(12,120,108,.6);
}
.scenario-retail .gx-hero .gx-k { color: rgba(255,255,255,.85); }
.scenario-retail .gx-hero .gx-dish { color: #fff; font-family: inherit; font-weight: 800; letter-spacing: -.01em; }
.scenario-retail .gx-hero .gx-sub { color: rgba(255,255,255,.92); font-style: normal; }
.scenario-retail .gx-card { background: #ffffff; border: 1px solid var(--m-line); box-shadow: 0 5px 14px -9px rgba(15,80,70,.35); }
.scenario-retail .gx-card b { color: var(--m-ink); font-weight: 700; }
.scenario-retail .rx-p { display: block; margin-top: 4px; font-weight: 800; color: var(--m-accent); font-size: 1rem; }
.scenario-retail .gx-status i.d-ok { background: #1fa867; }
.scenario-retail .gx-live { color: #0e9d8a; }
.scenario-retail .gx-live i { background: #1fa867; box-shadow: 0 0 8px rgba(31,168,103,.55); }

/* ---------- Einstieg: klickbare Mini-Kacheln („Was heißt das konkret?") ---------- */
.entry-examples { margin-top: 30px; }
.entry-ex-h { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-mut); margin-bottom: 14px; }
.entry-ex-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.entry-ex { display: inline-flex; align-items: center; gap: 11px; text-decoration: none !important; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px 10px 11px;
  transition: transform .16s ease, box-shadow .22s ease, border-color .2s ease; }
.entry-ex:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.entry-ex-ic { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(56,217,240,.10); color: var(--accent); flex: none; }
.entry-ex-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.entry-ex-t { font-size: .94rem; font-weight: 600; }

/* ---------- Einstieg: Mini-Chips auf den Auswahlkarten ---------- */
.choice-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.choice-chips span { font-size: .76rem; font-weight: 600; letter-spacing: .01em; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.choice-betriebe .choice-chips span { color: var(--accent); border-color: rgba(56,217,240,.28); background: rgba(56,217,240,.07); }
.choice-zuhause .choice-chips span { color: #e0954a; border-color: rgba(223,138,58,.32); background: rgba(223,138,58,.09); }

/* ---------- Einzelhandel: kräftigeres Angebots-Badge + Streichpreis ---------- */
.scenario-retail .gx-hero { display: flex; align-items: center; gap: 13px; }
.scenario-retail .rx-badge { flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; height: 54px; padding: 0 12px; border-radius: 13px; background: #fff;
  color: #0c8273; font-weight: 800; font-size: 1.22rem; letter-spacing: -.03em;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); }
.scenario-retail .rx-offer { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.scenario-retail .rx-old { color: var(--m-muted); font-weight: 600; font-size: .82rem; margin-left: 7px; }

/* ---------- Zuhause-Karten: Nutzen-Zeile ---------- */
.card-benefit { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 13px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  font-size: .86rem; font-weight: 600; color: var(--text); align-self: flex-start; }
.card-benefit svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Zuhause: kleine Beispiel-Displays („Beispiele für Zuhause") ---------- */
.home-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hx { background: #fdf9f1; border: 1px solid #ecdcc4; border-radius: 16px; padding: 16px;
  box-shadow: 0 18px 44px -28px rgba(120,80,40,.5); color: #3a322a; display: flex; flex-direction: column; gap: 11px; }
.hx-top { display: flex; align-items: center; gap: 10px; }
.hx-ic { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 11px; background: rgba(223,138,58,.12); color: #d98a36; flex: none; }
.hx-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-h { font-size: 1.04rem; font-weight: 700; letter-spacing: -.01em; }
.hx-rows { display: grid; gap: 7px; }
.hx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fbf3e6; border: 1px solid #f1e4cf; border-radius: 9px; padding: 8px 12px; }
.hx-row .hx-k { font-size: .82rem; color: #93826c; }
.hx-row b { font-size: .92rem; font-weight: 700; color: #3a322a; }
.hx-foot { font-size: .74rem; color: #a8927a; }

/* ---------- Betriebe-Dashboard: Screen-Statuszeile (echter-Screen-Gefühl) ---------- */
.dash-foot { display: flex; align-items: center; gap: 14px; margin-top: 13px; padding-top: 11px;
  border-top: 1px solid var(--line-soft); font-size: .76rem; color: var(--text-mut); }
.dash-stat { display: inline-flex; align-items: center; gap: 6px; }
.dash-foot i.d-ok { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ec98a; }
.dash-clock { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.dash-clock .d-live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); }

/* ---------- Haftungsabgrenzung: Zwei-Box (dazugehört / nicht Teil) ---------- */
.limits-2 { border-left: 1px solid var(--line); }
.limits-2 .limit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 4px; }
.limit-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 18px 17px; background: var(--surface); }
.limit-yes { border-left: 3px solid #4ca36a; }
.limit-no  { border-left: 3px solid #d9694a; }
.limit-tag { display: block; font-weight: 700; font-size: .96rem; color: var(--text); margin-bottom: 7px; }
.limit-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.limit-box li { position: relative; padding-left: 24px; color: var(--text-soft); font-size: .95rem; line-height: 1.42; }
.limit-box li::before { position: absolute; left: 2px; top: 0; font-weight: 800; }
.limit-yes li::before { content: "\2713"; color: #4ca36a; }
.limit-no  li::before { content: "\2715"; color: #d9694a; left: 3px; }
.limits-note { color: var(--text-soft); margin: 12px 0 0; font-size: .95rem; }
.limits-note-soft { color: var(--text-mut); font-size: .9rem; margin-top: 8px; }

/* ---------- Beispiel-Galerie „So kann das aussehen" (Einstieg) ---------- */
.ex-gallery-wrap { max-width: 1120px; margin: 8px auto 0; padding-top: 44px; border-top: 1px solid var(--line-soft); text-align: center; }
.ex-sub { margin: 0 auto 22px; text-align: center; }
.ex-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left; }
.ex-card { display: flex; flex-direction: column; text-decoration: none !important; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .16s ease, box-shadow .22s ease, border-color .2s ease; }
.ex-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.ex-media { position: relative; display: block; line-height: 0; }
.ex-img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 400; background: var(--surface-2); }
.ex-badge { position: absolute; left: 10px; bottom: 10px; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  color: #e8edf6; background: rgba(10,14,22,.62); border: 1px solid rgba(255,255,255,.14);
  padding: 3px 9px; border-radius: 999px; }
.ex-cap { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px 15px; }
.ex-cap b { font-size: 1rem; font-weight: 700; }
.ex-cap span { font-size: .9rem; color: var(--text-soft); line-height: 1.4; }
.ex-foot { margin: 18px 0 0; font-size: .85rem; color: var(--text-mut); text-align: center; }

/* ---------- Einstieg: Branchen-Teaser ---------- */
.branches-teaser { max-width: 1120px; margin: 8px auto 0; padding-top: 44px; border-top: 1px solid var(--line-soft); text-align: center; }
.branch-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 22px; }
.branch-chips a { display: inline-flex; align-items: center; text-decoration: none !important; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: .95rem; font-weight: 600;
  transition: transform .16s ease, box-shadow .22s ease, border-color .2s ease, color .2s ease; }
.branch-chips a:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); color: var(--accent); }
.branches-all { margin-top: 4px; }

/* ---------- Branchen-Unterseiten: Modul-Karten + Übersichts-Grid ---------- */
.branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0 8px; }
.branch-card { display: flex; flex-direction: column; gap: 7px; text-decoration: none !important; color: var(--text);
  background: linear-gradient(165deg, var(--surface) 0%, var(--bg-alt) 100%); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 20px; transition: transform .2s, box-shadow .25s, border-color .25s; }
.branch-card:hover { transform: translateY(-5px); border-color: rgba(56,217,240,.45); box-shadow: var(--shadow-glow); }
.branch-card .bc-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(56,217,240,.1); color: var(--accent); border: 1px solid rgba(56,217,240,.25); margin-bottom: 6px; }
.branch-card .bc-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.branch-card h3 { font-size: 1.16rem; margin: 0; }
.branch-card p { color: var(--text-soft); margin: 0; font-size: .94rem; }
.branch-card .bc-go { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--accent); font-size: .92rem; }
@media (max-width: 920px) { .branch-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .branch-grid { grid-template-columns: 1fr; } }

/* ---------- Großer Branchen-Auswahl-Button (Betriebe-Hero) ---------- */
.branch-pick { display: flex; align-items: center; gap: 16px; margin: 6px 0 26px; max-width: 580px;
  text-decoration: none !important; color: var(--text);
  background: linear-gradient(135deg, rgba(56,217,240,.13), rgba(91,140,255,.10));
  border: 1px solid rgba(56,217,240,.42); border-radius: 14px; padding: 16px 20px;
  box-shadow: 0 18px 44px -22px rgba(56,217,240,.55);
  transition: transform .16s ease, box-shadow .22s ease, border-color .2s ease; }
.branch-pick:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.branch-pick-ic { flex: none; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(56,217,240,.16); color: var(--accent); }
.branch-pick-ic svg { width: 26px; height: 26px; }
.branch-pick-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.branch-pick-txt b { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.branch-pick-txt small { font-size: .85rem; color: var(--text-soft); }
.branch-pick-go { margin-left: auto; flex: none; font-size: 1.5rem; line-height: 1; color: var(--accent); font-weight: 700; }
@media (max-width: 560px) { .branch-pick-go { display: none; } .branch-pick { gap: 13px; padding: 14px 16px; } }

/* ---------- Demo-Screens als echte Bildschirme (Monitor-/Glas-Look) ---------- */
/* Dashboard-Mockups (Hero Betriebe, Vermietung, Gründung): Rahmen/Bezel + Innenglas + Reflex,
   damit sie wie ein physischer Bildschirm wirken statt wie ein weiteres Textfeld. */
.dash-card { position: relative; padding: 17px; border-radius: 18px;
  background: linear-gradient(165deg, #1b2638 0%, #0a0e16 100%);
  border: 1px solid #30405e;
  box-shadow: 0 44px 96px -34px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.05); }
.dash-card > * { position: relative; z-index: 1; }
.dash-card::before { content: ""; position: absolute; inset: 12px; border-radius: 12px; z-index: 0;
  background: linear-gradient(160deg, #0f1828 0%, #0a0f1a 100%);
  box-shadow: inset 0 0 0 1px rgba(56,217,240,.20), inset 0 0 56px rgba(0,0,0,.55); }
.dash-card::after { content: ""; position: absolute; inset: 12px; border-radius: 12px; z-index: 3; pointer-events: none;
  background: linear-gradient(122deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 34%); }
/* Glas-Reflex auf den Branchen-Display-Mockups (gx-screen/cb-board/en-dash/ofx) */
.scenario::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 16px;
  background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 24%); }

/* ---------- Accessibility: Skip-Link + globale Fokus-Stile ---------- */
.skip-link { position: absolute; left: 12px; top: -64px; z-index: 1000;
  background: var(--accent); color: #06131a; padding: 10px 18px; border-radius: 10px;
  font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px -8px rgba(0,0,0,.5);
  transition: top .16s ease; }
.skip-link:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 5px; }
a:focus-visible, button:focus-visible, summary:focus-visible,
.choice-card:focus-visible, .entry-ex:focus-visible, .ex-card:focus-visible,
.showcase-tab:focus-visible, .brand:focus-visible, .nav-cta:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; }
summary { cursor: pointer; }

/* ---------- Hinweis zu Leistungen und Verantwortung (footer-nah, maßvoll) ---------- */
.legal-note { border-top: 1px solid var(--line-soft); }
.legal-note-h { font-size: 1.1rem; margin: 0 0 .55em; }
.legal-note p { color: var(--text-soft); font-size: .93rem; line-height: 1.55; margin: 0 0 .7em; }
.legal-note .legal-note-soft { color: var(--text-mut); font-size: .88rem; margin-bottom: 0; }

/* ---------- Zuhause: Display im Rahmen + mehr Tiefe (kleine Diagramme, Mini-Kacheln) ---------- */
.home-frame { max-width: 476px; margin-left: auto; padding: 17px;
  background: linear-gradient(160deg, #f1e7d6, #e0d1b6); border: 1px solid #e8dcc6; border-radius: 30px;
  box-shadow: 0 40px 90px -34px rgba(120,80,40,.62), 0 8px 22px -14px rgba(120,80,40,.35), inset 0 1px 0 rgba(255,255,255,.7); position: relative; }
.home-frame::before { content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 46px; height: 4px; border-radius: 3px; background: rgba(120,90,50,.18); }
.home-frame::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 72px; height: 6px; border-radius: 4px; background: #d8c8ac; }
.home-screen { margin: 0; max-width: none; box-shadow: 0 12px 30px -16px rgba(80,55,25,.5), inset 0 0 0 1px rgba(255,255,255,.5); }
.hs-spark { height: 32px; }
.hs-when { display: flex; flex-direction: column; margin-right: auto; line-height: 1.2; }
.hs-greet { font-size: .72rem; color: #b39a78; }
.hs-weather { display: inline-flex; align-items: center; gap: 6px; }
.hs-weather svg { width: 18px; height: 18px; fill: none; stroke: #e0954a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 7px; }
.hs-spark i { flex: 1; background: linear-gradient(180deg, #f0b24a, #de8f3a); border-radius: 2px 2px 0 0; min-height: 3px; }
.hs-foot { font-size: .68rem; color: #a8927a; margin-top: 3px; }
.hs-cal .hs-ev { background: #fff5e8; border: 1px solid #f0e3cf; border-radius: 999px; padding: 2px 9px; font-size: .76rem; color: #6f6052; }

@media (max-width: 920px) {
  .home-examples { grid-template-columns: 1fr 1fr; }
  .ex-gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .home-frame { margin: 0 auto; }
  .home-examples { grid-template-columns: 1fr; }
  .limits-2 .limit-cols { grid-template-columns: 1fr; }
  .entry-ex-list { gap: 8px; }
  .entry .eyebrow { white-space: normal; max-width: 100%; }
  .eyebrow { white-space: normal; }
}
@media (max-width: 540px) {
  .ex-gallery { grid-template-columns: 1fr; }
}

/* ---------- Branchen-Chips: Icon + Akzentfarbe pro Branche ---------- */
.branch-chips a.bc { display: inline-flex; align-items: center; gap: 8px; }
.bc svg { width: 17px; height: 17px; fill: none; stroke: var(--c, var(--accent)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bc-gastro { --c:#f0b24a; } .bc-retail { --c:#19b39c; } .bc-vermiet { --c:#6f9bff; }
.bc-grued { --c:#f2a541; } .bc-handw { --c:#ff8a3a; } .bc-buero { --c:#5b8cff; } .bc-zuhause { --c:#e0954a; }
.branch-chips a.bc:hover { border-color: var(--c); color: var(--text); transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--c), 0 16px 38px -26px var(--c); }

/* ---------- Trust-Band „Entstanden aus echter Praxis" ---------- */
.trust-band { max-width: 880px; margin: 8px auto 0; padding-top: 44px; border-top: 1px solid var(--line-soft); text-align: center; }
.trust-text { color: var(--text-soft); font-size: 1.04rem; line-height: 1.65; max-width: 62ch; margin: 0 auto 14px; text-wrap: pretty; }
.trust-note { display: inline-block; color: var(--text-mut); font-size: .9rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 9px 16px; }

/* ---------- Preis-/Umfangsanker „Klein anfangen statt Großprojekt" ---------- */
.price-band { max-width: 1000px; margin: 8px auto 0; padding-top: 44px; border-top: 1px solid var(--line-soft); text-align: center; }
.price-sub { margin: 0 auto 24px; text-align: center; max-width: 56ch; }
.price-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.price-tile { background: linear-gradient(165deg, var(--surface) 0%, var(--bg-alt) 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; }
.price-tile .pt-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(56,217,240,.1); border: 1px solid rgba(56,217,240,.3); color: var(--accent); font-weight: 800; margin-bottom: 12px; }
.price-tile h3 { font-size: 1.12rem; margin: 0 0 .3em; }
.price-tile p { color: var(--text-soft); margin: 0; font-size: .95rem; }
@media (max-width: 760px) { .price-tiles { grid-template-columns: 1fr; } }

/* ---------- Mobile/Lesbarkeit: schönere Umbrüche ---------- */
.entry-title, .entry-claim, .section-title, .hero-h, .trust-text { text-wrap: balance; }
.entry-lead, .lead, .section-sub, .meta-desc { text-wrap: pretty; }

/* ---------- Feinschliff (Reste) ---------- */
/* Eyebrow-Pille einzeilig ab Tablet/Desktop (mobil darf sie umbrechen, s. @max-width:760) */
@media (min-width: 761px) { .eyebrow { white-space: nowrap; } }
/* Branchen-Chips: kein Umbruch INNERHALB der Pille (Container darf zwischen Chips umbrechen) */
.branch-chips a { white-space: nowrap; }
/* In-Page-Showcase-Mockups deutlicher vom dunklen Seitenhintergrund abheben (Geräterahmen-Gefühl) */
.scenario { border-radius: 16px; box-shadow:
  0 0 0 1px rgba(255,255,255,.14),
  0 0 0 6px rgba(255,255,255,.035),
  0 38px 84px -30px rgba(0,0,0,.95); }

/* === Local SEO additions (2026-07): region band + NAP footer === */
.region-band{margin-top:34px;padding-top:30px;border-top:1px solid var(--line-soft)}
.region-band .trust-text{max-width:54em}
.site-footer .footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px 44px;padding-bottom:18px;border-bottom:1px solid var(--line-soft);margin-bottom:16px}
.footer-nap{font-size:.9rem;color:var(--text-mut);line-height:1.7;max-width:34em}
.footer-nap strong{color:var(--text-soft)}
.footer-nap a{color:var(--text-soft)}
.footer-area{display:block;margin-top:6px;font-size:.82rem;color:var(--text-mut)}
.footer-links{display:flex;flex-direction:column;gap:7px;align-content:flex-start}
.footer-links a{color:var(--text-soft);font-size:.9rem}
.site-footer .footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--text-mut);font-size:.9rem}
@media (max-width:620px){.site-footer .footer-grid{flex-direction:column;gap:18px}}