/* Lagerraeumung: Staffeltabelle auf schmalen Displays.
   Die Tabelle stand auf table-layout:auto. Lange Zellen wie
   "Koeln + 4 Staedte und mehr" oder "77,50 EUR - 62 %" haben sie ueber die
   Bildschirmbreite gedrueckt; margin:0 auto konnte dann nicht mehr zentrieren. */

@media (max-width:767px){

	/* Umbruchsicherer Rahmen - faengt auch kuenftige lange Inhalte ab. */
	.pm-lr-tbl-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

	.pm-lr-tbl,
	.pm-lr-tbl.pm-lr-tbl{
		width:100%!important;
		max-width:100%!important;
		min-width:0!important;
		margin-left:auto!important;
		margin-right:auto!important;
		table-layout:fixed!important;
		font-size:13px!important;
		border-collapse:collapse!important;
	}

	.pm-lr-tbl th,
	.pm-lr-tbl td{
		padding:9px 6px!important;
		word-break:break-word;
		overflow-wrap:anywhere;
		hyphens:auto;
		line-height:1.35!important;
		white-space:normal!important;
	}

	/* Erste Spalte traegt den laengsten Text, die Zahlenspalten kommen mit
	   weniger aus. Summe 100 %. */
	.pm-lr-tbl th:nth-child(1),.pm-lr-tbl td:nth-child(1){width:34%!important;text-align:left!important}
	.pm-lr-tbl th:nth-child(2),.pm-lr-tbl td:nth-child(2){width:21%!important}
	.pm-lr-tbl th:nth-child(3),.pm-lr-tbl td:nth-child(3){width:21%!important}
	.pm-lr-tbl th:nth-child(4),.pm-lr-tbl td:nth-child(4){width:24%!important}

	/* Zahlen rechtsbuendig und ohne Umbruch mitten im Betrag. */
	.pm-lr-tbl th.r,.pm-lr-tbl td.r{text-align:right!important}
	.pm-lr-tbl td.r{font-variant-numeric:tabular-nums}

	/* Kopfzeile etwas kleiner, damit vier Spalten nebeneinander passen. */
	.pm-lr-tbl th{font-size:11px!important;letter-spacing:0!important;padding:8px 5px!important}

	/* Begleittexte mittig halten. */
	.pm-lr-sum,.pm-lr-note,.pm-lr-box{max-width:100%!important;padding-left:12px;padding-right:12px;box-sizing:border-box}
}

@media (max-width:400px){
	.pm-lr-tbl{font-size:12px!important}
	.pm-lr-tbl th{font-size:10px!important}
	.pm-lr-tbl th,.pm-lr-tbl td{padding:8px 4px!important}
}

/* --- Status-Pills in den Staedte-Kacheln -----------------------------------
   Standen auf display:block mit text-align:start - der Text klebte links und
   die Pill lief ueber die volle Kachelbreite. Zeilenhoehe war 24,75px bei 11px
   Schrift, also Faktor 2,25. Jetzt eine echte Pill, die ihren Text umschliesst
   und mittig unter der Kachel sitzt. */
.pm-lr-badge,
.pm-lr-tile .pm-lr-badge{
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	text-align:center!important;
	width:fit-content!important;
	max-width:100%!important;
	margin-left:auto!important;
	margin-right:auto!important;
	line-height:1.2!important;
	padding:5px 12px!important;
	min-height:0!important;
	height:auto!important;
	box-sizing:border-box!important;
	white-space:nowrap!important;
}

@media (max-width:767px){
	.pm-lr-badge,
	.pm-lr-tile .pm-lr-badge{
		font-size:10px!important;
		padding:4px 10px!important;
		line-height:1.15!important;
		letter-spacing:.02em!important;
	}
}

/* Sehr schmale Geraete: lieber umbrechen als ueberlaufen. */
@media (max-width:360px){
	.pm-lr-badge,
	.pm-lr-tile .pm-lr-badge{
		white-space:normal!important;
		padding:4px 8px!important;
	}
}

/* ------------------------------------------------------------------ BASIS-KACHELN
   Die Grundstile fuer [pm_lr_grid] standen bisher nur inline in der Startseite (50287).
   Damit die Kacheln auch auf anderen Seiten (Stadt-Landingpages) funktionieren,
   liegen sie jetzt hier global. Auf der Startseite gewinnt weiterhin das Inline-CSS,
   die Werte sind identisch. */
