/**
 * design-v2.css
 *
 * Neues IGW-Design fuer die Buchungsseite.
 * Wird ausschliesslich geladen, wenn die Seite mit ?design=v2 aufgerufen wird
 * (siehe _init.php / _head.php). Das bisherige Design bleibt davon unberuehrt.
 *
 * Alle Werte stammen aus dem Figma-Export.
 *
 * 1. Design-Tokens
 * 2. Grundlayout / Karten
 * 3. Kalender (Mobiscroll-Reskin)
 * 4. Legende & Fussnote
 * 5. Formular
 * 6. Responsive
 */

/*********************************************************************
 * 1. Design-Tokens
 */

.design-v2 {
	--igw-navy-dark:    #0A1B3F; /* Kartenkopf */
	--igw-navy:         #023E84; /* Primaerfarbe, Buttons, Auswahl */
	--igw-navy-alt:     #00448C;
	--igw-blue-accent:  #0074BC; /* Eyebrow */
	--igw-blue-border:  #81ADDC; /* Feldrahmen */
	--igw-navy-muted:   #8BA3CC; /* Subline im Kartenkopf */

	--igw-surface:      #F8F6F1; /* Kartenflaeche */
	--igw-surface-alt:  #FAF8F4; /* Felder, heller Text auf Navy */
	/* Kalenderzustaende. Auf Kundenwunsch (Sept. 2026) deutlich unterscheidbar
	   statt der zarten Beige-Toene aus dem Figma-Export: gruen = frei,
	   gelb = angefragt, rot = belegt. Zu jeder Flaeche gehoert eine
	   Textfarbe mit ausreichend Kontrast. */
	--igw-free:           #DDF2E3; /* frei (waehlbar) */
	--igw-free-text:      #023E84;
	--igw-requested:      #FFD966; /* angefragt (weiterhin waehlbar) */
	--igw-requested-text: #6B4A00;
	--igw-occupied:       #F0A0A0; /* belegt / gesperrt */
	--igw-occupied-text:  #7F1D1D;
	/* Schraffur fuer belegte Tage (Barrierearmut): der Zustand darf nicht
	   allein an der Farbe haengen, Farbenblinde erkennen ihn am Muster.
	   Helle Streifen, damit die dunkelrote Ziffer lesbar bleibt. */
	--igw-hatch: repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 3px, transparent 3px 7px);

	--igw-text:         #333333;
	--igw-text-label:   #444444;
	--igw-text-muted:   #666666;
	--igw-text-place:   #BBBBBB;

	--igw-radius-card:  16px;
	--igw-radius-field: 8px;
	--igw-radius-btn:   10px;
	--igw-radius-cell:  6px;

	--igw-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	--igw-pad:    28px;  /* Innenabstand der Karten */

	/* Eingebettet per iframe: die Zielseite gibt Rand und Maximalbreite vor,
	   deshalb laeuft der Inhalt hier bis an die Kante. Soll das Formular
	   allein stehen, hier z.B. 1195px und 20px eintragen. */
	--igw-maxw:   none;  /* Maximalbreite des Inhalts */
	--igw-gutter: 0;     /* seitlicher Rand des Inhalts */

	--igw-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/*********************************************************************
 * 2. Grundlayout / Karten
 */

.design-v2,
.design-v2 body {
	background: transparent !important; /* iframe: Hintergrund der Zielseite durchscheinen lassen */
}

.design-v2 body {
	font-family: var(--igw-font);
	color: var(--igw-text);
	margin: 0;
	padding: 0;
}

.design-v2 .igw-intro {
	max-width: var(--igw-maxw);
	margin: 0 auto 32px;
	padding: 0 var(--igw-gutter);
}

.design-v2 .igw-eyebrow {
	margin: 0 0 3px;
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--igw-blue-accent);
}

.design-v2 .igw-heading {
	margin: 0 0 12px;
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	color: var(--igw-navy);
}

