/* =====================================================================
   Online-Olm Webdesign – eigenes CSS
   Speicherort: /wp-content/themes/<Child-Theme>/css/custom.css
   Nur diese Datei bearbeiten. Kopien an anderer Stelle werden nicht geladen.
   Stand: 27.10.2026 (Aufräumen Divi 5)
   ===================================================================== */


/* =====================================================================
   1. SCHRIFTEN & TYPOGRAFIE
   ===================================================================== */

/* Responsive Schriftgrößen: wachsen mit der Bildschirmbreite zwischen Min und Max */
body,
p,
li {
	font-size: clamp(1rem, 0.92rem + 0.35vw, 1.0625rem); /* 16–17px */
	line-height: 1.6;
}

h1 { font-size: clamp(1.875rem, 5vw, 2.5rem);       line-height: 1.2; } /* 30–40px */
h2 { font-size: clamp(1.5625rem, 4vw, 1.875rem);    line-height: 1.3; } /* 25–30px */
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem);        line-height: 1.4; } /* 20–24px */
h4 { font-size: clamp(1.125rem, 2vw, 1.375rem);     line-height: 1.4; } /* 18–22px */
h5 { font-size: clamp(1rem, 1.5vw, 1.25rem);        line-height: 1.4; } /* 16–20px */
h6 { font-size: clamp(0.875rem, 1.2vw, 1.0625rem);  line-height: 1.5; } /* 14–17px */

/* Wörter umbrechen und trennen – nur in Modulen mit der Klasse „text-wrap“ */
.text-wrap {
	word-break: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}


/* =====================================================================
   2. HEADER & NAVIGATION
   (Selektoren des klassischen Divi-Headers – live prüfen, ob der Header
   noch so aufgebaut ist, sonst kann dieser Block weg)
   ===================================================================== */

/* Schatten unter dem Header entfernen – normal und beim Scrollen (fixiert) */
#main-header,
#main-header.et-fixed-header {
	box-shadow: none !important;
}

/* Schriftgröße der Untermenü-Punkte */
#top-menu .sub-menu .menu-item a {
	font-size: 20px;
}


/* =====================================================================
   3. LINKS
   ===================================================================== */

/* Links in Text- und Blurb-Modulen: Beerenrot mit geschwungener Linie darunter */
.et_pb_text a,
.et_pb_blurb a {
	position: relative;
	color: #b61c3e !important; /* dunkles Beerenrot */
	text-decoration: none !important;
	padding-bottom: 4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q25 6, 50 4 T100 4' stroke='rgba(182,28,62,0.4)' stroke-width='1.2' fill='none' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 6px;
	transition: all 0.3s ease;
}

/* Hover: Text Mittelblau, Linie schwingt anders */
.et_pb_text a:hover,
.et_pb_blurb a:hover {
	color: #0a4f69 !important; /* Mittelblau */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q20 0, 40 3 T100 3' stroke='rgba(107,22,70,0.6)' stroke-width='1.2' fill='none' /%3E%3C/svg%3E");
}

/* Ausnahme: Klasse „ausnahme“ am Modul → Links ohne Linie und Effekt */
.ausnahme a {
	color: inherit !important;
	text-decoration: none !important;
	border-bottom: none !important;
	background-image: none !important;
	outline: none !important;
	padding-bottom: 0 !important;
	transition: none !important;
}


/* =====================================================================
   4. MODULE & LAYOUT
   ===================================================================== */

/* Buttons: responsive Schriftgröße */
.et_pb_button {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
}

/* Buttons (u. a. Portfolio-Projekte): beim Hover Grafik als Hintergrund */
body #page-container .et_pb_section .et_pb_button:hover {
	background-image: url("/wp-content/uploads/2026/09/button-rot-hover.png") !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/* Aufzählung mit Icon: Klasse „wplo-bullet“ am Modul
   Punkte weg, stattdessen ein Divi-Icon in Beerenrot vor jedem Listenpunkt */
.wplo-bullet ul {
	list-style-type: none !important;
}

.wplo-bullet ul li:before {
	content: "\45";
	font-family: "ETmodules" !important;
	color: #b61c3e;
	display: inline-block;
	width: 1.5em;
	margin-left: -1.5em;
}

/* Inhalte einer Spalte vertikal mittig: Klasse „centered“ an der Spalte */
.centered {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

/* Buttons am unteren Rand der Spalte ausrichten: Klasse „lem_fixed_buttons“ an der Zeile */
.lem_fixed_buttons .et_pb_column {
	padding-bottom: 20px;
}

.lem_fixed_buttons .et_pb_button_module_wrapper {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/* Slider: Bild auch mobil anzeigen, Punkte-Navigation etwas höher */
.et_pb_slide_image {
	display: block !important;
}

.et-pb-controllers {
	position: relative;
	bottom: 30px;
}


/* =====================================================================
   5. GLOBAL
   ===================================================================== */

/* Horizontales Scrollen verhindern (z. B. durch überstehende Elemente) */
#page-container {
	overflow: hidden;
}