@charset "UTF-8";
/* Die Waffel Ape by apeice. Dieselbe Seite wie apeice.de im Winter-Look: laedt nach
   apeice.css und legt nur Farben und die Waffel-Bausteine darueber.
   Farben, Vorschlag vom 15.09.2026 (die Hintergruende der Logo-Dateien sind frei):
     Tannengruen  #1F3B2D  Flaechen            Burgunder  #7A1F2E  Knoepfe, Kaesten
     Tanne hell   #2E5A43  Etiketten, Schrift  Gold       #D9A94E  Kreise, Akzente
     Creme        #FBF3E8  Grund               Pergament  #F3E4D0  Karten, Abschnitte */
:root {
  --tanne: #1F3B2D;
  --tanne-h: #2E5A43;
  --burgund: #7A1F2E;
  --burgund-d: #561420;
  --gold: #D9A94E;
  --gold-h: #EBC57A;

  /* Die Namen aus apeice.css, neu belegt. So greifen dort alle Regeln unveraendert. */
  --creme: #FBF3E8;
  --pfirsich: #F3E4D0;
  --lachs: #E8CFB6;
  --sand: #F7ECDD;
  --koralle: #B24A55;
  --mint: var(--gold);
  --mint-h: var(--gold-h);
  --mint-b: #EEF3EE;
  --mint-k: #DCE7DD;
  --petrol: var(--tanne-h);
  --braun: #3B2B24;
  --espresso: #26140F;
}
::selection { background: var(--gold-h); color: var(--espresso); }

/* ===== KOPFZEILE =====
   Eigene Klasse waffelmarke: .waffel ist die Karte weiter unten und wuerde sonst mitgreifen. */
.marke img { width: auto; height: 2.5rem; }
.wortmarke.waffelmarke { padding-bottom: .1rem; font-size: 1.05rem; line-height: 1.05; }
.wortmarke.waffelmarke small { display: block; margin-top: .2rem; font-size: .64rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tanne-h); }
/* Mehr Luft im Kopf: Die Waffel steht hochkant und braucht links Abstand zur Rundung. Die hellen
   Kreise rechts wirkten auf der grau durchscheinenden Glasflaeche eingeklemmt, deshalb Creme statt
   Weiss-Glas und etwas kleinere Kreise. */
.kopf .innen { padding-left: 1.3rem; padding-right: .7rem; background: rgb(251 243 232 / .93); }
.kopf .marke { align-items: center; gap: .5rem; }
.kopf .rund { width: 2.6rem; height: 2.6rem; }

/* ===== KNOEPFE: Burgunder, der Kreis leuchtet golden ===== */
.knopf { --grund: var(--burgund); }
.box.dunkel { background: var(--burgund); }

/* ===== HERO: Tannengruen mit warmem Licht ===== */
.hero {
  color: var(--creme);
  background:
    radial-gradient(46rem 24rem at 82% 8%, rgb(235 197 122 / .26), transparent 62%),
    radial-gradient(40rem 26rem at 0% 100%, rgb(122 31 46 / .5), transparent 66%),
    linear-gradient(160deg, #2B5040 0%, var(--tanne) 72%);
}
/* "Weihnachtskarte" ist lang. Etwas kleiner als auf apeice.de, sonst bricht das Wort. */
.hero h1 { color: var(--weiss); font-size: clamp(1.8rem, .9rem + 3vw, 3rem); }
.hero .box.hell { background: var(--creme); color: var(--tanne); }
.hero .unterzeile { color: var(--creme); }
.hero .saison {
  display: inline-block; margin: 0 0 1.1rem; padding: .3rem 1rem; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(235 197 122 / .45);
  color: var(--gold-h); font-size: .95rem; font-weight: 500;
}
.hero .versprechen, .hero .mail { color: var(--creme); }
/* Die Bewertungs-Pille ist weiss, ihr Text braucht die dunkle Schrift zurueck. */
.hero .bewertung { color: var(--braun); }
.hero .versprechen svg { color: var(--gold); }
/* Drei Waffeln als Faecher. Jede steht unten auf, gedreht wird um den Stiel. Der Schatten liegt
   auf dem Faecher und nicht auf den gedrehten Bildern: filter auf gedrehten Ebenen hat Chrome
   beim Testen ueber die ganze Seite verschmiert. */
.hero-bild.facher { filter: drop-shadow(0 22px 20px rgb(0 0 0 / .35)); }
.hero-bild.facher img { bottom: 5%; width: 33%; transform-origin: 50% 96%; }
.hero-bild.facher img:nth-child(1) { left: 13%; rotate: -15deg; }
.hero-bild.facher img:nth-child(2) { left: 33.5%; bottom: 8%; width: 35%; z-index: 1; }
.hero-bild.facher img:nth-child(3) { left: 54%; rotate: 15deg; }
@media (max-width: 56rem) { .hero-bild.facher { max-width: 24rem; } }
@media (max-width: 40rem) { .hero .saison { font-size: .85rem; border-radius: 1rem; } }

/* ===== WAFFELN - fuenf Spezialwaffeln als Karten ===== */
.waffeln { background: linear-gradient(180deg, var(--mint-k) 0%, var(--mint-b) 100%); }
.waffeln.abschnitt { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.merkmale { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.2rem 0 0; padding: 0; }
.merkmale li { padding: .25rem .95rem; border-radius: var(--r-pill); background: var(--weiss); box-shadow: var(--schatten-s); font-size: .92rem; font-weight: 500; color: var(--tanne); }
/* Das Raster nur ab Tablet. Darunter greift die Wisch-Reihe aus apeice.css. Ohne Medienabfrage
   wuerde diese Regel sie ueberschreiben, weil waffel.css spaeter laedt. */
@media (min-width: 40.01rem) { .waffeln .raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; } }
.waffel {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--r-l); background: var(--weiss); box-shadow: var(--schatten-s);
  transition: transform var(--weich), box-shadow var(--weich);
}
.waffel .buehne {
  position: relative; aspect-ratio: 3 / 4;
  background: radial-gradient(circle at 50% 55%, rgb(255 255 255 / .95) 0 28%, transparent 70%), var(--farbe, var(--pfirsich));
}
/* apeice.css stellt .buehne img absolut. Das bleibt so, gerechnet wird aber gegen die Buehne
   (position: relative oben). So bestimmt das Bild nie die Hoehe der Karte mit. */
