/* =================================================
AUTOCOMPLETE CONTAINER
================================================= */

.autocomplete-list{
    position:absolute;
    top:calc(100% - 1px);
    left:0;
    width:95%;

    z-index:9999;

    border-radius:14px;
    border:1px solid #ddd;
    border-top:none;

    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    background:#fff;
}

/* EINTRÄGE */
.autocomplete-item{
    padding:12px 16px;
    transition:background 0.15s ease;
    display:flex;
    align-items:center;
    gap:10px;
}

/* HOVER */
.autocomplete-item:hover{
    background:#f1f5ff;
}

/* AKTIV (Tastatur) */
.autocomplete-item.active{
    background:#e7f0ff;
}

.form-group{
    position:relative;
}


/* =================================================
FORMULAR STYLING
================================================= */

/* DATE FELD */
input[type="date"] {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 20px;
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
  color: #333;
}

/* TEXTAREA */
.textarea-container textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 18px;
  font-family: Verdana, Arial, sans-serif;
  resize: vertical;
}

/* SELECT */
.form-container select {
  width: 100%;
  padding: 8px 10px;
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form-container .select {
  position: relative;
  flex: 1;
}

.form-container .select::after {
  content: "▼";
  font-size: 12px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #555;
}

.form-container {
  max-width: 700px;
  margin: 30px auto;
  padding: 20px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 20px;
}

.form-container .flex {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  justify-content: center;
  align-items: center;
}

.form-container h2 {
  margin-bottom: 20px;
  text-decoration: underline;
  font-size: 20px;
  color: #000;
}

.form-container label {
  display: block;
  margin-bottom: 15px;
  font-weight: bold;
  color: #444;
}

.form-container input[type="text"] {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 5px;
  font-size: 20px;
  box-sizing: border-box;
}

.form-container .flex {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.form-container .tiny {
  width: 80px;
}

.form-container .short {
  flex: 1;
}

.form-container .long {
  width: 100%;
}

.error-message{
display:block;
color:red;
font-size:14px;
margin-top:5px;
}

input.error,
textarea.error,
select.error{
border:2px solid red;
}

.form-group{
margin-bottom:25px;
}