/*******************************************************************************
kontakt.css – Kontakt-Seite (kontakt/index.html)
Foto-Hintergrund (img/hero-fotogalerie.jpg) mit abgedunkelter Fläche, darüber eine halbtransparente
"Glas-Karte" mit Titel und Formular. Body: . Basis: site.css.
Aufbau im HTML:
Nach dem Senden wird das Formular ausgeblendet und der Danke-Text (#danke) angezeigt (js/kontakt.js).
*******************************************************************************/
/* ---------- Einstellungen (hier ändern) ----------
Schriftfarben (3 Stück):
--farbe-hell : Navigation oben rechts und der Text, den man in die Felder tippt
--farbe-text : Titel "Kontakt", Beschriftungen (Vorname ...), Danke-Text, Fehlermeldung
--farbe-leise : Satz unter dem Titel und Fusszeile
Abdunklung des Fotos: --abdunkelung (0 = Foto unverändert ... 1 = ganz schwarz)
Knopf "Abschicken": --knopf = Farbe, --knopf-hover = Farbe beim Darüberfahren (dunkler),
--knopf-abstand = Abstand zum Feld "Mitteilung" darüber
Schatten der Navigation und Fusszeile: siehe "Navigation und Fusszeile" weiter unten (text-shadow). */
body.kontakt {
--farbe-hell: #f2ede6;
--farbe-text: #e4dbd0;
--farbe-leise: #e4dbd0;
--abdunkelung: .25;
--knopf: #e4dbd0;
--knopf-hover: #bfb5a8;
--knopf-abstand: 14px;
/* Variablen aus site.css umbiegen, damit auch Links, Rahmen usw. diese Farben bekommen */
--text: var(--farbe-text); --text-leise: var(--farbe-leise); --akzent: var(--knopf);
background: #000; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
/* ---------- Hintergrund ----------
Foto als fester Hintergrund (position: fixed statt background-attachment: fixed, das auf dem iPhone nicht geht)
und Abdunklung darüber (Stärke: --abdunkelung oben). z-index negativ = hinter dem Inhalt. */
body.kontakt::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url("../img/hero-fotogalerie.jpg") center / cover no-repeat; }
body.kontakt::after { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,var(--abdunkelung)); }
/* ---------- Navigation und Fusszeile ----------
Hell auf dem Foto, mit leichtem Schatten für die Lesbarkeit.
text-shadow: 0 1px 4px rgba(0,0,0,.5) = 0 px seitlich, 1 px nach unten, 4 px weich, schwarz zu 50 %
(letzte Zahl = Stärke; 0 = kein Schatten). */
.seitenkopf { padding-top: 6px; }
.seitenkopf .kopfnav { padding: 14px 0; }
.seitenkopf .kopfnav .marke { font-size: 1.05rem; letter-spacing: .02em; }
.seitenkopf .kopfnav li + li::before { content: "|"; margin-right: 18px; opacity: .6; } /* Trenner "|" */
.seitenkopf .kopfnav a { color: var(--farbe-hell); }
.seitenkopf .kopfnav, .fuss { text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.fuss { border-top-color: rgba(255,255,255,.25); color: var(--text-leise); margin-top: 0; }
/* ---------- Glas-Karte ----------
main füllt den Platz zwischen Kopf und Fusszeile und zentriert die Karte.
Die Karte ist halbtransparent dunkel; der Hintergrund dahinter wird weichgezeichnet (backdrop-filter). */
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 0; }
.glas {
width: min(100%, 40rem); padding: clamp(20px, 5vw, 40px);
background: rgba(20,20,20,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.2); border-radius: 18px;
}
.glas h1 { margin: 0; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; }
.glas .lead { margin: 8px 0 0; color: var(--text-leise); }
/* ---------- Formular ---------- */
.fb { margin-top: 22px; }
/* Vorname und Nachname nebeneinander (2 gleich breite Spalten), E-Mail und Mitteilung über die ganze Breite.
Unter 520 px stehen alle Felder untereinander. */
.fb-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fb-feld { display: flex; flex-direction: column; gap: 6px; }
.fb-feld.breit { grid-column: 1 / -1; }
.fb-feld label { font-weight: 600; }
/* Eingabefelder: font-size 1rem (16 px) ist wichtig, bei kleinerer Schrift zoomt das iPhone beim Antippen. */
.fb input, .fb textarea {
font: inherit; font-size: 1rem; color: var(--farbe-hell); width: 100%;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: .6em .75em;
}
.fb textarea { min-height: 9rem; resize: vertical; }
.fb input:focus, .fb textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); background: rgba(255,255,255,.14); }
/* Rote Markierung eines Felds, das beim Abschicken fehlt oder ungültig ist (setzt js/kontakt.js). */
.fb input.ungueltig, .fb textarea.ungueltig { border-color: #ff7b76; }
/* Knopf "Abschicken": Farbe --knopf, beim Darüberfahren dunkler (--knopf-hover), Abstand nach oben --knopf-abstand. */
.fb-senden {
font: inherit; font-weight: 600; cursor: pointer;
background: var(--knopf); color: #000; border: 0; border-radius: 999px; padding: .6em 1.6em;
margin-top: var(--knopf-abstand);
}
.fb-senden:hover { background: var(--knopf-hover); }
.fb-senden:disabled { opacity: .6; cursor: wait; }
/* Browser-Autofill ("Vorschlag übernehmen"): Chrome/Safari färben das Feld sonst hellblau/weiss.
Wir überdecken diese Farbe mit einem Schatten nach innen in der Farbe des Feldes (dunkel, fast wie das Glas)
und setzen die Schriftfarbe selbst. Die lange transition verhindert, dass der Browser die Farbe sichtbar umschaltet. */
.fb input:-webkit-autofill,
.fb input:-webkit-autofill:hover,
.fb input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #3b3834 inset;
-webkit-text-fill-color: var(--farbe-hell);
caret-color: var(--farbe-hell);
transition: background-color 600000s 0s, color 600000s 0s;
}
.fb input:autofill { box-shadow: 0 0 0 1000px #3b3834 inset; -webkit-text-fill-color: var(--farbe-hell); caret-color: var(--farbe-hell); }
/* Honeypot (Spam-Schutz): Feld liegt weit ausserhalb des Bildschirms. Echte Besucher sehen und erreichen
es nie, Bots füllen es aus. Nicht mit display:none verstecken, das erkennen manche Bots. */
.fb-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Meldungen nach dem Senden ----------
Danke-Text (Linie links in der Knopffarbe) und Fehlermeldung (rote Linie). */
#danke, #fehler { margin-top: 20px; padding: 14px 18px; border-left: 4px solid var(--akzent); background: rgba(255,255,255,.1); border-radius: 4px; }
#danke:focus { outline: none; }
#danke h2 { margin: 0 0 6px; font-size: 1.4rem; }
#danke p { margin: 0; }
#danke .danke-zurueck { margin-top: 1.4em; } /* "leere Zeile" vor dem Link */
#danke .danke-zurueck a { font-weight: 700; }
#fehler { border-left-color: #d9534f; }
/* Link im Text: normal (durchgezogen) unterstrichen, in der Textfarbe --farbe-text (Schrift = Linie).
Für punktiert: text-decoration-style: dotted.
Nur Einzel-Eigenschaften, und die Linienfarbe als "currentColor" (= Farbe des Links) statt var(...):
Mit var(...) zeigte das iPhone (iOS 18) bei einer früheren Seite keine Linie. */
.fb a { color: var(--farbe-text); text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
@media (max-width: 520px) {
.fb-felder { grid-template-columns: 1fr; }
}