.design-v2 .igw-lead {
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	color: var(--igw-text-muted);
}

.design-v2 .igw-grid {
	display: grid;
	grid-template-columns: 579fr 576fr;
	gap: 40px;
	align-items: start;
	max-width: var(--igw-maxw);
	margin: 0 auto;
	padding: 0 var(--igw-gutter);
}

.design-v2 .igw-card {
	background: var(--igw-surface);
	border-radius: var(--igw-radius-card);
	box-shadow: var(--igw-shadow);
	overflow: hidden;
}

.design-v2 .igw-card__hdr {
	min-height: 90px;
	padding: 16px var(--igw-pad);
	background: var(--igw-navy-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.design-v2 .igw-card__title {
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	color: var(--igw-surface-alt);
}

.design-v2 .igw-card__sub {
	font-size: 13px;
	line-height: 17px;
	color: var(--igw-navy-muted);
}

.design-v2 .igw-card__body {
	padding: var(--igw-pad);
}

/* Die Kalenderkarte bekommt ihren Kopf von Mobiscroll (Monatsnavigation). */
.design-v2 .igw-card--cal > .igw-card__body {
	padding: 0 0 var(--igw-pad);
}

/*********************************************************************
 * 3. Kalender (Mobiscroll-Reskin)
 */

.design-v2 .mbsc-fr-inline .mbsc-fr-w,
.design-v2 .mbsc-fr-inline .mbsc-fr-c,
.design-v2 .mbsc-fr-inline .mbsc-fr-persp {
	background: transparent;
	border: 0;
	box-shadow: none;
	font-family: var(--igw-font);
}

/* Kopfzeile: dunkelblauer Balken mit Monatsnavigation */
.design-v2 .mbsc-cal-hdr {
	min-height: 90px;
	padding: 0 12px;
	background: var(--igw-navy-dark);
	border-radius: var(--igw-radius-card) var(--igw-radius-card) 0 0;
	align-items: center;
}

.design-v2 .mbsc-cal-btn-w {
	justify-content: center;
}

.design-v2 .mbsc-cal .mbsc-cal-btn,
.design-v2 .mbsc-cal-month,
.design-v2 .mbsc-cal-year,
.design-v2 .mbsc-cal-hdr .mbsc-cal-txt {
	color: var(--igw-surface-alt);
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
}

/* Pfeil-Buttons kleiner als der Monatstitel */
.design-v2 .mbsc-cal .mbsc-cal-btn.mbsc-cal-prev-m,
.design-v2 .mbsc-cal .mbsc-cal-btn.mbsc-cal-next-m,
.design-v2 .mbsc-cal .mbsc-cal-btn.mbsc-cal-prev-y,
.design-v2 .mbsc-cal .mbsc-cal-btn.mbsc-cal-next-y {
	font-size: 20px;
	opacity: .85;
}

.design-v2 .mbsc-cal .mbsc-cal-btn.mbsc-disabled {
	opacity: .3;
}

/* Innenabstand des Kalenderrasters.

   Muss auf .mbsc-cal-body liegen: die Monatsflaechen (.mbsc-cal-slide) sind
   absolut positioniert und .mbsc-cal-body ist das einzige position:relative
   in der Kette. Padding weiter innen (Scroll-Container) wuerde von den
   Slides ignoriert - dann steht die Wochentagszeile eingerueckt, das
   Tagesraster randlos, und die Nachbarmonate ragen seitlich herein. */
.design-v2 .mbsc-cal-body {
	padding: 0 var(--igw-pad);
}

/* Wochentagszeile */
.design-v2 .mbsc-cal-days {
	padding: 24px 0 8px;
	line-height: 17px;
}

.design-v2 .mbsc-cal-days > div {
	font-size: 13px;
	line-height: 17px;
	font-weight: 500;
	color: var(--igw-text-muted);
	text-transform: none;
}

/* Tageszelle: abgerundetes Rechteck statt Kreis */
.design-v2 .mbsc-cal-day {
	padding: 4px 0;
}

.design-v2 .mbsc-ios .mbsc-cal-day-date,
.design-v2 .mbsc-cal .mbsc-cal-day-date {
	box-sizing: border-box;
	display: block;
	width: 82%;
	max-width: 65px;
	height: 36px;
	margin: 0 auto;
	line-height: 36px;
	border: 0;
	border-radius: var(--igw-radius-cell);
	font-size: 14px;
	font-weight: 400;
	color: var(--igw-free-text);
	background: var(--igw-free); /* Grundzustand: frei */
}

/* Heute nicht besonders hervorheben - der Entwurf kennt keine Sonderfarbe */
.design-v2 .mbsc-cal-today {
	color: var(--igw-navy);
	font-weight: 600;
}

/* Angefragte und belegte Tage: _foot.php haengt ueber die Mobiscroll-Option
   cssClass die Klassen igw-day--angefragt / igw-day--belegt an die Tageszelle,
   es gibt also keinen Inline-Style mehr und die Farben leben nur hier.
   Die Auswahl (weiter unten, !important) gewinnt ueber beide Zustaende. */
.design-v2 .mbsc-cal-day.igw-day--angefragt .mbsc-cal-day-date {
	background: var(--igw-requested);
	color: var(--igw-requested-text);
}

.design-v2 .mbsc-cal-day.igw-day--angefragt .mbsc-cal-day-date:hover {
	background: var(--igw-requested);
	filter: brightness(.94);
}

/* Belegt: Farbe plus Schraffur, damit der Zustand auch ohne
   Farbwahrnehmung von "frei" und "angefragt" zu unterscheiden ist. */
.design-v2 .mbsc-cal-day.igw-day--belegt .mbsc-cal-day-date,
.design-v2 .mbsc-cal-day.mbsc-disabled .mbsc-cal-day-date {
	background-color: var(--igw-occupied);
	background-image: var(--igw-hatch);
	color: var(--igw-occupied-text);
	font-weight: 500;
}

/* Volle Deckkraft erzwingen - sonst blendet Mobiscroll gesperrte Tage auf 20% aus. */
.design-v2 .mbsc-cal-cell.mbsc-disabled .mbsc-cal-cell-txt,
.design-v2 .mbsc-cal-day.mbsc-disabled .mbsc-cal-day-date {
	opacity: 1;
}

.design-v2 .mbsc-cal-day.mbsc-disabled {
	cursor: not-allowed;
}

/* Auswahl und Zeitraum dazwischen: durchgehend dunkelblau,
   der verbindende Balken (::after) entfaellt - der Entwurf zeigt
   einzeln stehende Kacheln. */
.design-v2 .mbsc-cal-day.mbsc-selected .mbsc-cal-day-date,
.design-v2 .mbsc-cal-day.mbsc-cal-day-hl .mbsc-cal-day-date,
.design-v2 .mbsc-cal-row .mbsc-selected .mbsc-cal-cell-txt {
	background: var(--igw-navy) !important;
	color: var(--igw-surface-alt) !important;
	font-weight: 600;
	border-color: transparent !important;
}

.design-v2 .mbsc-cal-day.mbsc-selected::after,
.design-v2 .mbsc-range .mbsc-cal-day.mbsc-selected::after {
	display: none;
}

/* Hover nur auf freien, waehlbaren Tagen */
.design-v2 .mbsc-cal-day:not(.mbsc-disabled):not(.igw-day--angefragt) .mbsc-cal-day-date:hover {
	background: rgba(2, 62, 132, .16);
}

/* Zeilentrenner entfernen - der Entwurf zeigt ein linienloses Raster */
.design-v2 .mbsc-cal-day,
.design-v2 .mbsc-cal-day-i,
.design-v2 .mbsc-cal-row,
.design-v2 .mbsc-cal-days,
.design-v2 .mbsc-cal-days-c,
.design-v2 .mbsc-cal-days > div {
	border: 0;
}

/* Tage ausserhalb des Monats ausblenden (Entwurf zeigt sie nicht).
   showOuterDays:false in _foot.php haengt dafuer .mbsc-cal-hide-diff an. */
.design-v2 .mbsc-cal-day-diff .mbsc-cal-day-date {
	visibility: hidden;
	pointer-events: none;
}

/* Mobiscroll rendert immer sechs Wochenzeilen, damit die Hoehe beim
   Monatswechsel nicht springt. Besteht die letzte Zeile nur aus Tagen des
   Folgemonats, bleibt sonst eine leere Zeile unter dem Raster stehen. */
.design-v2 .mbsc-cal-row:not(:has(.mbsc-cal-day:not(.mbsc-cal-day-diff))) {
	display: none;
}

/* Die von/bis-Schaltflaechen ueber dem Kalender werden im neuen Design
   nicht gebraucht - die Werte stehen in den Feldern Anreise/Abreise. */
.design-v2 .mbsc-range-btn-t,
.design-v2 .mbsc-range-btn-c {
	display: none;
}

/*********************************************************************
 * 4. Legende & Fussnote
 */

.design-v2 .igw-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 28px 0 12px;
	padding: 0 var(--igw-pad);
	list-style: none;
}

.design-v2 .igw-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 16px;
	color: var(--igw-text-muted);
}

