/* ==========================================================================
   KLEINES FRIESEN-TÖRTCHEN — Judy Style CLEAN (PC-Look ist "Master")
   ========================================================================== */

/* =========================
   THEME / TOKENS
========================= */
:root{
  /* Palette */
  --sky1: #c0d0f0;
  --sky2: #c0e0f0;
  --paper:  #f5f1e8;
  --paper2: #fffdf8;

  --ink:  #2f2f2f;
  --ink2: #3a3a3a;

  --pink:  #f090b0;
  --pink2: #f4a6c0;

  --shadow:  0 18px 40px rgba(0,0,0,.22);
  --shadow2: 0 12px 26px rgba(0,0,0,.18);

  --pad: 16px;
  --max: 1120px;
  --header-h: 84px;

  --font-body: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-hand: "Kalam", "Nunito", system-ui, sans-serif;
  --font-head: "Schoolbell", "Kalam", cursive;

  --ease: cubic-bezier(.2,.8,.2,1);
  --fast: 140ms;
  --med:  240ms;

  /* Tilt defaults */
  --tilt-a: -0.8deg;
  --tilt-b:  1.0deg;
  --tilt-c: -0.5deg;

  /* Micro-Interaction defaults */
  --lift: 6px;
  --tilt-hover: -0.35deg;
  --glow: 0 18px 40px rgba(0,0,0,.16);
  --glow2: 0 12px 26px rgba(0,0,0,.14);
}

/* =========================
   RESET / BASE
========================= */
*,
*::before,
*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body{
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body{
  margin: 0;
  position: relative;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.45;

  /* IMPORTANT: kein transform auf body -> Header bleibt gerade */
  transform: none !important;

  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(240,144,176,.10), transparent 55%),
    radial-gradient(900px 700px at 110% 25%, rgba(192,224,240,.24), transparent 60%),
    linear-gradient(180deg, rgba(192,224,240,.10), rgba(192,208,240,.06)),
    url("/assets/img/background.webp");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 520px auto;
  background-position: center, center, center, top left;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Papier/Druckkorn */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

@media (max-width: 899px){
  :root{ --header-h: 78px; }
}

a{ color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select{ font: inherit; color: inherit; }
button{ cursor: pointer; }
img{ max-width: 100%; height: auto; display: block; }
::selection{ background: rgba(240,144,176,.25); }

.container{
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.small{ font-size: 13px; color: rgba(47,47,47,.92); }

h1, h2, h3{
  margin: 0;
  line-height: .98;
  letter-spacing: .2px;
  font-family: var(--font-head);
  color: rgba(47,47,47,.98);
}
h1{ font-size: clamp(40px, 6.8vw, 66px); }
h2{ font-size: clamp(26px, 4.6vw, 40px); }
h3{ font-size: clamp(20px, 3.8vw, 30px); }

@media (min-width: 900px){
  :root{ --pad: 20px; }
}

/* =========================
   A11Y Focus
========================= */
:where(a, button, [role="button"], input, textarea, select):focus{ outline: none; }
:where(a, button, [role="button"], input, textarea, select):focus-visible{
  outline: 3px solid rgba(240,144,176,.55);
  outline-offset: 3px;
}

/* =========================
   Motion Respect
========================= */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================
   SHAPE RULE: UI squared
========================= */
.kft-header,
.drawer-paper,
.paper,
.cutout,
.tray-panel,
.tray-item,
.tray-fab,
.footer-collage,
.drawer-close,
.tray-close,
.cta-btn,
.cut-btn,
.tag{
  border-radius: 0 !important;
}

/* avoid pseudo overflow glitches */
.drawer-paper,
.paper,
.cutout,
.footer-collage,
.chalk,
.tray-panel{
  overflow: hidden;
}

/* =========================
   HEADER (straight, not slanted)
========================= */
.kft-header{
  position: sticky;
  top: 0;
  z-index: 3000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  width: 100%;

  background: rgba(245,241,232,.92);
  border-bottom: 2px solid rgba(47,47,47,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);

  /* hard stop against any skew/clip */
  transform: none !important;
  clip-path: none !important;
}
.kft-header::before,
.kft-header::after{
  transform: none !important;
  clip-path: none !important;
}

.kft-header-inner{
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr 44px; /* Desktop default */
  align-items: center;
  gap: 14px;
}

/* Desktop link groups */
.kft-toplinks{
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 2px;
  min-width: 0;
}
.kft-toplinks-left{ justify-content: flex-end; padding-right: 10px; }
.kft-toplinks-right{ justify-content: flex-start; padding-left: 10px; }

.kft-brand{
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.kft-brand img{
  width: 72px;
  height: 72px;
  object-fit: contain;
  transform: rotate(-1.2deg); /* Logo darf leicht "handmade" sein */
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.10));
  max-width: 100%;
}

.navword,
.kft-link{
  font-family: var(--font-hand);
  font-weight: 800;
  font-size: 18px;
  color: rgba(47,47,47,.98);
  position: relative;
  padding: 4px 2px;
  transform: rotate(-.6deg);
  white-space: nowrap;
}
.navword::after,
.kft-link::after{
  content:"";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -8px;
  height: 14px;
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='22'%3E%3Cpath d='M2 12c24-10 48 10 72 0s48-10 72 0 48 10 72 0' fill='none' stroke='%23f090b0' stroke-width='4' stroke-linecap='square' stroke-opacity='.60'/%3E%3C/svg%3E")
    repeat-x left/240px 22px;
  pointer-events: none;
}

.burgerbtn{ display: none; }

/* Tray button (Icon) */
.traybtn{
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  position: relative;
  display: grid;
  place-items: center;
}
.traybtn-icon{ font-size: 20px; }
.traybtn-count{
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(47,47,47,.92);
  color: rgba(255,255,255,.92);
  font-size: 11px;
  display: grid;
  place-items: center;
  font-family: var(--font-hand);
  font-weight: 900;
  transform: rotate(8deg);
  border-radius: 999px !important;
}

/* Mobile Header: Burger | Logo | Tray */
@media (max-width: 899px){
  .kft-header-inner{
    grid-template-columns: 52px 1fr 52px;
    gap: 8px;
    padding: 8px 10px;
  }

  .kft-toplinks,
  .kft-toplinks-left,
  .kft-toplinks-right{
    display: none !important;
  }

  .burgerbtn{
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 2px solid rgba(47,47,47,.18);
    background: rgba(255,253,248,.78);
    box-shadow: 0 10px 18px rgba(0,0,0,.10);
    border-radius: 999px !important;
    position: relative;
  }
  .burgerbtn::before{
    content:"";
    width: 26px;
    height: 26px;
    background: url("/assets/img/kuchen.webp") no-repeat center/contain;
    transform: rotate(-6deg);
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.12));
    display:block;
  }
  .burger-lines,
  .burger-scribble{
    display:none !important;
  }

  .kft-brand img{
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,.14));
  }

  .traybtn{
    width: 46px;
    height: 46px;
    border: 2px solid rgba(47,47,47,.18);
    background: rgba(255,253,248,.78);
    box-shadow: 0 10px 18px rgba(0,0,0,.10);
    border-radius: 999px !important;
  }
}

/* =========================
   DRAWER
========================= */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.30);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--med) var(--ease);
  z-index: 3400;
}

.drawer{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(86vw, 380px);
  transform: translateX(-105%);
  transition: transform var(--med) var(--ease);
  z-index: 3500;
  padding: 14px;
}

.drawer.open{ transform: translateX(0); }
.drawer-backdrop.open{ opacity: 1; pointer-events: auto; }

.drawer-paper{
  height: 100%;
  background: rgba(245,241,232,.97);
  box-shadow: var(--shadow);
  position: relative;
  padding: 16px 14px;
  border: 2px solid rgba(47,47,47,.22);
  transform: rotate(-.6deg);
}

.drawer-paper::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .85;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='300'%3E%3Cpath d='M20 24 L120 18 L240 28 L360 16 L500 26 L504 120 L492 210 L506 280 L360 286 L240 276 L120 292 L16 278 L22 180 L14 120 Z' fill='none' stroke='%234b4b4b' stroke-width='4' stroke-opacity='.10'/%3E%3C/svg%3E")
    no-repeat center/100% 100%;
}

.drawer-head{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding-top: 6px;
  z-index: 2;
}

.drawer-title{
  font-family: var(--font-head);
  font-size: 34px;
  color: rgba(47,47,47,.98);
  transform: rotate(-.8deg);
}

