/* ═══════════════════════════════════════════════════════════════════════════
ARVELA · KONTAKTFELDER
═══════════════════════════════════════════════════════════════════════════
EINZIGE Quelle der Regeln fuer partials/kontaktfelder.hbs. Jede Seite, die
das Partial einbindet, verlinkt diese Datei im Kopf:
Heute: views/demand.hbs (modus="anfrage") und views/buchen.hbs
(modus="nachricht").
HERKUNFT. Unveraendert aus dem Kopf von views/demand.hbs herausgeloest
(Formularraster, Felder, Rollenkasten, Einwilligung, Sendebereich). Werte
Zahl fuer Zahl dieselben.
EINE UMBENENNUNG. Der Sendeknopf hiess .btn.btn-ink. Die .btn-Familie bleibt
in demand.hbs, weil dort noch ein zweiter Knopf haengt (.btn-oro, "Weiter zur
Anfrage"), der NICHT zu diesem Modul gehoert. Haette das Modul die
.btn-Grundregel mitgenommen, haenge demand.hbs fuer seinen eigenen Knopf an
der CSS eines Formulars, das es gar nicht immer zeigt. Deshalb traegt der
Sendeknopf hier .kf-send, mit denselben Werten wie .btn + .btn-ink.
ABHAENGIGKEITEN, bewusst nicht hier: Farb- und Schrift-Token (--notte, --oro,
--ink, --ink-soft, --stone, --mist, --white, --border-hard, --error, --lago,
--carta, --serif-body, --serif-display, --mono) definiert die einbindende
Seite. Ebenso .hint-italic, das auf beiden Seiten auch ausserhalb des
Formulars verwendet wird.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Felder ─────────────────────────────────────────────────────────────── */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; }
.field.is-wide{ grid-column:1 / -1; }
.field label{ font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--stone); margin-bottom:8px; }
.field input, .field textarea{
font-family:var(--serif-body); font-size:15px; color:var(--ink);
background:var(--white); border:1px solid var(--border-hard); border-radius:0;
padding:12px 14px; width:100%; transition:border-color .2s ease;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--lago); }
.field .sub{ font-family:var(--serif-body); font-style:italic; font-size:12px; color:var(--mist); margin-top:6px; }
.field .err{ font-size:12px; color:var(--error); margin-top:6px; display:none; }
.field.has-error input, .field.has-error textarea{ border-color:var(--error); }
.field.has-error .err{ display:block; }
/* ── Rollen- und Rechtshinweis ───────────────────────────────────────────
EINE Fassung fuer beide Seiten. Bis 08/2026 gab es zwei: den Kasten .pact mit
Goldkante, gold hinterlegtem Grund, Anschrift und USt-IdNr auf der
Anfrage-Seite, und .kf-zeile, einen einzelnen Satz, auf der Buchungsseite.
Beide Regelsaetze sind hier aufgegangen und ersatzlos entfallen, zusammen mit
.pact-address, .is-legacy und .pact-vat: das Markup liest die Anschrift nicht
mehr.
Kein Grund, keine Kontur, kein Innenabstand. Der Block ist Fliesstext und
soll wie Fliesstext aussehen; die Groesse erbt er von der einbindenden Seite,
damit er sich von deren Absaetzen nicht unterscheidet. Abstand nach oben wie
zuvor bei .kf-zeile. */
.kf-hinweis{ margin-top:18px; color:var(--ink-soft); }
.kf-hinweis p{ color:var(--ink-soft); }
.kf-hinweis p + p{ margin-top:10px; }
/* Erster Absatz fett, weil er die Zuordnung nennt: an wen die Nachricht geht.
Kein display:block wie frueher an .pact strong, das strong steht hier bereits
allein in seinem Absatz. */
.kf-hinweis strong{ font-family:var(--serif-body); font-weight:600; }
/* Rechtslink als ruhige Fussnote, nicht als Handlungsaufforderung: Mono in
Bildunterschriften-Groesse, gedaempft, feine Unterstreichung mit Abstand
statt der frueheren Goldkante. Die Kante las sich wie ein Button.
Werte unveraendert, nur dem neuen Container untergeordnet. Der frueher noetige
Schutz gegen die Flaechenregel `.pact p` entfaellt: `.kf-hinweis p` setzt
keine Schriftgroesse mehr, es gibt also nichts mehr zu ueberschreiben. Der
Aussenabstand von 16px gewinnt trotzdem gegen `.kf-hinweis p + p`, weil zwei
Klassen schwerer wiegen als eine. */
.kf-hinweis .pact-links{ margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }
.kf-hinweis .pact-links a{
color:var(--mist);
text-decoration:underline; text-decoration-thickness:1px;
text-underline-offset:4px; text-decoration-color:rgba(160,152,144,.45);
transition:color .25s ease, text-decoration-color .25s ease;
}
.kf-hinweis .pact-links a:hover{ color:var(--lago); text-decoration-color:var(--lago); }
/* Mittelpunkt zwischen Impressum und Datenschutz. Gedaempfter als die Links
selbst, damit er trennt und nicht mitliest. Er steht nur da, wenn beide Links
stehen (siehe Partial), die Regel greift sonst ins Leere. */
.kf-hinweis .pact-links span{ color:var(--mist); margin:0 8px; }
/* ── Einwilligung ───────────────────────────────────────────────────────── */
.consent{ margin-top:22px; display:flex; align-items:flex-start; gap:12px; }
.consent input{ width:17px; height:17px; margin-top:4px; accent-color:var(--lago); flex:0 0 auto; }
.consent label{ font-size:14px; color:var(--ink-soft); }
.consent.has-error label{ color:var(--error); }
/* ── Senden ─────────────────────────────────────────────────────────────── */
.send-wrap{ margin-top:24px; }
.send-note{ margin-top:12px; text-align:center; font-size:13px; }
.form-error{ margin-top:14px; font-size:13px; color:var(--error); display:none; }
.form-error.is-visible{ display:block; }
/* ── ERFOLGSZUSTAND ───────────────────────────────────────────────────────
EINE Fassung fuer Anfrage- und Buchungsseite. Vorher gab es zwei: .done in
demand.hbs (56px Polsterung, 32px Ueberschrift, Unicode-Haken) und
.frage-done in buchen.hbs (28px Polsterung, 22px Ueberschrift, kein Zeichen).
Derselbe Moment in zwei Groessen.
Mittig und mit viel Luft: nach dem Absenden gibt es auf der Seite nichts mehr
zu tun, und der Block soll das zeigen, statt sich in die Reihe der Felder zu
stellen. */
/* KASTEN, und zwar als eigene Regel dieses Moduls. Auf der Anfrage-Seite trug
der Erfolgszustand frueher class="box done" und holte seinen Rahmen aus der
seiteneigenen .box. Beim Zusammenlegen ging er verloren, weil das Modul die
Klasse nicht mitbringen darf: .box gehoert den Seiten, und ein Modul, das
sich an einer Seitenklasse festhaelt, bricht auf der naechsten Flaeche.
Deshalb Grund, Kontur und Innenabstand hier, aus eigenen Werten.
Der Aussenabstand faellt von 64px auf 48px: der Kasten bringt mit 64px
Innenabstand jetzt eigene Luft mit, und beides zusammen ergaebe eine Luecke,
die den Block von der Seite abloest statt ihn abzusetzen. */
.kf-done{
background:#FFFFFF;
border:1px solid var(--oro);
border-radius:0;
padding:64px 32px;
margin:48px 0;
text-align:center;
/* Der Block ist ein Sprungziel: beide Seiten rufen nach dem Absenden
scrollIntoView darauf. Ohne diesen Abstand laege er unter der festen
Kopfzeile. Derselbe Wert, den demand.hbs und buchen.hbs fuer .sec-head
fuehren, damit ein Sprung hierher genauso sitzt wie jeder andere.
Der Rueckfall 88px ist kein Schmuck: diese Datei ist geteilt, und wer sie
kuenftig auf einer Seite ohne diese Variable einbindet, bekaeme sonst einen
ungueltigen calc-Ausdruck und damit gar keinen Abstand. 88px ist die
Desktop-Kopfzeilenhoehe beider Seiten. */
scroll-margin-top:calc(var(--nav-h, 88px) + 48px);
}
/* Auf schmalen Ansichten truege der Kasten sonst mehr Rand als Inhalt. */
@media(max-width:480px){
.kf-done{ padding:40px 20px; }
}
/* Kreis mit Haken. Kontur in Oro, KEINE Flaeche: Gold traegt nie eine Flaeche
(Design-Leitplanke). Das SVG erbt die Farbe ueber currentColor. */
.kf-done-mark{
width:72px; height:72px; margin:0 auto 32px;
border:1px solid var(--oro); border-radius:50%;
color:var(--oro);
display:flex; align-items:center; justify-content:center;
}
.kf-done-mark svg{ width:30px; height:30px; display:block; }
/* Groesse wie eine H2 der Seite (dieselbe clamp-Formel wie .sec-head h2),
Display-Serife, NICHT fett. */
.kf-done h2{
font-family:var(--serif-display); font-weight:400;
font-size:clamp(24px,2.6vw,32px); line-height:1.25; letter-spacing:-0.01em;
margin-bottom:12px;
}
.kf-done p{ max-width:34em; margin:0 auto; color:var(--ink-soft); }
/* Der Fokus wird per Skript gesetzt, damit Vorlesewerkzeuge den Block ansagen.
Ein Fokusrahmen um einen ganzen Absatz waere dabei Laerm: der Block ist keine
Bedienung, er wird nur vorgelesen. */
.kf-done:focus{ outline:none; }
/* ── KNOEPFE: NICHT MEHR HIER ───────────────────────────────────────────────
.btn-arvela und .kf-send sind nach public/buttons.css gewandert, als die
Micropage als dritte Flaeche dazukam. Sie bindet dieses Formular NICHT ein,
braucht aber denselben Knopf: eine Knopfform, die in der CSS eines Formulars
wohnt, zwingt jede Flaeche, das ganze Formular mitzuladen.
Jede einbindende Seite verlinkt jetzt BEIDE Dateien:
───────────────────────────────────────────────────────────────────────── */