/*
  Stellschrauben der Wiese.
  --ar            Breite geteilt durch Höhe des gemalten Teils (wiese-oben.jpg)
  --horizont      Wo im gemalten Teil die Graskante liegt (Anteil von oben)
  --wiese-laenge  Gesamtlänge der Seite in Vielfachen des gemalten Teils
  --himmel        Himmelfarbe am oberen Bildrand
  --wiese         Grasfarbe am unteren Bildrand
  Bei einem neuen Hintergrundbild müssen --ar, --horizont und die Farben
  angepasst werden — ebenso die Werte im Positions-Wähler in admin/edit.php.
*/
:root{
  --ar: 0.707;
  --horizont: 0.3824;   /* Graskante im Gemaelde: y=595 von 1556 */
  /* Wiese 3 ist deutlich länger als die Live-Wiese (dort 4.2) — eine
     Fläche, die sich beim Hinuntergehen öffnen soll, braucht dafür auch
     senkrecht Weg. Bei 8 sind es rund vier Bildschirmhöhen. */
  --wiese-laenge: 8;
  --himmel:#016b94;
  --wiese:#1e4c29;

  /* Die Wiese ist keine Textur mehr, sondern eine Farbfläche — genau wie
     der Himmel. Diese Töne sind aus wiese-oben.jpg gemessen, und zwar nur
     am linken und rechten Bildrand: in der Mitte steht die helle Kuh, die
     würde jeden Mittelwert verfälschen. Die Zahl hinter jedem Ton sagt,
     auf welcher Höhe des gemalten Bildes er sitzt. */
  --gras-horizont:#0f432b;  /* 0.42 — gleich unter der Graskante */
  --gras-dunkel:#0c3c25;    /* 0.48 — dunkelste Stelle */
  --gras-mitte:#1a4428;     /* 0.55–0.75 — der ruhige Hauptton */
  --gras-kante:#204c28;     /* 1.00 — Unterkante des gemalten Teils */
  --gras-tief:#1b4524;      /* weiter unten, frei gewählt */

  --grass-deep:#28421f;
  --ink:#1d2b1c;
  --paper:#fbf6ea;
  --paper-edge:#e7dcc2;

  /* Die Welt ist von Anfang an drei Bildspalten breit und ändert ihre Breite
     nie. Das ist der entscheidende Punkt für das Handy: es muss kein
     seitlicher Scrollstand nachgezogen werden, also kann auch nichts unter
     dem Finger wegrutschen. Gescrollt wird rein nativ, in beide Richtungen. */
  --welt-breite: calc(var(--spalte) * 5);

  --spalte: min(100vw, 560px);
  --bild-h: calc(var(--spalte) / var(--ar));
  --hy: calc(var(--bild-h) * var(--horizont));
}

*{box-sizing:border-box;}
/* Bewusst KEIN scroll-behavior:smooth (anders als in der Live-Wiese):
   sonst wird auch der seitliche Ausgleich beim Breiterwerden der Welt
   weich animiert statt sofort zu greifen — und die Bildspalte rutscht
   unter dem Finger weg. Sprungmarken benutzt die Seite ohnehin nicht. */
html{scroll-behavior:auto;}
/* Die Seite selbst scrollt nicht — das uebernimmt #fenster. */
html,body{height:100%;overflow:hidden;}
body{
  margin:0;padding:0;
  font-family:'Quicksand',sans-serif;color:var(--ink);
  background:var(--gras-tief);   /* Rand beim Überscrollen */
}

/* Himmel oben, Wiese unten — füllt den Platz neben der Bildspalte */
/* Notnagel, siehe .bahn: schiebt die Welt um die beiden linken Spalten nach
   links. Die Prozent-Koordinaten der Blumen bleiben dabei unveraendert, weil
   die Weltbreite selbst gleich bleibt. */
.seite.linke-haelfte-weg{margin-left:calc(var(--spalte) * -2);}

/* Das Sichtfenster: genau so gross wie der Bildschirm, die breite Welt
   scrollt darin. Dadurch ist das DOKUMENT nie breiter als der Bildschirm —
   sonst zoomt Safari am Handy heraus, um die ganze Welt zu zeigen, und
   verkleinert dabei auch die Info-Tafel bis zur Unlesbarkeit. */
