/* SIGVORA Business – Handy- und Computeransicht v2 (18.10.2026, Claude, Auftrag Dirk).
   Zusatzdatei: Inhalte, Texte und Daten bleiben unverändert. Rückweg: Datei nicht mehr einbinden.
   Handy: bis 767 px. Computer: ab 768 px. Vorbild: SPV-Wallet (wallet-mobile/desktop) und Crew (crew-mobile-v2). */

:root{--svb-gold:#d2a24c;--svb-gold-ink:#76531c;--svb-navy:#061a31;--svb-line:rgba(210,162,76,.35)}

/* ============ Alle Größen ============ */

/* Alte Seiten (Anwendungsseiten, Zugang, Konto): gemeinsame SIGVORA-Kopf- und Fußzeile statt alter Leiste */
html.svb-shell body > header.wrap.header,
html.svb-shell body > footer.wrap.footer{display:none!important}
/* Auswahl „Darstellung“ nirgends zeigen (Hell/Dunkel richtet sich nach dem Sonnenstand) */
body > header.wrap.header.svb-old-hidden{display:none!important}
html.svb-shell select#theme,html.svb-shell label[for="theme"]{display:none!important}

/* Symbol in den Anwendungskarten */
.svb-icon{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;
  border:1px solid var(--svb-line);background:rgba(210,162,76,.08);margin:0 0 .6rem}
.svb-icon svg{width:24px;height:24px;stroke:var(--svb-gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Knöpfe gut antippbar */
.sv-card-link,.button,a.primary,button.primary{min-height:44px}

/* Dekorative Bildschirm-Attrappen auf den Anwendungsseiten sind keine Information */
html.svb-shell .screens{display:none!important}

/* „Mein Business“ (Kontoseite nach dem Anmelden) */
.svb-home{margin:1.5rem 0 2rem}
.svb-eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:700;margin:0 0 .4rem;opacity:.75}
.svb-title{font-family:Georgia,"Times New Roman",serif;font-size:2.1rem;line-height:1.1;margin:0 0 .3rem}
.svb-mail{margin:0 0 1rem;opacity:.7;font-size:.92rem}
.svb-h{font-family:Georgia,"Times New Roman",serif;font-size:1.35rem;margin:1.6rem 0 .8rem}
.svb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.svb-tile{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;text-align:left;width:100%;padding:14px;border:1px solid var(--svb-line);
  border-radius:16px;background:#fff!important;color:inherit;font:inherit;text-decoration:none;cursor:pointer;min-height:132px;box-shadow:0 1px 2px rgba(6,26,49,.05);
  transition:border-color .15s ease,transform .15s ease}
.svb-tile:hover,.svb-tile:focus-visible{border-color:rgba(210,162,76,.7)}
.svb-tile[aria-busy="true"]{opacity:.6}
.svb-tile.is-off{cursor:default;opacity:.65}
.svb-tile .svb-icon{margin:0 0 .5rem}
.svb-tile-name{font-family:Georgia,"Times New Roman",serif;font-size:1.05rem;line-height:1.2}
.svb-tile-org{font-size:.82rem;opacity:.75;line-height:1.3;overflow-wrap:anywhere}
.svb-chip{margin-top:auto;padding-top:.45rem;font-size:.74rem;font-weight:700;color:var(--svb-gold-ink)}
.svb-chip.is-off{color:#9b3b2e}
.svb-tile-add{border-style:dashed}
.svb-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.svb-q{display:flex;align-items:center;gap:.6rem;min-height:52px;padding:.6rem .8rem;border:1px solid var(--svb-line);border-radius:14px;color:inherit;text-decoration:none;font-weight:600;font-size:.92rem}
.svb-q-icon svg,.svb-bar-item svg{width:22px;height:22px;stroke:var(--svb-gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.svb-muted{opacity:.7}
#svb-home section.sigvora-id.panel,#svb-home section.sigvora-id{background:#fff!important;background-image:none!important}
.svb-home .sigvora-id{margin:1.6rem 0 0;padding:16px 18px!important;background:#fff!important;border:1px solid var(--svb-line)!important;border-radius:16px!important;box-shadow:none!important;max-width:620px}
.svb-home .sigvora-id h2{font-size:1.2rem!important;margin:0 0 .3rem!important}
.svb-home .sigvora-id p{font-size:.88rem!important;margin:0 0 .6rem!important}
.svb-home .sigvora-id .button{width:auto!important;min-height:40px;padding:.35rem 1rem!important}
.svb-home .sigvora-id .sigvora-id-qr img{width:110px!important;height:110px!important}
/* Einstellungen gesammelt und eingeklappt */
.svb-settings{margin:2rem 0;border:1px solid var(--svb-line);border-radius:16px;padding:.2rem 1rem}
.svb-settings > summary,.svb-roles > summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;list-style:none}
.svb-settings > summary::after,.svb-roles > summary::after{content:"›";margin-left:auto;transform:rotate(90deg);transition:transform .15s ease;font-size:1.3rem;opacity:.7}
.svb-settings[open] > summary::after,.svb-roles[open] > summary::after{transform:rotate(-90deg)}
.svb-settings > summary::-webkit-details-marker,.svb-roles > summary::-webkit-details-marker{display:none}
.svb-settings .panel{border:0!important;background:none!important;padding:0 0 1rem!important;margin:0!important;box-shadow:none!important}
.svb-roles{border-top:1px solid var(--svb-line);margin-top:.5rem}
/* Untere Leiste am Handy */
.svb-bar{display:none}

/* Anwendungen (Fit, Hotel, Garten …): einheitlicher Rahmen */
nav.business-account-bar.svb-old-hidden{display:none!important}
html.svb-app #theme{display:none!important} /* keine Auswahl „Darstellung“ */
.svb-appbar{display:flex;align-items:center;gap:.6rem;max-width:1100px;margin:12px auto 0;padding:0 18px}
.svb-appbar .svb-icon{margin:0;width:36px;height:36px;border-radius:10px}
.svb-appbar .svb-icon svg{width:20px;height:20px}
.svb-appname{font-family:Georgia,"Times New Roman",serif;font-size:1.15rem}
.svb-back{display:inline-flex;align-items:center;gap:.2rem;min-height:40px;padding:.3rem .8rem .3rem .6rem;margin-right:.3rem;border:1px solid var(--svb-line);border-radius:999px;color:inherit;text-decoration:none;font-size:.85rem;font-weight:600}
.svb-back span[aria-hidden]{font-size:1.2rem;line-height:1}
/* Registerkarten der Anwendung als ruhige Pillen */
html.svb-app nav#tabs{display:flex;gap:8px;flex-wrap:wrap}
html.svb-app nav#tabs > *{border-radius:999px!important;min-height:40px}
html.svb-app nav#tabs [aria-selected="true"],html.svb-app nav#tabs [aria-current="page"],html.svb-app nav#tabs .active{background:var(--svb-navy)!important;color:#fffaf0!important;border-color:var(--svb-navy)!important}
/* alte Fußzeile der Anwendungen (Zurück · Vorschau) ist durch die SIGVORA-Fußzeile ersetzt */
html.svb-app body > footer:not(.sv-shell-footer){display:none!important}

/* ============ Handy (bis 767 px) ============ */
@media (max-width:767px){
  /* Anwendungen als kompakte Symbol-Kacheln in zwei Spalten */
  #products .product-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
  #products .product-card{position:relative;min-height:0!important;padding:14px!important;border:1px solid var(--svb-line)!important;
    border-radius:16px!important;box-shadow:none!important;overflow:hidden}
  #products .product-card .sv-card-image{display:none!important}
  #products .product-card .svb-icon{display:inline-flex}
  #products .product-card .sv-card-content{padding:0!important}
  #products .product-card h3{font-size:1.05rem!important;line-height:1.2!important;margin:0 0 .3rem!important;hyphens:none;overflow-wrap:break-word}
  #products .product-card p{font-size:.84rem!important;line-height:1.35!important;margin:0!important;opacity:.85;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* ganze Kachel antippbar, Link-Text ausgeblendet */
  #products .product-card .sv-card-link{position:static!important;font-size:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:none!important}
  #products .product-card .sv-card-link::after{content:"";position:absolute;inset:0;border-radius:16px}
  #products > h2{font-size:1.6rem!important;margin-bottom:1rem!important}

  /* Startseite: Kopfbereich kompakter, damit die Kacheln früher sichtbar sind */
  body.sv-business-showcase .hero{min-height:0!important;padding-top:2rem!important;padding-bottom:2rem!important}
  body.sv-business-showcase .hero h1{font-size:2.15rem!important;line-height:1.08!important}

  /* Alte Seiten: ruhiger, gleiche Abstände wie Startseite */
  html.svb-shell main.wrap{padding-left:18px!important;padding-right:18px!important}
  html.svb-shell main .hero{padding-top:1.5rem!important}
  html.svb-shell main h1{font-size:2.2rem!important;line-height:1.1!important}
  html.svb-shell main h2{font-size:1.45rem!important;margin-top:2rem!important}
  html.svb-shell main .two-cols{display:block!important}
  html.svb-shell main .button:not(.secondary),html.svb-shell main a.button:not(.secondary){display:inline-flex;align-items:center;justify-content:center;width:100%;
    border-radius:999px;background:var(--svb-gold)!important;border-color:var(--svb-gold)!important;color:#1b1406!important;font-weight:700}
  html.svb-shell main .button.secondary{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:transparent!important;border:1px solid var(--svb-gold)!important;color:inherit!important;font-weight:600}
  /* SIGVORA-ID kompakt: QR nur am Computer */
  .svb-home .sigvora-id{padding:14px!important}
  .svb-home .sigvora-id h2{font-size:1.15rem!important;margin:0 0 .3rem!important}
  .svb-home .sigvora-id p{font-size:.85rem!important}
  .svb-home .sigvora-id .sigvora-id-qr{display:none!important}
  .svb-home .sigvora-id .sigvora-id-code{font-size:.9rem!important}
  .svb-home .sigvora-id .button{width:auto!important;min-height:40px;padding:.35rem 1rem!important}
  /* Mein Business: zwei Spalten, untere Leiste wie Crew/SPV-Wallet */
  .svb-grid{grid-template-columns:1fr 1fr;gap:10px}
  .svb-quick{grid-template-columns:1fr 1fr}
  .svb-title{font-size:1.9rem}
  .svb-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:space-around;align-items:stretch;
    height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--svb-navy);border-top:1px solid rgba(210,162,76,.35)}
  .svb-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fffaf0!important;text-decoration:none;font-size:.68rem;font-weight:600}
  .svb-bar-item[aria-current="page"]{color:var(--svb-gold)!important}
  html.svb-has-bar body{padding-bottom:calc(76px + env(safe-area-inset-bottom))!important}
  html.svb-has-bar .sv-help-launcher,html.svb-has-bar [class*="help-floating"],html.svb-has-bar .help-button{bottom:calc(80px + env(safe-area-inset-bottom))!important}
  /* Anwendungen am Handy: Registerkarten waagerecht wischbar und oben haftend, Kopf kompakt */
  html.svb-app nav#tabs{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    position:sticky;top:0;z-index:20;margin:0 -18px!important;padding:8px 18px!important;background:var(--surface,#f4f6f7)}
  html.svb-app nav#tabs::-webkit-scrollbar{display:none}
  html.svb-app nav#tabs > *{flex:none;white-space:nowrap}
  html.svb-app main .hero{padding-top:.5rem!important;padding-bottom:.5rem!important;min-height:0!important}
  html.svb-app main .hero h1,html.svb-app main h1{font-size:1.8rem!important;line-height:1.1!important}
  .svb-appbar{padding:0 14px}
  .svb-back-t{display:none}
  /* Karten auf alten Seiten nicht beige, sondern wie die SIGVORA-Kacheln */
  html.svb-shell main .card,html.svb-shell main .panel{background:rgba(255,255,255,.04)!important;border:1px solid var(--svb-line)!important;border-radius:16px!important}
}

/* ============ Computer (ab 768 px) ============ */
@media (min-width:768px){
  /* Anwendungen: ruhiges Raster, kleinere Bilder, Symbol über dem Titel */
  #products{max-width:1200px;margin-left:auto!important;margin-right:auto!important}
  #products .product-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:20px!important}
  #products .product-card{position:relative;border-radius:18px!important;overflow:hidden;transition:transform .15s ease,border-color .15s ease}
  #products .product-card:hover{transform:translateY(-2px)}
  #products .product-card .sv-card-image img{height:170px!important;width:100%!important;object-fit:cover!important;aspect-ratio:auto!important}
  #products .product-card .svb-icon{display:inline-flex;margin-top:.2rem}
  #products .product-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  #products .product-card .sv-card-link::after{content:"";position:absolute;inset:0}

  /* Alte Seiten: mittig mit lesbarer Breite */
  html.svb-shell main.wrap{max-width:1100px;margin-left:auto;margin-right:auto}
  html.svb-shell main .button:not(.secondary),html.svb-shell main a.button:not(.secondary){border-radius:999px;background:var(--svb-gold)!important;border-color:var(--svb-gold)!important;color:#1b1406!important;font-weight:700;padding:.7rem 1.4rem}
  html.svb-shell main .button.secondary{border-radius:999px;background:transparent!important;border:1px solid var(--svb-gold)!important;color:inherit!important;font-weight:600;padding:.6rem 1.2rem}
  /* Mein Business am Computer: mittig, Kacheln in einer Reihe */
  .svb-home{max-width:1100px}
  .svb-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
  .svb-tile:hover{transform:translateY(-2px)}
  .svb-quick{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){#products .product-card{transition:none!important}#products .product-card:hover{transform:none!important}}

/* Kern-Block auf der Business-Startseite: im Seitenraster mit runden Ecken */
main .sigvora-kern{border-radius:24px;margin:8px 0 40px}
@media (max-width:767px){main .sigvora-kern{border-radius:18px;margin:0 0 28px}}