/* ======================================================================================
   FORMS FIELDS BASIS-STYLES (Ganz oben in der Datei einfügen) - ehemals in "formate.css"
   ====================================================================================== */

/* 1. GRUND-LAYOUT FÜR DAS FORMULAR */
.formular form {
    padding-top: 1em; 
    color: #666; 
    clear: both;
}

/* 2. FIELDSET & HINTERGRUND-BILD */
.formular fieldset {
    position: relative; 
    border: none; 
    padding: 10px; /* Einheitlich mit dem Mobile-Puffer */
    /* Kombiniert deine Hintergrundfarbe mit dem transparenten blauen GIF */
    background: #eff3f7 url('/resources/images/feedback_trans_blue.gif') no-repeat bottom right;
    box-sizing: border-box;
}

/* 3. LEGENDE (Überschrift im Fieldset) */
.formular legend {
    font-weight: bold;
    line-height: normal;
    font-size: 1.2em; 
    color: #777; 
    padding-bottom: 5px; 
    margin: 0 0 0 10px;				
}

/* 4. LABELS (Beschriftungen über den Feldern) */
.formular label {
    display: block; 
    margin-top: 15px;
    color: #666;
}

/* 5. INPUT-FELDER (Name, Email, Selects) */
/* Wir fassen alle einzeiligen Felder zusammen, damit sie exakt 
   die gleiche Breite wie unser Nachrichten-Kasten (310px) haben. */
.formular input[type='text'], 
.formular input[type='email'], 
.formular select {
    display: inline-block;
    width: 100%; 
    max-width: 310px;    /* Deckelung für Desktop - wird im Media-Query aufgehoben */
    height: 32px;        /* Minimal erhöht für bessere Touch-Bedienung */
    padding: 0 8px;      /* Etwas mehr seitliche Luft für Text */
    color: #666;
    border: 1px solid #ccc; /* Ein Standard-Rahmen für Name/Email */
    border-radius: 2px;
    box-sizing: border-box;
    line-height: 1.61em; /* Safari Fix für Selects */
    vertical-align: middle;
}

/* Spezial-Korrektur für Textareas, falls sie außerhalb des Highlighters genutzt werden */
.formular textarea {
    width: 100%;
    max-width: 310px;
    box-sizing: border-box;
    color: #666;
}

/* ==========================================================================
   CHECKBOX CUSTOM STYLES (Das "Häkchen"-System)
   ========================================================================== */

/* 1. DIE ECHTEN CHECKBOXEN VERSTECKEN 
   Wir nutzen eigene Labels als Klick-Fläche, daher brauchen wir die 
   Standard-Boxen nicht. */

/* 1. DIE KLICKBARKEIT (Standard-Checkbox verstecken) */
input#accept, input#remember_me {display: none !important;}

/* 2. DAS QUADRAT (Die Box selbst) */
label.checkmark { 
    display: inline-block !important;
    position: relative;
    width: 18px;
    height: 18px;
    outline: 2px solid #305c9e;
    background: #ebebde;
    margin: 5px 15px 5px 2px;
    cursor: pointer;
    transition: background-color 0.3s;
	/* NEU: Ausrichtung an der Oberkante des Textes */
    vertical-align: top !important; 
    top: 2px; /* Schiebt die Box auf die exakte Höhe der ersten Textzeile */
}

/* 3. DER TEXT (Das Span daneben) */
label.checkmark + span {
    display: inline-block !important;
    width: calc(100% - 40px); /* Gibt dem Text Raum zum Umbrechen */
    font-size: 14px;
    color: #666;
    line-height: 1.4;          /* Angenehmer Zeilenabstand für Mehrzeiler */
    vertical-align: top !important;
    cursor: pointer;
}

/* 4. HOVER-EFFEKT */
label.checkmark:hover {background-color: #5d9ccc;}

/* 5. DAS HÄKCHEN (Das "L" im Inneren) */
label.checkmark:after {
    content: "";
    position: absolute; /* Absolut innerhalb der 18px Box */
    display: none;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #5b51a4;
    border-width: 0 3px 3px 0;
    /* Nur noch diese eine Zeile für alle Browser nötig: */
    transform: rotate(45deg);
}

/* 6. ZUSTAND: CHECKED (Blaues Quadrat & Häkchen zeigen) */
input#accept:checked ~ label.accept, 
input#remember_me:checked ~ label.remember_me {
    background-color: #2196F3;
}