.drawer-close{
  width: 44px;
  height: 44px;
  border: 2px solid rgba(47,47,47,.20);
  background: rgba(255,255,255,.55);
  font-size: 20px;
}

.drawer-links{
  position: relative;
  z-index: 2;
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.sticker-link{
  font-family: var(--font-hand);
  font-weight: 800;
  font-size: 20px;
  padding: 6px 2px;
  position: relative;
  width: fit-content;
  max-width: 100%;
  color: rgba(47,47,47,.98);
}
.sticker-link::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='18'%3E%3Cpath d='M2 10c24-10 48 10 72 0s48-10 72 0 48 10 72 0' fill='none' stroke='%23f090b0' stroke-width='3.6' stroke-linecap='square' stroke-opacity='.55'/%3E%3C/svg%3E")
    repeat-x left/240px 18px;
  opacity: 1;
  pointer-events: none;
}
.drawer-links a:nth-child(1){ transform: rotate(-.8deg) translateX(6px); }
.drawer-links a:nth-child(2){ transform: rotate(1.2deg) translateX(16px); }
.drawer-links a:nth-child(3){ transform: rotate(-.6deg) translateX(10px); }
.drawer-links a:nth-child(4){ transform: rotate(.9deg) translateX(20px); }
.drawer-links a:nth-child(5){ transform: rotate(-1.0deg) translateX(8px); }
.drawer-links a:nth-child(6){ transform: rotate(.7deg) translateX(14px); }

.drawer-cta{
  position: relative;
  z-index: 2;
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.btn, .cta-btn{
  border: 2px solid rgba(47,47,47,.22);
  background: rgba(255,255,255,.60);
  padding: 12px 12px;
  font-family: var(--font-hand);
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 14px 24px rgba(0,0,0,.10);
  transform: rotate(-.6deg);
  width: 100%;
}
.btn-ghost{ background: rgba(245,241,232,.72); transform: rotate(.6deg); }
.btn-mint{ background: rgba(192,224,240,.38); transform: rotate(-.4deg); }

/* =========================
   HERO
========================= */
.hero{ padding: 12px 0 6px; }
.hero-inner{ position: relative; }

.bg-wirrwarr{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.counter{
  margin: 0;
  position: relative;
  z-index: 3;
}

.counter-img{
  width: 100%;
  box-shadow: none;
  border: none;
  background: transparent;
  filter: drop-shadow(0 26px 26px rgba(0,0,0,.16));
}

/* Words under theke */
.counter-words{
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  padding-bottom: 6px;
  flex-wrap: wrap;
}

.word{
  font-family: var(--font-hand);
  font-weight: 900;
  font-size: 18px;
  color: rgba(47,47,47,.98);
  position: relative;
  padding: 4px 2px;
  transform: rotate(-.6deg);
}
.word::after{
  content:"";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -10px;
  height: 16px;
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='22'%3E%3Cpath d='M2 12c24-10 48 10 72 0s48-10 72 0 48 10 72 0' fill='none' stroke='%23f090b0' stroke-width='4.2' stroke-linecap='square' stroke-opacity='.60'/%3E%3C/svg%3E")
    repeat-x left/240px 22px;
  pointer-events: none;
}
.w1{ transform: rotate(-1.2deg); }
.w2{ transform: rotate(1.4deg); }
.w3{ transform: rotate(-.8deg); }

/* =========================
   WALL
========================= */
.wall{ padding: 10px 0 8px; }

.wall-grid{
  display: grid;
  gap: 16px;
  align-items: start;
}
@media (min-width: 900px){
  .wall-grid{ grid-template-columns: 1.2fr .8fr; gap: 22px; }
}

.headline{
  transform: rotate(-.6deg);
  text-shadow:
    0 2px 0 rgba(255,255,255,.65),
    0 16px 28px rgba(0,0,0,.10);
}

.paper{
  margin-top: 12px;
  position: relative;
  background: rgba(245,241,232,.99);
  border: 2px solid rgba(47,47,47,.22);
  box-shadow: var(--shadow2);
  padding: 14px;
  transform: rotate(var(--tilt-a));
}
.wall-grid .paper.p2{ transform: rotate(var(--tilt-b)); }

.paper::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .85;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='420'%3E%3Cpath d='M18 24 L140 16 L260 28 L380 14 L520 26 L700 20 L706 120 L690 200 L706 300 L520 310 L380 298 L260 318 L140 308 L16 292 L24 190 L12 120 Z' fill='none' stroke='%234b4b4b' stroke-width='5' stroke-opacity='.10'/%3E%3C/svg%3E")
    no-repeat center/100% 100%;
}
.paper > *{ position: relative; z-index: 2; }

.paper-tape{
  position: absolute;
  top: 10px;
  right: 14px;
  width: 90px;
  height: 22px;
  background: rgba(192,224,240,.55);
  border: 2px solid rgba(47,47,47,.12);
  transform: rotate(12deg);
  opacity: .95;
  z-index: 2;
}

.paper-kicker{
  font-family: var(--font-hand);
  font-weight: 900;
  font-size: 18px;
  color: rgba(47,47,47,.98);
}
.paper-text{
  margin-top: 10px;
  color: rgba(47,47,47,.92);
  font-size: 16px;
  line-height: 1.5;
}

.paper-row{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.tag{
  display: inline-flex;
  padding: 8px 10px;
  border: 2px solid rgba(47,47,47,.16);
  background: rgba(255,255,255,.58);
  font-family: var(--font-hand);
  font-weight: 900;
  transform: rotate(-.6deg);
  color: rgba(47,47,47,.98);
}
.tag:nth-child(2){ transform: rotate(1.0deg); }
.tag:nth-child(3){ transform: rotate(-.2deg); }

.cta-scribble{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  width: fit-content;
  font-family: var(--font-hand);
  font-weight: 900;
  font-size: 18px;
  color: rgba(47,47,47,.98);
  position: relative;
  padding: 6px 2px;
  transform: rotate(-.6deg);
}
.cta-scribble::after{
  content:"";
  position:absolute;
  left:-2px; right:-2px; bottom:-10px;
  height: 14px;
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='18'%3E%3Cpath d='M2 10c24-10 48 10 72 0s48-10 72 0 48 10 72 0' fill='none' stroke='%23f090b0' stroke-width='3.8' stroke-linecap='square' stroke-opacity='.55'/%3E%3C/svg%3E")
    repeat-x left/240px 18px;
  pointer-events: none;
}
.small-cta{ font-size: 14px; transform: rotate(.5deg); }

/* =========================
   KAFFEEMASCHINE INFO-SECTION (neu)
   -> Du musst nur ein Bild einsetzen
========================= */
.machine-info{
  padding: 18px 0 10px;
}
.machine-card{
  position: relative;
  background: rgba(245,241,232,.97);
  border: 2px solid rgba(47,47,47,.22);
  box-shadow: var(--shadow2);
  padding: 14px;
  transform: rotate(-0.6deg);
}
.machine-card::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .85;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='420'%3E%3Cpath d='M18 24 L140 16 L260 28 L380 14 L520 26 L700 20 L706 120 L690 200 L706 300 L520 310 L380 298 L260 318 L140 308 L16 292 L24 190 L12 120 Z' fill='none' stroke='%234b4b4b' stroke-width='5' stroke-opacity='.10'/%3E%3C/svg%3E")
    no-repeat center/100% 100%;
}
.machine-card > *{ position: relative; z-index: 2; }

.machine-title{
  font-family: var(--font-head);
  font-size: clamp(24px, 4.5vw, 34px);
  margin-bottom: 10px;
  transform: rotate(-0.4deg);
}

.machine-img{
  width: 100%;
  border: 2px solid rgba(47,47,47,.16);
  background: rgba(255,255,255,.55);
  box-shadow: 0 16px 26px rgba(0,0,0,.12);
  object-fit: contain;
}
@media (max-width: 899px){
  .machine-card{ transform: rotate(-0.3deg); }
}

/* =========================
   VITRINE (PC MASTER)
========================= */
.vitrine{ padding: 22px 0 10px; }

.vitrine-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}

.subhead{
  font-family: var(--font-head);
  transform: rotate(-.3deg);
  color: rgba(47,47,47,.98);
}

/* Stage */
.vitrine-stage{
  position: relative;
  display: grid;
  gap: 22px 18px;
  padding: 22px 14px 32px;

  background:
    linear-gradient(180deg, rgba(245,241,232,.80), rgba(245,241,232,.64)),
    repeating-linear-gradient(
      90deg,
      rgba(47,47,47,.055) 0 10px,
      rgba(47,47,47,.02) 10px 24px
    );
  border: 2px solid rgba(47,47,47,.16);
  box-shadow:
    inset 0 18px 26px rgba(0,0,0,.06),
    0 18px 34px rgba(0,0,0,.10);

  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
  scroll-snap-type: none;
}

