/* FunnyDivers - Kooperationsvorteile (<sprache>/cooperation.html).

   Eigene Datei statt Ergaenzungen in contact.css: Die Basis (Kopfleiste,
   Schaltflaechen, Formularfelder, Fusszeile) kommt unveraendert aus
   contact.css, das auf 80 Seiten liegt. Ein Eingriff dort haette einen
   ?v=-Bump auf allen diesen Seiten verlangt - siehe snorkeling.css, die aus
   demselben Grund entstanden ist.

   Die Bildsprache stammt aus den Praesentationsfolien der Kooperation:
   Marineblau als Grund, Gelb als einziger Akzent, weisse Karten mit weichem
   Schatten. Beides sind bereits Variablen des Projekts (--navy, --accent),
   hier kommt nur die Anordnung dazu. */

/* --- Kopfbereich --------------------------------------------------------- */

/* Ein Foto hinter dem Kopfbereich statt eines reinen Farbverlaufs: Die Seite
   verkauft ein Tauchziel, und das laesst sich nicht in Farbflaechen erzaehlen.
   Der Verlauf darueber haelt den Text lesbar - ohne ihn kaempft weisse Schrift
   gegen die helle Wasseroberflaeche. */
.coop-hero{position:relative;overflow:hidden;isolation:isolate;}
.coop-hero-media{position:absolute;inset:0;z-index:-2;}
.coop-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.coop-hero-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(2,32,44,.86) 0%,rgba(4,53,68,.72) 45%,rgba(2,32,44,.92) 100%);}
.coop-hero-inner{position:relative;z-index:1;}

/* Aufsteigende Blasen. Rein dekorativ, deshalb aria-hidden im HTML - und am
   Ende dieser Datei fuer "weniger Bewegung" abgeschaltet. */
.coop-bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.coop-bubbles span{position:absolute;bottom:-40px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 62%,rgba(255,255,255,0) 70%);
  border:1px solid rgba(255,255,255,.22);animation:coop-rise linear infinite;}
.coop-bubbles span:nth-child(1){inset-inline-start:8%;width:16px;height:16px;animation-duration:17s;animation-delay:0s;}
.coop-bubbles span:nth-child(2){inset-inline-start:22%;width:9px;height:9px;animation-duration:13s;animation-delay:2.5s;}
.coop-bubbles span:nth-child(3){inset-inline-start:41%;width:22px;height:22px;animation-duration:21s;animation-delay:1.2s;}
.coop-bubbles span:nth-child(4){inset-inline-start:63%;width:12px;height:12px;animation-duration:15s;animation-delay:4s;}
.coop-bubbles span:nth-child(5){inset-inline-start:79%;width:18px;height:18px;animation-duration:19s;animation-delay:6s;}
.coop-bubbles span:nth-child(6){inset-inline-start:92%;width:8px;height:8px;animation-duration:12s;animation-delay:3.4s;}
@keyframes coop-rise{
  0%   { transform:translateY(0) translateX(0); opacity:0; }
  12%  { opacity:.85; }
  100% { transform:translateY(-108vh) translateX(26px); opacity:0; }
}

/* Die Zeile unter der Ueberschrift steht mittig wie alles im Kopfbereich.
   Sie braucht dafuer ein eigenes "auto" auf beiden Seiten - ein Rand von 0
   liesse den Kasten links kleben, obwohl der Text zentriert ist. */
.coop-hero-lead{max-width:620px;margin:16px auto 0 !important;color:#fff !important;
  font-weight:700;font-size:clamp(16px,2vw,19px) !important;}

/* Die Marken unter der Ueberschrift: die Vorteile in einer Zeile, damit vor
   dem ersten Scrollen dasteht, worum es geht. Sie laufen nacheinander ein. */
.coop-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px;}
.coop-chip{animation:coop-chip-in .6s cubic-bezier(.16,.8,.3,1) both;}
.coop-chip:nth-child(1){animation-delay:.05s;}
.coop-chip:nth-child(2){animation-delay:.17s;}
.coop-chip:nth-child(3){animation-delay:.29s;}
.coop-chip:nth-child(4){animation-delay:.41s;}
@keyframes coop-chip-in{ from{opacity:0;transform:translateY(14px) scale(.94);} to{opacity:1;transform:none;} }
.coop-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
  color:#eafffb;font-size:13px;font-weight:700;}