input#accept:checked ~ label.accept:after, 
input#remember_me:checked ~ label.remember_me:after {
    display: block;
}

/* --- VALIDIERUNGS-EFFEKT (Roter Rahmen um Checkbox bei Fehler) --- */
/* 2. DER ALARM: Wird vom JavaScript für 3 Sekunden "scharf" geschaltet */
/* WICHTIG: Die Schreibweise muss exakt wie im JS sein (RedCheckbox) */
label.checkmark.RedCheckbox {
    outline-color: #d81912 !important; 
    xxtransition: outline-color 0.2s ease;
}
/* ----------- CHECKBOX STYLES [END] ----------- */



/* --- 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 */
}

.hp-wrapper { /* Honeypot */
    position: absolute;
    left: -9999px; /* Schiebt es aus dem Bildschirm */
    width: 1px;
    height: 1px;
    overflow: hidden;
}



/* ==========================================================================
   DAS PERFEKTE HIGHLIGHTING-SETUP (GHOST-INPUT-PATTERN)
   ========================================================================== */
/* 
  ⚠️ MERKSTÜTZE: DAS CARET-GLEICHGEWICHT (SYNC-CHECK) ⚠️
  Dieses Design basiert auf zwei exakt übereinanderliegenden Ebenen.
  Wenn der Cursor (Caret) beim Tippen nach rechts eilt oder versetzt ist:

  1. BORDER-CHECK: Beidseitig 'box-sizing: border-box' nutzen. Jede Änderung 
     der Border-Dicke (z.B. von 1px auf 2px) muss im Wrapper erfolgen, 
     damit der Innenraum für beide Textebenen identisch bleibt.
  
  2. PADDING-SYNC: 'padding-right' muss im #message und .hl-backdrop 
     immer exakt gleich sein (z.B. 28px für die Scrollbar), sonst 
     verschiebt sich der Zeilenumbruch und der Cursor "flieht".

  3. DRIFT-KORREKTUR: 
     - Cursor eilt VORAUS (rechts): #message { letter-spacing: -0.01px; }
     - Cursor hinkt HINTERHER (links): #message { letter-spacing: 0.01px; }

  4. SCHRIFT-STARRHEIT: 'font-kerning: none' und 'geometricPrecision' 
     verhindern, dass der Browser Buchstaben unterschiedlich breit berechnet.*/

/* 
  ⚠️ MERKSTÜTZE: VERTIKALER SYNC (ZEILEN-CHECK) ⚠️
  Falls die Markierungen in Zukunft (z.B. in Firefox) vertikal wandern:
  
  1. ZEILENHÖHE: Prüfe, ob 'line-height' (24px) in beiden Elementen 
     (#message & .hl-backdrop) identisch und mit !important gesetzt ist.
  
  2. STARTPUNKT: 'padding-top' (10px) muss absolut gleich sein.
  
  3. DER TEST: Schreibe ein Spam-Wort in Zeile 1 und Zeile 10. Sitzt die 
     Markierung unten tiefer oder höher als oben, weichen die Zeilenhöhen 
     der Browser voneinander ab. In diesem Fall 'line-height' nachjustieren.*/


/* ==========================================================================
   1. DER WRAPPER (Der feste Rahmen-Anker)
   ========================================================================== */
.hl-wrapper {
	z-index: 1; /* Basis */
    position: relative;
    width: 310px;
    height: 150px;
    margin: 0 0 20px 0;
    background-color: #647882;
    border: 2px solid #5d608e !important; /* Identisch zu Name/Email */
    overflow: hidden;
    box-sizing: border-box !important;
}
/* Wenn IRGENDWAS im Wrapper (die Textarea) angeklickt wird, 
   ändert der ÄUßERE RAHMEN seine Farbe. 
   Fokus-Zustand: Nutzt Schatten als "optische" 3. Border-Linie */
