:root{
  --papier:#FBF8F2;
  --tinte:#2E2A26;
  --gruen:#225C3C;
  --bordeaux:#8E2318;
  --blau:#8AA3E8;
  --gelb:#F2DF8C;
  --orange:#DD4F1E;
  --flieder:#D9C8E8;
  --radius:26px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--papier);
  color:var(--tinte);
  font-family:'Nunito',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Die Klasse .serif gab es fuer Serifen-Ausnahmen. Seit dem Wegfall
   der Zweitschrift ohne Wirkung; sie wird nirgends verwendet. */
/* ---------- Header ---------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,56px);
  position:sticky;top:0;background:rgba(251,248,242,.92);
  backdrop-filter:blur(8px);z-index:50;
}
.wordmark{
  font-family:'Nunito',sans-serif;font-weight:800;
  font-size:30px;letter-spacing:-.5px;line-height:1;
  color:var(--gruen);cursor:pointer;border:none;background:none;text-decoration:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
}
.logo-svg{height:42px;width:auto;color:var(--gruen);display:block}
.logo-gross{height:clamp(84px,9vw,128px);color:var(--gelb)}
footer .logo-svg{color:var(--gelb)}
.wordmark .star{color:var(--gelb);font-size:.75em;transform:translateY(-8px);display:inline-block}
.wordmark small{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bordeaux);
  margin-top:2px;text-align:left;line-height:1.3;
}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{
  font-family:'Nunito',sans-serif;font-weight:700;font-size:14px;
  color:var(--tinte);background:none;border:none;cursor:pointer;text-decoration:none;
  padding:8px 14px;border-radius:999px;transition:background .2s;
}
nav a:hover,nav a:focus-visible{background:var(--gelb);outline:none}
nav a.aktiv{background:var(--tinte);color:var(--papier)}
/* Hamburger-Menü (Mobile) */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{width:24px;height:3px;border-radius:2px;background:var(--tinte);display:block;transition:transform .25s,opacity .25s}
.hamburger.offen span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.offen span:nth-child(2){opacity:0}
.hamburger.offen span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:760px){
  .hamburger{display:flex}
  nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:4px;
    background:rgba(251,248,242,.98);backdrop-filter:blur(8px);
    padding:10px clamp(20px,5vw,56px) 18px;
    box-shadow:0 14px 24px rgba(46,42,38,.14);
  }
  nav.offen{display:flex}
  nav a{padding:12px 14px;font-size:16px}
}
/* ---------- Start: Kachel-Grid ---------- */
.held{padding:clamp(12px,3vw,40px) clamp(16px,4vw,56px) 24px}
.grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(220px,28vh);
}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .grid{grid-template-columns:1fr;grid-auto-rows:130px;gap:12px}
  .k-logo{order:-1} /* KiJu-Haupttile zuoberst */
  .kachel{padding:16px;gap:6px}
  .kachel p{display:none} /* Untertitel ausblenden */
  .kachel h2{font-size:22px}
  .logo-gross{height:64px}
  .k-logo .unterzeile{font-size:10px}
}
.kachel{
  border-radius:var(--radius);border:none;cursor:pointer;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:26px;text-align:center;position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
  font-family:'Nunito',sans-serif;
}
.kachel:hover,.kachel:focus-visible{
  animation:schweben 1.8s ease-in-out infinite;
  box-shadow:0 14px 30px rgba(46,42,38,.16);outline:none;
}
@keyframes schweben{
  0%,100%{transform:translateY(-4px) rotate(-.6deg)}
  50%{transform:translateY(-10px) rotate(.6deg)}
}
/* Kacheln sind Links, keine Schieberegler: Textauswahl und das native
   Ziehen des Browsers bleiben unterbunden, damit ein Fehlgriff nicht
   den Text markiert oder das Bild aus der Kachel zieht.
   Das Umsortieren per Ziehen wurde am 16.08.2026 entfernt. */