.design-v2 .igw-swatch {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	background: var(--igw-occupied);
}

.design-v2 .igw-swatch--frei      { background: var(--igw-free); }
.design-v2 .igw-swatch--angefragt { background: var(--igw-requested); }
.design-v2 .igw-swatch--belegt    { background: var(--igw-hatch), var(--igw-occupied); }
.design-v2 .igw-swatch--sel       { background: var(--igw-navy); }

.design-v2 .igw-note {
	margin: 0;
	padding: 0 var(--igw-pad);
	font-size: 12px;
	line-height: 16px;
	color: var(--igw-text-muted);
}

/*********************************************************************
 * 5. Formular
 *
 * Im neuen Design wird die Mobiscroll-Formularaufwertung nicht aktiviert
 * (das Attribut mbsc-form entfaellt, siehe home.php), die Felder sind also
 * native Elemente und werden hier direkt gestaltet.
 */

.design-v2 .igw-card--form label {
	display: block;
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 17px;
	font-weight: 400;
	color: var(--igw-text-label);
}

.design-v2 .igw-card--form input[type="text"],
.design-v2 .igw-card--form input[type="tel"],
.design-v2 .igw-card--form input[type="email"],
.design-v2 .igw-card--form input[type="number"],
.design-v2 .igw-card--form select,
.design-v2 .igw-card--form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 48px;
	margin-top: 3px;
	padding: 0 14px;
	background: var(--igw-surface-alt);
	border: 1.5px solid var(--igw-blue-border);
	border-radius: var(--igw-radius-field);
	font-family: var(--igw-font);
	font-size: 14px;
	line-height: 18px;
	color: var(--igw-text);
	appearance: none;
	-webkit-appearance: none;
}

