:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4f1ef;background:#242122}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;padding:20px 20px max(8px, env(safe-area-inset-bottom));display:grid;grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr) auto;justify-items:center;background:radial-gradient(ellipse at 50% 25%, #46262e, transparent 65%)}
.card{width:min(520px,calc(100vw - 40px));aspect-ratio:1.65;position:relative;isolation:isolate;display:flex;border:1px solid #ffffff1a;border-radius:clamp(22px,5vw,32px);background:radial-gradient(ellipse at top right,#441217 0%,#21090c 32%,#080405 66%,#000 100%);box-shadow:0 2px 0 #ffffff09,0 24px 60px -18px #000e;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
.card::before,:is(.actions, .back-actions) .button::after,#open-review::after{content:"";position:absolute;inset:-1px;padding:2px;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 32%,#ee797e 49%,#982b30 55%,transparent 69%) 100% 0/300% 100%;mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:exclude;opacity:0}
.card-face{flex:1;display:flex;flex-direction:column;min-width:0;padding:clamp(14px,4vw,30px)}
[hidden]{display:none!important}
.card-tools,.actions{display:flex;gap:8px}
.card-tools{position:absolute;top:12px;right:12px;gap:0;color:#b4b4bb}
.logo {
  display: block;
  position: relative;
  align-self: flex-start;
  width: 54%;
  opacity: .86;
  mask-image: linear-gradient(138deg, #000 34%, #000b 60%, transparent 90%);
}
.logo img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .logo:not(.reflex-finished)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    mask: url("/assets/ar-kartenlogo.png") center / 100% 100% no-repeat;
    background: linear-gradient(108deg, transparent 44%, #ffd7dc80 50%, transparent 56%) 100% 0 / 260% 100%;
    animation: logo-reflex 950ms .3s ease-out both;
  }
}
@keyframes logo-reflex {
  0% { opacity: 0; background-position: 100% 0; }
  20%, 75% { opacity: 1; }
  100% { opacity: 0; background-position: 0 0; }
}
.actions{margin-top:auto;justify-content:center;gap:9px}
.actions .button{position:relative;width:44px;height:44px}
.button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:99px;padding:0;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.primary{background:#a32b32;color:#fff}
.secondary{background:#171719;border-color:#ffffff18;color:#f5f5f7}
#card-front .actions .primary {
  background: linear-gradient(150deg, #a13247, #68182a);
  border-color: #ec87953b;
  box-shadow: inset 0 1px 0 #ffffff21, 0 3px 9px #0005;
}
#card-front .actions .secondary {
  background: linear-gradient(150deg, #29282c, #19191b);
  border-color: #ffffff24;
  box-shadow: inset 0 1px 0 #ffffff12, 0 3px 9px #0005;
}
#card-front .actions .button svg { width: 18px; height: 18px; stroke-width: 1.7; }
#card-front .actions .button:active { filter: brightness(.9); }
.card-tools .button svg{width:16px;height:16px}
.button:active{background:#ffffff26}
:focus-visible{outline:2px solid #ed9a9f;outline-offset:3px}
.card:focus{outline:none}
.card-back{justify-content:space-between;gap:6px}
.eyebrow{margin:0 0 6px;color:#aaaab1;font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
h1{font-size:clamp(1.12rem,4.4vw,1.75rem);line-height:1.14;letter-spacing:-.045em;margin:0}
h1 span{color:#ec8b90}
address{display:grid;gap:5px;font-style:normal;font-size:clamp(.75rem,2.5vw,.92rem);line-height:1.45;color:#b4b4bb;overflow-wrap:anywhere}
.website{align-self:flex-start;padding:0 13px;font-size:.78rem;font-weight:600}
.card{grid-row:2}
.card-footer{grid-row:3;margin-top:20px;text-align:center}
.card-dots { position: relative; display: flex; justify-content: center; gap: 7px; width: fit-content; margin-inline: auto; }
.card-dots span { width: 6px; height: 6px; border-radius: 50%; background: #74686a; }
.card-dots .card-dot-active { position: absolute; inset: 0 auto auto 0; background: #f28f95; }
.card.is-back ~ .card-footer .card-dot-active { translate: 13px 0; }
#card-status{margin:7px 0 0;font-size:.8rem;color:#ead9da}
#card-status:empty{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
dialog{width:min(calc(100% - 30px),410px);border:1px solid #ffffff20;border-radius:25px;background:#151517;color:inherit;padding:23px}
dialog::backdrop{background:#0c090bb0}
dialog h2{font-size:1.1rem;margin:0 44px 14px 0}
dialog h2:focus{outline:none}
dialog img{display:block;max-width:100%;height:auto;margin:0 auto 15px;background:white;border-radius:8px}
dialog label{display:grid;gap:6px;font-size:.8rem}
dialog input{width:100%;padding:10px;font:inherit;border-radius:8px;border:1px solid #645456}
.close{position:absolute;top:12px;right:12px;gap:0;color:#b4b4bb;font-size:1.35rem}
@keyframes reflex{0%{opacity:0;background-position:100% 0}5%,16%{opacity:.8}23%,100%{opacity:0;background-position:0 0}}
@media(prefers-reduced-motion:no-preference){.card::before,:is(.actions, .back-actions) .button::after,#open-review::after{animation:reflex 6s .15s ease-out infinite}}
@media(hover:hover){.button:hover{filter:brightness(1.14)}}

#contact-form {
  display: grid;
  gap: 12px;
}
#contact-form label { font-weight: 650; }
#contact-form input, #contact-form textarea, .review-label input, .review-label textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ffffff30;
  border-radius: 10px;
  background: #202022;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
}
#contact-form textarea, .review-label textarea { resize: vertical; }
#contact-form p { font-size: .8rem; line-height: 1.45; color: #b4b4bb; margin: 0; }
#contact-form button { padding-inline: 16px; min-height: 48px; font-weight: 650; }
#contact-dialog, #review-dialog { width: min(calc(100% - 28px), 440px); max-height: calc(100svh - 28px); padding: 26px; }
#contact-title:focus { outline: none; }
@media (max-width: 540px) {
  #contact-dialog, #review-dialog {
    position: fixed;
    inset: auto 0 0;
    margin: 0;
    width: 100%;
    max-width: none;
    border-radius: 26px 26px 0 0;
    padding-bottom: max(26px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 540px) and (prefers-reduced-motion: no-preference) {
  #contact-dialog[open], #review-dialog[open] { animation: contact-sheet-in .26s ease-out both; }
}
@keyframes contact-sheet-in {
  from { transform: translateY(32px); opacity: .65; }
  to { transform: translateY(0); opacity: 1; }
}

.back-actions { display: flex; align-items: center; gap: 8px; }
.back-actions .button { position: relative; }
.back-heading { padding-inline-end: 46px; }
#open-review { position: absolute; top: 12px; right: 12px; }
.review-business { display: flex; align-items: center; gap: 12px; padding-right: 32px; margin-bottom: 20px; }
.review-business img { flex: none; object-fit: contain; background: transparent; margin: 0; }
.review-business h2 { margin: 0; }
.review-business p { margin: 4px 0 0; }
.review-business p, .review-step-label, .review-privacy, #rating-label, #review-status { color: #b4b4bb; font-size: .85rem; }
.review-step-label { margin-bottom: 15px; }
.rating-field { padding: 0; margin: 0 0 14px; border: 0; min-width: 0; }
.rating-field legend { font-weight: 650; margin-bottom: 10px; }
.rating-stars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rating-stars .rating-star { position: relative; place-items: center; min-height: 48px; border-radius: 10px; background: #232326; color: #a0a0a9; font-size: 1.65rem; cursor: pointer; }
.rating-star input { position: absolute; inset: 0; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rating-stars .rating-star.active { background: #3d171a; color: #ffa6ac; }
.rating-star:has(input:focus-visible) { outline: 2px solid #ed9a9f; outline-offset: 2px; }
.review-next:disabled { opacity: .5; cursor: default; }
.review-label { font-weight: 650; }
.review-label + .review-label { margin-top: 10px; }
.review-privacy { line-height: 1.5; }
.review-buttons { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.review-back { color: #ed9a9f; }
#review-form .primary { padding-inline: 16px; font-weight: 650; }
#contact-status:empty, #review-status:empty { display: none; }
.review-success { text-align: center; }
.review-success svg { width: 58px; stroke: #ed9a9f; stroke-width: 4; }

#contact-status { margin: 12px 0 0; color: #b4b4bb; font-size: .85rem; line-height: 1.5; }

.save-card {
  gap: 7px;
  padding: 0 10px;
  color: #ead9da;
  font-size: .8rem;
  font-weight: 650;
}
.save-card svg { width: 17px; height: 17px; color: #ed9a9f; }
#save-dialog {
  max-height: calc(100svh - 28px);
  background: linear-gradient(150deg, #291c20, #171416);
}
#save-title { margin-bottom: 6px; }
#save-dialog > p { margin: 0 0 16px; color: #d2c1c5; font-size: .85rem; line-height: 1.5; }
.save-platform { padding: 12px 14px; border: 1px solid #ffffff20; border-radius: 14px; background: #ffffff07; }
.save-platform + .save-platform { margin-top: 10px; }
.save-platform h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 7px; font-size: .95rem; }
.save-platform h3 span { color: #d2c1c5; font-size: .74rem; font-weight: 500; }
.save-platform ol { margin: 0; padding-left: 21px; font-size: .84rem; line-height: 1.5; }
.save-platform li + li { margin-top: 5px; }
.save-platform li::marker { color: #ed9a9f; font-weight: 700; }

.page-footer { grid-row: 5; text-align: center; }
.badge-credit {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: #bcb0b5;
  font-size: .625rem;
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 4px;
}
.badge-credit:hover { color: #f2b6be; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 350px) {
  .back-actions { gap: 6px; }
  .back-actions .website { padding-inline: 8px; }
}

.legal-links { display: flex; justify-content: center; gap: 14px; }
.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: #d2c1c5;
  font-size: .75rem;
  text-underline-offset: 2px;
}
#contact-form p a, .review-privacy a { color: inherit; }

#qr-dialog {
  width: min(272px, calc(100% - 28px));
  padding: 16px;
  overflow: visible;
  border: 1px solid #ffffff24;
  border-radius: 24px;
  text-align: center;
  color: #f4f1ef;
  background: radial-gradient(ellipse at top right, #441217, #21090c 45%, #080405 85%);
  box-shadow: inset 0 1px 0 #ffffff12, 0 24px 80px #0009;
}
#qr-dialog::backdrop { background: #13080bc2; backdrop-filter: blur(4px); }
#qr-dialog .close {
  top: calc(100% + 12px);
  right: auto;
  left: 50%;
  translate: -50% 0;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
}
#qr-dialog .close:hover { background: transparent; opacity: .75; }
#qr-dialog[open] { animation: none; }
#qr-dialog img { background: #1f0a11; width: 100%; margin: 0; border-radius: 10px; }
#qr-dialog img:focus { outline: none; }
#qr-dialog .qr-link { margin-top: 12px; text-align: left; }

.device-picker p { margin: 0 0 12px; color: #d2c1c5; font-size: .85rem; }
.device-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.device-options .button { flex-direction: column; padding: 12px 6px; border-radius: 14px; font-size: .8rem; }
.device-options .button svg { width: 30px; height: 30px; }
.save-dialog-actions:has(button:not([hidden])) { margin-top: 8px; }
.save-dialog-actions .button { padding: 0 8px; color: #e2c8cf; font-size: .8rem; }

@media (prefers-reduced-motion: no-preference) {
  .card { transition: box-shadow 180ms ease-out; }
  .card.is-pressed {
    box-shadow: 0 2px 0 #ffffff09, var(--press-shadow-x) calc(18px + var(--press-shadow-y)) 34px -16px #000c;
  }
  .card-dot-active { transition: translate 280ms cubic-bezier(.22, .78, .25, 1); }
}

@media (prefers-reduced-motion: no-preference) {
  .button {
    transition: transform 240ms cubic-bezier(.22, 1.48, .42, 1);
  }
  :is(.button):active:not(:disabled) {
    transform: scale(.93);
    transition: transform 90ms ease-out;
  }
  .rating-star {
    transition: background-color 140ms ease, color 140ms ease;
  }
  .rating-star.active {
    transition-delay: var(--star-delay, 0ms);
  }
  .rating-star.active span {
    animation: star-bounce 310ms var(--star-delay, 0ms) ease-out both;
  }
  .rating-star:nth-child(2) { --star-delay: 35ms; }
  .rating-star:nth-child(3) { --star-delay: 70ms; }
  .rating-star:nth-child(4) { --star-delay: 105ms; }
  .rating-star:nth-child(5) { --star-delay: 140ms; }
}

@keyframes star-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-4px) scale(1.16); }
  72% { transform: translateY(1px) scale(.96); }
}