.vitrine-stage::after{
  content:"";
  position:absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0));
  opacity: .55;
  pointer-events:none;
}

.vitrine-stage > *{
  position: relative;
  overflow: visible;
  padding: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;

  transform: rotate(var(--tilt-a));
  transition: transform var(--med) var(--ease), filter var(--med) var(--ease);
  will-change: transform;

  padding-bottom: 92px;
}

.vitrine-stage > *:nth-child(even){ transform: rotate(var(--tilt-b)); }
.vitrine-stage > *:nth-child(3n){ transform: rotate(var(--tilt-c)); }

.vitrine-stage .cutout::before{ display:none !important; }

.cut-img{
  width: 100%;
  height: 240px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.16));
  pointer-events: none;
  transition: transform var(--med) var(--ease), filter var(--med) var(--ease);
}

/* Schild */
.cut-cap{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 22px;
  z-index: 6;

  background: rgba(245,241,232,.96);
  border: 2px solid rgba(47,47,47,.18);
  box-shadow: 0 16px 22px rgba(0,0,0,.14);

  padding: 10px 12px 22px;
  transform: rotate(-.6deg);
}
.cut-cap::before{
  content:"";
  position:absolute;
  top: -10px;
  left: 16px;
  width: 56px;
  height: 18px;
  background: rgba(240,144,176,.28);
  border: 2px solid rgba(47,47,47,.12);
  transform: rotate(-8deg);
  box-shadow: 0 10px 12px rgba(0,0,0,.10);
}

.cut-title{
  font-family: var(--font-head);
  font-size: 30px;
  line-height: 1;
  margin: 0 0 6px;
  transform: rotate(-.6deg);
  color: rgba(47,47,47,.98);
}

.cut-price{
  font-family: var(--font-hand);
  font-weight: 900;
  margin: 0;
  opacity: 1;
  color: rgba(47,47,47,.92);
  position: relative;
  z-index: 8;
}

/* Button hängt unter Schild */
.cut-btn{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -36px;
  margin: 0;

  border: 2px solid rgba(47,47,47,.16);
  background: rgba(255,255,255,.85);
  padding: 10px 12px;
  font-family: var(--font-hand);
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 14px 20px rgba(0,0,0,.12);
  transform: rotate(.4deg);
  z-index: 5;
}
.cut-btn:active{ transform: translateY(1px) rotate(.4deg); }

@media (hover:hover) and (pointer:fine){
  .vitrine-stage > *:hover{
    transform: translateY(-10px) rotate(var(--tilt-hover)) !important;
    filter: saturate(1.10) contrast(1.06);
  }
  .vitrine-stage > *:hover .cut-img,
  .vitrine-stage > *:hover img{
    transform: translateY(-4px) scale(1.03) rotate(-.25deg);
    filter: drop-shadow(0 22px 20px rgba(0,0,0,.18));
  }
  .vitrine-stage > *:hover .cut-cap{
    box-shadow: 0 22px 30px rgba(0,0,0,.18);
  }
}

@media (max-width: 1040px){
  .vitrine-stage{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================
   VITRINE MOBILE (requested)
   - 2 cols, nur 4 Produkte
   - Button/Preis fix: Button tiefer + mehr Platz
========================= */
@media (max-width: 899px){
  .vitrine-stage{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    padding: 18px 12px 22px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .vitrine-stage > *:nth-child(n+5){
    display: none !important;
  }

  .vitrine-stage > *{
    padding: 10px;
    padding-bottom: 118px; /* mehr Platz unten -> Button kollidiert nicht */
  }

  .cut-img{
    height: 190px;
  }

  .cut-cap{
    left: 10px;
    right: 10px;
    bottom: 22px;
    padding: 10px 10px 30px; /* mehr “Schild”-Platz, Preis bleibt frei */
    z-index: 7;
  }

  .cut-title{ font-size: 26px; }

  .cut-btn{
    left: 10px;
    right: 10px;
    bottom: -48px;   /* tiefer -> nicht über Preis */
    padding: 12px 12px; /* breiter/mehr Fläche */
    z-index: 6;
  }
}

@media (max-width: 420px){
  .cut-img{ height: 170px; }
  .cut-title{ font-size: 24px; }
}

/* =========================
   CHALKBOARD
========================= */
.board{ padding: 18px 0 22px; }

.board-wrap{
  position: relative;
  display: grid;
  justify-items: center;
}

.chalk{
  width: min(920px, 100%);
  background: linear-gradient(180deg, rgba(20,20,22,.98), rgba(20,20,22,.90));
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 56px rgba(0,0,0,.28);
  color: rgba(255,255,255,.94);
  padding: 16px 14px 16px;
  position: relative;
  transform: rotate(-1deg);
}

.chalk::before{
  content:"";
  position: absolute;
  inset: 0;
  opacity: .55;
  pointer-events: none;
  background:
    radial-gradient(520px 220px at 26% 18%, rgba(255,255,255,.14), transparent 62%),
    radial-gradient(480px 210px at 76% 72%, rgba(255,255,255,.10), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.05) 18px 19px);
}
.chalk > *{ position: relative; z-index: 2; }

.chalk-title{
  font-family: var(--font-head);
  font-size: 40px;
  transform: rotate(-1.2deg);
  margin-bottom: 10px;
}

.chalk-grid{
  display: grid;
  gap: 14px;
  font-family: var(--font-hand);
  font-weight: 700;
}

.ch{ font-family: var(--font-head); font-size: 30px; margin-bottom: 6px; }
.cl{ display: grid; gap: 6px; font-size: 17px; }
.dim{ opacity: .92; }

@media (min-width: 900px){
  .chalk-grid{ grid-template-columns: 1.05fr .95fr; gap: 18px 26px; }
}

.chalk-cta{
  display: inline-flex;
  margin-top: 10px;
  padding: 10px 12px;
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.94);
  font-family: var(--font-hand);
  font-weight: 900;
  transform: rotate(-.6deg);
  width: fit-content;
}
.chalk-cta:active{ transform: translateY(2px) rotate(-.6deg); }

.board-shadow{
  width: min(860px, 96%);
  height: 26px;
  margin-top: 10px;
  background: radial-gradient(closest-side, rgba(0,0,0,.22), transparent 70%);
  filter: blur(1px);
  transform: rotate(-1deg);
  opacity: .75;
}

/* =========================
   TRAY (clean layering)
========================= */
.tray-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
  z-index: 4400;
}
.tray-backdrop.open{
  opacity: 1;
  pointer-events: auto;
}

.tray-drawer{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 4500;

  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
}
.tray-drawer.open{
  opacity: 1;
  pointer-events: auto;
}

.tray-panel{
  width: min(520px, calc(100vw - 28px));
  max-height: min(86vh, 820px);
  overflow: auto;

  background: rgba(245,241,232,.96);
  border: 2px solid rgba(47,47,47,.18);
  box-shadow: 0 28px 55px rgba(0,0,0,.22);

  transform: rotate(-0.35deg);
}

.tray-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;

  padding: 16px 18px 12px;
  border-bottom: 2px solid rgba(47,47,47,.14);
}
.tray-head h3{
  margin: 0;
  font-family: var(--font-head);
  font-size: 40px;
  line-height: 1;
}

.tray-close{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;

  background: rgba(255,255,255,.78);
  border: 2px solid rgba(47,47,47,.18);
  cursor: pointer;
}

.tray-body{ padding: 14px 18px; max-height: 52vh; overflow: auto; }
.tray-items{ display: grid; gap: 10px; }
.tray-empty{ padding: 10px 0; color: rgba(47,47,47,.92); }

.tray-item{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid rgba(47,47,47,.12);
  background: rgba(255,255,255,.42);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transform: rotate(-.3deg);
}
.tray-item:nth-child(even){ transform: rotate(.5deg); }
.tray-item .meta{ font-size: 13px; color: rgba(47,47,47,.84); margin-top: 2px; }

.tray-item .qty{ display:flex; align-items:center; gap: 8px; }
.tray-item .qty button{
  width: 38px;
  height: 38px;
  border: 2px solid rgba(47,47,47,.14);
  background: rgba(255,255,255,.62);
  font-family: var(--font-hand);
  font-weight: 900;
  border-radius: 999px !important;
}

