:root{
  --black:#0a0505;
  --felt:#4a0e14;
  --felt-2:#7a1420;
  --felt-deep:#170506;
  --gold:#c9a24a;
  --gold-light:#f0d488;
  --gold-glow: rgba(240,212,136,0.55);
  --gold-dim: rgba(201,162,74,0.3);
  --ivory:#f4ecd8;
  --ivory-2:#eee2c4;
  --red:#9c1b28;
  --ink:#241d12;
  --muted:#7a6f52;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html{scroll-behavior:smooth;}

/* ================= PAGE TRANSITIONS ================= */
body.page-enter{
  animation: pageIn 0.35s cubic-bezier(.2,.7,.2,1) forwards;
}
body.page-exit{
  animation: pageOut 0.28s cubic-bezier(.6,0,1,.4) forwards;
  pointer-events:none;
}
@keyframes pageIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes pageOut{
  from{ opacity:1; transform:translateY(0); }
  to{ opacity:0; transform:translateY(-10px); }
}
body{
  margin:0;
  background: var(--felt-deep);
  background-image: radial-gradient(120% 60% at 50% 0%, var(--felt-2) 0%, var(--felt) 40%, var(--felt-deep) 78%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100vh;
  color:var(--ivory);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3, .serif{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0;
}

a{color:inherit;}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ================= NAV ================= */
.site-nav{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:center;
  gap:2rem;
  padding:1.1rem 1.5rem;
  background:rgba(23,5,6,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gold-dim);
}
.site-nav a{
  font-family:'Fraunces', serif;
  font-size:0.95rem;
  color:var(--ivory-2);
  text-decoration:none;
  padding-bottom:0.2rem;
  border-bottom:1px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.site-nav a:hover, .site-nav a.active{
  color:var(--gold-light);
  border-color:var(--gold);
}

/* ================= COUNTDOWN POPUP ================= */
.countdown-popup{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  height:100dvh;
  margin:0;
  background:rgba(10,5,5,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;
  padding:1.5rem;
  opacity:1;
  transition: opacity 0.35s ease;
  backdrop-filter:blur(4px);
}
.countdown-popup.hidden{
  opacity:0;
  pointer-events:none;
}
.countdown-popup-inner{
  position:relative;
  background: linear-gradient(180deg, var(--felt) 0%, var(--felt-deep) 100%);
  border:1px solid var(--gold-dim);
  padding:2.2rem 2.5rem;
  max-width:400px;
  width:100%;
  text-align:center;
}
.countdown-popup-inner::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid var(--gold);
  pointer-events:none;
}
.countdown-close{
  position:absolute;
  top:0.5rem;
  right:0.6rem;
  background:none;
  border:none;
  color:var(--gold-dim);
  font-size:1.1rem;
  cursor:pointer;
  width:1.8rem;
  height:1.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 0.2s ease;
}
.countdown-close:hover{ color:var(--gold-light); }
.countdown-label{
  font-family:'Fraunces',serif;
  font-style:italic;
  color:var(--gold-light);
  font-size:1rem;
  margin:0 0 1.2rem;
}
.countdown-grid{
  display:flex;
  justify-content:center;
  gap:1.4rem;
}
.countdown-grid > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:3.6rem;
}
.countdown-num{
  font-family:'Fraunces',serif;
  font-size:clamp(2rem, 6vw, 3rem);
  font-weight:600;
  color:var(--gold-light);
  line-height:1.1;
}
.countdown-unit{
  font-size:0.72rem;
  color:var(--gold-dim);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-top:0.25rem;
}
.countdown-sub{
  margin:1.1rem 0 0;
  font-size:0.8rem;
  color:var(--gold-dim);
}

/* ================= HERO ================= */
.hero{
  position:relative;
  overflow:hidden;
  min-height:100svh;
  min-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--felt-2) 0%, var(--felt) 40%, var(--felt-deep) 78%);
  color:var(--ivory);
  padding: 5rem 1.5rem;
  text-align:center;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(240,212,136,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity:0.6;
  pointer-events:none;
}
.spotlight{
  position:absolute;
  top:-20%;
  left:50%;
  transform:translateX(-50%);
  width:140%;
  height:70%;
  background: radial-gradient(closest-side, rgba(240,212,136,0.14), transparent 70%);
  pointer-events:none;
  animation: spotlightPulse 6s ease-in-out infinite;
}
@keyframes spotlightPulse{
  0%,100%{ opacity:0.7; }
  50%{ opacity:1; }
}

.suit-mark{
  position:absolute;
  font-family:'Fraunces', serif;
  color:var(--gold);
  opacity:0.09;
  line-height:1;
  pointer-events:none;
  user-select:none;
  animation: floatSuit 9s ease-in-out infinite;
  will-change: transform;
}
.suit-mark.one{ font-size:min(40vw, 360px); top:-8%; right:-10%; animation-duration:11s; }
.suit-mark.two{ font-size:min(22vw, 200px); bottom:-10%; left:-7%; animation-duration:8s; animation-delay:-3s; }
.suit-mark.three{ font-size:min(14vw, 120px); top:14%; left:4%; animation-duration:7s; animation-delay:-1s; opacity:0.07; }
@keyframes floatSuit{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-22px) rotate(4deg); }
}

.hero-inner{ position:relative; z-index:1; max-width:720px; transition: opacity 0.25s linear, transform 0.25s linear; }

