@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/open-sans-latin-400-normal.woff2') format('woff2');
}
:root {
  --ink: #000000;
  --paper: #ffffff;
  --muted: #595959;
  --s: clamp(88px, 16vw, 168px);   /* Groesse des Kreislogos */
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Open Sans', Arial, sans-serif;
}
main { display: grid; place-items: center; padding: 48px 16px; }
.lockup { display: flex; align-items: center; gap: calc(var(--s) * 0.2); }
.booking { display: block; height: calc(var(--s) * 0.286); width: auto; overflow: visible; }

.stp-flip { width: var(--s); height: var(--s); perspective: calc(var(--s) * 6); cursor: pointer; border-radius: 50%; }
.stp-flip:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.stp-flip__card {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.stp-flip__front, .stp-flip__back {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.stp-flip__back { transform: rotateY(180deg); }
.stp-flip svg { display: block; width: 100%; height: 100%; }

footer { position: relative; display: flex; justify-content: center; padding: 24px 16px 32px; font-size: 13px; }
.imprint-link { font: inherit; color: var(--muted); background: none; border: 0; padding: 8px 10px; cursor: pointer; }
.imprint-link:hover { color: var(--ink); text-decoration: underline; }
.version { position: absolute; right: 16px; bottom: 12px; font-size: 10px; color: #8a8a8a; }

.sheet { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px 16px;
  background: rgba(255,255,255,0.96); overflow-y: auto; opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s; }
.sheet.open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.sheet-inner { width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; font-size: 13px; line-height: 1.55; color: #333333; }
.sheet h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.sheet h3 { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--ink); }
.sheet p { margin: 0; }
.close { align-self: flex-start; font: inherit; color: #333333; background: none; border: 1px solid #cccccc; border-radius: 4px; padding: 8px 14px; cursor: pointer; }
.close:hover { color: var(--ink); border-color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .stp-flip__card { transition: none; }
}