/* =========================================================================
   Farbwelt "bunt" – Standard-Darstellung der Seite
   Alles ist unter html.bunt gekapselt. Entfernt der Besucher die Klasse "bunt"
   über den Schalter "Farbwelt", erscheint die ruhige Optik (style.css).
   ========================================================================= */

html.bunt{
  --sand:#FFFBF2;
  --sand-deep:#FFF0C2;
  --ink:#1F2A44;
  --ink-soft:#4A5470;
  --line:#F1DDA8;
  --forest:#25408F;        /* Marken-Marine (Logo) */
  --forest-deep:#1B2F6B;
  --water:#3FA7E1;
  --water-deep:#1B6FA8;
  --herb:#FFC53D;
  --herb-deep:#9A6A00;
  --fruit:#FF7A45;
  --fruit-deep:#C8481C;
  --green:#54B948;
  --green-deep:#2E7D32;
  --pink:#E94E8B;
  --pink-deep:#B8266A;
  --purple:#7B4BC4;
  --purple-deep:#5A33A0;
}

/* ---------- Kopfzeile: Regenbogen-Streifen ---------- */
html.bunt header{background:rgba(255,255,255,.97); border-bottom:none; box-shadow:0 4px 18px rgba(31,42,68,.10);}
html.bunt header::before{
  content:""; display:block; height:6px;
  background:linear-gradient(90deg,var(--pink),var(--fruit),var(--herb),var(--green),var(--water),var(--purple));
}
html.bunt header nav > a:hover, html.bunt header nav > a.active,
html.bunt header nav .nav-item > a:hover, html.bunt header nav .nav-item > a.active{color:var(--ink); box-shadow:inset 0 -3px 0 var(--herb);}
html.bunt .cta-btn{background:var(--herb); color:var(--ink); font-weight:700; box-shadow:0 4px 0 #D9A100;}
html.bunt .cta-btn:hover{background:#FFB300;}
html.bunt .cta-ghost{border:2px solid var(--forest); color:var(--forest); background:#fff; font-weight:600;}
html.bunt .cta-ghost:hover{background:#EEF2FF;}
html.bunt .eyebrow{color:var(--pink-deep); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase;}

/* ---------- Startseite: Hero ---------- */
html.bunt .hero{
  position:relative; overflow:hidden; padding-bottom:120px;
  background:linear-gradient(180deg,#BFE3F8 0%,#E3F3FC 45%,#FFF0C2 100%);
}
html.bunt .hero .wrap{position:relative; z-index:2;}
/* Regenbogen-Bogen hinter dem Foto */
html.bunt .hero::before{
  content:""; position:absolute; z-index:1; right:-70px; top:34px; width:780px; height:390px;
  background:radial-gradient(circle 390px at 50% 100%, transparent 0 262px,
    var(--pink) 262px 280px, var(--fruit) 280px 298px, var(--herb) 298px 316px,
    var(--green) 316px 334px, var(--water) 334px 352px, var(--purple) 352px 370px, transparent 370px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 96%);
}
/* Welle unten */
html.bunt .hero::after{
  content:""; position:absolute; z-index:2; left:0; right:0; bottom:-1px; height:70px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C200,86 420,2 700,34 C980,66 1200,6 1440,44 L1440,80 L0,80 Z' fill='%23FFFBF2'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
html.bunt .hero h1{color:var(--ink);}
html.bunt .hero h1 .c-wasser{color:var(--water-deep);}
html.bunt .hero h1 .c-natur{color:var(--green-deep);}
html.bunt .hero h1 .c-neugier{color:var(--fruit-deep);}
html.bunt .hero p.lead{color:var(--ink-soft);}
html.bunt .element-bar span{height:8px; width:46px; border-radius:4px;}
html.bunt .hero-photo{
  position:relative; border:8px solid #fff; border-radius:30px; transform:rotate(1.6deg);
  box-shadow:0 22px 46px rgba(31,42,68,.28); transition:transform .4s ease, box-shadow .4s ease;
}
html.bunt .hero-photo:hover{transform:rotate(0deg) scale(1.01);}
html.bunt .hero-photo img{border-radius:20px;}

/* ---------- Die fünf Säulen ---------- */
html.bunt #elemente{padding-top:40px;}
html.bunt .element-card{
  border:none; border-radius:24px; box-shadow:0 10px 24px rgba(31,42,68,.10);
  transition:transform .25s ease, box-shadow .25s ease;
}
html.bunt #elemente .element-card:nth-child(odd){transform:rotate(-.7deg);}
html.bunt #elemente .element-card:nth-child(even){transform:rotate(.7deg);}
html.bunt .element-card:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 18px 34px rgba(31,42,68,.18);}
html.bunt .elements{grid-template-columns:repeat(5,minmax(0,1fr));}
html.bunt .element-card h3{color:var(--ink); font-size:17px; hyphens:auto; overflow-wrap:break-word;}
html.bunt .element-card p{color:var(--ink-soft);}

/* ---------- Aktuelles ---------- */
html.bunt .news-card{border:2px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 10px 24px rgba(31,42,68,.08);}
html.bunt .news-card:nth-child(1){border-color:#9ED5F2;}
html.bunt .news-card:nth-child(2){border-color:#B9E5B0;}
html.bunt .news-tag{font-size:11.5px;}
html.bunt .news-tag.info{background:var(--water-deep); color:#fff;}
html.bunt .news-tag.job{background:var(--green-deep); color:#fff;}
html.bunt .news-tag.event{background:var(--herb); color:var(--ink);}
html.bunt .news-card h3{color:var(--ink);}

/* ---------- Wie ein Tag bei uns aussieht ---------- */
html.bunt .concept-wrap{background:var(--sand-deep); position:relative;}
html.bunt .concept-card{border-radius:26px; padding-top:42px;}
html.bunt .concept-card:nth-child(1){background:#DDF1FF; box-shadow:inset 0 10px 0 var(--water), 0 12px 26px rgba(31,42,68,.12);}
html.bunt .concept-card:nth-child(2){background:#FFE0EC; box-shadow:inset 0 10px 0 var(--pink), 0 12px 26px rgba(31,42,68,.12);}
html.bunt .concept-card:nth-child(3){background:#DFF5D8; box-shadow:inset 0 10px 0 var(--green), 0 12px 26px rgba(31,42,68,.12);}
html.bunt .concept-card h3{color:var(--ink);}
html.bunt .concept-card p{color:var(--ink-soft);}

/* ---------- Galerie-Vorschau: wie aufgehängte Fotos ---------- */
html.bunt .gallery-grid > div{border:6px solid #fff; border-radius:18px; box-shadow:0 10px 24px rgba(31,42,68,.20);}
html.bunt .g2{transform:rotate(-1.6deg);}
html.bunt .g3{transform:rotate(1.2deg);}
html.bunt .g4{transform:rotate(-1deg);}
html.bunt .g5{transform:rotate(1.6deg);}

/* ---------- Anmeldetage ---------- */
html.bunt .anmeldung{
  background:linear-gradient(135deg,#25408F 0%,#5A33A0 62%,#B8266A 100%);
  border-radius:34px; box-shadow:0 20px 44px rgba(37,64,143,.35);
}
html.bunt .anmeldung h2{color:#fff;}
html.bunt .anmeldung p{color:#EEE8FF;}
html.bunt .date-row{background:rgba(255,255,255,.14); border-bottom:none; border-radius:14px; padding:11px 16px;}
html.bunt a.date-row{margin:0; padding:11px 16px;}
html.bunt a.date-row:hover{background:rgba(255,255,255,.28);}
html.bunt a.date-row .mail-hint{color:#FFE9A8;}
html.bunt .date-row .day{color:#F4EFFF;}
html.bunt a.date-row.is-past{opacity:.55;}

/* ---------- Fußzeile ---------- */
html.bunt footer{position:relative; background:#fff; border-top:none; padding-top:76px;}
html.bunt footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:linear-gradient(90deg,var(--pink),var(--fruit),var(--herb),var(--green),var(--water),var(--purple));
}
html.bunt footer h3{color:var(--ink);}


/* ---------- Säulen: Farbe nach Inhalt ---------- */
html.bunt .element-card[data-saeule="wasser"]{background:#D9F0FF;}
html.bunt .element-card[data-saeule="kraeuter"]{background:#DFF5D8;}
html.bunt .element-card[data-saeule="ernaehrung"]{background:#FFE2D2;}
html.bunt .element-card[data-saeule="bewegung"]{background:#EBDDFF;}
html.bunt .element-card[data-saeule="ordnung"]{background:#FFF0B8;}
html.bunt .element-card[data-saeule="wasser"] .icon{stroke:var(--water-deep);}
html.bunt .element-card[data-saeule="kraeuter"] .icon{stroke:var(--green-deep);}
html.bunt .element-card[data-saeule="ernaehrung"] .icon{stroke:var(--fruit-deep);}
html.bunt .element-card[data-saeule="bewegung"] .icon{stroke:var(--purple-deep);}
html.bunt .element-card[data-saeule="ordnung"] .icon{stroke:var(--herb-deep);}

/* ---------- Unterseiten ---------- */
html.bunt .page-head{
  position:relative; padding-bottom:84px;
  background:linear-gradient(180deg,#CFEAFB 0%,#E9F5FC 55%,#FFF0C2 100%);
}
html.bunt .page-head::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:46px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C200,86 420,2 700,34 C980,66 1200,6 1440,44 L1440,80 L0,80 Z' fill='%23FFFBF2'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
html.bunt .page-head + section{padding-top:44px;}
html.bunt .chapter-nav{background:#fff; border-bottom:1px solid var(--line);}
html.bunt .chapter-pill{background:#FFF0C2; border-color:#F1DDA8; color:var(--ink);}
html.bunt .chapter-pill:hover{border-color:var(--forest); background:#fff;}
html.bunt .chapter-pill.active{background:var(--forest); border-color:var(--forest); color:#fff;}
html.bunt .chapter-nav .back-link{color:var(--ink-soft);}

/* Karten in den Raster-Layouts: Pastellfarben im Wechsel */
html.bunt .info-card{border:none; border-radius:22px; box-shadow:0 8px 20px rgba(31,42,68,.08);}
html.bunt .three-col > .info-card:nth-child(5n+1), html.bunt .two-col > .info-card:nth-child(5n+1), html.bunt .week-grid > .info-card:nth-child(5n+1){background:#DDF1FF;}
html.bunt .three-col > .info-card:nth-child(5n+2), html.bunt .two-col > .info-card:nth-child(5n+2), html.bunt .week-grid > .info-card:nth-child(5n+2){background:#FFE0EC;}
html.bunt .three-col > .info-card:nth-child(5n+3), html.bunt .two-col > .info-card:nth-child(5n+3), html.bunt .week-grid > .info-card:nth-child(5n+3){background:#DFF5D8;}
html.bunt .three-col > .info-card:nth-child(5n+4), html.bunt .two-col > .info-card:nth-child(5n+4), html.bunt .week-grid > .info-card:nth-child(5n+4){background:#FFE0C8;}
html.bunt .three-col > .info-card:nth-child(5n+5), html.bunt .two-col > .info-card:nth-child(5n+5), html.bunt .week-grid > .info-card:nth-child(5n+5){background:#EBDDFF;}
html.bunt a.info-card:hover{border-color:transparent; box-shadow:0 16px 30px rgba(31,42,68,.16);}
html.bunt .big-mailto{background:var(--forest); box-shadow:0 4px 0 #14265A;}
html.bunt .big-mailto:hover{background:var(--forest-deep);}

/* Zeitleiste: bunte Punkte */
html.bunt .timeline{border-left-color:#F1DDA8;}
html.bunt .timeline-item::before{background:var(--pink);}
html.bunt .timeline-item:nth-child(6n+2)::before{background:var(--fruit);}
html.bunt .timeline-item:nth-child(6n+3)::before{background:var(--herb);}
html.bunt .timeline-item:nth-child(6n+4)::before{background:var(--green);}
html.bunt .timeline-item:nth-child(6n+5)::before{background:var(--water);}
html.bunt .timeline-item:nth-child(6n+6)::before{background:var(--purple);}
html.bunt .timeline-item .time{color:var(--ink);}

/* Team */
html.bunt .team-card{border:none; box-shadow:0 10px 24px rgba(31,42,68,.12);}
html.bunt .team-card .quote-overlay{background:linear-gradient(180deg,rgba(27,47,107,0) 35%,rgba(27,47,107,.94) 100%);}
html.bunt .team-card .quote-overlay blockquote{color:#fff;}
html.bunt .team-card .quote-overlay cite{color:#FFE9A8;}
html.bunt .leader-card{background:#FFF0C2;}
html.bunt .leader-card .quote-overlay{background:none;}
html.bunt .leader-card .quote-overlay blockquote{color:var(--ink-soft);}
html.bunt .leader-card .quote-overlay cite{color:var(--water-deep);}
html.bunt .team-card .avatar-fallback{color:var(--forest);}

/* Galerie */
html.bunt .full-gallery figure{border:5px solid #fff; border-radius:18px; box-shadow:0 10px 22px rgba(31,42,68,.16);}
html.bunt .full-gallery figure::after{background:linear-gradient(180deg,rgba(27,47,107,0) 55%,rgba(27,47,107,.62) 100%);}

/* Aktuelles (Unterseite): Rahmenfarben im Wechsel */
html.bunt .news-card:nth-child(3n+1){border-color:#9ED5F2;}
html.bunt .news-card:nth-child(3n+2){border-color:#B9E5B0;}
html.bunt .news-card:nth-child(3n+3){border-color:#F4B9D0;}

/* Mobiles Menü */
html.bunt header nav{background:#fff;}
html.bunt .legal-note{background:#FFF0C2;}

/* Schalter: auf kleinen Bildschirmen kompakter */
@media (max-width:600px){
  .farb-schalter{left:12px; bottom:12px; padding:7px 12px; font-size:12px; gap:8px;}
  .farb-schalter .punkte i{width:8px; height:8px;}
  html.bunt .page-head{padding-bottom:64px;}
  html.bunt .page-head::after{height:30px;}
  html.bunt .page-head + section{padding-top:30px;}
}

/* ---------- Schalter "Farbwelt" ---------- */
.farb-schalter{
  position:fixed; left:16px; bottom:16px; z-index:90; display:flex; align-items:center; gap:10px;
  background:#fff; color:#1F2A44; border:2px solid #1F2A44; border-radius:999px;
  padding:9px 16px; font:600 13px 'Work Sans', sans-serif; cursor:pointer;
  box-shadow:0 8px 20px rgba(31,42,68,.25);
}
.farb-schalter .punkte{display:flex; gap:3px;}
.farb-schalter .punkte i{width:10px; height:10px; border-radius:50%; display:block;}

/* ---------- Handy ---------- */
@media (max-width:980px){
  html.bunt .hero{padding-bottom:90px;}
  html.bunt .hero{padding-top:118px;}
  html.bunt .hero::before{
    width:300px; height:150px; right:-14px; top:10px;
    background:radial-gradient(circle 150px at 50% 100%, transparent 0 96px,
      var(--pink) 96px 105px, var(--fruit) 105px 114px, var(--herb) 114px 123px,
      var(--green) 123px 132px, var(--water) 132px 141px, var(--purple) 141px 150px, transparent 150px);
  }
  html.bunt .hero::after{height:44px;}
  html.bunt .hero-photo{transform:rotate(1deg); border-width:6px;}
  html.bunt #elemente .element-card:nth-child(odd), html.bunt #elemente .element-card:nth-child(even){transform:none;}
  html.bunt .elements{grid-template-columns:repeat(2,minmax(0,1fr));}
  html.bunt .element-card h3{font-size:16px;}
  html.bunt .anmeldung{border-radius:26px;}
  html.bunt header .cta-btn{box-shadow:0 3px 0 #D9A100;}
}

/* Touch-Geräte: Zitate der Teamkarten bleiben dauerhaft sichtbar und lesbar */
@media (hover: none){
  html.bunt .team-card:not(.leader-card) .quote-overlay{background:none;}
  html.bunt .team-card:not(.leader-card) .quote-overlay blockquote{color:var(--ink-soft);}
  html.bunt .team-card:not(.leader-card) .quote-overlay cite{color:var(--water-deep);}
}

@media (max-width:400px){
  html.bunt .elements{grid-template-columns:minmax(0,1fr);}
}

html.bunt .anmeldung .form-link{background:var(--herb); color:var(--ink); font-weight:700; box-shadow:0 4px 0 #D9A100;}
html.bunt .anmeldung .form-link:hover{background:#FFB300;}

html.bunt .avatar-art .sky1{stop-color:#BFE3F8;}
html.bunt .avatar-art .sky2{stop-color:#FFF0C2;}

/* Bei geöffnetem Handy-Menü den Farbwelt-Knopf ausblenden, damit er keinen Menüpunkt verdeckt */
html.menu-offen .farb-schalter{display:none;}

/* Termine und Kalender */
html.bunt .abo-card{border:2px solid #9ED5F2; border-radius:28px; box-shadow:0 10px 24px rgba(31,42,68,.08);}
html.bunt .termin{border:2px solid var(--line); border-radius:24px; box-shadow:0 10px 24px rgba(31,42,68,.08);}
html.bunt .termin:nth-of-type(3n+1){border-color:#9ED5F2;}
html.bunt .termin:nth-of-type(3n+2){border-color:#B9E5B0;}
html.bunt .termin:nth-of-type(3n+3){border-color:#F4B9D0;}
html.bunt .termin-date, html.bunt .mt-date{background:#FFE9A8;}
html.bunt .termin-date b, html.bunt .mt-date b{color:var(--ink);}
html.bunt .termin-btn{background:var(--water-deep);}
html.bunt .termin-btn:hover{background:#2F5A68;}