.fenster{
  position:fixed; inset:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

.seite{
  position:relative;
  width:var(--welt-breite);
  min-height:100%;
  background:linear-gradient(
    to bottom,
    var(--himmel) 0,
    var(--himmel) calc(var(--hy) - 1px),
    var(--wiese)  calc(var(--hy) + 1px),
    var(--wiese)  100%);
}

/* Gras über die ganze Weltbreite, ab dem Horizont abwärts — reine Farbe,
   kein Bild mehr. Damit gibt es nichts zu wiederholen, also auch keine
   Naht und kein Kachelmuster, und die Fläche kann beliebig weit wachsen,
   ohne dass etwas nachlädt.

   Der Grundverlauf folgt dem Gemälde: oben der dunstige Fernton, auf Höhe
   der Bildunterkante (--bild-h) genau dessen Grün, danach langsam tiefer.
   Dadurch passt die Fläche links und rechts der Bildspalte auf jeder Höhe
   zum gemalten Teil.

   Darüber liegen fünf Fleckenlagen wie Wolkenschatten. Ihre Abstände
   (1123/787, 733/521, 419/311, 971/643, 607/457) sind teilerfremd — weil
   sich diese Zahlen nicht kürzen lassen, kehrt das Gesamtbild erst nach
   Hunderttausenden Pixeln wieder. Es gibt also Struktur, aber keinen
   Rhythmus, den das Auge fassen kann. */
.boden{
  position:absolute;
  left:0; right:0; top:var(--hy); bottom:0;
  /* Zwei Lagen, und die Reihenfolge ist wichtig:
     UNTEN der senkrechte Verlauf. Er dunkelt unter der Graskante nach, genau
     wie das Gemaelde — daran haengt der nahtlose Anschluss. Er darf nie durch
     eine Kachel ersetzt werden; genau daran ist ein erster Versuch gescheitert.
     DARUEBER eine gekachelte Wolkenlage als Graubild um 128 herum, mit
     "overlay" eingemischt. Wo das Grau genau 128 ist, bleibt der Verlauf
     unangetastet; heller und dunkler hellt auf und dunkelt ab.
     Die Lage ist rundum passend gebaut (im Frequenzraum aus Wellen mit
     ganzzahliger Periode) — es gibt keine Kachelkanten. Erneuern mit
     _wiese-3/gras-wolken-bauen.py.

     ACHTUNG: Das Gemaelde hat diesen Untergrund EINGEBACKEN. Aendert sich hier
     die Wolkenstaerke, die Kachelgroesse oder der Verlauf, passt das Gemaelde
     nicht mehr und muss neu angeglichen werden (Vorlagen in
     _wiese-3/bildbearbeitung/). */
  background-image:
    url('../gras-wolken.webp?v=2643f459'),
    linear-gradient(to bottom,
      var(--gras-horizont) 0,
      var(--gras-dunkel) calc(var(--bild-h) * 0.098),
      var(--gras-mitte)  calc(var(--bild-h) * 0.168),
      var(--gras-mitte)  calc(var(--bild-h) * 0.368),
      var(--gras-kante)  calc(var(--bild-h) * 0.618),
      var(--gras-tief)   calc(var(--bild-h) * 2.6));
  background-size: var(--spalte) var(--spalte), 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: overlay, normal;
}

/* Der alte, nur spaltenbreite Grasstreifen ist damit überflüssig geworden. */
.gras{display:none;}

/* Die Welt ist fuenf Bildspalten breit: zwei links der Kuh, die Bildspalte,
   zwei rechts. Beim Laden muss deshalb seitlich zur Kuh gestellt werden.
   Das macht JS genau einmal — und prueft nach, ob es geklappt hat. Falls
   nicht (manche Handy-Browser lassen das nicht zu), bekommt .seite die
   Klasse "linke-haelfte-weg": dann faellt der linke Teil weg und die Kuh
   steht wieder buendig am Start. Lieber zwei Spalten weniger als eine
   Seite, die ohne Kuh aufmacht. */
.bahn{
  position:relative;
  width:var(--spalte);
  margin:0 0 0 calc(var(--spalte) * 2);
  height:calc(var(--bild-h) * var(--wiese-laenge));
}
.oben{position:absolute;left:0;top:0;width:100%;height:auto;display:block;user-select:none;}

/* ---------- Kuh: Maul und Wölkchen ---------- */
.maul{
  position:absolute;left:17.188%;top:calc(var(--bild-h) * 0.33805);
  width:19.062%;height:auto;opacity:0;z-index:3;
}
.maul.sichtbar{opacity:1;}

.wolke{
  position:absolute;height:auto;opacity:0;z-index:3;
  transition:opacity .22s ease;will-change:transform,opacity;
}
.wolke.da{opacity:1;}
.wolke.steigt{
  transition:transform var(--steigzeit,6s) cubic-bezier(.25,.55,.35,1),
             opacity   var(--steigzeit,6s) ease-in;
  transform:translate(26%, -340%) scale(1.10);
  opacity:0;
}
/* Aufstieg und Drehung getrennt: die Hülle schwebt, das Bild dreht sich gleichmäßig */
.wolke-huelle img{
  position:relative;          /* muss im Fluss bleiben, sonst hat die Hülle keine Höhe */
  display:block;width:100%;height:auto;
  transform-origin:50% 50%;
  transition:transform var(--steigzeit,6s) linear;
}
.wolke-huelle.steigt img{transform:rotate(-90deg);}   /* LIEBE steht am Ende waagerecht */

#wolkeKlein {left:81.562%;top:calc(var(--bild-h) * 0.23730);width:3.562%;}
#wolkeMittel{left:81.688%;top:calc(var(--bild-h) * 0.22890);width:5.625%;}
#wolkeGross {left:81.500%;top:calc(var(--bild-h) * 0.22271);width:7.187%;--steigzeit:6s;}

/* ---------- Sonne: steht still, berührt die Kuh nicht ---------- */
.sonne{
  position:absolute;left:-3%;top:calc(var(--bild-h) * 0.005);
  width:26%;height:auto;z-index:6;pointer-events:none;
}
/* Antippbare Fläche genau über der Sonne — Maße müssen zu .sonne passen. */
.sonne-taste{
  position:absolute;left:-3%;top:calc(var(--bild-h) * 0.005);
  width:26%;aspect-ratio:131/134;
  background:none;border:none;padding:0;margin:0;z-index:6;
  cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;
  transition:filter .45s ease;
}
.sonne-taste:focus-visible{outline:3px solid #fff;outline-offset:4px;}
.sonne-taste.leuchtet{
  filter:drop-shadow(0 0 16px rgba(255,236,150,.95)) drop-shadow(0 0 38px rgba(255,214,90,.65));
}

/* ---------- Lichtstrahl ---------- */
.strahlen{
  position:absolute;left:0;top:0;width:100%;height:100%;
  z-index:4;pointer-events:none;opacity:0;transition:opacity .45s ease;
}
.strahlen.an{opacity:1;}

/* ---------- Deko: Beete und Schilder ----------
   Landschaft, kein Angebot: nicht antippbar, kein Zeiger, keine Tafel.
   Liegt hinter den Blumen (z-index 4 gegen deren 5) und steht mit der
   Unterkante auf ihrem Punkt — so wie Dinge eben auf dem Boden stehen. */
.deko{
  position:absolute;
  transform:translate(-50%,-100%);
  pointer-events:none;
  z-index:4;
  user-select:none;
}
.deko img{width:100%;height:auto;display:block;}

/* Deko, die etwas zu sagen hat — bisher nur die Etsy-Wolke. Sie ist eine
   richtige Schaltflaeche, damit man auch mit der Tastatur hinkommt. */
.deko.antippbar{
  pointer-events:auto; cursor:pointer;
  background:none; border:none; padding:0; margin:0;
  line-height:0; overflow:visible;
  transition:transform .25s ease, filter .25s ease;
  transform-origin:50% 100%;
}
.deko.antippbar:hover,
.deko.antippbar:focus-visible,
.deko.antippbar.leuchtet{
  transform:translate(-50%,-100%) translateY(-4px) scale(1.04);
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.28));
}