.hl-wrapper:focus-within {	
	border-color: #66afe9 !important; /* Die Farbe der Linie ändert sich */
    /* Dieser Schatten liegt direkt AUßEN an der Border an und lässt 
       sie dicker wirken, ohne das Element zu vergrößern: */
    box-shadow: 0 0 0 1px #66afe9 !important; 
}

/* Der Schatten-Layer (Standardmäßig unsichtbar) */
.hl-wrapper::after {
	z-index: 2; /* Über dem Text, aber unter dem Scrollbalken */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    transition: box-shadow 0.3s ease;
    box-shadow: none;
}

/* --- DYNAMISCHE SCHATTEN-EFFEKTE (Scroll-Indikatoren) --- */
/* Der Schatten von UNTEN (zeigt an: Text geht unten weiter) */
.hl-wrapper.shadow-bottom::after { 
    /* x=0 | y=-15px (nach oben gerichtet) | blur=12px | spread=-12px (begrenzt die Ausbreitung) */
    box-shadow: inset 0 -15px 12px -12px rgba(0,0,0,0.5); 
}
/* Der Schatten von OBEN (zeigt an: Man kann nach oben scrollen) */
.hl-wrapper.shadow-top::after { 
	/* x=0 | y=15px (nach unten gerichtet) | blur=12px | spread=-12px (hält den Schatten flach) */
    box-shadow: inset 0 15px 12px -12px rgba(0,0,0,0.5); 
}
/* KOMBINIERTER SCHATTEN (zeigt an: Text ist oben UND unten versteckt) */
.hl-wrapper.shadow-both::after { /* Kombiniert beide Schatten-Definitionen mit einem Komma getrennt */
    box-shadow: inset 0 15px 12px -12px rgba(0,0,0,0.3), inset 0 -15px 12px -12px rgba(0,0,0,0.5); 
}


/* ==========================================================================
   2. GEMEINSAME REGELN (DER ABSOLUTE ANKER)
   ========================================================================== */
.hl-backdrop, #message {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 10px 26px 10px 10px !important; 
    xxpadding: 10px 22px 10px 10px !important; /* Rechts 22px Platz für den 12px Custom-Balken */
    box-sizing: border-box !important;
    /* SCHRIFT-PRÄZISION (Starr gegen Cursor-Drift) */
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    scrollbar-width: none !important;    
    /* VERTIKAL-ANKER: Zwingt den Cursor auf die Textzeile */
    vertical-align: top !important;
    /* HORIZONTAL-ANKER: Verhindert das Weglaufen nach rechts */
    letter-spacing: 0px !important;
    font-kerning: none !important;
    font-variant-ligatures: none !important;
    text-rendering: geometricPrecision !important;
    /* BOX-VERHALTEN */
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-y: scroll !important;
    scrollbar-width: none !important; /* Versteckt Standard-Balken */
	/* RESET: Hier darf KEINE Border und KEIN Schatten sein */
    border: none !important;
    outline: none !important;
	box-shadow: none !important;
    background: transparent !important;
    /* Verhindert System-Einfärbungen in Chrome/Safari */
    -webkit-appearance: none;
    appearance: none;
}

/* Chrome/Safari Scrollbar-Killer */
.hl-backdrop::-webkit-scrollbar, #message::-webkit-scrollbar { display: none !important; }


/* ==========================================================================
   3. SPEZIFISCHE ANPASSUNGEN
   ========================================================================== */
   
/* RADIKALER RESET: Säubert Browser-Standard-Styles für alle Ebenen */
#message, .hl-backdrop, .hl-wrapper {
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
   
/* EBENE 1: DAS BACKDROP (Hintergrund-Ebene - Hier wird der gespiegelte Text und "Spam-Leuchten" angezeigt. */
.hl-backdrop {
	z-index: 1; /* Ganz unten: Hier leuchtet der Spam */
    color: #ffffff !important; /* Sichtbarer weißer Text für den Nutzer */
    /* SICHERHEITS-RESERVE: Zwingt das Div zur Transparenz. 
    Das verhindert, dass Browser-Standardfarben (z.B. Weiß) 
    deinen schönen grauen Wrapper-Hintergrund überlagern. */
    background-color: transparent !important;
}

