/* Mobil-Ansicht der Startseite und des Impressums (bis 900 px Breite).
   Die Desktop-Gestaltung in style.css bleibt unverändert; hier werden nur die festen
   Pixelmaße, Spalten und absolut platzierten Elemente für schmale Bildschirme umgestellt. */

@media (max-width: 900px) {

	/* clip statt hidden: schneidet seitlichen Überstand ab, ohne dass der Body zum Scroll-Container wird
	   (sonst bekämen Parallax und Whiskyglas keine Scroll-Position mehr) */
	html, body { height: auto; min-height: 100%; overflow-x: clip; }
	body { position: static; }

	/* ---------- Schrift */
	p, a, span { font-size: 17px; line-height: 1.6; }
	/* responsive.css setzt Absätze unter 1100 px per !important auf 19 px */
	p { font-size: 17px !important; }
	.gbc-consent p, .map-consent p { font-size: 1em !important; }

	h1 { font-size: 34px; line-height: 1.15; }
	h1:before { margin-bottom: 14px; }
	h1:after { margin-top: 22px; margin-bottom: 26px; }

	.content { padding: 44px 0; }

	/* Spalten: volle Breite mit Rand */
	.fg1, .fg2, .fg3, .fg4, .fg5, .fg6, .fg7, .fg8, .fg9, .fg10, .fg11, .fg12, .fg4_2 {
		float: none;
		width: auto;
		max-width: none;
		margin: 0 22px 1em;
	}

	section img { padding-bottom: 34px; }
	.border-1 { height: 58px; }

	/* ---------- Hero */
	.header, header { min-height: 0; max-height: none; }
	.header:before { padding-bottom: 114%; }

	.startbox {
		top: 42%;
		left: 50%;
		width: 230px;
		height: 174px;
		margin: 0;
		background-size: contain;
		background-position: center;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	/* fade-in animiert nur die Deckkraft, die Verschiebung oben bleibt erhalten */

	a.hero-book { top: calc(42% + 106px); padding: 4px 16px; }
	.hero-book-text { font-size: 24px; }
	.hero-book-deco { width: 76px; height: 8px; margin-bottom: 8px; }
	.hero-book-deco-bottom { margin: 8px auto 0; }

	.home-nav {
		top: 14px;
		left: 12px;
		right: 12px;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 13px;
		font-size: 14px;
	}

	.home-nav a { letter-spacing: 0.1em; }

	.home-nav a.home-nav-book { margin-top: -0.3em; }

	#awwwards {
		top: 0;
		-webkit-transform: scale(0.55);
		transform: scale(0.55);
		-webkit-transform-origin: top right;
		transform-origin: top right;
	}

	/* ---------- Einleitung */
	a.home-book { font-size: 17px; margin-top: 22px; }
	.home-prices { margin-top: 44px; }
	.home-prices h2 { font-size: 26px; }

	/* ---------- Barbers */
	.team { padding-bottom: 70px; }

	.barbers {
		width: 260px;
		height: 150px;
		margin: 84px auto 6px;
		background-size: contain;
		background-position: center;
	}

	.teambox { width: auto; margin: 0; }
	.teambox_2 { display: none; }

	.mitarbeiter {
		float: none;
		width: 78%;
		max-width: 420px;
		height: auto;
		margin: 0 auto;
		padding: 0;
		background-size: 100% auto;
		background-position: center top;
	}

	.mitarbeiter.elmar { padding: 0; }
	.mitarbeiter:before { content: ''; display: block; padding-bottom: 88%; }

	h3.name { position: static; margin-top: 4px; font-size: 26px; line-height: 1.6; }
	h3.name:after { margin-top: 12px; margin-bottom: 0; }

	/* ---------- Zitate */
	.quote { font-size: 27px; line-height: 1.4; letter-spacing: 0.04em; }
	.quote:before { margin: 30px auto 18px; }
	.quote:after { margin-bottom: 24px; }

	/* ---------- Galerie */
	.gallery { padding-bottom: 100px !important; background-size: auto 520px !important; }

	.barberclub {
		width: 290px;
		height: 116px;
		margin: 84px auto 60px;
		background-size: contain;
		background-position: center;
	}

	.gallerywrapper { width: auto; min-width: 0; height: auto; margin: 0 22px; }

	.topleft, .topright, .bottom { float: none; width: auto; max-width: none; margin: 0; }
	.topleft img, .topright img, .bottom img { display: block; width: 100%; margin: 0 0 18px !important; }

	/* ---------- Partner */
	.hl-stuffed, .hl-contact, .hl-media {
		width: 250px;
		height: 142px;
		margin-bottom: 30px;
		background-size: contain;
		background-position: center;
	}

	.visual-stuffed img:first-child { display: block; max-width: 78%; margin: 0 auto 20px; }

	.partner-wrapper {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: none;
		grid-auto-rows: 96px;
		grid-gap: 6px 10px;
		margin-bottom: 30px;
	}

	.partner-wrapper img, .media-wrapper img { max-width: 78%; height: auto; }

	/* ---------- Medien und Auszeichnung */
	.media { padding-top: 96px; padding-bottom: 110px; }

	.media-wrapper {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		grid-auto-rows: 96px;
		grid-gap: 8px 14px;
	}

	.award { padding-top: 50px; }
	.award-badges { gap: 20px; }
	.award-badges img { width: 150px; height: 150px; }
	.award-badges img + img { width: 108px; height: 108px; }
	.award-score { font-size: 36px; }

	/* ---------- Rasiermesser und Whiskyglas */
	.razor { display: none; }

	/* Das Glas bleibt auf dem Handy sichtbar: halbe Größe, mittig unter dem Zitat */
	.whisky.fg-no-mobile {
		display: block !important;
		position: relative;
		left: auto;
		bottom: auto;
		margin: 26px auto 0;
		zoom: 0.5;
	}

	/* ---------- Kontakt */
	#kontakt { padding: 50px 0 30px; }
	.contact { font-size: 30px; line-height: 1.4; }
	.contact a { font-size: 30px !important; }

	.map-consent { min-height: 320px; padding: 1.4em; }
	.map-consent iframe { height: 340px; }

	.social { width: auto; max-width: 100%; margin: 0 22px; background-size: 100% auto; background-position: center; }

	.impressum {
		position: static;
		flex-direction: column;
		gap: 8px;
		margin: 44px 22px 0;
		padding-bottom: 78px;
	}

	.impressum > span, .impressum .footer-left, .impressum .footer-center, .impressum .footer-right { flex: none; text-align: center; }
	.impressum a, .impressum span { font-size: 14px; }
	.impressum .footer-center { white-space: nowrap; }

	/* ---------- Impressum-Seite */
	.center .row { padding: 30px 0; }
	article.footer { padding: 20px 22px 90px; }
	article.footer span, article.footer a { font-size: 15px; }
}

/* sehr schmale Handys: Menü etwas enger, damit es neben dem Awwwards-Band mittig bleibt */
@media (max-width: 350px) {
	.home-nav { gap: 8px 10px; font-size: 13px; }
}