.design-v2 .igw-card--form textarea {
	height: 80px;
	padding: 14px;
	resize: vertical;
}

.design-v2 .igw-card--form ::placeholder {
	color: var(--igw-text-place);
	opacity: 1;
}

.design-v2 .igw-card--form select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23AAAAAA' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

.design-v2 .igw-card--form input:focus,
.design-v2 .igw-card--form select:focus,
.design-v2 .igw-card--form textarea:focus {
	outline: none;
	border-color: var(--igw-navy);
	box-shadow: 0 0 0 3px rgba(2, 62, 132, .12);
}

/* Anreise / Abreise nebeneinander */
.design-v2 .igw-daterange {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.design-v2 .igw-daterange > label {
	margin-bottom: 16px;
}

/* Trennlinie aus dem alten Layout wird nicht gebraucht */
.design-v2 .igw-card--form hr {
	display: none;
}

/* Checkbox */
.design-v2 .igw-card--form .form-check,
.design-v2 .igw-card--form .igw-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 24px 0;
	padding: 0;
}

.design-v2 .igw-card--form .form-check-input,
.design-v2 .igw-card--form .igw-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	background: var(--igw-surface-alt);
	border: 1.5px solid var(--igw-navy-alt);
	border-radius: 4px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	position: static;
}

.design-v2 .igw-card--form .form-check-input:checked,
.design-v2 .igw-card--form .igw-check input[type="checkbox"]:checked {
	background: var(--igw-navy);
	border-color: var(--igw-navy);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.5 3.5L11 1' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.design-v2 .igw-card--form .form-check-label,
.design-v2 .igw-card--form .igw-check label {
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--igw-text);
}