.kachel{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:manipulation}
.kachel svg,.kachel img{pointer-events:none;-webkit-user-drag:none}
.kachel h2{
  font-family:'Nunito',sans-serif;font-weight:800;
  font-size:clamp(24px,2.4vw,32px);letter-spacing:.06em;line-height:1.25;
}
.kachel p{font-size:14px;font-weight:600;opacity:.85;max-width:26ch}
.k-logo{background:var(--bordeaux);color:var(--gelb)}
.k-logo .unterzeile{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gelb)}
.k-claim{background:var(--flieder);color:var(--bordeaux)}
.k-claim h2{font-size:clamp(24px,2.4vw,32px)}
.k-kontakt{background:var(--orange);color:var(--papier)}
.k-info{background:var(--gelb);color:#225C3C}
.k-team{background:var(--blau);color:#1E2459}
.k-zuweiser{background:var(--gelb);color:var(--bordeaux)}
.k-impressionen{background:var(--gruen);color:var(--papier)}
.hinweisleiste{
  margin:26px clamp(16px,4vw,56px) 40px;
  background:var(--flieder);border-radius:var(--radius);
  padding:18px 26px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  font-weight:700;color:var(--bordeaux);font-size:15px;
}
.hinweisleiste .punkt{width:12px;height:12px;border-radius:50%;background:var(--bordeaux);flex:none}
/* ---------- Unterseiten ---------- */
.unterseite{max-width:1060px;margin:0 auto;padding:clamp(24px,4vw,56px)}
.zurueck{
  font-weight:800;font-size:14px;border:none;background:none;cursor:pointer;text-decoration:none;
  color:var(--bordeaux);padding:6px 0;margin-bottom:18px;display:inline-flex;gap:6px;align-items:center;
}
.zurueck:hover{text-decoration:underline}
.unterseite h1{
  font-family:'Nunito',sans-serif;font-weight:800;
  font-size:clamp(33px,4.6vw,50px);letter-spacing:-.8px;margin-bottom:8px;
}
.lead{font-size:19px;margin-bottom:36px;font-weight:600;color:#56504A}
/* Fliesstext bricht erst am rechten Rand um, nicht frueher.
   Bewusst KEIN text-wrap:pretty oder balance auf Absaetzen und Listen:
   beides zieht Woerter auf die naechste Zeile, bevor die Zeile voll ist,
   und laesst den Text schmaler wirken als die Flaeche, in der er steht.
   Nur bei Ueberschriften und den kurzen Kacheltexten ist das erwuenscht –
   die sollen gleichmaessig auf die Zeilen verteilt sein. */
h1,h2,h3,h4,.kachel p{text-wrap:balance}
.kartenreihe{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:36px}
.karte{
  border-radius:var(--radius);padding:28px;min-height:170px;
}
.karte h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:20.5px;letter-spacing:-.2px;margin-bottom:10px}
.karte p,.karte li{font-size:15.5px}
.karte ul{list-style:none}
.karte li{padding:5px 0;border-bottom:1px dashed rgba(0,0,0,.15)}
.karte li:last-child{border:none}
.karte.gruen{background:var(--gruen);color:var(--papier)}
.karte.gruen li{border-color:rgba(255,255,255,.3)}
.karte.rosa,.karte.flieder{background:var(--flieder);color:var(--bordeaux)}
.karte.mint{background:var(--gelb);color:#225C3C}
.karte.petrol{background:var(--blau);color:#1E2459}
.karte.petrol li{border-color:rgba(255,255,255,.3)}
.karte.lime{background:var(--orange);color:var(--papier)}
.karte.lime li{border-color:rgba(255,255,255,.3)}
.platzhalter{
  border:2px dashed var(--blau);border-radius:var(--radius);
  padding:26px;text-align:center;font-weight:700;color:#5F6FB4;font-size:15px;
}
/* Textseiten (Impressum, Datenschutz) */
.textseite h2{font-family:'Nunito',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.3px;margin:44px 0 12px}
.textseite h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:19px;margin:28px 0 8px}
.textseite p+p,.textseite ul+p{margin-top:16px}
.textseite ul{margin-top:12px;padding-left:22px}
.textseite li{margin-bottom:8px}
.textseite .stand{margin-top:36px;font-size:14px;color:#8a8378}
/* Team */
.gesicht{
  width:120px;height:120px;border-radius:50%;overflow:hidden;margin:0 auto 14px;
}
.gesicht img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Impressionen */
.galerie{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.galerie div{
  border-radius:var(--radius);min-height:190px;display:flex;
  align-items:center;justify-content:center;font-size:40px;
}
/* Inhalte innerhalb von farbigen Karten (Nützliches) */
.karte .akkordeon{margin-top:16px}
.karte .akkordeon-item{border:none;background:var(--papier)}
.karte .akkordeon-inhalt a{color:var(--bordeaux)}
.innen-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:16px}
.innen-karte{
  background:var(--papier);border-radius:16px;padding:22px;
  color:var(--tinte);text-decoration:none;display:block;text-align:center;
}
.innen-karte h4{font-family:'Nunito',sans-serif;font-weight:800;font-size:18px;margin-bottom:8px;color:var(--tinte)}
.innen-titel{font-family:'Nunito',sans-serif;font-weight:800;font-size:18.5px;margin:28px 0 0}
.innen-titel:first-of-type{margin-top:20px}
.innen-karte p{color:var(--tinte)}
a.innen-karte:hover{box-shadow:0 10px 22px rgba(46,42,38,.18)}
/* Akkordeon */
.akkordeon{display:flex;flex-direction:column;gap:12px;width:100%}
.akkordeon-item{
  border:1px solid rgba(46,42,38,.15);border-radius:var(--radius);overflow:hidden;
}
.akkordeon-button{
  width:100%;padding:20px 26px;background:var(--papier);border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:16px;font-weight:600;color:var(--tinte);text-align:left;
  transition:background .2s;font-family:'Nunito',sans-serif;
}
.akkordeon-button:hover{background:rgba(34,92,60,.08)}
.akkordeon-button[aria-expanded="true"]{background:rgba(34,92,60,.12)}
.akkordeon-icon{width:20px;height:20px;flex-shrink:0;transition:transform .3s;color:var(--gruen)}
.akkordeon-button[aria-expanded="true"] .akkordeon-icon{transform:rotate(180deg)}
.akkordeon-inhalt{
  max-height:0;overflow:hidden;transition:max-height .3s ease;background:rgba(34,92,60,.04);
}
.akkordeon-button[aria-expanded="true"]+.akkordeon-inhalt{max-height:500px}
.akkordeon-inhalt p{padding:0 26px 20px;margin:20px 0 0}
/* ---------- Footer ---------- */
footer{
  margin-top:40px;background:var(--tinte);color:var(--papier);
  padding:46px clamp(20px,5vw,56px);
  display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;align-items:flex-start;
}
footer .wordmark{color:var(--gelb)}
footer .wordmark small{color:var(--gelb)}
footer p{font-size:14px;opacity:.85;max-width:34ch}
footer a{color:var(--gelb);font-weight:700;text-decoration:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}