.tray-foot{
  padding: 14px 18px 18px;
  border-top: 2px solid rgba(47,47,47,.14);
  display: grid;
  gap: 10px;
}
.tray-sum{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 0 12px;
  font-family: var(--font-hand);
  font-weight: 900;
  color: rgba(47,47,47,.96);
}

.tray-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 4600;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(47,47,47,.14);
  background: rgba(245,241,232,.90);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  display: grid;
  place-items: center;
  border-radius: 999px !important;
}

.tray-count{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: rgba(47,47,47,.92);
  color: rgba(255,255,255,.92);
  border: 2px solid rgba(245,241,232,.55);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-family: var(--font-hand);
  font-weight: 900;
  border-radius: 999px !important;
}

/* body scroll lock */
body.no-scroll{ overflow: hidden !important; }

/* =========================
   FOOTER
========================= */
.site-footer{ padding: 22px 0 28px; }

.footer-collage{
  background: rgba(245,241,232,.97);
  border: 2px solid rgba(47,47,47,.22);
  box-shadow: 0 18px 46px rgba(0,0,0,.12);
  padding: 14px;
  position: relative;
  transform: rotate(-.7deg);
}

.footer-collage::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .85;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='420'%3E%3Cpath d='M18 24 L140 16 L260 28 L380 14 L520 26 L700 20 L706 120 L690 200 L706 300 L520 310 L380 298 L260 318 L140 308 L16 292 L24 190 L12 120 Z' fill='none' stroke='%234b4b4b' stroke-width='5' stroke-opacity='.10'/%3E%3C/svg%3E")
    no-repeat center/100% 100%;
}
.footer-collage > *{ position: relative; z-index: 2; }

.foot-title{
  font-family: var(--font-head);
  font-size: 28px;
  transform: rotate(-.6deg);
  margin-bottom: 6px;
  color: rgba(47,47,47,.98);
}
.foot-text{
  font-size: 14px;
  color: rgba(47,47,47,.90);
  line-height: 1.5;
}

.footer-links,
.foot-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
  font-family: var(--font-hand);
  font-weight: 900;
  color: rgba(47,47,47,.98);
}
.footer-links a,
.foot-links a{
  position: relative;
  padding: 4px 2px;
  transform: rotate(-.6deg);
}
.footer-links a::after,
.foot-links a::after{
  content:"";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -10px;
  height: 14px;
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='18'%3E%3Cpath d='M2 10c24-10 48 10 72 0s48-10 72 0 48 10 72 0' fill='none' stroke='%23f090b0' stroke-width='3.8' stroke-linecap='square' stroke-opacity='.55'/%3E%3C/svg%3E")
    repeat-x left/220px 18px;
  pointer-events: none;
}

/* =========================
   MICRO INTERACTIONS
========================= */
.navword,
.kft-link,
.word,
.sticker-link,
.cta-scribble{
  transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease), opacity var(--fast) var(--ease);
  transform-origin: center;
}

@media (hover:hover) and (pointer:fine){
  .navword:hover,
  .kft-link:hover,
  .word:hover,
  .sticker-link:hover,
  .cta-scribble:hover{
    transform: translateY(-3px) rotate(-.9deg);
    filter: drop-shadow(0 12px 14px rgba(0,0,0,.12));
  }
  .navword:hover::after,
  .kft-link:hover::after,
  .word:hover::after,
  .sticker-link:hover::after,
  .cta-scribble:hover::after{
    opacity: 1;
    filter: saturate(1.1);
  }
}

.word:active,
.navword:active,
.kft-link:active,
.sticker-link:active,
.cta-scribble:active{
  transform: translateY(1px) rotate(-.6deg);
}

.paper,
.chalk,
.tray-item{
  transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease), filter var(--med) var(--ease);
  will-change: transform;
}

@media (hover:hover) and (pointer:fine){
  .paper:hover{
    transform: translateY(-5px) rotate(var(--tilt-hover));
    box-shadow: var(--glow);
  }
  .chalk:hover{
    transform: translateY(-6px) rotate(-0.6deg);
    box-shadow: 0 28px 70px rgba(0,0,0,.30);
  }
  .tray-item:hover{
    transform: translateY(-4px) rotate(-.2deg);
    box-shadow: var(--glow2);
  }
  .chalk-cta:hover{
    transform: translateY(-4px) rotate(-.9deg);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    background: rgba(255,255,255,.10);
  }
}

/* Buttons wobble */
@keyframes kft-wobble{
  0%   { transform: translateY(0) rotate(-.6deg); }
  15%  { transform: translateY(-2px) rotate(-1.6deg); }
  30%  { transform: translateY(0) rotate(.8deg); }
  45%  { transform: translateY(-2px) rotate(-1.0deg); }
  60%  { transform: translateY(0) rotate(.6deg); }
  100% { transform: translateY(0) rotate(-.6deg); }
}

.cut-btn,
.btn,
.cta-btn,
.tray-item .qty button,
.drawer-close,
.tray-close,
.tray-fab,
.burgerbtn,
.traybtn{
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), filter var(--fast) var(--ease);
  transform-origin: center;
}

@media (hover:hover) and (pointer:fine){
  .cut-btn:hover,
  .btn:hover,
  .cta-btn:hover{
    animation: kft-wobble 520ms var(--ease) 1;
    box-shadow: var(--glow2);
    filter: saturate(1.05);
  }
}

.cut-btn:active,
.btn:active,
.cta-btn:active{
  transform: translateY(2px) rotate(-.6deg);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.is-wobbling{ animation: kft-wobble 520ms var(--ease) 1 !important; }

/* =========================
   OPTIONAL: "handwritten" texts (SAFE)
========================= */
p,
.paper-text,
.cutout p,
.drawer-paper p,
.tray-item p,
.foot-text,
.footer-collage p,
.meta,
.small{
  font-family:
    "Caveat",
    "Patrick Hand",
    "Comic Neue",
    "Segoe Print",
    "Bradley Hand",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  letter-spacing: 0.04em;
  line-height: 1.75;
}

@media (max-width: 899px){
  p,
  .paper-text,
  .cutout p,
  .drawer-paper p{
    letter-spacing: 0.03em;
  }
}

/* ==========================================================
   NEU: MINI POPUP oben rechts (CSS)
   -> wird per JS sichtbar gemacht: .kft-toast.is-visible
========================================================== */
.kft-toast{
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 14px;
  z-index: 999999;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.kft-toast.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.kft-toast-box{
  display: flex;
  align-items: center;
  gap: 10px;

  background: rgba(245,241,232,.96);
  border: 2px solid rgba(47,47,47,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);

  padding: 10px 12px;
  font-family: "Kalam","Nunito",system-ui,sans-serif;
  font-weight: 800;
  color: rgba(47,47,47,.96);
  max-width: min(360px, calc(100vw - 28px));
}

.kft-toast-dot{
  width: 10px;
  height: 10px;
  background: rgba(240,144,176,.95);
  border: 2px solid rgba(47,47,47,.14);
  flex: 0 0 auto;
}

/* Mobile: etwas dichter */
@media (max-width: 899px){
  .kft-toast{
    top: calc(var(--header-h) + 10px);
    right: 10px;
  }
}

/* ==========================================================
   NEU: Extra Warenkorb-Symbole komplett ausblenden
   (unten + Header Icon)
   -> Bestellzettel-Button (normaler Button/Link) bleibt
========================================================== */
.tray-fab{ display: none !important; }     /* Floating unten weg */
.traybtn{ display: none !important; }      /* Header-Icon weg */
.traybtn-icon,
.traybtn-count{ display: none !important; }
/* ==========================================================
   KAFFEEMASCHINE — cooler Infobereich (kein "Karteikarte"-Look)
   -> nur Bild hochladen
========================================================== */

.machine-info{
  padding: 26px 0 14px;
}

/* "Stage" statt Karteikarte */
.machine-stage{
  position: relative;
  padding: 18px 14px 22px;

  /* cleaner, leicht premium */
  background:
    radial-gradient(700px 260px at 30% 10%, rgba(240,144,176,.10), transparent 60%),
    radial-gradient(700px 260px at 80% 80%, rgba(192,224,240,.24), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(245,241,232,.70));
  border: 2px solid rgba(47,47,47,.14);
  box-shadow:
    inset 0 18px 28px rgba(0,0,0,.06),
    0 18px 40px rgba(0,0,0,.10);

  overflow: visible;
}

/* kleiner "Unterboden" */
.machine-stage::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0));
  opacity: .55;
  pointer-events:none;
}

