/* ==========================================================================
   aquaBasis.css  -  Seitenlayout, Bereiche und Abschnitte
   --------------------------------------------------------------------------
   Ersetzt:
     - die Inline-<style>-Bloecke in index.php und danke.php
     - css/aquaDesktop.css und css/aquaMobile.css
   Die frueheren PHP-Geraeteweichen (if ($mob) ... else ...) sind durch
   Media Queries mit dem Umschaltpunkt 1140px ersetzt.

   Reihenfolge im <head>: normalize.css, aqua.css, aquaBasis.css
   ========================================================================== */

/* --- Grundgeruest -------------------------------------------------------- */
body
{
	min-height:100vh;
	background-color:var(--farbe1);
}

main
{
	background-color:var(--farbe1);
}

/* Zentrierte Flex-Spalte, die alle Bereiche der Seite aufnimmt. */
.layout
{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}

/* Begrenzt einen Inhalt auf die nutzbare Seitenbreite. */
.seitenbreite
{
	width:100%;
	padding:var(--abstand);
	max-width:calc(100% - 22px);
}

/* --- Kopfbereich --------------------------------------------------------- */
.kopfbereich
{
	background-color:var(--farbe6);
	width:100%;
	margin:0 auto;
}

.kopfbox
{
	min-height:75px;
	width:100%;
}

#logo
{
	width:50%;
	margin:15px 0 0 15px;
}

#hotline
{
	margin-right:15px;
	text-align:end;
	color:var(--farbe3);
}

/* --- Abschnitte ---------------------------------------------------------- */
.abschnitt
{
	background-color:var(--farbe1);
	width:100%;
	margin:0 auto 30px auto;
}

.abschnitt > .seitenbreite
{
	min-height:75px;
	background-color:var(--farbe10);
	border:var(--rand);
	border-radius:var(--radius);
	box-shadow:var(--schatten);
	margin-top:30px;
}

/* Der erste Abschnitt bekommt mehr Luft zur Hero-Flaeche. */
.abschnittErster > .seitenbreite
{
	margin-top:50px;
}

/* --- Trenner zwischen den Abschnitten ------------------------------------ */
.trenner
{
	background-color:var(--farbe1);
	width:100%;
	text-align:center;
	line-height:0;
}

.trenner svg
{
	display:inline-block;
	height:30px;
}

/* --- Fussbereich --------------------------------------------------------- */
.fussbereich
{
	background-color:var(--farbe6);
	width:100%;
	margin:0 auto;
}

.fussbox
{
	min-height:75px;
}

footer
{
	background-color:var(--farbe1);
	border:none!important;
}

/* --- Hero-Flaeche: echtes Bild mit festem Seitenverhaeltnis -------------- */
.hero
{
	width:100%;
	line-height:0;
}

.heroBild
{
	display:block;
	width:100%;
	max-width:100%;
	height:auto;
	aspect-ratio:3 / 2;
	object-fit:cover;
	max-height:380px;
}

/* --- Sprachausgabe und Sprungmarke --------------------------------------- */
.srNur
{
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}

.sprungmarke:focus
{
	position:static;
	width:auto;
	height:auto;
	margin:0;
	padding:8px 14px;
	overflow:visible;
	clip:auto;
	clip-path:none;
	background-color:var(--farbe6);
	color:var(--farbe4);
	display:inline-block;
}

/* --- Text-/Bild-Zweispalter ---------------------------------------------- */
.zweispaltig
{
	display:flex;
	flex-direction:column-reverse;
}

.spalteBild
{
	padding:10px;
}

.spalteBild img
{
	border:var(--rand);
	border-radius:var(--radius);
	box-shadow:var(--schatten);
}

.zentriert
{
	display:flex;
	justify-content:center;
}

.innen
{
	width:100%;
}