/* EBENE 2: DIE TEXTAREA (Cursor & Eingabe-Schicht) */
#message {
 	z-index: 3; /* Über dem Backdrop UND über dem Schatten, damit der Cursor sichtbar bleibt */
    background: transparent !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    caret-color: #ffffff !important;
	
	border: none !important;      /* Verhindert (innerer) Standard-Rahmen */
    outline: none !important;     /* Verhindert Fokus-Ring (Firefox) */
    box-shadow: none !important;  /* Verhindert Leuchten (Chrome/Safari) */
    resize: none !important;      /* Verhindert die Zieh-Ecke */
	/* Minimaler Korrekturwert gegen horizontalen Drift am Zeilenende */
	/*letter-spacing: -0.01px !important; */
}

/* DAS HIGHLIGHTING (Spam-Farben im Backdrop) */
#hl-backdrop mark {
	z-index: 1; /* Stellt sicher, dass es im Backdrop sichtbar bleibt */
    xbackground-color: rgba(255, 0, 0, 0.5) !important; /* Kräftigeres Rot */
    xbackground-color: rgba(255, 77, 77, 0.1) !important; /* Nur ein ganz hauchzarter roter Schimmer */
    background-color: rgba(255, 225, 0, 0.15) !important; /* Hauchzarter gelber Schimmer - füllt die Fläche hinter dem Buchstaben mit Farbe */
    text-shadow: 0 0 4px rgba(255, 204, 0, 0.4); /* Gelb mit minimalem "Glow-Effekt" */
    color: #ffffff !important;
    xborder-bottom: 2px solid #902602;
    /* Eine feine gelbe Linie direkt unter dem Wort */
    border-bottom: 2px solid #ffcc00 !important;
    font: inherit !important;
}


/* ==========================================================================
   4. CUSTOM SCROLLBAR (Die Steuerungs-Ebene)
   ========================================================================== */

/* Der Hintergrund des Balkens - die "Spur", in der der Balken läuft */
#custom-scrollbar {
	z-index: 4; 		/* Höchste Ebene (Über dem Schatten-Layer) für Klicks/Drag */
  	position: absolute;
    top: 0;      		/* Von ganz oben */
    bottom: 0;   		/* Bis ganz unten */
    right: 0;    		/* Schiebt den Balken direkt an den rechten Rand */   
    background: rgba(255, 255, 255, 0.1);
    opacity: 0; 		/* Erscheint erst bei Hover/Fokus (siehe unten) */
    transition: opacity 0.3s;
    width: 16px; 		/* Etwas breiter für die Pfeile */
}

/* Der bewegliche Teil (Thumb) */
#scroll-thumb {
	z-index: 100 !important; /* NEU: Schiebt ihn über Text, Schatten und Backdrop */
    position: absolute;
    
    /* WICHTIG für Mobile Chrome/Safari: */
    touch-action: none;       /* NEU: Verhindert, dass das Handy die Seite scrollt, wenn du den Balken ziehst */
    pointer-events: auto !important; /* NEU: Stellt sicher, dass er Klicks/Touch annimmt */
    user-select: none !important;    /* Verhindert Markieren beim Ziehen */
    -webkit-user-select: none; 
    
    width: 10px;          /* Kräftigere Breite für bessere Griffigkeit */
    right: 3px;           /* Zentrierung: (16px Spur - 10px Thumb) / 2 = 3px */
    background: rgba(255, 255, 255, 0.45); /* Etwas deckender für bessere Sichtbarkeit */
    border-radius: 2px;   /* Etwas kantiger, passend zum 2px Rahmen */
    cursor: grab;
    transition: background 0.2s; /* Sorgt für weiches Aufleuchten */
}

#scroll-thumb:active {
    cursor: grabbing;
    background: rgba(255, 255, 255, 0.8); /* Wird heller beim Ziehen */
}

/* Macht den Balken beim Drüberfahren sichtbarer */
#custom-scrollbar:hover {background: rgba(255, 255, 255, 0.2);}

