/*
 * Mobilansicht der fuenf Seiten im neuen Design.
 *
 * WARUM ES DIESE DATEI BRAUCHT
 * Das Design wurde in Elementor nur fuer die Desktop-Breite gebaut. Elementor
 * legt Gestaltung je Bildschirmgroesse getrennt ab und erzeugt dafuer eigene
 * Dateien (local-{id}-frontend-mobile.css) - fuer diese fuenf Seiten gibt es
 * keine. Nachgemessen: im Ordner uploads/elementor/css/ existiert zu keiner
 * eine Mobil-Fassung. Deshalb galten auf dem Handy unveraendert die
 * Desktop-Werte: 108px hohe Ueberschriften auf 375px Bildschirmbreite,
 * drei- und vierspaltige Raster, 40px Seitenrand. Die Seite lief seitlich aus
 * dem Bild, Woerter brachen mitten im Wort um, die Kopfzeile ueberlappte sich.
 *
 * WARUM NICHT IM ELEMENTOR-EDITOR
 * Der Live-Server kann Elementors Gestaltungsdateien nicht selbst erzeugen
 * (siehe [[druckio-neues-design-stand]]). Jede Editor-Aenderung muesste
 * ohnehin von Hand als Datei hochgeladen werden - eine eigene Datei ist der
 * kuerzere und nachvollziehbarere Weg.
 *
 * WOHER DIE WERTE STAMMEN
 * Nicht geschaetzt, sondern aus den erzeugten Elementor-Dateien ALLER fuenf
 * Seiten ausgelesen: jede Klasse mit Schriftgroesse ab 18px, jeder Seitenrand
 * ab 30px, jedes mehrspaltige Raster, jede Mindesthoehe ab 300px. Die langen
 * Klassenlisten unten sind deshalb vollstaendig, nicht beispielhaft.
 *
 * WICHTIG BEI SPAETEREN AENDERUNGEN
 * Die Klassennamen (.l1a2b3c) vergibt Elementor selbst und wuerfelt sie neu,
 * sobald eine Seite im Editor umgebaut wird. Nach groesseren Design-
 * Aenderungen gehoert diese Datei neu erzeugt, sonst greifen die Regeln ins
 * Leere. Zwei Dinge sind bewusst ausgenommen:
 *   - Raster "26px 1fr" (Nummer + Text der Ablaufschritte) bleiben zweispaltig
 *   - die Logo-Schrift behaelt ihre Groesse
 */

/*
 * Die Streifen-Schaltflaeche selbst. Steht ausserhalb der Media-Query, weil
 * sie auf breiten Bildschirmen ausgeblendet bleiben muss - dort traegt die
 * Kopfzeile ihre Navigationspunkte wie gewohnt nebeneinander.
 */
.dk-burger {
	display: none;
}

@media (max-width: 767px) {

/*
 * "!important" ist hier noetig, nicht bequem: Das Eltern-Theme gestaltet
 * JEDEN <button> (blaue Flaeche, eigener Radius, kein Rahmen) und setzt
 * ausserdem die Hoehe innenliegender Elemente zurueck - gemessen: die drei
 * Streifen kamen ohne diese Zeilen mit 0 Pixel Hoehe an und waren unsichtbar.
 */
.dk-burger {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 5px !important;
	width: 44px !important;
	min-width: 44px !important;
	height: 44px !important;
	padding: 11px 10px !important;
	background: transparent !important;
	border: 1px solid #353a43 !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	cursor: pointer;
	flex: none !important;
}

.dk-burger span {
	display: block !important;
	height: 2px !important;
	min-height: 2px !important;
	width: 100% !important;
	background: #f0f1f3 !important;
	border-radius: 2px !important;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Aufgeklappt: die drei Streifen werden zum Kreuz. */
.dk-kopf.is-menue-offen .dk-burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg) !important;
}

.dk-kopf.is-menue-offen .dk-burger span:nth-child(2) {
	opacity: 0 !important;
}