.waffel .buehne img { position: absolute; inset: 7% 8% 6%; width: 84%; height: 87%; object-fit: contain; filter: drop-shadow(0 12px 12px rgb(38 20 15 / .22)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.waffel .text { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.2rem; }
.waffel h3 {
  align-self: flex-start; padding: .1rem .55rem; border-radius: .35rem;
  background: var(--burgund); color: var(--weiss); font-size: 1rem; text-transform: uppercase; letter-spacing: .02em;
}
.waffel p { margin: .6rem 0 0; font-size: .9rem; line-height: 1.5; }
.waffel:nth-child(1) { --farbe: #F5D9DC; }
.waffel:nth-child(2) { --farbe: #F7E4B8; }
.waffel:nth-child(3) { --farbe: #EADCD1; }
.waffel:nth-child(4) { --farbe: #F0E5C8; }
.waffel:nth-child(5) { --farbe: #EFD3D3; }
@media (hover: hover) {
  .waffel:hover { transform: translateY(-4px); box-shadow: var(--schatten-m); }
  .waffel:hover .buehne img { transform: translateY(-4px) rotate(-4deg); }
}
.waffeln .zusatz {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.2rem;
  width: fit-content; max-width: 100%; margin: 2.5rem auto 0; padding: .7rem 1.3rem .7rem .8rem;
  border-radius: var(--r-pill); background: rgb(255 255 255 / .75); box-shadow: var(--schatten-s);
}
.waffeln .zusatz p { margin: 0; }
.waffeln .zusatz img { width: 2.9rem; }
@media (min-width: 40.01rem) and (max-width: 68rem) { .waffeln .raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 40rem) {
  .waffeln .raster.wisch > * { flex-basis: 64%; }
  .waffeln .zusatz { flex-direction: column; gap: .5rem; border-radius: var(--r-l); padding: 1rem 1.2rem; text-align: center; }
}

/* ===== PAKETE auf Tannengruen ===== */
.pakete { background: var(--tanne); color: var(--creme); }
.pakete .kopfzeile h2 { color: var(--weiss); }
.pakete .augenbraue { color: var(--gold); }
.pakete .einleitung { color: var(--creme); }
.pakete .paket { color: var(--braun); }
.paket.corporate { background: var(--pfirsich); border-color: var(--gold); }
.paket .empfehlung { background: var(--burgund); }
.pakete .punkte { color: var(--creme); }
/* Streichpreis: der alte Preis klein und durchgestrichen vor dem neuen. */
.paket .preis s { margin-right: .35rem; font-size: .68em; font-weight: 400; color: var(--koralle); text-decoration-thickness: 2px; }

/* ===== BAND MIT AKIKO: Burgunder, Wimpelkette in Winterfarben ===== */
.band { background: linear-gradient(90deg, var(--burgund) 0%, var(--burgund-d) 100%); }
.band .versprechen, .band .mail { color: var(--creme); }
.band .versprechen svg { color: var(--gold); }
/* Wimpelkette wie auf apeice.de, in Winterfarben: Tannengruen, Creme und Gold auf Burgunder.
   Form und Groesse kommen aus apeice.css, hier wird nur das Bild getauscht. */
.band::before { background: url("
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='72' viewBox='0 0 360 72'%3E%3Cg fill='rgba(64,56,47,.14)'%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(31.5 12.78) rotate(7.39)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(91.5 19) rotate(4.45)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(151.5 22.11) rotate(1.49)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(211.5 22.11) rotate(-1.49)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(271.5 19) rotate(-4.45)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(331.5 12.78) rotate(-7.39)'/%3E%3C/g%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%234D7A5E' transform='translate(30 10.28) rotate(7.39)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%23F3E6D3' transform='translate(90 16.5) rotate(4.45)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%23D9A94E' transform='translate(150 19.61) rotate(1.49)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%232E5A43' transform='translate(210 19.61) rotate(-1.49)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%23EBC57A' transform='translate(270 16.5) rotate(-4.45)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%23F3E6D3' transform='translate(330 10.28) rotate(-7.39)'/%3E%3Cpath d='M-2 6Q180 34 362 6' fill='none' stroke='%23EBC57A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E
") repeat-x 50% 0 / 360px 72px; }
@media (max-width: 40rem) { .band::before { background-size: 280px 56px; } }