.pm-lr-grouphead{display:flex;align-items:baseline;gap:12px;max-width:1080px;margin:0 auto 14px;border-bottom:2px solid #e7e2d6;padding-bottom:8px}
.pm-lr-grouphead h3{font-size:21px;font-weight:800;color:#15233b!important;margin:0}
.pm-lr-grouphead em{font-style:normal;font-size:14px;color:#8a93a5}
.pm-lr-grid{display:flex;flex-wrap:wrap;gap:16px;max-width:1080px;margin:0 auto 34px;justify-content:flex-start}
.pm-lr-tile{display:flex;flex-direction:column;width:calc(25% - 12px);background:#fff;border:1px solid #e7e2d6;border-radius:12px;padding:12px;text-decoration:none!important;color:#15233b!important;transition:transform .15s ease,box-shadow .15s ease}
.pm-lr-tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.pm-lr-tile img{width:100%;height:auto;border-radius:8px;display:block;background:#fff}
.pm-lr-tile b{display:block;margin-top:10px;font-size:16px;font-weight:800;line-height:1.25}
.pm-lr-badge{display:inline-block;margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:#eef1f5;color:#5b6470}
.pm-lr-badge.low{background:#fdeaea;color:#c0392b}
.pm-lr-badge.mid{background:#fdf3e2;color:#a2701a}
.pm-lr-cta{margin-top:auto;padding-top:10px}
.pm-lr-cta span{display:block;text-align:center;background:#22c55e;color:#0f2a1a;font-weight:800;font-size:14px;padding:9px 10px;border-radius:8px}
.pm-lr-tile:hover .pm-lr-cta span{background:#4ade80}
.pm-lr-tile.is-out{opacity:.5;pointer-events:none}
.pm-lr-tile.is-out .pm-lr-cta span{background:#eef1f5;color:#8a93a5}
.pm-lr-note{max-width:1080px;margin:0 auto;text-align:center;font-size:14px;color:#8a93a5}
@media (max-width:1024px){.pm-lr-tile{width:calc(33.333% - 11px)}}
@media (max-width:767px){.pm-lr-tile{width:calc(50% - 8px)}}
/* ------------------------------------------------------------- VOLLBREITE
   Wichtig: puzzlemap.de ist ein BOXED-Layout. body hat max-width:90%, der Rahmen ist
   also 1310px breit - das ist hier die volle Breite, nicht die Fensterbreite.
   Ein 100vw-Ausbruch waere zu breit und wuerde ueber den Seitenrahmen hinausragen.

   Enfold bricht Vollbild-Elemente normalerweise selbst aus dem inneren 1210er-Bereich
   aus. Bei den per Code angelegten Seiten fehlt dafuer der Builder-Baum, den nur ein
   Speichern im Layout-Architekten erzeugt (den Baum nachzubauen hat das Markup zerlegt).
   Deshalb heben wir hier nur das 50px-Innenpolster des Containers auf - Ergebnis: exakt
   1310px, also genau so breit wie die Sektionen auf der Startseite. */
body.page .container > .avia-fullwidth-slider,
body.page .container .entry-content-wrapper > .avia-fullwidth-slider,
body.page .container .entry-content-wrapper > .avia-section{
  width:auto!important;
  max-width:none!important;
  margin-left:-50px!important;
  margin-right:-50px!important;
  position:relative;
  left:auto;
  right:auto;
}
body.page .container .avia-fullwidth-slider .avia-slideshow,
body.page .container .avia-fullwidth-slider .avia-slideshow-inner,
body.page .container .avia-fullwidth-slider .avia-slideshow-slide{
  width:100%!important;
  max-width:100%!important;
}
/* Hero als Band, nicht bildschirmfuellend. Der eingebrannte Schriftzug sitzt im oberen
   Drittel, deshalb wird unten beschnitten. */
body.page .container .avia-fullwidth-slider .avia-slideshow-slide,
body.page .container .avia-fullwidth-slider img{
  height:auto!important;
  max-height:none!important;
}
body.page .container .avia-fullwidth-slider img{
  width:100%!important;
  height:auto!important;
  display:block;
}
@media (min-width:1000px){
  body.page .container .avia-fullwidth-slider .avia-slideshow-slide,
  body.page .container .avia-fullwidth-slider img{ height:560px!important; }
  body.page .container .avia-fullwidth-slider img{ object-fit:cover; object-position:center 34%; }
}