/* Zusatzleistungen: Bettwaesche, Handtuecher und Hinweis auf die Endreinigung */
.design-v2 .igw-card--form .igw-extras {
	min-width: 0;
	margin: 24px 0;
	padding: 0;
	border: 0;
}

.design-v2 .igw-card--form .igw-extras__title {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	font-size: 13px;
	line-height: 17px;
	font-weight: 600;
	color: var(--igw-text-label);
}

.design-v2 .igw-card--form .igw-extras .form-check {
	margin: 0 0 12px;
}

.design-v2 .igw-card--form .igw-extras__note {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--igw-text);
}

.design-v2 .igw-card--form .igw-extras__note strong {
	font-weight: 600;
	color: var(--igw-navy);
}

/* Mobiscroll-Restklassen im Markup neutralisieren - die Formularaufwertung
   laeuft im neuen Design nicht, die Klassen stehen aber noch im HTML. */
.design-v2 .igw-card--form .mbsc-form-group {
	margin: 0;
	padding: 0;
}

.design-v2 .igw-card--form .mbsc-btn-group-block {
	border: 0;
	text-align: left;
}

.design-v2 .igw-card--cal .mbsc-form-group {
	margin: 0;
	padding: 0;
}

/* Absende-Button */
.design-v2 .igw-submit {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0;
	background: var(--igw-navy);
	border: 0;
	border-radius: var(--igw-radius-btn);
	font-family: var(--igw-font);
	font-size: 16px;
	line-height: 21px;
	font-weight: 600;
	color: #FFFFFF;
	cursor: pointer;
	transition: background .15s ease-in-out;
}

.design-v2 .igw-submit:hover,
.design-v2 .igw-submit:focus {
	background: var(--igw-navy-alt);
}

/* Bestaetigungsseite nach dem Absenden */
.design-v2 .igw-done {
	max-width: var(--igw-maxw);
	margin: 0 auto;
	padding: var(--igw-pad);
	background: var(--igw-surface);
	border-radius: var(--igw-radius-card);
	box-shadow: var(--igw-shadow);
	text-align: center;
}

.design-v2 .igw-done h1 {
	margin: 0 0 8px;
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	color: var(--igw-navy);
}

.design-v2 .igw-done h2 {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: var(--igw-text-muted);
}

/*********************************************************************
 * 6. Responsive
 */

@media (max-width: 991px) {
	.design-v2 .igw-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 575px) {
	.design-v2 {
		--igw-pad: 18px;
	}

	.design-v2 .igw-heading,
	.design-v2 .igw-card__title,
	.design-v2 .mbsc-cal .mbsc-cal-btn,
	.design-v2 .mbsc-cal-month,
	.design-v2 .mbsc-cal-year {
		font-size: 22px;
		line-height: 30px;
	}

	.design-v2 .mbsc-cal-hdr {
		min-height: 72px;
	}

	.design-v2 .igw-daterange {
		grid-template-columns: 1fr;
		gap: 0;
	}
}