:root {
    --karte:       #FFFFFF;
    --karte-2:     #FAF7FB;
    --tinte:       #2A2334;
    --tinte-2:     #4E4560;
    --leise:       #776C8C;
    --leiser:      #9A90AC;
    --linie:       #E8E1EE;
    --linie-2:     #D6CBE2;

    --nacht:       #241640;
    --nacht-2:     #33215A;
    --lila:        #4C2F7C;
    --lila-tief:   #351E5C;
    --lila-hell:   #8B6BB4;
    --lila-blass:  #F0EAF7;
    --flieder:     #C3A9DC;

    --gold:        #A07B2B;
    --gold-2:      #C9A455;
    --gold-blass:  #F7EEDA;
    --rose:        #C08BA4;
    --rose-blass:  #FAEDF2;

    /* Die drei Farben der kraftvollen Knöpfe, von links nach rechts,
       dazu der Schein darunter. Jedes Farbschema setzt sie neu. */
    --kraft-1:      #6B28E0;
    --kraft-2:      #8A4BF1;
    --kraft-3:      #A987FA;
    --kraft-schein: rgba(124,58,237,0.75);

    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans: "Karla", -apple-system, "Segoe UI", system-ui, sans-serif;

    --glut-1: rgba(126,84,178,0.55); --glut-2: rgba(72,52,140,0.50);
    --tief: #1A1030; --tiefrand: #3A2660; --burg-1: #2C1B4E; --burg-2: #150C28; --dunkelgrund: #171030;

    --mass: 1280px;
    --bildbahn: 320px;
    --schatten: 0 22px 48px -30px rgba(52,36,72,0.42), 0 2px 8px -4px rgba(52,36,72,0.09);
    --schatten-hoch: 0 34px 68px -34px rgba(52,36,72,0.5), 0 3px 12px -5px rgba(52,36,72,0.12);
    color-scheme: light;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: #EDE7F3;
    color: var(--tinte);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 16.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ============ Hintergrund ============ */

  .hintergrund { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .hintergrund svg { width: 100%; height: 100%; display: block; }
  .hintergrund::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,252,250,0.22) 0%, rgba(255,252,250,0.10) 30%, rgba(253,250,252,0.34) 72%, rgba(248,244,250,0.62) 100%);
  }

  .wolke-1 { animation: treiben1 120s linear infinite; }
  .wolke-2 { animation: treiben2 165s linear infinite; }
  .schwarm { animation: fliegen 92s linear infinite; }
  @keyframes treiben1 { from { transform: translateX(-16%); } to { transform: translateX(116%); } }
  @keyframes treiben2 { from { transform: translateX(116%); } to { transform: translateX(-20%); } }
  @keyframes fliegen  { from { transform: translate(-14vw, 6vh); } to { transform: translate(114vw, -8vh); } }

  .seite { position: relative; z-index: 1; }

  /* ============ Kopf ============ */

  .kopfband { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
  .kopfband-innen { max-width: var(--mass); margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; gap: 20px; }

  .logo { display: flex; align-items: center; gap: 13px; text-decoration: none; }
  .logo-zeichen {
    height: 46px; flex: none; display: grid; place-items: center;
  }
  .logo-wort { font-family: var(--serif); font-size: 31px; font-weight: 600; letter-spacing: 0.03em; line-height: 1; color: var(--tinte); }
  .logo-wort b { color: var(--lila); font-weight: 700; }
  .logo-unter { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--leiser); margin-top: 5px; }

  .kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 11px; }
  .suchfeld { display: flex; border: 1px solid var(--linie-2); background: #FFFFFF; overflow: hidden; }
  .suchfeld input { font-family: var(--sans); font-size: 14px; border: 0; padding: 9px 14px; width: 180px; outline: none; color: var(--tinte); background: transparent; }
  .suchfeld input::placeholder { color: var(--leiser); }
  .suchfeld button { border: 0; background: var(--lila); color: #FFFFFF; padding: 0 14px; cursor: pointer; display: grid; place-items: center; transition: background .3s; }
  .suchfeld button:hover { background: var(--lila-tief); }

  .rundknopf {
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
    background: var(--lila-blass); border: 1px solid var(--flieder); color: var(--lila);
    text-decoration: none; transition: background .3s, color .3s;
  }
  .rundknopf:hover { background: var(--lila); color: #FFFFFF; }

  /* Das Herz oben rechts traegt die Handlungsfarbe. Die steckt in den
     Kraft-Variablen und wechselt darum mit der Farbwahl im Auge mit.
     Wichtig: kein Rand und kein Kacheln, sonst blitzt an den Seiten das
     falsche Ende des Verlaufs durch. */
  .rundknopf.spende {
    background-image: linear-gradient(102deg, var(--kraft-1) 0%, var(--kraft-2) 48%, var(--kraft-3) 100%);
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    border: 0;
    color: #FFFFFF;
    box-shadow: 0 8px 20px -12px var(--kraft-schein), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), filter .3s, box-shadow .3s;
  }
  .rundknopf.spende:hover {
    transform: translateY(-2px);
    filter: saturate(1.12) brightness(1.1);
    box-shadow: 0 13px 26px -12px var(--kraft-schein), inset 0 1px 0 rgba(255,255,255,0.32);
  }

  /* ============ Menüband mit Sternenfeld ============ */

  .menueband {
    position: sticky; top: 0; z-index: 40;
    background:
      radial-gradient(120% 180% at 12% 0%, var(--glut-1), transparent 62%),
      radial-gradient(90% 160% at 88% 100%, var(--glut-2), transparent 60%),
      linear-gradient(180deg, var(--nacht-2) 0%, var(--nacht) 100%);
    box-shadow: 0 4px 18px -7px rgba(30,16,54,0.7);
    overflow: hidden;
  }

  /* Sternenstaub im Band */
  .menueband::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      radial-gradient(1.4px 1.4px at 12% 34%, rgba(255,255,255,0.75), transparent),
      radial-gradient(1.1px 1.1px at 28% 68%, rgba(232,214,255,0.6), transparent),
      radial-gradient(1.6px 1.6px at 41% 22%, rgba(255,248,224,0.7), transparent),
      radial-gradient(1.1px 1.1px at 57% 76%, rgba(255,255,255,0.55), transparent),
      radial-gradient(1.5px 1.5px at 69% 38%, rgba(226,208,255,0.65), transparent),
      radial-gradient(1.2px 1.2px at 82% 64%, rgba(255,250,232,0.6), transparent),
      radial-gradient(1.3px 1.3px at 94% 28%, rgba(255,255,255,0.6), transparent);
    animation: funkeln 7s ease-in-out infinite alternate;
  }

  @keyframes funkeln { from { opacity: .55; } to { opacity: 1; } }

  .menueband-innen { position: relative; z-index: 2; max-width: var(--mass); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; }
  .menuepunkt { position: relative; }

  .menueband a {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: rgba(255,255,255,0.9); text-decoration: none; padding: 13px 17px;
    transition: background .3s, color .3s;
  }
  .menueband a:hover, .menueband a:focus-visible, .menuepunkt:focus-within > a { background: rgba(255,255,255,0.13); color: #FFFFFF; }
  .menueband a.aktiv { background: rgba(255,255,255,0.17); color: #FFFFFF; }
  .menueband a.betont { color: #EFD79B; }
  .menueband a.betont:hover { background: rgba(201,164,85,0.24); }

  .klapp {
    position: absolute; left: 0; top: 100%; min-width: 258px;
    background: #FFFFFF; border: 1px solid var(--linie); box-shadow: var(--schatten);
    padding: 8px 0; display: none; z-index: 5;
  }
  .menuepunkt:hover .klapp, .menuepunkt:focus-within .klapp { display: block; }
  .klapp a {
    display: flex; justify-content: space-between; gap: 14px;
    color: var(--tinte-2); text-transform: none; letter-spacing: 0.01em;
    font-size: 15px; font-weight: 400; padding: 8px 18px;
  }
  .klapp a:hover { background: var(--lila-blass); color: var(--lila); }
  .klapp a b { color: var(--leiser); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
  .klapp hr { border: 0; border-top: 1px solid var(--linie); margin: 7px 0; }

  /* ============ Willkommen ============ */

  .willkommen { max-width: var(--mass); margin: 0 auto; padding: 30px 24px 0; }

  .willkarte {
    background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten-hoch);
    display: grid; grid-template-columns: 400px 1fr; overflow: hidden;
  }

  .willbild {
    position: relative; padding: 26px 22px;
    background: linear-gradient(158deg, var(--lila-blass), var(--gold-blass) 88%);
    border-right: 1px solid var(--linie);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  }

  .bildhalter { position: relative; display: inline-block; max-width: 100%; }
  .bildhalter img { display: block; max-width: 100%; max-height: 500px; width: auto; height: auto; border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 16px 36px -20px rgba(52,36,72,0.75); }

  .ecke { position: absolute; width: 13px; height: 13px; border: 1.5px solid var(--gold-2); pointer-events: none; }
  .ecke.lo { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
  .ecke.ro { right: -6px; top: -6px; border-left: 0; border-bottom: 0; }
  .ecke.lu { left: -6px; bottom: -6px; border-right: 0; border-top: 0; }
  .ecke.ru { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }

  .bilddatum { font-family: var(--serif); font-size: 12.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin: 0; text-align: center; }

  .willwort { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; }

  /* Der Dank an die Unterstuetzer. Steht immer unter dem ganzen Block,
     ueber die volle Breite, damit er auf jedem Geraet zu lesen ist. */
  .willdank {
    grid-column: 1 / -1;
    border-top: 1px solid var(--linie);
    background: linear-gradient(180deg, rgba(255,255,255,0), var(--gold-blass));
    padding: 18px 36px 20px;
    text-align: center;
  }
  .willdank p {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.7;
    color: var(--tinte-2);
    margin: 0 auto;
    max-width: 62ch;
  }
  .willdank p + p { margin-top: 8px; }
  .willdank em { color: var(--lila); }
  .willdank a { color: var(--lila); }

  .grussmarke {
    display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--lila); background: var(--lila-blass); border: 1px solid var(--flieder);
    padding: 4px 13px; border-radius: 999px; margin-bottom: 15px;
  }

  .willwort h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.1vw, 35px); line-height: 1.16; margin: 0 0 15px; text-wrap: balance; }
  .willwort h1 em { font-style: italic; color: var(--lila); }

  .grusstext { font-size: 16.5px; line-height: 1.76; color: var(--tinte-2); margin: 0 0 13px; max-width: 60ch; }
  .grusstext.namen { font-family: var(--serif); font-size: 19.5px; line-height: 1.55; color: var(--tinte); }
  .signatur { font-family: var(--serif); font-style: italic; font-size: 23px; color: var(--lila); margin-top: 6px; }

  /* ============ Feld ============ */

  .feld { max-width: var(--mass); margin: 0 auto; padding: 28px 24px 68px; display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 28px; align-items: start; }
  .feld.einspaltig { grid-template-columns: minmax(0, 1fr); }
  .haupt { display: flex; flex-direction: column; gap: 26px; }
  .rand { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 66px; }

  .kachel { background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); }
  .kachelkopf { padding: 15px 20px 13px; border-bottom: 1px solid var(--linie); background: linear-gradient(180deg, var(--karte-2), var(--karte)); }
  .kachelkopf h4 { margin: 0; font-family: var(--serif); font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lila); display: flex; align-items: center; gap: 10px; }
  .kachelkopf h4::after { content: ""; flex: 1; height: 1px; background: var(--gold-2); opacity: .5; }
  .kachelleib { padding: 18px 20px 20px; }

  /* Die Herkunftszeile: Autor ist immer die Seite, Kategorie ist die Stimme */
  .herkunft { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; font-size: 12.5px; color: var(--leiser); }
  .herkunft .autor { display: inline-flex; align-items: center; gap: 6px; color: var(--tinte-2); font-weight: 500; }
  .herkunft .kat {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--lila); background: var(--lila-blass); border: 1px solid var(--flieder);
    padding: 3px 11px; border-radius: 999px;
  }
  .herkunft .punkt { color: var(--linie-2); }

  /* ============ Neuester Beitrag ============ */

  .neuestmarke {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: #FFFFFF; background: linear-gradient(100deg, var(--nacht-2), var(--lila));
    padding: 5px 14px; border-radius: 999px; margin-bottom: 13px; align-self: flex-start;
  }

  .aufmacher { display: grid; grid-template-columns: 320px 1fr; overflow: hidden; }
  /* Das Titelbild fuellt die ganze linke Spalte aus, oben bis unten, von Rand
     zu Rand. Was ueber den Kasten hinausragt, wird beschnitten. Im Artikel
     selbst steht das Bild dann vollstaendig. */
  .aufmacher-bildfeld {
    padding: 0; overflow: hidden;
    background: linear-gradient(160deg, var(--lila-blass), var(--rose-blass) 92%);
    border-right: 1px solid var(--linie); display: block; position: relative;
    min-height: 260px;
  }
  .aufmacher-bildfeld img {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
  }
  .aufmacher:hover .aufmacher-bildfeld img { transform: scale(1.03); }
  .aufmacher-leib { padding: 26px 30px 28px; display: flex; flex-direction: column; }

  .aufmacher h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(27px, 3.2vw, 35px); line-height: 1.14; margin: 11px 0 12px; text-wrap: balance; }
  .aufmacher h2 a { color: inherit; text-decoration: none; transition: color .3s; }
  .aufmacher h2 a:hover { color: var(--lila); }
  .aufmacher p { font-size: 16.5px; line-height: 1.72; color: var(--tinte-2); margin: 0 0 20px; }

  .weiterknopf {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: #FFFFFF; background: linear-gradient(100deg, var(--nacht-2), var(--lila));
    border: 1px solid var(--lila-tief); text-decoration: none; padding: 12px 24px;
    transition: filter .3s, transform .3s, box-shadow .3s;
  }
  .weiterknopf:hover { filter: brightness(1.18); transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(50,28,90,0.9); }

  /* ============ Liste ============ */

  .listenkachel { padding: 6px 26px 10px; }
  .listenkopf { display: flex; align-items: baseline; gap: 14px; padding: 20px 0 14px; border-bottom: 2px solid var(--lila); margin-bottom: 4px; }
  .listenkopf h3 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte); }
  .listenkopf .zaehler { margin-left: auto; font-size: 12.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--leiser); }

  .eintrag { display: grid; grid-template-columns: 156px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: inherit; align-items: start; }
  .eintrag:last-child { border-bottom: 0; }
  /* Fester quadratischer Kasten, den das Bild ganz ausfuellt. Hoch- und
     Querformate werden mittig beschnitten. Ohne Bild bleibt der Verlauf. */
  .eintrag-bildfeld {
    display: block; padding: 0; overflow: hidden; position: relative;
    background: linear-gradient(160deg, var(--lila-blass), var(--gold-blass) 96%);
    border: 1px solid var(--linie);
    aspect-ratio: 1 / 1;
  }
  .eintrag-bildfeld img {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
  }
  .eintrag:hover .eintrag-bildfeld img { transform: scale(1.04); }
  /* Zweite Wahl unter Design, Startseite: "Bild ganz zeigen". Dann steht das
     Bild vollstaendig im Kasten und der freie Platz wird mit demselben Bild
     weichgezeichnet gefuellt. Nichts wird beschnitten, dafuer sind ueber und
     unter dem Bild weiche Baender zu sehen. */
  body.bild-ganz .aufmacher-bildfeld img,
  body.bild-ganz .eintrag-bildfeld img {
    object-fit: contain;
  }
  body.bild-ganz .aufmacher-bildfeld img { filter: drop-shadow(0 9px 24px rgba(46,30,66,0.42)); }
  body.bild-ganz .eintrag-bildfeld img { filter: drop-shadow(0 4px 11px rgba(46,30,66,0.34)); }
  body.bild-ganz .bildgrund {
    display: block; position: absolute; inset: -24px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    filter: blur(20px) saturate(0.94) brightness(0.96);
    opacity: 0.5; pointer-events: none;
  }
  body.bild-ganz .eintrag-bildfeld .bildgrund { inset: -14px; filter: blur(12px) saturate(0.94) brightness(0.96); }

  .eintrag h3 { font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
  .eintrag:hover h3 { color: var(--lila); }
  .eintrag p { font-size: 15.5px; line-height: 1.64; color: var(--tinte-2); margin: 9px 0 0; max-width: 58ch; }

  /* ============ Randkacheln ============ */

  .rosi-kachel { text-align: center; padding: 26px 22px 24px; }
  .rosi-bild { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px var(--flieder), 0 14px 30px -18px rgba(52,36,72,0.6); display: block; }

  /* Hinweis für Rosi, dass hier ihr eigenes Foto hingehört */
  .rosi-bildfeld { position: relative; display: inline-block; margin-bottom: 14px; }
  .bildhinweis {
    position: absolute; inset: 3px; border-radius: 50%; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: rgba(255,255,255,0.7); border: 1.5px dashed var(--flieder);
    font-family: var(--sans); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--lila);
    transition: opacity .3s;
  }
  .bildhinweis i {
    display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
    border: 1.5px solid var(--flieder); background: #FFFFFF; color: var(--lila);
    font-style: normal; font-size: 17px; font-weight: 400; line-height: 1; padding-bottom: 2px;
  }
  .rosi-kachel:hover .bildhinweis { opacity: 0.25; }
  .rosi-name { font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 0 0 12px; }
  .sprechblase { position: relative; background: var(--lila-blass); border: 1px solid var(--flieder); padding: 16px 18px; font-family: var(--serif); font-size: 17.5px; font-style: italic; line-height: 1.5; color: var(--tinte-2); text-align: left; }
  .sprechblase::before { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 15px; height: 15px; background: var(--lila-blass); border-left: 1px solid var(--flieder); border-top: 1px solid var(--flieder); }

  /* Uhr im Nachthimmel */
  .uhrkachel {
    position: relative; overflow: hidden; text-align: center; padding: 26px 20px 22px;
    background:
      radial-gradient(90% 120% at 22% 8%, var(--glut-1), transparent 60%),
      radial-gradient(80% 110% at 84% 96%, var(--glut-2), transparent 58%),
      linear-gradient(168deg, var(--nacht-2), var(--tief));
    border: 1px solid var(--tiefrand);
  }
  .uhrkachel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      radial-gradient(1.5px 1.5px at 16% 22%, rgba(255,255,255,0.85), transparent),
      radial-gradient(1.2px 1.2px at 32% 68%, rgba(226,208,255,0.7), transparent),
      radial-gradient(1.7px 1.7px at 52% 16%, rgba(255,248,224,0.8), transparent),
      radial-gradient(1.2px 1.2px at 66% 74%, rgba(255,255,255,0.6), transparent),
      radial-gradient(1.5px 1.5px at 78% 34%, rgba(226,208,255,0.7), transparent),
      radial-gradient(1.3px 1.3px at 90% 62%, rgba(255,250,232,0.65), transparent),
      radial-gradient(1.1px 1.1px at 44% 88%, rgba(255,255,255,0.5), transparent);
    animation: funkeln 6s ease-in-out infinite alternate;
  }
  /* Eigenes Bild hinter der Uhr, gewaehlt unter Design > Startseite.
     Darueber liegt ein dunkler Schleier, sonst waere die Uhrzeit nicht lesbar. */
  .uhrkachel.hat-uhrbild {
    background-image:
      linear-gradient(180deg, rgba(20,12,38,0.62), rgba(20,12,38,0.78)),
      var(--uhrbild);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }
  .uhrkachel.hat-uhrbild::before { opacity: 0.45; }

  /* Der helle Rahmen. Die Uhrkachel ist dunkel und verschwimmt auf einem
     dunklen Hintergrund mit ihm. Ein schmaler weisser Ring loest sie heraus.
     Er liegt ausserhalb der Kachel, nimmt also nichts vom Bild darin weg.
     Abschaltbar unter Design, Startseite. */
  .uhrkachel.mit-rahmen {
    border-color: rgba(255,255,255,0.9);
    box-shadow:
      0 0 0 4px rgba(255,255,255,0.94),
      0 0 0 5px rgba(120,94,164,0.16),
      0 22px 44px -28px rgba(20,12,38,0.85);
  }
  /* Damit der Ring nicht an die Kachel darunter stoesst. */
  .rand > .uhrkachel.mit-rahmen { margin: 5px 5px 0; width: calc(100% - 10px); }

  .uhrkachel > * { position: relative; z-index: 1; }
  .uhr-ort { font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(226,214,255,0.72); margin: 0 0 7px; }
  .uhr-zahl { font-family: var(--serif); font-size: 52px; font-weight: 500; line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; margin: 0; text-shadow: 0 0 22px rgba(190,160,255,0.4); }
  .uhr-zahl small { font-size: 25px; color: rgba(226,214,255,0.62); margin-left: 3px; }
  .uhr-tag { font-size: 14px; color: rgba(232,224,255,0.85); margin: 9px 0 0; }

  .dank { text-align: center; }
  .dank p { font-size: 15.5px; color: var(--tinte-2); margin: 0 0 14px; line-height: 1.62; }
  .dank strong { display: block; font-family: var(--serif); font-size: 19.5px; font-weight: 600; color: var(--tinte); margin-bottom: 8px; }
  /* Der Danke-Knopf traegt dieselbe Handlungsfarbe wie das Herz oben rechts
     und die Knoepfe im Handymenue, mitsamt dem wandernden Lichtstreifen. */
  .dankknopf {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #FFFFFF; text-decoration: none; border: 0;
    background-image: linear-gradient(102deg, var(--kraft-1) 0%, var(--kraft-2) 48%, var(--kraft-3) 100%);
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    padding: 12px 25px; border-radius: 999px;
    box-shadow: 0 10px 26px -14px var(--kraft-schein), inset 0 1px 0 rgba(255,255,255,0.22);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, filter .35s;
  }
  .dankknopf::after {
    content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 38%;
    z-index: 2; pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.42) 46%,
      rgba(255,255,255,0.62) 52%, rgba(255,255,255,0) 100%);
    transform: translateX(-160%) skewX(-18deg);
    animation: kraftglanz 5.2s cubic-bezier(.35,0,.25,1) infinite;
  }
  .dankknopf:hover {
    transform: translateY(-2px);
    filter: saturate(1.12) brightness(1.08);
    box-shadow: 0 16px 34px -14px var(--kraft-schein), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  body.ruhig .dankknopf::after { animation: none; opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .dankknopf::after { animation: none; opacity: 0; }
  }

  .neuliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .neuliste li + li { border-top: 1px solid var(--linie); }
  .neuliste a { display: block; padding: 12px 0; text-decoration: none; color: inherit; }
  .neuliste li:first-child a { padding-top: 2px; }
  .neuliste .t { font-family: var(--serif); font-size: 19px; line-height: 1.25; display: block; }
  .neuliste a:hover .t { color: var(--lila); }
  .neuliste .d { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--leiser); display: block; margin-top: 3px; }

  .wolke { display: flex; flex-wrap: wrap; gap: 7px; }
  .wolke a { font-size: 13px; color: var(--tinte-2); text-decoration: none; border: 1px solid var(--linie-2); background: var(--karte-2); padding: 4px 11px; border-radius: 999px; transition: background .3s, color .3s, border-color .3s; }
  .wolke a:hover { background: var(--lila-blass); border-color: var(--flieder); color: var(--lila); }
  .wolke a b { font-weight: 500; color: var(--leiser); font-size: 11.5px; margin-left: 4px; }

  .briefkachel { background: linear-gradient(152deg, var(--gold-blass), #FFFFFF 68%); border-color: var(--gold-2); }
  .briefkachel p { font-size: 15px; color: var(--tinte-2); margin: 0 0 14px; }
  .briefkachel input, .briefform input {
    width: 100%; font-family: var(--sans); font-size: 15px; padding: 11px 13px;
    border: 1px solid var(--linie-2); background: #FFFFFF; color: var(--tinte); margin-bottom: 9px;
  }
  .briefkachel input:focus, .briefform input:focus { outline: none; border-color: var(--gold); }
  .briefkachel button {
    width: 100%; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 12px; background: var(--gold); color: #FFFFFF;
    border: 1px solid var(--gold); cursor: pointer; transition: background .3s;
  }
  .briefkachel button:hover { background: #856421; }
  .briefkachel small { display: block; margin-top: 9px; font-size: 12px; color: var(--leiser); line-height: 1.5; }

  /* ============ Blättern ============ */

  .blaettern { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; padding: 4px 0 2px; }
  .blaettern a, .blaettern span {
    min-width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--linie-2); background: #FFFFFF; color: var(--tinte-2);
    text-decoration: none; font-size: 14px; font-variant-numeric: tabular-nums; padding: 0 13px;
    transition: background .3s, color .3s, border-color .3s;
  }
  .blaettern a:hover { background: var(--lila-blass); border-color: var(--flieder); color: var(--lila); }
  .blaettern .jetzt { background: var(--lila); border-color: var(--lila); color: #FFFFFF; }
  .blaettern .luecke { border: 0; background: transparent; color: var(--leiser); min-width: 22px; }

  /* ============ Artikelseite ============ */

  .brotkrume { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leiser); margin: 0 0 16px; }
  .brotkrume a { color: var(--lila); text-decoration: none; }
  .brotkrume a:hover { text-decoration: underline; }

  .artikelkachel { padding: 0; overflow: hidden; }
  /* Titelbild im Artikel: im Artikel wird nicht beschnitten. Das Bild laeuft
     ueber die volle Kachelbreite, die Hoehe ergibt sich aus dem Bild. Oben,
     links und rechts schliesst es buendig mit der Kachel ab. Die Obergrenze
     faengt nur ein extremes Hochformat ab. */
  .artikelbild-feld {
    padding: 0; margin: 0; overflow: hidden; font-size: 0; line-height: 0;
    background: linear-gradient(160deg, var(--lila-blass), var(--rose-blass) 92%);
    border-bottom: 1px solid var(--linie); display: block;
  }
  .artikelbild-feld img {
    display: block; width: 100%; height: auto;
    margin: 0; max-width: 100%;
    max-height: 70vh;
    /* Die Grenze soll grosszuegig sein. Ein quadratisches Bild ist ungefaehr
       so hoch wie die Kachel breit ist, das sind rund 870 Pixel. Deshalb
       greift die Grenze erst darueber und faengt nur ein extremes
       Hochformat ab. Dann wird das Bild eingepasst, nicht beschnitten. */
    max-height: max(70vh, 900px);
    object-fit: contain; object-position: center;
  }

  .artikelleib { padding: 32px 42px 44px; }
  .artikelleib h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 12px 0 16px; text-wrap: balance; }
  .artikeltrenner { height: 1px; background: var(--linie); margin: 22px 0 26px; }
  .artikeltext { max-width: 68ch; }
  .artikeltext p { font-size: 18px; line-height: 1.82; color: var(--tinte); margin: 0 0 20px; }

  /* Links im Beitragstext, darunter die Quellenangaben, die Rosi ans Ende
     setzt. Lila, unterstrichen mit Abstand, beim Zeigen kraeftiger. */
  .artikeltext a {
    color: var(--lila);
    text-decoration: underline;
    text-decoration-color: var(--flieder);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .25s, text-decoration-color .25s;
    overflow-wrap: anywhere;
  }
  .artikeltext a:hover,
  .artikeltext a:focus-visible { color: var(--lila-tief); text-decoration-color: var(--lila); }

  /* Eine Quellenzeile am Textende hebt sich zusaetzlich ab, wenn Rosi sie
     kursiv setzt oder als eigenen kleinen Absatz schreibt. */
  .artikeltext p em a,
  .artikeltext p > em:last-child { color: var(--lila); }
  .artikeltext p.quelle,
  .artikeltext p:last-child:has(a[href^="http"]) {
    font-size: 15.5px;
    color: var(--tinte-2);
    border-top: 1px solid var(--linie);
    padding-top: 16px;
    margin-top: 26px;
  }
  .artikeltext p.auftakt::first-letter { font-family: var(--serif); float: left; font-size: 76px; line-height: 0.82; padding: 8px 14px 0 0; color: var(--lila); }
  .artikeltext h2 { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.2; margin: 34px 0 12px; }
  .artikeltext blockquote {
    margin: 30px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--gold-2);
    font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.5; color: var(--lila);
  }
  .artikeltext blockquote p { font-size: inherit; line-height: inherit; color: inherit; margin: 0; }

  .artikelfuss { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
  .teilen { display: flex; gap: 9px; margin-left: auto; }
  .teilen a {
    width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--linie-2); background: #FFFFFF; color: var(--tinte-2);
    text-decoration: none; transition: background .3s, color .3s, border-color .3s;
  }
  .teilen a:hover { background: var(--lila); border-color: var(--lila); color: #FFFFFF; }

  /* ============ Textseiten (Impressum, Datenschutz) ============ */

  .textseite { padding: 34px 42px 44px; }
  .textseite h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 42px); line-height: 1.12; margin: 0 0 8px; }
  .textseite .unterzeile { font-size: 14px; color: var(--leiser); margin: 0 0 26px; }
  .textseite h2 { font-family: var(--serif); font-weight: 600; font-size: 25px; margin: 32px 0 10px; color: var(--lila); }
  .textseite p, .textseite li { font-size: 16.5px; line-height: 1.76; color: var(--tinte-2); max-width: 72ch; }
  .textseite p { margin: 0 0 14px; }
  .textseite ul { margin: 0 0 16px; padding-left: 20px; }
  .textseite li { margin-bottom: 6px; }
  .textseite .hinweis { background: var(--lila-blass); border: 1px solid var(--flieder); padding: 16px 18px; margin: 20px 0; }
  .textseite .hinweis p { margin: 0; color: var(--tinte); }

  /* ============ Newsletter- und Dankesseite ============ */

  .grossbuehne {
    position: relative; overflow: hidden; color: #FFFFFF; text-align: center;
    padding: 54px 34px 50px;
    background:
      radial-gradient(90% 130% at 20% 6%, var(--glut-1), transparent 62%),
      radial-gradient(80% 120% at 84% 94%, var(--glut-2), transparent 58%),
      linear-gradient(166deg, var(--nacht-2), var(--tief));
    border: 1px solid var(--tiefrand);
  }
  .grossbuehne::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      radial-gradient(1.6px 1.6px at 10% 20%, rgba(255,255,255,0.8), transparent),
      radial-gradient(1.2px 1.2px at 26% 66%, rgba(226,208,255,0.7), transparent),
      radial-gradient(1.8px 1.8px at 44% 14%, rgba(255,248,224,0.8), transparent),
      radial-gradient(1.2px 1.2px at 60% 78%, rgba(255,255,255,0.55), transparent),
      radial-gradient(1.6px 1.6px at 74% 30%, rgba(226,208,255,0.7), transparent),
      radial-gradient(1.3px 1.3px at 88% 58%, rgba(255,250,232,0.65), transparent);
    animation: funkeln 6.5s ease-in-out infinite alternate;
  }
  .grossbuehne > * { position: relative; z-index: 1; }
  .grossbuehne h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.6vw, 48px); line-height: 1.12; margin: 0 auto 14px; max-width: 20ch; text-wrap: balance; }
  .grossbuehne h1 em { font-style: italic; color: #EFD79B; }
  .grossbuehne p { font-family: var(--serif); font-size: 20px; line-height: 1.56; color: rgba(236,228,255,0.9); margin: 0 auto; max-width: 46ch; }

  .briefform { max-width: 440px; margin: 26px auto 0; display: flex; flex-direction: column; gap: 10px; }
  .briefform input { margin: 0; }
  .briefform button {
    font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: 0.11em;
    text-transform: uppercase; padding: 14px 20px; background: var(--gold); color: #FFFFFF;
    border: 1px solid var(--gold-2); cursor: pointer; transition: background .3s, transform .3s;
  }
  .briefform button:hover { background: #B98D33; transform: translateY(-2px); }
  .briefform small { color: rgba(226,216,250,0.72); font-size: 12.5px; line-height: 1.5; }

  .dreispalt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
  .infofeld { background: var(--karte); border: 1px solid var(--linie); padding: 24px 22px; box-shadow: var(--schatten); }
  .infofeld .zeichen { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--lila-blass); border: 1px solid var(--flieder); color: var(--lila); margin-bottom: 13px; }
  .infofeld h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 7px; }
  .infofeld p { font-size: 15.5px; line-height: 1.64; color: var(--tinte-2); margin: 0; }

  .spendenwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 12px; margin: 22px 0 18px; }
  .spendenwahl button {
    font-family: var(--serif); font-size: 26px; font-weight: 600;
    padding: 18px 10px; background: #FFFFFF; border: 1px solid var(--linie-2); color: var(--tinte);
    cursor: pointer; transition: background .3s, border-color .3s, color .3s, transform .3s;
  }
  .spendenwahl button span { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leiser); margin-top: 4px; }
  .spendenwahl button:hover { border-color: var(--gold-2); background: var(--gold-blass); transform: translateY(-2px); }
  .spendenwahl button.gewaehlt { background: var(--gold); border-color: var(--gold); color: #FFFFFF; }
  .spendenwahl button.gewaehlt span { color: rgba(255,255,255,0.78); }

  .paypalknopf {
    display: inline-flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; background: var(--gold);
    border: 1px solid var(--gold); text-decoration: none; padding: 15px 34px; border-radius: 999px;
    transition: background .3s, transform .3s;
  }
  .paypalknopf:hover { background: #856421; transform: translateY(-2px); }

  /* ============ Fuß ============ */

  footer.fuss { background: rgba(255,255,255,0.95); border-top: 1px solid var(--linie); padding: 44px 0 30px; }
  .fuss-innen { max-width: var(--mass); margin: 0 auto; padding: 0 24px; }
  .fuss-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
  .fuss h4 { font-family: var(--serif); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lila); margin: 0 0 13px; }
  .fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .fuss a { color: var(--tinte-2); text-decoration: none; font-size: 15px; cursor: pointer; }
  .fuss a:hover { color: var(--lila); }
  .fuss .wort { font-size: 15px; color: var(--tinte-2); max-width: 34ch; margin: 0; }

  /* Das goldene Zeichen unter dem Schriftzug in der Fusszeile. */
  .fuss-marke { display: flex; flex-direction: column; align-items: flex-start; }
  .fuss-zeichen {
    display: block;
    width: auto; height: auto;
    max-width: 84px; max-height: 30px;
    margin: 14px 0 0;
    object-fit: contain;
    opacity: 0.92;
  }

  @media (max-width: 700px) {
    .fuss-zeichen { max-width: 72px; max-height: 26px; margin-top: 12px; }
  }
  .fuss-schluss { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 13.5px; color: var(--leiser); display: flex; flex-wrap: wrap; gap: 8px 22px; }

  /* ============ Spendenhinweis im Artikel ============ */

  /* Der Kasten folgt der Handlungsfarbe, aber nur als zarter Hauch. Der
     Verlauf mischt die Kraftfarbe mit Weiss, damit der Text ruhig bleibt. */
  .artikelspende {
    margin: 38px 0 8px;
    border: 1px solid color-mix(in srgb, var(--kraft-2) 34%, #FFFFFF);
    background: linear-gradient(150deg,
      color-mix(in srgb, var(--kraft-2) 9%, #FFFFFF),
      color-mix(in srgb, var(--kraft-3) 6%, #FFFFFF) 92%);
    padding: 26px 28px;
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 20px;
    align-items: center;
  }

  .artikelspende .herz {
    width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid color-mix(in srgb, var(--kraft-2) 42%, #FFFFFF);
    color: var(--kraft-2);
    box-shadow: 0 8px 20px -14px var(--kraft-schein);
  }
  .artikelspende h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 4px; }
  .artikelspende p { font-size: 15.5px; line-height: 1.6; color: var(--tinte-2); margin: 0; max-width: 52ch; }

  /* ============ Vorheriger und nächster Beitrag ============ */

  .artikelsprung { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

  .sprungfeld {
    background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten);
    padding: 20px 22px; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color .35s, transform .35s, box-shadow .35s;
  }
  .sprungfeld:hover { border-color: var(--flieder); transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(52,36,72,0.6); }
  .sprungfeld.weiter { text-align: right; align-items: flex-end; }

  .sprungmarke {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lila);
  }
  .sprungfeld h4 { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.24; margin: 0; }
  .sprungfeld:hover h4 { color: var(--lila); }
  .sprungfeld .kleinkat { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leiser); }

  /* ============ Kommentare ============ */

  .kommentarkopf { display: flex; align-items: baseline; gap: 14px; padding: 22px 0 14px; border-bottom: 2px solid var(--lila); margin-bottom: 6px; }
  .kommentarkopf h3 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: 0.05em; color: var(--tinte); }
  .kommentarkopf .zaehler { margin-left: auto; font-size: 12.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--leiser); }

  .kommentar { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--linie); }
  .kommentar.antwort { margin-left: 52px; border-left: 2px solid var(--lila-blass); padding-left: 20px; }

  .kavatar {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--serif); font-size: 23px; font-weight: 600; color: #FFFFFF;
    background: linear-gradient(150deg, var(--lila-hell), var(--lila));
  }
  .kavatar.rosi { background: linear-gradient(150deg, var(--gold-2), var(--gold)); }

  .kkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 5px; }
  .kname { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--tinte); }
  .kmarke { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); background: var(--gold-blass); border: 1px solid var(--gold-2); padding: 2px 9px; border-radius: 999px; }
  .kzeit { font-size: 12.5px; color: var(--leiser); letter-spacing: 0.04em; }
  .kommentar p { font-size: 16px; line-height: 1.7; color: var(--tinte-2); margin: 0 0 9px; max-width: 62ch; }

  .kaktion { display: flex; gap: 18px; align-items: center; }
  .kaktion a { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lila); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
  .kaktion a:hover { color: var(--gold); }

  .kformular { padding: 26px 0 8px; }
  .kformular h4 { font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 0 0 6px; }
  .kformular .vorwort { font-size: 15px; color: var(--leise); margin: 0 0 18px; }

  .kformular textarea {
    width: 100%; font-family: var(--sans); font-size: 16px; line-height: 1.65; padding: 14px 16px;
    border: 1px solid var(--linie-2); background: #FFFFFF; color: var(--tinte); resize: vertical; min-height: 128px;
  }
  .kformular textarea:focus, .kzeile input:focus { outline: none; border-color: var(--lila); }

  .kzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
  .kzeile input { width: 100%; font-family: var(--sans); font-size: 15.5px; padding: 12px 14px; border: 1px solid var(--linie-2); background: #FFFFFF; color: var(--tinte); }

  .khaken { display: flex; align-items: flex-start; gap: 11px; margin: 16px 0 4px; }
  .khaken input { width: 19px; height: 19px; margin: 3px 0 0; accent-color: var(--lila); flex: none; }
  .khaken label { font-size: 14.5px; line-height: 1.6; color: var(--tinte-2); }
  .khaken label a { color: var(--lila); }

  .kfuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 18px; }
  .kknopf {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: #FFFFFF; background: linear-gradient(100deg, var(--nacht-2), var(--lila));
    border: 1px solid var(--lila-tief); padding: 13px 26px; cursor: pointer;
    transition: filter .3s, transform .3s;
  }
  .kknopf:hover { filter: brightness(1.18); transform: translateY(-2px); }
  .kknopf:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
  .khinweis { font-size: 13px; color: var(--leiser); }

  /* ============ Hamburger ============ */

  .burger {
    display: none;
    width: 46px; height: 46px; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--flieder);
    background: linear-gradient(150deg, var(--nacht-2), var(--lila));
    cursor: pointer; flex: none; padding: 0;
  }
  .burger span { display: block; width: 20px; height: 1.8px; background: #FFFFFF; border-radius: 2px; transition: transform .3s, opacity .25s; }
  .burger span + span { margin-top: 5px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

  .burgerraum {
    position: fixed; inset: 0; z-index: 60; display: none;
    overflow-y: auto; padding: 84px 26px 46px;
    background:
      radial-gradient(90% 60% at 18% 4%, var(--glut-1), transparent 62%),
      radial-gradient(80% 60% at 86% 96%, var(--glut-2), transparent 58%),
      linear-gradient(168deg, var(--burg-1), var(--burg-2));
  }
  .burgerraum::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      radial-gradient(1.6px 1.6px at 12% 16%, rgba(255,255,255,0.8), transparent),
      radial-gradient(1.2px 1.2px at 30% 62%, rgba(226,208,255,0.7), transparent),
      radial-gradient(1.8px 1.8px at 48% 12%, rgba(255,248,224,0.8), transparent),
      radial-gradient(1.2px 1.2px at 64% 74%, rgba(255,255,255,0.55), transparent),
      radial-gradient(1.6px 1.6px at 80% 28%, rgba(226,208,255,0.7), transparent),
      radial-gradient(1.3px 1.3px at 92% 56%, rgba(255,250,232,0.65), transparent),
      radial-gradient(1.4px 1.4px at 22% 88%, rgba(255,255,255,0.6), transparent);
    animation: funkeln 6s ease-in-out infinite alternate;
  }
  body.menue-offen .burgerraum { display: block; }
  body.menue-offen { overflow: hidden; }

  .burgerzu {
    position: absolute; top: 22px; right: 22px; z-index: 3;
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid rgba(226,208,255,0.4);
    background: rgba(255,255,255,0.08); color: #FFFFFF; cursor: pointer;
  }
  .burgerzu:hover { background: rgba(255,255,255,0.18); }

  .burgerliste { position: relative; z-index: 2; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; }
  .burgerliste a {
    font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.2;
    color: #F2EBFF; text-decoration: none; padding: 15px 4px;
    border-bottom: 1px solid rgba(226,208,255,0.16);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    transition: color .3s, padding-left .3s;
  }
  .burgerliste a:hover { color: #EFD79B; padding-left: 10px; }
  .burgerliste a.gold { color: #EFD79B; }
  .burgerliste a small { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(226,214,255,0.5); }

  .burgersuche {
    position: relative; z-index: 2; max-width: 460px; margin: 26px auto 0; display: flex;
    border: 1px solid rgba(226,208,255,0.35); background: rgba(255,255,255,0.07);
    border-radius: 999px; overflow: hidden;
  }
  .burgersuche input { flex: 1; font-family: var(--sans); font-size: 15.5px; border: 0; background: transparent; color: #FFFFFF; padding: 13px 20px; outline: none; }
  .burgersuche input::placeholder { color: rgba(226,214,255,0.5); }

  .burgerfuss { position: relative; z-index: 2; max-width: 460px; margin: 28px auto 0; display: flex; gap: 12px; }
  .burgerfuss a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    text-decoration: none; padding: 13px 12px; border-radius: 999px;
    color: #FFFFFF; background: rgba(255,255,255,0.09); border: 1px solid rgba(226,208,255,0.3);
  }

  /* ============ Die beiden kraftvollen Knöpfe im Handymenü ============

     Der Unterstützen-Knopf und die Lupe waren schlicht golden. Neben dem
     dunklen Nachthimmel des Menüs wirkte das flach. Jetzt tragen beide
     denselben Verlauf von tiefem Lila nach Pink, dazu einen warmen Schein
     darunter und einen hellen Streifen, der in Ruhe von links nach rechts
     darüberzieht. Der Streifen läuft kurz und legt dann eine lange Pause
     ein, damit er edel bleibt und nicht zappelt.

     Die Farben stehen als eigene Werte weiter unten bei jedem Farbschema,
     damit der Knopf in Blau, Grün, Braun und Petrol ebenso stimmig ist. */

  .kraftknopf,
  .burgerfuss a.kraftknopf,
  .burgersuche button.kraftknopf {
    position: relative;
    overflow: hidden;
    border: 0;
    color: #FFFFFF;
    background: linear-gradient(102deg, var(--kraft-1) 0%, var(--kraft-2) 48%, var(--kraft-3) 100%);
    box-shadow:
      0 10px 26px -14px var(--kraft-schein),
      inset 0 1px 0 rgba(255,255,255,0.22);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, filter .35s;
  }

  /* Der helle Streifen. Er zieht über die ganze Fläche, auch über die
     Schrift. Genau das lässt ihn wie einen Lichtreflex aussehen. */
  .kraftknopf::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 38%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.42) 46%,
      rgba(255,255,255,0.62) 52%,
      rgba(255,255,255,0) 100%);
    transform: translateX(-160%) skewX(-18deg);
    animation: kraftglanz 5.2s cubic-bezier(.35,0,.25,1) infinite;
  }

  @keyframes kraftglanz {
    0%   { transform: translateX(-160%) skewX(-18deg); }
    16%  { transform: translateX(330%)  skewX(-18deg); }
    100% { transform: translateX(330%)  skewX(-18deg); }
  }

  .kraftknopf:hover,
  .kraftknopf:focus-visible {
    transform: translateY(-2px);
    filter: saturate(1.12) brightness(1.08);
    box-shadow:
      0 16px 34px -14px var(--kraft-schein),
      inset 0 1px 0 rgba(255,255,255,0.3);
  }

  .burgerfuss a.kraftknopf { border: 0; }

  .burgersuche button.kraftknopf {
    padding: 0 22px;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 0;
  }

  /* Wer die Bewegung abgeschaltet hat, bekommt den Verlauf ohne den
     laufenden Streifen. Der Knopf bleibt kräftig, er ist nur still. */
  body.ruhig .kraftknopf::after { animation: none; opacity: 0; }

  @media (prefers-reduced-motion: reduce) {
    .kraftknopf::after { animation: none; opacity: 0; }
    .kraftknopf { transition: none; }
  }





  /* ============ Farbvarianten ============ */
  body.farbe-1 {
    --glut-1: rgba(126,84,178,0.55); --glut-2: rgba(72,52,140,0.50); --tief: #1A1030; --tiefrand: #3A2660;
    --burg-1: #2C1B4E; --burg-2: #150C28; --dunkelgrund: #171030;
    --nacht: #241640; --nacht-2: #33215A;
    --lila: #4C2F7C; --lila-tief: #351E5C; --lila-hell: #8B6BB4; --lila-blass: #F0EAF7; --flieder: #C3A9DC;
    --gold: #A07B2B; --gold-2: #C9A455; --gold-blass: #F7EEDA;
    --tinte: #2A2334; --tinte-2: #4E4560; --leise: #776C8C; --leiser: #9A90AC;
    --linie: #E8E1EE; --linie-2: #D6CBE2; --karte-2: #FAF7FB; --rose-blass: #FAEDF2;
    --kraft-1: #6B28E0; --kraft-2: #8A4BF1; --kraft-3: #A987FA; --kraft-schein: rgba(124,58,237,0.75);
  }
  body.farbe-2 {
    --glut-1: rgba(72,116,190,0.55); --glut-2: rgba(38,66,126,0.50); --tief: #0B1428; --tiefrand: #26375C;
    --burg-1: #152546; --burg-2: #0A1224; --dunkelgrund: #0D1729;
    --nacht: #111C36; --nacht-2: #1B2C51;
    --lila: #2A4676; --lila-tief: #1E3355; --lila-hell: #6E8CBE; --lila-blass: #E9EFF8; --flieder: #A8C0E0;
    --gold: #9A7526; --gold-2: #C29B48; --gold-blass: #F6EDD8;
    --tinte: #1E2733; --tinte-2: #41505F; --leise: #69798C; --leiser: #93A2B2;
    --linie: #E1E7EF; --linie-2: #C7D2E0; --karte-2: #F7F9FC; --rose-blass: #EAF1F8;
    --kraft-1: #1E3A72; --kraft-2: #2F5FB0; --kraft-3: #5C8FE0; --kraft-schein: rgba(62,118,206,0.70);
  }
  body.farbe-3 {
    --glut-1: rgba(86,150,108,0.52); --glut-2: rgba(44,94,64,0.50); --tief: #0D1C14; --tiefrand: #274532;
    --burg-1: #16301F; --burg-2: #0A1810; --dunkelgrund: #0F2016;
    --nacht: #14261C; --nacht-2: #1E3A2A;
    --lila: #2F5A40; --lila-tief: #22432F; --lila-hell: #6E9C7E; --lila-blass: #E9F2EC; --flieder: #A9CCB6;
    --gold: #94742A; --gold-2: #BC9748; --gold-blass: #F5EDDA;
    --tinte: #1F2A24; --tinte-2: #425049; --leise: #6B7C72; --leiser: #95A49B;
    --linie: #E2EAE4; --linie-2: #C6D5CB; --karte-2: #F7FAF8; --rose-blass: #EDF4EF;
    --kraft-1: #1F4A33; --kraft-2: #2E7A55; --kraft-3: #63B487; --kraft-schein: rgba(50,132,92,0.68);
  }
  body.farbe-4 {
    --glut-1: rgba(186,132,74,0.50); --glut-2: rgba(122,74,36,0.50); --tief: #22140C; --tiefrand: #4A2E1C;
    --burg-1: #3A2214; --burg-2: #1A0F09; --dunkelgrund: #241609;
    --nacht: #2E1B12; --nacht-2: #46291B;
    --lila: #6D4322; --lila-tief: #4F301A; --lila-hell: #B08256; --lila-blass: #F8EFE6; --flieder: #DEBE9C;
    --gold: #8A6A20; --gold-2: #B8913D; --gold-blass: #F6EEDB;
    --tinte: #2C231D; --tinte-2: #544840; --leise: #807164; --leiser: #A6968A;
    --linie: #EDE4DA; --linie-2: #DCCDBE; --karte-2: #FBF8F4; --rose-blass: #F8EEE4;
    --kraft-1: #5A3318; --kraft-2: #96562A; --kraft-3: #D2904F; --kraft-schein: rgba(166,100,48,0.68);
  }
  body.farbe-5 {
    --glut-1: rgba(72,150,158,0.50); --glut-2: rgba(28,84,96,0.50); --tief: #08181B; --tiefrand: #1E4248;
    --burg-1: #123238; --burg-2: #07161A; --dunkelgrund: #0A1D20;
    --nacht: #0E2529; --nacht-2: #153A40;
    --lila: #1F5A62; --lila-tief: #154249; --lila-hell: #5A9AA2; --lila-blass: #E6F2F3; --flieder: #A0CBD0;
    --gold: #96762A; --gold-2: #BE9A48; --gold-blass: #F6EEDA;
    --tinte: #1B2A2C; --tinte-2: #3C5054; --leise: #63797D; --leiser: #8FA3A7;
    --linie: #DFEAEB; --linie-2: #C2D5D7; --karte-2: #F6FAFA; --rose-blass: #E9F4F2;
    --kraft-1: #0F3B42; --kraft-2: #1B6E78; --kraft-3: #48AEB6; --kraft-schein: rgba(38,142,152,0.68);
  }

  body.farbe-6 {
    --glut-1: rgba(165,100,119,0.52); --glut-2: rgba(135,63,84,0.50); --tief: #361720; --tiefrand: #612E3D;
    --burg-1: #4E232F; --burg-2: #2C1119; --dunkelgrund: #361720;
    --nacht: #431E29; --nacht-2: #5B2938;
    --lila: #79394C; --lila-tief: #5A2635; --lila-hell: #AF7889; --lila-blass: #F9F1F3; --flieder: #D9B5C0;
    --gold: #9E7A2A; --gold-2: #C5A052; --gold-blass: #F7EEDA;
    --tinte: #38292D; --tinte-2: #654E55; --leise: #8E767D; --leiser: #AE989F;
    --linie: #F1E9EC; --linie-2: #E3D4D8; --karte-2: #FDFCFC; --rose-blass: #F9F5F7;
    --kraft-1: #7C2741; --kraft-2: #B2385D; --kraft-3: #D37390; --kraft-schein: rgba(176,59,94,0.70);
  }
  body.farbe-7 {
    --glut-1: rgba(171,87,99,0.52); --glut-2: rgba(140,52,64,0.50); --tief: #2E0F13; --tiefrand: #5C242B;
    --burg-1: #48191F; --burg-2: #230B0E; --dunkelgrund: #2E0F13;
    --nacht: #3C151A; --nacht-2: #561F26;
    --lila: #762D37; --lila-tief: #551B23; --lila-hell: #B16871; --lila-blass: #F6E5E7; --flieder: #D9A6AD;
    --gold: #9E7A2A; --gold-2: #C5A052; --gold-blass: #F7EEDA;
    --tinte: #312123; --tinte-2: #5F4548; --leise: #896C70; --leiser: #AA8D91;
    --linie: #EDDEE0; --linie-2: #DFC8CB; --karte-2: #FAF5F5; --rose-blass: #F5EAEC;
    --kraft-1: #79202C; --kraft-2: #B12F40; --kraft-3: #D76A79; --kraft-schein: rgba(175,49,66,0.70);
  }
  body.farbe-8 {
    --glut-1: rgba(147,129,115,0.52); --glut-2: rgba(116,96,80,0.50); --tief: #2B231D; --tiefrand: #514339;
    --burg-1: #40342B; --burg-2: #221B16; --dunkelgrund: #2B231D;
    --nacht: #372D25; --nacht-2: #4C3E34;
    --lila: #665547; --lila-tief: #4A3C31; --lila-hell: #9F8F83; --lila-blass: #F5F2F0; --flieder: #CEC3BB;
    --gold: #9E7A2A; --gold-2: #C5A052; --gold-blass: #F7EEDA;
    --tinte: #322D2A; --tinte-2: #5C5651; --leise: #867F79; --leiser: #A6A09B;
    --linie: #EDEAE8; --linie-2: #DDD8D5; --karte-2: #FDFCFC; --rose-blass: #F6F5F3;
    --kraft-1: #523A28; --kraft-2: #7B583D; --kraft-3: #B28462; --kraft-schein: rgba(121,88,62,0.70);
  }
  body.farbe-9 {
    --glut-1: rgba(122,142,156,0.52); --glut-2: rgba(85,110,128,0.50); --tief: #2C3A44; --tiefrand: #485C6B;
    --burg-1: #3A4D5A; --burg-2: #25323C; --dunkelgrund: #2C3A44;
    --nacht: #344550; --nacht-2: #435766;
    --lila: #566F80; --lila-tief: #3F5564; --lila-hell: #99A8B2; --lila-blass: #FCFDFD; --flieder: #D2DADF;
    --gold: #9E7A2A; --gold-2: #C5A052; --gold-blass: #F7EEDA;
    --tinte: #3C4348; --tinte-2: #646C73; --leise: #8E959A; --leiser: #B0B6BA;
    --linie: #FCFDFD; --linie-2: #EBEEEF; --karte-2: #FCFDFD; --rose-blass: #FCFDFD;
    --kraft-1: #274D68; --kraft-2: #376E95; --kraft-3: #6AA1C8; --kraft-schein: rgba(57,109,147,0.70);
  }
  body.farbe-10 {
    --glut-1: rgba(147,111,160,0.52); --glut-2: rgba(116,73,131,0.50); --tief: #35203C; --tiefrand: #593965;
    --burg-1: #492D53; --burg-2: #2C1933; --dunkelgrund: #35203C;
    --nacht: #402749; --nacht-2: #54345F;
    --lila: #6E467C; --lila-tief: #52315E; --lila-hell: #A588AF; --lila-blass: #FDFCFD; --flieder: #D4C3DB;
    --gold: #9E7A2A; --gold-2: #C5A052; --gold-blass: #F7EEDA;
    --tinte: #3B313F; --tinte-2: #65576B; --leise: #8E8192; --leiser: #AFA3B3;
    --linie: #F6F3F7; --linie-2: #E5DEE8; --karte-2: #FDFCFD; --rose-blass: #FDFCFD;
    --kraft-1: #69317D; --kraft-2: #9445B0; --kraft-3: #BE89D1; --kraft-schein: rgba(146,71,174,0.70);
  }
  body.farbe-11 {
    --glut-1: rgba(112,154,121,0.52); --glut-2: rgba(76,124,86,0.50); --tief: #1E3322; --tiefrand: #395B40;
    --burg-1: #2C4932; --burg-2: #182A1C; --dunkelgrund: #1E3322;
    --nacht: #26402B; --nacht-2: #34563B;
    --lila: #46714F; --lila-tief: #315438; --lila-hell: #85A88C; --lila-blass: #F5F9F6; --flieder: #BED5C3;
    --gold: #9E7A2A; --gold-2: #C5A052; --gold-blass: #F7EEDA;
    --tinte: #2E3830; --tinte-2: #546357; --leise: #7D8C80; --leiser: #9FADA2;
    --linie: #EDF2EE; --linie-2: #D9E3DB; --karte-2: #FCFDFC; --rose-blass: #F9FBF9;
    --kraft-1: #1F5129; --kraft-2: #328142; --kraft-3: #4FBA64; --kraft-schein: rgba(52,127,67,0.70);
  }
  body.farbe-12 {
    --glut-1: rgba(142,133,152,0.52); --glut-2: rgba(108,96,122,0.50); --tief: #3F3748; --tiefrand: #60566C;
    --burg-1: #51475C; --burg-2: #383040; --dunkelgrund: #3F3748;
    --nacht: #494153; --nacht-2: #5B5167;
    --lila: #726580; --lila-tief: #584D65; --lila-hell: #ADA7B4; --lila-blass: #FCFCFD; --flieder: #E0DDE4;
    --gold: #9E7A2A; --gold-2: #C5A052; --gold-blass: #F7EEDA;
    --tinte: #4A464E; --tinte-2: #726E78; --leise: #9B98A0; --leiser: #BDBABF;
    --linie: #FCFCFD; --linie-2: #F5F4F6; --karte-2: #FCFCFD; --rose-blass: #FCFCFD;
    --kraft-1: #5A4077; --kraft-2: #7D59A6; --kraft-3: #B19CC9; --kraft-schein: rgba(125,92,163,0.70);
  }
  body.farbe-13 {
    --glut-1: rgba(98,101,152,0.52); --glut-2: rgba(64,68,120,0.50); --tief: #0E0F1B; --tiefrand: #262845;
    --burg-1: #1A1C32; --burg-2: #080911; --dunkelgrund: #0E0F1B;
    --nacht: #151628; --nacht-2: #21233F;
    --lila: #32355D; --lila-tief: #1E213D; --lila-hell: #686B9C; --lila-blass: #DADBEC; --flieder: #A2A4C9;
    --gold: #9E7A2A; --gold-2: #C5A052; --gold-blass: #F7EEDA;
    --tinte: #1B1B23; --tinte-2: #40414F; --leise: #676879; --leiser: #86889C;
    --linie: #D5D6E2; --linie-2: #C0C1D3; --karte-2: #E9EAF1; --rose-blass: #E0E1EB;
    --kraft-1: #242861; --kraft-2: #373D95; --kraft-3: #6A70C8; --kraft-schein: rgba(57,63,147,0.70);
  }
  body.farbe-14 {
    --glut-1: rgba(161,99,149,0.52); --glut-2: rgba(131,63,117,0.50); --tief: #2E1529; --tiefrand: #582C50;
    --burg-1: #46203E; --burg-2: #240F20; --dunkelgrund: #2E1529;
    --nacht: #3B1C35; --nacht-2: #53274A;
    --lila: #713765; --lila-tief: #512448; --lila-hell: #AA749F; --lila-blass: #F5EAF3; --flieder: #D4AFCD;
    --gold: #9E7A2A; --gold-2: #C5A052; --gold-blass: #F7EEDA;
    --tinte: #32252F; --tinte-2: #5E4A5A; --leise: #887284; --leiser: #A993A5;
    --linie: #EDE3EB; --linie-2: #DFCEDB; --karte-2: #FBF9FB; --rose-blass: #F6EFF4;
    --kraft-1: #7A2469; --kraft-2: #B13598; --kraft-3: #D572C1; --kraft-schein: rgba(174,55,151,0.70);
  }

  /* Farbwähler, gehört nicht zur Seite */
  .farbleiste {
    position: fixed; left: 50%; bottom: 170px; transform: translateX(-50%);
    z-index: 90; display: flex; align-items: center; gap: 7px;
    background: rgba(26,16,48,0.94); backdrop-filter: blur(12px);
    border: 1px solid #46306E; border-radius: 999px; padding: 6px 10px;
    box-shadow: 0 18px 40px -18px rgba(20,10,40,0.8);
    max-width: calc(100vw - 24px); overflow-x: auto;
  }
  .farbleiste .titel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(226,214,255,0.62); padding: 0 6px 0 4px; white-space: nowrap; }
  .farbknopf {
    width: 34px; height: 34px; flex: none; border-radius: 50%; cursor: pointer; padding: 0;
    border: 1.5px solid transparent; position: relative;
    transition: border-color .25s, transform .25s;
  }
  .farbknopf:hover { transform: translateY(-2px); }
  .farbknopf[aria-pressed="true"] { border-color: #FFFFFF; box-shadow: 0 0 0 2px rgba(255,255,255,0.28); }
  .farbknopf i { position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; display: block; }

  @media (max-width: 700px) {
    .farbleiste { bottom: 156px; padding: 5px 8px; }
    .farbknopf { width: 28px; height: 28px; }
    .farbleiste .titel { display: none; }
  }


  /* ============ Weiche Rundungen (fest, nicht schaltbar) ============ */

  .suchfeld { border-radius: 999px; overflow: hidden; }
  .suchfeld input { padding-left: 17px; }
  .kachel,
  .willkarte,
  .grossbuehne,
  .infofeld,
  .artikelspende,
  .sprungfeld,
  .aufmacher,
  .uhrkachel { border-radius: 18px; overflow: hidden; }
  .eintrag-bildfeld { border-radius: 14px; }
  /* Aufmacher und Artikelbild fuellen ihren Kasten ganz. Die Rundung sitzt
     am Kasten, nicht am Bild. Sonst blitzt in den Ecken der Verlauf durch. */
  .bildhalter img { border-radius: 10px; }
  .weiterknopf,
  .kknopf,
  .briefkachel button,
  .briefform button,
  .spendenwahl button { border-radius: 999px; }
  .briefkachel input,
  .briefform input,
  .kzeile input { border-radius: 999px; padding-left: 17px; }
  .kformular textarea { border-radius: 18px; }
  .blaettern a, .blaettern span { border-radius: 999px; }
  .sprechblase { border-radius: 14px; }
  .kachelkopf { border-radius: 18px 18px 0 0; }
  .ecke { display: none; }

  /* ============ Zusatzschalter: verbundene Blöcke ============ */

  body.verbunden .willkommen { display: none; }
  body.verbunden .haupt {
    gap: 0;
    background: var(--karte);
    border: 1px solid var(--linie);
    box-shadow: var(--schatten);
    overflow: hidden;
  }
  body.verbunden .haupt > * {
    box-shadow: none;
    border-left: 0; border-right: 0; border-top: 0; border-bottom: 0;
    border-radius: 0;
  }
  body.verbunden .haupt > * + * { border-top: 1px solid var(--linie); }
  body.verbunden .haupt { border-radius: 20px; }
  body.verbunden .haupt > .willkarte { border: 0; }
  body.verbunden .haupt > .willkarte .bildhalter img { max-height: 380px; }
  body.verbunden .haupt > .willkarte .willwort { padding: 26px 28px; }

  /* Die Bildspalten von Gruss und Aufmacher werden zu einer durchgehenden Bahn:
     gleiche Breite, gleicher waagerechter Verlauf, gemeinsame Trennlinie. */
  body.verbunden .haupt > .willkarte,
  body.verbunden .haupt > .aufmacher { grid-template-columns: var(--bildbahn) 1fr; }
  body.verbunden .haupt > .willkarte .willbild,
  body.verbunden .haupt > .aufmacher .aufmacher-bildfeld {
    background: linear-gradient(90deg, var(--lila-blass), var(--gold-blass));
    border-right: 1px solid var(--linie);
    padding: 26px 24px;
  }

  @media (max-width: 900px) {
    body.verbunden .haupt > .willkarte,
    body.verbunden .haupt > .aufmacher { grid-template-columns: 1fr; }
    body.verbunden .haupt > .willkarte .willbild,
    body.verbunden .haupt > .aufmacher .aufmacher-bildfeld {
      border-right: 0; border-bottom: 1px solid var(--linie);
    }
  }

  /* Der Zusatzknopf in der Farbleiste */
  .zusatzwahl { display: flex; gap: 5px; align-items: center; flex: none; }
  .zusatzwahl button {
    font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    color: rgba(232,222,255,0.8); background: transparent; border: 1px solid #46306E;
    border-radius: 999px; padding: 7px 13px; cursor: pointer; white-space: nowrap;
    transition: background .25s, color .25s, border-color .25s;
  }
  .zusatzwahl button[aria-pressed="true"] { background: #EFD79B; color: #241640; border-color: #EFD79B; }

  /* Logo-Varianten, umschaltbar.
     Im Kopf steht immer nur ein einziges Bild. Deshalb wird es hier auch
     immer gezeigt, ganz ohne Koerperklasse. So kann nie ein leerer Platz
     entstehen, wenn eine alte Zahl in der Datenbank steht.
     Das Unendlichkeitszeichen ist gut doppelt so breit wie hoch. Die Breite
     fuehrt, damit es den Kopf nicht auseinanderzieht. */
  .logo-zeichen .lz { display: block; width: auto; height: auto; max-width: 70px; max-height: 44px; object-fit: contain; }

  .logoleiste {
    position: fixed; left: 50%; bottom: 122px; transform: translateX(-50%);
    z-index: 90; display: flex; align-items: center; gap: 6px;
    background: rgba(26,16,48,0.94); backdrop-filter: blur(12px);
    border: 1px solid #46306E; border-radius: 999px; padding: 6px 10px;
    box-shadow: 0 18px 40px -18px rgba(20,10,40,0.8);
    max-width: calc(100vw - 24px); overflow-x: auto;
  }
  .logoleiste .titel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(226,214,255,0.62); padding: 0 6px 0 4px; white-space: nowrap; }
  .logoknopf {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center;
    border-radius: 50%; cursor: pointer; padding: 0;
    border: 1.5px solid transparent;
    background: linear-gradient(148deg, #241640, #4C2F7C 70%);
    transition: border-color .25s, transform .25s;
  }
  .logoknopf img { width: auto; height: auto; max-width: 30px; max-height: 24px; object-fit: contain; display: block; }
  .logoknopf:hover { transform: translateY(-2px); border-color: rgba(226,208,255,0.6); }
  .logoknopf[aria-pressed="true"] { border-color: #EFD79B; box-shadow: 0 0 0 2px rgba(239,215,155,0.3); }

  @media (max-width: 700px) {
    .logoleiste { bottom: 112px; padding: 5px 8px; }
    .logoknopf { width: 32px; height: 32px; }
    .logoknopf img { max-width: 25px; max-height: 20px; }
    .logoleiste .titel { display: none; }
    /* Auf dem Handy bleibt das Zeichen klein, sonst drueckt es den
       Seitennamen an den Rand. */
    .logo-zeichen .lz { max-width: 50px; max-height: 32px; }
  }

  /* Drei gezeichnete Hintergründe, umschaltbar */
  .hintergrund.z2, .hintergrund.z3 { display: none; }
  body.zeichnung-2 .hintergrund.z1, body.zeichnung-3 .hintergrund.z1 { display: none; }
  body.zeichnung-2 .hintergrund.z2 { display: block; }
  body.zeichnung-3 .hintergrund.z3 { display: block; }
  body.zeichnung-2, body.zeichnung-3 { background: var(--dunkelgrund); }
  body.zeichnung-2 .hintergrund::after, body.zeichnung-3 .hintergrund::after {
    background: linear-gradient(180deg, rgba(20,12,40,0.10) 0%, rgba(20,12,40,0.04) 40%, rgba(24,14,48,0.18) 100%);
  }
  body.foto .hintergrund.z2, body.foto .hintergrund.z3 { display: none; }


  /* Sternschnuppen bei Nacht und Polar */
  .schnuppe { opacity: 0; animation-name: schnuppe; animation-timing-function: cubic-bezier(.3,.1,.7,.9); animation-iteration-count: infinite; }
  @keyframes schnuppe {
    0%   { transform: translate(0,0) scale(0.7); opacity: 0; }
    3%   { opacity: 0; }
    6%   { opacity: 1; }
    16%  { transform: translate(760px, 320px) scale(1); opacity: 0.9; }
    22%  { transform: translate(1060px, 446px) scale(1); opacity: 0; }
    100% { transform: translate(1060px, 446px); opacity: 0; }
  }

  .aurora-1 { animation: wallen 46s ease-in-out infinite alternate; }
  .aurora-2 { animation: wallen 62s ease-in-out infinite alternate-reverse; }
  .aurora-3 { animation: wallen 80s ease-in-out infinite alternate; }
  @keyframes wallen {
    from { transform: translate3d(-2.5%, 1.5%, 0) scaleY(0.96); }
    to   { transform: translate3d(2.5%, -1.5%, 0) scaleY(1.06); }
  }
  .sterne1 { animation: funkeln 7s ease-in-out infinite alternate; }
  .sterne2 { animation: funkeln 4.5s ease-in-out infinite alternate-reverse; }

  /* ============ Foto-Hintergrund ============ */

  .fotohintergrund {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    display: none;
  }
  body.foto .fotohintergrund { display: block; }
  body.foto .hintergrund { display: none; }


  /* Bei Fotohintergrund bekommt die Kopfleiste etwas mehr Deckkraft */
  body.foto .kopfband { background: rgba(255,255,255,0.97); }
  body.foto footer.fuss { background: rgba(255,255,255,0.97); }

  /* ============ Hintergrundwähler (gehört nicht zur Seite) ============ */

  .hgleiste {
    position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%);
    z-index: 90; display: flex; align-items: center; gap: 6px;
    background: rgba(26,16,48,0.94); backdrop-filter: blur(12px);
    border: 1px solid #46306E; border-radius: 999px; padding: 6px 9px;
    box-shadow: 0 18px 40px -18px rgba(20,10,40,0.8);
    max-width: calc(100vw - 24px); overflow-x: auto;
  }

  .hgleiste .titel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(226,214,255,0.62); padding: 0 6px 0 4px; white-space: nowrap; }

  .hgknopf {
    width: 46px; height: 32px; flex: none; border-radius: 6px; cursor: pointer;
    border: 1.5px solid transparent; padding: 0; overflow: hidden;
    background-size: cover; background-position: center;
    transition: border-color .25s, transform .25s;
  }
  .hgknopf:hover { transform: translateY(-2px); border-color: rgba(226,208,255,0.6); }
  .hgknopf[aria-pressed="true"] { border-color: #EFD79B; box-shadow: 0 0 0 2px rgba(239,215,155,0.3); }

  .hgknopf.aus {
    display: grid; place-items: center;
    background: linear-gradient(150deg, #F6E7C8, #E4DAF0);
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #4C2F7C;
  }
  .hgknopf.aus.dunkel { background: linear-gradient(150deg, #33215A, #1A2350); color: #EFD79B; }


  @media (max-width: 700px) {
    .hgleiste { bottom: 66px; padding: 5px 7px; }
    .hgleiste .titel { display: none; }
    .hgknopf { width: 38px; height: 27px; }
  }

  /* ============ Einfahren ============ */

  .js .fahre { opacity: 0; transform: translateY(22px); }
  .js .fahre.da { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
  .js .fahre.v2.da { transition-delay: .09s; }
  .js .fahre.v3.da { transition-delay: .18s; }

  @media (prefers-reduced-motion: reduce) {
    .js .fahre { opacity: 1 !important; transform: none !important; }
    .wolke-1, .wolke-2, .schwarm, .menueband::before, .uhrkachel::before, .grossbuehne::before,
    .aurora-1, .aurora-2, .aurora-3, .sterne1, .sterne2, .schnuppe { animation: none; }
    .schnuppe { opacity: 0; }
  }

  /* ============ Vorschauleiste (gehört nicht zur Seite) ============ */

  .vorschauleiste {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 90; display: flex; align-items: center; gap: 6px;
    background: rgba(26,16,48,0.94); backdrop-filter: blur(12px);
    border: 1px solid #46306E; border-radius: 999px; padding: 6px 8px;
    box-shadow: 0 18px 40px -18px rgba(20,10,40,0.8);
    max-width: calc(100vw - 24px); overflow-x: auto;
  }
  .vorschauleiste button {
    font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; white-space: nowrap; color: rgba(232,222,255,0.8);
    background: transparent; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer;
    transition: background .25s, color .25s;
  }
  .vorschauleiste button:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; }
  .vorschauleiste button[aria-selected="true"] { background: linear-gradient(100deg, #6B4A9E, #9A72C4); color: #FFFFFF; }
  .vorschauleiste .teiler { width: 1px; height: 22px; background: #46306E; margin: 0 4px; flex: none; }
  .vorschauleiste .geraet[aria-pressed="true"] { background: var(--gold); color: #241640; }

  /* Handyansicht */
  .handybuehne { display: none; padding: 30px 12px 96px; min-height: 100vh; place-items: start center; }
  body.handy .handybuehne { display: grid; }
  body.handy .seite { display: none; }
  body.handy { background: #1E1436; }
  body.handy .hintergrund { display: none; }

  .handyrahmen {
    width: 402px; max-width: 100%; height: 860px; max-height: calc(100vh - 130px);
    background: #12091F; border: 11px solid #0C0618; border-radius: 44px;
    box-shadow: 0 34px 70px -28px rgba(0,0,0,0.85), 0 0 0 1px #3A2660;
    overflow: hidden; position: relative;
  }
  .handyrahmen iframe { width: 100%; height: 100%; border: 0; display: block; background: #EDE7F3; }
  
  .handynote { color: rgba(226,214,255,0.6); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; margin: 0 0 14px; }

  /* ============ Schmale Geräte ============ */

  @media (max-width: 1080px) {
    .feld { grid-template-columns: 1fr; }
    .rand { position: static; }
    .fuss-raster { grid-template-columns: 1fr 1fr; }
    .dreispalt { grid-template-columns: 1fr; }
  }

  @media (max-width: 900px) {
    .willkarte { grid-template-columns: 1fr; }
    .willbild { border-right: 0; border-bottom: 1px solid var(--linie); }
    .bildhalter img { max-height: 400px; }
    .aufmacher { grid-template-columns: 1fr; }
    .aufmacher-bildfeld { border-right: 0; border-bottom: 1px solid var(--linie); }
  }

  @media (max-width: 900px) {
    .burger { display: flex; flex-direction: column; }
    .menueband { display: none; }
    .artikelsprung { grid-template-columns: 1fr; }
    .artikelspende { grid-template-columns: 1fr; gap: 14px; text-align: left; }
    .artikelspende .herz { margin-bottom: 2px; }
  }

  @media (max-width: 700px) {
    body { font-size: 16px; }
    .kopfband-innen { flex-wrap: nowrap; gap: 10px; padding: 12px 16px; }
    .kzeile { grid-template-columns: 1fr; }
    .kommentar.antwort { margin-left: 16px; padding-left: 14px; }
    .kommentar { grid-template-columns: 42px 1fr; gap: 12px; }
    .kavatar { width: 42px; height: 42px; font-size: 19px; }
    .burgerliste a { font-size: 25px; padding: 13px 2px; }
    .logo-wort { font-size: 26px; }
    .kopf-rechts { gap: 8px; }
    .suchfeld { display: none; }
    /* Der Untertitel bleibt auch auf dem Handy stehen. Viele Seiten nutzen ihn
       fuer einen Dank an Unterstuetzer, und der soll ueberall zu lesen sein.
       Damit ein langer Satz nicht den halben Bildschirm frisst: normale
       Schreibweise statt Versalien, enger gesetzt, hoechstens drei Zeilen. */
    .logo { min-width: 0; }
    .logo-unter {
      display: block;
      font-size: 10.5px;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-transform: none;
      margin-top: 6px;
    }
    .menueband-innen { overflow-x: auto; flex-wrap: nowrap; padding: 0 10px; }
    .menueband a { white-space: nowrap; padding: 12px 12px; font-size: 12px; }
    .klapp { display: none !important; }
    .willkommen { padding: 16px 12px 0; }
    .willbild { padding: 18px 14px; }
    .bildhalter img { max-height: 62vh; }
    .willwort { padding: 22px 18px; }
    .willwort h1 { font-size: 26px; }
    .grusstext.namen { font-size: 17.5px; }
    .feld { padding: 18px 12px 44px; gap: 18px; }
    /* Auch auf dem Handy fuellen die Bilder ihren Kasten randlos.
       Ein Innenabstand liesse hier einen hellen Streifen stehen. */
    .aufmacher-bildfeld { padding: 0; }
    .aufmacher-leib { padding: 20px 18px 22px; }
    .listenkachel { padding: 4px 18px 8px; }
    .eintrag { grid-template-columns: 104px 1fr; gap: 14px; padding: 18px 0; }
    .eintrag h3 { font-size: 20px; }
    .eintrag p { font-size: 14.5px; }
    .eintrag-bildfeld { padding: 0; }
    .artikelleib, .textseite { padding: 24px 18px 32px; }
    .artikeltext p { font-size: 17px; }
    .artikelbild-feld { padding: 0; }
    .grossbuehne { padding: 36px 20px 34px; }
    .fuss-innen { padding: 0 18px; }
    .fuss-raster { grid-template-columns: 1fr; gap: 24px; }
  }


  [hidden] { display: none !important; }