/* Die Tropfen fallen aus dem Element heraus, nicht ueber die ganze Wiese.
   Sie haengen IM Element, damit sie dort tropfen, wo die Wolke gerade steht —
   auch nachdem Thomas sie im Admin verschoben hat. */
.tropfen{
  position:absolute; top:78%; width:3px; height:12px;
  border-radius:60% 60% 50% 50% / 40% 40% 70% 70%;
  background:linear-gradient(to bottom, rgba(120,170,225,.2), rgba(90,145,210,.95));
  pointer-events:none;
  animation:tropfenFallen 1.9s ease-in forwards;
}
@keyframes tropfenFallen{
  0%  {transform:translateY(0)    scaleY(.6); opacity:0;}
  12% {opacity:.95;}
  85% {opacity:.85;}
  100%{transform:translateY(330%) scaleY(1.25); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .tropfen{animation:none; opacity:0;}
}
.deko img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

/* ---------- Blumen ---------- */
/* --schimmer (0 bis 1) kommt aus der Aufmerksamkeit: wie oft wurde die Blume
   angeschaut, wie oft ins Herz geschlossen. Bewusst am unteren Rand des
   Sichtbaren gehalten — das kraeftige Aufleuchten ist der ANGETIPPTEN Blume
   vorbehalten (.leuchtet), sonst liessen sich beide nicht unterscheiden. */
.flower-spot{
  --schimmer:0;
  position:absolute;
  background:none;border:none;padding:0;margin:0;
  transform:translate(-50%,-50%);
  cursor:pointer;z-index:5;
  -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))
         drop-shadow(0 0 calc(var(--schimmer) * 14px)
                     rgba(255, 238, 170, calc(var(--schimmer) * 0.45)));
  transition:filter .8s ease, transform .3s ease;
}
.flower-spot svg, .flower-spot img{
  display:block;width:100%;height:auto;overflow:visible;
}
.flower-spot:focus-visible{outline:3px solid #fff;outline-offset:6px;border-radius:50%;}
.flower-spot.leuchtet{
  filter:drop-shadow(0 0 14px rgba(255,236,150,.95))
         drop-shadow(0 0 34px rgba(255,214,90,.6)) brightness(1.12);
}
.flower-spot:hover:not(.leuchtet){transform:translate(-50%,-50%) scale(1.06);}

.flower-tooltip{
  position:absolute;left:50%;bottom:100%;transform:translate(-50%,-6px);
  background:var(--paper);color:var(--ink);
  border:1px solid var(--paper-edge);
  padding:5px 11px;border-radius:9px;white-space:nowrap;
  font-weight:700;font-size:13px;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.flower-spot:hover .flower-tooltip,
.flower-spot:focus-visible .flower-tooltip{opacity:1;}
.flower-spot.leuchtet .flower-tooltip{opacity:0;}

/* ---------- Tafel ---------- */
.karte{
  position:absolute;z-index:8;width:max-content;max-width:min(300px,80%);
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;
  background:var(--paper);border:1px solid var(--paper-edge);border-radius:13px;
  padding:13px 14px;box-shadow:0 10px 28px rgba(0,0,0,.45);
  opacity:0;transform:translateY(6px) scale(.96);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.karte.sichtbar{opacity:1;transform:none;pointer-events:auto;}
.karte-inhalt{grid-column:1;min-width:0;}
.karte-bild{grid-column:2;grid-row:1 / -1;width:clamp(74px,26vw,108px);flex-shrink:0;}
.karte-bild svg,.karte-bild img{display:block;width:100%;height:auto;object-fit:contain;}

/* Nur im Sonnen-Fenster: eine Treppe, die mit jeder Stufe heller wird —
   von blassem Licht bis zur strahlenden letzten Stufe. */
.karte-stufen{
  grid-column:1 / -1;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--paper-edge);
}
.karte-stufen[hidden]{display:none;}
.karte-stufen .treppe{display:block;width:100%;height:auto;}
.karte-stufen .treppe text{
  font:600 10px 'Quicksand',sans-serif;fill:var(--ink);text-anchor:middle;
}
.karte-stufen .treppe .licht-glanz{filter:blur(2px);}
.karte h2{font-family:'Caveat',cursive;font-size:20px;margin:0 0 3px;color:var(--grass-deep);}
.karte p{font-size:12.5px;line-height:1.42;margin:0 0 9px;}
.karte a.project-link{
  display:inline-block;background:var(--grass-deep);color:#fff;text-decoration:none;
  font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:7px;
}
.karte a.project-link:hover{background:#1a2b14;}
.karte .zu{
  position:absolute;top:4px;right:7px;background:none;border:none;
  font-size:17px;color:var(--grass-deep);cursor:pointer;line-height:1;padding:4px;
}

/* Die Sonnen-Tafel ist blau wie der Himmel — anders als die cremefarbenen
   Blumen-Tafeln, mit gelber Schrift. */
.karte.karte-sonne{
  max-width:min(258px,68vw); /* schmaler, damit sie neben der Sonne Platz hat */
  background:linear-gradient(160deg,#0a5f88,var(--himmel));
  border-color:#0a7aa8;
}
.karte.karte-sonne .karte-bild{width:clamp(80px,25vw,104px);}
.karte.karte-sonne h2{color:#ffe066;}
.karte.karte-sonne p{color:#eaf6ff;}

.karte-liebe{
  margin:0 0 9px;font-family:'Caveat',cursive;font-size:18px;font-weight:700;
  color:#ffc2d1;
}
.karte-liebe[hidden]{display:none;}

/* Vier Begriffe, die von Rot zu Gelb heller werden — die Steigerung der
   Aufmerksamkeit als wachsendes Licht angedeutet. Nur im Sonnen-Fenster. */
.karte-steigerung{margin:0 0 9px;font-size:10.5px;font-weight:700;line-height:1.5;}
.karte-steigerung[hidden]{display:none;}
.karte-steigerung .pfeil{color:rgba(255,255,255,.45);margin:0 3px;font-weight:400;}
.karte-steigerung .s1{color:#ff8a70;}
.karte-steigerung .s2{color:#ffab5c;}
.karte-steigerung .s3{color:#ffd24d;}
.karte-steigerung .s4{color:#fff394;text-shadow:0 0 7px rgba(255,240,160,.75);}
.karte.karte-sonne a.project-link{background:#ffe066;color:#0a4a67;}
.karte.karte-sonne a.project-link:hover{background:#ffd23f;}
.karte.karte-sonne .zu{color:#ffe066;}

/* ---------- Die Kuh ist antippbar ---------- */
.kuh-taste{
  position:absolute;left:11%;top:calc(var(--bild-h) * 0.14);
  width:78%;height:calc(var(--bild-h) * 0.42);
  background:none;border:none;padding:0;margin:0;z-index:2;
  cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:24px;
}
.kuh-taste:focus-visible{outline:3px solid #fff;outline-offset:4px;}

/* ---------- Hinweis nach unten ---------- */
.weiter{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:30; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:#fff; font-family:'Caveat',cursive; font-size:20px;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
  transition:opacity .3s ease;
}
.weiter svg{width:26px;height:26px;animation:wippen 1.8s ease-in-out infinite;}
@keyframes wippen{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.weiter.weg{opacity:0;}
/* Solange eine Info-Tafel offen ist, hat der Hinweis nichts zu suchen. Ueber
   z-index ist das nicht zu loesen: die Tafel haengt in #seite und damit in
   einem anderen Stapelkontext als der Hinweis, der direkt am Body haengt —
   ihre Zahlen sind gar nicht miteinander vergleichbar. */
.weiter.tafel-offen{opacity:0;}

/* ---------- Ton-Schalter ---------- */
.ton-schalter{
  position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:31;
  width:42px;height:42px;border-radius:50%;
  background:rgba(12,26,14,.5);color:#fff;border:1px solid rgba(255,255,255,.35);
  font-size:17px;line-height:1;cursor:pointer;backdrop-filter:blur(4px);
}
.ton-schalter[aria-pressed="false"]{opacity:.55;text-decoration:line-through;}
.ton-schalter:focus-visible{outline:3px solid #fff;outline-offset:3px;}

.leer{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#fff; text-align:center; font-family:'Caveat',cursive; font-size:28px;
  text-shadow:0 2px 8px rgba(0,0,0,.4); max-width:80vw;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .weiter svg{animation:none;}
  .wolke.steigt{transition:opacity 1s ease-in;transform:none;}
}

/* ---------- Die Info-Tafel am Handy ----------
   Auf schmalen Bildschirmen schwebt die Tafel nicht mehr neben der Blume,
   sondern sitzt unten am Bildschirm. Zwei Gruende:
   1. Sie hat dort die volle Breite und ist ohne Zoomen zu lesen.
   2. Neben der Blume musste ihre Position bei jeder Bewegung neu berechnet
      werden — auch beim Aufziehen mit zwei Fingern. Dadurch sprang sie beim
      Zoomen weg. Hier unten rechnet nichts mehr an ihr herum, sie steht. */
@media (max-width: 700px){
  /* Die Tafel folgt dem SICHTBAREN Ausschnitt, nicht dem Layout-Fenster.
     Ohne das klebt sie beim Aufziehen mit zwei Fingern am Layout-Fenster,
     wird mitvergroessert und rutscht halb aus dem Bild. Die drei Werte
     --vv-x/--vv-y/--vv-s setzt JS aus window.visualViewport.
     Das Gegen-Skalieren mit 1/Zoom haelt die Tafel in normaler Groesse,
     egal wie weit man in die Blumen hineingezoomt hat. */
  .karte{
    position:fixed;
    left:0; right:0; bottom:0; top:auto;
    width:auto; max-width:none;
    border-radius:18px 18px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    padding:18px 18px calc(20px + env(safe-area-inset-bottom));
    column-gap:16px;
    box-shadow:0 -8px 30px rgba(0,0,0,.4);
    transform-origin:bottom left;
    transform:translate(var(--vv-x,0px), var(--vv-y,0px)) scale(var(--vv-s,1));
    /* Keine Transform-Ueberblendung: sie wuerde beim Zoomen hinterherhinken. */
    transition:opacity .18s ease;
  }
  .karte.sichtbar{
    transform:translate(var(--vv-x,0px), var(--vv-y,0px)) scale(var(--vv-s,1));
  }

  .karte h2{font-size:26px;margin-bottom:5px;}
  .karte p{font-size:15.5px;line-height:1.5;margin-bottom:13px;}
  .karte a.project-link{font-size:15px;padding:11px 18px;border-radius:9px;}
  .karte-bild{width:clamp(88px,30vw,132px);}
  .karte .zu{
    top:8px;right:10px;font-size:26px;padding:8px;
    line-height:1;
  }
  .karte.karte-sonne{max-width:none;}
  .karte.karte-sonne .karte-bild{width:clamp(88px,30vw,132px);}

  /* Der Ton-Schalter sitzt sonst hinter der Tafel. */
  .ton-schalter{bottom:auto;top:calc(14px + env(safe-area-inset-top));}
}

/* ---------- Mitmachen in der Info-Tafel ---------- */
.mitmachen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
.mitmachen[hidden]{display:none;}

.herz{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--paper-edge);border-radius:7px;
  padding:6px 10px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--grass-deep);
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.herz .herz-zeichen{font-size:15px;line-height:1;color:#c9b8a8;transition:color .2s ease, transform .2s ease;}
.herz:hover{background:#fdf6ef;}
.herz[aria-pressed="true"]{border-color:#e0a2b4;background:#fdeef2;color:#a5306a;}
.herz[aria-pressed="true"] .herz-zeichen{color:#dd4a6a;transform:scale(1.15);}

.schreib{
  background:none;border:none;padding:6px 2px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--grass-deep);
  text-decoration:underline;text-underline-offset:3px;
  -webkit-tap-highlight-color:transparent;
}
.schreib:hover{color:#1a2b14;}

/* ---------- Das Nachrichtenfeld ---------- */
.post{grid-column:1 / -1;margin-top:10px;}
.post[hidden]{display:none;}
.post-bezug{
  font-family:'Caveat',cursive;font-size:17px;margin:0 0 8px;color:var(--grass-deep);
}
.post-feld{display:block;margin-bottom:9px;}
.post-feld > span{display:block;font-size:11.5px;font-weight:700;margin-bottom:3px;}
.post-feld em{font-style:normal;font-weight:500;color:#7b7361;}
.post textarea,.post input[type=text],.post input[type=email]{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;
  padding:8px 10px;border:1px solid var(--paper-edge);border-radius:7px;
  background:#fffdf8;color:var(--ink);
}
.post textarea{resize:vertical;min-height:70px;}
.post textarea:focus,.post input:focus{outline:2px solid var(--grass-deep);outline-offset:1px;}

/* Die Falle: fuer Menschen unsichtbar, fuer Maschinen ein offenes Feld.
   Bewusst NICHT display:none — manche Maschinen ueberspringen genau das. */
.post-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.post-hinweis{font-size:11.5px;line-height:1.45;color:#7b7361;margin:0 0 10px;}

/* Impressum und Datenschutz. Zurueckhaltend, aber nicht versteckt: klein,
   grau, unterstrichen — und mit genug Flaeche, dass man sie am Handy trifft. */
/* Nebeneinander, mit Abstand statt Trennzeichen — sonst haengt bei schmaler
   Tafel ein einsamer Punkt am Zeilenende. */
.rechtliches{
  display:flex;flex-wrap:wrap;gap:2px 14px;
  margin:10px 0 0;font-size:11.5px;color:#7b7361;
}
.rechtliches[hidden]{display:none;}
.rechts-link{
  color:#7b7361;text-decoration:underline;text-underline-offset:2px;
  display:inline-block;padding:3px 0;white-space:nowrap;
}
.rechts-link:hover,.rechts-link:focus-visible{color:var(--grass-deep);}

/* Auf der blauen Sonnen-Tafel waere Graubraun kaum zu lesen. */
.karte.karte-sonne .rechts-link{color:#bfe3f5;}
.karte.karte-sonne .rechts-link:hover,
.karte.karte-sonne .rechts-link:focus-visible{color:#ffe066;}
.post-knoepfe{display:flex;gap:8px;align-items:center;}
.post-senden{
  background:var(--grass-deep);color:#fff;border:none;border-radius:7px;
  padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
}
.post-senden:hover:not(:disabled){background:#1a2b14;}
.post-senden:disabled{background:#b9c4b2;cursor:default;}
.post-zurueck{
  background:none;border:none;color:var(--grass-deep);font-family:inherit;
  font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.post-meldung{font-size:12.5px;margin:8px 0 0;min-height:1em;}
.post-meldung.gut{color:var(--grass-deep);font-weight:700;}
.post-meldung.schlecht{color:#a5301f;font-weight:700;}

/* Waehrend das Formular offen ist, tritt der Rest der Tafel zurueck. */
.karte.schreibt .karte-bild,
.karte.schreibt .project-link,
.karte.schreibt .mitmachen{display:none;}
.karte.schreibt{max-width:min(420px,92vw);}

@media (max-width: 700px){
  .karte.schreibt{max-width:none;}

  /* Die Tafel darf nie hoeher werden als der sichtbare Ausschnitt.
     --vv-h kommt aus window.visualViewport und schrumpft, sobald die
     Tastatur aufgeht. Ohne das waechst die unten verankerte Tafel nach
     oben aus dem Bild — und genau dort steht das Textfeld.
     Der Rest wird scrollbar, statt unerreichbar zu sein. */
  .karte{
    max-height:calc(var(--vv-h, 100dvh) - 10px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  /* Im Schreibmodus knapper setzen, damit mehr in den Ausschnitt passt. */
  .karte.schreibt{padding-top:14px;}
  .karte.schreibt .post-feld{margin-bottom:7px;}
  .karte.schreibt h2{font-size:21px;margin-bottom:2px;}
  .karte.schreibt > .karte-inhalt > p{display:none;}   /* die Projektbeschreibung */

  .post-bezug{font-size:20px;}
  .post textarea,.post input[type=text],.post input[type=email]{font-size:16px;}
  .post-feld > span{font-size:13px;}
  .post-hinweis{font-size:12.5px;}
  .herz,.schreib{font-size:14.5px;}
  .post-senden{font-size:15px;padding:11px 18px;}
}

/* ---------- Zum Reinhören ---------- */
.hoeren{margin-top:10px;}
.hoeren[hidden]{display:none;}

.hoer-knopf{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--grass-deep);color:#fff;border:none;border-radius:7px;
  padding:8px 14px;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:700;
  -webkit-tap-highlight-color:transparent;
}
.hoer-knopf:hover{background:#1a2b14;}
.hoer-knopf .hoer-zeichen{font-size:15px;line-height:1;}
.hoer-knopf[aria-pressed="true"]{background:#8a6d1d;}
.hoer-knopf[disabled]{background:#b9c4b2;cursor:default;}

.hoer-leiste{display:flex;align-items:center;gap:9px;margin-top:8px;}
.hoer-leiste[hidden]{display:none;}
.hoer-schiene{
  flex:1;height:4px;border-radius:2px;background:var(--paper-edge);overflow:hidden;
}
.hoer-fortschritt{height:100%;width:0;background:var(--grass-deep);border-radius:2px;}
.hoer-zeit{
  font-size:11.5px;color:#7b7361;font-variant-numeric:tabular-nums;min-width:3.2em;
}

@media (max-width: 700px){
  .hoer-knopf{font-size:15px;padding:11px 18px;}
  .hoer-zeit{font-size:13px;}
  .hoer-schiene{height:5px;}
}