/* ==========================================================================
   Kritzel-Optik (Standardansicht, Klasse .kritzel am body; ?visual=klar zeigt
   die glatte Fassung ohne diese Datei)

   Alles sieht aus wie mit Bleistift auf Papier gezeichnet: graue Linien,
   wacklige Rahmen (Filter #kritzel aus head.php plus ungleiche Eckradien),
   Handschrift (liegt lokal in assets/fonts, kein Request an Google). Koralle
   bleibt die einzige Farbe. Die Abschnitte wechseln das Papier: kariert,
   liniert, gepunktet, blanko. Lädt über style.css und überschreibt nur, was
   anders aussehen soll.
   ========================================================================== */

@font-face {
  font-family: 'Gloria Hallelujah';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/gloria-hallelujah-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/patrick-hand-latin.woff2') format('woff2');
}

.kritzel, .kritzel .dunkel {
  --ink: #2B2B2B;
  --ink-2: #454545;
  --ink-3: #7A7A7A;
  --coral: #FF6B57;
  --coral-dark: #E8553F;
  --coral-soft: #FFE3DD;
  --paper: #FFFFFF;
  --paper-2: #F4F4F4;
  --card: #FFFFFF;
  --line: #3D3D3D;
  --green: #3D3D3D;
  --green-soft: #ECECEC;
  --star: #F4B400;
  --text: #2B2B2B;
  --muted: #6E6E6E;
  --mark-ink: #3D3D3D;
  --mark-coral: #8A8A8A;
  --shadow: 5px 6px 0 #D2D2D2;
  --radius: 14px;
  --wobbel: 255px 14px 225px 14px / 14px 225px 14px 255px;
  --hatch: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(61, 61, 61, .16) 5px 6.5px);
  /* Papiersorten */
  --karo: linear-gradient(#E6E6E6 1px, transparent 1px), linear-gradient(90deg, #E6E6E6 1px, transparent 1px);
  --karo-grau: linear-gradient(#E0E0E0 1px, transparent 1px), linear-gradient(90deg, #E0E0E0 1px, transparent 1px);
  --punkte: radial-gradient(#CFCFCF 1.3px, transparent 1.6px);
  /* Millimeterpapier: feines Raster, jede fünfte Linie kräftiger */
  --karo-fein: linear-gradient(#DADADA 1px, transparent 1px), linear-gradient(90deg, #DADADA 1px, transparent 1px), linear-gradient(#F0F0F0 1px, transparent 1px), linear-gradient(90deg, #F0F0F0 1px, transparent 1px);
  /* Karo auf leicht warmem Papier */
  --karo-warm: linear-gradient(#E7E1D6 1px, transparent 1px), linear-gradient(90deg, #E7E1D6 1px, transparent 1px);
  color-scheme: light;
}

/* Grundpapier: kariert */
.kritzel {
  background-color: #F8F8F5; background-image: var(--karo); background-size: 28px 28px;
  font-family: 'Patrick Hand', 'Chalkboard SE', 'Comic Sans MS', cursive;
  font-size: 19px; line-height: 1.45;
}
.kritzel .dunkel { background-color: #F0F0EC; background-image: var(--karo-grau); background-size: 28px 28px; color: var(--text); }
.kritzel .hero { background-color: #F8F8F5; background-image: var(--karo); }
/* Papierwechsel je Abschnitt: immer Raster, aber nie dasselbe */
.kritzel .was { background-color: #F8F8F5; background-image: var(--karo-fein); background-size: 35px 35px, 35px 35px, 7px 7px, 7px 7px; }
.kritzel .ablauf { background-color: #F3F3F0; background-image: var(--punkte); background-size: 24px 24px; }
.kritzel .preis { background-color: #F8F8F5; background-image: var(--karo); background-size: 28px 28px; }
.kritzel .express { background-color: #F8F4EC; background-image: var(--karo-warm); background-size: 28px 28px; }
.kritzel .faq { background-color: #F8F8F5; background-image: var(--karo); background-size: 36px 36px; }
.kritzel .pruefung { background-color: #F0F0EC; background-image: var(--karo-grau); }
.kritzel footer { background-color: #ECECE8; background-image: var(--karo-fein); background-size: 35px 35px, 35px 35px, 7px 7px, 7px 7px; }

.kritzel h1, .kritzel h2, .kritzel h3, .kritzel .eyebrow, .kritzel .btn, .kritzel .trust-grid b, .kritzel .note,
.kritzel .staffel-zeile b, .kritzel .steps .num, .kritzel .fazit strong, .kritzel .brand, .kritzel .foot-brand, .kritzel .steps .wann {
  font-family: 'Gloria Hallelujah', 'Chalkboard SE', 'Comic Sans MS', cursive;
  letter-spacing: 0;
  font-weight: 400;
}
.kritzel h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.22; }
.kritzel h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.45; }
.kritzel h3 { font-size: 1.1rem; line-height: 1.3; }
.kritzel em { color: var(--coral-dark); text-decoration: underline wavy #FF6B57 2px; text-underline-offset: 6px; }
.kritzel .eyebrow, .kritzel .dunkel .eyebrow { color: var(--ink-3); text-transform: none; letter-spacing: 0; font-size: .95rem; }
.kritzel .eyebrow::before { content: "→ "; }
.kritzel .sub, .kritzel .lede, .kritzel p { color: var(--ink-2); }

/* Rahmen, die aussehen wie gezeichnet */
.kritzel .was-item, .kritzel .fall, .kritzel .steps li, .kritzel .faq-list details, .kritzel .form-card,
.kritzel .legal-card, .kritzel .trust-grid, .kritzel .profil-kopf, .kritzel .rc, .kritzel .staffel, .kritzel .preis-box, .kritzel .was-rest, .kritzel .express-tafel {
  background: #fff; border: 2.5px solid var(--line); border-radius: var(--wobbel); box-shadow: var(--shadow); filter: url(#kritzel);
}
/* Kein Filter auf der Bewertungskarte und der Preisbox: der Filterbereich würde das Männchen abschneiden */
.kritzel .rc, .kritzel .preis-box { filter: none; }
.kritzel .fall:nth-child(2), .kritzel .steps li:nth-child(2n) { transform: rotate(.6deg); }
.kritzel .fall:nth-child(3), .kritzel .steps li:nth-child(3) { transform: rotate(-.5deg); }

/* Abschnittswechsel: Karten kippen ein, Überschriften werden geschrieben, Pfeile schieben sich rein */
.kritzel .einblenden { opacity: 0; transform: translateY(14px) rotate(-1.2deg) scale(.98); transition: opacity .25s ease, transform .4s cubic-bezier(.3, 1.4, .6, 1); }
.kritzel .einblenden.ist-sichtbar { opacity: 1; transform: none; }
.kritzel .fall.einblenden.ist-sichtbar:nth-child(2), .kritzel .steps li.einblenden.ist-sichtbar:nth-child(2n) { transform: rotate(.6deg); }
.kritzel .fall.einblenden.ist-sichtbar:nth-child(3), .kritzel .steps li.einblenden.ist-sichtbar:nth-child(3) { transform: rotate(-.5deg); }
.kritzel .einblenden:nth-child(2) { transition-delay: .06s; }
.kritzel .einblenden:nth-child(3) { transition-delay: .12s; }
.kritzel .einblenden:nth-child(4) { transition-delay: .18s; }
.kritzel .einblenden:nth-child(5) { transition-delay: .24s; }
.kritzel .einblenden:nth-child(6) { transition-delay: .3s; }
.kritzel h2.einblenden { opacity: 1; transform: none; clip-path: inset(-12% 100% -12% -2%); transition: clip-path .45s ease-out; }
.kritzel h2.einblenden.ist-sichtbar { clip-path: inset(-12% -2% -12% -2%); }
.kritzel .eyebrow.einblenden { transform: translateX(-18px); transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.4, .6, 1); }
.kritzel .was-tags .tag.einblenden { transform: translateY(8px) rotate(-3deg); }
.kritzel .faq-list details.einblenden { transform: translateX(-10px) rotate(-.4deg); }
.kritzel .faq-list details[open] summary { color: var(--coral-dark); }

/* Knöpfe */
.kritzel .btn { border: 2.5px solid var(--line); border-radius: var(--wobbel); box-shadow: 3px 3px 0 var(--line); filter: url(#kritzel); transition: transform .15s; }
.kritzel .btn-primary { background: var(--coral); background-image: var(--hatch); color: #1F1F1F; }
.kritzel .btn-primary:hover { background-color: var(--coral); transform: translate(-1px, -1px) rotate(-.6deg); box-shadow: 4px 4px 0 var(--line); }
.kritzel .btn-ghost { background: #fff; color: var(--ink); }
.kritzel .btn-ghost:hover { border-color: var(--line); background: var(--paper-2); }
.kritzel .nav-links .btn { color: #1F1F1F; box-shadow: 2px 2px 0 var(--line); }

/* Kopf */
.kritzel header { background: rgba(255, 255, 255, .92); border-bottom: 2.5px solid var(--line); }
.kritzel .nav-links a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: transparent; }
.kritzel .nav-links a:hover { color: var(--ink); text-decoration-color: var(--coral); }
.kritzel .brand { font-size: 1.25rem; }
.kritzel .brand b { font-weight: 400; color: var(--coral-dark); }

/* Hero */
.kritzel .hero::before { display: none; }
.kritzel .proof li::before { content: "✔"; color: var(--ink); }
.kritzel .proof a { color: var(--ink); text-decoration-color: var(--coral); text-underline-offset: 4px; }
.kritzel .proof .proof-rang { color: var(--ink-3); font-size: .82rem; margin-left: 0; }
.kritzel .proof .proof-marke { flex-basis: 100%; margin-top: 4px; }
.kritzel .proof .proof-marke::before { content: none; }
.kritzel .profil-kopf { padding: 18px 22px; }
/* Die Profilkarte hängt schief, bis das Männchen landet und sie mit dem Aufprall gerade rückt */
.kritzel .profil .profil-kopf { transform: rotate(-3.5deg) translateY(6px); transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.kritzel .profil.gerade .profil-kopf { transform: none; }
.kritzel .pk-note small, .kritzel .balken div { color: var(--ink-3); font-family: 'Patrick Hand', cursive; font-size: .9rem; }
.kritzel .note { font-size: 2.4rem; }
.kritzel .balken em { background: #fff; border: 2px solid var(--line); height: 11px; border-radius: 6px; }
.kritzel .balken em i { background: var(--ink-3); background-image: var(--hatch); }
.kritzel .balken .b1 em i { background: var(--coral); background-image: var(--hatch); }
.kritzel .rc { color: var(--ink-2); }
.kritzel .rc-avatar { background: #fff; color: var(--ink); border: 2.5px solid var(--line); font-family: 'Gloria Hallelujah', cursive; }
.kritzel .rc + .rc .rc-avatar { background: var(--paper-2); }
.kritzel .rc-head small { font-family: 'Patrick Hand', cursive; }
.kritzel .rc-k { background: var(--ink-3); }
.kritzel .fazit { color: var(--ink); }
.kritzel .fazit small { color: var(--ink-3); }
.kritzel .rc-check { background: #fff; border: 2.5px solid var(--line); box-shadow: 3px 3px 0 #D2D2D2; }
.kritzel .rc-check svg { stroke: var(--ink); }

/* Männchen: Grundlagen der Posen (die Hero-Phasen stehen in style.css) */
.kritzel .greif { transform-box: view-box; transform-origin: 100px 72px; }
.kritzel .stift { transform-box: view-box; transform-origin: 40px 128px; }
.kritzel .stift-hoch { transform-box: view-box; transform-origin: 100px -34px; }
.kritzel .hoch, .kritzel .schwert, .kritzel .schwert-links, .kritzel .balance, .kritzel .lang { opacity: 0; }
.kritzel svg.pose-schwert .schwert, .kritzel svg.pose-schwert .schwert-links, .kritzel svg.pose-balance .balance, .kritzel svg.pose-lang .lang { opacity: 1; }
.kritzel svg.pose-schwert .greif, .kritzel svg.pose-balance .greif, .kritzel svg.pose-lang .greif { opacity: 0; }
.kritzel .schwert { transform-box: view-box; transform-origin: 100px 72px; }
.kritzel .stift-schwert { transform-box: view-box; transform-origin: 170px 40px; }
.kritzel .stift-kopf { transform-box: view-box; transform-origin: 100px 28px; }
.kritzel .mund-gier { display: none; }
.kritzel svg.pose-hoch .hoch { opacity: 1; }
.kritzel svg.pose-hoch .greif { opacity: 0; }

/* Vertrauensleiste */
.kritzel .trust-grid { gap: 0; background: #fff; overflow: visible; }
.kritzel .trust-grid > div { background: transparent; border-right: 2px dashed #BDBDBD; }
.kritzel .trust-grid > div:last-child { border-right: 0; }
.kritzel .trust-grid b { font-size: 1.7rem; }
@media (max-width: 880px) {
  .kritzel .trust-grid > div:nth-child(2) { border-right: 0; }
  .kritzel .trust-grid > div:nth-child(-n+2) { border-bottom: 2px dashed #BDBDBD; }
}

/* Fälle (mit den Stichworten darunter), Ablauf */
.kritzel .was-tags { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.kritzel .was-tags > b { font-family: 'Gloria Hallelujah', cursive; font-weight: 400; color: var(--ink-3); margin-right: 4px; }
.kritzel .was-tags .tag { background: #fff; border: 2px solid var(--line); border-radius: var(--wobbel); padding: 4px 14px; font-size: .95rem; color: var(--ink); box-shadow: 2px 2px 0 #D2D2D2; }
.kritzel .was-tags .tag:nth-child(2n) { transform: rotate(-1.2deg); }
.kritzel .was-tags .tag:nth-child(2n+1) { transform: rotate(1deg); }
.kritzel .was-tags .tag.einblenden.ist-sichtbar:nth-child(2n) { transform: rotate(-1.2deg); }
.kritzel .was-tags .tag.einblenden.ist-sichtbar:nth-child(2n+1) { transform: rotate(1deg); }
.kritzel .was-rest .dot { background: var(--coral); background-image: var(--hatch); border: 2px solid var(--line); width: 12px; height: 12px; }
.kritzel .fall-tag { background: #fff; border: 2px solid var(--line); border-radius: var(--wobbel); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: .9rem; font-family: 'Gloria Hallelujah', cursive; }
.kritzel .steps .num { background: #fff; border: 2.5px solid var(--line); color: var(--ink); border-radius: 50% 45% 55% 48%; }
.kritzel .steps li:last-child .num { background: var(--coral); background-image: var(--hatch); color: #1F1F1F; }
.kritzel .steps .wann { color: var(--ink-3); font-size: .95rem; }

/* Preis */
.kritzel .preis-box { padding: clamp(24px, 4vw, 40px); align-items: start; }
.kritzel .preis-copy { padding-top: 6px; }
.kritzel .staffel { position: relative; box-shadow: 4px 4px 0 #D2D2D2; color: var(--ink); transform: rotate(-.8deg); overflow: visible; }
.kritzel .staffel-kopf { color: var(--ink-3); text-transform: none; letter-spacing: 0; font-size: .95rem; border-bottom: 2px dashed #BDBDBD; }
.kritzel .staffel-zeile { color: var(--ink-2); border-bottom: 1.5px dashed #D2D2D2; padding: 13px 0; }
.kritzel .staffel-zeile b { color: var(--ink); font-size: 1.3rem; position: relative; }
.kritzel .staffel-zeile.erste b { color: var(--coral-dark); font-size: 1.8rem; }
.kritzel .staffel small { font-family: 'Patrick Hand', cursive; }
.kritzel .preis-liste li::before { content: "✔"; color: var(--ink); }

/* Preisstaffel: das Männchen läuft von Zeile zu Zeile die Preisspalte runter, radiert den
   alten Preis weg (unter seinem Körper), der neue steht da, sobald es weiterzieht.
   Ohne JavaScript oder bei „Bewegung reduzieren" stehen gleich die neuen Preise. */
.kritzel .staffel-zeile .alt { display: none; position: absolute; right: 0; top: 0; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.kritzel .staffel.radiert-gleich .staffel-zeile .alt { display: inline; }
.kritzel .staffel.radiert-gleich .staffel-zeile .neu { opacity: 0; }
.kritzel .staffel.radiert-gleich .staffel-zeile .alt { clip-path: inset(-20% 0 -20% 0); }
.kritzel .staffel.radiert-gleich .staffel-zeile.gestrichen .alt { clip-path: inset(-20% 0 -20% 100%); transition: clip-path .6s linear; }
.kritzel .staffel.radiert-gleich .staffel-zeile.gestrichen .neu { opacity: 1; transition: opacity .2s ease .55s; }
.kritzel .staffel-zeile .neu { display: inline-block; }
.kritzel .streicher { position: absolute; left: 0; top: 0; width: 146px; opacity: 0; transform: translateX(70px); z-index: 3; pointer-events: none;
  transition: top .45s cubic-bezier(.3, 1.3, .6, 1), transform .5s ease, opacity .3s ease; }
.kritzel .streicher.da { opacity: 1; transform: none; }
.kritzel .streicher svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
/* Radierpose wie im Hero: der Körper steht am rechten Tabellenrand, der Radierer liegt auf
   der Zahl und wandert beim Reiben über ihre Breite (--weg aus main.js) */
.kritzel .streicher .lang { opacity: 0; }
.kritzel .streicher .greif { opacity: 1; }
.kritzel .streicher .uga, .kritzel .streicher .uga2 { display: none; }
.kritzel .streicher.reibt svg { animation: rub-doodle .13s ease-in-out infinite alternate, reiben .6s linear forwards; transform-origin: 50% 90%; }
@keyframes reiben { from { translate: 0 0; } to { translate: var(--weg, 50px) 0; } }
.kritzel .streicher.reibt .bein { animation: lauf .18s ease-in-out infinite alternate; }
.kritzel .streicher.reibt .bein-r { animation-direction: alternate-reverse; }
.kritzel .streicher.laeuft .bein { animation: lauf .2s ease-in-out infinite alternate; }
.kritzel .streicher.laeuft .bein-r { animation-direction: alternate-reverse; }
/* Abgang: es hüpft jubelnd nach rechts durch den Bildschirmrand (--raus aus main.js = Weg
   bis hinter den rechten Rand), bleibt dabei sichtbar */
.kritzel .streicher.fertig { transition: none; animation: raushuepfen 2.2s linear forwards; }
@keyframes raushuepfen {
  0%   { transform: translateX(0) translateY(0); }
  8%   { transform: translateX(calc(var(--raus, 820px) * .06)) translateY(-36px); }
  16%  { transform: translateX(calc(var(--raus, 820px) * .12)) translateY(0); }
  24%  { transform: translateX(calc(var(--raus, 820px) * .18)) translateY(-36px); }
  32%  { transform: translateX(calc(var(--raus, 820px) * .25)) translateY(0); }
  40%  { transform: translateX(calc(var(--raus, 820px) * .32)) translateY(-36px); }
  48%  { transform: translateX(calc(var(--raus, 820px) * .40)) translateY(0); }
  56%  { transform: translateX(calc(var(--raus, 820px) * .48)) translateY(-36px); }
  64%  { transform: translateX(calc(var(--raus, 820px) * .56)) translateY(0); }
  72%  { transform: translateX(calc(var(--raus, 820px) * .66)) translateY(-36px); }
  80%  { transform: translateX(calc(var(--raus, 820px) * .76)) translateY(0); }
  88%  { transform: translateX(calc(var(--raus, 820px) * .87)) translateY(-36px); }
  100% { transform: translateX(var(--raus, 820px)) translateY(0); }
}
.kritzel .streicher.fertig .hoch, .kritzel .streicher.zurueck .hoch { opacity: 1; }
.kritzel .streicher.fertig .greif, .kritzel .streicher.zurueck .greif, .kritzel .streicher.zurueck .lang { opacity: 0; }
.kritzel .streicher.fertig .bein { animation: zappeln .14s ease-in-out infinite alternate; }
.kritzel .streicher.fertig .bein-r { animation-direction: alternate-reverse; }
/* Rückkehr (ab 880 px): es kommt links wieder herein, rennt noch jubelnd gegen die linke Wand
   der Preiskarte, kippt nach hinten um, setzt sich auf und schaut blinzelnd auf die Karte.
   main.js setzt left/top auf die Wand und --anlauf = Weg vom linken Bildschirmrand bis dorthin. */
.kritzel .streicher.zurueck { transition: none; opacity: 1; transform: translateX(calc(-1 * var(--anlauf, 600px))); }
.kritzel .streicher.zurueck.kommt { animation: anrennen 1.5s linear forwards; }
@keyframes anrennen {
  0%   { transform: translateX(calc(-1 * var(--anlauf, 600px))) translateY(0); }
  12.5%{ transform: translateX(calc(var(--anlauf, 600px) * -.875)) translateY(-7px); }
  25%  { transform: translateX(calc(var(--anlauf, 600px) * -.75)) translateY(0); }
  37.5%{ transform: translateX(calc(var(--anlauf, 600px) * -.625)) translateY(-7px); }
  50%  { transform: translateX(calc(var(--anlauf, 600px) * -.5)) translateY(0); }
  62.5%{ transform: translateX(calc(var(--anlauf, 600px) * -.375)) translateY(-7px); }
  75%  { transform: translateX(calc(var(--anlauf, 600px) * -.25)) translateY(0); }
  87.5%{ transform: translateX(calc(var(--anlauf, 600px) * -.125)) translateY(-7px); }
  100% { transform: translateX(0) translateY(0); }
}
.kritzel .streicher.kommt .bein { animation: lauf .14s ease-in-out infinite alternate; }
.kritzel .streicher.kommt .bein-r { animation-direction: alternate-reverse; }
.kritzel .streicher.zurueck.knall { transform: none; }
.kritzel .streicher.knall svg { animation: anprall .3s ease-out forwards; transform-origin: 100% 100%; }
@keyframes anprall { 0% { transform: scaleX(1); } 40% { transform: scaleX(.78); } 100% { transform: scaleX(1); } }
.kritzel .streicher.knall .pupille { transform: translate(4px, -3px); }
.kritzel .streicher.knall .bein { animation: none; }
.kritzel .streicher.zurueck.kippt { transform: none; }
.kritzel .streicher.kippt svg { animation: umkippen .7s cubic-bezier(.6, 0, 1, 1) forwards; transform-origin: 18% 88%; }
@keyframes umkippen {
  0%   { transform: rotate(0); }
  70%  { transform: rotate(-92deg); }
  85%  { transform: rotate(-84deg); }
  100% { transform: rotate(-90deg); }
}
.kritzel .streicher.kippt .hoch { opacity: 0; }
.kritzel .streicher.kippt .greif { opacity: 1; }
.kritzel .streicher.kippt .bein { animation: none; transform: rotate(-20deg); }
.kritzel .streicher.kippt .pupille { transform: translate(0, 0); }
.kritzel .streicher.zurueck.sitzt { transform: none; }
.kritzel .streicher.sitzt svg { animation: aufsetzen .6s cubic-bezier(.2, .9, .4, 1.1) forwards; transform-origin: 18% 88%; }
@keyframes aufsetzen { from { transform: rotate(-90deg); } to { transform: rotate(4deg) translateY(10%); } }
.kritzel .streicher.sitzt .hoch { opacity: 0; }
.kritzel .streicher.sitzt .greif { opacity: 1; }
.kritzel .streicher.sitzt .bein { animation: none; transform: rotate(-62deg); transition: transform .4s ease .2s; }
.kritzel .streicher.sitzt .bein-r { transform: rotate(-70deg); }
/* Es schaut auf die Karte (Pupillen nach rechts oben) und blinzelt alle 1,8 s */
.kritzel .streicher.sitzt .figur > circle { transform-box: fill-box; transform-origin: center; }
.kritzel .streicher.sitzt .figur > circle:not(.pupille) { animation: blinzeln 1.8s ease-in-out .8s infinite; }
.kritzel .streicher.sitzt .pupille { animation: blinzeln-pupille 1.8s ease-in-out .8s infinite; }
@keyframes blinzeln { 0%, 90%, 100% { transform: scaleY(1); } 94%, 96% { transform: scaleY(.08); } }
@keyframes blinzeln-pupille { 0%, 90%, 100% { transform: translate(5px, -3px) scaleY(1); } 94%, 96% { transform: translate(5px, -3px) scaleY(.08); } }

/* FAQ */
.kritzel .faq-list details { padding: 0 20px; }
.kritzel .faq-list summary::after { color: var(--ink); font-family: 'Gloria Hallelujah', cursive; }

/* Express: der goldene Radierer in der Vitrine. Haube hebt sich, Männchen schleicht heran,
   greift zu, und sein eigener Radierer ist danach golden. */
.kritzel .express { padding-top: clamp(48px, 6vw, 80px); }
.kritzel .express-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.kritzel .express-tafel { padding: 16px 22px; margin: 18px 0 20px; display: grid; gap: 8px; transform: rotate(-.6deg); }
.kritzel .express-tafel div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; border-bottom: 1.5px dashed #D2D2D2; padding-bottom: 6px; }
.kritzel .express-tafel div:last-child { border-bottom: 0; padding-bottom: 0; }
.kritzel .express-tafel b { font-family: 'Gloria Hallelujah', cursive; font-weight: 400; font-size: 1.2rem; white-space: nowrap; }
.kritzel .express-tafel div:first-child b { color: var(--coral-dark); font-size: 1.45rem; }
.kritzel .express-copy .preis-liste { margin-top: 0; }
.kritzel .express-copy .btn { margin-top: 22px; }
.kritzel .vitrine { position: relative; max-width: 520px; margin-inline: auto; padding-left: 70px; }
.kritzel .vitrine-bild { width: 100%; height: auto; overflow: visible; }
.kritzel .haube { transform-box: view-box; transform-origin: 200px 222px; transition: transform 1s cubic-bezier(.3, 1.2, .5, 1) 2.6s; }
.kritzel .vitrine.ist-sichtbar .haube { transform: translateY(-130px) rotate(-8deg); }
.kritzel .funkel, .kritzel .strahlen { transform-box: view-box; transform-origin: 200px 170px; opacity: 0; }
.kritzel .vitrine.ist-sichtbar .funkel { animation: funkeln 1.1s ease-in-out infinite alternate; }
.kritzel .vitrine.ist-sichtbar .strahlen { animation: strahlen 2.2s ease-in-out infinite alternate; }
@keyframes funkeln { from { opacity: .25; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
@keyframes strahlen { from { opacity: .3; } to { opacity: .8; } }
.kritzel .vitrine.ist-sichtbar .gold-stift { animation: verschwinden .01s linear 3.9s forwards; }
@keyframes verschwinden { to { opacity: 0; } }
.kritzel .schleicher { position: absolute; left: 0; bottom: 9%; width: 40%; opacity: 0; transform: translateX(-110%); }
.kritzel .schleicher svg { width: 100%; height: auto; overflow: visible; }
.kritzel .vitrine.ist-sichtbar .schleicher { animation: schleichen 2.2s ease-in-out 1.2s forwards; }
@keyframes schleichen { 0% { opacity: 0; transform: translateX(-110%); } 12% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } }
.kritzel .vitrine.ist-sichtbar .schleicher svg { animation: tippeln .3s ease-in-out 1.2s 7 alternate; }
@keyframes tippeln { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-7px) rotate(3deg); } }
/* Es kommt in der Siegerpose an; beim Griff wird der Radierer an seinem Stift golden */
.kritzel .schleicher .stift-hoch.gold { opacity: 0; }
.kritzel .vitrine.ist-sichtbar .schleicher .stift-hoch.gold { animation: zeigen .01s linear 3.9s forwards; }
.kritzel .vitrine.ist-sichtbar .schleicher .stift-hoch:not(.gold) { animation: verschwinden .01s linear 3.9s forwards; }
.kritzel .vitrine.ist-sichtbar .schleicher .hoch { animation: hochreissen .5s cubic-bezier(.3, 1.4, .6, 1) 3.9s both; transform-box: view-box; transform-origin: 100px 40px; }
@keyframes hochreissen { 0% { transform: none; } 40% { transform: translateY(26px) scale(1, .9); } 100% { transform: none; } }
@keyframes zeigen { to { opacity: 1; } }
/* Beim Anlaufen trippeln, nach dem Griff Freudensprünge, mal der linke, mal der rechte Fuß vorn */
.kritzel .vitrine.ist-sichtbar .schleicher svg { animation: tippeln .3s ease-in-out 1.2s 7 alternate, freuen .5s ease-in-out 4.5s infinite; }
@keyframes freuen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.kritzel .vitrine.ist-sichtbar .schleicher .bein-l { animation: lauf .2s ease-in-out 1.2s 11 alternate, kick-l 1s ease-in-out 4.5s infinite; }
.kritzel .vitrine.ist-sichtbar .schleicher .bein-r { animation: lauf .2s ease-in-out 1.2s 11 alternate-reverse, kick-r 1s ease-in-out 4.5s infinite; }
@keyframes kick-l { 0%, 50%, 100% { transform: none; } 25% { transform: rotate(-35deg); } }
@keyframes kick-r { 0%, 50%, 100% { transform: none; } 75% { transform: rotate(35deg); } }
.kritzel .schleicher .uga, .kritzel .schleicher .uga2 { display: none; }
@media (max-width: 880px) {
  .kritzel .express-grid { grid-template-columns: 1fr; }
  .kritzel .vitrine { order: -1; }
}
@media (max-width: 600px) {
  .kritzel .streicher { width: 104px; }
}

/* Formular: Siegerpose, trippelt wie eine Krabbe hin und her, breites Grinsen */
.kritzel .pruefung-copy { position: relative; }
.kritzel-maskottchen { position: relative; width: 150px; margin: 40px 0 6px 10px; }
.kritzel-maskottchen svg { width: 100%; height: auto; overflow: visible; transform-origin: 50% 95%; animation: krabbeln 2.2s ease-in-out infinite alternate; }
@keyframes krabbeln { 0% { transform: translateX(-30px) rotate(-3deg); } 45% { transform: translateX(70px) rotate(3deg); } 55% { transform: translateX(70px) rotate(3deg); } 100% { transform: translateX(-30px) rotate(-3deg); } }
.kritzel-maskottchen .bein { animation: lauf .14s ease-in-out infinite alternate; }
.kritzel-maskottchen .bein-r { animation-direction: alternate-reverse; }
.kritzel-maskottchen .stift-hoch { animation: wedeln 1.6s ease-in-out infinite alternate; }
@keyframes wedeln { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.kritzel-maskottchen .mund { display: none; }
.kritzel-maskottchen .mund-gier { display: block; }
.kritzel-maskottchen .pupille:first-of-type { transform: scale(1.5); transform-box: fill-box; transform-origin: center; }
.kritzel-maskottchen .uga { display: none; }
.kritzel .field label { font-family: 'Patrick Hand', cursive; font-size: 1.05rem; }
.kritzel .field input, .kritzel .field textarea { background: #fff; border: 2.5px solid var(--line); border-radius: var(--wobbel); padding: 12px 16px; font-size: 1.05rem; }
.kritzel .field input:focus, .kritzel .field textarea:focus { border-color: var(--coral-dark); box-shadow: 3px 3px 0 var(--coral-soft); }
.kritzel .consent input { accent-color: #3D3D3D; }
.kritzel .express-wahl { background: #fff; border: 2px dashed #BDBDBD; border-radius: var(--wobbel); padding: 10px 14px; margin: 6px 0 22px; }
.kritzel .form-status:empty { display: none; }
.kritzel .form-foot { margin-top: 14px; font-size: 1rem; color: var(--ink-2); }
.kritzel .form-foot, .kritzel .form-status { font-family: 'Patrick Hand', cursive; }
.kritzel .form-status.is-ok { color: var(--ink); }

/* Formular: nach dem Absenden reißt es den Zettel ab und rennt rechts raus */
.kritzel .zettel {
  display: none; position: absolute; left: 44px; top: -12px; width: 72px; padding: 10px 6px; background: #fff; border: 2px solid var(--line);
  border-radius: var(--wobbel); font-family: 'Patrick Hand', cursive; font-size: .85rem; line-height: 1.1; text-align: center; transform: rotate(-9deg); color: var(--ink);
}
.kritzel.abgeschickt .kritzel-maskottchen { animation: wegrennen 1.5s cubic-bezier(.5, 0, 1, 1) .3s forwards; }
.kritzel.abgeschickt .kritzel-maskottchen svg { animation: none; }
.kritzel.abgeschickt .kritzel-maskottchen .zettel { display: block; }
.kritzel.abgeschickt .kritzel-maskottchen .stift-hoch { opacity: 0; animation: none; }
.kritzel.abgeschickt .kritzel-maskottchen .bein { animation: lauf .16s ease-in-out infinite alternate; }
.kritzel.abgeschickt .kritzel-maskottchen .bein-r { animation-direction: alternate-reverse; }
@keyframes wegrennen { to { transform: translateX(115vw); } }

/* Fuß, Schwebendes */
.kritzel footer { position: relative; border-top: 2.5px solid var(--line); overflow: hidden; }
.kritzel .foot-legal { border-top: 2px dashed #BDBDBD; }
.kritzel .foot-legal a { color: var(--ink); text-decoration-color: var(--coral); }
.kritzel .foot-punkt { color: var(--ink-3); margin: 0 2px; }
.kritzel .sticky-cta { background: rgba(255, 255, 255, .95); border-top: 2.5px solid var(--line); }
.kritzel .wa { background: #fff; border: 2.5px solid var(--line); box-shadow: 3px 3px 0 #D2D2D2; }
.kritzel .wa svg { fill: #3D3D3D; }

/* Fußzeile: Feierabend. Es fegt die Radiergummi-Krümel über den Boden nach links, wo der
   Boden an einer Kante endet; jeder Krümel rührt sich erst, wenn der Besen ihn erreicht,
   und kippt an der Kante in den Abgrund. Dann geht es zurück, neue Krümel liegen da. */
.kritzel .feger { position: absolute; right: 2%; bottom: 0; width: 340px; height: 150px; pointer-events: none; }
.kritzel .feger .boden { position: absolute; left: 52px; right: 0; bottom: 66px; height: 0; border-top: 2.5px solid var(--line); }
.kritzel .feger .boden::before { content: ""; position: absolute; left: -2px; top: -2px; width: 2.5px; height: 60px; background: var(--line); border-radius: 2px; }
.kritzel .feger svg { position: absolute; left: 120px; bottom: 54px; width: 150px; height: auto; overflow: visible; z-index: 1; animation: kehrgang 7s linear infinite; }
@keyframes kehrgang { 0% { transform: translateX(0); } 55%, 66% { transform: translateX(-86px); } 92%, 100% { transform: translateX(0); } }
.kritzel .feger .greif { animation: schwingen .4s ease-in-out infinite alternate; }
@keyframes schwingen { from { transform: rotate(-13deg); } to { transform: rotate(9deg); } }
.kritzel .feger .bein { animation: lauf .3s ease-in-out infinite alternate; }
.kritzel .feger .bein-r { animation-direction: alternate-reverse; }
.kritzel .feger .uga, .kritzel .feger .uga2 { display: none; }
.kritzel .feger .k { position: absolute; bottom: 68px; width: 10px; height: 4px; border-radius: 2px; background: #6E6E6E; z-index: 2; animation: kw1 7s linear infinite; }
.kritzel .feger .k1 { left: 64px; animation-name: kw1; }
@keyframes kw1 {
  0%, 43.5% { transform: translate(0, 0); opacity: 1; }
  55% { transform: translate(-16px, 0); opacity: 1; animation-timing-function: ease-in; }
  57% { transform: translate(-26px, 0); opacity: 1; }
  66% { transform: translate(-38px, 64px) rotate(-120deg); opacity: 0; }
  67%, 99% { transform: translate(0, 0); opacity: 0; }
  100% { opacity: 1; }
}
.kritzel .feger .k2 { left: 80px; animation-name: kw2; }
@keyframes kw2 {
  0%, 33.3% { transform: translate(0, 0); opacity: 1; }
  55% { transform: translate(-32px, 0); opacity: 1; animation-timing-function: ease-in; }
  57% { transform: translate(-42px, 0); opacity: 1; }
  66% { transform: translate(-54px, 64px) rotate(-120deg); opacity: 0; }
  67%, 99% { transform: translate(0, 0); opacity: 0; }
  100% { opacity: 1; }
}
.kritzel .feger .k3 { left: 94px; animation-name: kw3; }
@keyframes kw3 {
  0%, 24.3% { transform: translate(0, 0); opacity: 1; }
  55% { transform: translate(-46px, 0); opacity: 1; animation-timing-function: ease-in; }
  57% { transform: translate(-56px, 0); opacity: 1; }
  66% { transform: translate(-68px, 64px) rotate(-120deg); opacity: 0; }
  67%, 99% { transform: translate(0, 0); opacity: 0; }
  100% { opacity: 1; }
}
.kritzel .feger .k4 { left: 108px; animation-name: kw4; }
@keyframes kw4 {
  0%, 15.3% { transform: translate(0, 0); opacity: 1; }
  55% { transform: translate(-60px, 0); opacity: 1; animation-timing-function: ease-in; }
  57% { transform: translate(-70px, 0); opacity: 1; }
  66% { transform: translate(-82px, 64px) rotate(-120deg); opacity: 0; }
  67%, 99% { transform: translate(0, 0); opacity: 0; }
  100% { opacity: 1; }
}
.kritzel .feger .k5 { left: 122px; animation-name: kw5; }
@keyframes kw5 {
  0%, 6.4% { transform: translate(0, 0); opacity: 1; }
  55% { transform: translate(-74px, 0); opacity: 1; animation-timing-function: ease-in; }
  57% { transform: translate(-84px, 0); opacity: 1; }
  66% { transform: translate(-96px, 64px) rotate(-120deg); opacity: 0; }
  67%, 99% { transform: translate(0, 0); opacity: 0; }
  100% { opacity: 1; }
}
.kritzel .feger .k6 { left: 134px; animation-name: kw6; }
@keyframes kw6 {
  0%, 0.0% { transform: translate(0, 0); opacity: 1; }
  55% { transform: translate(-86px, 0); opacity: 1; animation-timing-function: ease-in; }
  57% { transform: translate(-96px, 0); opacity: 1; }
  66% { transform: translate(-108px, 64px) rotate(-120deg); opacity: 0; }
  67%, 99% { transform: translate(0, 0); opacity: 0; }
  100% { opacity: 1; }
}
@media (min-width: 761px) { .kritzel .foot-legal { padding-right: 360px; margin-top: 44px; min-height: 96px; } }
@media (max-width: 760px) { .kritzel .feger { display: none; } }

/* Danke- und 404-Seite */
.kritzel .danke-card { position: relative; }
.kritzel .kritzel-maskottchen.jubel, .kritzel .kritzel-maskottchen.ups { width: 150px; margin: 0 auto 8px; }
.kritzel .kritzel-maskottchen.jubel .uga, .kritzel .kritzel-maskottchen.ups .uga { display: block; opacity: 1; }
.kritzel .kritzel-maskottchen.jubel svg { animation: huepfen .55s ease-in-out infinite alternate; }
@keyframes huepfen { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-14px) rotate(4deg); } }
.kritzel .kritzel-maskottchen.jubel .bein { animation: zappeln .18s ease-in-out infinite alternate; }
.kritzel .kritzel-maskottchen.jubel .bein-r { animation-direction: alternate-reverse; }
.kritzel .kritzel-maskottchen.ups svg { animation: none; }
.kritzel .kritzel-maskottchen.ups .greif { transform: rotate(250deg); }
.kritzel .kritzel-maskottchen.ups .stift { transform: rotate(-120deg); }
.kritzel .kritzel-maskottchen.ups .bein-r, .kritzel .kritzel-maskottchen.ups .pupille, .kritzel .kritzel-maskottchen.ups .stift-hoch { animation: none; }
.kritzel .rc-done { display: none; }

@media (prefers-reduced-motion: reduce) {
  .kritzel-maskottchen svg, .kritzel-maskottchen .stift-hoch, .kritzel-maskottchen .bein, .kritzel-maskottchen .pupille, .kritzel .schleicher, .kritzel .schleicher svg,
  .kritzel-maskottchen .stift-hoch, .kritzel-maskottchen .bein, .kritzel .feger svg, .kritzel .feger .greif, .kritzel .feger .bein, .kritzel .feger .k, .kritzel .funkel, .kritzel .strahlen, .kritzel .streicher svg { animation: none !important; }
  .kritzel h2.einblenden { clip-path: none; }
}

/* Zugeklappte Hero-Karte: auch der gezeichnete Rahmen verschwindet */
.kritzel .rc.weg { border-width: 0; }

/* --- Gastro-Seite: Küche statt Büro ---------------------------------------- */
/* „Gericht des Tages"-Schild an der ersten Bewertung, verschwindet mit der Karte */
.kritzel.gastro .rc { position: relative; }
.kritzel.gastro .rc-tag { position: absolute; top: -13px; right: 14px; transform: rotate(2.5deg); background: #fff; border: 2px solid var(--line);
  border-radius: var(--wobbel); box-shadow: 2px 2px 0 #D2D2D2; padding: 1px 10px; font-family: 'Gloria Hallelujah', cursive; font-size: .78rem; color: var(--ink); z-index: 2; }
/* Brotkrümel statt Radiergummi-Fetzen, auch in der Fußzeile */
.kritzel.gastro .fetzen path { fill: #A8793F; }
.kritzel.gastro .feger .k { background: #A8793F; border-radius: 50%; width: 7px; height: 6px; }
/* Fälle als Kassenbons */
.kritzel.gastro .faelle-grid { counter-reset: bon; }
.kritzel.gastro .fall { counter-increment: bon; padding-top: 16px; }
.kritzel.gastro .fall::before { content: '* * *  Kassenbon Nr. ' counter(bon) '  * * *'; display: block; font-family: 'Patrick Hand', cursive; font-size: .9rem; letter-spacing: .08em;
  color: var(--ink-3); text-align: center; border-bottom: 2px dashed #BDBDBD; padding-bottom: 8px; margin-bottom: 6px; }
.kritzel.gastro .fall-tag::before { content: 'Posten: '; font-family: 'Patrick Hand', cursive; color: var(--ink-3); }
.kritzel.gastro .fall::after { content: 'Summe: 1 Stern zu viel'; display: block; font-family: 'Patrick Hand', cursive; font-size: .95rem; color: var(--ink-2);
  border-top: 2px dashed #BDBDBD; padding-top: 8px; margin-top: 10px; }
/* Preisliste als Tageskarte */
.kritzel.gastro .staffel::before { content: 'Tageskarte'; position: absolute; top: -17px; left: 16px; transform: rotate(-3deg); background: #fff; border: 2px solid var(--line);
  border-radius: var(--wobbel); box-shadow: 2px 2px 0 #D2D2D2; padding: 1px 12px; font-family: 'Gloria Hallelujah', cursive; font-size: .95rem; color: var(--ink); z-index: 2; }