/*
Theme Name: Hello Jule & Axel
Description: Child-Theme von Hello Elementor für www.jule-axel.de, Nachbau der TYPO3-Vorlagen fileadmin/templates (2009).
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-juleaxel
*/

/* Die Vorlagen stehen unverändert in css/ebene1.css und css/ebene2.css, die TYPO3-Standards in
   css/typo3.css. Hier nur, was WordPress/Elementor angleicht. :where() hält die Spezifität bei 0, damit
   die alten Regeln gewinnen. */

/* Links: Ebene 2 hatte <body link="#FF0000" vlink="#FF0000" alink="#FF0000"> */
.ebene2 :where(a) { color: #f00; }

/* Elementor-Container und -Widgets als schlichte Blöcke: ohne eigene Abstände, ohne Flexbox (sonst fallen die
   Ränder von Überschriften und Absätzen nicht mehr zusammen) und ohne position: relative (sonst bezöge sich
   #zeitung mit position: absolute auf das Widget statt auf die Seite). Die id im Selektor schlägt Elementors
   .e-con { display: var(--display) }. */
:is(#content, #content2) :is(.elementor, .e-con, .e-con-inner, .elementor-widget, .elementor-widget-container):not(.elementor-widget-image-carousel, .elementor-widget-image-carousel *) {
	margin: 0;
	padding: 0;
	display: block;
	position: static;
}

/* Fotos: früher rgsmoothgallery (462 × 346 px, schwarz, Bild eingepasst, alle 4,5 s weiter),
   Fotos 2: früher goof_fotoboek (ein Bild 562 × 375 px mit Blättern). Jetzt Elementor-Bildkarussell
   mit Pfeilen und Lightbox beim Klick. */
#fotoalbum, #fotobuch { position: relative; margin: 0; }
#fotoalbum { width: 462px; }
#fotobuch { width: 562px; margin: 57px 0 0 3px; }
#fotoalbum .swiper-slide-image { display: block; width: 462px; height: 346px; object-fit: contain; background: #000; }
#fotobuch .swiper-slide-image { display: block; width: 562px; height: 375px; object-fit: contain; }

/* Elementor setzt .elementor * { box-sizing: border-box }; die alten Breiten (Forum 675 px plus Innenabstand)
   sind ohne gemeint */
:is(#content, #content2) :is(.elementor-widget-html, .elementor-widget-text-editor, .elementor-widget-shortcode) * { box-sizing: content-box; }

/* Die alte Seite lief im Quirks-Modus (Doctype ohne URL): dort haben Bilder allein in einer Zeile keine
   Unterlänge darunter. WordPress läuft im Standards-Modus, ohne diese Regel stünde alles darunter je Bild
   4 bis 5 px tiefer. */
:where(.ebene1, .ebene2) :where(img) { vertical-align: top; }

/* Browser-Standardrand; Elementor setzt body { margin: 0 } (Ebene 1 hat ohnehin * { margin: 0 }) */
body.ebene2 { margin: 8px; }

/* Elementor verkleinert Bilder auf die Breite des umgebenden Kastens (#kontakt ist 140 px, das Bild 150 px) */
:is(#content, #content2) .elementor-widget:not(.elementor-widget-image-carousel) img { max-width: none; }

/* Kurze Seiten (Kontakt ohne das alte Formular) schnitten das Hintergrundbild (545 px) sonst ab; das
   Ringe-Bild ist umflossen und zählt ohne clear nicht zur Höhe */
#content2 { min-height: 545px; }
#content2::after { content: ""; display: block; clear: both; }