/* Teegarten GmbH – Basis-Layout (responsiv) */

* { box-sizing: border-box; }

html { font-size: 100%; }

/* Linker Einzug für Navigation/Inhalt/Footer, damit diese optisch unter dem
   Schriftzug des "t" im Logo (siehe #header img) ausgerichtet sind - reine
   Design-/Abstandsangabe, hat mit der Logo-Grafik selbst nichts zu tun. Gilt
   jetzt auf allen Bildschirmbreiten, da das Logo immer linksbündig bleibt. */
:root {
	--t-indent: 18px;
}

body {
	margin: 0;
	font: 14px/1.6 Verdana, sans-serif;
	color: #333333;
}

h1, h2, h3, h4, h5, h6 {
	font-family: VAGRoundedLTPro-Thin, sans-serif;
	font-weight: normal;
	color: #CC3333;
	margin: 0 0 0.5em;
}

h1 { font-size: 1.6em; }
h2, h3, h4 { font-size: 1.3em; }
h5 { font-size: 1.15em; }
h6 { font-size: 1em; font-weight: normal; text-decoration: none; }

a { color: #E3004F; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* Für Seite "aktuell"/Blog, um Bild links von Text zu positionieren */
.links {
	float: left;
	margin-right: 15px;
	margin-bottom: 10px;
}

#wrapper {
	max-width: 1024px;
	margin: 0 auto;
	padding: 20px 15px 15px;
}

#header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

#header img { display: block; height: 50px; width: auto; max-width: 100%; }

#nav { margin-bottom: 20px; padding-left: var(--t-indent); }

#nav a {
	display: inline-block;
	font-family: VAGRoundedLTPro-Thin, sans-serif;
	font-size: 1.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 4px 10px 4px 0;
}

#nav a:hover { text-decoration: underline; }

#wrap_content, #wrap_content_home {
	padding: 10px 0 25px var(--t-indent);
}

#content .contenttitel { font-weight: normal; font-size: 0.9em; }

/* Mailformular (wie "Mailform2"): Beschriftung steht über dem Feld, nicht
   daneben - darum genügt ein einfacher Block pro Feld statt einer Tabelle. */
#content .formrow { margin-bottom: 10px; }
#content .formrow label { display: block; margin-bottom: 4px; }

#footer {
	margin-left: var(--t-indent);
	border-top: 1px dotted #CCCCCC;
	border-bottom: 1px dotted #CCCCCC;
	padding: 8px 0;
	font-size: 0.8em;
}

#news { padding: 0; }
#news:not(:empty) {
	margin-left: var(--t-indent);
	border-top: 1px dotted #CCCCCC;
	padding: 8px 0;
}

textarea,
fieldset.contactinfo input {
	width: 100%;
	font-family: Verdana, sans-serif;
	font-size: 1em;
	margin-bottom: 8px;
	padding: 8px;
	border: 1px solid #CCCCCC;
	border-radius: 3px;
}

textarea:focus,
fieldset.contactinfo input:focus {
	background-color: #FBF8F8;
	outline: none;
}

fieldset { border: 0; padding: 0; margin: 0 0 10px; }

fieldset.sendbutton input,
fieldset.sendbutton2 input,
fieldset.returnbutton input {
	/* Sende-Button geht über die ganze Breite des Formulars (wie bei
	   "Mailform2"), darum hier bewusst kein max-width mehr. */
	width: 100%;
	padding: 10px;
	border: 1px solid #CCCCCC;
	border-radius: 3px;
	background: #F1F1F1;
	cursor: pointer;
	font-size: 1em;
}

#spacer { height: 15px; }

@media (max-width: 640px) {
	/* Logo UND Submenü bleiben bewusst IMMER linksbündig (kein text-align:
	   center mehr) - #header hat nur ein einziges Kind, darum reicht die
	   normale Basis-Regel oben (space-between) bereits aus, um es links zu
	   halten; #nav folgt der normalen (linken) Textausrichtung. */
	#nav a { padding: 6px 8px; }

	/* Auf dem Smartphone etwas grössere Grundschrift für bessere Lesbarkeit.
	   Schriftart bleibt gleich (Verdana) - nur die Grösse wird angehoben.
	   Da Überschriften, Navigation und Footer alle in "em" (also relativ zur
	   Grundschrift) definiert sind, werden sie automatisch mitvergrössert. */
	body { font-size: 16px; }
}