/* ============================================================================
   COOKIE-HINWEIS — übernommen von therapie.home4motion.com
   (erwachsene.home4motion: assets/css/site.css + lib/keks.php), Oktober 2026.
   Die Farben der Therapie-Seite stehen hier als eigene Variablen am Hinweis,
   damit der Banner auf allen home4motion-Seiten gleich aussieht und die
   Palette des Hubs nicht berührt.

   „Alle akzeptieren" ist die auffällige Hauptschaltfläche, „Nur das
   Notwendige" steht gleich daneben und ist mit einem Klick erreichbar. Genau
   das verlangt die DSGVO: Ablehnen darf nicht schwerer sein als Zustimmen.
   ============================================================================ */

.cookie-hinweis{
  --gold-main:#EBC35F;--gold-dark:#C49A28;--green-deepest:#2A3A1A;
  --cream-border:#EDE7DC;--text-mid:#555;--text-muted:#888;--white:#FFF;
  --cat-main:#5C8A3C;--cat-dark:#3A5A22;--cat-light:#EAF3DE;--cat-mid:#C8E0B0;
  font-family:'Source Sans 3',system-ui,sans-serif;
}
.cookie-hinweis[hidden]{display:none}
.cookie-hinweis{
  position:fixed;bottom:20px;left:20px;right:20px;max-width:520px;
  background:var(--white);
  border:1px solid var(--cream-border);
  border-radius:22px;
  box-shadow:0 22px 60px rgba(42,58,26,.26), 0 2px 8px rgba(42,58,26,.08);
  z-index:200;
  overflow:visible;
  animation:chAuf .42s cubic-bezier(.2,.9,.3,1.1)
}
@keyframes chAuf{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.cookie-hinweis.zu{display:none}
.cookie-hinweis.ch-weg{opacity:0;transform:translateY(16px);transition:all .26s ease}

/* Das Tier sitzt auf der oberen Kante */
.ch-tier{position:absolute;top:0;right:0;width:100%;height:0}
.ch-tier .pet{position:absolute}

/* Innenabstand und Überschrift des Hinweises. Standen im Bereich, der beim
   Umbau der Keks-Bewegung versehentlich mitentfernt wurde; die Fassungen in der
   @media-Regel weiter unten blieben stehen, weshalb eine Suche nach dem
   Klassennamen fündig wurde und den Verlust verdeckt hat. */
.ch-innen{padding:24px 26px 20px}

.ch-titel{
  font-family:'Playfair Display',serif;font-size:22px;line-height:1.2;
  margin:0 0 10px;color:var(--green-deepest);padding-right:70px
}

.ch-text{margin:0 0 16px;color:var(--text-mid);line-height:1.6;font-size:14px}

/* ---- Auswahl im Detail ---- */
.ch-wahl{margin:0 0 16px}
.ch-wahl > summary{
  cursor:pointer;font-size:13px;font-weight:700;color:var(--cat-dark);
  list-style:none;padding:7px 0;display:inline-flex;align-items:center;gap:6px
}
.ch-wahl > summary::-webkit-details-marker{display:none}
.ch-wahl > summary::before{content:'▸';font-size:11px;transition:transform .2s}
.ch-wahl[open] > summary::before{transform:rotate(90deg)}
.ch-wahl > summary:hover{color:var(--green-deepest)}

.ch-zeile{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 13px;margin-bottom:7px;
  background:var(--cat-light);border:1px solid var(--cream-border);border-radius:12px;
  cursor:pointer;transition:border-color .16s
}
.ch-zeile:hover{border-color:var(--cat-mid)}
.ch-zeile input{width:18px;height:18px;margin-top:1px;accent-color:var(--cat-main);flex-shrink:0;cursor:pointer}
.ch-zeile input:disabled{cursor:default;opacity:.6}
.ch-zeile b{display:block;font-size:13.5px;color:var(--green-deepest)}
.ch-zeile b em{
  font-style:normal;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--cat-dark);background:var(--white);border:1px solid var(--cat-mid);
  border-radius:20px;padding:2px 7px;margin-left:7px;vertical-align:1px
}
.ch-zeile small{display:block;font-size:12px;color:var(--text-muted);line-height:1.5;margin-top:3px}

