/* ============================================================================= ORTSSUCHE IM KONTAKTBEREICH ยท gemeinsamjung.de/kontakt Gehoert in die style.css der Website (oder bleibt diese Datei und wird im eingebunden). Alle Klassen tragen das Praefix `gjo-`, damit nichts mit den bestehenden Regeln kollidiert. Gebaut fuer eine Karte auf dunkelgruenem Grund, wie der Abschnitt "So erreichen Sie uns". Den Hintergrund des Abschnitts setzt diese Datei NICHT -- der kommt weiter von der Website. ============================================================================= */ .gjo-karte { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 38px 40px; color: #fff; text-align: center; } .gjo-karte h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.6rem; font-weight: 400; line-height: 1.2; margin: 0 0 10px; } .gjo-karte > p { color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.55; margin: 0 auto 26px; max-width: 34ch; } /* ---------- Das Feld ---------- Ein Feld fuer beides, Postleitzahl oder Ort. Wer seine Postleitzahl nicht im Kopf hat -- bei dieser Zielgruppe der haeufigere Fall -- tippt den Ortsnamen und waehlt aus der Liste. */ .gjo-form { max-width: 380px; margin: 0 auto; text-align: left; } .gjo-label { display: block; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: 8px; } /* Traegt die Vorschlagsliste. Ohne position:relative haengt sie am Rand der Karte statt unter dem Feld. */ .gjo-feldzeile { position: relative; } .gjo-feld { width: 100%; box-sizing: border-box; padding: 16px 20px; border-radius: 14px; border: 2px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; font-family: inherit; font-size: 1.05rem; transition: border-color .25s, background .25s; } .gjo-feld::placeholder { color: rgba(255,255,255,.55); } .gjo-feld:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.16); } /* Die Liste steht auf weissem Grund, nicht im Glas: Ortsnamen muss man lesen koennen, und 60 Prozent Deckkraft auf Dunkelgruen kann das nicht. */ .gjo-liste { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; list-style: none; margin: 0; padding: 5px; background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.28); /* Bis zu 50 Vorschlaege, und nie hoeher als der Bildschirm. */ max-height: min(58vh, 430px); overflow-y: auto; } .gjo-liste[hidden] { display: none; } .gjo-treffer { padding: 12px 16px; border-radius: 10px; cursor: pointer; color: #1a1a1a; line-height: 1.35; } .gjo-treffer b { display: block; font-weight: 600; font-size: 1rem; } .gjo-treffer span { display: block; font-size: .84rem; color: #8a8a8a; } .gjo-treffer:hover, .gjo-treffer.an { background: #e8f5ec; } .gjo-mehr { padding: 10px 16px 6px; font-size: .82rem; color: #8a8a8a; border-top: 1px solid rgba(0,0,0,.07); margin-top: 4px; } .gjo-stand { font-size: .82rem; color: rgba(255,255,255,.7); margin: 8px 0 0; min-height: 1.2em; } /* ---------- Der Knopf ---------- Weiss auf Gruen, wie "Jetzt anrufen" daneben: der Online-Weg soll nicht zweite Klasse aussehen. */ .gjo-knopf { width: 100%; margin-top: 18px; cursor: pointer; background: #fff; color: #1a5c2a; border: none; padding: 16px 32px; border-radius: 50px; font-family: inherit; font-size: 1rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .25s, box-shadow .25s; } .gjo-knopf:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.22); } .gjo-knopf:disabled { opacity: .6; cursor: not-allowed; } .gjo-knopf svg { width: 17px; height: 17px; } /* ---------- Die Antwort ---------- Weisser Kasten im gruenen Feld: die Aussage "wir sind bei Ihnen da" ist das Ergebnis der ganzen Eingabe und darf nicht aussehen wie eine Fussnote. */ .gjo-ergebnis { margin-top: 20px; padding: 20px 22px; border-radius: 16px; background: #fff; color: #1a1a1a; text-align: left; border-left: 5px solid #1a5c2a; } .gjo-ergebnis[hidden] { display: none; } .gjo-ergebnis strong { display: block; font-size: 1.05rem; margin-bottom: 5px; } .gjo-ergebnis p { font-size: .92rem; color: #5a5a5a; line-height: 1.55; margin: 0; } .gjo-ergebnis a { color: #1a5c2a; } /* Noch nicht versorgt: Gold statt Gruen. Keine Absage, ein anderer Weg. */ .gjo-ergebnis.warten { border-left-color: #c9a253; } .gjo-ergebnis.warnung { border-left-color: #c0392b; } /* Der Knopf im Kasten fuehrt weiter -- gruen gefuellt, weil er hier auf weissem Grund steht und nicht auf dem gruenen der Karte. */ .gjo-ergebnis .gjo-knopf { width: auto; margin-top: 16px; text-decoration: none; background: #1a5c2a; color: #fff; padding: 14px 28px; font-size: .97rem; } .gjo-ergebnis .gjo-knopf:hover { box-shadow: 0 10px 26px rgba(26,92,42,.28); } .gjo-ergebnis .gjo-knopf.hell { background: #c9a253; color: #fff; } .gjo-fuss { font-size: .85rem; color: rgba(255,255,255,.68); margin: 16px 0 0; text-align: center; line-height: 1.5; } .gjo-fuss a { color: #fff; text-decoration: underline; } @media (max-width: 640px) { .gjo-karte { padding: 30px 22px; border-radius: 18px; } .gjo-karte h3 { font-size: 1.4rem; } } /* Wer JavaScript abgeschaltet hat, bekommt den Link statt des Feldes. Ohne diese Regel stuende dort ein Feld, das nichts tut. */ .gjo-ohne-js { display: none; } .gjo-karte.gjo-still .gjo-form { display: none; } .gjo-karte.gjo-still .gjo-ohne-js { display: block; }