/* Öffentliche Messe-Anmeldung (/messe/{Kennung}); eigenes Layout ohne Cockpit-Navigation. Alle Regeln beginnen mit .messe- */
.messe-seite {
    --messe-text: #1d2a2e; --messe-leise: #5a6a70; --messe-rand: #b9c5ca; --messe-flaeche: #f3f6f7;
    --messe-akzent: var(--km-gruen, #acde79); --messe-akzent-hell: var(--km-gruen-hell, #d6f2a4); --messe-akzent-dunkel: #5f8f2f; --messe-akzent-text: #2c3332; --messe-fehler: #a01b1b;
    min-height: 100vh; min-height: 100dvh; box-sizing: border-box; padding: 16px 16px 32px;
    background: var(--messe-flaeche); color: var(--messe-text); font-size: 17px; line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}
.messe-seite *, .messe-seite *::before, .messe-seite *::after { box-sizing: border-box; }
.messe-rahmen { max-width: 760px; margin: 0 auto; }

.messe-kopf { max-width: 760px; margin: 0 auto 12px; }
.messe-logo { height: 48px; width: auto; display: block; }

.messe-karte { background: #fff; border: 1px solid var(--messe-rand); border-radius: 14px; padding: 20px 16px; }
.messe-karte h1, .messe-buchung h1 { font-size: 26px; line-height: 1.2; font-weight: 600; margin: 0 0 6px; }
/* Kopfband wie die Kacheln im Cockpit (VetDream-Grün) */
.messe-karte { overflow: hidden; }
.messe-karte > h1:first-child { margin: -20px -16px 16px; padding: 18px 16px; background: var(--messe-akzent); color: var(--messe-akzent-text); }
.messe-hinweis { color: var(--messe-leise); margin: 0 0 14px; font-size: 16px; }
.messe-klein { font-size: 16px; margin: 12px 0 0; }
.messe-zu { margin: 8px 0; font-size: 20px; text-align: center; }
.messe-hinweis a, .messe-einwilligung a { color: var(--messe-akzent-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--messe-akzent-dunkel); text-underline-offset: 3px; }

.messe-fehler { background: #fdecec; border: 1px solid #e3a3a3; color: var(--messe-fehler); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; font-size: 16px; }

.messe-gitter { display: grid; grid-template-columns: 1fr; gap: 14px; }
.messe-feld { display: flex; flex-direction: column; gap: 4px; }
.messe-feld > span { font-size: 16px; font-weight: 600; }
/* Schrift mindestens 16 px, damit iOS beim Antippen nicht zoomt; Höhe mindestens 48 px */
.messe-seite input[type="text"], .messe-seite input[type="email"], .messe-seite input[type="tel"], .messe-seite select {
    width: 100%; min-height: 52px; padding: 10px 14px; font: inherit; font-size: 17px; color: var(--messe-text);
    background: #fff; border: 1.5px solid var(--messe-rand); border-radius: 10px; appearance: none; -webkit-appearance: none;
}
.messe-seite select {
    background-image: linear-gradient(45deg, transparent 50%, #5a6a70 50%), linear-gradient(135deg, #5a6a70 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px;
}
.messe-seite input:focus, .messe-seite select:focus, .messe-knopf:focus-visible, .messe-kachel:focus-visible { outline: 3px solid var(--messe-akzent-dunkel); outline-offset: 1px; }

.messe-auswahl { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.messe-auswahl legend { font-size: 16px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.messe-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.messe-kachel {
    min-height: 56px; padding: 10px 12px; font: inherit; font-size: 17px; font-weight: 600; text-align: center; color: var(--messe-text);
    background: #fff; border: 2px solid var(--messe-rand); border-radius: 12px; cursor: pointer; touch-action: manipulation;
}
.messe-kachel.aktiv { background: var(--messe-akzent-hell); border-color: var(--messe-akzent-dunkel); color: #000; }

/* Honigtopf: für Menschen unsichtbar, für Bots ein normales Feld */
.messe-falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.messe-einwilligung { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; font-size: 16px; cursor: pointer; }
.messe-einwilligung input[type="checkbox"] { flex: 0 0 28px; width: 28px; height: 28px; margin: 2px 0 0; accent-color: var(--messe-akzent-dunkel); }

.messe-aktionen { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.messe-knopf {
    min-height: 56px; padding: 12px 18px; font: inherit; font-size: 17px; font-weight: 600; border-radius: 12px; cursor: pointer; touch-action: manipulation;
    color: var(--messe-akzent-text); background: #fff; border: 2px solid var(--messe-akzent);
}
.messe-knopf:disabled { opacity: .55; cursor: default; }
.messe-knopf-gross { min-height: 64px; font-size: 20px; color: #000; background: var(--messe-akzent); border-color: var(--messe-akzent); }
.messe-knopf-gross:hover:not(:disabled) { background: #9bd165; border-color: #9bd165; }
.messe-knopf-zweit { min-height: 52px; font-size: 16px; font-weight: 500; }

.messe-erfolg { text-align: center; padding: 32px 20px; }
.messe-erfolg p { font-size: 20px; margin: 10px 0 18px; }
.messe-erfolg .messe-hinweis { font-size: 16px; }

.messe-buchung { max-width: 100%; }
.messe-rahmen-buchung { display: block; width: 100%; height: calc(100vh - 190px); height: calc(100dvh - 190px); min-height: 560px; border: 1px solid var(--messe-rand); border-radius: 12px; background: #fff; }
.messe-fertig { width: 100%; margin-top: 14px; }

/* Eigene Terminwahl */
.messe-tage { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; }
.messe-chip {
    flex: 0 0 auto; min-height: 56px; padding: 10px 18px; font: inherit; font-size: 17px; font-weight: 600; color: var(--messe-text); white-space: nowrap;
    background: #fff; border: 2px solid var(--messe-rand); border-radius: 28px; cursor: pointer; touch-action: manipulation;
}
.messe-chip.aktiv, .messe-zeit.aktiv { background: var(--messe-akzent-hell); border-color: var(--messe-akzent-dunkel); color: #000; }
.messe-zeiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.messe-zeit {
    min-height: 52px; padding: 8px; font: inherit; font-size: 18px; font-weight: 600; color: var(--messe-text);
    background: #fff; border: 2px solid var(--messe-rand); border-radius: 12px; cursor: pointer; touch-action: manipulation;
}
.messe-chip:focus-visible, .messe-zeit:focus-visible { outline: 3px solid var(--messe-akzent-dunkel); outline-offset: 1px; }
.messe-zusammenfassung { margin: 18px 0 0; padding: 12px 14px; background: var(--messe-flaeche); border-radius: 10px; font-size: 17px; font-weight: 600; }

/* Tablet und breiter: zweispaltig, mehr Luft */
@media (min-width: 768px) {
    .messe-seite { padding: 28px 28px 40px; font-size: 18px; }
    .messe-rahmen { max-width: 980px; }
    .messe-kopf { max-width: 980px; }
    .messe-karte { padding: 28px 32px; }
    .messe-karte h1, .messe-buchung h1 { font-size: 32px; }
    .messe-karte > h1:first-child { margin: -28px -32px 18px; padding: 22px 32px; }
    .messe-gitter { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
    .messe-breit { grid-column: 1 / -1; }
    .messe-kacheln { grid-template-columns: repeat(4, 1fr); }
    .messe-zeiten { grid-template-columns: repeat(5, 1fr); }
    .messe-kacheln-zwei { grid-template-columns: repeat(2, minmax(0, 260px)); }
    .messe-aktionen { flex-direction: row; align-items: stretch; }
    .messe-aktionen .messe-knopf-gross { flex: 2 1 0; }
    .messe-aktionen .messe-knopf-zweit { flex: 1 1 0; }
    .messe-rahmen-buchung { height: calc(100vh - 210px); height: calc(100dvh - 210px); }
}

/* Einbettung als iframe (?einbettung=1, nur wenn der Deeplink sie erlaubt): kompakt, ohne Logo, ohne äußeren Rand und Hintergrund.
   Die Klasse sitzt am Seiteninhalt; der Rahmen (.messe-seite) wird über :has() angepasst, damit schon das vorgerenderte HTML stimmt. */
.messe-seite:has(.messe-einbettung) { min-height: 0; padding: 0; background: transparent; }
.messe-seite:has(.messe-einbettung) .messe-rahmen { max-width: none; }
.messe-einbettung .messe-karte { border: 0; border-radius: 0; padding: 12px 0; background: transparent; }
.messe-einbettung .messe-karte > h1:first-child { margin: 0 0 12px; padding: 0; background: transparent; font-size: 22px; }
.messe-einbettung .messe-rahmen-buchung { height: 640px; min-height: 0; }
.messe-einbettung .messe-buchung h1 { font-size: 22px; }