/* =====================================================================
   cola.css
   Die Cola-Seite. Angelegt am 23.09.2026.

   Die Seite spielt jetzt an einer Trinkhalle nach Feierabend. Das
   Foto liegt im Hintergrund ueber die ganze Flaeche, rechts davon
   steht die Bestellkarte wie eine beschlagene Scheibe im Licht.

   Warum eigene Farben statt tafel.css: die Seite hat ihre eigene
   Welt, so wie die Hall of Fame ihr Gold hat. Die Farben sind aus
   dem Foto genommen, damit Bild und Karte zusammengehoeren. Bernstein
   ist das Licht aus der Luke, Tuerkis die Neonroehre daneben.

   Die Dosen in der Reihe sind echte Bilder und keine Zeichen. Sie
   sind das Einzige, was sich mit der Anzahl aendert, und darum darf
   man sie auch sehen. Ab dreizehn Stueck steht nur noch eine Zahl da,
   sonst wird die Karte bei hundert Colas meterlang.

   Am Rechnen, an der E-Mail, an den Haken und am Stripe-Aufruf wurde
   nichts geaendert.

   Bilder, die dazugehoeren:
     /assets/img/cola/buedchen-nacht.webp
     /assets/img/cola/dose.webp

   Die alte Gestaltung steht in cola-checkout.php weiter drin, ist
   dort aber mit if (false) abgeschaltet.
   ===================================================================== */

:root{
  --ck-nacht:#05080E;
  --ck-nacht-2:#0A1119;
  --ck-bernstein:#FFB648;
  --ck-bernstein-hell:#FFD89A;
  --ck-bernstein-tief:#C97A1E;
  --ck-neon:#4EDFF0;
  --ck-schnee:#F1F5FA;
  --ck-frost:#A9BACD;
  --ck-stumm:#7C8DA2;
  --ck-glas-1:rgba(10,15,24,.62);
  --ck-glas-2:rgba(5,9,16,.80);
  --ck-kante:rgba(255,182,72,.26);
  --ck-kante-hell:rgba(255,182,72,.62);
  --ck-schrift:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ck-schild:'Oswald',Impact,"Archivo",sans-serif;
}

/* =====================================================================
   Die Buehne
   main kommt aus style.css als Flex-Kasten mit align-items:center,
   2rem Polster und content-box. Das ergibt eine Flaeche, die 64 Pixel
   breiter ist als das Fenster. Hier wird das komplett neu gesetzt,
   denn das Foto soll von Kante zu Kante laufen.
   ===================================================================== */
main.ck-main{
  box-sizing:border-box;
  position:relative;
  width:100%;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,560px);
  align-items:center;
  min-height:calc(100svh - 74px);
  overflow:hidden;
  isolation:isolate;

  background-color:var(--ck-nacht);
  background-image:url('/assets/img/cola/buedchen-nacht.webp');
  background-size:cover;
  background-position:34% bottom;
  background-repeat:no-repeat;
}

/* Dunkler Verlauf von rechts, damit die Schrift auf der Karte steht
   und nicht im Regen ersaeuft. Links bleibt das Buedchen frei. */
main.ck-main::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(5,8,14,0) 0%, rgba(5,8,14,.15) 34%, rgba(5,8,14,.72) 62%, rgba(5,8,14,.92) 100%),
    radial-gradient(60% 50% at 22% 42%, rgba(255,182,72,.10) 0%, rgba(255,182,72,0) 70%);
}

/* Nieselregen. Zwei Lagen mit verschiedener Neigung und Geschwindig
   keit, sonst sieht man das Muster. Bei ausgeschalteter Bewegung ist
   der Regen weg, nicht nur langsamer. */
main.ck-main::after{
  content:"";
  position:absolute;left:-10%;right:-10%;top:-30%;bottom:-30%;
  z-index:0;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(104deg, rgba(255,255,255,.055) 0 1px, rgba(255,255,255,0) 1px 9px),
    repeating-linear-gradient(99deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 14px);
  animation:ckRegen 1.15s linear infinite;
}
@keyframes ckRegen{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-26px,128px,0)}
}

/* Auf breiten Bildschirmen klebt die Karte sonst am rechten Rand.
   Ein Polster rechts schiebt sie zur Mitte hin. Das Foto ist davon
   nicht betroffen, ein Hintergrund wird ueber die volle Flaeche
   gemalt und nicht nur ueber den Innenraum. Erst ab 1100 Pixeln,
   darunter ist der Platz zu knapp. */
@media (min-width:1100px){
  main.ck-main{padding-right:clamp(40px,8vw,210px)}
}

/* =====================================================================
   Die Bestellkarte
   ===================================================================== */
