@charset "UTF-8";

/* Nachbau des Joomla-Templates "Atomic" (Blueprint CSS),
   wie es auf fusspflegeparadies.ch verwendet wurde. */

/* Grundlagen */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.5;
	color: #222;
	background: #fff url(../img/hintergrund.png) repeat-y left top;
}

h1, h2 { font-weight: normal; color: #111; margin: 0; }
h1 { font-size: 2em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 1.2em; margin-bottom: 0.75em; }
p { margin: 0 0 1.5em; }
ul { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }
strong { font-weight: bold; }
img { border: 0; max-width: 100%; height: auto; }

a { color: #06c; text-decoration: underline; }
a:focus, a:hover { color: #09f; }

hr {
	clear: both;
	width: 100%;
	height: 1px;
	margin: 0 0 1.45em;
	border: none;
	background: #ddd;
	color: #ddd;
}

/* Raster: 950px Container, Inhalt 630px + 40px Abstand, Seitenleiste 270px */
.container {
	width: 950px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}

.kopf { padding-top: 1.5em; }

.inhalt {
	display: grid;
	grid-template-columns: 630px 270px;
	column-gap: 40px;
}
.haupt { min-width: 0; }
.seitenleiste { text-align: right; }

.fuss {
	grid-column: 1;
	font-size: .9em;
	margin-top: 1.5em;
	margin-bottom: 30px;
}

/* Hauptmenü (Blueprint-Plugin "joomla-nav") */
.joomla-nav {
	margin: 0 0 1.3em 0;
	padding: 0.67em 0;
	font-size: 1.2em;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.joomla-nav li { line-height: 1.5; margin: 0 0.5em; }
.joomla-nav li a {
	display: block;
	padding: 0 .33em;
	color: #222;
	font-weight: bold;
	text-decoration: none;
}
.joomla-nav li a:focus, .joomla-nav li a:hover { color: #555; }
.joomla-nav li a[aria-current="page"] { color: #555; cursor: default; }

/* Studio-Fotos */
.galerie {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 1.5em;
}
.galerie img { width: 170px; }

/* Geschenkgutscheine */
.gutschein {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	margin-bottom: 1.5em;
}
.gutschein p { margin: 0; }
.gutschein img { width: 200px; flex-shrink: 0; }

/* Kontakt */
.kontakt p { margin-bottom: 1.5em; }

/* Handy und kleine Bildschirme */
@media (max-width: 960px) {
	.inhalt { grid-template-columns: 1fr 160px; column-gap: 24px; }
}

@media (max-width: 640px) {
	h1 { font-size: 1.6em; }
	.joomla-nav { padding: 0.3em 0; font-size: 1.1em; gap: 0.2em 0.6em; }
	.joomla-nav li { margin: 0; }
	.joomla-nav li a { padding: 0; }

	/* Auf dem Handy volle Breite für den Text, Füsse-Bild ausblenden */
	.inhalt { grid-template-columns: 1fr; }
	.seitenleiste { display: none; }
	.gutschein { flex-direction: column; }
	.galerie img { width: calc(50% - 5px); }
}