/*
 * CaChi 0.8 – Gestaltung
 *
 * Ersetzt Bootstrap 3, die Titan-Einstellungen und das Sonder-CSS von WPBakery.
 * Maße sind an der Live-Seite (Version 0.7, gemessen am 23.09.2026) ausgerichtet.
 * Umbruchpunkte wie bei Bootstrap 3: 768 px (Tablet), 992 px (Desktop), 1200 px (breit).
 *
 * Inhalt:
 *  1. Grundlagen
 *  2. Rahmen und Spalten
 *  3. Kopf und Menü
 *  4. Inhaltsbereich
 *  5. Bausteine der Seiten (Klassen an den Blöcken)
 *  6. Fußbereich
 *  7. Desktop: fester Kasten mit eigenem Rollbalken
 */

/* ---------- 1. Grundlagen ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	min-height: 100%;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	color: #333;
	text-rendering: optimizeLegibility;
	background: #fff url(../img/holz-hintergrund.jpg) no-repeat center center fixed;
	background-size: cover;
}

p {
	margin: 0 0 10px;
	line-height: 1.5em;
}

h1,
h2,
h3 {
	margin: 20px 0 10px;
	font-weight: 500;
	line-height: 1.1em;
}

h1 {
	font-family: "Great Vibes", cursive;
	font-size: 48px;
	color: #a849a3;
}

h2 {
	font-family: "Open Sans", sans-serif;
	font-size: 24px;
	color: #333;
}

h3 {
	font-size: inherit;
	font-weight: bold;
	line-height: 1.5em;
	color: #333;
}

a {
	color: #337ab7;
	text-decoration: none;
}

a:hover,
a:focus {
	color: #23527c;
	text-decoration: underline;
}

article a,
article a:hover,
article a:focus {
	color: #a849a3;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}

figure {
	margin: 0;
}

hr {
	height: 0;
	margin: 20px 0;
	border: 0;
	border-top: 1px solid #eee;
}

::selection {
	background: #922792;
	color: #fff;
	text-shadow: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 5px;
	left: 5px;
	width: auto;
	height: auto;
	padding: 15px 23px 14px;
	clip: auto !important;
	background: #f1f1f1;
	color: #21759b;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}

/* ---------- 2. Rahmen und Spalten ---------- */

.container {
	margin: 0 auto;
	padding: 0 15px;
}

.row {
	margin: 0 -15px;
}

@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}