.cola-form-container{
  position:relative;z-index:1;
  /* content-box waere hier die Falle: das Polster kaeme dann noch auf
     die Breite obendrauf und die Karte waere 64 Pixel breiter als
     angegeben. 544 ist die Gesamtbreite, so wie sie auf dem Schirm
     steht. */
  box-sizing:border-box;
  grid-column:2;
  justify-self:center;
  width:calc(100% - clamp(8px,1.5vw,16px));
  max-width:544px;
  margin:clamp(28px,6vh,64px) clamp(10px,2vw,28px) clamp(28px,6vh,64px) 0;
  padding:clamp(24px,3.4vw,34px) clamp(20px,3vw,32px) clamp(22px,3vw,30px);

  font-family:var(--ck-schrift);
  color:var(--ck-schnee);
  font-size:16px;line-height:1.65;text-align:left;letter-spacing:normal;

  background:linear-gradient(180deg, var(--ck-glas-1) 0%, var(--ck-glas-2) 100%);
  border:1px solid var(--ck-kante);
  border-radius:22px;
  box-shadow:
    0 40px 90px rgba(0,0,0,.66),
    0 0 60px rgba(255,182,72,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  overflow:visible;
}
.cola-form-container *{box-sizing:border-box;letter-spacing:normal}

/* Das alte lila Dosenbild passt nicht mehr in diese Welt. Es bleibt
   im Quelltext stehen, wird aber nicht mehr gezeigt. */
.cola-image{display:none}

.cola-content{padding:0}

/* --- Kopf der Karte --- */
.form-header{text-align:left;margin-bottom:22px}

.ck-schild{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ck-schrift);
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ck-bernstein);
  margin:0 0 12px;
}
.ck-schild::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--ck-neon);
  box-shadow:0 0 10px var(--ck-neon), 0 0 22px rgba(78,223,240,.6);
  flex-shrink:0;
  animation:ckFlackern 4.2s ease-in-out infinite;
}
@keyframes ckFlackern{
  0%,100%{opacity:1}
  42%{opacity:1}
  44%{opacity:.25}
  46%{opacity:1}
  71%{opacity:1}
  72%{opacity:.4}
  74%{opacity:1}
}

.cola-form-container .form-header h1{
  font-family:var(--ck-schild) !important;
  font-size:clamp(2.1rem,5vw,3rem) !important;
  font-weight:700;line-height:1.02;
  text-transform:uppercase !important;
  color:var(--ck-bernstein-hell) !important;
  -webkit-text-fill-color:var(--ck-bernstein-hell) !important;
  background:none !important;
  animation:none !important;
  margin:0 0 10px;
  text-shadow:
    0 0 14px rgba(255,182,72,.42),
    0 0 44px rgba(255,182,72,.24),
    0 2px 0 rgba(0,0,0,.5) !important;
}
.form-header p{
  color:var(--ck-frost) !important;
  font-size:.98rem !important;
  line-height:1.6;
  margin:0;
}

/* =====================================================================
   Menge, Theke und Preis
   ===================================================================== */
.price-calculator{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:18px 18px 16px;
  margin-bottom:20px;
  text-align:center;
}
.price-calculator > p:first-child{
  font-family:var(--ck-schrift) !important;
  font-size:.74rem !important;font-weight:600 !important;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ck-stumm) !important;
  margin:0 0 14px !important;
}

.quantity-selector{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:0;
}
.quantity-btn{
  width:44px;height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid rgba(255,182,72,.34);
  border-radius:50%;
  color:var(--ck-bernstein);
  font-family:var(--ck-schrift);font-size:1.5rem;font-weight:600;line-height:1;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s, transform .15s;
}
.quantity-btn:hover{
  background:rgba(255,182,72,.14);
  border-color:var(--ck-kante-hell);
  color:var(--ck-bernstein-hell);
  transform:translateY(-1px);
}
.quantity-btn:active{transform:translateY(0)}

.quantity-display{
  min-width:86px;
  font-family:var(--ck-schild);
  font-size:3.1rem;font-weight:700;line-height:1;
  color:var(--ck-schnee);
  font-variant-numeric:tabular-nums;
}

/* --- Die Theke mit den Dosen --- */
/* Zwei Masse haengen zusammen: wie hoch die Dose steht und wie viel
   von ihrem Spiegelbild man sieht. Das Brett muss genau dazwischen
   liegen, sonst schwebt die Reihe. Darum stehen beide hier oben als
   Werte und nicht verstreut im Text. */
