/* ==========================================================================
   Happy — helle, verspielte Schicht über veredelung.css

   Liegt bewusst in einer eigenen Datei: Der Link in den Seiten lässt sich
   entfernen, dann steht wieder der dunkle Launcher aus veredelung.css.

   Haltung: warmes Creme statt Tinte, riesige fette Schwarzschrift, jede App
   mit einer knalligen Farbe, Karten als helle Poster-Kacheln mit Bild oben
   und Farbfeld unten — angelehnt an ein Editorial-/Poster-Layout mit sehr
   hohem Kontrast und viel Luft.
   ========================================================================== */

:root {
  --creme:   #FFF6EC;
  --papier:  #FFFFFF;
  --tinte:   #16130F;
  --tinte-2: #4B443C;
  --tinte-3: #8A8074;
  --linie:   rgba(22, 19, 15, .12);
  --linie-2: rgba(22, 19, 15, .2);

  --koralle:  #FF5A45;
  --sonne:    #FFC93C;
  --himmel:   #4C86FF;
  --flieder:  #B49BFF;
  --minze:    #1FB871;

  --happy-schatten: 0 30px 60px -34px rgba(22, 19, 15, .28);
}

::selection { background: var(--koralle); color: #fff; }
body { background: var(--creme); }

/* Nicht alles ist eine Pille: der schwebende Kopf bleibt die eine bewusste
   Rundform, Schaltflaechen/Suche/Chips bekommen ein ruhigeres, kantigeres
   Rechteck statt Stadion-Form — sonst sieht jede Flaeche gleich aus. */
.btn { border-radius: 16px; }

/* ---------- Kopf- und Fusszeile: cremig statt Glas-auf-Tinte ---------- */

.masthead--auf-dunkel .wrap {
  /* Deckend genug, dass Text darunter nicht durchscheint, auch falls der
     Weichzeichner (backdrop-filter) im jeweiligen Browser nicht greift. */
  background: rgba(255, 255, 255, .94);
  border-color: var(--linie);
  box-shadow: 0 16px 40px -28px rgba(22, 19, 15, .35);
}
.masthead--auf-dunkel.is-scrolled .wrap { background: rgba(255, 255, 255, .98); border-color: var(--linie-2); }
.brand, .colophon .brand { color: var(--tinte); }
.brand:hover { opacity: .6; }
@media (min-width: 901px) {
  .masthead--auf-dunkel .mainnav a { color: var(--tinte-2); }
  .masthead--auf-dunkel .mainnav a:hover { background: rgba(22, 19, 15, .06); color: var(--tinte); }
  .masthead--auf-dunkel .mainnav a[aria-current="page"] { background: var(--tinte); color: #fff; }
}
@media (max-width: 900px) {
  .masthead--auf-dunkel .navtoggle { background: rgba(255,255,255,.6); border-color: var(--linie); color: var(--tinte); }
  .masthead--auf-dunkel .mainnav { background: var(--papier); border-color: var(--linie); box-shadow: var(--happy-schatten); }
  .masthead--auf-dunkel .mainnav a { color: var(--tinte-2); }
  .masthead--auf-dunkel .mainnav a:hover { background: rgba(22,19,15,.06); color: var(--tinte); }
  .masthead--auf-dunkel .mainnav a[aria-current="page"] { background: var(--tinte); color: #fff; }
}

.colophon {
  background: var(--creme); color: var(--tinte-2);
  border-top: 1px solid var(--linie);
}
.colophon h4 { color: var(--tinte-3); }
.colophon a { color: var(--tinte-2); }
.colophon a:hover { color: var(--koralle); }
.colophon-base { border-top-color: var(--linie); color: var(--tinte-3); }

/* ---------- Bühne (Startseite): warme Farbwolken statt Tinte-Orbs ---------- */

.katalogseite { background: var(--creme); }
.katalogseite::after { display: none; }               /* Filmkorn brauchts auf hell nicht */
.katalogseite::before {
  background: radial-gradient(640px circle at var(--sx, 50%) var(--sy, 18%), rgba(255, 90, 69, .07), transparent 65%);
}
.hero-licht {
  background:
    radial-gradient(52% 46% at 10% -8%, #FFC1D9 0%, transparent 62%),
    radial-gradient(48% 44% at 96% -4%, #FFE28A 0%, transparent 60%),
    radial-gradient(40% 40% at 55% 26%, #DCD5FF 0%, transparent 62%);
}
.hero-licht .orb { display: none; }                    /* die statischen Wolken oben ersetzen die bewegten Orbs */
.hero-licht::after { opacity: .35; background-image: radial-gradient(rgba(22,19,15,.14) 1px, transparent 1.3px); }
.orb--farbe { display: none; }                          /* Hintergrund bleibt bei hell ruhig statt Farbe zu wechseln */
.sternbild { opacity: .1; }
.sb-kante { stroke: rgba(22, 19, 15, .1); }
.sb-knoten { fill: rgba(22, 19, 15, .28); }
.sb-knoten--gross { fill: rgba(22, 19, 15, .4); }

/* ---------- Schlagzeile ---------- */

.hero-titel {
  color: var(--tinte); font-weight: 900; letter-spacing: -.03em; line-height: .92;
  font-size: clamp(2.8rem, 8vw, 7.4rem);
  font-family: "League Spartan", var(--sans);   /* echtes Schwarz statt auf 700 gedeckeltem Inter */
}
.slot-wort { background-image: linear-gradient(95deg, var(--tinte) 0%, var(--koralle) 100%); }
.hero-kicker { display: none; }

/* ---------- Suche ---------- */

.suche {
  border-radius: 20px; border-color: var(--linie-2); background: var(--papier); color: var(--tinte-2);
  box-shadow: var(--happy-schatten);
}
.suche:focus-within {
  border-color: var(--koralle); background: var(--papier);
  box-shadow: 0 0 0 6px rgba(255, 90, 69, .14), var(--happy-schatten);
}
.suche input { color: var(--tinte); }
.suche input::placeholder { color: var(--tinte-3); }
.suche kbd { border-color: var(--linie-2); background: var(--creme); color: var(--tinte-2); }

/* ---------- Bibliothek: Ueberschrift + Filter ---------- */

.katalog-kopf .katalog-label { color: var(--tinte-3); }
.filter-pille { border-radius: 14px; background: var(--papier); border-color: var(--linie-2); color: var(--tinte-2); box-shadow: 0 10px 24px -18px rgba(22,19,15,.3); }
.filter-pille:hover { border-color: var(--tinte-2); }
.filter-pille[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.filter-pille[aria-pressed="true"] .filter-pille-count { background: rgba(255,255,255,.22); color: #fff; }
.katalog-leer { color: var(--tinte-2); }

/* ==========================================================================
   Karten: Bild oben in fester Höhe, Farbfeld darunter (statt Vollbild-Cover)
   ========================================================================== */

.kachel {
  justify-content: flex-start;
  min-height: 0;
  background: var(--papier);
  box-shadow: inset 0 0 0 1px var(--linie), 0 40px 80px -50px rgba(22, 19, 15, .35);
}
.kachel:hover,
.kachel.ist-hover,
.kachel.is-demo {
  box-shadow: inset 0 0 0 1px var(--linie-2), 0 46px 90px -40px rgba(22, 19, 15, .3),
              0 0 0 3px color-mix(in srgb, var(--akzent) 70%, transparent);
}

.kachel-bildlink { position: relative; inset: auto; z-index: auto; display: block; }
.kachel .kachel-bild {
  position: relative; inset: auto; z-index: auto;
  aspect-ratio: 16 / 11;
  background: linear-gradient(155deg, color-mix(in srgb, var(--akzent) 26%, #fff), #fff 65%);
}
.kachel .kachel-bild::after,
.kachel:hover .kachel-bild::after,
.kachel.ist-hover .kachel-bild::after {
  background: linear-gradient(to bottom, rgba(22, 19, 15, .5) 0%, rgba(22, 19, 15, 0) 34%);
}
.kachel .bild--kunst img { padding-top: 52px; }

/* Farbfeld + wechselndes Grafikmotiv hinter dem Titel, angelehnt an die
   knalligen Farbblock-Karten mit Pfeil-/Ring-Motiv im Referenzbild. Drei
   Formen (Ring, Pfeil, Raute) wechseln sich Karte fuer Karte ab, statt
   dass jede Kachel denselben Ring traegt. */
.kachel-info {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--akzent) 13%, var(--papier)), var(--papier) 62%);
  --motiv-farbe: var(--akzent);
}
.kachel-info > * { position: relative; z-index: 1; }

/* Motiv 1: Ring + Punkt */
.katalog > .kachel-slot:nth-child(3n+1) .kachel-info::before {
  content: ""; position: absolute; right: -50px; bottom: -50px; z-index: 0;
  width: 184px; height: 184px; border-radius: 50%;
  border: 30px solid var(--motiv-farbe); opacity: .28; pointer-events: none;
}
.katalog > .kachel-slot:nth-child(3n+1) .kachel-info::after {
  content: ""; position: absolute; right: 34px; bottom: 108px; z-index: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--motiv-farbe); opacity: .5; pointer-events: none;
}

/* Motiv 2: dicker Pfeil, diagonal wie im Referenzbild */
.katalog > .kachel-slot:nth-child(3n+2) .kachel-info::before {
  content: ""; position: absolute; right: -34px; bottom: -34px; z-index: 0;
  width: 168px; height: 168px; pointer-events: none;
  background: var(--motiv-farbe); opacity: .32;
  clip-path: polygon(20% 0%, 80% 0%, 80% 50%, 100% 50%, 50% 100%, 0% 50%, 20% 50%);
  transform: rotate(-45deg);
}

/* Motiv 3: Raute */
.katalog > .kachel-slot:nth-child(3n) .kachel-info::before {
  content: ""; position: absolute; right: 6px; bottom: -56px; z-index: 0;
  width: 128px; height: 128px; border-radius: 22px; pointer-events: none;
  background: var(--motiv-farbe); opacity: .3;
  transform: rotate(45deg);
}

.kachel-info h4 {
  font-family: "League Spartan", var(--sans); font-weight: 800; letter-spacing: -.03em;
}
.kachel-info h4 a { color: var(--tinte); }
.kachel-kopfzeile .teaser-sektor {
  border: 0; background: var(--akzent); color: var(--tinte); border-radius: 10px;
  font-weight: 700; letter-spacing: .06em;
}
.kachel-info p { color: var(--tinte-2); }

.kachel-cta .btn--info {
  background: var(--tinte); color: #fff; border-color: var(--tinte); font-weight: 700;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.kachel-cta .btn--info:hover { background: var(--akzent); border-color: var(--akzent); color: var(--tinte); }

/* Jede zweite Karte als voller Farbblock statt Weiss+Verlauf — mehr von der
   plakativen Wucht der Vorlage, im Wechsel mit den helleren Karten fuer Rhythmus */
.katalog > .kachel-slot:nth-child(odd) .kachel-info {
  background: var(--akzent);
  --motiv-farbe: color-mix(in srgb, var(--tinte) 18%, var(--akzent));
}
.katalog > .kachel-slot:nth-child(odd) .kachel-info::before { opacity: .4; }
.katalog > .kachel-slot:nth-child(odd) .kachel-info::after { opacity: .55; }
.katalog > .kachel-slot:nth-child(odd) .kachel-info p { color: color-mix(in srgb, var(--tinte) 82%, transparent); }
.katalog > .kachel-slot:nth-child(odd) .kachel-kopfzeile .teaser-sektor { background: var(--papier); }
.katalog > .kachel-slot:nth-child(odd) .kachel-cta .btn--start {
  background: var(--papier); border-color: var(--papier); color: var(--tinte);
}
.katalog > .kachel-slot:nth-child(odd) .kachel-cta .btn--start:hover {
  background: var(--tinte); border-color: var(--tinte); color: #fff; box-shadow: none;
}

/* Chips über dem Bild: freundliche helle Sticker statt Glas-auf-Dunkel */
.kachel .kachel-bild .kachel-status,
.kachel-bildlink::before {
  background: rgba(255, 255, 255, .92); border-color: var(--linie-2); color: var(--tinte);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.kachel .kachel-status--live { color: var(--minze); }
.kachel .kachel-status--live::before { background: var(--minze); }
.kachel-hover-symbol { background: rgba(255,255,255,.94); color: var(--tinte); border-color: var(--linie-2); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- Schräge Bänder: Koralle und Sonnengelb statt Weiss/Verlauf ---------- */

.band--a { background: var(--koralle); color: #fff; }
.band--b { background: var(--sonne); color: var(--tinte); }

/* ---------- Titelbänder der Unterseiten ---------- */

.sub .leitbild {
  background:
    radial-gradient(55% 60% at 8% 0%, #FFD3E1 0%, transparent 65%),
    radial-gradient(48% 55% at 100% 0%, #FFE9A6 0%, transparent 62%),
    var(--creme);
}
.sub .leitbild::before { background-image: radial-gradient(rgba(22,19,15,.16) 1px, transparent 1.3px); opacity: .4; }
.sub .leitbild-scrim { background: linear-gradient(to top, var(--creme) 0%, rgba(255,246,236,0) 55%); }
/* Rechtstexte/Kontakt haben keine .leitbild, aber .section--legal traegt noch
   den blau-violetten Farbverlauf vom dunklen Theme — auf hell dieselbe warme
   Wolke wie ueberall sonst, statt eines Fremdkoerpers in Kaltblau. */
.sub .section--legal {
  background:
    radial-gradient(55% 60% at 8% 0%, #FFD3E1 0%, transparent 65%),
    radial-gradient(48% 55% at 100% 0%, #FFE9A6 0%, transparent 62%),
    var(--creme);
}
/* Das Stimmungsfoto war fuers dunkle Theme gedacht (Berge/Himmel); auf hell
   nur die Pastellwolke zeigen, wie auf der Startseite auch — kein Foto. */
.sub .leitbild .bild img { display: none; }
.sub .leitbild .display,
.sub .legal h1 {
  color: var(--tinte); font-weight: 900; letter-spacing: -.03em;
  font-family: "League Spartan", var(--sans);
}
.sub .leitbild .display em,
.sub .legal h1 em {
  background-image: linear-gradient(95deg, var(--tinte) 0%, var(--koralle) 100%);
}
.sub .leitbild .lead { color: var(--tinte-2); }
.sub .legal h3 { color: var(--tinte); }
.sub .legal a { color: var(--tinte); border-bottom-color: var(--linie-2); }
.sub .legal a:hover { color: var(--koralle); border-bottom-color: var(--koralle); }

body.sub { background: var(--creme); color: var(--tinte-2); }
.sub h1, .sub h2, .sub h3 { color: var(--tinte); }
.sub strong { color: var(--tinte); }
.sub a { color: var(--koralle); }
.sub a:hover { color: var(--tinte); }
.sub .lead { color: var(--tinte-2); }
.sub .muted { color: var(--tinte-3); }
.sub .section--tint { background: var(--papier); border-block-color: var(--linie); }

.sub .rubrik-nav-band { background: var(--creme); }
.sub .rubrik-nav a { border-radius: 14px; background: var(--papier); color: var(--tinte); border-color: var(--linie-2); }
.sub .rubrik-nav a:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }

.sub .satz .teaser-sektor { border-radius: 10px; border-color: var(--linie-2); color: var(--tinte-2); background: var(--papier); }
.sub .satz h2 { background-image: linear-gradient(95deg, var(--tinte) 10%, var(--akzent, var(--koralle)) 95%); }
.sub .projekt-bild { box-shadow: var(--happy-schatten); }
.sub .produkt-start .kachel-status--live { color: var(--minze); }

.sub .angaben > div { border-top-color: var(--linie); }
.sub .angaben > div:last-child { border-bottom-color: var(--linie); }
.sub .angaben dt { color: var(--tinte-3); }
.sub .angaben dd { color: var(--tinte); }
.sub .angaben dd a { color: var(--koralle); }

.sub .hinweis { background: var(--papier); color: var(--tinte-2); border-left-color: var(--koralle); box-shadow: var(--happy-schatten); }
.sub .platzhalter { color: #C77A00; border-bottom-color: #E9C078; }

/* ==========================================================================
   Kontakt: grosse E-Mail als Schlagzeile links, Telefon/Anschrift als
   farbige Poster-Karte rechts — dieselbe Sprache wie die Karten auf der
   Startseite (Farbfeld, Ring-Motiv, League Spartan), statt einer rohen Liste.
   ========================================================================== */

.sub .legal.kontakt-legal { max-width: none; }
.kontakt-layout {
  display: grid; gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (min-width: 780px) {
  .kontakt-layout { grid-template-columns: 1.15fr .85fr; }
}

.kontakt-kicker {
  margin: 0 0 10px; color: var(--tinte-3); font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.kontakt-mail-gross {
  display: inline-block; color: var(--tinte);
  font-family: "League Spartan", var(--sans);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.04;
  font-size: clamp(2.1rem, 6vw, 4.4rem);
  border-bottom: 5px solid var(--koralle); padding-bottom: .04em;
  transition: color .25s var(--ease), border-color .25s var(--ease);
  overflow-wrap: break-word;
}
.kontakt-mail-gross:hover { color: var(--koralle); border-bottom-color: var(--tinte); }

.kontakt-karte {
  position: relative; overflow: hidden; margin: 0;
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: var(--radius);
  background: linear-gradient(165deg, color-mix(in srgb, var(--akzent) 30%, var(--papier)), var(--papier) 68%);
  box-shadow: inset 0 0 0 1px var(--linie), var(--happy-schatten);
}
.kontakt-karte::before {
  content: ""; position: absolute; right: -46px; bottom: -46px; z-index: 0;
  width: 176px; height: 176px; border-radius: 50%;
  border: 28px solid var(--akzent); opacity: .38; pointer-events: none;
}
.kontakt-karte dt, .kontakt-karte dd { position: relative; z-index: 1; }
.kontakt-karte dt {
  color: var(--tinte-3); font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.kontakt-karte dd { color: var(--tinte); font-size: 1.0625rem; margin: 0 0 30px; }
.kontakt-karte dd:last-child { margin-bottom: 0; }

/* Projekte-Seite: Karten als helle Poster-Kacheln */
.projekt-karte { background: var(--papier); border-color: var(--linie); box-shadow: var(--happy-schatten); }
.projekt-karte .teaser-sektor { border-radius: 10px; background: var(--akzent); border: 0; color: var(--tinte); font-weight: 700; }
.projekt-karte .kachel-status--live { color: var(--minze); }
.projekt-karte h2 {
  background-image: linear-gradient(95deg, var(--tinte) 10%, var(--akzent) 95%);
  font-family: "League Spartan", var(--sans); font-weight: 800; letter-spacing: -.03em;
}
.projekt-karte p { color: var(--tinte-2); }
.projekt-karte .angaben dt { color: var(--tinte-3); }
.projekt-karte .angaben dd { color: var(--tinte); }
.projekt-karte .angaben > div { border-top-color: var(--linie); }

/* Schlussband (Projekte-Seite): hell statt Tinte-auf-Tinte */
.schlussband { background: var(--creme); border-top-color: var(--linie); }
.schlussband::before { background: radial-gradient(closest-side, rgba(255,90,69,.28), transparent); }
.schlussband-kicker { color: var(--tinte-3); }
.schlussband-link { color: var(--tinte); }
.schlussband-link:hover { color: var(--tinte); }
.schlussband-link span:first-child { background-image: linear-gradient(95deg, var(--tinte) 30%, var(--koralle)); }
.schlussband-pfeil { background: var(--tinte); color: #fff; }
.schlussband-link:hover .schlussband-pfeil { background: var(--koralle); color: #fff; }
.schlussband-adresse { color: var(--tinte-2); }

@media (max-width: 719px) {
  .kachel .kachel-bild { aspect-ratio: 16 / 10; }
}

/* ---------- Nachrang-Fix: Logo und Fusszeile gegen die allgemeine ".sub a"-Regel ----------
   ".sub a" (eine Klasse + ein Tag) ist genauso spezifisch wie ".brand"/".colophon a"
   und gewinnt sonst durch die spaetere Position im Code. Hier zwei Klassen je Selektor,
   das schlaegt ".sub a" unabhaengig von der Reihenfolge. */
.masthead .brand, .colophon .brand { color: var(--tinte); }
.colophon a { color: var(--tinte-2); }
.colophon a:hover { color: var(--koralle); }