/* ======================================================
   MENU – Wooden Frame Chalkboard
   + Eine große zentrale Kreide-Illustration oben (Option A)
   ====================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Caveat:wght@600;700&display=swap');

:root{
  --bg1:#141414;
  --bg2:#0e0e0e;

  --chalk:#f5f5f5;
  --chalk-soft:rgba(255,255,255,.82);
  --chalk-muted:rgba(255,255,255,.55);

  --board:#1c1c1c;
  --board2:#111;

  --wood2:#6f4521;
  --wood3:#b37a3c;

  --title-font:"Fredericka the Great", serif;
  --chalk-font:"Caveat", cursive;

  --radius:18px;

  /* Side-Icon Grundbox (für Standard-Kategorien) */
  --icon-w: 150px;
  --icon-h: 100px;
}

*{box-sizing:border-box;}

html{
  min-height:100%;
  background:
    radial-gradient(1000px 600px at 30% 20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(800px 600px at 70% 80%, rgba(255,255,255,.05), transparent 65%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
}

html::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.15;
  mix-blend-mode:overlay;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.15), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.12), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 6px);
}

body.menu-v2{
  margin:0;
  min-height:100vh;
  color:var(--chalk);
  font-family:var(--chalk-font);
}

/* HERO */
.board-hero{ text-align:center; padding:30px 15px 10px; }
.board-hero-title{
  font-family:var(--title-font);
  font-size:clamp(42px,5vw,70px);
  letter-spacing:.06em;
  margin:10px 0 6px;
  color:var(--chalk);
  text-shadow: 0 1px 0 #000, 0 0 3px rgba(255,255,255,.4), 0 0 6px rgba(255,255,255,.2);
}
.board-hero-sub{ font-size:20px; opacity:.85; margin-bottom:10px; }

/* GRID */
.board-wrap{ max-width:1200px; margin:0 auto; padding:20px 15px 80px; }
.board-grid{ display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1000px){ .board-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:700px){ .board-grid{grid-template-columns:1fr;} }

/* BOARD */
.chalk-board{ position:relative; border-radius:var(--radius); box-shadow:0 20px 55px rgba(0,0,0,.55); }
.chalk-board::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);

  /* ★ NATÜRLICHE HOLZTEXTUR ★ */
  background: 
    url("/upload/holzrustikal.jpg") center/cover no-repeat,
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));

  /* leichte Verdunklung + Realismus */
  background-blend-mode: multiply;

  /* schöne Rahmenkante */
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.6),
    inset 0 0 12px rgba(0,0,0,.45),
    inset 0 0 35px rgba(0,0,0,.5);
}
.chalk-frame{
  position:relative;
  margin:16px;
  padding:20px 18px 18px;
  border-radius:12px;
  background:
    radial-gradient(800px 500px at 30% 25%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg,var(--board),var(--board2));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), inset 0 0 25px rgba(0,0,0,.6);
  overflow:hidden;
}

.chalk-frame::before{
  content:"";
  position:absolute; inset:0;
  opacity:.1; pointer-events:none;
  background:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.25), transparent 40%),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,.2), transparent 45%);
}

/* TITLE (Standard – mit Side-Icon-Reserven) */
.chalk-title{
  text-align:center;
  font-family:var(--title-font);
  font-size:30px;
  margin:0 0 16px;
  position:relative;
  color:var(--chalk);

  /* Seitenfreiraum für Standard-Kategorien (Side-Icons) */
  padding: 18px calc(var(--icon-w) - 6px) 18px;

  /* oberer Freiraum (Standard) */
  padding-top: calc(var(--icon-h) + 24px);

  text-shadow: 0 1px 0 #000, 0 0 4px rgba(255,255,255,.4), 0 0 8px rgba(255,255,255,.25);

  /* Punkte: oben drei + unten ein Punkt (Standard) */
  background:
    radial-gradient(circle at 50% 12px, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at calc(50% - 16px) 12px, rgba(255,255,255,.65) 0 2px, transparent 3px),
    radial-gradient(circle at calc(50% + 16px) 12px, rgba(255,255,255,.65) 0 2px, transparent 3px),
    radial-gradient(circle at 50% calc(100% - 12px), rgba(255,255,255,.75) 0 2px, transparent 3px);
  background-repeat:no-repeat;
}

