/* * Schurz Kontaktformular – Frontend * * Das Design folgt der Website: Arial, klare Kanten ohne Rundungen, * Überschriften und Beschriftungen in Versalien, Grün als einzige Signalfarbe. * * Farben und Kantenform kommen als CSS-Variablen aus den Einstellungen und * werden im vor dieser Datei gesetzt. Die Werte hier sind nur Rückfall, * falls die Variablen einmal fehlen. */ .skf { --skf-gruen: #4f6f43; --skf-gruen-dunkel: #2f4429; --skf-gruen-hauch: rgba(79, 111, 67, 0.07); --skf-titel: #111111; --skf-text: #333333; --skf-muted: #777777; --skf-linie: #d9d5cc; --skf-feld-bg: #ffffff; --skf-flaeche: #faf8f4; --skf-fehler: #a8321f; --skf-radius: 0px; --skf-label-caps: uppercase; --skf-label-space: 0.1em; width: 100%; color: var(--skf-text); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; text-align: left; } .skf *, .skf *::before, .skf *::after { box-sizing: border-box; } /* Eigener Rahmen – nur wenn das Formular nicht schon in einer Karte steht. */ .skf--karte { background: var(--skf-feld-bg); border: 1px solid var(--skf-linie); border-radius: var(--skf-radius); padding: clamp(24px, 4vw, 48px); } .skf-titel { margin: 0 0 14px; color: var(--skf-titel); font-size: clamp(24px, 3vw, 34px); line-height: 1.1; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; } .skf-einleitung { margin: 0 0 28px; color: var(--skf-muted); font-size: 17px; line-height: 1.7; } /* ────────────────────────────────────────────────────────────────────────── Formular und Felder ────────────────────────────────────────────────────────────────────────── */ .skf-form { display: block; margin: 0; } .skf-pflichthinweis { margin: 0 0 26px; color: var(--skf-muted); font-size: 13px; line-height: 1.5; } .skf-feld { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; } .skf-zeile--zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; } .skf-label, .skf-legende { display: block; margin: 0 0 9px; padding: 0; color: var(--skf-titel); font-size: 13px; line-height: 1.4; font-weight: 900; text-transform: var(--skf-label-caps); letter-spacing: var(--skf-label-space); } .skf-stern { margin-left: 4px; color: var(--skf-gruen); font-weight: 900; letter-spacing: 0; } .skf-optional { margin-left: 4px; color: var(--skf-muted); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; } .skf .skf-eingabe { display: block; width: 100%; max-width: 100%; margin: 0; padding: 14px 16px; background: var(--skf-feld-bg); color: var(--skf-text); border: 1px solid var(--skf-linie); border-radius: var(--skf-radius); font-family: inherit; /* 16px verhindert, dass iOS beim Antippen hineinzoomt. */ font-size: 16px; line-height: 1.5; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } .skf-eingabe::placeholder { color: #a3a099; opacity: 1; } .skf-eingabe:hover { border-color: #bdb8ad; } .skf-eingabe:focus { outline: none; border-color: var(--skf-gruen); box-shadow: 0 0 0 3px var(--skf-gruen-hauch); } .skf-textfeld { min-height: 120px; resize: vertical; } .skf-textfeld--klein { min-height: 62px; } /* ────────────────────────────────────────────────────────────────────────── Auswahl als Klappliste ────────────────────────────────────────────────────────────────────────── */ .skf-auswahl { margin-bottom: 30px; } .skf-legende-hinweis { margin: -3px 0 10px; color: var(--skf-muted); font-size: 13px; line-height: 1.5; } .skf-dd { position: relative; } /* Das zusammengeklappte Feld sieht aus wie ein Auswahlfeld. */ .skf .skf-dd-feld { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 14px 16px; background: var(--skf-feld-bg); color: var(--skf-text); border: 1px solid var(--skf-linie); border-radius: var(--skf-radius); font-size: 16px; line-height: 1.5; cursor: pointer; user-select: none; list-style: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Den vorgegebenen Aufklapp-Pfeil der Browser abschalten. */ .skf-dd-feld::-webkit-details-marker { display: none; } .skf-dd-feld::marker { content: ""; } .skf-dd-feld:hover { border-color: #bdb8ad; } .skf-dd-feld:focus-visible { outline: none; border-color: var(--skf-gruen); box-shadow: 0 0 0 3px var(--skf-gruen-hauch); } .skf-dd[open] > .skf-dd-feld { border-color: var(--skf-gruen); } .skf-dd-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--skf-text); } /* Solange nichts gewählt ist, steht dort nur der Platzhalter. */ .skf-dd-text.ist-leer { color: #a3a099; } .skf-dd-pfeil { flex: 0 0 auto; width: 9px; height: 9px; margin-top: -4px; border: solid var(--skf-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.18s ease, margin 0.18s ease; } .skf-dd[open] .skf-dd-pfeil { margin-top: 4px; transform: rotate(-135deg); } /* * Die Liste legt sich über den folgenden Inhalt statt ihn wegzuschieben – * so verhält sie sich wie ein gewohntes Auswahlfeld. */ .skf-dd-liste { position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 30; max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--skf-feld-bg); border: 1px solid var(--skf-gruen); border-radius: var(--skf-radius); box-shadow: 0 16px 38px rgba(28, 33, 22, 0.14); } .skf-dd-eintrag { display: flex; align-items: flex-start; gap: 13px; margin: 0; padding: 13px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); cursor: pointer; transition: background-color 0.12s ease; } .skf-dd-eintrag:last-child { border-bottom: 0; } .skf-dd-eintrag:hover { background: var(--skf-flaeche); } .skf-dd-eintrag--sonstiges { border-top: 1px solid var(--skf-linie); background: var(--skf-flaeche); } .skf-dd-eintrag:has(.skf-dd-eingabe:checked), .skf-dd-eintrag.ist-gewaehlt { background: var(--skf-gruen-hauch); } /* Wie bei den Marken: gegen weitreichende Theme-Regeln abgesichert. */ .skf .skf-dd-eingabe { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; } .skf .skf-dd-marke { position: relative; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; background: var(--skf-feld-bg); border: 1px solid #b6b1a6; border-radius: var(--skf-radius); transition: background-color 0.15s ease, border-color 0.15s ease; } .skf-dd-marke--rund { border-radius: 50%; } .skf-dd-marke::after { content: ""; position: absolute; opacity: 0; transition: opacity 0.12s ease; } .skf-dd-marke:not(.skf-dd-marke--rund)::after { top: 3px; left: 6px; width: 5px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(43deg); } .skf-dd-marke--rund::after { top: 50%; left: 50%; width: 8px; height: 8px; background: #ffffff; border-radius: 50%; transform: translate(-50%, -50%); } .skf-dd-eingabe:checked ~ .skf-dd-marke { background: var(--skf-gruen); border-color: var(--skf-gruen); } .skf-dd-eingabe:checked ~ .skf-dd-marke::after { opacity: 1; } .skf-dd-eingabe:focus-visible ~ .skf-dd-marke { outline: 2px solid var(--skf-gruen); outline-offset: 2px; } .skf-dd-inhalt { display: block; min-width: 0; } .skf-dd-label { display: block; color: var(--skf-titel); font-size: 15px; line-height: 1.35; font-weight: 700; } .skf-dd-beschreibung { display: block; margin-top: 2px; color: var(--skf-muted); font-size: 13px; line-height: 1.5; font-weight: 400; } /* ────────────────────────────────────────────────────────────────────────── Hinweisfelder unter der Liste ────────────────────────────────────────────────────────────────────────── */ .skf-hinweise { margin-top: 18px; } .skf-hinweis-block { margin-bottom: 16px; padding-left: 14px; border-left: 3px solid var(--skf-gruen); } .skf-hinweis-block:last-child { margin-bottom: 0; } /* * Ohne JavaScript stehen alle Hinweisfelder offen da – lieber sichtbar als * unerreichbar. Sobald das Skript läuft, setzt es diese Klasse und zeigt nur * noch die Felder der ausgewählten Punkte. */ .skf-hinweise--gesteuert .skf-hinweis-block { display: none; } .skf-hinweise--gesteuert .skf-hinweis-block.ist-aktiv { display: block; animation: skf-einblenden 0.2s ease; } @keyframes skf-einblenden { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .skf-hinweis-label { display: block; margin: 0 0 7px; color: var(--skf-titel); font-size: 12px; line-height: 1.4; font-weight: 900; text-transform: var(--skf-label-caps); letter-spacing: var(--skf-label-space); } /* Der Punkt, zu dem das Feld gehört – damit die Zuordnung klar bleibt. */ .skf-hinweis-thema { display: block; margin-bottom: 3px; color: var(--skf-gruen); font-size: 12px; letter-spacing: var(--skf-label-space); } .skf-hinweis-block.skf-feld--fehler { border-left-color: var(--skf-fehler); } .skf-hinweis-block.skf-feld--fehler .skf-eingabe { border-color: var(--skf-fehler); } /* ────────────────────────────────────────────────────────────────────────── Datenschutz ────────────────────────────────────────────────────────────────────────── */ .skf-datenschutz { margin-top: 30px; margin-bottom: 26px; padding: 18px 20px; background: var(--skf-flaeche); border: 1px solid var(--skf-linie); border-radius: var(--skf-radius); } .skf-datenschutz.skf-feld--fehler { border-color: var(--skf-fehler); background: rgba(168, 50, 31, 0.05); } .skf-schalter { display: flex; align-items: flex-start; gap: 13px; margin: 0; cursor: pointer; } .skf .skf-schalter-eingabe { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; } .skf .skf-schalter-marke { position: relative; flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px; background: var(--skf-feld-bg); border: 1px solid #b6b1a6; border-radius: var(--skf-radius); transition: background-color 0.15s ease, border-color 0.15s ease; } .skf-schalter-marke::after { content: ""; position: absolute; top: 3px; left: 7px; width: 5px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(43deg); opacity: 0; transition: opacity 0.12s ease; } .skf-schalter-eingabe:checked ~ .skf-schalter-marke { background: var(--skf-gruen); border-color: var(--skf-gruen); } .skf-schalter-eingabe:checked ~ .skf-schalter-marke::after { opacity: 1; } .skf-schalter-eingabe:focus-visible ~ .skf-schalter-marke { outline: 2px solid var(--skf-gruen); outline-offset: 2px; } .skf-schalter-text { color: var(--skf-text); font-size: 14.5px; line-height: 1.6; } .skf-datenschutz-link { color: var(--skf-gruen); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .skf-datenschutz-link:hover { color: var(--skf-gruen-dunkel); } /* ────────────────────────────────────────────────────────────────────────── Button ────────────────────────────────────────────────────────────────────────── */ .skf-absenden { margin-top: 4px; } .skf .skf-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 16px 40px; background: var(--skf-gruen); color: #ffffff; border: 0; border-radius: var(--skf-radius); font-family: inherit; font-size: 14px; font-weight: 900; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s ease, transform 0.08s ease; -webkit-appearance: none; appearance: none; } .skf-button:hover { background: var(--skf-gruen-dunkel); } .skf-button:active { transform: translateY(1px); } .skf-button:focus-visible { outline: 2px solid var(--skf-gruen-dunkel); outline-offset: 3px; } .skf-button[disabled] { opacity: 0.72; cursor: progress; } .skf-button-laeuft { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #ffffff; border-radius: 50%; animation: skf-drehen 0.7s linear infinite; } @keyframes skf-drehen { to { transform: rotate(360deg); } } /* ────────────────────────────────────────────────────────────────────────── Meldungen ────────────────────────────────────────────────────────────────────────── */ .skf-meldung { margin: 0 0 24px; padding: 15px 18px; background: rgba(168, 50, 31, 0.06); border-left: 3px solid var(--skf-fehler); color: var(--skf-fehler); font-size: 14.5px; line-height: 1.55; font-weight: 700; } .skf-meldung[hidden], .skf-danke[hidden], .skf-feldfehler[hidden], .skf-form[hidden] { display: none; } .skf-feldfehler { margin: 7px 0 0; color: var(--skf-fehler); font-size: 13px; line-height: 1.45; font-weight: 700; } .skf-feldfehler--auswahl { margin-top: 10px; } .skf-feld--fehler > .skf-eingabe { border-color: var(--skf-fehler); } .skf-auswahl.skf-feld--fehler .skf-dd-feld { border-color: var(--skf-fehler); } .skf-feld--fehler > .skf-label, .skf-feld--fehler > .skf-legende { color: var(--skf-fehler); } /* ────────────────────────────────────────────────────────────────────────── Bestätigung ────────────────────────────────────────────────────────────────────────── */ .skf-danke { padding: 34px 32px; background: var(--skf-flaeche); border: 1px solid var(--skf-linie); border-left: 3px solid var(--skf-gruen); border-radius: var(--skf-radius); } .skf-danke:focus { outline: none; } .skf-danke-haken { position: relative; display: block; width: 44px; height: 44px; margin-bottom: 20px; background: var(--skf-gruen); border-radius: 50%; } .skf-danke-haken::after { content: ""; position: absolute; top: 12px; left: 17px; width: 9px; height: 18px; border: solid #ffffff; border-width: 0 3px 3px 0; transform: rotate(43deg); } .skf-danke-titel { margin: 0 0 10px; color: var(--skf-titel); font-size: clamp(21px, 2.6vw, 27px); line-height: 1.2; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; } .skf-danke-text { margin: 0; color: var(--skf-muted); font-size: 16px; line-height: 1.7; } /* ────────────────────────────────────────────────────────────────────────── Honigtopf – für Menschen unsichtbar, für Bots verlockend ────────────────────────────────────────────────────────────────────────── */ .skf-honigtopf { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* ────────────────────────────────────────────────────────────────────────── Kleine Bildschirme ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .skf-zeile--zwei { grid-template-columns: minmax(0, 1fr); gap: 0; } .skf-dd-eintrag { padding: 13px 14px; gap: 12px; } .skf-dd-liste { max-height: 60vh; } .skf-datenschutz { padding: 16px 15px; } .skf-button { width: 100%; padding: 16px 24px; } .skf-danke { padding: 26px 20px; } } /* Wer Animationen abgeschaltet hat, bekommt keine. */ @media (prefers-reduced-motion: reduce) { .skf *, .skf *::before, .skf *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }