/*
Theme Name: Hello Elementor Ziemons
Template: hello-elementor
Description: Child-Theme fuer das Staging der BGH-Kanzlei Dr. Ziemons. Bildet Typografie,
             Farben und Raster des Originals (Divi) nach, damit die Elementor-Fassung
             optisch deckungsgleich bleibt.
Version: 1.0
*/

/* ---------- Schriften: Originaldateien, nichts von Google ---------- */
@font-face { font-family:"Raleway";    font-display:swap;
             src:url("/wp-content/uploads/fonts/raleway-v28-latin-regular.ttf") format("truetype"); }
@font-face { font-family:"Raleway200"; font-display:swap;
             src:url("/wp-content/uploads/fonts/raleway-v28-latin-200.ttf") format("truetype"); }

:root {
  --ziemons-rot:    #7c1a20;  /* Akzent: Links, Linien, Buttonrahmen, linker Balken */
  --ziemons-blau:   #00293f;  /* Footer-Bereich Kontakt/Datenschutz */
  --ziemons-text:   #666;
  --ziemons-head:   #333;
}

/* ---------- Grundtypografie (Divi-Basis + Anpassungen der Kanzlei) ---------- */
body, input, textarea, select {
  font-family:'Raleway', Helvetica, Arial, Lucida, sans-serif;
  font-size:18px; line-height:1.7em; color:var(--ziemons-text); font-weight:500;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6 { font-family:'Raleway', Helvetica, Arial, Lucida, sans-serif;
                    color:var(--ziemons-head); line-height:1em; font-weight:500; padding-bottom:10px; }
h1, h2 { font-size:46px; font-family:'Raleway200', sans-serif; font-weight:200; padding-bottom:60px; }
h2 { padding-bottom:0; }
p  { padding-bottom:1em; margin:0; }
p:last-of-type { padding-bottom:0; }
a  { color:var(--ziemons-rot); text-decoration:none; }
strong { font-weight:700; }
li { padding-bottom:5px; }

/* Die kurze Linie ueber jeder Ueberschrift */
hr { border:3px solid var(--ziemons-rot); width:145px; background-color:var(--ziemons-rot);
     text-align:left; margin:15px 0 15px 0; }

@media all and (min-width:1160px) and (max-width:1450px) { h1,h2 { font-size:36px; } }
@media all and (min-width:981px)  and (max-width:1159px) { h1,h2 { font-size:30px; } }
@media all and (max-width:980px)                         { h1,h2 { font-size:26px; } }

/* ---------- Raster ----------
   Divi rechnet die Reihe mit 80 % Fensterbreite und deckelt bei 1300 px.
   Elementor kennt nur einen festen Pixelwert, deshalb hier per CSS. */
.elementor-section.elementor-section-boxed > .elementor-container { width:80%; max-width:1300px; }
@media all and (max-width:980px) {
  .elementor-section.elementor-section-boxed > .elementor-container { width:90%; }
}

/* Divis Rinne von 5,5 % nachbilden.
   flex-wrap + flex-shrink:0 sind noetig, damit die Spalten beim Aufklappen
   auf volle Breite gehen und untereinander rutschen - Divi loeste das ueber
   Floats, Elementors Flexbox wuerde sie sonst nur zusammenstauchen. */
.ziemons-row > .elementor-container { flex-wrap:wrap; }
.ziemons-row > .elementor-container > .elementor-column { margin-right:5.5%; flex-shrink:0; }
.ziemons-row > .elementor-container > .elementor-column:last-child { margin-right:0; }
@media all and (max-width:980px) {
  .ziemons-row > .elementor-container > .elementor-column { margin-right:0; width:100%; }
  /* Auf schmalen Schirmen zuerst die Ueberschrift, dann Text bzw. Bild -
     im Original war dafuer ein zweiter, doppelter Textblock hinterlegt. */
  #prozessfuehrung .prozessone, #person .personone { order:2; }
  #prozessfuehrung .prozesstwo, #person .persontwo { order:1; }
}

/* ---------- Der Button "mehr erfahren" ---------- */
.link {
  border:1px solid var(--ziemons-rot); padding:5px 35px 5px 15px !important; margin:30px 0 0 0;
  display:inline-block; color:var(--ziemons-rot); font-size:90%; border-radius:10px;
  background:url("/wp-content/uploads/2026/08/Pfeil_rechts.png") no-repeat;
  background-position:92% center; background-size:14px 23px; cursor:pointer;
}

/* Die weiterfuehrenden Bloecke starten eingeklappt */
.philomore, .prozessmore, .corporatemore, .personmore, .imptext1, .imptext2, .datenschutz { display:none; }

.philo-basis, .corporate-basis, .prozess-basis { padding-top:30px; }
.person-kopf   { padding-top:180px; }
.person-extra  { margin-top:60px !important; margin-bottom:60px !important; }
@media all and (max-width:980px) { .person-kopf { padding-top:0 !important; } }

/* Lebenslauf-Tabelle: Hello zeichnet Rahmen und Zebrastreifen, Divi hatte
   beides nicht - die Jahreszahlen stehen dort frei neben dem Text. */
.lebenslauf table, .lebenslauf thead, .lebenslauf tbody,
.lebenslauf tr, .lebenslauf td, .lebenslauf th {
  border:none !important; background:transparent !important; box-shadow:none;
}
.lebenslauf table { width:100%; border-collapse:collapse; }
.lebenslauf td { padding:6px 24px 6px 0; vertical-align:top; }
.lebenslauf { margin-top:60px; }

/* ---------- Aufklapper "Mitgliedschaften" / "Veroeffentlichungen" ---------- */
.elementor-widget.ziemons-toggle .elementor-toggle-item { border:none; margin-bottom:10px; }
.elementor-widget.ziemons-toggle .elementor-tab-title {
  color:var(--ziemons-rot) !important; font-weight:700; font-size:18px;
  border:1px solid var(--ziemons-rot) !important; border-radius:10px; padding:20px !important;
  background:url("/wp-content/uploads/2026/08/Pfeil_rechts.png") no-repeat;
  background-position:99% center; background-size:14px 23px;
}
.elementor-widget.ziemons-toggle .elementor-tab-title.elementor-active {
  background-image:url("/wp-content/uploads/2026/08/Pfeil_oben.png"); background-size:23px 14px;
}
/* Elementors eigenes Caret-Icon abschalten - der Pfeil steckt bereits als
   Hintergrundbild im Titel, sonst stehen dort zwei Zeichen nebeneinander.
   Die doppelte Klasse ist noetig, weil Elementors Regeln spezifischer sind. */
.elementor-widget.ziemons-toggle .elementor-tab-title .elementor-toggle-icon { display:none !important; }
.elementor-widget.ziemons-toggle .elementor-tab-content {
  border:none; padding:20px 0 30px 0;   /* Divi: 20 px Luft nach oben, kein Rand seitlich */
}

/* Listenabstaende von Divi uebernehmen - sonst kleben Aufzaehlungen aneinander */
.elementor-widget-text-editor ul, .ziemons-toggle .elementor-tab-content ul {
  list-style-type:disc; padding:0 0 23px 1em; margin:0; line-height:26px;
}
.elementor-widget-text-editor ol, .ziemons-toggle .elementor-tab-content ol {
  list-style-type:decimal; list-style-position:inside; padding:0 0 23px; margin:0; line-height:26px;
}
/* Zwischentitel innerhalb der Aufklapper brauchen Luft nach oben, im Original
   stand dort ein leerer Absatz - der erzeugte hier einen zu grossen Sprung. */
.ziemons-toggle .elementor-tab-content p + p > strong:only-child,
.ziemons-toggle .elementor-tab-content ul + p > strong:only-child { display:inline-block; margin-top:20px; }

/* Portraet im aufgeklappten Zustand */
.portraet-offen { margin-bottom:40px; }

/* ---------- Kontakt / Datenschutz auf Dunkelblau ---------- */
/* Elementor faerbt jedes Textwidget direkt ueber --e-global-color-text ein.
   Eine Vererbung vom Abschnitt greift deshalb nicht - die Widgets selbst
   muessen angesprochen werden. */
#kontakt, .datenschutz,
#kontakt .elementor-widget-text-editor, .datenschutz .elementor-widget-text-editor,
#kontakt .elementor-widget-text-editor p, .datenschutz .elementor-widget-text-editor p,
#kontakt li, .datenschutz li, #kontakt strong, .datenschutz strong,
#kontakt a, .datenschutz a { color:#fff; }
#kontakt a:hover, .datenschutz a:hover { color:#fff; text-decoration:underline; }

/* Abstaende im dunklen Bereich */
.imptext1, .imptext2 { padding-top:40px; }
.datenschutz .elementor-widget-text-editor { padding-top:40px; }
#kontakt p, .datenschutz p { padding-bottom:1em; }
.imp {
  border:1px solid #fff; padding:5px 15px !important; margin:0;
  display:inline-block; border-radius:10px; cursor:pointer; color:#fff;
}
.imp-zeile { text-align:center; }

/* ---------- Der mitlaufende Balken links ---------- */
.leftside { position:fixed; top:0; bottom:0; left:0; width:10px;
            background-color:var(--ziemons-rot); z-index:999999; }

/* ---------- Kopfbereich: Logo links, Menue rechts, nicht mitscrollend ---------- */
.site-header {
  padding:30px 0; background:#fff; box-shadow:none; border:none;
  max-width:1300px; width:80%; margin:0 auto;
}
/* Divi stellt das Menue neben das Logo, solange es in die Zeile passt, und
   schiebt es sonst darunter (ab etwa 1150 px). Genau dieses Verhalten hier:
   umbrechen erlaubt, aber das Menue selbst wird nicht gestaucht. */
.site-header .header-inner {
  width:100%; flex-wrap:wrap; align-items:center; justify-content:space-between;
  /* Hello setzt hier 6 px Aussenabstand je Seite - genau die Breite, die dem
     Menue zum Umbruch fehlt. */
  margin:0; max-width:none;
}
.site-header .site-branding img, .site-header .custom-logo { max-height:50px; height:50px; width:auto; }
/* Nicht schrumpfen lassen: sonst quetscht Flexbox das Menue schmaler als
   seinen Inhalt und es bricht zweizeilig um. Das Original bleibt einzeilig. */
.site-navigation { flex:0 0 auto; }
.site-navigation ul.menu {
  font-family:'Raleway', sans-serif; font-weight:300; font-size:16px;
  justify-content:flex-end; flex-wrap:wrap;
}
/* Divi rechnet mit 22 px. Hier braucht das Menue damit 917 px bei 916 px Platz
   und rutscht bei 1440 px unter das Logo - 21 px loesen das, ohne sichtbaren
   Unterschied. */
.site-navigation ul.menu li { padding-right:21px; }
.site-navigation ul.menu li:last-child { padding-right:0; }
.site-navigation ul.menu li a { padding:0; white-space:nowrap; }
.site-navigation ul.menu a { color:var(--ziemons-text); }
.site-navigation ul.menu a:hover { color:var(--ziemons-rot); }
.site-navigation ul.menu li.current-menu-item > a { color:var(--ziemons-text); }
.site-footer { display:none; }

/* Elementor-Innenabstaende neutralisieren, Divi hatte hier keine */
.elementor-widget:not(:last-child) { margin-bottom:0; }