@media (min-width: 992px) {
	.container {
		width: 970px;
	}

	.row {
		display: flex;
		align-items: flex-start;
	}

	.spalte-kopf {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.spalte-inhalt {
		flex: 0 0 75%;
		max-width: 75%;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}

/* ---------- 3. Kopf und Menü ---------- */

#masthead {
	text-align: center;
	background: linear-gradient(to bottom, #e670e8 0%, #a849a3 100%);
}

.brand img {
	width: auto;
	height: 150px;
	margin: 0 0 5px;
}

.brand figcaption {
	color: #fff;
	text-shadow: 1px 1px 0 #7f377c;
}

.slogan {
	color: #fff;
}

.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation.toggled ul {
	display: block;
}

.menu-toggle {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 1px 6px;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 42px;
	line-height: 21px;
	text-align: center;
	cursor: pointer;
}

@media (min-width: 600px) {
	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: block;
	}
}

/* Trennlinien: früher eine 1 × 2 px große Grafik (border.jpg), jetzt als Verlauf. */
.nav-stacked > li {
	position: relative;
	display: block;
	background: linear-gradient(to bottom, #922693 0, #922693 1px, #ce85ce 1px, #ce85ce 2px, transparent 2px) left top / 100% 2px no-repeat;
}

.nav-stacked > li + li {
	margin-top: 2px;
}

.nav-stacked > li > a {
	position: relative;
	display: block;
	padding: 10px 15px;
	color: #fff;
	font-weight: 300;
	text-decoration: none;
	text-shadow: 1px 1px 0 #7f377c;
	transition: background 0.5s;
}

.nav-stacked > li > a:hover,
.nav-stacked > li > a:focus {
	color: #fff;
	background: linear-gradient(to bottom, #a849a3 0%, #e670e8 100%);
}

/* ---------- 4. Inhaltsbereich ---------- */

#content {
	padding: 0;
	background-color: #fff;
}

.content-box {
	display: block;
	overflow: hidden;
	background-color: #fff;
}

.content-box h1 {
	margin: 0 0 30px;
	padding-top: 30px;
	text-align: center;
}

.content-box hr {
	display: none;
}

/* Blöcke sollen keine eigenen Abstände mitbringen; die Abstände stehen unten je Baustein. */
.content-box .wp-block-columns,
.content-box .wp-block-group,
.content-box .wp-block-image,
.content-box .wp-block-buttons {
	margin: 0;
}

/* Spalten stehen ab 768 px nebeneinander (WordPress selbst erst ab 782 px). */
@media (min-width: 768px) {
	.content-box .wp-block-columns.cachi-spalten {
		flex-wrap: nowrap !important;
	}

	/* Gleich breite Spalten, auch wenn ein Bild oder eine lange Überschrift breiter wäre. */
	.content-box .wp-block-columns.cachi-spalten > .wp-block-column {
		flex: 1 1 0 !important;
		min-width: 0;
	}

	/* Zweiteilige Bereiche mit Innenabstand: jede Spalte genau die Hälfte. */
	.content-box .wp-block-columns.cachi-einstieg > .wp-block-column,
	.content-box .wp-block-columns.cachi-kontakt > .wp-block-column {
		flex: 0 0 50% !important;
	}
}

@media (max-width: 767px) {
	.content-box .wp-block-columns.cachi-spalten {
		flex-wrap: wrap !important;
	}

	.content-box .wp-block-columns.cachi-spalten > .wp-block-column {
		flex-basis: 100% !important;
	}

}

/* ---------- 5. Bausteine der Seiten ---------- */

/* Einstieg: Foto links, Text rechts, immer 500 px hoch. */
.content-box .cachi-einstieg {
	gap: 0;
	min-height: 500px;
	align-items: stretch !important;
}

.cachi-einstieg-bild .wp-block-image,
.cachi-einstieg-bild .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cachi-einstieg-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 35px 20px;
}

.cachi-einstieg-text p {
	margin: 0 0 25px;
	text-align: center;
}

@media (min-width: 768px) {
	.cachi-einstieg-text {
		padding-right: 35px;
	}
}

@media (max-width: 991px) {
	.content-box .cachi-einstieg-bild {
		display: none;
	}

	/* Wie bisher: Auf dem Tablet steht der Text in der linken Hälfte. */
	.content-box .wp-block-columns.cachi-einstieg > .cachi-einstieg-text {
		flex: 0 0 50% !important;
	}
}

@media (max-width: 767px) {
	.content-box .wp-block-columns.cachi-einstieg > .cachi-einstieg-text {
		flex: 0 0 100% !important;
	}
}

@media (min-width: 992px) {
	.cachi-einstieg-text {
		padding: 35px 20px 35px 35px;
	}
}

/* Knopf mit Rahmen, eckig */
.cachi-knopf {
	justify-content: center;
	margin-bottom: 22px !important;
}

.cachi-knopf .wp-block-button__link {
	display: inline-block;
	padding: 13px 19px;
	border: 2px solid #a849a3;
	border-radius: 0;
	background: transparent;
	color: #a849a3;
	font-size: 14px;
	line-height: normal;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

.cachi-knopf .wp-block-button__link:hover,
.cachi-knopf .wp-block-button__link:focus {
	background: #a849a3;
	color: #fff;
	text-decoration: none;
}

/* Abschnitte mit 50 px Rand links und rechts (Angebot, Salon) */
.content-box .cachi-abschnitt {
	padding: 0 50px;
}

.cachi-abschnitt > p.cachi-einleitung {
	margin: 0 0 25px;
	text-align: center;
}

.content-box .cachi-salon {
	padding-bottom: 60px;
}

/* Angebot: drei Spalten mit Leistungen */
.content-box .cachi-leistungen {
	gap: 55px;
}

/* WPBakery gab den Spalten mit Zwischenraum 12,5 px Innenabstand oben und unten. */
.content-box .cachi-leistungen > .wp-block-column {
	padding: 12.5px 0;
}

.cachi-leistungen h2 {
	margin: 0 0 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #a849a3;
}

.content-box .cachi-leistung {
	margin-bottom: 35px;
}

.content-box .cachi-leistung:not(:last-child) {
	padding-bottom: 14px;
	border-bottom: 1px dotted #a849a3;
}

.cachi-leistung h3 {
	margin: 20px 0 10px;
	color: #a849a3;
}

.cachi-leistung p {
	margin: 0;
}

/* Salon: Fotos in drei Spalten, Abstand 25 px, Klick vergrößert */
.content-box .cachi-galerie {
	gap: 25px;
}

.content-box .cachi-galerie .wp-block-image {
	margin-bottom: 25px;
}

/* Untereinander stehende Spalten (Handy): Abstand kommt aus den Spalten selbst, wie bisher. */
@media (max-width: 767px) {
	.content-box .cachi-leistungen,
	.content-box .cachi-galerie {
		row-gap: 0;
	}
}

/* Aufruf zum Anrufen: lila Fläche mit Muster */
.content-box .cachi-aufruf {
	padding: 35px 50px 50px;
	background: #a849a3 url(../img/cta-muster.png) 0 0 repeat;
}

.cachi-aufruf h1 {
	margin-bottom: 0;
	color: #fff;
}

.cachi-aufruf p {
	margin: 0 0 35px;
	color: #fff;
	font-size: 1.2em;
	line-height: 1.5em;
	text-align: center;
}

.cachi-aufruf a {
	color: #fff;
	text-decoration: underline;
}

/* Kontakt: Karte links, Angaben rechts */
.content-box .cachi-kontakt {
	gap: 0;
	/* Weißraum vor dem Fußbereich wie bisher (kam aus einer leeren WPBakery-Zeile). */
	margin-bottom: 43px;
}

.cachi-kontakt-karte .wp-block-image {
	margin-bottom: 35px;
}

.cachi-kontakt-angaben {
	padding: 0 35px 35px;
}

@media (min-width: 768px) {
	.cachi-kontakt-karte {
		padding-right: 15px;
	}

	.cachi-kontakt-angaben {
		padding-left: 50px;
	}
}

.cachi-kontakt-angaben p {
	margin: 0;
}

.cachi-kontakt-angaben p.cachi-einleitung {
	margin-bottom: 35px;
}

/* Symbole vor Adresse, Telefon, Öffnungszeiten: eigene Zeichnungen, als Maske eingefärbt */
.cachi-symbol {
	position: relative;
	padding-left: 32px;
}

.cachi-symbol::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: var(--cachi-symbol) center / contain no-repeat;
	mask: var(--cachi-symbol) center / contain no-repeat;
}

.cachi-kontakt-angaben p.cachi-symbol-haus {
	margin-bottom: 20px;
	line-height: 20px;
}

.cachi-symbol-haus {
	--cachi-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 0 8h2v7h4.5v-4.5h3V15H14V8h2Z'/%3E%3C/svg%3E");
}

.cachi-symbol-telefon {
	--cachi-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 1 6 4.4 4.6 6.2a9.5 9.5 0 0 0 5.2 5.2l1.8-1.4L15 12.4 13.2 15C6.6 14.6 1.4 9.4 1 2.8Z'/%3E%3C/svg%3E");
}

.cachi-symbol-uhr {
	--cachi-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm-1 1.5h2v4.1l2.9 2.9-1.4 1.4L7 8.4Z'/%3E%3C/svg%3E");
}

/* Textseiten (Impressum, Datenschutz, Fehlerseite) */
.cachi-text {
	/* Unten wie bisher 127 px bis zum Fußbereich (10 px Absatz + 117 px). */
	padding: 0 50px 117px;
}

/* Tabellen wie bisher: ohne Rahmen, Beschriftung links und fett. */
.content-box .cachi-text .wp-block-table {
	margin: 0 0 21px;
	overflow-x: visible;
}

.cachi-text .wp-block-table table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.cachi-text .wp-block-table th,
.cachi-text .wp-block-table td {
	padding: 0;
	border: 0;
	vertical-align: middle;
	text-align: left;
	word-break: normal;
}

.cachi-text .wp-block-table th {
	width: 200px;
	padding-right: 15px;
	font-weight: bold;
}

.cachi-text h2 {
	margin-top: 20px;
}

.cachi-text ul {
	margin: 0 0 10px;
	padding-left: 40px;
}

/* ---------- 6. Fußbereich ---------- */

.site-footer {
	padding: 20px 35px;
	overflow: hidden;
	background-color: #2d2d2d;
	text-align: left;
	line-height: 1.5;
}

.site-footer h3 {
	margin: 20px 0 30px;
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.6em;
	text-transform: uppercase;
	color: #c4c4c4;
}

.site-footer p,
.site-footer .textwidget {
	font-size: 12px;
	line-height: 1.6em;
	color: #c4c4c4;
}

.site-footer a,
.site-footer ul a {
	color: #a849a3;
}

.site-footer a:hover,
.site-footer ul a:hover {
	color: #fff;
}

.site-footer ul {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.site-footer ul li {
	position: relative;
	padding: 10px 0 10px 25px;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
}

.site-footer ul li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	background: rgba(255, 255, 255, 0.3);
}

.site-footer ul a {
	display: inline-block;
	font-size: 12px;
}

.site-footer hr {
	border-top: 1px dotted rgba(255, 255, 255, 0.3);
	background-color: transparent;
}

.copyright {
	text-align: center;
}

/* Wie Bootstrap: Auch leere Spalten sind 1 px hoch, damit die Abstände gleich bleiben. */
.fuss-spalte {
	min-height: 1px;
}

/* Wie Bootstrap: Abstände am Ende der Spalten und vor der Trennlinie fallen nicht zusammen. */
.fuss-spalten::after,
.copyright::before {
	content: "";
	display: table;
}

.cachi-herz {
	vertical-align: -1px;
}

@media (min-width: 992px) {
	.fuss-spalten {
		display: flex;
		margin: 0 -15px;
	}

	.fuss-spalte {
		flex: 1 1 0;
		padding: 0 15px;
	}
}

/* ---------- 7. Desktop: fester Kasten mit eigenem Rollbalken ---------- */

@media (min-width: 992px) {
	body {
		overflow: hidden;
	}

	#wrapper {
		position: absolute;
		top: 50%;
		width: 100%;
		max-height: 500px;
		margin: -250px auto 0;
	}

	#shadow {
		max-height: 500px;
		overflow: hidden;
		box-shadow: 0 0 20px 0 #000;
	}

	#masthead {
		height: 500px;
	}

	.brand img {
		margin-top: 40px;
	}

	.brand figcaption {
		margin-bottom: 20px;
	}

	.nav-stacked {
		padding-bottom: 4px;
		background: linear-gradient(to bottom, #922693 0, #922693 1px, #ce85ce 1px, #ce85ce 2px, transparent 2px) left bottom / 100% 2px no-repeat;
	}

	#content {
		max-height: 500px;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.content-box h1 {
		padding-top: 50px;
		font-size: 48px;
	}

	.content-box hr {
		display: block;
	}
}