.machine-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.machine-title{
  font-family: var(--font-head);
  font-size: clamp(22px, 4.6vw, 34px);
  transform: rotate(-0.25deg);
  color: rgba(47,47,47,.98);
}

.machine-hint{
  font-family: var(--font-hand);
  font-weight: 900;
  font-size: 14px;
  opacity: .88;
  transform: rotate(0.6deg);
  white-space: nowrap;
}

/* Bild bekommt "Spotlight" statt Karteikarte */
.machine-figure{
  position: relative;
  padding: 10px;
  background: transparent;
}

/* Lichtkegel hinter dem Bild */
.machine-figure::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 46%;
  width: min(520px, 92%);
  height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0));
  filter: blur(2px);
  opacity: .9;
  pointer-events:none;
}

.machine-img{
  width: 100%;
  max-height: 440px;
  object-fit: contain;

  /* “frei” im Raum */
  border: 0;
  background: transparent;
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.16));
}

/* optional: kleines Tape oben links – dezent */
.machine-tape{
  position: absolute;
  top: 8px;
  left: 14px;
  width: 92px;
  height: 22px;
  background: rgba(240,144,176,.22);
  border: 2px solid rgba(47,47,47,.10);
  transform: rotate(-10deg);
  box-shadow: 0 10px 12px rgba(0,0,0,.08);
  opacity: .95;
}

/* Mobile: nicht zu fett */
@media (max-width: 899px){
  .machine-info{ padding: 20px 0 10px; }
  .machine-stage{ padding: 14px 12px 18px; }
  .machine-hint{ display:none; }
  .machine-img{ max-height: 340px; }
}
/* ==========================================================
   KAFFEEMASCHINE — GROß, CLEAN, OHNE HINTERGRUND-STAGE
========================================================== */
.machine-info{
  padding: 34px 0 18px;
}

.machine-title{
  font-family: var(--font-head);
  font-size: clamp(28px, 5vw, 44px);
  margin-bottom: 14px;
  transform: rotate(-0.2deg);
  color: rgba(47,47,47,.98);
  text-align: center;
}

/* großer, cleaner Bildrahmen */
.machine-frame{
  position: relative;
  width: 100%;
  max-width: 1100px;   /* groß am PC */
  margin: 0 auto;

  border: 2px solid rgba(47,47,47,.16);
  background: rgba(255,255,255,.35); /* sehr dezent */
  box-shadow: 0 22px 44px rgba(0,0,0,.12);
  padding: 10px;
}

/* optional: super dezenter “handmade” Rand */
.machine-frame::before{
  content:"";
  position:absolute;
  inset: 6px;
  border: 2px dashed rgba(47,47,47,.10);
  pointer-events:none;
}

/* Bild groß, aber sauber */
.machine-img{
  width: 100%;
  height: auto;
  max-height: 620px;   /* groß */
  object-fit: contain;
  background: transparent;
  border: 0;
  display:block;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.10));
}

/* Mobile: bleibt groß, aber nicht zu hoch */
@media (max-width: 899px){
  .machine-info{ padding: 26px 0 12px; }
  .machine-img{ max-height: 480px; }
}
/* ==========================================================
   FIX: Tray/Warenkorb-Button nur am PC ausblenden
========================================================== */

/* Standard: wieder erlauben (falls vorher global hidden) */
.traybtn{
  display: grid !important;
}

/* Nur PC ausblenden */
@media (min-width: 900px){
  .traybtn{ display: none !important; }
}

/* Mobile sicher sichtbar */
@media (max-width: 899px){
  .traybtn{
    display: grid !important;
    width: 46px;
    height: 46px;
  }
  .traybtn-icon,
  .traybtn-count{
    display: block !important;
  }
}
/* ==========================================================
   KAFFEEMASCHINE — PREMIUM POSTER (groß, clean, ohne Stage)
========================================================== */

.machine-info{
  padding: 38px 0 18px;
}

.machine-title{
  font-family: var(--font-head);
  font-size: clamp(30px, 5.4vw, 48px);
  margin-bottom: 16px;
  transform: rotate(-0.2deg);
  color: rgba(47,47,47,.98);
  text-align: center;
}

/* der "Poster"-Rahmen */
.machine-frame{
  position: relative;
  width: 100%;
  max-width: 1160px;     /* noch größer am PC */
  margin: 0 auto;

  padding: 14px;
  border: 2px solid rgba(47,47,47,.16);
  background: rgba(255,255,255,.22); /* ultra dezent, kein Gradient */
  box-shadow:
    0 26px 55px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* innerer clean border (premium print look) */
.machine-frame::before{
  content:"";
  position:absolute;
  inset: 10px;
  border: 2px solid rgba(47,47,47,.10);
  pointer-events:none;
}

/* 4 Tape-Ecken (dezent, aber nice) */
.machine-frame::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    /* TL */
    linear-gradient(rgba(240,144,176,.20), rgba(240,144,176,.20)) 22px 18px / 88px 20px no-repeat,
    /* TR */
    linear-gradient(rgba(192,224,240,.22), rgba(192,224,240,.22)) calc(100% - 110px) 18px / 88px 20px no-repeat,
    /* BL */
    linear-gradient(rgba(192,224,240,.18), rgba(192,224,240,.18)) 22px calc(100% - 38px) / 88px 20px no-repeat,
    /* BR */
    linear-gradient(rgba(240,144,176,.18), rgba(240,144,176,.18)) calc(100% - 110px) calc(100% - 38px) / 88px 20px no-repeat;
  opacity: .95;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.10));
}

/* Bild wirklich groß und clean */
.machine-img{
  width: 100%;
  height: auto;
  max-height: 720px;     /* größer */
  object-fit: contain;
  display: block;
  background: transparent;
  border: 0;

  /* weniger “cutout”, mehr premium print */
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.10));
}

/* Mobile: auch groß, aber nicht endlos hoch */
@media (max-width: 899px){
  .machine-info{ padding: 28px 0 12px; }
  .machine-frame{ padding: 12px; }
  .machine-img{ max-height: 520px; }
}
/* ==========================================================
   BESTELLZETTEL: Badge (Anzahl) + Toast oben rechts
========================================================== */

