/* Bäckerei Paul Angebote 1.0.13 – Weißes Paul-Design.
   Braune und rote Überschriften, feiner roter Rahmen je Kachel.
   Alle Selektoren sind auf .bka eingegrenzt. Keine externen Schriften, keine Cookies. */
.bka-offers {
  --bka-red:#e20e1b; --bka-red-deep:#b8000f; --bka-yellow:#fbe21a; --bka-gold:#d9a441;
  --bka-brown:#614024; --bka-board:#ffffff; --bka-chalk:#614024;
  --bka-display:"Rockwell","Rockwell Nova","Roboto Slab","Zilla Slab","Bitter",Georgia,serif;
  --bka-ease:cubic-bezier(.16,1,.3,1); --bka-spring:cubic-bezier(.34,1.56,.64,1);
  position:relative; width:100%; box-sizing:border-box; overflow:hidden; isolation:isolate;
  /* Oben rund 50px weniger Luft als in 1.0.10, bei kleinen Ansichten mindestens 12px. */
  padding:clamp(12px, calc(5vw - 50px), 28px) clamp(22px,4.4vw,72px) clamp(28px,4vw,56px);
  color:var(--bka-brown); font-family:inherit; border-radius:0; container-type:inline-size;
  background:#ffffff;
}
.bka-offers *, .bka-offers *::before, .bka-offers *::after { box-sizing:border-box; }

/* 1.0.8: Den Angebotsblock unabhängig von der maximalen Inhaltsbreite
   des Themes bündig über die gesamte Bildschirmbreite darstellen.
   Es werden ausschließlich eigene Bäckerei-Elemente angesprochen. */
.bka-embed[data-bka-cols] {
  position:relative;
  left:50%;
  width:100vw;
  max-width:none;
  margin-left:-50vw;
  margin-right:0;
}
.bka-embed .bka-offers {
  width:100%;
  max-width:none;
  border-radius:0;
  border:0; outline:0; box-shadow:none;
  background:#ffffff; background-clip:border-box;
}

/* Bis die Angebotsdaten geladen sind, keinen sichtbaren Leerraum erzeugen.
   Nur der eigene leere Shortcode wird versteckt, niemals der restliche Inhalt. */
.bka-embed[data-bka-cols]:empty { display:none; }

/* Kreidetafel-Dekoration in der weißen Variante deaktiviert */
.bka-doodles {
  display:none; position:absolute; inset:-20% 0; z-index:-2; pointer-events:none; opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440' fill='none' stroke='%23ffffff' stroke-opacity='.11' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 100c-18-34 14-62 40-44 24-18 58 10 42 44-10 22-36 28-42 8-6 20-32 14-40-8z'/%3E%3Cpath d='M62 92l36-24M98 92L62 68'/%3E%3Cpath d='M300 40c0 40 0 80 0 120M300 70c-18-8-24-22-22-34 16 2 24 16 22 34zM300 70c18-8 24-22 22-34-16 2-24 16-22 34zM300 104c-18-8-24-22-22-34 16 2 24 16 22 34zM300 104c18-8 24-22 22-34-16 2-24 16-22 34zM300 138c-18-8-24-22-22-34 16 2 24 16 22 34zM300 138c18-8 24-22 22-34-16 2-24 16-22 34z'/%3E%3Cpath d='M60 330c-10-40 40-70 100-64 50 4 70 40 50 64-26 22-120 24-150 0z'/%3E%3Cpath d='M92 276l16 50M134 270l8 56M172 274l-2 52'/%3E%3Cpath d='M290 310c20-34 70-34 90-4-4 30-24 52-48 56-30-2-48-26-42-52z'/%3E%3Cpath d='M300 306l22 38M326 296l16 46M352 296l8 38'/%3E%3Ccircle cx='200' cy='180' r='30'/%3E%3Cpath d='M184 168c10 6 22 6 32 0M186 190c8 4 20 4 28 0'/%3E%3C/svg%3E");
  background-size:440px 440px; background-position:0 var(--bka-py,0px);
}
.bka-dust { display:none; position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }

/* Kopfbereich */
.bka-heading { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,40px); margin:0 0 clamp(30px,4.5vw,60px); padding:0; border:0; }
.bka-heading::after { content:none; }
.bka-overline { display:block; color:var(--bka-red); font-size:clamp(.82rem,1.1vw,1rem); font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; }
.bka-heading h2 {
  margin:.28em 0 .18em; padding:0; color:var(--bka-brown);
  font:900 clamp(2.1rem,5.2vw,4.6rem)/1.02 var(--bka-display); letter-spacing:.005em;
  text-shadow:none;
}
.bka-word { display:inline-block; overflow:hidden; vertical-align:top; padding:.06em .04em .14em; margin:-.06em -.04em -.14em; }
.bka-word > span { display:inline-block; will-change:transform; }
.bka-week {
  display:inline-block; margin:clamp(6px,1vw,12px) 0 0; padding:.55em 1.25em; border-radius:999px;
  background:var(--bka-red); color:#fff; font-size:clamp(.82rem,1.05vw,.98rem); font-weight:700; letter-spacing:.02em;
  box-shadow:none; border:1px solid rgba(255,255,255,.18);
}
.bka-logo { width:clamp(104px,17%,176px); min-width:92px; max-height:124px; height:auto; object-fit:contain; display:block; flex-shrink:0; transform-origin:50% 0; filter:drop-shadow(0 6px 12px rgba(97,64,36,.12)); }

/* Korrigiert gezielt Theme-Überschriftenfarben, ohne fremde Bereiche zu verändern. */
.bka-offers .bka-heading h2,
.bka-offers .bka-heading h2 .bka-word,
.bka-offers .bka-heading h2 .bka-word > span {
  color:#614024 !important;
  -webkit-text-fill-color:#614024 !important;
  background-image:none !important;
}
.bka-offers .bka-heading .bka-overline {
  color:#e20e1b !important;
  -webkit-text-fill-color:#e20e1b !important;
  background-image:none !important;
}

/* Woerter stets als Ganzes erhalten: die Schrift wird bei Bedarf im
   BKA-Frontend an die tatsaechliche Breite von Karte/Display angepasst.
   Gilt bei jeder Bildschirmgroesse, nicht nur fuer Smartphones. */
.bka-offers .bka-heading h2,
.bka-offers .bka-overline,
.bka-offers .bka-week,
.bka-offers .bka-tile-body h3,
.bka-offers .bka-category,
.bka-offers .bka-description,
.bka-offers .bka-badge,
.bka-offers .bka-price strong,
.bka-offers .bka-tile-fallback span,
.bka-offers .bka-footnote {
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}
.bka-offers .bka-heading h2 { max-width:100%; }
.bka-offers .bka-heading .bka-word { white-space:nowrap; }
.bka-offers .bka-week { max-width:100%; }

/* Kacheln */
.bka-tiles { position:relative; z-index:1; display:grid; grid-template-columns:repeat(var(--bka-cols),minmax(0,1fr)); gap:clamp(18px,2.2vw,32px); align-items:stretch; perspective:1400px; }
.bka-tile {
  --mx:50%; --my:30%;
  position:relative; min-width:0; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  background:#ffffff; border:1px solid var(--bka-red); border-radius:22px; color:var(--bka-brown);
  box-shadow:0 10px 26px rgba(97,64,36,.10);
  will-change:transform;
  transition:transform .6s var(--bka-ease), box-shadow .45s ease;
}
.bka-tile.bka-tilting { transition:transform .09s linear, box-shadow .45s ease; box-shadow:0 22px 42px rgba(97,64,36,.17); }
.bka-tile::before { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.42), transparent 55%); mix-blend-mode:soft-light; }
.bka-tile.bka-tilting::before { opacity:1; }
.bka-tile::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px; z-index:4; background:var(--bka-red); transform-origin:left; pointer-events:none; }