/* ---- Schaltflächen ---- */
.ch-knoepfe{display:flex;gap:9px;flex-wrap:wrap}
.ch-btn{
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;
  padding:12px 20px;border-radius:12px;cursor:pointer;border:1.5px solid transparent;
  transition:all .18s
}
/* Die Hauptschaltfläche: gold, mit Gewicht */
.ch-btn-ja{
  flex:1 1 auto;background:var(--gold-main);color:var(--green-deepest);
  border-color:var(--gold-main);box-shadow:0 5px 16px rgba(235,195,95,.4)
}
.ch-btn-ja:hover{background:var(--gold-dark);border-color:var(--gold-dark);transform:translateY(-1px)}
/* Ablehnen: ruhig, aber klar sichtbar und gleich daneben */
.ch-btn-nein{background:var(--white);color:var(--text-mid);border-color:var(--cream-border)}
.ch-btn-nein:hover{border-color:var(--text-muted);color:var(--green-deepest)}
.ch-speichern{display:none}
.ch-wahl[open] ~ .ch-knoepfe .ch-speichern{display:inline-flex}

.ch-fuss{margin:14px 0 0;font-size:12px;color:var(--text-muted);display:flex;gap:8px;flex-wrap:wrap}
.ch-fuss a{color:var(--text-muted);text-decoration:underline}
.ch-fuss a:hover{color:var(--cat-dark)}

/* ── Die Katze frisst einen Keks ─────────────────────────────────────────────
   Tier, Keks und Krümel stecken in einem SVG (lib/keks.php), deshalb genügen
   hier Bewegungen in dessen eigenem Koordinatensystem — nichts muss von außen
   ausgerichtet werden.

   Ablauf, ein Durchgang von rund 8 Sekunden:
     0,4 – 1,3 s   Pfote hebt den Keks zum Maul
     1,4 – 6,8 s   drei Bisse: Maul auf, Keks kleiner, Augen kurz zu
     ab 1,9 s      Krümel fallen, jeweils direkt nach einem Biss
     ab 7,0 s      Keks ist weg, Maul zu, alles ruht

   Eine Schleife wäre neben einem Text, den man lesen soll, störend.

   Nur transform und opacity: beides rechnet der Browser auf der Grafikkarte,
   ein Wechsel von cy oder r würde das SVG bei jedem Bild neu vermessen.
   Bei SVG muss transform-origin ausdrücklich gesetzt werden — der Standard ist
   die linke obere Ecke der ganzen Zeichenfläche, nicht die Mitte des Elements. */

/* Der Keks wandert von der Pfote hoch ans Maul */
.kk-keks{
  transform-origin:28px 47.5px;
  animation:kk-anheben 1.1s .4s cubic-bezier(.3,.7,.4,1) both;
}
@keyframes kk-anheben{
  from{opacity:0; transform:translate(6px,7px) rotate(-18deg) scale(.85)}
  60% {opacity:1}
  to  {opacity:1; transform:translate(0,0) rotate(0) scale(1)}
}

/* Abgebissen wird von oben: Drehpunkt am unteren Rand des Kekses, damit das
   Kleinerwerden von der Maulseite her hereinfrisst. */
.kk-keks-koerper{
  /* Drehpunkt am OBEREN Rand des Kekses, dort wo das Maul ist. Beim
     Kleinerwerden bleibt diese Kante am Maul stehen und der Keks zieht sich
     nach unten weg — das liest sich als Abbeissen. Mit dem Drehpunkt unten
     rutschte er stattdessen vom Maul fort und wurde nur kleiner. */
  transform-origin:28px 41.7px;
  animation:kk-bisse 5.4s 1.4s ease-in-out both;
}
@keyframes kk-bisse{
  0%,7%    {transform:scale(1)}
  11%      {transform:scale(.9) translateY(-.8px)}      /* erster Biss */
  15%,40%  {transform:scale(.76)}
  44%      {transform:scale(.66) translateY(-.8px)}     /* zweiter Biss */
  48%,73%  {transform:scale(.5)}
  77%      {transform:scale(.4) translateY(-.8px)}      /* dritter Biss */
  81%,96%  {transform:scale(.26); opacity:1}
  100%     {transform:scale(.05); opacity:0}          /* aufgegessen */
}