.kft-orderbtn{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Badge (Anzahl) */
.kft-orderbtn .kft-badge{
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px !important;

  background: rgba(47,47,47,.92);
  color: rgba(255,255,255,.95);

  border: 2px solid rgba(245,241,232,.85);
  box-shadow: 0 12px 18px rgba(0,0,0,.14);

  font-family: "Kalam","Nunito",system-ui,sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;

  transform: rotate(8deg);
}

/* Toast oben rechts */
.kft-toast{
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 14px;
  z-index: 9999999; /* nochmal höher */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.kft-toast.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.kft-toast-box{
  display: flex;
  align-items: center;
  gap: 10px;

  background: rgba(245,241,232,.98);
  border: 2px solid rgba(47,47,47,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);

  padding: 10px 12px;
  font-family: "Kalam","Nunito",system-ui,sans-serif;
  font-weight: 900;
  color: rgba(47,47,47,.96);
  max-width: min(360px, calc(100vw - 28px));
}

.kft-toast-dot{
  width: 10px;
  height: 10px;
  background: rgba(240,144,176,.95);
  border: 2px solid rgba(47,47,47,.14);
  flex: 0 0 auto;
}

@media (max-width: 899px){
  .kft-toast{
    top: calc(var(--header-h) + 10px);
    right: 10px;
  }
}
/* ==========================================================
   UX POLISH:
   - Toast: kleines Wackeln beim Auftauchen
   - Bestellzettel Badge: Pop beim Hochzaehlen
   - Footer: Kritzelei raus, alles mittig + strukturiert
========================================================== */

/* ---------- TOAST: wobble ---------- */
@keyframes kft-toast-wobble{
  0%   { transform: translateY(-10px) rotate(0deg); }
  20%  { transform: translateY(0) rotate(-1.2deg); }
  45%  { transform: translateY(0) rotate(1.0deg); }
  70%  { transform: translateY(0) rotate(-0.6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* wenn sichtbar -> leichtes wobble */
.kft-toast.is-visible .kft-toast-box{
  animation: kft-toast-wobble 420ms cubic-bezier(.2,.8,.2,1) 1;
  transform-origin: top right;
}

/* ---------- BADGE: pop ---------- */
@keyframes kft-badge-pop{
  0%   { transform: rotate(8deg) scale(1); }
  35%  { transform: rotate(8deg) scale(1.25); }
  70%  { transform: rotate(8deg) scale(0.98); }
  100% { transform: rotate(8deg) scale(1); }
}

.kft-orderbtn .kft-badge.is-pop{
  animation: kft-badge-pop 360ms cubic-bezier(.2,.8,.2,1) 1;
}

/* ---------- FOOTER: clean + mittig + struktur ---------- */

/* Kritzelei/Frame im Footer raus */
.footer-collage::before{
  display: none !important;
}

/* Footer insgesamt mittig und geordnet */
.site-footer{
  text-align: center !important;
}

.footer-collage{
  transform: none !important;                  /* gerade */
  padding: 18px 16px !important;
}

/* Inhalt mittig */
.footer-collage > *{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Titel + Text mittig */
.foot-title{
  transform: none !important;
  margin-bottom: 10px !important;
}

.foot-text{
  max-width: 720px;
  margin: 0 auto !important;
}

/* Links mittig, sauberer Abstand */
.footer-links,
.foot-links{
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
}

/* Kritzel-Unterstreichung bei Footer-Links optional dezenter / weg */
.footer-links a::after,
.foot-links a::after{
  opacity: .25 !important;
}

/* Optional: wenn du die Unterstreichung komplett weg willst:
.footer-links a::after,
.foot-links a::after{ display:none !important; }
*/

/* Kleine "Spalten"-Anmutung ohne HTML-Aenderung:
   Wenn im Footer mehrere Gruppen vorhanden sind, wirken sie geordnet */
.footer-links,
.foot-links{
  gap: 10px 18px !important;
  margin-top: 14px !important;
}
/* ==========================================================
   FOOTER — more alive (wobble + stickers + handmade)
   (ohne HTML Aenderung)
========================================================== */

/* Footer Grundlook: clean + mittig, aber mit Character */
.site-footer{
  text-align: center !important;
}

.footer-collage{
  transform: rotate(-.35deg) !important;  /* wieder leicht handmade */
  padding: 22px 16px !important;
  position: relative;
  overflow: visible !important;
}

/* kleine "Tape" Elemente oben links/rechts */
.footer-collage::before{
  content:"";
  position:absolute;
  top: 10px;
  left: 14px;
  width: 92px;
  height: 22px;
  background: rgba(240,144,176,.18);
  border: 2px solid rgba(47,47,47,.10);
  transform: rotate(-10deg);
  box-shadow: 0 10px 12px rgba(0,0,0,.08);
  opacity: .95;
  pointer-events:none;
}

.footer-collage::after{
  content:"";
  position:absolute;
  top: 12px;
  right: 14px;
  width: 92px;
  height: 22px;
  background: rgba(192,224,240,.22);
  border: 2px solid rgba(47,47,47,.10);
  transform: rotate(9deg);
  box-shadow: 0 10px 12px rgba(0,0,0,.08);
  opacity: .95;
  pointer-events:none;
}

/* Titel etwas lebendiger */
.foot-title{
  transform: rotate(-0.2deg) !important;
  display: inline-block;
  margin-bottom: 12px !important;
}

/* Text block schöner begrenzen */
.foot-text{
  max-width: 720px;
  margin: 0 auto !important;
}

/* Links: centered, mehr spacing */
.footer-links,
.foot-links{
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  gap: 12px 18px !important;
  margin-top: 16px !important;
}

/* Underline im Footer: wieder sichtbarer aber dezent */
.footer-links a::after,
.foot-links a::after{
  opacity: .45 !important;
}

/* -------- Wobble Animations -------- */
@keyframes kft-footer-wobble{
  0%   { transform: translateY(0) rotate(-.6deg); }
  20%  { transform: translateY(-3px) rotate(-2deg); }
  45%  { transform: translateY(0) rotate(1.2deg); }
  70%  { transform: translateY(-2px) rotate(-1.1deg); }
  100% { transform: translateY(0) rotate(-.6deg); }
}

/* Footer Links: wie Sticker – wackeln on hover */
.footer-links a,
.foot-links a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid rgba(47,47,47,.12);
  background: rgba(255,255,255,.38);
  box-shadow: 0 12px 18px rgba(0,0,0,.08);
  transform: rotate(-.6deg);
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms cubic-bezier(.2,.8,.2,1), filter 140ms cubic-bezier(.2,.8,.2,1);
}

/* Alternierende Rotation = lebendig aber strukturiert */
.footer-links a:nth-child(even),
.foot-links a:nth-child(even){
  transform: rotate(0.8deg);
}

@media (hover:hover) and (pointer:fine){
  .footer-links a:hover,
  .foot-links a:hover{
    animation: kft-footer-wobble 520ms cubic-bezier(.2,.8,.2,1) 1;
    box-shadow: 0 18px 26px rgba(0,0,0,.12);
    filter: saturate(1.06);
  }
}

/* Click feedback */
.footer-links a:active,
.foot-links a:active{
  transform: translateY(2px) rotate(-.6deg);
  box-shadow: 0 10px 14px rgba(0,0,0,.08);
}

/* Footer "Card" selbst minimal lebendig beim hover */
@keyframes kft-footer-card-sway{
  0%   { transform: rotate(-.35deg); }
  40%  { transform: rotate(0.25deg); }
  75%  { transform: rotate(-0.15deg); }
  100% { transform: rotate(-.35deg); }
}

@media (hover:hover) and (pointer:fine){
  .footer-collage:hover{
    animation: kft-footer-card-sway 900ms cubic-bezier(.2,.8,.2,1) 1;
  }
}

/* Mobile: weniger Rotation, sonst wirkt es wacklig */
@media (max-width: 899px){
  .footer-collage{
    transform: rotate(-.15deg) !important;
  }
  .footer-links a,
  .foot-links a{
    padding: 9px 10px;
  }
}
/* ==========================================================
   FOOTER — ZETTEL-OPTIK statt Box + keine Button-Rahmen
========================================================== */

/* Footer-Grundfläche wie ein Zettel */
.footer-collage{
  position: relative;
  background: rgba(245,241,232,.96);
  border: none !important;                 /* harte Box weg */
  box-shadow: 0 26px 50px rgba(0,0,0,.14);
  padding: 26px 18px !important;
  transform: rotate(-0.4deg) !important;
  overflow: visible !important;
}

/* handgezeichneter Zettel-Rand */
.footer-collage::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: .9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 360'%3E%3Cpath d='M18 22 L120 14 L260 26 L380 12 L520 22 L586 18 L590 120 L572 200 L588 300 L520 316 L380 302 L260 322 L120 312 L16 292 L24 190 L12 120 Z' fill='none' stroke='%233a3a3a' stroke-width='4' stroke-opacity='.12'/%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
}

/* Titel bleibt leicht handgemacht */
.foot-title{
  transform: rotate(-0.3deg) !important;
  display: inline-block;
  margin-bottom: 12px !important;
}

/* Text ruhiger & mittig */
.foot-text{
  max-width: 720px;
  margin: 0 auto 6px !important;
}

/* ==========================================================
   FOOTER LINKS — TEXTSTIL statt BUTTON
========================================================== */

.footer-links a,
.foot-links a{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 2px !important;

  font-family: var(--font-hand);
  font-weight: 900;
  font-size: 16px;

  transform: rotate(-0.4deg);
  position: relative;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1);
}

/* handgezeichnete Unterstreichung */
.footer-links a::after,
.foot-links a::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  bottom:-8px;
  height: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='18'%3E%3Cpath d='M2 10c24-10 48 10 72 0s48-10 72 0 48 10 72 0' fill='none' stroke='%23f090b0' stroke-width='3.8' stroke-linecap='round' stroke-opacity='.55'/%3E%3C/svg%3E")
    repeat-x left / 240px 18px;
  pointer-events:none;
  opacity: .8;
}

/* leichte Variation = handgemacht */
.footer-links a:nth-child(even),
.foot-links a:nth-child(even){
  transform: rotate(0.6deg);
}

/* Hover: leichtes Wackeln, kein Button */
@keyframes kft-footer-link-wobble{
  0%   { transform: rotate(-0.4deg); }
  30%  { transform: rotate(-1.6deg); }
  60%  { transform: rotate(1.2deg); }
  100% { transform: rotate(-0.4deg); }
}

@media (hover:hover) and (pointer:fine){
  .footer-links a:hover,
  .foot-links a:hover{
    animation: kft-footer-link-wobble 420ms cubic-bezier(.2,.8,.2,1) 1;
  }
}

/* Active: kleines Druckgefühl */
.footer-links a:active,
.foot-links a:active{
  transform: translateY(2px) rotate(-0.4deg);
}

/* ==========================================================
   MOBILE: ruhiger, weniger Rotation
========================================================== */
@media (max-width: 899px){
  .footer-collage{
    transform: rotate(-0.2deg) !important;
    padding: 22px 14px !important;
  }

  .footer-links a,
  .foot-links a{
    font-size: 15px;
  }
}
/* ==========================================================
   SUBPAGES BASE
========================================================== */

.page-hero{ padding: 16px 0 10px; }
.page-hero-inner{ position: relative; }

.page-hero-scribbles{
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 1;
}

.page-hero-note{
  position: relative;
  z-index: 2;
  background: rgba(245,241,232,.96);
  border: 2px solid rgba(47,47,47,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding: 16px 14px;
  transform: rotate(-0.5deg);
}

.page-eyebrow{
  font-family: var(--font-hand);
  font-weight: 900;
  opacity: .92;
  transform: rotate(0.4deg);
  margin-bottom: 6px;
}

.page-title{
  margin: 0;
  transform: rotate(-0.2deg);
}

.page-hero-actions{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

/* Deko: simple stamps/scribbles (nur CSS, kein Bild nötig) */
.ph-stamp{
  position:absolute;
  width: 72px; height: 72px;
  border: 2px solid rgba(47,47,47,.12);
  box-shadow: 0 14px 18px rgba(0,0,0,.08);
  opacity: .85;
}
.ph-stamp.s1{ left: 6%; top: 18%; transform: rotate(-10deg); background: rgba(240,144,176,.12); }
.ph-stamp.s2{ right: 7%; top: 26%; transform: rotate(12deg); background: rgba(192,224,240,.18); }

.ph-scrib{
  position:absolute;
  width: 140px; height: 44px;
  border: 2px dashed rgba(47,47,47,.10);
  opacity: .65;
}
.ph-scrib.ph1{ left: 16%; bottom: 18%; transform: rotate(-8deg); }
.ph-scrib.ph2{ right: 14%; bottom: 20%; transform: rotate(9deg); }

/* ==========================================================
   ANFAHRT PAGE (eigener Look)
========================================================== */

.page-content{ padding: 10px 0 22px; }

.page-grid{
  display: grid;
  gap: 18px;
}
@media (min-width: 900px){
  .page-grid{
    grid-template-columns: 1.2fr .8fr;
    align-items: start;
    gap: 22px;
  }
}

/* Map Card */
.map-card{
  position: relative;
  background: rgba(245,241,232,.96);
  border: 2px solid rgba(47,47,47,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding: 14px;
  transform: rotate(-0.4deg);
}
.map-head{ margin-bottom: 10px; }

.map-frame{
  position: relative;
  height: 340px;
  border: 2px solid rgba(47,47,47,.14);
  background:
    radial-gradient(520px 220px at 30% 20%, rgba(240,144,176,.10), transparent 60%),
    radial-gradient(520px 220px at 80% 80%, rgba(192,224,240,.22), transparent 62%),
    repeating-linear-gradient(90deg, rgba(47,47,47,.05) 0 10px, rgba(47,47,47,.02) 10px 22px);
  overflow: hidden;
  box-shadow: inset 0 18px 26px rgba(0,0,0,.06);
}

.map-pin{
  position: absolute;
  left: 50%;
  top: 46%;
  width: 18px;
  height: 18px;
  transform: translate(-50%,-50%) rotate(10deg);
  background: rgba(240,144,176,.95);
  border: 2px solid rgba(47,47,47,.18);
  box-shadow: 0 16px 20px rgba(0,0,0,.16);
}
.map-pin::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 100%;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid rgba(240,144,176,.95);
}

.map-hint{
  position:absolute;
  right: 12px;
  top: 12px;
  background: rgba(245,241,232,.94);
  border: 2px solid rgba(47,47,47,.14);
  box-shadow: 0 14px 22px rgba(0,0,0,.10);
  padding: 10px 10px;
  transform: rotate(1deg);
}
.map-hint-title{
  font-family: var(--font-hand);
  font-weight: 900;
  margin-bottom: 2px;
}

.map-click{
  position:absolute;
  inset: 0;
}

.map-foot{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.map-notes{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

/* Times side */
.times-card{
  display: grid;
  gap: 16px;
}

.mini-chalk{
  transform: rotate(0.7deg);
}

.mini-paper{
  transform: rotate(-0.7deg);
}

@media (max-width: 899px){
  .map-frame{ height: 280px; }
}
/* Google Maps Embed – clean & responsive */
.map-embed{
  padding: 0 !important;
  overflow: hidden;
}

.map-embed iframe{
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}

@media (max-width: 899px){
  .map-embed iframe{
    min-height: 280px;
  }
}
/* Map soll wirklich die komplette map-frame Flaeche fuellen */
.map-frame.map-embed{
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}

.map-frame.map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* ==========================================================
   TORTENWUENSCHE PAGE (eigener Look)
========================================================== */

.page-tortenwuensche .tw-hero .tw-note{
  transform: rotate(-0.35deg);
}

.tw-sub{
  margin: 10px 0 0;
  font-family: var(--font-hand);
  font-weight: 800;
  color: rgba(47,47,47,.92);
  transform: rotate(0.35deg);
}

.tw-grid{
  display: grid;
  gap: 18px;
}
@media (min-width: 900px){
  .tw-grid{
    grid-template-columns: 1.25fr .75fr;
    gap: 22px;
    align-items: start;
  }
}

/* Wunschzettel (Paper big) */
.tw-sheet{
  position: relative;
  background: rgba(245,241,232,.97);
  border: 2px solid rgba(47,47,47,.18);
  box-shadow: 0 22px 50px rgba(0,0,0,.12);
  padding: 16px 14px;
  transform: rotate(-0.45deg);
  overflow: hidden;
}

/* hand-drawn edge (Zettel) */
.tw-sheet::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: .85;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='420'%3E%3Cpath d='M18 24 L140 16 L260 28 L380 14 L520 26 L700 20 L706 120 L690 200 L706 300 L520 310 L380 298 L260 318 L140 308 L16 292 L24 190 L12 120 Z' fill='none' stroke='%234b4b4b' stroke-width='5' stroke-opacity='.10'/%3E%3C/svg%3E")
    no-repeat center/100% 100%;
}

.tw-sheet > *{ position: relative; z-index: 2; }

.tw-sheet-tape{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 96px;
  height: 22px;
  background: rgba(192,224,240,.30);
  border: 2px solid rgba(47,47,47,.10);
  transform: rotate(10deg);
  opacity: .95;
  box-shadow: 0 10px 12px rgba(0,0,0,.08);
  z-index: 3;
}

.tw-sheet-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tw-mini{
  font-family: var(--font-hand);
  font-weight: 800;
  opacity: .86;
  transform: rotate(0.7deg);
}

/* Form fields */
.tw-form{
  display: grid;
  gap: 12px;
}

.tw-row{
  display: grid;
  gap: 12px;
}
@media (min-width: 900px){
  .tw-row{
    grid-template-columns: 1fr 1fr;
  }
}

.tw-field{
  display: grid;
  gap: 6px;
}

.tw-label{
  font-family: var(--font-hand);
  font-weight: 900;
  transform: rotate(-0.25deg);
}

.tw-input{
  border: 2px solid rgba(47,47,47,.14);
  background: rgba(255,255,255,.55);
  padding: 12px 12px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45);
}

.tw-textarea{
  resize: vertical;
  min-height: 140px;
}

.tw-field-full{
  grid-column: 1 / -1;
}

/* Blocks: chips */
.tw-split{
  display: grid;
  gap: 12px;
}
@media (min-width: 900px){
  .tw-split{
    grid-template-columns: 1fr 1fr;
  }
}

.tw-block{
  border: 2px solid rgba(47,47,47,.12);
  background: rgba(255,255,255,.40);
  padding: 12px 12px;
  box-shadow: 0 12px 18px rgba(0,0,0,.08);
  transform: rotate(0.35deg);
}
.tw-block:nth-child(even){ transform: rotate(-0.35deg); }

.tw-block-title{
  font-family: var(--font-head);
  font-size: 26px;
  margin-bottom: 8px;
  transform: rotate(-0.3deg);
}

.tw-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}

.tw-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid rgba(47,47,47,.12);
  background: rgba(245,241,232,.70);
  font-family: var(--font-hand);
  font-weight: 900;
  transform: rotate(-0.6deg);
}
.tw-chip:nth-child(even){ transform: rotate(0.6deg); }

.tw-chip input{
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
}

.tw-hint{
  margin-top: 8px;
  font-size: 13px;
  opacity: .86;
}

/* submit row */
.tw-submit{
  display: grid;
  gap: 10px;
}
@media (min-width: 560px){
  .tw-submit{
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.tw-legal{
  margin: 2px 0 0;
  opacity: .82;
}

/* side */
.tw-side{
  display: grid;
  gap: 16px;
}
.tw-tip{ transform: rotate(0.55deg); }
.tw-chalk{ transform: rotate(-0.7deg); }

@media (max-width: 899px){
  .tw-sheet{ transform: rotate(-0.2deg); }
  .tw-block{ transform: rotate(0.2deg); }
  .tw-block:nth-child(even){ transform: rotate(-0.2deg); }
}
/* ==========================================================
   TORTENWUENSCHE — WIRKLICHER WUNSCHZETTEL (klar & clean)
========================================================== */

.page-tortenwuensche .tw-wrap{
  padding: 18px 0 26px;
}

/* EIN großer Zettel */
.page-tortenwuensche .tw-sheet{
  position: relative;
  max-width: 980px;
  margin: 0 auto;

  background: rgba(245,241,232,.97);
  box-shadow: 0 26px 55px rgba(0,0,0,.14);
  border: 2px solid rgba(47,47,47,.18);
  padding: 18px 16px 16px;

  transform: rotate(-0.35deg);
  overflow: hidden;
}

/* Handgezeichneter Rand (Zettel) */
.page-tortenwuensche .tw-sheet::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: .75;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='520'%3E%3Cpath d='M18 30 L160 18 L300 32 L440 16 L620 30 L800 22 L806 160 L786 260 L806 380 L640 410 L460 392 L300 420 L150 402 L16 370 L28 250 L10 160 Z' fill='none' stroke='%233a3a3a' stroke-width='6' stroke-opacity='.10'/%3E%3C/svg%3E")
    no-repeat center/100% 100%;
}

/* leichte Linien wie Schul-/Notizpapier */
.page-tortenwuensche .tw-sheet::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: .30;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 30px,
      rgba(47,47,47,.12) 30px 31px
    );
}

/* Tape oben */
.page-tortenwuensche .tw-tape{
  position:absolute;
  top: 10px;
  width: 94px;
  height: 22px;
  border: 2px solid rgba(47,47,47,.10);
  box-shadow: 0 10px 12px rgba(0,0,0,.08);
  opacity: .95;
  z-index: 3;
}
.page-tortenwuensche .tw-tape.t1{
  left: 16px;
  background: rgba(192,224,240,.28);
  transform: rotate(-10deg);
}
.page-tortenwuensche .tw-tape.t2{
  right: 16px;
  background: rgba(240,144,176,.20);
  transform: rotate(10deg);
}

/* Inhalte auf Zettel nach vorne */
.page-tortenwuensche .tw-sheet > *{
  position: relative;
  z-index: 4;
}

/* Kopfbereich */
.page-tortenwuensche .tw-head{
  text-align: left;
  padding-top: 10px;
}

.page-tortenwuensche .tw-kicker{
  font-family: var(--font-hand);
  font-weight: 900;
  opacity: .90;
  transform: rotate(0.3deg);
}

.page-tortenwuensche .tw-title{
  margin: 6px 0 6px;
  font-family: var(--font-head);
  font-size: clamp(36px, 5vw, 56px);
  line-height: .95;
  transform: rotate(-0.2deg);
}

.page-tortenwuensche .tw-desc{
  margin: 0;
  max-width: 62ch;
  font-family: var(--font-hand);
  font-weight: 800;
  color: rgba(47,47,47,.90);
  transform: rotate(0.15deg);
}

.page-tortenwuensche .tw-nav{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.page-tortenwuensche .tw-link{
  font-family: var(--font-hand);
  font-weight: 900;
  position: relative;
  padding: 4px 2px;
  transform: rotate(-0.25deg);
}
.page-tortenwuensche .tw-link::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  bottom:-9px;
  height: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='18'%3E%3Cpath d='M2 10c24-10 48 10 72 0s48-10 72 0 48 10 72 0' fill='none' stroke='%23f090b0' stroke-width='3.8' stroke-linecap='round' stroke-opacity='.55'/%3E%3C/svg%3E")
    repeat-x left/240px 18px;
  pointer-events:none;
  opacity: .85;
}

/* Divider */
.page-tortenwuensche .tw-divider{
  margin: 14px 0 12px;
  height: 2px;
  background: rgba(47,47,47,.16);
  transform: rotate(-0.2deg);
  opacity: .7;
}

/* Form */
.page-tortenwuensche .tw-form{
  display: grid;
  gap: 12px;
}

.page-tortenwuensche .tw-row{
  display: grid;
  gap: 12px;
}
@media (min-width: 820px){
  .page-tortenwuensche .tw-row{
    grid-template-columns: 1fr 1fr;
  }
}

.page-tortenwuensche .tw-field{
  display: grid;
  gap: 6px;
}

.page-tortenwuensche .tw-label{
  font-family: var(--font-hand);
  font-weight: 900;
  transform: rotate(-0.15deg);
}

.page-tortenwuensche .tw-input{
  border: 2px solid rgba(47,47,47,.14);
  background: rgba(255,255,255,.62);
  padding: 12px 12px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45);
}