.fly{
  opacity:0;
  transform:translateY(34px);
  animation: flyUp 0.9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes flyUp{
  to{ opacity:1; transform:translateY(0); }
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.7rem;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.05rem;
  color:var(--gold-light);
  margin-bottom:1.3rem;
  animation-delay:0.05s;
}
.eyebrow .pip{ color:var(--gold); font-style:normal; display:inline-block; animation:pipSpin 4s linear infinite; }
@keyframes pipSpin{
  0%,85%,100%{ transform:rotate(0deg); }
  92%{ transform:rotate(180deg); }
}

.hero h1{
  font-size:clamp(2.1rem, 6.6vw, 4.1rem);
  line-height:1.18;
  letter-spacing:-0.01em;
  margin:0 auto 1.4rem;
}
.tw-line{ display:block; }
.tw-line.typed-line{ white-space:nowrap; }
.typewriter{ display:inline-block; white-space:pre; }
.cursor{
  display:inline-block;
  color:var(--gold-light);
  animation: blink 0.9s steps(1) infinite;
  margin-left:2px;
}
.cursor.done{ animation:none; opacity:0; }
@keyframes blink{ 50%{ opacity:0; } }

.tw-line.rest{
  opacity:0;
  transform:translateY(26px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.tw-line.rest.show{ opacity:1; transform:translateY(0); }
.hero h1 .gold-word{
  background: linear-gradient(100deg, var(--gold) 20%, var(--gold-light) 40%, var(--gold) 60%);
  background-size: 220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  color:transparent;
}
.tw-line.rest.show .gold-word{
  animation: shimmer 3.5s linear infinite 0.4s;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

.hero p.sub{
  max-width:44ch;
  margin:0 auto;
  color:#d9cfb0;
  font-size:clamp(0.98rem, 2.4vw, 1.1rem);
  opacity:0;
  transform:translateY(22px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.hero p.sub.show{ opacity:1; transform:translateY(0); }

.hero-meta{
  margin-top:2.8rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0.4rem 0;
}
.hero-meta div{
  text-align:center;
  padding: 0 1.6rem;
  opacity:0;
  transform:translateY(24px);
  transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.hero-meta.show div:nth-child(1){ transition-delay:0s; }
.hero-meta.show div:nth-child(2){ transition-delay:0.12s; }
.hero-meta.show div:nth-child(3){ transition-delay:0.24s; }
.hero-meta.show div{ opacity:1; transform:translateY(0); }
.hero-meta div + div{ border-left:1px solid var(--gold-dim); }
.hero-meta .label{
  display:block;
  font-size:0.76rem;
  letter-spacing:0.04em;
  color:var(--gold-light);
  margin-bottom:0.3rem;
}
.hero-meta .value{
  font-family:'Fraunces', serif;
  font-size:clamp(1rem, 3vw, 1.15rem);
}

.scroll-cue{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  width:22px;
  height:36px;
  border:1.5px solid var(--gold-dim);
  border-radius:12px;
  opacity:0;
  transition: opacity 0.6s ease;
}
.scroll-cue.show{ opacity:1; }
.scroll-cue::before{
  content:"";
  position:absolute;
  top:7px; left:50%;
  width:4px; height:8px;
  background:var(--gold-light);
  border-radius:3px;
  transform:translateX(-50%);
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{ opacity:1; top:7px; }
  70%{ opacity:0; top:18px; }
  71%{ opacity:0; top:7px; }
  100%{ opacity:0; top:7px; }
}

/* ================= INTRO ================= */
.intro{
  max-width:560px;
  margin:0 auto;
  padding:4.5rem 1.5rem 1.5rem;
  text-align:center;
}
.intro h2{
  font-size:clamp(1.5rem, 4vw, 1.8rem);
  margin-bottom:1rem;
  color:var(--ivory);
}
.intro p{
  color:#c9bd9a;
  font-size:1rem;
}
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal:nth-of-type(2){ transition-delay:0.12s; }

/* ================= NAV CARDS (Startseite) ================= */
.link-section{
  padding: 1.5rem 1.2rem 5.5rem;
  display:flex;
  justify-content:center;
}
.link-wrap{
  width:100%;
  max-width:700px;
  display:grid;
  gap:1.4rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .link-wrap{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  .link-wrap{ grid-template-columns:1fr 1fr 1fr; }
}
.link-card{
  display:block;
  text-decoration:none;
  background:var(--ivory);
  color:var(--ink);
  border:1px solid var(--gold-dim);
  position:relative;
  padding:2.2rem 1.6rem;
  text-align:center;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6);
  opacity:0;
  transform:translateY(40px) scale(0.98);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease;
}
.link-card.in-view{ opacity:1; transform:translateY(0) scale(1); }
.link-card::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid var(--gold);
  pointer-events:none;
}
.link-card .pip-row{
  letter-spacing:0.5rem;
  color:var(--gold);
  font-size:0.85rem;
  margin-bottom:0.9rem;
}
.link-card h3{
  font-size:clamp(1.25rem, 3.5vw, 1.5rem);
  color:var(--ink);
}
.link-card p{
  margin-top:0.6rem;
  color:var(--muted);
  font-size:0.92rem;
}
.link-card .go{
  display:inline-block;
  margin-top:1.2rem;
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--red);
  font-size:0.95rem;
}
@media (hover:hover) and (pointer:fine){
  .link-card:hover{ box-shadow: 0 10px 24px -8px var(--gold-glow); }
  .link-card:hover::after{ opacity:0.6; }
}
.link-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid var(--gold-glow);
  opacity:0;
  pointer-events:none;
  transition: opacity 0.5s ease;
}
.link-card.tap-glow::after{ opacity:0.6; }

/* ================= PAGE HEADER (Unterseiten) ================= */
.page-header{
  text-align:center;
  padding:4rem 1.5rem 1rem;
  max-width:600px;
  margin:0 auto;
}
.page-header .kicker{
  font-style:italic;
  color:var(--gold-light);
  font-size:0.9rem;
}
.page-header h1{
  font-size:clamp(2rem, 6vw, 2.8rem);
  margin-top:0.5rem;
}
.page-header p{
  color:#c9bd9a;
  margin-top:1rem;
}

/* ================= MENU CARD ================= */
.menu-section{
  padding: 1.5rem 1.2rem 5.5rem;
  display:flex;
  justify-content:center;
}
.menu-wrap{ width:100%; max-width:560px; }
.menu-card{
  width:100%;
  background:var(--ivory);
  color:var(--ink);
  border:1px solid var(--gold-dim);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6);
  position:relative;
}
.menu-card::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid var(--gold);
  pointer-events:none;
}
.menu-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid var(--gold-glow);
  opacity:0;
  pointer-events:none;
  transition: opacity 0.5s ease;
}
@media (hover:hover) and (pointer:fine){
  .menu-card:hover::after{ opacity:0.6; }
}
.menu-card.tap-glow::after{ opacity:0.6; }

.menu-head{
  text-align:center;
  background: linear-gradient(180deg, var(--felt) 0%, var(--felt-2) 100%);
  color:var(--ivory);
  padding: 2rem 1.4rem 1.6rem;
}
.menu-head .kicker{
  font-style:italic;
  color:var(--gold-light);
  font-size:0.86rem;
}
.menu-head .title{
  font-size:clamp(1.35rem, 4.5vw, 1.7rem);
  margin-top:0.4rem;
}
.menu-head .suits{
  margin-top:0.8rem;
  letter-spacing:0.5rem;
  color:var(--gold);
  font-size:0.85rem;
}
.menu-head .suits span{
  display:inline-block;
  animation: pulseSuit 2.4s ease-in-out infinite;
}
.menu-head .suits span:nth-child(1){ animation-delay:0s; }
.menu-head .suits span:nth-child(2){ animation-delay:0.2s; }
.menu-head .suits span:nth-child(3){ animation-delay:0.4s; }
.menu-head .suits span:nth-child(4){ animation-delay:0.6s; }
@keyframes pulseSuit{
  0%,100%{ opacity:0.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.15); }
}

