/* Nur für die Startseite, baut auf basis.css auf */

.seite { max-width: 1000px; margin: 0 auto; padding: 30px 0 20px; }

/* ---------- Titel ---------- */
.titel {
  text-align: center;
  padding: 50px 20px 40px;
  background:
    repeating-conic-gradient(from 0deg at 50% 60%, #fff 0deg 4deg, #eee 4deg 8deg);
}
h1 {
  font-family: "Bangers", "Impact", sans-serif;
  font-weight: normal;
  font-size: clamp(2.1rem, 10.5vw, 7.5rem);
  line-height: .95;
  letter-spacing: 4px;
  margin: 0;
  color: var(--rot);
  -webkit-text-stroke: 3px var(--tinte);
  text-shadow: 6px 6px 0 var(--tinte);
  transform: rotate(-2deg);
}
.titel p { margin: 18px 0 0; font-weight: 700; font-size: 1.2rem; }
.sfx {
  position: absolute; font-family: "Bangers", sans-serif; color: var(--tinte);
  font-size: 2.6rem; transform: rotate(12deg); user-select: none;
}
.sfx.links  { top: 14px; left: 22px; transform: rotate(-14deg); font-size: 2rem; }
.sfx.rechts { bottom: 10px; right: 26px; }
@media (max-width: 720px) {
  h1 { letter-spacing: 1px; -webkit-text-stroke-width: 2px; text-shadow: 4px 4px 0 var(--tinte); }
  .titel { padding: 46px 12px 40px; }
  .sfx.links { font-size: 1.4rem; top: 8px; left: 12px; }
  .sfx.rechts { font-size: 1.7rem; bottom: 4px; right: 12px; }
  #schleim { width: 54px; height: 42px; }
}

/* ---------- Schroeder + Sprechblase ---------- */
.held {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; margin-top: 28px;
}
@media (max-width: 720px) { .held { grid-template-columns: 1fr; } }
.katzen-panel {
  padding: 20px 20px 0; display: flex; flex-direction: column; align-items: center;
  background: repeating-linear-gradient(90deg, #fff 0 14px, #f3f3f3 14px 16px);
}
#schroeder { width: 100%; max-width: 300px; height: auto; cursor: pointer; display: block; }
#schroeder .schwanz { transform-origin: 168px 226px; animation: wedeln 2.4s ease-in-out infinite; }
@keyframes wedeln { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(14deg); } }
#schroeder .augen { transform-origin: 120px 101px; transition: transform .1s; }
#schroeder.schnurr { animation: schnurren .35s linear 2; }
@keyframes schnurren { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.namensschild {
  background: var(--tinte); color: #fff; font-family: "Bangers", sans-serif;
  letter-spacing: 3px; font-size: 1.5rem; padding: 4px 18px; margin: 0 0 -4px;
}

.blasen-panel { display: flex; flex-direction: column; justify-content: center; padding: 30px 26px; }
.blase {
  position: relative; background: #fff; border: 4px solid var(--tinte);
  border-radius: 50% / 42%; padding: 38px 34px; text-align: center;
  font-weight: 700; font-size: 1.45rem; min-height: 150px;
  display: flex; align-items: center; justify-content: center;
}
/* Zipfel der Sprechblase: schwarzer Rand + weiße Füllung, zeigt nach links unten zu Schroeder */
.blase::before, .blase::after {
  content: ""; position: absolute; left: calc(50% - 16px);
  border-left: 16px solid transparent; border-right: 16px solid transparent;
  transform: skewX(-40deg); transform-origin: top;
}
.blase::before { bottom: -30px; border-top: 30px solid var(--tinte); }
.blase::after  { bottom: -21px; border-top: 24px solid #fff; left: calc(50% - 11px);
                 border-left-width: 11px; border-right-width: 11px; }
/* Auf dem Handy steht die Blase unter Schroeder, also zeigt der Zipfel nach oben */
@media (max-width: 720px) {
  .blase::before, .blase::after { transform: skewX(0); transform-origin: bottom; }
  .blase::before { bottom: auto; top: -30px; border-top: 0; border-bottom: 30px solid var(--tinte); }
  .blase::after  { bottom: auto; top: -21px; border-top: 0; border-bottom: 24px solid #fff; }
}
.blase.neu { animation: plopp .3s ease-out; }
@keyframes plopp { 0% { transform: scale(.85); } 70% { transform: scale(1.05); } 100% { transform: scale(1); } }
.blasen-panel .klein { color: var(--grau); font-size: .95rem; margin-top: 40px; text-align: center; }

/* ---------- Kapitel ---------- */
h2 {
  font-family: "Bangers", sans-serif; font-weight: normal; letter-spacing: 3px;
  font-size: 2.6rem; margin: 50px 0 18px; display: inline-block;
  background: var(--tinte); color: #fff; padding: 2px 18px; transform: rotate(-1.5deg);
}
.kapitel { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 26px; }
.kapitel a { color: inherit; text-decoration: none; }
.karte { display: block; transition: transform .15s, box-shadow .15s; }
.karte:hover { transform: translate(-3px, -3px) rotate(-.7deg); box-shadow: 10px 10px 0 var(--rot); }
.karte .bild { height: 180px; background: #000; position: relative; overflow: hidden; }
.karte img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.3); transition: filter .25s; }
.karte:hover img { filter: none; }
.karte .nr {
  position: absolute; top: 10px; left: 10px; background: var(--rot); color: #fff;
  font-family: "Bangers", sans-serif; letter-spacing: 2px; padding: 2px 10px; border: 3px solid var(--tinte);
}
.karte .text { padding: 14px 18px 18px; border-top: 4px solid var(--tinte); }
.karte h3 { font-family: "Bangers", sans-serif; font-weight: normal; letter-spacing: 2px; font-size: 1.8rem; margin: 0; }
.karte p { margin: 2px 0 0; color: var(--grau); }
.bald {
  min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  background: repeating-linear-gradient(-45deg, #fff 0 10px, #f0f0f0 10px 20px);
}
.bald strong { font-family: "Bangers", sans-serif; font-weight: normal; letter-spacing: 2px; font-size: 2rem; }

/* ---------- Schleim ---------- */
#schleim {
  position: fixed; right: 18px; bottom: 14px; width: 74px; height: 58px; cursor: pointer;
  animation: huepfen 1.6s ease-in-out infinite; z-index: 5;
}
@keyframes huepfen {
  0%, 100% { transform: translateY(0) scale(1.08, .92); }
  50% { transform: translateY(-16px) scale(.95, 1.05); }
}