.scroll-arrow {
    position: absolute;
    width: 100%;
    height: 10px;
    line-height: 10px;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    cursor: pointer;   
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05); /* Dezenter Hintergrund für den Pfeil-Kasten */
    font-size: 9px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
    /* Verhindert das "Blau-Werden" durch Markierung */
    user-select: none; 
    -webkit-user-select: none; /* Für Safari/Chrome */
    -moz-user-select: none;    /* Für Firefox */
    -ms-user-select: none;     /* Für alte Edge-Versionen */
}
 
.scroll-arrow.up { top: 0; }
.scroll-arrow.down { bottom: 0; }
/* Balken nur zeigen, wenn im Feld gearbeitet wird */
.hl-wrapper:hover #custom-scrollbar,
.hl-wrapper:focus-within #custom-scrollbar {opacity: 1;}

/* TEST-MODUS (Löschen wenn fertig!) */
/* .hl-backdrop { color: rgba(255, 0, 0, 0.3) !important; }
   #message { color: #ffffff !important; } */



/* ==========================================================================
   6. MOBILE ANPASSUNG (Responsive & Landscape-Safe)
   ========================================================================== */
   /* Die erneute Zuweisung von width: 100% im Mobile-Block ist deine Lebensversicherung, damit der Cursor auch auf einem iPhone 13 oder 
    * einem alten Android-Tablet nicht neben den Buchstaben springt.*/
@media (max-width: 950px) {
    /* 1. CONTAINER-RESET: Sprengt die Blockade von fieldset & form */
    fieldset, form, #feedback_form {
        display: table !important; 	/* Der "Geheimtrick" für Stretching in Chrome */
        width: 100% !important;	 	/* Nutzt die volle Bildschirmbreite */
        min-width: 0 !important;   	/* Erlaubt das Dehnen in Landscape */
        max-width: none !important;
        padding: 10px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    /* 2. ELEMENT-STRETCHING: Alle Felder UND der Nachrichten-Wrapper nutzen die volle Breite */
    input[type="text"], 
    input[type="email"], 
    .hl-wrapper,
    .hl-backdrop, 
    #message {
        display: block !important;
        /* ⚠️ CARET-SYNC-RESERVE (Handy-Spezifisch):
       	Obwohl die Ebenen oben 'absolute' sind, zwingen wir sie hier erneut 
       	auf 100% Breite des Wrappers. Das verhindert, dass mobile Browser 
       	(z.B. Safari auf iOS) die Ebenen minimal unterschiedlich runden, 
       	was den Cursor sofort neben den Text schieben würde.*/
       	/* Solange das Padding prozentual zur Breite gleich bleibt, läuft auch der Cursor synchron (Caret-Gleichgewicht bleibt erhalten). 
       	Und da Backdrop und Message auf 'position: absolute' stehen, passen sie sich automatisch der neuen Breite des Wrappers an. */
        width: 100% !important;		/* Füllt den verfügbaren Platz im Fieldset aus */
        max-width: none !important; /* Entfernt die 310px-Bremse */
        left: 0 !important;
        top: 0 !important;
        box-sizing: border-box !important; /* Beinhaltet Padding/Border in der Breite */
    }
    /* 3. TOUCH-OPTIMIERUNG: Größere Trefferfläche für Finger */
    .scroll-arrow {
        padding: 5px 0 !important; 		/* Vergrößert die Klickfläche vertikal, ohne das Design zu stören */
        min-height: 25px !important; 	/* Spürbar besser für Daumen-Bedienung */
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Blendet das Hintergrundbild auf Bildschirmen unter 768px Breite aus */
@media only screen and (max-width: 768px) {
    .formular fieldset {background-image: none !important;}
}
/* 4. LANDSCAPE-SPEZIAL: Platz sparen im Querformat */
@media screen and (max-width: 950px) and (orientation: landscape) {
	/* 1. HÖHEN-ANPASSUNG: Mehr Platz für den Senden-Button schaffen */
    .hl-wrapper {
        height: 120px !important; /* Flacher, damit der Submit-Button sichtbar bleibt */
    }
    /* 2. SYNC-CHECK: Da der Kasten kleiner wird, muss der JS-Scrollbalken 
       beim Drehen des Handys sofort neu berechnet werden. 
       Der ResizeObserver im JS sorgt hier automatisch für den Sync des Balkens */
}