/* ===== Kreide-Icons: werden über CSS-Variablen gesetzt ===== */
.chalk-board{
  --icon-left: none;
  --icon-right: none;
}

/* Side-Icons (Standard) */
.chalk-title::before,
.chalk-title::after{
  content:"";
  position:absolute;
  top: calc(12px + (var(--icon-h) / 2));
  transform: translateY(-50%);
  width: var(--icon-w);
  height: var(--icon-h);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.95;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.65)) drop-shadow(0 0 8px rgba(255,255,255,.08));
  pointer-events:none;
}
.chalk-title::before{
  left: -6px;
  transform: translateY(-50%) rotate(-14deg);
  background-image: var(--icon-left);
}
.chalk-title::after{
  right: -6px;
  transform: translateY(-50%) rotate(12deg);
  background-image: var(--icon-right);
}

/* ====== Kategorien – Standard-Icon-Sets (unverändert) ====== */

.cat-ice{      --icon-left: url("/upload/image.png");   --icon-right:url("/upload/image1.png"); }
.cat-ice-cup{  --icon-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M56 38c0-12 10-22 24-22s24 10 24 22'/%3E%3Cpath d='M52 38h72'/%3E%3Cpath d='M60 38l10 56h32l10-56'/%3E%3Cpath d='M66 72c16 10 36 10 52 0' opacity='.55'/%3E%3Cpath d='M92 16c10 2 18 10 18 20' opacity='.45'/%3E%3Cpath d='M104 14l10-6'/%3E%3Cpath d='M110 8l6 10'/%3E%3C/g%3E%3C/svg%3E");  --icon-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 30l52 0'/%3E%3Cpath d='M54 30l8 64h28l8-64'/%3E%3Cpath d='M66 44c10-10 26-10 36 0'/%3E%3Cpath d='M72 54c8 6 20 6 28 0' opacity='.55'/%3E%3Cpath d='M112 18l12-8'/%3E%3Cpath d='M126 12l-10 16'/%3E%3C/g%3E%3C/svg%3E"); }
.cat-ice-spaghetti{ --icon-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='78' cy='78' rx='44' ry='16'/%3E%3Cpath d='M48 70c10-12 50-12 60 0'/%3E%3Cpath d='M56 64c8-10 40-10 48 0'/%3E%3Cpath d='M62 58c6-8 28-8 34 0'/%3E%3Cpath d='M90 42c14 8 22 18 22 28' opacity='.45'/%3E%3Cpath d='M38 48l10 12'/%3E%3Cpath d='M32 54l10 8'/%3E%3C/g%3E%3C/svg%3E"); --icon-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M62 44c0-16 12-28 28-28s28 12 28 28-12 26-28 26-28-10-28-26z'/%3E%3Cpath d='M68 70l22 36 22-36'/%3E%3Cpath d='M72 84l36 0' opacity='.55'/%3E%3C/g%3E%3C/svg%3E"); }
.cat-ice-fruitcup{ --icon-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M52 44h72'/%3E%3Cpath d='M58 44l10 52h42l10-52'/%3E%3Cpath d='M74 34c10-10 26-10 36 0'/%3E%3Cpath d='M96 20c10-6 20 6 10 12'/%3E%3Cpath d='M100 22c2-10 10-14 18-14' opacity='.45'/%3E%3Cpath d='M72 66c18 10 40 10 56 0' opacity='.55'/%3E%3C/g%3E%3C/svg%3E"); --icon-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M92 22c16 0 30 14 30 30 0 26-22 40-46 40S30 78 30 52c0-16 14-30 30-30' opacity='.0'/%3E%3Cpath d='M54 56c18-18 46-18 64 0'/%3E%3Cpath d='M54 56c18 22 46 22 64 0'/%3E%3Cpath d='M62 56c0-10 8-18 18-18s18 8 18 18' opacity='.55'/%3E%3Cpath d='M66 44l30 24' opacity='.35'/%3E%3C/g%3E%3C/svg%3E"); }
.cat-ice-specialcup{ --icon-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 40h76'/%3E%3Cpath d='M58 40l10 56h46l10-56'/%3E%3Cpath d='M70 28c8-10 26-10 34 0'/%3E%3Cpath d='M74 30c6 10 18 10 26 0' opacity='.55'/%3E%3Cpath d='M120 22l24 10'/%3E%3Cpath d='M118 30l24 10'/%3E%3Cpath d='M118 20l-6 18' opacity='.45'/%3E%3C/g%3E%3C/svg%3E"); --icon-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 24l56 0'/%3E%3Cpath d='M64 24l-8 74h64l-8-74'/%3E%3Cpath d='M74 36c10-10 22-10 32 0'/%3E%3Cpath d='M52 34l18 12'/%3E%3Cpath d='M50 44l18 12'/%3E%3Cpath d='M46 40l10-14' opacity='.45'/%3E%3C/g%3E%3C/svg%3E"); }
.cat-drinks{ --icon-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M64 12h32'/%3E%3Cpath d='M70 12v18c0 6-10 8-10 16v52h40V46c0-8-10-10-10-16V12'/%3E%3Cpath d='M62 56c12 8 24 8 36 0' opacity='.55'/%3E%3Cpath d='M66 26h28' opacity='.35'/%3E%3C/g%3E%3C/svg%3E"); --icon-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M56 24h60'/%3E%3Cpath d='M62 24l8 76h36l8-76'/%3E%3Cpath d='M78 24v-12'/%3E%3Cpath d='M78 12c10 0 18 6 22 8' opacity='.55'/%3E%3Cpath d='M70 56c14 8 26 8 40 0' opacity='.45'/%3E%3C/g%3E%3C/svg%3E"); }
.cat-coffee{ --icon-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M52 44h70v20c0 16-12 28-28 28H80c-16 0-28-12-28-28V44z'/%3E%3Cpath d='M122 48h10c12 0 14 18 0 18h-10'/%3E%3Cpath d='M66 36c0-10 10-14 10-24' opacity='.55'/%3E%3Cpath d='M84 36c0-10 10-14 10-24' opacity='.45'/%3E%3C/g%3E%3C/svg%3E"); --icon-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M66 68c10-14 10-30 0-44 16 2 26 18 18 34-6 12-18 14-18 10z'/%3E%3Cpath d='M98 72c10-14 10-30 0-44 16 2 26 18 18 34-6 12-18 14-18 10z' opacity='.85'/%3E%3Cpath d='M86 52c-6 10-6 20 0 30' opacity='.45'/%3E%3C/g%3E%3C/svg%3E"); }
.cat-dessert{ --icon-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 86h88'/%3E%3Cpath d='M56 86l18-52h50l-18 52H56z'/%3E%3Cpath d='M82 34c8 10 18 10 26 0' opacity='.55'/%3E%3Cpath d='M76 50h42' opacity='.35'/%3E%3Cpath d='M96 24l10-10'/%3E%3Cpath d='M106 14l10 10'/%3E%3C/g%3E%3C/svg%3E"); --icon-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M62 54c0-14 12-26 26-26s26 12 26 26'/%3E%3Cpath d='M66 54h52l-6 44H72l-6-44z'/%3E%3Cpath d='M76 42c8 10 20 10 28 0' opacity='.55'/%3E%3Cpath d='M88 22l0-10'/%3E%3Cpath d='M84 12h8'/%3E%3C/g%3E%3C/svg%3E"); }

/* ======================================================
   OPTION A – .cat-ice mit EINER großen Hero-Illustration oben
   + zentrales ICE-CREAM Banner darunter (größer)
   ====================================================== */

/* Konfiguration nur für .cat-ice */
.cat-ice{
  /* Side-Icons deaktivieren (keine Rand-Reservierung) */
  --icon-left: none;
  --icon-right: none;

  /* 1) GROSSE KREIDE-ILLUSTRATION (Hero) – OBERHALB DES BANNERS */
  --ice-hero-img: url("/upload/dreiwaffelneis.png");  /* <-- dein Chalk-PNG */
  --ice-hero-w: 300px;
  --ice-hero-h: 140px;
  --ice-hero-top: 16px;   /* Abstand zur Innenkante oben */

  /* 2) BANNER (Titelbild) – JETZT DEUTLICH GRÖSSER */
  --title-image: url("/upload/icecreamsw.png");       /* <-- dein ICE-CREAM Banner */
  --title-w: 360px;        /* Basisbreite (vor Skalierung) */
  --title-h: 140px;        /* Basishöhe (vor Skalierung) */
  --title-scale: 1.65;     /* << vergrößert sichtbar das Banner */
  --title-top: calc(var(--ice-hero-top) + var(--ice-hero-h) + -65px);
}

/* Platz für Hero + Banner automatisch berechnen */
.cat-ice .chalk-title{
  padding-left: 18px;
  padding-right: 18px;

  /* Platz oben = Hero + Abstand + (Bannerhöhe * Skala) + Luft */
  padding-top: calc(
    var(--ice-hero-top) +
    var(--ice-hero-h) +
    (var(--title-h) * var(--title-scale)) +
    -200px
  );

  /* Titeltext aus, Punkte nur unten */
  color: transparent;
  text-shadow: none;
  background:
    radial-gradient(circle at calc(50% - 16px) calc(100% - 12px), rgba(255,255,255,.65) 0 2px, transparent 3px),
    radial-gradient(circle at 50%               calc(100% - 12px), rgba(255,255,255,.9)  0 2px, transparent 3px),
    radial-gradient(circle at calc(50% + 16px) calc(100% - 12px), rgba(255,255,255,.65) 0 2px, transparent 3px);
  background-repeat:no-repeat;
}

/* 1) HERO-Illustration oben – zentriert im Frame */
.cat-ice .chalk-frame{
  position:relative;
}
.cat-ice .chalk-frame::before{
  content:"";
  position:absolute;
  left:50%;
  top: var(--ice-hero-top);
  width: var(--ice-hero-w);
  height: var(--ice-hero-h);
  transform: translateX(-50%);
  background-image: var(--ice-hero-img);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.18;                 /* Kreide-Look */
  pointer-events:none;
}

/* 2) Banner (Titelbild) mittig unter dem Hero – jetzt groß */
.cat-ice .chalk-title::before{
  content:"";
  position:absolute;
  left:50%;
  top: var(--title-top);
  width: var(--title-w);
  height: var(--title-h);
  transform: translateX(-50%) scale(var(--title-scale));
  background-image: var(--title-image);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.15));
  opacity:.98;
  pointer-events:none;
}

/* rechtes Standard-Side-Icon AUS */
.cat-ice .chalk-title::after{
  content:none !important;
}

/* ======================================================
   Mobile
   ====================================================== */
@media (max-width: 700px){

  header.board-hero{
    width: 100%;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  header.board-hero .board-hero-title{
    display: block !important;
    width: 100% !important;
    margin: 10px 0 6px !important;
    padding: 0 !important;
    text-align: center !important;
  }
	
  /* kompakter – aber weiterhin sichtbar größer als zuvor */
  .cat-ice{
    --ice-hero-w: 320px;
    --ice-hero-h: 146px;
    --ice-hero-top: 12px;

    --title-w: 300px;
    --title-h: 120px;
    --title-scale: 3.30;    /* hier ggf. 1.55 probieren, wenn Platz ist */
    --title-top: calc(var(--ice-hero-top) + var(--ice-hero-h) + 14px);
  }

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

  .cat-ice .chalk-title{
    /* Abstand zu den Items */
    padding-top: calc(
      var(--ice-hero-top) +
      var(--ice-hero-h) +
      (var(--title-h) * var(--title-scale)) +
      -300px
    );
    margin-bottom: 28px;
  }
}

/* ITEMS */
.chalk-row{ display:flex; align-items:baseline; gap:10px; padding:9px 0; }
.chalk-name{
  min-width:120px; max-width:60%;
  font-size:20px;
  text-shadow: 0 1px 0 #000, 0 0 3px rgba(255,255,255,.35);
}
.chalk-desc{ margin-top:4px; font-size:15px; color:var(--chalk-soft); }
.chalk-leader{ flex:1; border-bottom:2px dotted rgba(255,255,255,.6); transform:translateY(-2px); }
.chalk-price{
  min-width:70px; text-align:right;
  font-family:var(--title-font); font-size:16px; letter-spacing:.05em;
  text-shadow: 0 1px 0 #000, 0 0 4px rgba(255,255,255,.4);
}
.chalk-price--na{ color:var(--chalk-muted); }

/* FOOTER */
.board-footer{
  text-align:center;
  padding:40px 10px 70px;
  color:var(--chalk-muted);
  font-size:14px;
  letter-spacing:.08em;
}