/* Das Maul: die dunkle Öffnung klappt nach unten auf. Drehpunkt oben, sonst
   ginge sie in der Mitte auseinander. */
.kk-maul-offen{
  transform-origin:28px 35px;
  transform:scaleY(0);
  animation:kk-maul-auf 5.4s 1.4s ease-in-out both;
}
@keyframes kk-maul-auf{
  0%,6%          {transform:scaleY(0)}
  9%,13%         {transform:scaleY(1)}       /* erster Biss */
  17%,41%        {transform:scaleY(.12)}     /* kauen, Maul fast zu */
  42%,46%        {transform:scaleY(1)}       /* zweiter Biss */
  50%,74%        {transform:scaleY(.12)}
  75%,79%        {transform:scaleY(1)}       /* dritter Biss */
  83%,100%       {transform:scaleY(0)}
}

/* Die geschlossenen Maulschwünge verschwinden, solange das Maul offen ist —
   sonst lägen beide Zustände übereinander. */
.kk-maul-zu{
  animation:kk-maul-zu 5.4s 1.4s ease-in-out both;
}
@keyframes kk-maul-zu{
  0%,6%    {opacity:1}
  9%,17%   {opacity:0}
  20%,41%  {opacity:.6}
  42%,50%  {opacity:0}
  53%,74%  {opacity:.6}
  75%,83%  {opacity:0}
  87%,100% {opacity:1}
}

/* Die Augen gehen beim Zubeissen kurz zu. Die Lider sind Striche in Fellfarbe
   und fahren von oben herab. */
.kk-lider{
  transform-origin:28px 26px;
  transform:scaleY(0);
  animation:kk-blinzeln 5.4s 1.4s ease-in-out both;
}
@keyframes kk-blinzeln{
  0%,7%    {transform:scaleY(0)}
  10%,14%  {transform:scaleY(1)}
  18%,42%  {transform:scaleY(0)}
  44%,47%  {transform:scaleY(1)}
  51%,75%  {transform:scaleY(0)}
  77%,80%  {transform:scaleY(1)}
  84%,100% {transform:scaleY(0)}
}

/* Die haltende Pfote wippt mit jedem Biss ein wenig nach */
.kk-pfote{
  transform-origin:35px 47px;
  animation:kk-pfote 5.4s 1.4s ease-in-out both;
}
@keyframes kk-pfote{
  0%,7%          {transform:translate(0,0)}
  11%,44%,77%    {transform:translate(-1px,-1.5px)}
  16%,49%,82%    {transform:translate(0,0)}
  100%           {transform:translate(0,0)}
}

/* Die ganze Katze wippt beim Kauen — klein gehalten, sonst wirkt es zappelig */
.kk{
  transform-origin:50% 88%;
  animation:kk-kauen 5.4s 1.4s ease-in-out both;
}
@keyframes kk-kauen{
  0%,7%                      {transform:translateY(0) rotate(0)}
  12%,20%,45%,53%,78%,86%    {transform:translateY(.6px) rotate(-1.6deg)}
  16%,49%,82%                {transform:translateY(0) rotate(1.2deg)}
  92%,100%                   {transform:translateY(0) rotate(0)}
}

/* Krümel. Neun Stück, jeder mit eigener Bahn — sie fallen versetzt und
   unterschiedlich weit, sonst sähe es nach einem Rieseln aus einem Punkt aus.
   Drei Wellen, jeweils direkt nach einem Biss. */