.coop-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;}

/* --- Abschnitte ---------------------------------------------------------- */

.coop-sec{padding:78px 0;background:#fff;}
.coop-sec.alt{background:var(--foam);}
.coop-sec.dark{background:linear-gradient(165deg,#0d3355 0%,#092a46 55%,#061f34 100%);color:#fff;}
.coop-sec h2{font-size:clamp(26px,3.4vw,40px);color:var(--navy);line-height:1.15;}
.coop-sec.dark h2{color:#fff;}
.coop-sec h2 .hl{color:var(--accent);}
.coop-sec.alt h2 .hl,.coop-sec:not(.dark) h2 .hl{color:#0b7d73;}
.coop-sec.dark h2 .hl{color:var(--accent);}
.coop-sec p{font-size:15.5px;line-height:1.7;color:#3a5a63;}
.coop-sec.dark p{color:#c8dcef;}
.coop-sec .eyebrow{color:var(--teal-text,#0b7d73);}
.coop-sec.dark .eyebrow{color:var(--accent);}
.coop-text>p{margin-top:14px;max-width:560px;}
.coop-lead{font-size:17px !important;line-height:1.65 !important;margin-top:16px;max-width:620px;}

/* Zwei Spalten: links der Text, rechts das Bild oder die Grafik. Unter 900px
   untereinander - die Grafik rutscht dabei bewusst nach UNTEN, weil der Text
   die Aussage traegt und das Bild sie nur bebildert. */
.coop-split{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}

/* Das Bild neben dem einleitenden Text. Das Hochformat hat viel leeres Wasser
   ueber und unter den Tauchern; aspect-ratio mit object-fit:cover schneidet
   genau diese Raender weg, ohne dass jemand die Datei anfassen muss. Der
   Bildausschnitt sitzt etwas ueber der Mitte, weil die Taucher dort stehen. */
.coop-intro{align-items:center;}
.coop-intro-figure{margin:0;border-radius:22px;overflow:hidden;
  box-shadow:0 26px 60px rgba(2,40,50,.26);}
.coop-intro-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:center 42%;display:block;
  transition:transform .7s cubic-bezier(.16,.8,.3,1);}
.coop-intro-figure:hover img{transform:scale(1.05);}
@media(max-width:980px){
  /* Untereinander wird das Bild flacher - ein Hochformat ueber die ganze
     Breite draengte den Text vom Bildschirm. */
  .coop-intro-figure img{aspect-ratio:16/10;}
}

/* Die Einladung an zwei Guides. Steht bewusst weit oben und in Gelb
   abgesetzt: Sie ist das Angebot, das vor jeder Zahl kommt. */
.coop-invite{display:flex;gap:18px;align-items:flex-start;margin-top:30px;padding:22px 26px;
  border-radius:18px;background:var(--cream,#fff7e6);border:1.5px solid rgba(255,212,0,.55);
  max-width:760px;}
.coop-invite-icon{flex:none;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:var(--accent);}
.coop-invite-icon svg{width:24px;height:24px;stroke:#1a2a10;fill:none;stroke-width:1.9;}
.coop-invite h2,.coop-invite h3{font-size:19px;color:var(--navy);margin-bottom:8px;}
.coop-invite p{font-size:15px !important;line-height:1.65 !important;color:#4a5a3a !important;}

/* --- Vorteil 1: der Rabattcode ------------------------------------------- */

/* Der Gutschein aus der Folie: dunkelblaues Feld, gestrichelte Trennung,
   Prozentzahl in Gelb. Reines CSS - ein Bild waere in sechs Sprachen sechs
   Dateien, die bei jeder Preisaenderung neu gesetzt werden muessten. */
/* Foto mit aufliegendem Gutschein: Das Ticket allein stand als Grafik im
   Leeren, auf dem Boot bekommt es einen Ort. */
.coop-ticket-stack{position:relative;width:min(100%,430px);}
.coop-shot{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(2,40,50,.26);}
.coop-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.16,.8,.3,1);}
.coop-shot:hover img{transform:scale(1.06);}
.coop-ticket-stack .coop-ticket{width:min(92%,340px);margin:-52px auto 0;position:relative;z-index:2;}
.coop-ticket-stack .coop-ticket::before,
.coop-ticket-stack .coop-ticket::after{display:none;}

.coop-ticket-wrap{display:flex;justify-content:center;}
.coop-ticket{position:relative;display:flex;align-items:stretch;width:min(100%,380px);
  background:var(--navy);border-radius:18px;color:#fff;overflow:hidden;
  box-shadow:0 22px 50px rgba(13,51,85,.28);}
.coop-ticket::before,.coop-ticket::after{content:"";position:absolute;left:calc(38% - 11px);
  width:22px;height:22px;border-radius:50%;background:var(--foam);}
.coop-ticket::before{top:-11px;}
.coop-ticket::after{bottom:-11px;}
.coop-ticket-pct{flex:0 0 38%;display:flex;align-items:center;justify-content:center;
  padding:34px 10px;font-family:'Fredoka',sans-serif;font-size:clamp(30px,4.6vw,44px);
  font-weight:700;color:var(--accent);}
.coop-ticket-label{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:34px 18px;border-inline-start:2px dashed rgba(255,255,255,.35);
  font-size:14px;font-weight:800;letter-spacing:.12em;line-height:1.4;}
/* Ein Gutschein auf hellem Grund braucht die Aussparungen in der Farbe des
   Abschnitts, sonst stehen dort zwei weisse Kreise im Blau. */
.coop-sec:not(.alt) .coop-ticket::before,
.coop-sec:not(.alt) .coop-ticket::after{background:#fff;}

/* --- Vorteil 2: das Guthaben --------------------------------------------- */

.coop-cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;}
.coop-step{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:22px 20px;}
.coop-step{transition:transform .3s cubic-bezier(.16,.8,.3,1),background .3s,border-color .3s;}
.coop-step:hover{transform:translateY(-5px);background:rgba(255,255,255,.12);
  border-color:rgba(255,212,0,.45);}
.coop-step-nr{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--accent);color:#1a2a10;font-family:'Fredoka',sans-serif;
  font-weight:700;font-size:16px;margin-bottom:12px;}
/* Vier Schritte, vier Farben - der Kreislauf soll als Folge erkennbar sein und
   nicht als viermal dasselbe. Die Reihenfolge ist die gepruefte kategoriale
   Palette des Projekts (lib/anfragen.php: bereich_farben). */
.coop-step:nth-child(1) .coop-step-nr{background:#59d9cd;}
.coop-step:nth-child(2) .coop-step-nr{background:#eda100;}
.coop-step:nth-child(3) .coop-step-nr{background:#FFD400;}
.coop-step:nth-child(4) .coop-step-nr{background:#1baf7a;color:#fff;}
.coop-step h3{font-size:16px;color:#fff;margin-bottom:8px;}
.coop-step p{font-size:13.5px;line-height:1.6;color:#c8dcef;}
/* Der Pfeil zum naechsten Schritt. Nur zwischen den Karten, nie hinter der
   letzten - und nur dort, wo die vier tatsaechlich nebeneinander stehen. */
.coop-step:not(:last-child)::after{content:"";position:absolute;top:34px;inset-inline-end:-11px;
  width:8px;height:8px;border-top:2px solid rgba(255,212,0,.75);
  border-inline-end:2px solid rgba(255,212,0,.75);transform:rotate(45deg);}
[dir=rtl] .coop-step:not(:last-child)::after{transform:rotate(225deg);}

  border-radius:14px;background:rgba(255,212,0,.1);border:1px solid rgba(255,212,0,.3);}

/* Die Rechnung aus der Folie. font-variant-numeric haelt die Ziffern gleich
   breit, damit die Zeile beim Uebersetzen nicht springt. */
.coop-formula{margin-top:26px;text-align:center;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,212,0,.45);border-radius:16px;padding:22px 20px;}
.coop-formula b{display:block;font-family:'Fredoka',sans-serif;font-size:clamp(20px,2.8vw,28px);
  color:#fff;font-variant-numeric:tabular-nums;}
.coop-formula span{display:block;margin-top:10px;font-size:13.5px;color:#c8dcef;line-height:1.6;}

.coop-band{margin-top:30px;background:rgba(255,255,255,.94);border-radius:16px;padding:22px 26px;
  text-align:center;}
.coop-band p{color:#3a5a63 !important;font-size:14px !important;line-height:1.65 !important;}
.coop-band p+p{margin-top:8px;}
.coop-band .ziel{color:#9a6b00 !important;font-weight:700;}
.coop-band .nur{color:var(--navy) !important;font-weight:800;font-size:13px !important;
  letter-spacing:.02em;}

/* --- Vorteil 3: der freie Guide ------------------------------------------ */

.coop-badge{display:inline-block;margin-top:20px;padding:12px 22px;border-radius:999px;
  background:var(--accent);color:#1a2a10;font-weight:800;font-size:14px;
  box-shadow:0 12px 26px rgba(255,180,0,.32);}

/* Das runde Foto der Folien. aspect-ratio statt fester Hoehe: Das Bild wird
   nie gestaucht, egal wie breit die Spalte gerade ist. */
.coop-figure{margin:0;}
.coop-figure img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;
  box-shadow:0 26px 60px rgba(2,40,50,.28);}

/* --- Bildstreifen: was die Schueler erwartet ----------------------------- */

/* Die Fotos der Website-Galerie als waagerechtes Karussell. Es zeigt dieselben
   Bilder, die auf der Startseite stehen (lib/galerie.php, im Adminbereich
   gepflegt) - eine zweite Bildauswahl waere eine zweite Stelle zum Pflegen.
   Vier Bilder passen in die Breite, am Handy zwei; der Rest wird gewischt. */
.coop-carousel-wrap{position:relative;margin-top:32px;}
.coop-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  /* Mittig statt oben buendig: Eine Kachel, die kleiner ausfaellt als ihre
     Nachbarn, haengt sonst am oberen Rand. So liegt ihre Bildmitte auf
     derselben Hoehe wie die der grossen. */
  align-items:center;
  /* Luft oben und unten, damit das beim Zeigen vergroesserte Bild nicht am
     Rand des Rollbereichs abgeschnitten wirkt. */
  padding:12px 2px 20px;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:rgba(13,51,85,.35) transparent;}
.coop-carousel::-webkit-scrollbar{height:8px;}
.coop-carousel::-webkit-scrollbar-thumb{background:rgba(13,51,85,.3);border-radius:99px;}
.coop-carousel::-webkit-scrollbar-track{background:transparent;}

/* Zwei Ebenen, und das aus einem handfesten Grund: Das Schwingen ist eine
   Animation, die Vergroesserung beim Zeigen ein Uebergang - beide schreiben
   auf "transform" und koennen nicht am selben Element haengen. Der Platzhalter
   schwingt, die Karte darin waechst. Nebenbei loest das auch das Abschneiden:
   Der Platzhalter hat kein overflow, die gewachsene Karte ragt frei hinaus. */
.coop-cslot{flex:0 0 calc((100% - 48px) / 4);scroll-snap-align:start;
  animation:coop-float 6s ease-in-out infinite;}
/* Versetzt und unterschiedlich lang: Sonst wippen fuenfzehn Karten im
   Gleichschritt, und das sieht nach Maschine aus statt nach Wasser. */
.coop-cslot:nth-child(3n+1){animation-duration:6.4s;animation-delay:-.8s;}
.coop-cslot:nth-child(3n+2){animation-duration:7.6s;animation-delay:-2.6s;}
.coop-cslot:nth-child(3n+3){animation-duration:5.8s;animation-delay:-4.1s;}
@keyframes coop-float{
  0%,100% { transform:translateY(0) rotate(0deg); }
  33%     { transform:translateY(-7px) rotate(-.5deg); }
  66%     { transform:translateY(4px) rotate(.45deg); }
}

.coop-carousel figure{margin:0;position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 16px 40px rgba(2,40,50,.2);cursor:pointer;
  transition:transform .35s cubic-bezier(.16,.8,.3,1),box-shadow .35s ease;}
.coop-carousel img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.16,.8,.3,1);}

/* Beim Zeigen haelt der Platzhalter still, die Karte wird groesser und legt
   sich ueber ihre Nachbarn - ein Bild, das man ansieht, soll nicht
   davonschwingen. */
.coop-cslot:hover,.coop-cslot:focus-within{animation-play-state:paused;
  position:relative;z-index:2;}
.coop-cslot:hover figure,.coop-cslot:focus-within figure{transform:scale(1.06);
  box-shadow:0 26px 56px rgba(2,40,50,.34);}
.coop-cslot:hover img{transform:scale(1.07);}

/* Ziehen mit der Maus. Der zweite Zustand kommt aus cooperation.js, solange
   der Zeiger unten ist. */
.coop-carousel{cursor:grab;}
.coop-carousel.zieht{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;}
.coop-carousel.zieht img{pointer-events:none;}
.coop-carousel.zieht .coop-cslot{animation-play-state:paused;}
.coop-carousel figcaption{position:absolute;inset-inline:0;bottom:0;padding:26px 14px 12px;
  font-size:12.5px;font-weight:700;color:#fff;line-height:1.35;
  background:linear-gradient(180deg,rgba(2,32,44,0) 0%,rgba(2,32,44,.85) 62%);}

/* Der Stand im Band als schmaler Balken. Er ersetzt die Rollleiste, die je
   nach Browser gar nicht zu sehen ist, und sagt mit einem Blick, wie viel noch
   kommt. Die Breite setzt cooperation.js. */
.coop-cprog{position:relative;height:4px;border-radius:99px;
  background:rgba(13,51,85,.12);overflow:hidden;margin:2px auto 0;max-width:280px;}
.coop-cprog span{position:absolute;inset-block:0;inset-inline-start:0;width:25%;
  border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--accent));
  transition:inset-inline-start .25s ease,width .25s ease;}

/* Die beiden Pfeile. Nur dort sichtbar, wo es einen Mauszeiger gibt: Am Handy
   wischt man, und zwei Knoepfe ueber den Bildern waeren nur im Weg. */
.coop-cnav{display:none;}
@media (hover:hover) and (min-width:900px){
  .coop-cnav{display:flex;align-items:center;justify-content:center;position:absolute;
    top:calc(50% - 10px);transform:translateY(-50%);width:44px;height:44px;z-index:3;
    border:none;border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;
    font-size:20px;line-height:1;box-shadow:0 10px 26px rgba(2,40,50,.28);
    transition:background .2s,transform .2s;}
  .coop-cnav:hover{background:var(--accent);transform:translateY(-50%) scale(1.08);}
  .coop-cnav.prev{inset-inline-start:-18px;}
  .coop-cnav.next{inset-inline-end:-18px;}
  .coop-cnav[disabled]{opacity:.35;cursor:default;transform:translateY(-50%);}
}

/* --- Formular ------------------------------------------------------------ */

.coop-form-sec{padding:80px 0 100px;background:var(--foam);}
.coop-form-sec .form-card h2{margin-bottom:8px;}
.coop-form-sec .form-intro{font-size:14.5px;line-height:1.65;color:#5b7a82;margin-bottom:24px;}
/* Zwei Felder nebeneinander, solange Platz ist. Sie gehoeren jeweils zusammen
   (Ort/Land neben Website, Vorwahl neben Nummer). */
.coop-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.coop-side{display:flex;flex-direction:column;gap:18px;}

/* Die Ansprechpartnerin mit Gesicht. Das Bild blendet sich selbst aus, solange
   die Datei fehlt (onerror im HTML) - dann steht der Name allein da, statt ein
   zerbrochenes Bild auf einer Live-Seite. */
.coop-person{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.25);}
.coop-person-foto{flex:none;}
.coop-person-foto img{width:76px;height:76px;border-radius:50%;object-fit:cover;
  border:2.5px solid rgba(255,255,255,.6);box-shadow:0 8px 22px rgba(2,40,50,.3);}
.coop-person-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.coop-person-text b{font-size:16px;color:#fff;}
.coop-person-text span{font-size:13px;color:#eafffb;}
.coop-person-text span.klein{font-size:12px;color:#bfe6e2;}
.coop-needs{background:#fff;border:1px solid #dff2ef;border-radius:var(--r);padding:26px 28px;
  box-shadow:var(--shadow);}
.coop-needs h3{font-size:17px;color:var(--navy);margin-bottom:14px;}
.coop-needs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.coop-needs li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.55;
  color:#3a5a63;}
.coop-needs li svg{flex:none;width:18px;height:18px;margin-top:2px;stroke:var(--teal);fill:none;
  stroke-width:2.4;}

/* --- Schlussband --------------------------------------------------------- */

.coop-cta{background:linear-gradient(160deg,#0eb6a8 0%,#0790a8 45%,#0d3355 100%);
  padding:74px 0;text-align:center;color:#fff;}
.coop-cta h2{font-size:clamp(26px,3.4vw,40px);color:#fff;}
.coop-cta p{margin:16px auto 26px;max-width:560px;font-size:15.5px;line-height:1.65;color:#e6fffb;}
.coop-cta .btn-ghost{border-color:rgba(255,255,255,.7);}
.coop-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* --- Schmalere Fenster --------------------------------------------------- */

@media(max-width:980px){
  .coop-split{grid-template-columns:1fr;gap:34px;}
  .coop-cycle{grid-template-columns:1fr 1fr;}
  /* Zwei Bilder statt vier, sobald es schmal wird. */
  .coop-cslot{flex:0 0 calc((100% - 16px) / 2);}
  /* Bei zwei Spalten steht der Pfeil nur noch zwischen den Paaren richtig -
     in der zweiten Spalte zeigte er aus der Karte heraus ins Leere. */
  .coop-step:nth-child(2n)::after{display:none;}
}
@media(max-width:820px){
  .coop-row{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .coop-sec{padding:58px 0;}
  .coop-cycle{grid-template-columns:1fr;gap:12px;}
  .coop-step::after{display:none !important;}
  .coop-band{padding:20px 18px;}
  .coop-form-sec{padding:58px 0 76px;}
  .coop-ticket-pct{padding:26px 8px;}
  .coop-ticket-label{padding:26px 12px;font-size:13px;}
  /* Der Einladungskasten stapelt: Symbol ueber dem Text statt daneben. */
  .coop-invite{flex-direction:column;gap:12px;padding:20px;}
  .coop-carousel{gap:10px;}
  .coop-cslot{flex:0 0 calc((100% - 10px) / 2);}
  .coop-carousel figcaption{font-size:11.5px;padding:20px 10px 10px;}
  .coop-person{gap:12px;}
  .coop-person-foto img{width:62px;height:62px;}
}

/* --- Weniger Bewegung ---------------------------------------------------- */

/* Wer im System oder ueber den Knopf der Website (assets/js/motion-toggle.js)
   weniger Bewegung verlangt, bekommt dieselbe Seite ohne Blasen, ohne Einlauf
   und ohne Zoom. Abgeschaltet wird die Bewegung, nicht der Inhalt: Alles
   bleibt sichtbar, es bewegt sich nur nichts mehr. */
@media (prefers-reduced-motion: reduce){
  .coop-bubbles{display:none;}
  .coop-chip{animation:none;}
  .coop-shot img,.coop-carousel img,.coop-carousel figure{transition:none;}
  .coop-cslot{animation:none;}
  .coop-shot:hover img,.coop-cslot:hover img{transform:none;}
  .coop-cslot:hover figure,
  .coop-cslot:focus-within figure{transform:none;}
  .coop-carousel{scroll-behavior:auto;}
  .coop-step{transition:none;}
  .coop-step:hover{transform:none;}

}