/* --- Inhaltsbeitraege (Gruende, Service) --------------------------------- */
.beitrag
{
	margin-bottom:20px;
}
/* --- Ueberschriften-Animation -------------------------------------------- */
/* Die Zeichen-Spans starten nur dann unsichtbar, wenn JavaScript die Seite
   als faehig gekennzeichnet hat (js/jsAktiv.js). Ohne JavaScript bleiben die
   Ueberschriften dadurch vollstaendig sichtbar. */
html.jsAktiv .h1,
html.jsAktiv .h2,
html.jsAktiv .h3,
html.jsAktiv .h4,
html.jsAktiv .h5,
html.jsAktiv .h6,
html.jsAktiv .h7,
html.jsAktiv .h8,
html.jsAktiv .h9
{
	opacity:0;
	transition:opacity 1s;
}

html.jsAktiv .v
{
	opacity:1;
}

/* --- Bilder -------------------------------------------------------------- */
img
{
	margin-left:5px;
	margin-right:5px;
	max-width:calc(100% - 10px);
}

.bildBlock img
{
	width:80%;
}

.karte-wrapper img
{
	width:100%;
	max-width:100%;
}

.bildCopyright
{
	font-size:0.75rem;
}

/* --- Videos -------------------------------------------------------------- */
.video
{
	width:100%;
	height:auto;
}

/* --- Aufzaehlungen und Hervorhebungen im Fliesstext ---------------------- */
.aufzaehlung
{
	margin-left:10%;
}

.aufzaehlung li
{
	list-style:'💧 ';
}

.firmenname
{
	color:var(--farbe11);
}

.bildBreit
{
	width:100%;
}

/* --- Formular ------------------------------------------------------------ */
#kontaktdaten label
{
	width:20%;
	display:inline-flex;
}

input, select
{
	width:100%;
}

#optionen
{
	margin-top:0;
}

/* Warnhinweis im Formular. Frueher per negativer Positionierung an den
   rechten Rand geschoben; jetzt regulaer im Fluss rechtsbuendig. */
#achtung
{
	width:185px;
	margin:0 0 15px auto;
	padding:5px;
	border:4px solid #f00;
	border-radius:10px;
	background:antiquewhite;
	box-shadow:3px 3px 2px 4px rgba(51,51,51,0.2);
	font-size:0.85rem;
	line-height:1.35;
}

#kontaktWrapper
{
	font-size:85%;
}

button,
input
{
	border:none;
	border-radius:var(--radius);
}

#angebotsanfrageButton
{
	background-color:var(--farbe8);
	color:var(--farbe6);
	font-size:x-large;
	font-weight:bold;
}

.anzahl
{
	border:darkblue;
	border-style:solid;
	border-width:thin;
	text-align:center;
	border-radius:var(--radius);
}

/* --- Ausklappbare Transkripte -------------------------------------------- */
.transkript
{
	margin-top:18px;
	padding:0;
	border:1px solid var(--farbe10);
	border-radius:var(--radius);
	background:var(--farbe0);
	box-shadow:var(--schatten);
	font-size:15px;
	line-height:1.55;
	overflow:hidden;
}

.transkript summary
{
	padding:12px 16px;
	background:var(--farbe4);
	color:var(--farbe6);
	font-weight:bold;
	cursor:pointer;
}

.transkript summary::-webkit-details-marker
{
	display:none;
}

.transkript[open] summary
{
	border-bottom:1px solid var(--farbe10);
}

.transkript p
{
	margin:0;
	padding:0 16px 14px 16px;
}

.transkript p:first-of-type
{
	padding-top:14px;
}

.transkript p:last-child
{
	padding-bottom:16px;
}

/* --- Nutzenargumente direkt unter der Ueberschrift ------------------------ */
/* Traegt die staerksten Verkaufsargumente (u. a. das Ergebnis innerhalb von
   10 Tagen) sichtbar an den Seitenanfang, statt sie nur im Video zu nennen. */
.benefits
{
	list-style:none;
	margin:0 0 25px 0;
	padding:15px 20px;
	background-color:var(--farbe6);
	border:var(--rand);
	border-radius:var(--radius);
	box-shadow:var(--schatten);
	font-weight:bold;
}

.benefits li
{
	position:relative;
	padding-left:26px;
	margin-bottom:8px;
	line-height:1.4;
}

.benefits li:last-child
{
	margin-bottom:0;
}

.benefits li::before
{
	content:"✓";
	position:absolute;
	left:0;
	color:var(--farbe8);
}

/* --- Prozessgrafik -------------------------------------------------------- */
/* Nummerierte Abfolge von der Entnahme bis zum Ergebnis. Die Pfeile sitzen am
   Listenpunkt, damit sie in der mobilen Spalte nach unten und in der
   Desktop-Zeile nach rechts zeigen koennen. */
.prozess
{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.prozess li
{
	display:flex;
	flex-direction:column;
	align-items:center;
	width:100%;
	max-width:420px;
}

.prozess li:not(:last-child)::after
{
	content:"↓";
	font-size:26px;
	line-height:1;
	color:var(--farbe8);
	margin:6px 0;
}

.prozessSchritt
{
	display:flex;
	align-items:center;
	width:100%;
	box-sizing:border-box;
	padding:10px 15px;
	background-color:var(--farbe6);
	border:var(--rand);
	border-radius:var(--radius);
	box-shadow:var(--schatten);
}

.prozessNr
{
	flex:0 0 auto;
	width:32px;
	height:32px;
	margin-right:12px;
	line-height:32px;
	text-align:center;
	border-radius:50%;
	background-color:var(--farbe8);
	color:var(--farbe6);
	font-weight:bold;
}

/* --- Haeufige Fragen (FAQ) ------------------------------------------------ */
/* Bewusst dauerhaft sichtbar und nicht ausklappbar: Die Antworten sollen die
   Unsicherheit nehmen, ohne dass der Besucher erst aufklappen muss. */
.faq
{
	margin-top:20px;
}

.faqEintrag
{
	margin-bottom:15px;
	padding:12px 18px;
	background-color:var(--farbe6);
	border:var(--rand);
	border-radius:var(--radius);
	box-shadow:var(--schatten);
}

.faqEintrag:last-child
{
	margin-bottom:0;
}

.faqFrage
{
	margin:0 0 8px 0;
	font-size:1.05rem;
	color:var(--farbe8);
}

.faqAntwort
{
	margin:0;
	line-height:1.55;
}

/* ==========================================================================
   Desktop / Tablet ab 1140px
   ========================================================================== */
@media (min-width:1140px)
{
	.seitenbreite
	{
		width:1100px;
	}

	.abschnitt
	{
		margin-bottom:83px;
	}

	.abschnitt > .seitenbreite
	{
		margin-top:83px;
	}

	.abschnittErster > .seitenbreite
	{
		margin-top:100px;
	}

	.trenner svg
	{
		height:44px;
	}

	.zweispaltig
	{
		flex-direction:row;
	}

	.spalteBild
	{
		width:50%;
	}

	#kontaktWrapper
	{
		width:33%;
	}

	input, select
	{
		width:30%;
	}

	#kontaktdaten .cswebform
	{
		display:flex;
	}

	#optionen
	{
		position:relative;
		padding-top:32px;
	}

	#achtung
	{
		position:absolute;
		top:-18px;
		right:14px;
		z-index:3;
		margin:0;
	}

	.bildBlock img
	{
		width:50%;
	}

	/* Prozessgrafik liegt auf dem Desktop als Zeile mit Pfeilen nach rechts. */
	.prozess
	{
		flex-direction:row;
		align-items:stretch;
		justify-content:center;
	}

	.prozess li
	{
		flex:1 1 0;
		flex-direction:row;
		align-items:stretch;
		width:auto;
		max-width:none;
		min-width:0;
	}

	.prozess li:not(:last-child)::after
	{
		content:"→";
		display:flex;
		align-items:center;
		margin:0 6px;
	}

	.prozessSchritt
	{
		width:auto;
		flex:1 1 auto;
		min-width:0;
	}
}