.kk-kruemel circle{
  opacity:0;
  /* Ohne diese zwei Zeilen dreht rotate() jeden Krümel um den Ursprung der
     Zeichenfläche (0,0) und schleudert ihn quer aus dem Bild. Bei SVG ist der
     Standard für transform-origin nicht die Mitte des Elements. fill-box macht
     die eigene Fläche des Kreises zum Bezug, center dessen Mitte. */
  transform-box:fill-box;
  transform-origin:center;
  animation-duration:1.6s;
  animation-timing-function:cubic-bezier(.3,.05,.7,1);  /* fällt beschleunigt */
  animation-fill-mode:both;
}
.kk-kruemel .kr1{animation-name:kk-fall-links;  animation-delay:1.9s}
.kk-kruemel .kr2{animation-name:kk-fall-rechts; animation-delay:2.0s}
.kk-kruemel .kr3{animation-name:kk-fall-mitte;  animation-delay:2.15s}
.kk-kruemel .kr4{animation-name:kk-fall-links;  animation-delay:4.2s}
.kk-kruemel .kr5{animation-name:kk-fall-rechts; animation-delay:4.3s}
.kk-kruemel .kr6{animation-name:kk-fall-mitte;  animation-delay:4.45s}
.kk-kruemel .kr7{animation-name:kk-fall-rechts; animation-delay:5.9s}
.kk-kruemel .kr8{animation-name:kk-fall-links;  animation-delay:6.0s}
.kk-kruemel .kr9{animation-name:kk-fall-mitte;  animation-delay:6.15s}

@keyframes kk-fall-links{
  0%  {opacity:0; transform:translate(0,0) rotate(0) scale(.6)}
  10% {opacity:1; transform:translate(-1px,2px) rotate(30deg) scale(1)}
  100%{opacity:0; transform:translate(-9px,28px) rotate(220deg) scale(1)}
}
@keyframes kk-fall-rechts{
  0%  {opacity:0; transform:translate(0,0) rotate(0) scale(.6)}
  10% {opacity:1; transform:translate(1px,2px) rotate(-25deg) scale(1)}
  100%{opacity:0; transform:translate(10px,26px) rotate(-240deg) scale(1)}
}
@keyframes kk-fall-mitte{
  0%  {opacity:0; transform:translate(0,0) rotate(0) scale(.6)}
  10% {opacity:1; transform:translate(0,3px) rotate(15deg) scale(1)}
  100%{opacity:0; transform:translate(2px,30px) rotate(180deg) scale(1)}
}

@media(max-width:560px){
  .cookie-hinweis{bottom:0;left:0;right:0;max-width:none;
    border-radius:22px 22px 0 0}
  .ch-innen{padding:22px 18px 18px}
  .ch-titel{font-size:19px;padding-right:56px}
  .ch-tier .pet{width:60px!important;top:-36px!important;right:16px!important}
  /* Die fressende Katze ist wegen der fallenden Krümel höher als die anderen
     Tiere (viewBox 60x74 statt 60x54) — deshalb eine eigene Zeile, sonst
     schrumpft die Regel oben sie auf 60px und die Krümel werden winzig. */
  .ch-tier .kk{width:66px!important;top:-40px!important;right:14px!important}
  .ch-btn{flex:1 1 100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .cookie-hinweis{animation:none}

  /* Wer Bewegung abbestellt hat, sieht die Katze mit einem ganzen Keks in der
     Pfote — geschlossenes Maul, offene Augen, keine Krümel. Ein stimmiges Bild,
     kein halber Zustand. Der Hinweis bleibt vollständig bedienbar. */
  .kk,
  .kk-keks,
  .kk-keks-koerper,
  .kk-pfote,
  .kk-maul-zu{animation:none; opacity:1; transform:none}
  .kk-maul-offen{animation:none; transform:scaleY(0)}   /* Maul zu */
  .kk-lider{animation:none; transform:scaleY(0)}        /* Augen offen */
  .kk-kruemel{display:none}
  .ch-tier .pet{animation:none}
@media(max-width:640px){
  /* Der Kater darf über den Rand hinausragen — gerollt wird der innere Kasten */
  .cookie-hinweis{overflow:visible; max-height:none}
  .ch-innen{max-height:78vh; overflow-y:auto; -webkit-overflow-scrolling:touch}
}