.ck-theke{
  --ck-dose-h:56px;
  --ck-spiegel-h:20px;
  margin:16px 0 4px;
  display:flex;flex-direction:column;align-items:center;
}
.ck-regal{
  position:relative;
  width:100%;
  min-height:calc(var(--ck-dose-h) + var(--ck-spiegel-h));
  display:flex;align-items:flex-end;
}
.ck-dosen{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  gap:6px 4px;
  width:100%;
}
/* Jede Dose ist ein kleiner Stapel: das Bild und darunter ein
   Guckloch, in dem das gespiegelte Bild steht. Das Guckloch ist nur
   20 Pixel hoch, darum sieht man genau den Fuss der Dose und nicht
   die ganze Dose noch einmal kopfueber. */
.ck-dose{
  display:flex;flex-direction:column;align-items:center;
  flex:0 0 auto;
  animation:ckHin .34s cubic-bezier(.2,1.5,.5,1) both;
  animation-delay:calc(var(--i, 0) * 38ms);
}
.ck-dose > img{
  display:block;
  height:var(--ck-dose-h);width:auto;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.65));
}
.ck-spiegel{
  display:block;
  height:var(--ck-spiegel-h);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.ck-spiegel img{
  display:block;
  height:var(--ck-dose-h);width:auto;
  transform:scaleY(-1);
  opacity:.45;
  filter:blur(.6px);
}
@keyframes ckHin{
  from{opacity:0;transform:translateY(-14px) scale(.86)}
  to  {opacity:1;transform:none}
}

/* Das Brett, auf dem sie stehen. Es liegt genau da, wo die Dose
   aufsetzt, also um die Hoehe des Spiegelbilds ueber der Unterkante. */
.ck-brett{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:var(--ck-spiegel-h);
  width:min(100%,340px);height:1px;
  background:linear-gradient(90deg, rgba(255,182,72,0), rgba(255,182,72,.6), rgba(255,182,72,0));
  box-shadow:0 0 18px rgba(255,182,72,.3);
}

.ck-mehr{
  margin:10px 0 0 !important;
  font-size:.78rem !important;
  color:var(--ck-stumm) !important;
  font-variant-numeric:tabular-nums;
}
.ck-mehr[hidden]{display:none !important}

.total-price{
  font-family:var(--ck-schild);
  font-size:2.5rem;font-weight:700;line-height:1;
  color:var(--ck-bernstein);
  font-variant-numeric:tabular-nums;
  margin-top:16px;
  text-shadow:0 0 22px rgba(255,182,72,.34);
}
.price-calculator > p:last-of-type{
  font-size:.76rem !important;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ck-stumm) !important;
  margin-top:6px !important;
}

/* =====================================================================
   E-Mail, Haken, Knopf
   ===================================================================== */
.form-group{margin-bottom:16px}
.form-group label{
  display:block;
  font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ck-stumm);
  margin-bottom:7px;
}
.form-group input[type="email"]{
  width:100%;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:var(--ck-schnee);
  font-family:var(--ck-schrift);font-size:1rem;
  padding:13px 15px;
  outline:none;
  transition:border-color .2s, box-shadow .25s, background .2s;
}
.form-group input[type="email"]::placeholder{color:var(--ck-stumm)}
.form-group input[type="email"]:focus{
  border-color:var(--ck-kante-hell);
  background:rgba(0,0,0,.45);
  box-shadow:0 0 0 3px rgba(255,182,72,.12);
}

.checkbox-group{margin:14px 0 20px}
.checkbox-item{
  display:flex;align-items:flex-start;gap:11px;
  margin-bottom:10px;
}
.checkbox-item:last-child{margin-bottom:0}
.checkbox-item input[type="checkbox"]{
  width:18px;height:18px;margin-top:2px;flex-shrink:0;
  accent-color:var(--ck-bernstein);
  cursor:pointer;
}
.checkbox-item label{
  color:var(--ck-frost);
  font-size:.86rem;line-height:1.5;
  cursor:pointer;
}
.checkbox-item label a{
  color:var(--ck-bernstein);
  text-decoration:none;
  border-bottom:1px solid rgba(255,182,72,.45);
}
.checkbox-item label a:hover{border-bottom-color:var(--ck-bernstein)}

