/* Waid – Regeln, die für alle Seiten gelten.
   Das Layout selbst steckt in den Inline-Styles der Templates. */

html,
body {
	margin: 0;
	padding: 0;
	background: #fff;
	overflow-x: hidden;
}

body {
	font-family: 'Aeonik', sans-serif;
	font-weight: 500;
	color: #000;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--c-a, #f39041);
}

p {
	margin: 0;
}

/* Überschriften tragen dieselbe Schrift wie der Entwurf – der Rahmen des
   Browsers (Abstand, Fettung, Grösse) darf das Raster nicht verschieben. */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

img {
	max-width: none;
}

/* --- Umschaltung der beiden Entwurfsraster ------------------------------ */

/* Beide Zweige stehen im Markup; sichtbar ist immer nur einer. Die
   Skalierung in waid.js läuft ausschliesslich auf dem sichtbaren Container. */
@media (min-width: 1024px) {

	#waid-mobile {
		display: none !important;
	}
}

@media (max-width: 1023.98px) {

	#waid-page {
		display: none !important;
	}
}

/* --- Farbkombi-Wähler --------------------------------------------------- */

/* Die gewählte Kombination bekommt einen Ring. Er liegt ausserhalb der
   Schaltfläche, damit der zweifarbige Punkt darunter unverdeckt bleibt. */
[data-waid-pick][aria-pressed="true"] {
	outline: 4px solid #c6c6c6;
	outline-offset: 2.5px;
}

/* --- Termine: erst ein Teil, der Rest auf «Mehr» ------------------------ */

[data-waid-termin-mehr] {
	display: none;
}

/* Gibt es nichts nachzuladen, braucht es den Knopf nicht. */
[data-waid-mehr="0"] {
	display: none;
}

[data-waid-mehr] {
	cursor: pointer;
}

/* --- Formular ----------------------------------------------------------- */

input,
textarea,
button,
select {
	font-family: 'Aeonik', sans-serif;
	font-weight: 500;
	color: #000;
}

input::placeholder,
textarea::placeholder {
	color: #9a9a9a;
}

input:focus,
textarea:focus {
	outline: none;
	border-bottom-color: var(--c-a, #f39041);
}

/* --- Zugänglichkeit ----------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--c-a, #f39041);
	outline-offset: 3px;
}

.waid-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.waid-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 10px 16px;
	background: #fff;
	font: 500 16px/1 'Aeonik', sans-serif;
	color: #000;
}

.waid-skip-link:focus {
	left: 0;
}

/* --- Eingangsanimation --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Solange das Menü offen ist, steht der Hintergrund still. */
body.waid-menu-open {
	overflow: hidden;
}

/* --- Terminfenster ------------------------------------------------------- */

/* Das Pluszeichen öffnet, das gedrehte Zeichen schliesst. Beim Antippen zieht
   der Browser sonst einen Rahmen darum – am Telefon bleibt er stehen. Wer mit
   der Tastatur unterwegs ist, sieht ihn weiterhin (:focus-visible). */
[data-waid-fenster-auf],
[data-waid-fenster-zu] {
	-webkit-tap-highlight-color: transparent;
}

[data-waid-fenster-auf]:focus:not(:focus-visible),
[data-waid-fenster-zu]:focus:not(:focus-visible) {
	outline: none;
}