/* Gemeinsamer Rahmen der olimodo-Unterseiten (Uhr-Homepage, Besucherzähler) im Stil von www.olimodo.com
   (Bootstrap-5-Optik ohne Bootstrap). Quelle: _server-ops-jomabe/deploy/olimodo-com/site/shared/olimodo/ */
:root {
  --om-bg: #f8f9fa;
  --om-text: #212529;
  --om-muted: #6c757d;
  --om-border: #dee2e6;
  --om-card: #fff;
  --om-dark: #212529;
  --om-dark-hover: #424649;
  --om-link: #0d6efd;
  --om-soft: #f1f3f5;
  --om-ok: #198754;
  --om-radius: 6px;
  --om-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  --om-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --om-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--om-bg);
  color: var(--om-text);
  font-family: var(--om-font);
  font-size: 1rem;
  line-height: 1.5;
}
a { color: var(--om-link); }
img { max-width: 100%; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: calc(1.375rem + 1.5vw); font-weight: 700; }
h2 { font-size: calc(1.3rem + .6vw); font-weight: 500; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1rem; }
@media (min-width: 1200px) {
  h1 { font-size: 2.35rem; }
  h2 { font-size: 1.75rem; }
}

.om-container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }

/* Kopf */
.om-kopf { background: var(--om-card); border-bottom: 1px solid var(--om-border); }
.om-kopf-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; flex-wrap: wrap; }
.om-marke { color: var(--om-text); text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.om-marke span { color: var(--om-muted); font-weight: 400; }
.om-nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.om-nav a {
  color: var(--om-text); text-decoration: none; padding: .375rem .75rem; border-radius: var(--om-radius);
  font-size: .95rem; white-space: nowrap;
}
.om-nav a:hover { background: var(--om-soft); }
.om-nav a[aria-current="page"] { background: var(--om-dark); color: #fff; }

/* Inhalt */
.om-main { padding-top: 1.5rem; padding-bottom: 3rem; }
.om-karte {
  background: var(--om-card); border: 1px solid var(--om-border); border-radius: var(--om-radius);
  box-shadow: var(--om-shadow); padding: 1.5rem; margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .om-karte { padding: 2rem; } .om-karte.om-gross { padding: 3rem; } }
.om-karte > :last-child { margin-bottom: 0; }
.om-abschnitt { margin: 2.5rem 0 1rem; }
.om-lead { font-size: 1.15rem; }
.om-muted { color: var(--om-muted); }
.om-klein { font-size: .875rem; }

.om-einstieg { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 768px) { .om-einstieg { grid-template-columns: 1fr auto; gap: 3rem; } }
.om-liste { margin: 0; padding-left: 1.25rem; font-size: .95rem; }
.om-liste li { margin-bottom: .2rem; }

/* Schritte 1–2–3 */
.om-schritte { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; counter-reset: schritt; }
@media (min-width: 768px) { .om-schritte { grid-template-columns: repeat(3, 1fr); } }
.om-schritte li {
  counter-increment: schritt; display: flex; gap: .75rem; align-items: center;
  background: var(--om-soft); border-radius: var(--om-radius); padding: .75rem 1rem; font-size: .95rem;
}
.om-schritte li::before {
  content: counter(schritt); flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--om-dark); color: #fff; display: grid; place-items: center; font-weight: 600;
}

/* Buttons */
.om-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--om-dark); color: #fff; border: 1px solid var(--om-dark); border-radius: 8px;
  padding: .5rem 1.5rem; font: inherit; font-size: 1.15rem; line-height: 1.5; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.om-btn:hover { background: var(--om-dark-hover); border-color: var(--om-dark-hover); color: #fff; }
.om-btn:focus-visible { outline: 3px solid rgba(13, 110, 253, .4); outline-offset: 2px; }
.om-btn-klein { font-size: .95rem; padding: .375rem 1rem; }
.om-btn-hell { background: var(--om-card); color: var(--om-text); border-color: var(--om-border); }
.om-btn-hell:hover { background: var(--om-soft); color: var(--om-text); border-color: var(--om-border); }

/* Code-Feld */
.om-code {
  width: 100%; min-height: 7.5rem; resize: vertical; display: block;
  font-family: var(--om-mono); font-size: .8rem; line-height: 1.45; color: var(--om-text);
  background: var(--om-bg); border: 1px solid var(--om-border); border-radius: var(--om-radius); padding: .75rem;
}
.om-code:focus { outline: 2px solid rgba(13, 110, 253, .35); outline-offset: 1px; }
.om-code-leiste { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.om-kopiert { color: var(--om-ok); font-size: .9rem; }

/* Fragen und Antworten */
.om-fragen { border-top: 1px solid var(--om-border); }
.om-fragen details { border-bottom: 1px solid var(--om-border); }
.om-fragen summary {
  cursor: pointer; list-style: none; padding: .9rem 2rem .9rem 0; font-weight: 600; position: relative;
}
.om-fragen summary::-webkit-details-marker { display: none; }
.om-fragen summary::after {
  content: "+"; position: absolute; right: .25rem; top: .7rem; font-size: 1.3rem; font-weight: 400; color: var(--om-muted);
}
.om-fragen details[open] summary::after { content: "–"; }
.om-fragen details p { margin: 0 0 1rem; color: #495057; }

/* Fließtext (Info-, Rechtstexte) */
.om-text { max-width: 860px; }
.om-text h2 { font-size: 1.5rem; margin-top: 2rem; }
.om-text h3 { margin-top: 1.5rem; }
.om-text h4 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.om-text p, .om-text li { color: #343a40; }
.om-spalten { display: grid; gap: 0 3rem; }
@media (min-width: 992px) { .om-spalten { grid-template-columns: 1fr 1fr; } }
.om-spalten h3 { margin-top: 1rem; }

/* Fuß wie in der Nuxt-App */
.om-fuss {
  background: var(--om-card); border-top: 1px solid var(--om-border); padding: 1rem 16px;
  text-align: center; font-size: .875rem; color: var(--om-muted);
}
.om-fuss a { color: var(--om-muted); }
.om-fuss a:hover { color: var(--om-text); }
.om-fuss .om-trenner { margin: 0 .5rem; }

/* Besucherzähler: Design-Auswahl und Ergebnis */
.bz-gruppe { margin: 1.5rem 0 .75rem; font-size: 1rem; color: var(--om-muted); font-weight: 600; }
.bz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.bz-kachel {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .75rem .5rem;
  background: var(--om-card); border: 1px solid var(--om-border); border-radius: var(--om-radius);
  box-shadow: var(--om-shadow); font: inherit; color: var(--om-text); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.bz-kachel:hover { border-color: #adb5bd; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1); transform: translateY(-2px); }
.bz-kachel:focus-visible { outline: 3px solid rgba(13, 110, 253, .4); outline-offset: 2px; }
.bz-kachel.bz-gewaehlt { border-color: var(--om-dark); box-shadow: 0 0 0 2px var(--om-dark); }
.bz-bild {
  display: grid; place-items: center; width: 100%; min-height: 64px; border-radius: 4px;
  background: repeating-conic-gradient(#f1f3f5 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.bz-bild img { display: block; }
.bz-label { font-size: .85rem; color: var(--om-muted); }
.bz-kachel:hover .bz-label, .bz-gewaehlt .bz-label { color: var(--om-text); font-weight: 600; }
.bz-ergebnis { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 768px) { .bz-ergebnis { grid-template-columns: 1fr 220px; gap: 2.5rem; } }
.bz-vorschau { margin: 0; text-align: center; }
.bz-vorschau img {
  display: block; margin: 0 auto .5rem; padding: 1rem; border-radius: var(--om-radius);
  background: repeating-conic-gradient(#f1f3f5 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.bz-hinweis { margin-top: 1rem; }
.bz-schritte-titel { margin-top: 1.5rem; }
.bz-transparent { font-weight: 600; }
#designs form { margin-top: 1.5rem; }
.bz-ergebnis + form { margin-top: 2rem; }

.om-karte > :first-child { margin-top: 0; }
@media (max-width: 420px) {
  .om-kopf-inner { gap: .5rem; }
  .om-marke { font-size: 1.1rem; }
  .om-nav a { padding: .3rem .55rem; font-size: .875rem; }
}