.bka-media { position:relative; isolation:isolate; aspect-ratio:5/3.7; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(70% 60% at 50% 58%, #ffffff 0%, #fbf3e4 100%); }
.bka-media::after { content:""; position:absolute; left:18%; right:18%; bottom:9%; height:12%; border-radius:50%; background:radial-gradient(closest-side, rgba(87,57,31,.22), transparent); filter:blur(4px); z-index:0; }
.bka-tile-image { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; object-position:center; padding:12px 14px; mix-blend-mode:multiply; transition:transform .7s var(--bka-ease); }
.bka-tile:hover .bka-tile-image { transform:scale(1.09) rotate(-1.5deg) translateY(-3px); }
.bka-tile-fallback { position:relative; z-index:1; width:100%; height:100%; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; color:#a6783c; font-size:.84rem; font-weight:600; letter-spacing:.03em; text-align:center; }
.bka-wheat { color:var(--bka-gold); font-size:3.4rem; line-height:1; }

.bka-badge { position:absolute; z-index:3; left:0; top:16px; max-width:calc(100% - 24px); display:inline-block; background:var(--bka-yellow); color:#3b1f0c; padding:8px 16px 8px 14px; border-radius:0 999px 999px 0; font-size:.76rem; font-weight:900; line-height:1.15; box-shadow:0 6px 14px rgba(0,0,0,.2); }

.bka-tile-body { position:relative; padding:clamp(36px,3vw,44px) clamp(16px,1.9vw,24px) clamp(20px,2vw,26px); display:flex; flex:1; flex-direction:column; gap:9px; border:0; }
.bka-category { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--bka-red); padding-right:0; }
.bka-tile-body h3 {
  margin:0; padding:0; font:900 clamp(1.18rem,1.7vw,1.55rem)/1.2 var(--bka-display); overflow-wrap:normal; word-break:normal; hyphens:none; color:#614024;
  background:none; -webkit-text-fill-color:#614024;
}
.bka-description { margin:0; color:#614024; line-height:1.5; font-size:.94rem; }

/* Preis-Sticker – wie das rote Schild im Header */
.bka-price { position:absolute; z-index:6; right:clamp(10px,1.4vw,18px); top:calc(-1 * clamp(26px,2.4vw,34px)); margin:0; padding:0; transform:rotate(-4deg); transform-origin:50% 50%; }
.bka-price strong {
  display:block; padding:.34em .72em .38em; border-radius:14px; background:linear-gradient(160deg,#f01524,var(--bka-red-deep));
  color:#fff; font:900 clamp(1.3rem,1.95vw,1.9rem)/1 var(--bka-display); white-space:nowrap; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  border:2px solid rgba(255,255,255,.92); box-shadow:0 12px 22px rgba(120,0,10,.38), 0 3px 0 rgba(0,0,0,.18);
}

/* Hervorhebungen */
.bka-highlight-yellow { background:#ffffff; }
@property --bka-a { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.bka-highlight-yellow { box-shadow:0 10px 26px rgba(97,64,36,.10); }
.bka-highlight-yellow > .bka-media::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(115deg, transparent 38%, rgba(251,226,26,.45) 50%, transparent 62%); transform:translateX(-120%); animation:bka-sheen 4.6s ease-in-out 1.6s infinite; }
.bka-highlight-yellow .bka-badge { background:linear-gradient(90deg,#ffe84a,#f6c800); }
.bka-highlight-blue .bka-badge { background:#2f7fc4; color:#fff; }
.bka-highlight-blue::after { background:var(--bka-red); }
.bka-highlight-red .bka-badge { background:var(--bka-red); color:#fff; }
.bka-highlight-red { box-shadow:0 10px 26px rgba(97,64,36,.10); }
/* Auch Sonderangebote behalten den einheitlichen 1-px-Rahmen; die Badge-Farbe hebt sie hervor. */

.bka-footnote { position:relative; z-index:1; font-size:.8rem; color:var(--bka-brown); margin:clamp(24px,3vw,40px) 0 0; text-align:center; }
.bka-empty { background:#fff; border:1px solid #ead5b8; border-left:4px solid var(--bka-red,#e30613); border-radius:12px; padding:18px 23px; color:#5e3e24; }

/* ===== Aufbau-Choreografie – nur aktiv, wenn JS die Klasse .bka-anim setzt ===== */
@keyframes bka-sheen { 0%,55% { transform:translateX(-120%); } 100% { transform:translateX(120%); } }
@keyframes bka-rise { from { opacity:0; transform:translate3d(0,90px,0) rotateX(14deg) scale(.9); } to { opacity:1; transform:none; } }
@keyframes bka-pop { 0% { opacity:0; transform:scale(1.5) rotate(-9deg) translateY(30px); } 100% { opacity:1; transform:none; } }
@keyframes bka-stamp { 0% { opacity:0; transform:rotate(-24deg) scale(2.6); } 55% { opacity:1; transform:rotate(-1deg) scale(.9); } 100% { opacity:1; transform:rotate(-4deg) scale(1); } }
@keyframes bka-bar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes bka-badge-in { from { opacity:0; transform:translateX(-110%); } to { opacity:1; transform:none; } }
@keyframes bka-word { from { transform:translateY(112%) rotate(4deg); } to { transform:none; } }
@keyframes bka-fade { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes bka-logo-drop { 0% { opacity:0; transform:translateY(-130%) rotate(-22deg); } 55% { opacity:1; transform:translateY(8%) rotate(7deg); } 78% { transform:rotate(-3deg); } 100% { opacity:1; transform:none; } }
@keyframes bka-board-in { from { opacity:0; } to { opacity:1; } }

.bka-anim .bka-overline, .bka-anim .bka-week, .bka-anim .bka-footnote, .bka-anim .bka-logo { opacity:0; }
.bka-anim .bka-word > span { transform:translateY(112%); }
.bka-anim .bka-tile:not(.bka-in) { opacity:0; }
.bka-anim .bka-tile:not(.bka-in) * { animation:none; }

.bka-anim.bka-in .bka-overline { animation:bka-fade .8s var(--bka-ease) .35s forwards; }
.bka-anim.bka-in .bka-word > span { animation:bka-word 1s var(--bka-ease) calc(.45s + var(--w,0)*90ms) forwards; }
.bka-anim.bka-in .bka-week { animation:bka-fade .8s var(--bka-ease) 1.05s forwards; }
.bka-anim.bka-in .bka-logo { animation:bka-logo-drop 1.35s var(--bka-ease) .8s forwards; }
.bka-anim.bka-in .bka-footnote { animation:bka-fade 1s ease 1.2s forwards; }

.bka-anim .bka-tile.bka-in { animation:bka-rise 1.1s var(--bka-ease) var(--d,0ms) backwards; }
.bka-anim .bka-tile.bka-in .bka-tile-image,
.bka-anim .bka-tile.bka-in .bka-tile-fallback { animation:bka-pop 1.2s var(--bka-spring) calc(var(--d,0ms) + 220ms) backwards; }
.bka-anim .bka-tile.bka-in .bka-price { animation:bka-stamp .7s var(--bka-spring) calc(var(--d,0ms) + 720ms) backwards; }
.bka-anim .bka-tile.bka-in::after { animation:bka-bar 1s var(--bka-ease) calc(var(--d,0ms) + 600ms) backwards; }
.bka-anim .bka-tile.bka-in .bka-badge { animation:bka-badge-in .8s var(--bka-ease) calc(var(--d,0ms) + 600ms) backwards; }

/* Responsive */
@media(max-width:1100px) { .bka-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:850px) { .bka-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) {
  .bka-offers { padding:12px 16px 24px; border-radius:0; }
  .bka-heading { align-items:flex-start; gap:10px; }
  .bka-heading > div { min-width:0; flex:1 1 auto; }
  .bka-heading h2 { font-size:clamp(1.7rem,8.2vw,2.2rem); }
  .bka-overline { font-size:.72rem; }
  .bka-logo { min-width:0; width:76px; max-height:70px; }
  .bka-tiles { grid-template-columns:1fr; gap:30px; }
  .bka-media { aspect-ratio:16/10; }
}
@container (max-width:900px) { .bka-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container (max-width:650px) { .bka-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (max-width:420px) { .bka-tiles { grid-template-columns:1fr; } }
@media(hover:none) { .bka-tile::before { display:none; } }
@media(prefers-reduced-motion:reduce) {
  .bka-offers *, .bka-offers *::before, .bka-offers *::after { animation:none!important; transition:none!important; }
  .bka-anim .bka-tile:not(.bka-in), .bka-anim .bka-overline, .bka-anim .bka-week, .bka-anim .bka-footnote, .bka-anim .bka-logo { opacity:1!important; }
  .bka-anim .bka-word > span { transform:none!important; }
  .bka-dust { display:none; }
}