.menu-body{ padding: 1.6rem 1.4rem 0.5rem; }
.menu-col + .menu-col{
  margin-top:1.6rem;
  padding-top:1.6rem;
  border-top:1px dashed var(--gold-dim);
}
.menu-col h3{
  font-size:1rem;
  color:var(--red);
  letter-spacing:0.02em;
  margin-bottom:1rem;
  padding-bottom:0.5rem;
  border-bottom:1px solid var(--ivory-2);
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.menu-col h3::before{ content:"♦"; color:var(--gold); font-size:0.85rem; }

.menu-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:0.8rem;
  margin-bottom:0.35rem;
  flex-wrap:wrap;
  padding:0.6rem 0.5rem;
  margin-left:-0.5rem;
  margin-right:-0.5rem;
  border-radius:4px;
  position:relative;
  transition: background 0.25s ease, padding 0.25s ease;
}
@media (hover:hover) and (pointer:fine){
  .menu-item:hover{ background: rgba(201,162,74,0.12); padding-left:0.9rem; }
  .menu-item:hover::before{ transform:translateY(-50%) scaleY(1); }
  .menu-item:hover .dish{ color:var(--red); }
  .menu-item:hover .price{ color:var(--gold); transform:scale(1.05); }
}
.menu-item.tap-active{ background: rgba(201,162,74,0.12); padding-left:0.9rem; }
.menu-item.tap-active::before{ transform:translateY(-50%) scaleY(1); }
.menu-item.tap-active .dish{ color:var(--red); }
.menu-item.tap-active .price{ color:var(--gold); transform:scale(1.05); }

.menu-item::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%) scaleY(0);
  width:3px; height:60%;
  background:var(--gold);
  transition: transform 0.25s ease;
  transform-origin:center;
}
.menu-item .names{ flex:1 1 auto; min-width:0; }
.menu-item .dish{
  font-family:'Fraunces', serif;
  font-size:0.98rem;
  transition: color 0.25s ease;
}
.menu-item .desc{
  font-size:0.83rem;
  color:var(--muted);
  margin-top:0.15rem;
}
.menu-item .price{
  font-family:'Fraunces', serif;
  font-size:0.94rem;
  color:var(--ink);
  white-space:nowrap;
  transition: color 0.25s ease, transform 0.25s ease;
}

.menu-note{
  text-align:center;
  padding: 1rem 1.4rem 2rem;
  font-size:0.8rem;
  color:var(--muted);
  font-style:italic;
}

