/* Anfrageformular und Bestätigungsdialog.
   Schrift und Farben kommen von Astra (Lora 19px, Anton für Überschriften,
   #484848 und #6a6a6a), hier steht nur, was Astra nicht regelt. */

.da-form{
	max-width:820px;
	margin:0 auto;
}

.da-form__raster{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:20px 22px;
}
.da-form__feld--voll{grid-column:1 / -1;}
.da-form__feld{display:flex;flex-direction:column;min-width:0;}

.da-form label{
	font-size:15px;
	line-height:1.4;
	margin-bottom:6px;
	color:#484848;
}
.da-form__stern{color:#a83a2c;margin-left:2px;}

.da-form input[type="text"],
.da-form input[type="email"],
.da-form input[type="tel"],
.da-form input[type="date"],
.da-form select,
.da-form textarea{
	width:100%;
	padding:11px 13px;
	font-family:inherit;
	font-size:17px;
	line-height:1.5;
	color:#484848;
	background:#fff;
	border:1px solid #dbdbdb;
	border-radius:0;
	transition:border-color .15s ease;
	-webkit-appearance:none;
	appearance:none;
}
.da-form select{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23484848' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 14px center;
	background-size:12px;
	padding-right:38px;
}
.da-form textarea{resize:vertical;min-height:150px;}

.da-form input:focus,
.da-form select:focus,
.da-form textarea:focus{
	outline:none;
	border-color:#484848;
	box-shadow:0 0 0 2px rgba(72,72,72,.12);
}
.da-form input[type="file"]{
	font-size:15px;
	padding:9px 0;
	color:#6a6a6a;
}
.da-form input[type="file"]::file-selector-button{
	font-family:inherit;
	font-size:15px;
	padding:8px 14px;
	margin-right:12px;
	border:1px solid #dbdbdb;
	background:#f4f2ee;
	color:#484848;
	cursor:pointer;
}

.da-form__hinweis{
	font-size:14px;
	line-height:1.45;
	color:#9d9d9d;
	margin-top:6px;
}
.da-form__fehler{
	font-size:14px;
	line-height:1.45;
	color:#a83a2c;
	margin-top:6px;
}
.da-form__feld--fehlerhaft input,
.da-form__feld--fehlerhaft select,
.da-form__feld--fehlerhaft textarea{border-color:#a83a2c;}

/* Einwilligung */
.da-form__checkbox{
	display:flex;
	align-items:flex-start;
	gap:11px;
	font-size:15px;
	line-height:1.55;
	color:#6a6a6a;
	cursor:pointer;
	margin-bottom:0;
}
.da-form__checkbox input{
	flex:0 0 auto;
	width:19px;height:19px;
	margin-top:2px;
	accent-color:#484848;
}
.da-form__checkbox a{color:#484848;}

.da-form__pflichthinweis{
	font-size:14px;
	color:#9d9d9d;
	margin:16px 0 0;
}

/* Honigtopf: nie sichtbar, aber nicht display:none, damit Bots ihn finden */
.da-form__honig{
	position:absolute !important;
	left:-9999px !important;
	width:1px;height:1px;
	overflow:hidden;
}

/* Absenden */
.da-form__aktion{
	display:flex;
	align-items:center;
	gap:16px;
	flex-wrap:wrap;
	margin-top:26px;
}
.da-form__button{
	font-family:inherit;
	font-size:17px;
	line-height:1.2;
	padding:14px 30px;
	color:#fff;
	background:#484848;
	border:1px solid #484848;
	cursor:pointer;
	transition:background .15s ease;
}
.da-form__button:hover{background:#2f2f2f;border-color:#2f2f2f;}
.da-form__button:focus-visible{outline:3px solid #484848;outline-offset:3px;}
.da-form__button[disabled]{opacity:.55;cursor:default;}
.da-form__lade{font-size:15px;color:#6a6a6a;}

.da-form__meldung{
	margin-top:20px;
	padding:14px 16px;
	font-size:16px;
	line-height:1.55;
	border:1px solid #a83a2c;
	background:#f7e6e3;
	color:#a83a2c;
}

/* ---------- Bestätigungsdialog ---------- */
.da-dialog{
	position:fixed;
	inset:0;
	z-index:99999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(30,30,30,.55);
	opacity:0;
	transition:opacity .2s ease;
}
.da-dialog[hidden]{display:none;}
.da-dialog.ist-offen{opacity:1;}
.da-dialog__box{
	background:#fff;
	max-width:560px;
	width:100%;
	max-height:88vh;
	overflow-y:auto;
	padding:38px 36px 32px;
	position:relative;
	transform:translateY(10px);
	transition:transform .2s ease;
	box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.da-dialog.ist-offen .da-dialog__box{transform:translateY(0);}
.da-dialog__titel{
	margin:0 0 16px;
	font-size:27px;
	line-height:1.3;
}
.da-dialog__box p{
	margin:0 0 14px;
	font-size:16.5px;
	line-height:1.7;
	color:#6a6a6a;
}
.da-dialog__schritte{
	list-style:none;
	margin:20px 0 24px;
	padding:0;
	counter-reset:ds;
}
.da-dialog__schritte li{
	counter-increment:ds;
	display:grid;
	grid-template-columns:26px 1fr;
	gap:10px;
	font-size:15.5px;
	line-height:1.6;
	color:#6a6a6a;
	padding:9px 0;
	border-top:1px solid #ebebeb;
}
.da-dialog__schritte li::before{
	content:counter(ds) ".";
	color:#484848;
}
.da-dialog__schliessen{
	font-family:inherit;
	font-size:16px;
	padding:12px 26px;
	color:#fff;
	background:#484848;
	border:1px solid #484848;
	cursor:pointer;
}
.da-dialog__schliessen:focus-visible{outline:3px solid #484848;outline-offset:3px;}
.da-dialog__x{
	position:absolute;
	top:12px;right:14px;
	width:38px;height:38px;
	font-size:26px;
	line-height:1;
	color:#9d9d9d;
	background:none;
	border:0;
	cursor:pointer;
}
.da-dialog__x,
.da-dialog__x:hover,
.da-dialog__x:focus,
.da-dialog__x:active{background:transparent !important;background-image:none !important;box-shadow:none;}
.da-dialog__x{color:#9d9d9d !important;}
.da-dialog__x:hover{color:#484848 !important;}
.da-dialog__x:focus-visible{outline:2px solid #484848;outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
	.da-dialog,.da-dialog__box{transition:none;}
}

/* ---------- Mobil ---------- */
@media (max-width:767px){
	.da-form__raster{grid-template-columns:1fr;gap:18px;}
	.da-form input[type="text"],
	.da-form input[type="email"],
	.da-form input[type="tel"],
	.da-form input[type="date"],
	.da-form select,
	.da-form textarea{font-size:16px;} /* verhindert das Hineinzoomen in iOS */
	.da-form__button{width:100%;}
	.da-dialog__box{padding:30px 22px 26px;}
	.da-dialog__titel{font-size:23px;}
}

/* ================= Eigene Auswahl- und Datumsfelder =================
   Die nativen Felder bleiben im Formular und werden nur visuell versteckt,
   damit ohne JavaScript alles wie gewohnt funktioniert. */

.da-versteckt{
	position:absolute !important;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
	opacity:0;
	pointer-events:none;
}

.da-auswahl,
.da-datum{position:relative;}

/* gemeinsamer Auslöser */
.da-auswahl__knopf,
.da-datum__knopf{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:11px 13px !important;
	font-family:inherit;
	font-size:17px;
	line-height:1.5;
	text-align:left;
	color:#484848;
	background:#fff;
	border:1px solid #dbdbdb;
	border-radius:0;
	cursor:pointer;
}
/* Astra faerbt jeden button beim Ueberfahren weiss ein und gibt ihm einen
   eigenen Hintergrund. Fuer diese Bedienelemente wird das zurueckgenommen,
   sonst verschwindet der Text auf grauer Flaeche. */
.da-auswahl__knopf,
.da-auswahl__knopf:hover,
.da-auswahl__knopf:focus,
.da-auswahl__knopf:active,
.da-datum__knopf,
.da-datum__knopf:hover,
.da-datum__knopf:focus,
.da-datum__knopf:active{
	background:#fff !important;
	background-image:none !important;
	color:#484848 !important;
	box-shadow:none;
}
.da-auswahl__knopf.ist-leer,
.da-auswahl__knopf.ist-leer:hover,
.da-auswahl__knopf.ist-leer:focus,
.da-datum__knopf.ist-leer,
.da-datum__knopf.ist-leer:hover,
.da-datum__knopf.ist-leer:focus{color:#9d9d9d !important;}

.da-auswahl__knopf:hover,
.da-datum__knopf:hover{border-color:#b9b9b9;}
.da-auswahl__knopf:focus-visible,
.da-datum__knopf:focus-visible{
	outline:none;
	border-color:#484848;
	box-shadow:0 0 0 2px rgba(72,72,72,.12) !important;
}
.da-auswahl__knopf::after{
	content:"";
	flex:0 0 auto;
	width:11px;height:7px;
	background:currentColor;
	clip-path:polygon(0 0,100% 0,50% 100%);
	transition:transform .15s ease;
}
.da-auswahl.ist-offen .da-auswahl__knopf::after{transform:rotate(180deg);}
.da-datum__knopf::after{
	content:"";
	flex:0 0 auto;
	width:17px;height:17px;
	border:1.5px solid currentColor;
	border-top-width:5px;
	border-radius:2px;
	opacity:.75;
}
.da-form__feld--fehlerhaft .da-auswahl__knopf,
.da-form__feld--fehlerhaft .da-datum__knopf{border-color:#a83a2c;}

/* Auswahlliste */
.da-auswahl__liste{
	position:absolute;
	top:calc(100% + 4px);
	left:0;right:0;
	z-index:60;
	margin:0;padding:5px 0;
	list-style:none;
	max-height:290px;
	overflow-y:auto;
	background:#fff;
	border:1px solid #dbdbdb;
	box-shadow:0 8px 26px rgba(0,0,0,.13);
}
.da-auswahl__eintrag{
	padding:10px 14px;
	font-size:16.5px;
	line-height:1.45;
	color:#484848;
	cursor:pointer;
}
.da-auswahl__eintrag--platzhalter{color:#9d9d9d;}
.da-auswahl__eintrag.ist-markiert{background:#f4f2ee;}
.da-auswahl__eintrag[aria-selected="true"]{
	background:#484848;
	color:#fff;
}

/* Kalender */
.da-datum__kalender{
	position:absolute;
	top:calc(100% + 4px);
	left:0;
	z-index:60;
	width:min(330px,calc(100vw - 40px));
	padding:14px;
	background:#fff;
	border:1px solid #dbdbdb;
	box-shadow:0 8px 26px rgba(0,0,0,.13);
}
.da-datum__kopf{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-bottom:10px;
}
.da-datum__monat{
	font-size:16.5px;
	color:#484848;
}
.da-datum__pfeil{
	width:34px;height:34px;
	padding:0 !important;
	margin:0;
	font-size:21px;
	line-height:1;
	color:#484848;
	background:none;
	border:1px solid #dbdbdb;
	border-radius:0;
	cursor:pointer;
}
.da-datum__pfeil,
.da-datum__pfeil:hover,
.da-datum__pfeil:focus,
.da-datum__pfeil:active{
	background:#fff !important;
	background-image:none !important;
	color:#484848 !important;
	box-shadow:none;
}
.da-datum__pfeil:hover{background:#f4f2ee !important;}
.da-datum__pfeil:focus-visible{outline:2px solid #484848;outline-offset:2px;}

.da-datum__gitter{
	width:100%;
	border-collapse:collapse;
	table-layout:fixed;
}
.da-datum__gitter th{
	padding:6px 0;
	font-size:12.5px;
	font-weight:normal;
	color:#9d9d9d;
	text-transform:none;
	letter-spacing:0;
	background:none;
	border:0;
	white-space:nowrap;
}
.da-datum__gitter td{
	padding:1px;
	border:0;
	text-align:center;
}
.da-datum__tag{
	width:100%;
	aspect-ratio:1;
	min-height:38px;
	/* Astra gibt Buttons 15px/30px Innenabstand mit, das sprengt die Zelle */
	padding:0 !important;
	margin:0;
	font-family:inherit;
	font-size:15.5px;
	line-height:1;
	white-space:nowrap;
	color:#484848;
	background:none;
	border:1px solid transparent;
	border-radius:0;
	cursor:pointer;
}
.da-datum__tag,
.da-datum__tag:hover,
.da-datum__tag:focus,
.da-datum__tag:active{
	background:transparent !important;
	background-image:none !important;
	color:#484848 !important;
	box-shadow:none;
}
.da-datum__tag:hover:not([disabled]){background:#f4f2ee !important;}
.da-datum__tag:focus-visible{outline:2px solid #484848;outline-offset:-2px;}
.da-datum__tag[disabled],
.da-datum__tag[disabled]:hover{color:#cfcfcf !important;cursor:default;}
.da-datum__tag.ist-heute{border-color:#dbdbdb;}
.da-datum__tag.ist-gewaehlt,
.da-datum__tag.ist-gewaehlt:hover,
.da-datum__tag.ist-gewaehlt:focus{
	background:#484848 !important;
	color:#fff !important;
	border-color:#484848;
}

@media (max-width:767px){
	.da-auswahl__knopf,
	.da-datum__knopf{font-size:16px;}
	.da-datum__kalender{width:min(330px,calc(100vw - 32px));}
	.da-datum__tag{min-height:42px;}
}
@media (prefers-reduced-motion:reduce){
	.da-auswahl__knopf::after{transition:none;}
}