/* =========================================================================
   customize.css
   Individuelle CSS-Anpassungen für otto-trippel.de
   Wird als letzte Stylesheet-Datei im <head> eingebunden (siehe
   includes/html-head.php) und überschreibt damit bei Bedarf die
   Mobirise-/Bootstrap-Standards.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fix: position:relative für <header>/<footer> wiederherstellen.
   Grund: Das Mobirise-Theme setzt "position: relative" vermutlich über
   den Tag-Namen "section" (nicht über eine Klasse). Da header.php/footer.php
   jetzt aus semantischen Gründen <header>/<footer> statt <section> nutzen,
   griff diese Regel nicht mehr - dadurch brach der interne .mbr-overlay-Div
   im Footer aus seinem Container aus und legte sich als grauer Schleier
   über die komplette restliche Seite.
   ------------------------------------------------------------------------- */
header#menu1-1,
footer#footer3-4 {
    position: relative;
}

/* -------------------------------------------------------------------------
   Footer-Overlay: statt eines leeren .mbr-overlay-Divs im Markup (footer.php)
   wird der halbtransparente weiße Überzug jetzt per ::before erzeugt.
   z-index wird bewusst EXPLIZIT gesetzt (statt sich auf die unbekannte
   Theme-Regel für .mbr-overlay zu verlassen), damit die Stapelreihenfolge
   unabhängig vom Theme-CSS immer korrekt ist: Overlay hinten, Inhalt vorne.
   ------------------------------------------------------------------------- */
footer#footer3-4::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

footer#footer3-4 > .container {
    position: relative;
    z-index: 1;
}


body {
	font-size: 18px;
	font-size: 1.125rem;
}
p.display-4 {
	font-size: inherit;
}

h1 {
	margin-bottom: 1.5rem;
	font-size: 48px;
	font-size: 3rem;
}
h2 {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	font-size: 32px;
	font-size: 2rem;
}
h3 {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	font-size: 24px;
	font-size: 1.5rem;
}