/* ================= DOWNLOAD BUTTONS / BTN ================= */
.card-download{
  max-width:560px;
  margin: 1.8rem auto 0;
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
  justify-content:center;
}
.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.9rem 1.7rem;
  background:var(--gold);
  color:var(--black);
  text-decoration:none;
  font-size:0.92rem;
  font-weight:600;
  font-family:'Inter', sans-serif;
  border:1px solid var(--gold);
  cursor:pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
  flex:1 1 200px;
  max-width:260px;
}
.btn::before{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-20deg);
  transition: left 0.6s ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{ left:130%; }
  .btn:hover{
    background:var(--gold-light);
    border-color:var(--gold-light);
    transform:translateY(-2px);
    box-shadow: 0 10px 24px -8px var(--gold-glow);
  }
  .btn.ghost:hover{
    background:rgba(240,212,136,0.08);
    border-color:var(--gold);
    box-shadow: 0 10px 24px -10px rgba(201,162,74,0.4);
  }
}
.btn:active{
  background:var(--gold-light);
  border-color:var(--gold-light);
  transform:translateY(-1px) scale(0.98);
  box-shadow: 0 8px 20px -8px var(--gold-glow);
}
.btn::before{ left:-60%; }
.btn.tap-active::before{ left:130%; }
.btn.ghost{
  background:transparent;
  color:var(--gold-light);
  border-color:var(--gold-dim);
}
.btn.ghost:active{
  background:rgba(240,212,136,0.08);
  border-color:var(--gold);
}
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* ================= GALERIE ================= */
.upload-section{
  max-width:560px;
  margin:0 auto;
  padding:1.5rem 1.2rem 2rem;
}
.upload-card{
  background:var(--ivory);
  color:var(--ink);
  border:1px solid var(--gold-dim);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6);
  position:relative;
  padding:1.8rem 1.5rem;
}
.upload-card::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid var(--gold);
  pointer-events:none;
}
.upload-card h3{
  font-size:1.15rem;
  color:var(--red);
  margin-bottom:1.2rem;
  text-align:center;
}
.field{ margin-bottom:1.1rem; }
.field label{
  display:block;
  font-size:0.82rem;
  color:var(--muted);
  margin-bottom:0.4rem;
  font-family:'Inter', sans-serif;
}
.field input[type="text"],
.field textarea{
  width:100%;
  border:1px solid var(--gold-dim);
  background:#fffdf7;
  color:var(--ink);
  padding:0.7rem 0.8rem;
  font-family:'Inter', sans-serif;
  font-size:0.95rem;
  border-radius:2px;
}
.field textarea{ resize:vertical; min-height:70px; }
.field input[type="file"]{
  width:100%;
  font-size:0.88rem;
  color:var(--muted);
}
.upload-status{
  text-align:center;
  font-size:0.85rem;
  margin-top:0.8rem;
  min-height:1.2em;
}
.upload-status.error{ color:var(--red); }
.upload-status.ok{ color:#3a6b2c; }

.upload-preview{
  position:relative;
  margin-bottom:1.1rem;
  border:1px solid var(--gold-dim);
  background:#fffdf7;
  overflow:hidden;
}
.upload-preview img{
  width:100%;
  max-height:260px;
  object-fit:contain;
  display:block;
  background:#000;
}
.upload-preview-remove{
  position:absolute;
  top:0.4rem;
  right:0.4rem;
  width:1.8rem;
  height:1.8rem;
  background:rgba(10,5,5,0.7);
  border:1px solid var(--gold-dim);
  color:var(--ivory);
  font-size:0.9rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.upload-progress-wrap{
  display:block;
  margin-bottom:1.1rem;
}
.upload-progress-bar{
  width:100%;
  height:6px;
  background:var(--ivory-2);
  border-radius:3px;
  overflow:hidden;
}
.upload-progress-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius:3px;
  transition: width 0.15s ease;
}
.upload-progress-text{
  display:block;
  font-size:0.82rem;
  color:var(--muted);
  text-align:right;
  margin-top:0.3rem;
}

.gallery-section{
  max-width:1100px;
  margin:0 auto;
  padding:1rem 1.2rem 5.5rem;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:1rem;
}
.gallery-item{
  position:relative;
  background:var(--ivory);
  border:1px solid var(--gold-dim);
  overflow:hidden;
  aspect-ratio:1;
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform 0.4s ease;
  cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
  .gallery-item:hover img{ transform:scale(1.06); }
}
.gallery-item-overlay{
  position:absolute;
  top:0.4rem;
  right:0.4rem;
  z-index:2;
}
.item-like-btn{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  background:rgba(10,5,5,0.65);
  border:1px solid rgba(240,212,136,0.25);
  color:var(--ivory);
  padding:0.25rem 0.5rem;
  font-family:'Inter', sans-serif;
  font-size:0.72rem;
  cursor:pointer;
  transition: background 0.2s ease, color 0.2s ease;
  backdrop-filter:blur(4px);
}
.item-like-btn:hover{
  background:rgba(10,5,5,0.85);
}
.item-like-btn.liked{
  color:var(--red);
}
.item-like-btn .heart-icon{
  transition: transform 0.3s ease;
}
.item-like-btn.liked .heart-icon{
  transform:scale(1.2);
}
.gallery-item .caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:0.6rem 0.7rem;
  background: linear-gradient(0deg, rgba(10,5,5,0.85), transparent);
  color:var(--ivory);
  font-size:0.8rem;
  font-family:'Fraunces', serif;
}
.gallery-empty{
  text-align:center;
  color:var(--muted);
  padding:2.5rem 1rem;
  font-style:italic;
}
.gallery-sentinel{
  width:100%;
  height:1px;
  grid-column:1/-1;
}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(10,5,5,0.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:2rem 1.2rem;
}
.lightbox.show{ display:flex; }
.lightbox-inner{
  max-width:640px;
  width:100%;
  background:var(--ivory);
  color:var(--ink);
  position:relative;
}
.lightbox-inner img{
  width:100%;
  max-height:60vh;
  object-fit:contain;
  background:#000;
  display:block;
}
.lightbox-text{ padding:1.2rem 1.4rem; }
.lightbox-text h4{ font-size:1.1rem; color:var(--red); }
.lightbox-text p{ margin-top:0.5rem; color:var(--muted); font-size:0.92rem; }
.lightbox-actions{
  display:flex;
  align-items:center;
  gap:0.8rem;
  margin-top:1rem;
  flex-wrap:wrap;
}
.lightbox-like-btn{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  background:transparent;
  border:1px solid var(--gold-dim);
  color:var(--ink);
  padding:0.55rem 1rem;
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lightbox-like-btn:hover{
  background:rgba(156,27,40,0.08);
  border-color:var(--red);
}
.lightbox-like-btn.liked{
  color:var(--red);
  border-color:var(--red);
  background:rgba(156,27,40,0.06);
}
.lightbox-like-btn .heart-icon{
  transition: transform 0.3s ease;
}
.lightbox-like-btn.liked .heart-icon{
  transform:scale(1.15);
}
.lightbox-share-btn{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  background:var(--gold);
  color:var(--black);
  border:1px solid var(--gold);
  padding:0.55rem 1.1rem;
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-share-btn:hover{
  background:var(--gold-light);
  transform:translateY(-1px);
}
.lightbox-share-toast{
  font-size:0.82rem;
  color:#3a6b2c;
  opacity:0;
  transition: opacity 0.3s ease;
}
.lightbox-share-toast.show{ opacity:1; }
.lightbox-share-fallback{
  display:flex;
  gap:0.5rem;
  margin-top:0.7rem;
  align-items:center;
}
.share-url-input{
  flex:1;
  min-width:0;
  border:1px solid var(--gold-dim);
  background:#fffdf7;
  color:var(--ink);
  padding:0.45rem 0.6rem;
  font-family:'Inter', sans-serif;
  font-size:0.78rem;
  border-radius:2px;
}
.share-copy-btn{
  flex-shrink:0;
  background:var(--felt);
  color:var(--gold-light);
  border:1px solid var(--gold-dim);
  padding:0.45rem 0.8rem;
  font-family:'Inter', sans-serif;
  font-size:0.78rem;
  font-weight:600;
  cursor:pointer;
  transition: background 0.2s ease;
}
.share-copy-btn:hover{ background:var(--felt-2); }
.share-not-found{
  text-align:center;
  padding:1.5rem 1rem;
  margin:2rem auto;
  max-width:460px;
  background:#fffdf7;
  border:1px solid var(--gold-dim);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:0.88rem;
}
.lightbox-close{
  position:absolute;
  top:-2.6rem;
  right:0;
  background:none;
  border:1px solid var(--gold-dim);
  color:var(--ivory);
  width:2.2rem;
  height:2.2rem;
  cursor:pointer;
  font-size:1.1rem;
}
.lightbox-delete{
  margin:0 1.4rem 1.2rem;
}

/* ================= FOOTER ================= */
footer{
  text-align:center;
  padding: 2.5rem 1.5rem 3rem;
  font-size:0.85rem;
  color:#93876a;
}
footer .pip{ color:var(--gold); display:inline-block; animation:pipSpin 4s linear infinite; }

/* ================= TABLET / iPAD (768–1024px) ================= */
@media (min-width: 700px){
  .menu-wrap{ max-width:700px; }
  .menu-body{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 2rem;
    padding: 1.9rem 1.8rem 0.6rem;
  }
  .menu-col + .menu-col{
    margin-top:0;
    padding-top:0;
    border-top:none;
    border-left:1px dashed var(--gold-dim);
    padding-left:2rem;
  }
  .card-download{ max-width:700px; }
}
@media (min-width: 768px) and (max-width: 1024px){
  .hero{ min-height:82vh; padding: 5.5rem 2rem; }
  .hero-inner{ max-width:820px; }
  .intro{ max-width:640px; padding-top:5.5rem; }
  .menu-section{ padding-top:2rem; }
  .menu-head{ padding: 2.4rem 1.8rem 1.9rem; }
  .menu-head .title{ font-size:clamp(1.6rem, 3vw, 1.95rem); }
  .menu-item .dish{ font-size:1.02rem; }
}

/* ================= GALLERY FILTER BAR ================= */
.filter-bar{
  max-width:1100px;
  margin:0 auto 1.4rem;
  padding:0 1.2rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:0.7rem;
}
.filter-bar label{
  font-size:0.85rem;
  color:var(--gold-light);
  font-family:'Inter', sans-serif;
}
.filter-bar select{
  background:var(--ivory);
  color:var(--ink);
  border:1px solid var(--gold-dim);
  padding:0.5rem 0.8rem;
  font-family:'Inter', sans-serif;
  font-size:0.88rem;
  border-radius:2px;
  cursor:pointer;
}

.search-input{
  flex:1 1 200px;
  min-width:160px;
  border:1px solid var(--gold-dim);
  background:var(--ivory);
  color:var(--ink);
  padding:0.5rem 0.8rem;
  font-family:'Inter', sans-serif;
  font-size:0.88rem;
  border-radius:2px;
  transition: border-color 0.2s ease;
}
.search-input:focus{
  outline:none;
  border-color:var(--gold);
}
.search-input::placeholder{
  color:var(--muted);
}

.quality-label{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  cursor:pointer;
  user-select:none;
}
.quality-toggle{
  appearance:none;
  -webkit-appearance:none;
  width:2rem;
  height:1.1rem;
  background:var(--ivory-2);
  border:1px solid var(--gold-dim);
  border-radius:6px;
  position:relative;
  cursor:pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.quality-toggle::after{
  content:'';
  position:absolute;
  top:1px;
  left:1px;
  width:0.8rem;
  height:0.8rem;
  background:var(--gold-dim);
  border-radius:50%;
  transition: transform 0.2s ease, background 0.2s ease;
}
.quality-toggle:checked{
  background:var(--gold);
  border-color:var(--gold);
}
.quality-toggle:checked::after{
  transform:translateX(0.9rem);
  background:var(--felt-deep);
}
.quality-text{
  font-size:0.78rem;
  font-weight:600;
  color:var(--gold-light);
  letter-spacing:0.04em;
}

/* ================= LIGHTBOX META ================= */
.lightbox-text .meta{
  margin-top:0.6rem;
  font-size:0.8rem;
  color:var(--muted);
  font-style:italic;
}

/* ================= FOOTER ADMIN LINK ================= */
.admin-link{
  display:block;
  margin-top:0.8rem;
  font-size:0.72rem;
  color:#5c5138;
  text-decoration:none;
}
.admin-link:hover{ color:var(--gold-dim); }

/* ================= ADMIN LOGIN / PANEL ================= */
.admin-wrap{
  max-width:560px;
  margin:0 auto;
  padding:1.5rem 1.2rem 5.5rem;
}
.admin-error{
  color:var(--red);
  background:rgba(156,27,40,0.08);
  border:1px solid var(--red);
  padding:0.7rem 0.9rem;
  font-size:0.88rem;
  margin-bottom:1.2rem;
  text-align:center;
}
.admin-panel-wrap{
  max-width:900px;
  margin:0 auto;
  padding:1.5rem 1.2rem 5.5rem;
}
.admin-tabs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-bottom:1.8rem;
  border-bottom:1px solid var(--gold-dim);
  padding-bottom:0.9rem;
}
.admin-tab{
  background:transparent;
  border:1px solid var(--gold-dim);
  color:var(--ivory-2);
  font-family:'Inter', sans-serif;
  font-size:0.88rem;
  padding:0.55rem 1.1rem;
  border-radius:2px;
  cursor:pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.admin-tab:hover{ color:var(--gold-light); border-color:var(--gold); }
.admin-tab.active{
  background:var(--gold);
  color:var(--felt-deep);
  border-color:var(--gold);
  font-weight:600;
}
.admin-logout{ margin-left:auto; }
.admin-tab-panel{ animation: fadeInTab 0.25s ease; }
@keyframes fadeInTab{ from{ opacity:0; } to{ opacity:1; } }
.admin-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:0.8rem;
  margin-bottom:1.5rem;
}
.admin-bar p{ color:#c9bd9a; font-size:0.92rem; margin:0; }
.admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:1.1rem;
}
.admin-item{
  background:var(--ivory);
  border:1px solid var(--gold-dim);
  overflow:hidden;
  position:relative;
}
.admin-item img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}
.admin-item .admin-meta{
  padding:0.8rem 0.9rem 0.4rem;
}
.admin-item .admin-meta .titel{
  font-family:'Fraunces', serif;
  font-size:1rem;
  color:var(--ink);
}
.admin-item .admin-meta .datum{
  font-size:0.75rem;
  color:var(--muted);
  margin-top:0.2rem;
}
.admin-item .admin-actions{
  padding:0.6rem 0.9rem 0.9rem;
}
.admin-delete-btn{
  width:100%;
  padding:0.55rem 0.8rem;
  background:transparent;
  border:1px solid var(--red);
  color:var(--red);
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.admin-delete-btn:hover{ background:var(--red); color:var(--ivory); }
.admin-delete-btn:disabled{ opacity:0.5; cursor:not-allowed; }
.admin-empty{
  text-align:center;
  color:var(--muted);
  font-style:italic;
  padding:2.5rem 1rem;
}

/* ---- Danke-Seite ---- */
.danke-section{
  max-width:1100px;
  margin:0 auto;
  padding:1rem 1.2rem 5.5rem;
}
.danke-empty{
  text-align:center;
  color:var(--ivory-2);
  opacity:0.75;
  padding:3rem 1rem;
}
.danke-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:1.2rem;
}
.danke-card{
  background:var(--ivory);
  color:var(--ink);
  border:1px solid var(--gold-dim);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6);
  padding:1.8rem 1.4rem;
  text-align:center;
  position:relative;
}
.danke-card::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid var(--gold);
  pointer-events:none;
}
.danke-logo{
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 1rem;
  display:block;
  border:2px solid var(--gold);
}
.danke-logo-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, var(--felt) 0%, var(--felt-2) 100%);
  color:var(--gold-light);
  font-family:'Fraunces', serif;
  font-size:2.2rem;
}
.danke-card h3{ margin:0 0 0.2rem; font-size:1.15rem; color:var(--red); }
.danke-rolle{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
  margin:0 0 0.8rem;
}
.danke-text{ font-size:0.92rem; margin:0; }