.page-tortenwuensche .tw-textarea{
  min-height: 220px;
  resize: vertical;
}

.page-tortenwuensche .tw-field-full{
  grid-column: 1 / -1;
}

.page-tortenwuensche .tw-hint{
  margin-top: 6px;
  font-size: 13px;
  opacity: .82;
  font-family: var(--font-hand);
  font-weight: 800;
}

/* Buttons sauber in einer Reihe (struktur!) */
.page-tortenwuensche .tw-actions{
  display: grid;
  gap: 10px;
}
@media (min-width: 720px){
  .page-tortenwuensche .tw-actions{
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
  }
}

.page-tortenwuensche .tw-legal{
  margin: 2px 0 0;
  opacity: .82;
}

/* Mobile: weniger Rotation */
@media (max-width: 899px){
  .page-tortenwuensche .tw-sheet{
    transform: rotate(-0.12deg);
    padding: 16px 14px 14px;
  }
  .page-tortenwuensche .tw-title{
    font-size: clamp(32px, 8vw, 44px);
  }
}
.page-tortenwuensche .tw-sheet-clean{ transform: rotate(-0.18deg) !important; }
@media (max-width: 899px){
  .page-tortenwuensche .tw-sheet-clean{ transform: rotate(-0.08deg) !important; }
}
.page-tortenwuensche .tw-actions-2{
  display:grid;
  gap:10px;
}
@media (min-width: 720px){
  .page-tortenwuensche .tw-actions-2{ grid-template-columns: 1fr 1fr; }
}
.page-tortenwuensche-sent .tw-confirm{
  display:grid;
  gap:10px;
  margin-top: 6px;
}
.page-tortenwuensche-sent .tw-confirm-row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border: 2px solid rgba(47,47,47,.12);
  background: rgba(255,255,255,.55);
}
.page-tortenwuensche-sent .tw-confirm-row span{
  font-family: var(--font-hand);
  font-weight: 900;
  opacity: .85;
}
/* Bestellzettel: geklonte Tray-Liste sieht sauber aus */
.page-bestellzettel .bz-trayclone{
  display: grid;
  gap: 10px;
}

/* Wenn eure Items .tray-item heißen -> nice card look */
.page-bestellzettel .bz-trayclone .tray-item{
  border: 2px solid rgba(47,47,47,.12);
  background: rgba(255,255,255,.62);
  box-shadow: 0 14px 22px rgba(0,0,0,.08);
  padding: 10px 10px;
}

/* Bestätigung */
.page-bestellzettel-sent .bz-confirm{
  display:grid;
  gap:10px;
  margin-top: 6px;
}
.page-bestellzettel-sent .bz-confirm-row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border: 2px solid rgba(47,47,47,.12);
  background: rgba(255,255,255,.55);
}
.page-bestellzettel-sent .bz-confirm-row span{
  font-family: var(--font-hand);
  font-weight: 900;
  opacity: .85;
}
.page-bestellzettel-sent .bz-ul{
  margin: 0;
  padding-left: 18px;
  font-family: var(--font-hand);
  font-weight: 900;
  opacity: .92;
}
.page-bestellzettel-sent .bz-actions{
  display:grid;
  gap:10px;
}
@media (min-width: 720px){
  .page-bestellzettel-sent .bz-actions{
    grid-template-columns: 1fr 1fr;
  }
}