/* --- AJAX ERROR BOX (Optimiert & Modernisiert) --- */ /* Notwendig für die absolute Positionierung der Box */ #feedback_form {position: relative;} /* --- AJAX ERROR BOX (Das schwebende Info-Panel) --- Diese Box wird absolut positioniert, damit sie über dem Formular schwebt und den Senden-Button nicht nach unten wegdrückt. Dank 'pointer-events: none' kann der Nutzer den Button darunter sogar durch die Box hindurch anklicken. */ #ajax_error_box { position: absolute; bottom: 75px; /* Schwebt über dem Senden-Button */ left: 20px; right: 20px; width: auto; /* Nutzt den Platz zwischen left/right */ z-index: 100; /* Zentrierung des Textes */ display: flex; justify-content: center; align-items: center; text-align: center; min-height: 35px; /* Design: Glas-Effekt & Schatten */ background: rgba(0, 0, 0, 0.85); /* Dunkler, edler Kontrast */ border: 2px solid rgba(255, 255, 255, 0.15); /* Dezente Umrandung */ border-radius: 6px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Tiefenwirkung */ /* Schrift & Interaktion */ padding: 6px 12px; font-size: 13px; line-height: 1.3; pointer-events: none; /* Klicks gehen "durch" die Box */ /* Animation: Vorbereitung für sanftes Einblenden */ opacity: 0; visibility: hidden; /* Verhindert Interaktion im unsichtbaren Zustand */ transition: opacity 0.4s ease-in-out, transform 0.4s ease-out; transform: translateY(10px); /* Startet leicht nach unten versetzt */ } /* ZUSTAND: Wenn die Box per JavaScript aktiviert wird */ #ajax_error_box.visible { opacity: 1; visibility: visible; transform: translateY(0); /* Gleitet sanft nach oben auf die Endposition */ } /* --- FEHLERMELDUNGEN (Labels) --- Sorgt dafür, dass Fehlermeldungen (z.B. "Ungültige E-Mail") dezent neben oder unter dem Label erscheinen, ohne das restliche Formular-Layout zu verschieben. */ span.error { display: inline-block; /* Erlaubt Abstände (Margin/Padding) */ color: #ff0000; /* Klares Signal-Rot */ margin-left: 10px; /* Kleiner Abstand zum Label-Text */ font-size: 11px; /* Etwas kleiner als der Haupttext */ font-weight: bold; /* Bessere Lesbarkeit auf Distanz */ vertical-align: middle; /* Richtet den Text mittig zum Label aus */ } /* DER WRAPPER (Das neue "Gesicht" deines Textfeldes) */ .hl-wrapper { position: relative; width: 100%; /* Passe 'max-width' an deine anderen Felder (z.B. Name/Email) an */ max-width: 310px; xx height:150px; min-height: 150px !important; margin: 10px 0 20px 0; background-color: #647882; /* Hintergrund grau */ border: 1px solid #5d608e; /* Der sichtbare Rahmen */ border-radius: 3px; overflow: hidden; /* Verhindert Überlaufen */ box-sizing: border-box !important; clear: both; } /* Fokus-Effekt für den Wrapper, wenn man ins Feld klickt */ .hl-wrapper:focus-within { border-color: #66afe9; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); } /* GEMEINSAME REGELN FÜR TEXTAREA UND BACKDROP (Absolut identisch!) */ .hl-backdrop, #message { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 150px !important; /* Gleiche feste Höhe wie der Wrapper */ margin: 0 !important; padding: 10px !important; /* Exakt gleicher Innenabstand */ box-sizing: border-box !important; /* Schrift-Einstellungen (MÜSSEN identisch sein für Deckungsgleichheit) */ font-family: sans-serif !important; /* Gleiche Font-Familie zwingend! */ xxfont-size: 16px !important; line-height: 24px !important; /* EXAKTER WERT statt 1.5 */ white-space: pre-wrap !important; word-wrap: break-word !important; border: none !important; /* Kein eigener Rahmen mehr */ outline: none !important; /* Kein Browser-Standard-Rahmen */ /* Verhindert horizontales Flackern */ overflow-x: hidden !important; } /* --- MODERNES TEXTAREA-HIGHLIGHTING (GHOST-INPUT-PATTERN) --- Tricks: Die Textarea oben ist komplett transparent, damit beim Scrollen nichts ruckelt. Nur der blinkende Schreib-Strich (Caret) bleibt sichtbar. Der eigentliche Text und die Markierungen liegen im Backdrop darunter. */ .hl-backdrop { /* SPEZIFISCH FÜR DAS BACKDROP (Hintergrund-Ebene) */ /* Hier muss der Text jetzt SICHTBAR sein, da die Textarea transparent ist */ color: #ffffff !important; background-color: transparent !important; z-index: 1; /* Liegt direkt unter der Textarea */ overflow-y: auto; pointer-events: none; /* Klicks gehen durch zum Textfeld */ } #message { /* SPEZIFISCH FÜR DIE TEXTAREA (Vordergrund-Ebene) */ background: transparent !important; /* Durchsichtig für Backdrop */ color: transparent !important; /* Text unsichtbar machen - Verhindert "Doppelkonturen" beim Scrollen */ caret-color: #ffffff !important; /* Macht den Schreib-Strich wieder sichtbar */ z-index: 2; /* Liegt oben zum Tippen */ resize: none !important; /* Vorerst 'none' für perfekte Deckung */ /* Verhindert horizontales Zucken */ } /* 1. BASIS-STYLING (Allgemein) Dieses 'mark' dient als globales Sicherheitsnetz. Falls du später an anderer Stelle auf deiner Website (z.B. in einer Suche) ein benutzt, hat es hier bereits ein sauberes Grunddesign (Roter Balken, schwarze Schrift). */ mark { /* DAS HIGHLIGHTING (Die Markierung) */ background-color: #ffcccc !important; /* helles Rot für den Hintergrund */ color: #000 !important; /* Sichtbarer Text (da Textarea oben transparent ist) */ border-bottom: 2px solid red; border-radius: 1px; padding: 1px 0; } /* 2. SPEZIAL-STYLING (Nur für den Spam-Backdrop) Diese Regel ist "stärker" (spezifischer). Sie überschreibt das Basis-Styling gezielt nur innerhalb deiner Textarea-Markierung. So kannst du hier feinere Farben (wie das transparente RGBA-Rot) wählen, ohne andere Markierungen auf der Website zu beeinflussen. */ /* Das Styling für die markierten Spam-Wörter */ #hl-backdrop mark { /* transparentes Rot (RGBA), damit Text darunter gut lesbar bleibt */ background-color: rgba(255, 0, 0, 0.2) !important; /* Ein feiner roter Rand unten drunter für die "Warn-Optik" */ border-bottom: 2px solid #930; /* Unterstreichung für Warn-Optik */ border-radius: 3px; /* Abgerundete Ecken für modernen Look */ padding: 1px 0; /* Damit Markierung nicht am Buchstaben klebt */ color: #ffcccc !important; /* Textfarbe INNERHALB der Markierung (wichtig!) */ } /* --- SCROLLBAR-SYNC (Optische Bereinigung) --- Da Backdrop und Textarea exakt übereinanderliegen, würden ohne diese Regeln zwei Scrollbalken gleichzeitig erscheinen. Wir verstecken die Scrollbar im Hintergrund-Element (Backdrop), damit der Nutzer nur die eine, echte Scrollbar der Textarea sieht. Das verhindert optisches "Zucken" und Verschiebungen der Markierungen. */ .hl-backdrop::-webkit-scrollbar { /* Spezifisch für Chrome, Safari und alle mobilen Browser (iOS/Android) */ display: none; } .hl-backdrop { -ms-overflow-style: none; /* Versteckt Scrollbar in IE/Edge */ scrollbar-width: none; /* Versteckt Scrollbar in Firefox */ } .hp-wrapper { /* Honeypot */ position: absolute; left: -9999px; /* Schiebt es aus dem Bildschirm */ width: 1px; height: 1px; overflow: hidden; } /* MOBILE ANPASSUNG (Aus deinem alten CSS übernommen) */ @media (max-width: 775px) { .hl-wrapper {max-width: 100% !important;} }