/* =====================================================================
   Omnio Sport, Startseite (Dachmarke, Daniel 20.10.2026): nur die zwei
   Bereichskarten und die Knöpfe in den Bereichsfarben. Alles andere kommt aus
   basis.css, website.css und marke.css (Bereich „omnio“: Anthrazit und Creme).
   ===================================================================== */
:root{--ss:#1670BA; --ss-hover:#125f9f; --ps:#7CB518; --ps-hover:#6aa012; --ps-text:#4a7a0a}

.btn-ss{background:var(--ss);color:#fff}
.btn-ss:hover{background:var(--ss-hover)}
.btn-ps{background:var(--ps);color:var(--dark)}
.btn-ps:hover{background:var(--ps-hover)}
.hero .actions{display:flex;flex-wrap:wrap;gap:10px}
.hero h1 em{color:var(--ps-text)}

.bereiche{display:grid;gap:18px;margin-top:8px}
.bereich{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--ss);border-radius:var(--r);padding:24px 20px}
.bereich-ps{border-top-color:var(--ps)}
.bereich-logo{width:auto;height:64px;max-width:100%;align-self:flex-start}
.bereich p{color:var(--ink);line-height:1.6}
.bereich .check-list{margin:0}
.bereich-ss .check-list li::before{background-color:var(--ss)}
.bereich-ps .check-list li::before{background-color:var(--ps-text)}
.bereich-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.bereich-knoepfe .btn svg{width:18px;height:18px}
/* Nebeneinander: Logo, Text, Liste und Knöpfe stehen in beiden Karten auf gleicher Höhe, in jeder Breite
   (gemeinsames Zeilenraster; Daniel, 20.10.2026: „Optisch angleichen“) */
@media (min-width:860px){
  .bereiche{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
  .bereich{display:grid;grid-template-rows:subgrid;grid-row:span 4;padding:32px 28px}
  .bereich > *{align-self:start}
  .bereich-logo{height:76px;justify-self:start}
}
@media (max-width:359px){.bereich-logo{height:52px}}

/* Ruhiger Stil nach Apple (Daniel, 21.10.2026: „bitte auch für OMNIO“): Knöpfe in den Bereichsfarben, Karten als große Kacheln */
.ap-knopf-ss{background:var(--ss);color:#fff}
.ap-knopf-ss:hover{background:var(--ss-hover)}
.ap-knopf-ps{background:var(--ps);color:var(--dark)}
.ap-knopf-ps:hover{background:var(--ps-hover)}
.ap .bereiche{gap:20px;margin-top:0}
.ap .bereich{background:#fff;border:0;border-radius:28px;padding:28px}
.ap section:not(.ap-grau) .bereich{background:var(--ap-grau)}
.ap .bereich p{color:var(--ap-mut);font-size:1.02rem;line-height:1.5}
.ap .bereich .btn{border-radius:999px}
@media (min-width:860px){.ap .bereich{padding:36px 32px}}
@media (prefers-contrast:more){.ap .bereich{box-shadow:inset 0 0 0 1px #6e6e73}}