/* ---- Admin: Fallback-Kachel ohne Bild (Danke-Verwaltung) ---- */
.admin-item-noimg{
  width:100%;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, var(--felt) 0%, var(--felt-2) 100%);
  color:var(--gold-light);
  font-family:'Fraunces', serif;
  font-size:2.5rem;
}

/* ================= 404-SEITE ================= */
.not-found-title{
  font-family:'Fraunces', serif;
  font-size:clamp(3.5rem, 14vw, 6.5rem);
  color:var(--gold-light);
  line-height:1;
  margin-top:0.6rem;
}
.not-found-title .pip{
  color:var(--red);
  display:inline-block;
  font-size:0.6em;
  vertical-align:middle;
}

/* ================= 404 GIF ================= */
.error-404-gif{
  display:block;
  max-width:320px;
  width:80%;
  margin:1.5rem auto 0;
}

/* ================= UPLOAD ANIMATION ================= */
.upload-animation-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:0.8rem;
}
.upload-anim-gif{
  max-width:120px;
  height:auto;
}

/* ================= KOMPLETTE MOBIL-OPTIMIERUNG ================= */

/* ---- Grundlegende Mobile Anpassungen ---- */
@media (max-width: 768px){
  body{
    font-size:15px;
    line-height:1.55;
  }

  /* ---- Nav ---- */
  .site-nav{
    gap:0.8rem;
    padding:0.9rem 0.8rem;
    flex-wrap:wrap;
    justify-content:center;
  }
  .site-nav a{
    font-size:0.82rem;
    padding:0.3rem 0.5rem;
  }

  /* ---- Hero ---- */
  .hero{
    min-height:100svh;
    padding:4rem 1rem 3rem;
  }
  .hero h1{
    font-size:clamp(1.6rem, 7vw, 2.2rem);
    line-height:1.2;
  }
  .eyebrow{
    font-size:0.88rem;
    gap:0.4rem;
    margin-bottom:1rem;
  }
  .hero p.sub{
    font-size:0.92rem;
    padding:0 0.5rem;
  }
  .hero-meta{
    flex-direction:column;
    gap:0.8rem;
    margin-top:2rem;
  }
  .hero-meta div{
    padding:0.6rem 0;
    border-left:none !important;
  }
  .hero-meta div + div{
    border-top:1px solid var(--gold-dim);
  }
  .hero-meta .label{ font-size:0.7rem; }
  .hero-meta .value{ font-size:0.95rem; }

  /* ---- Suit-Marks (kleiner auf Mobile) ---- */
  .suit-mark.one{ font-size:min(30vw, 180px); }
  .suit-mark.two{ font-size:min(18vw, 100px); }
  .suit-mark.three{ font-size:min(12vw, 70px); }

  /* ---- Intro ---- */
  .intro{
    padding:3rem 1rem 1rem;
  }
  .intro h2{
    font-size:1.3rem;
  }

  /* ---- Link-Cards ---- */
  .link-section{
    padding:1rem 0.8rem 4rem;
  }
  .link-wrap{
    gap:1rem;
  }
  .link-card{
    padding:1.5rem 1.2rem;
  }
  .link-card h3{
    font-size:1.1rem;
  }
  .link-card p{
    font-size:0.85rem;
  }

  /* ---- Page Header ---- */
  .page-header{
    padding:3rem 1rem 0.5rem;
  }
  .page-header h1{
    font-size:1.8rem;
  }
  .page-header p{
    font-size:0.9rem;
  }

  /* ---- Menu ---- */
  .menu-section{
    padding:1rem 0.8rem 4rem;
  }
  .menu-head{
    padding:1.5rem 1rem 1.2rem;
  }
  .menu-head .title{
    font-size:1.2rem;
  }
  .menu-body{
    padding:1.2rem 0.8rem 0.3rem;
  }
  .menu-col h3{
    font-size:0.9rem;
  }
  .menu-item{
    padding:0.5rem 0.4rem;
    margin-left:-0.4rem;
    margin-right:-0.4rem;
  }
  .menu-item .dish{
    font-size:0.9rem;
  }
  .menu-item .desc{
    font-size:0.78rem;
  }
  .menu-item .price{
    font-size:0.85rem;
  }
  .menu-note{
    font-size:0.75rem;
    padding:0.8rem 1rem 1.5rem;
  }
  .card-download{
    flex-direction:column;
    gap:0.7rem;
  }
  .btn{
    max-width:none;
    padding:0.8rem 1.2rem;
    font-size:0.88rem;
  }

  /* ---- Upload ---- */
  .upload-section{
    padding:1rem 0.8rem 2rem;
  }
  .upload-card{
    padding:1.4rem 1rem;
  }
  .upload-card h3{
    font-size:1rem;
  }
  .field label{
    font-size:0.78rem;
  }
  .field input[type="text"],
  .field textarea{
    font-size:0.9rem;
    padding:0.6rem 0.7rem;
  }
  .upload-preview img{
    max-height:200px;
  }

  /* ---- Gallery ---- */
  .gallery-section{
    padding:0.8rem 0.8rem 4rem;
  }
  .gallery-grid{
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:0.7rem;
  }
  .gallery-item .caption{
    font-size:0.72rem;
    padding:0.4rem 0.5rem;
  }
  .item-like-btn{
    padding:0.2rem 0.4rem;
    font-size:0.68rem;
  }

  /* ---- Filter Bar ---- */
  .filter-bar{
    padding:0 0.8rem;
    gap:0.5rem;
  }
  .search-input{
    min-width:100%;
    font-size:0.85rem;
    padding:0.6rem 0.7rem;
  }
  .filter-bar select{
    font-size:0.82rem;
    padding:0.4rem 0.6rem;
  }

  /* ---- Lightbox ---- */
  .lightbox{
    padding:1rem 0.5rem;
  }
  .lightbox-inner img{
    max-height:50vh;
  }
  .lightbox-text{
    padding:1rem;
  }
  .lightbox-text h4{
    font-size:1rem;
  }
  .lightbox-text p{
    font-size:0.85rem;
  }
  .lightbox-actions{
    gap:0.5rem;
    margin-top:0.8rem;
  }
  .lightbox-like-btn,
  .lightbox-share-btn{
    padding:0.5rem 0.8rem;
    font-size:0.8rem;
  }
  .lightbox-close{
    top:-2.2rem;
    width:2rem;
    height:2rem;
    font-size:1rem;
  }

  /* ---- Countdown ---- */
  .countdown-popup-inner{
    padding:1.8rem 1.5rem;
  }
  .countdown-grid{
    gap:1rem;
  }
  .countdown-num{
    font-size:clamp(1.8rem, 8vw, 2.5rem);
  }
  .countdown-label{
    font-size:0.9rem;
  }
  .countdown-sub{
    font-size:0.75rem;
  }

  /* ---- Danke-Seite ---- */
  .danke-section{
    padding:0.8rem 0.8rem 4rem;
  }
  .danke-grid{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .danke-card{
    padding:1.4rem 1rem;
  }
  .danke-logo{
    width:72px;
    height:72px;
  }
  .danke-card h3{
    font-size:1rem;
  }

  /* ---- Admin ---- */
  .admin-panel-wrap{
    padding:1rem 0.8rem 4rem;
  }
  .admin-tabs{
    gap:0.4rem;
    padding-bottom:0.7rem;
  }
  .admin-tab{
    font-size:0.78rem;
    padding:0.45rem 0.8rem;
  }
  .admin-grid{
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:0.8rem;
  }
  .admin-item img{
    height:120px;
  }
  .admin-wrap{
    padding:1rem 0.8rem 4rem;
  }

  /* ---- 404 ---- */
  .not-found-title{
    font-size:clamp(2.5rem, 12vw, 4rem);
  }
  .error-404-gif{
    max-width:240px;
  }

  /* ---- Footer ---- */
  footer{
    padding:2rem 1rem 2.5rem;
    font-size:0.8rem;
  }

  /* ---- Scroll-Cue ---- */
  .scroll-cue{
    bottom:1.2rem;
  }

  /* ---- Buttons allgemein ---- */
  .btn{
    min-height:44px; /* Touch-target */
  }
  .site-nav a{
    min-height:44px;
    display:flex;
    align-items:center;
  }
}

/* ---- Noch kleinere Screens (< 380px) ---- */
@media (max-width: 380px){
  .site-nav{
    gap:0.5rem;
    padding:0.7rem 0.5rem;
  }
  .site-nav a{
    font-size:0.75rem;
    padding:0.25rem 0.35rem;
  }
  .hero h1{
    font-size:1.5rem;
  }
  .eyebrow{
    font-size:0.8rem;
  }
  .link-card{
    padding:1.2rem 0.9rem;
  }
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:0.5rem;
  }
  .admin-grid{
    grid-template-columns:1fr 1fr;
    gap:0.6rem;
  }
  .countdown-grid{
    gap:0.7rem;
  }
}

/* ---- Landscape auf Handy ---- */
@media (max-height: 500px) and (orientation: landscape){
  .hero{
    min-height:auto;
    padding:3rem 1rem 2rem;
  }
  .site-nav{
    padding:0.5rem 0.8rem;
  }
  .countdown-popup-inner{
    padding:1.2rem 1.5rem;
  }
  .countdown-grid{
    gap:0.8rem;
  }
  .countdown-num{
    font-size:1.8rem;
  }
}

/* ---- Standalone / PWA (iOS etc.) ---- */
@media (display-mode: standalone){
  .site-nav{
    padding-top:2.5rem; /* Für StatusBar */
  }
}

/* ---- Touch-Optimierung ---- */
@media (pointer: coarse){
  .menu-item{
    padding:0.6rem 0.5rem;
  }
  .admin-tab{
    padding:0.55rem 0.9rem;
  }
  .slideshow-btn{
    padding:0.6rem 1.2rem;
  }
}

/* ---- Dunkelmodus-Unterstützung für Formulare ---- */
@media (prefers-color-scheme: dark){
  input, textarea, select{
    color-scheme:dark;
  }
}