.submit-btn{
  position:relative;overflow:hidden;
  width:100%;
  padding:16px 26px;
  background:linear-gradient(135deg, #FFD89A 0%, #FFB648 38%, #E08A1E 100%);
  border:none;border-radius:14px;
  color:#2A1600;
  font-family:var(--ck-schrift);font-size:1.02rem;font-weight:700;
  cursor:pointer;
  box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 30px rgba(255,182,72,.3);
  transition:transform .15s ease, box-shadow .3s ease, filter .3s ease;
}
/* Ein Lichtstreifen wandert langsam ueber den Knopf, wie eine
   Leuchtreklame. Nur wenn er auch benutzbar ist. */
.submit-btn:not(:disabled)::after{
  content:"";
  position:absolute;top:0;bottom:0;left:-40%;width:28%;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
  transform:skewX(-18deg);
  animation:ckGlanz 3.6s ease-in-out infinite;
}
@keyframes ckGlanz{
  0%,62%{left:-40%}
  92%,100%{left:120%}
}
.submit-btn:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:0 20px 46px rgba(0,0,0,.56), 0 0 46px rgba(255,182,72,.5);
  filter:brightness(1.04);
}
.submit-btn:not(:disabled):active{transform:translateY(0)}
.submit-btn:disabled{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:var(--ck-stumm);
  cursor:not-allowed;
  box-shadow:none;
}

.back-link{
  display:block;
  text-align:center;
  margin-top:16px;
  color:var(--ck-stumm);
  font-size:.86rem;
  text-decoration:none;
  transition:color .2s;
}
.back-link:hover{color:var(--ck-bernstein);text-decoration:none}

/* =====================================================================
   Schmale Fenster
   Unter 900 Pixeln steht die Karte mittig auf dem Foto. Das Buedchen
   selbst rutscht dabei nach links aus dem Bild, darum wird der
   Ausschnitt verschoben, damit die Luke sichtbar bleibt.
   ===================================================================== */
@media (max-width:900px){
  /* Am Handy ist die Seite sehr hoch. Ein Foto mit cover wird dann
     ueber die ganze Hoehe gezogen, und das Buedchen landet irgendwo
     in der Mitte hinter der Karte. Darum bekommt das Bild hier eine
     feste Hoehe und sitzt als Streifen oben, darunter laeuft es in
     die Nachtfarbe aus. */
  main.ck-main{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    background-image:
      linear-gradient(180deg,
        rgba(5,8,14,0) 0%,
        rgba(5,8,14,.25) 38%,
        rgba(5,8,14,.85) 62%,
        var(--ck-nacht) 78%),
      url('/assets/img/cola/buedchen-nacht.webp');
    background-size:100% clamp(320px,56svh,480px), auto clamp(320px,56svh,480px);
    background-position:center top, 32% top;
    background-repeat:no-repeat, no-repeat;
  }
  main.ck-main::before{
    background:
      linear-gradient(180deg, rgba(5,8,14,.28) 0%, rgba(5,8,14,.42) 34%, rgba(5,8,14,.10) 62%, rgba(5,8,14,0) 100%),
      radial-gradient(70% 30% at 32% 16%, rgba(255,182,72,.14) 0%, rgba(255,182,72,0) 70%);
  }
  /* Ohne Polster oben klebt die Karte unter dem Seitenkopf und vom
     Buedchen sieht man nichts mehr. Ein Streifen Foto ueber der Karte
     bringt die Stimmung zurueck, ohne die Ueberschrift unter die
     Falz zu schieben. */
  main.ck-main{padding-top:clamp(130px,22svh,220px)}
  .cola-form-container{
    grid-column:1;
    margin:0 auto clamp(24px,5vh,48px);
    /* 16 Pixel Luft an jeder Seite, darunter klebt die Karte am
       Displayrand und sieht billig aus. */
    width:calc(100% - clamp(32px,8vw,44px));
    max-width:520px;
  }
  .ck-schild{font-size:.62rem;letter-spacing:.14em}
}

@media (max-width:520px){
  .quantity-display{font-size:2.6rem;min-width:70px}
  .quantity-btn{width:40px;height:40px;font-size:1.35rem}
  .ck-theke{--ck-dose-h:44px;--ck-spiegel-h:16px}
  .total-price{font-size:2.1rem}
  .cola-form-container .form-header h1{font-size:2rem !important}
}

/* =====================================================================
   Ruhe, wenn der Rechner sie verlangt
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  main.ck-main::after{animation:none;opacity:.3}
  .ck-schild::before{animation:none}
  .ck-dose{animation:none}
  .submit-btn:not(:disabled)::after{animation:none;display:none}
  .submit-btn:hover,.quantity-btn:hover{transform:none}
}

/* =====================================================================
   Der Seitenkopf bleibt oben stehen. overflow-x:hidden auf html oder
   body hebelt position:sticky aus, clip nicht. Steht auch in
   tafel.css, hier noch einmal, weil diese Seite tafel.css nicht
   einbindet.
   ===================================================================== */
html.ck-clip{overflow-x:clip !important}
body.ck-seite{overflow-x:clip !important}
body.ck-seite > header{position:sticky !important;top:0 !important;z-index:1000 !important}