.dk-kopf.is-menue-offen .dk-burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg) !important;
}

}

@media (max-width: 767px) {

/* Nichts darf seitlich aus dem Bild laufen. */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

/*
 * Alles, was nebeneinander steht, darf umbrechen. Ohne diese Zeile schieben
 * zwei Schaltflaechen oder vier Navigationspunkte die Seite ueber den Rand.
 */
.elementor .e-flexbox-base,
.elementor .e-div-block-base {
	flex-wrap: wrap;
}

/*
 * Kopfzeile: Logo links, Streifen-Schaltflaeche rechts, Menue klappt darunter
 * auf. Die Klassen dk-kopf / dk-kopf-menue und die Schaltflaeche selbst setzt
 * neues-design-mobilmenue.js - dort steht auch, warum die Kopfzeile ueber
 * ihren Aufbau statt ueber Klassennamen gefunden wird.
 */
.elementor .dk-kopf {
	justify-content: space-between !important;
	align-items: center !important;
	gap: 0 !important;
}

.elementor .dk-kopf > a[href="/"] {
	order: 1;
}

.dk-burger {
	order: 2;
}

/* Zugeklappt. Aufgeklappt steht das Menue in voller Breite unter dem Logo. */
.elementor .dk-kopf-menue {
	display: none !important;
	order: 3;
	width: 100%;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 6px !important;
	padding-top: 14px;
}

.elementor .dk-kopf.is-menue-offen .dk-kopf-menue {
	display: flex !important;
}

/* Die Navigationspunkte stecken in einer eigenen Gruppe innerhalb des
   Menues - auch die muss untereinander stehen. */
.elementor .dk-kopf-menue > div {
	width: 100%;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 4px !important;
}

.elementor .dk-kopf-menue a {
	text-align: center !important;
}

/*
 * Die Schaltflaechen im Hero waren rechtsbuendig - sinnvoll neben einer
 * zweiten Spalte, aber nicht, wenn alles untereinander steht.
 */
.elementor .la8ecc2 {
	justify-content: flex-start !important;
}

/*
 * Das gruene Band unter dem Hero ("AB 1 STUECK", "FUENF VERFAHREN IM HAUS"
 * usw.). Auf dem Desktop stehen die fuenf Punkte in einer Zeile. Mobil
 * brachen sie zu zweit um, wodurch Zeilen unterschiedlicher Laenge
 * entstanden und nicht mehr erkennbar war, was zusammengehoert. Jetzt
 * bekommt jeder Punkt seine eigene Zeile.
 */
.elementor .le0da37 {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 10px !important;
}

/*
 * Der Verfahrenswaehler bekommt seine Umbrueche schon in
 * neues-design-verfahrenswaehler.css (ab 900px). Hier faellt nur die feste
 * Mindesthoehe weg - sie stammt vom hoechsten Desktop-Panel und hinterlaesst
 * auf dem Handy eine grosse leere Flaeche.
 */
.vw-panel.is-active {
	min-height: 0 !important;
}

	/* 132px -> 44px */
	.elementor .led8f35,
	.elementor .ldabdf9,
	.elementor .lb9a0e1,
	.elementor .l2833a4,
	.elementor .l9b9ab6 {
		font-size: 44px !important;
		letter-spacing: -0.02em !important;
	}

	/* 108px -> 38px */
	.elementor .ld59f89,
	.elementor .l2b0789,
	.elementor .l4819a4 {
		font-size: 38px !important;
		letter-spacing: -0.02em !important;
	}

	/* 76/72px -> 32px */
	.elementor .la73760,
	.elementor .l4a7acf,
	.elementor .l2b220e,
	.elementor .la201da,
	.elementor .l8a3124 {
		font-size: 32px !important;
		letter-spacing: -0.02em !important;
	}

	/* 62px -> 29px */
	.elementor .le27731 {
		font-size: 29px !important;
		letter-spacing: -0.02em !important;
	}

	/* 54/50px -> 27px */
	.elementor .la3f090,
	.elementor .lbec8c0,
	.elementor .l0462a8,
	.elementor .l4b007b {
		font-size: 27px !important;
		letter-spacing: -0.02em !important;
	}

	/* 36/34px -> 21px */
	.elementor .l5b273b,
	.elementor .l4d569e,
	.elementor .l61e96d,
	.elementor .l44cf8b,
	.elementor .l437b50,
	.elementor .la79278,
	.elementor .lb98323,
	.elementor .l142c77,
	.elementor .l00e62b {
		font-size: 21px !important;
		letter-spacing: -0.02em !important;
	}

	/* 32/30px -> 20px */
	.elementor .l9e5696,
	.elementor .le8f9f7 {
		font-size: 20px !important;
	}

	/* 26/24px -> 18px */
	.elementor .l59576c,
	.elementor .lbe38de,
	.elementor .leb8003,
	.elementor .ldf19d4,
	.elementor .l20a576,
	.elementor .l181b07,
	.elementor .lf95b18,
	.elementor .le02acd,
	.elementor .lb3d41e,
	.elementor .l4497e2,
	.elementor .l2b9560,
	.elementor .l37a4d9,
	.elementor .l4f0c57,
	.elementor .l69933d,
	.elementor .l55e331,
	.elementor .l2ddea3,
	.elementor .l0bdebb,
	.elementor .l000201,
	.elementor .ld0bcc0,
	.elementor .l1e1d0d,
	.elementor .l440a60,
	.elementor .l442376 {
		font-size: 18px !important;
	}

	/* 22/21/20/19/18.5px -> 16.5px */
	.elementor .l6c10c0,
	.elementor .l7231a1,
	.elementor .lfd6ddb,
	.elementor .l790f8a,
	.elementor .l6fb029,
	.elementor .lf50033,
	.elementor .l056ace,
	.elementor .l97d7b2,
	.elementor .l507921,
	.elementor .l31a2b3,
	.elementor .l9a240a,
	.elementor .lfba008,
	.elementor .l0e74c1,
	.elementor .ld93839,
	.elementor .l7e3eb4,
	.elementor .l6e148b,
	.elementor .la25c7f,
	.elementor .ld080a5,
	.elementor .l2e583d,
	.elementor .l9f475a,
	.elementor .l6088d9,
	.elementor .l2b8fc5,
	.elementor .l991613,
	.elementor .l077191,
	.elementor .l61144e,
	.elementor .l13eabe,
	.elementor .l42ac90,
	.elementor .la0623b,
	.elementor .l1fb901,
	.elementor .ldb6919,
	.elementor .lffdce5,
	.elementor .l5c4c3b,
	.elementor .l679566,
	.elementor .l026aea,
	.elementor .l57d631,
	.elementor .l772970,
	.elementor .ld32844 {
		font-size: 16.5px !important;
	}

	/* Seitenraender: 30-48px waeren auf 375px Breite die halbe Seite. */
	.elementor .l0947ea,
	.elementor .l14ddf7,
	.elementor .l19beda,
	.elementor .l2ba8c4,
	.elementor .l2dbc8c,
	.elementor .l33d0e3,
	.elementor .l34396f,
	.elementor .l46b0cc,
	.elementor .l49f315,
	.elementor .l51fe90,
	.elementor .l535d94,
	.elementor .l560c7b,
	.elementor .l5d5016,
	.elementor .l659aee,
	.elementor .l68c4cb,
	.elementor .l6d2c9a,
	.elementor .l6d67a1,
	.elementor .l6db5cd,
	.elementor .l7112b1,
	.elementor .l720dbf,
	.elementor .l7235ea,
	.elementor .l75d482,
	.elementor .l7c90d9,
	.elementor .l8061b2,
	.elementor .l87be30,
	.elementor .l8ea508,
	.elementor .l93c11c,
	.elementor .l957aa6,
	.elementor .l97103c,
	.elementor .l97492c,
	.elementor .l9b48d8,
	.elementor .la857bd,
	.elementor .la9e9b3,
	.elementor .lac425a,
	.elementor .lb6c23f,
	.elementor .lb8ef72,
	.elementor .lbbd656,
	.elementor .lbc70dc,
	.elementor .lc5a386,
	.elementor .lce6714,
	.elementor .ld188d6,
	.elementor .ldaf3c7,
	.elementor .ldb00ba,
	.elementor .ldb2c3c,
	.elementor .le073ea,
	.elementor .le0da37,
	.elementor .le20c27,
	.elementor .le626ec,
	.elementor .le85168,
	.elementor .leac85b,
	.elementor .lf7217e,
	.elementor .lf735aa,
	.elementor .lf959fc,
	.elementor .lfc2fc6 {
		padding-inline-start: 20px !important;
		padding-inline-end: 20px !important;
	}

	/* Mehrspaltige Raster untereinander. */
	.elementor .l010b73,
	.elementor .l0bc5e5,
	.elementor .l2f2454,
	.elementor .l2f71b3,
	.elementor .l440f22,
	.elementor .l471469,
	.elementor .l504deb,
	.elementor .l58e960,
	.elementor .l5bc223,
	.elementor .l60f09a,
	.elementor .l6b52c2,
	.elementor .l6db5cd,
	.elementor .l78011b,
	.elementor .l7a15e5,
	.elementor .l7fa664,
	.elementor .l817bea,
	.elementor .l841bed,
	.elementor .l8b34a4,
	.elementor .l900166,
	.elementor .l93c11c,
	.elementor .l97c8fe,
	.elementor .l987b0d,
	.elementor .l995f80,
	.elementor .l9ea29a,
	.elementor .lae03b3,
	.elementor .lb63c0c,
	.elementor .lcd430e,
	.elementor .ldbf4e9,
	.elementor .ldf543c {
		grid-template-columns: 1fr !important;
	}

	/*
	 * Bildflaechen: Hoehe aus dem echten Seitenverhaeltnis des Bildes.
	 *
	 * Die Bilder liegen als Hintergrund mit "background-size: cover" - der
	 * fuellt die Flaeche immer vollstaendig und schneidet ab, was nicht
	 * hineinpasst. Auf dem Desktop stand daneben eine schmale Spalte, dort
	 * ging die feste Hoehe von 380px auf. Auf dem Handy ist die Flaeche
	 * dagegen die volle Breite - bei 335px Breite und 380px Hoehe wurde vom
	 * Hochformat-Bild (1046x1440) oben und unten je ein Drittel abgeschnitten;
	 * bei der Transferpresse fehlte die halbe Maschine.
	 *
	 * Mit "aspect-ratio" richtet sich die Hoehe nach der Breite und dem
	 * Seitenverhaeltnis des jeweiligen Bildes. Dann fuellt "cover" die Flaeche
	 * exakt aus, ohne etwas wegzuschneiden. Die Zahlen sind die echten
	 * Bildmasse, abgelesen aus den Dateinamen.
	 */

	/* Verfahrenswaehler, Hochformat 1046 x 1440 */
	.elementor .l0d32ce,
	.elementor .l57e73d,
	.elementor .l5a2969,
	.elementor .l944550,
	.elementor .laa5def {
		min-height: 0 !important;
		aspect-ratio: 1046 / 1440;
	}

	/* Arbeiten-Karten, Querformat 712 x 532 */
	.elementor .l553c6a,
	.elementor .lac6990,
	.elementor .ld80892 {
		min-height: 0 !important;
		aspect-ratio: 712 / 532;
	}

	/* Panorama im Hero, Querformat 2200 x 836 */
	.elementor .l097ec3 {
		min-height: 0 !important;
		aspect-ratio: 2200 / 836;
	}

} /* Ende @media (max-width: 767px) */