/*
 * Das Gaestebuch unter einer veroeffentlichten Seite.
 *
 * Es erbt das Design der SEITE, nicht das der Plattform: Schrift, Farben,
 * Akzent, Breite und Radius kommen aus den --pb-Variablen, die jede Seite
 * (content.css plus ihr gerendertes CSS) mitbringt. So sieht das Gaestebuch
 * auf jeder Vorlage aus wie ein Abschnitt der Seite - eine feste
 * Plattform-Palette wirkte daneben wie aufgeklebt (Ansage 2026-09-01).
 */
.hm-gb {
    max-width: var(--pb-width, 860px);
    margin: 0 auto;
    padding: 0 20px var(--pb-section-pad, 54px);
    color: var(--pb-text, #2b2622);
}
.hm-gb-titel {
    font-family: var(--pb-font-head, inherit);
    color: var(--pb-heading, inherit);
    font-weight: 650;
    font-size: 28px;
    line-height: 1.25;
    margin: 0 0 1.1rem;
    padding-top: var(--pb-section-pad, 54px);
    border-top: 1px solid var(--pb-line, #e3e6ee);
}

.hm-gb-meldung { background: #e7efe0; color: #2b4520; border: 1px solid #bcd0ac; border-radius: var(--pb-radius, 6px); padding: 0.7rem 1rem; margin: 0 0 1.2rem }
.hm-gb-fehler { background: #f7e9e5; color: #7c2f21; border: 1px solid #dcb7ac; border-radius: var(--pb-radius, 6px); padding: 0.7rem 1rem 0.7rem 2rem; margin: 0 0 1rem }
.hm-gb-leer { color: var(--pb-muted, #7a8296); margin: 0 0 1.8rem }

.hm-gb-liste { list-style: none; margin: 0 0 2.4rem; padding: 0 }
.hm-gb-eintrag + .hm-gb-eintrag { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--pb-line, #e3e6ee) }
.hm-gb-kopf { margin: 0 0 0.25rem; display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap }
.hm-gb-kopf strong { font-weight: 650 }
.hm-gb-kopf time { color: var(--pb-muted, #7a8296); font-size: 0.8em }
.hm-gb-text { margin: 0; overflow-wrap: anywhere }

/* Kein Kasten um das Formular - ein Abschnitt der Seite, kein Fremdkoerper. */
.hm-gb-formular { max-width: 560px }
.hm-gb-zeile { margin-bottom: 1rem }
.hm-gb-zeile label { display: block; font-size: 0.85em; font-weight: 500; margin-bottom: 0.3rem }
/* Der Rand mischt sich aus der Textfarbe der Seite: 55 % reichen fuer die
   3:1, die WCAG fuer Bedienelemente verlangt - die Haarlinienfarbe der
   Seite (--pb-line) war dafuer zu blass, die Felder gingen unter. */
.hm-gb-zeile input, .hm-gb-zeile textarea {
    display: block; width: 100%; box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--pb-text, #2b2622) 55%, #fff);
    border-radius: var(--pb-radius, 6px);
    background: #fff; padding: 0.55rem 0.75rem;
    font: inherit; color: inherit;
}
/* Hoeher ziehen ja, breiter nein - sonst schiebt das Feld das Layout auf. */
.hm-gb-zeile textarea { resize: vertical; min-height: 6rem; max-height: 24rem }
.hm-gb-zeile input:focus, .hm-gb-zeile textarea:focus { outline: 2px solid var(--pb-accent, #2ea3f2); outline-offset: 1px }
.hm-gb-formular button {
    border: 0; border-radius: var(--pb-radius, 6px);
    background: var(--pb-accent, #2ea3f2); color: #fff;
    font: inherit; font-weight: 600; padding: 0.6rem 1.5rem; cursor: pointer;
}
.hm-gb-formular button:hover { filter: brightness(0.92) }
.hm-gb-hinweis { margin: 0.8rem 0 0; font-size: 0.8em; color: var(--pb-muted, #7a8296) }

/* Honigtopf: aus dem Sichtfeld, nicht display:none - manche Bots pruefen das. */
.hm-gb-hp { position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden }