/* =========================================================
   CR TOOLS TEMPORÄRES REDESIGN
   Theme: SiteOrigin Vantage
   Zweck:
   Dieses CSS übersteuert gezielt das Standarddesign des
   SiteOrigin-Vantage-Themes und setzt ein einheitliches
   CR-Tools-Design für Header, Navigation, Content, Slider,
   Service-Kacheln, Formularbutton und Footer.
   ========================================================= */
/* Globale Design-Variablen */
:root {
  --cr-blue: #264181;              /* Hauptfarbe CR-Tools Blau */
  --cr-white: #ffffff;             /* Weiß für Text/Flächen */
  --cr-text: #515151;              /* Standard-Textfarbe im Content */
  --cr-width: 1196px;              /* Maximale Breite für Header/Nav */
  --cr-footer-bottom-width: 1080px;/* Breite für Footer-Inhalt und Trennlinie */
}
/* ---------------------------------------------------------
   GLOBAL
   Entfernt Theme-Hintergründe/Schatten und setzt Basislayout.
--------------------------------------------------------- */
html,
body,
body.layout-full,
body.responsive.layout-full #page-wrapper,
#page-wrapper {
  background: #ffffff !important;  /* Erzwingt weißen Seitenhintergrund */
  box-shadow: none !important;     /* Entfernt Vantage-Box-Schatten */
}
body {
  font-family: Arial, Helvetica, sans-serif !important; /* Einheitliche Schrift */
}
#secondary {
  display: none !important;        /* Blendet Sidebar aus */
}
#primary {
  width: 100% !important;          /* Content nutzt volle Breite */
}
/* ---------------------------------------------------------
   HEADER
   Baut den blauen Kopfbereich mit Logo auf.
--------------------------------------------------------- */
#masthead.site-header {
  background: var(--cr-blue) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 38px 0 53px !important; /* Höhe des blauen Headers */
  border-radius: 0 !important;
  position: relative !important;
  z-index: 20 !important;
  margin-bottom: 0 !important;
}
/* Zentriert Logo/Header-Inhalt auf definierter Breite */
#masthead .hgroup.full-container,
.hgroup.full-container {
  max-width: var(--cr-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
/* Entfernt alte Theme-Abstände/Floats am Logo */
#masthead .logo-wrapper,
#masthead .logo {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  flex: 0 0 auto !important;
}
/* Logo als klickbaren Block darstellen */
#masthead .logo,
#masthead .logo a {
  display: block !important;
}
#masthead .logo a {
  cursor: pointer !important;
}
/* Logo-Größe begrenzen und per Filter weiß einfärben.
   Quelldatei (CR-Tools_logo.png) ist dunkel, daher invertieren wir
   die Farben per Filter, statt eine zweite weiße Logodatei zu pflegen. */
#masthead .logo img,
.logo img {
  width: auto !important;
  max-width: 230px !important;
  max-height: 46px !important;
  height: auto !important;
  display: block !important;
  filter: brightness(0) invert(1) !important;
}
/* Entfernt Vantage-Support-Text neben dem Logo (Markup ist leer,
   wird hier zusätzlich sicherheitshalber ausgeblendet) */
#masthead .support-text {
  display: none !important;
}
/* ---------------------------------------------------------
   HEADER NAVIGATION
   Positioniert das Hauptmenü rechts im blauen Header.
--------------------------------------------------------- */
.main-navigation {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  position: absolute !important;   /* Navigation liegt über dem Header */
  top: 42px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
  width: 100% !important;
  pointer-events: none !important; /* siehe Hinweis unten */
}
/* Menü-Inhalt auf Headerbreite zentrieren und rechts ausrichten */
.main-navigation .full-container {
  max-width: var(--cr-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
/* Logo-Klick funktioniert nicht: .main-navigation liegt per
   position:absolute mit z-index:30 ÜBER dem Header (z-index:20) und
   ist (wegen width:100%) genauso breit wie der ganze Header,
   einschließlich der Stelle links, an der das Logo sitzt. Durch
   justify-content:flex-end im Flex-Container ist dort zwar nichts
   SICHTBAR, die leere Fläche gehört aber trotzdem zur Box des
   Navigations-Containers und fängt Klicks ab, statt sie zum
   darunterliegenden Logo-Link durchzulassen. Fix: Klicks auf die
   Navigation grundsätzlich deaktivieren und nur auf den tatsächlich
   interaktiven Elementen (Menülinks, Such-Icon) wieder erlauben. */
.main-navigation a,
.main-navigation button,
.main-navigation input,
.main-navigation #search-icon,
.main-navigation #search-icon * {
  pointer-events: auto !important;
}
/* Container für das Menü rechtsbündig halten */
.main-navigation-container {
  width: auto !important;
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
/* Hauptmenü als horizontale Flex-Navigation */
#menu-header {
  width: auto !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 32px !important;            /* Abstand zwischen Menüpunkten */
  background: transparent !important;
  list-style: none !important;
  position: relative !important;
}
/* Entfernt alte Float-/Listen-Styles der Menüpunkte */
#menu-header > li {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Suchsymbol an definierte Position im Flex-Menü setzen */
#search-icon {
  order: 6 !important;
}
/* Normale Menülinks.
   Hinweis: #menu-item-406-de/-en-us sind alte, nicht mehr existierende
   Polylang-IDs (aktuell heißt das Sprach-Item z.B. #menu-item-607-en-us;
   Polylang vergibt diese IDs dynamisch nach dem WP-Menüeintrag und sie
   können sich bei einer Menü-Änderung wieder verschieben). Ausgeschlossen
   wird daher zusätzlich robust über die Klasse .lang-item, die bei jedem
   Sprach-Item vorhanden ist – darüber funktioniert der Ausschluss auch
   nach einer ID-Änderung weiter. */
#menu-header > li:not(#menu-item-406-de):not(#menu-item-406-en-us):not(.lang-item) > a {
  color: #ffffff !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 2.4px !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
/* Auch für Polylang, falls andere Klassen/IDs verwendet werden */
#menu-header > li.lang-item > a {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}
/* Sprachumschalter / Polylang-Flaggen.
   Aktuell zeigt das Menü nur ein Sprach-Item (Wechsel zu Englisch,
   z.B. #menu-item-607-en-us mit Klasse .lang-item), da Deutsch die
   Standardsprache ist. Die Selektoren auf die alte ID #menu-item-406-de
   greifen daher aktuell nicht mehr – .lang-item deckt den Fall ab. */
#menu-item-406-de,
#menu-item-406-en-us,
#menu-header .lang-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Klickfläche der Sprachflaggen */
#menu-item-406-de > a,
#menu-item-406-en-us > a,
#menu-header .lang-item > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
}
/* Darstellung der Flaggenbilder */
#menu-item-406-de img,
#menu-item-406-en-us img,
#menu-header .lang-item img {
  width: 34px !important;
  height: 24px !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  margin: 0 !important;
}
/* Aktuelle Sprache voll sichtbar */
#menu-header .current-lang > a {
  opacity: 1 !important;
}
/* Nicht aktive Sprache leicht abgeschwächt */
#menu-header .lang-item:not(.current-lang) > a {
  opacity: 0.75 !important;
}
/* Hover-Effekt für Menülinks */
#menu-header > li > a:hover {
  opacity: 0.75 !important;
}
/* Suche / Lupe.
   Ursache des "Klick tut nichts"-Problems: Das Theme öffnet das
   Suchformular per JS korrekt (display:block), setzt dabei aber eine
   riesige Inline-Breite (z.B. width:1100px). Da #search-icon ganz
   rechts in der Navigation sitzt, ragt das Feld dadurch weit über den
   sichtbaren Bereich hinaus – es "öffnet" sich technisch, ist aber
   praktisch unsichtbar. Fix: Das Formular wird hier unabhängig von der
   Inline-Breite des Themes per position:absolute als kleines Dropdown
   direkt UNTER dem Icon positioniert, mit fester, sinnvoller Breite. */
#search-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}
#search-icon-icon {
  cursor: pointer !important;
}
#search-icon .searchform {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  width: 240px !important;
  max-width: 240px !important;
  z-index: 50 !important;
  margin: 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}
#search-icon .searchform .field {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Such-Icon weiß und ohne Theme-Hintergrund */
#search-icon #search-icon-icon,
#search-icon a {
  color: #ffffff !important;
  background: transparent !important;
}
/* Dropdown */
.main-navigation ul ul {
  background: var(--cr-blue) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 14px !important;
  border-radius: 0 0 12px 12px !important;
}
/* Dropdown-Items ohne eigene Hintergründe */
.main-navigation ul ul li {
  background: transparent !important;
}
/* Dropdown-Links optisch passend zum Header */
.main-navigation ul ul li a {
  color: #ffffff !important;
  background: transparent !important;
  padding: 7px 0 !important;
  font-size: 11px !important;
  letter-spacing: 1.8px !important;
  white-space: nowrap !important;
}
/* ---------------------------------------------------------
   CONTENT
   Entfernt Theme-Abstände, setzt weiße Fläche und erhält
   Gutenberg-Strukturen.
--------------------------------------------------------- */
#main.site-main,
#main,
#main .full-container,
#primary,
#content,
.site-content,
article,
.entry-main,
.entry-content {
  background: #ffffff !important;
}
#main {
  padding-top: 0 !important;       /* Kein Abstand zwischen Header und Content */
  padding-bottom: 35px !important;
  margin-top: 0 !important;
}
/* Contentbreite im Hauptbereich */
#main .full-container {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding-top: 0 !important;
}
/* Globaler Abstand-Fix zwischen Header und erstem Content */
#primary,
#content,
article,
.entry-main,
.entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Entfernt Abstand des ersten Content-Elements */
.entry-content > *:first-child {
  margin-top: 0 !important;
}
/* Erzwingt Sichtbarkeit von Gutenberg-/Galerie-Elementen */
.entry-content,
.entry-content > *,
.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content ul,
.entry-content li,
.entry-content figure,
.entry-content div,
.wp-block-image,
.wp-block-envira-envira-gallery {
  visibility: visible !important;
  opacity: 1 !important;
}
/* Gutenberg-Spaltenlayout erhalten */
.entry-content > p,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > figure {
  display: block !important;
}
/* Gutenberg-Spalten Desktop nebeneinander */
.entry-content .wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 48px !important;
  align-items: center !important;
}
/* Einzelne Gutenberg-Spalten flexibel machen */
.entry-content .wp-block-column {
  display: block !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
/* Einheitliche Textfarbe im Content.
   WICHTIG: KEIN !important hier (mehr)! Vorher wurde mit !important
   JEDE Textfarbe im Content erzwungen – auch dort, wo im Gutenberg-
   Editor bewusst eine eigene Inline-Farbe gesetzt wurde (z.B. die
   blauen Überschriften-Texte mit style="color:#264181"). Ohne
   !important gilt diese Regel weiterhin als Standardfarbe für alle
   Absätze OHNE eigene Farbangabe (normale Kaskade reicht dafür aus),
   aber Absätze mit expliziter Inline-Farbe dürfen jetzt wieder ihre
   eigene Farbe zeigen statt überschrieben zu werden. */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--cr-text);
}
/* ---------------------------------------------------------
   SLIDER: ABSTAND & HINTERGRUNDFARBE
   Auf der Seite gibt es nur noch EINEN Slider: den automatisch vom
   Smart-Slider-Plugin direkt nach dem Header ausgegebenen Block
   #main-slider (id="n2-ss-3"). Der frühere zweite Slider als
   Gutenberg-Block (.cr-hero-slider-section) wurde im Editor entfernt
   und existiert im Markup nicht mehr – ein separater CSS-Fix dafür
   ist daher nicht mehr nötig.

   Smart Slider erzeugt bei "Boxed"-Layout selbst einen inneren
   Rahmen: der Wrapper .n2-ss-margin bekommt vom Plugin (Slider-
   Einstellungen -> Größe/Layout -> Margin) einen Inline-Außenabstand
   (aktuell ca. 130px links/rechts, 0 oben, 60px unten), innerhalb
   dessen das eigentliche Bild liegt. Da Außenabstand immer
   transparent ist, zeigt dieser Rahmen die Hintergrundfarbe des
   übergeordneten .n2-section-smartslider – deshalb wird dessen
   Hintergrund hier auf CR-Blau gesetzt (sonst wäre er grau/weiß).

   Zusätzlich bekommt #main-slider selbst:
   - 40px Padding rundherum (bleibt CR-Blau, da Innenabstand farbig
     bleibt – im Gegensatz zu margin, das immer transparent ist),
   - 100px Außenabstand nur unten, bewusst weiß/transparent, als
     Trennung zum nächsten Inhaltsbereich,
   - kein Außenabstand oben, damit der Slider direkt unter dem
     Header beginnt.
--------------------------------------------------------- */
#main-slider {
  margin: 0 0 100px 0 !important;
  padding: 40px !important;
  background: #264281 !important;
  box-sizing: border-box !important;
}
/* Innere Wrapper von Smart Slider ohne eigenen Außenabstand und mit
   CR-Blau statt dem Plugin-Standard, damit kein Grau/Weiß durch den
   .n2-ss-margin-Rahmen sichtbar wird. */
#main-slider .n2-section-smartslider,
#main-slider .n2-padding {
  margin: 0 !important;
  background: #264281 !important;
}
/* ---------------------------------------------------------
   SERVICE-KACHELN GUTENBERG
   Gestaltet die fünf Dienstleistungs-Kacheln unter dem Slider.
--------------------------------------------------------- */
.cr-service-grid {
  max-width: 1196px;
  margin: 0 auto;
  padding: 60px 0 90px;
  background: #ffffff !important;
}
/* Kacheln als horizontale Reihe */
.cr-service-grid .wp-block-columns {
  display: flex;
  gap: 26px;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 0;
}
/* Jede Kachel nimmt ca. 20% Breite ein */
.cr-service-grid .wp-block-column {
  flex-basis: 20% !important;
  flex-grow: 0;
  display: flex;
}
/* Service-Kachel mit weißem Hintergrund */
.cr-service-card {
  position: relative;
  background: #ffffff;
  width: 100%;
  height: 190px;
  padding: 70px 24px 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
/* Text innerhalb der Kachel */
.cr-service-card p {
  margin: 0;
  font-size: 18px;
  line-height: 1.18;
  font-weight: 400;
  color: #555555;
}
/* Blaues Icon-Feld oberhalb der Kachel */
.cr-service-icon {
  position: absolute;
  top: -64px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 82px;
  background: var(--cr-blue);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  z-index: 2;
}
/* Icon weiß einfärben */
.cr-service-icon img {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1) !important;
}
/* Fallback, falls Icon-Container leer ist */
.cr-service-icon:empty::before {
  content: "";
  display: block;
}
/* Abstand vor dem Trenner ("Ein Beispiel für unsere ...") wird nicht
   sichtbar, obwohl im Editor margin-top:12rem inline gesetzt ist.
   Ursache: WordPress erzeugt global eine Regel
   ":where(.is-layout-constrained) > *{margin-block-start:24px}".
   margin-top (physisch) und margin-block-start (logisch) steuern
   zwar denselben Rand, gelten CSS-intern aber als unterschiedliche
   Eigenschaften – hier setzt sich die logische 24px-Regel gegen das
   inline margin-top:12rem durch, weshalb praktisch nur 24px statt
   192px (12rem) Abstand zu sehen sind. Da die WP-Regel global für
   ALLE is-layout-constrained-Elemente der Seite gilt, wird sie hier
   NICHT angefasst – stattdessen überschreiben wir gezielt nur für
   diesen Trenner beide Varianten (margin-top UND margin-block-start)
   mit !important, damit unabhängig von der Gewinner-Eigenschaft immer
   12rem gilt. */
/* Gilt NUR ab Tablet/Desktop (min-width: 768px). Auf Mobile soll der
   WordPress-Standardabstand erhalten bleiben, da 22rem dort viel zu
   groß wirkt. */
@media (min-width: 768px) {
  .cr-service-grid hr.wp-block-separator {
    margin-top: 12rem !important;
    margin-block-start: 22rem !important;
  }
}
/* ---------------------------------------------------------
   KONTAKTFORMULAR BUTTON
   Gestaltet den WPForms-Absenden-Button (Formular-ID 430,
   z.B. auf der Kontakt-Seite).
--------------------------------------------------------- */
#wpforms-form-430 .wpforms-submit-container {
  text-align: left !important;
}
/* Primärer Button im CR-Blau */
#wpforms-submit-430 {
  background-color: var(--cr-blue) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  padding: 13px 32px !important;
  min-width: 220px !important;
  height: auto !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
/* Hover-/Focus-Zustand des Buttons */
#wpforms-submit-430:hover,
#wpforms-submit-430:focus {
  background-color: #a6a6aa !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}
/* ---------------------------------------------------------
   FOOTER
   Ersetzt die Theme-Footer-Struktur durch ein eigenes
   dreispaltiges Layout. Im echten Markup steckt im Footer nur
   noch ein Nav-Menü-Widget (#nav_menu-5 mit der echten, in WordPress
   gepflegten Liste menu-footer-deutsch: Produkte/Kontakt/Impressum/
   Datenschutzerklärung); Spalte 1 (Logo/Claim) und Spalte 3
   (Kontaktdaten) werden komplett über ::before/::after als
   CSS-generierter Inhalt erzeugt, nicht aus echtem WP-Content.
   Spalte 2 zeigt das echte Menü-Widget mit seinen echten, klickbaren
   Links (vorher wurde die echte Liste hier ausgeblendet und durch
   per ::after erzeugten, nicht klickbaren Text ersetzt).
--------------------------------------------------------- */
#colophon.site-footer {
  width: 100% !important;
  max-width: none !important;
  margin: 80px 0 0 0 !important;   /* Abstand zum vorherigen Inhaltsbereich */
  background: var(--cr-blue) !important;
  color: #ffffff !important;
  padding: 56px 0 42px !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  box-sizing: border-box !important;
}
/* Footer-Inhalt als dreispaltiges Grid */
#footer-widgets.full-container {
  width: var(--cr-footer-bottom-width) !important;
  max-width: calc(100% - 192px) !important;
  margin: 0 auto !important;
  padding: 0 0 58px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1.35fr 0.9fr 1fr !important;
  gap: 90px !important;
  align-items: start !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: static !important;
}
/* Linke Footer-Spalte:
   Wird künstlich per ::before erzeugt, inklusive Logo und Claim.
   Der Claim-Text steht NICHT in der WordPress-Datenbank (daher von
   Polylang nicht übersetzbar) und wird hier pro Sprache über das vom
   Theme gesetzte  Attribut umgeschaltet. Polylang
   schreibt dort z.B. lang="de-DE" bzw. lang="en-US". Falls weitere
   Sprachen hinzukommen, einfach einen weiteren html[lang="..."]-Block
   nach demselben Muster ergänzen. */
#footer-widgets::before {
  display: block !important;
  padding-top: 62px !important;
  background-image: url("https://cr-tools.heinrich.biz/wp-content/uploads/2025/04/CR-Tools_logo.png") !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
  background-size: 230px auto !important;
  filter: brightness(0) invert(1) !important;
  white-space: normal !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
  letter-spacing: 1.4px !important;
  font-weight: 600 !important;
}
html[lang="de-DE"] #footer-widgets::before {
  content: "Ihr Spezialist für individuelle Befestigungslösungen" !important;
}
html[lang="en-US"] #footer-widgets::before {
  content: "Your specialist for custom attachment solutions" !important;
}
/* Mittlere Footer-Spalte:
   Bereinigt alle Widget-Standardstyles. */
#footer-widgets .widget {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Positioniert das Nav-Menü in Spalte 2 */
#footer-widgets .widget_nav_menu {
  grid-column: 2 !important;
  text-align: left !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Robust: unabhängig vom konkreten Footer-Menünamen */
#footer-widgets .widget_nav_menu > div {
  text-align: left !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Headline mittlere Spalte.
   Auch dieser Text steht nur im CSS (kein WordPress-Inhalt), daher
   hier ebenfalls pro Sprache über html[lang="..."] umgeschaltet. */
#footer-widgets .widget_nav_menu > div::before {
  display: block !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
  letter-spacing: 1.6px !important;
  font-weight: 400 !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}
html[lang="de-DE"] #footer-widgets .widget_nav_menu > div::before {
  content: "Erfahren Sie mehr";
}
html[lang="en-US"] #footer-widgets .widget_nav_menu > div::before {
  content: "Learn more about us";
}
/* Echte Footer-Menüliste (#menu-footer-deutsch) sichtbar darstellen
   und wie die vorherige Textdarstellung stylen, jetzt aber als
   echte, klickbare Links statt reinem CSS-Text. */
#footer-widgets .widget_nav_menu ul {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#footer-widgets .widget_nav_menu li {
  display: block !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}
#footer-widgets .widget_nav_menu li a {
  display: inline-block !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
  letter-spacing: 1.6px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
#footer-widgets .widget_nav_menu li a:hover {
  opacity: 0.75 !important;
}
/* Alle Linien und Standard-Menüstile entfernen */
#footer-widgets .widget_nav_menu,
#footer-widgets .widget_nav_menu *,
#footer-widgets .widget_nav_menu ul,
#footer-widgets .widget_nav_menu li,
#footer-widgets .widget_nav_menu li a {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background-image: none !important;
}
/* Rechte Footer-Spalte:
   Telefonnummer und E-Mail sollen jetzt klickbar sein (tel:/mailto:).
   Per ::after erzeugter Inhalt ist reiner CSS-Text – daraus kann
   niemals ein echter Link werden. Daher wird der Kontaktblock nicht
   mehr per ::after erzeugt, sondern über ein echtes "Benutzerdefiniertes
   HTML"-Widget im Footer-Widget-Bereich (siehe Anleitung), das genau
   dort die folgende Markup-Struktur enthalten muss:

   
     Kontakt
     +49 89 568 246 42
     info@cr-tools.de
   

   Die Widget-Hülle (Klasse variiert je nach WP-Version: widget_text,
   widget_custom_html oder widget_block) wird per display:contents
   "aufgelöst", damit die innere .cr-footer-contact-Box direkt als
   Grid-Element in Spalte 3 sitzt – unabhängig davon, welche Hüll-Klasse
   WordPress konkret verwendet. */
#footer-widgets .widget_text,
#footer-widgets .widget_custom_html,
#footer-widgets .widget_block {
  display: contents !important;
}
/* Leere zweite Grid-Zeile verhindern: Das Theme setzt vermutlich einen
   Clearfix (".full-container::after { content: \"\"; }"). Da unsere
   eigene Regel für #footer-widgets::after kein content mehr definiert,
   schlägt dieser Theme-Clearfix sonst wieder durch – ein leeres
   content:"" erzeugt trotzdem eine reale (unsichtbare) Box, die als
   zusätzliches Grid-Element in eine eigene, durch den 90px-Gap
   sichtbare Leerzeile rutscht. Daher hier explizit unterdrücken. */
#footer-widgets::after {
  content: none !important;
}
.cr-footer-contact {
  grid-column: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
  letter-spacing: 1.6px !important;
  font-weight: 400 !important;
}
.cr-footer-contact-label {
  display: block !important;
}
.cr-footer-contact a {
  color: #ffffff !important;
  text-decoration: none !important;
}
.cr-footer-contact a:hover {
  opacity: 0.75 !important;
  text-decoration: underline !important;
}
/* SiteOrigin Attribution entfernen */
#theme-attribution {
  display: none !important;
}
/* Footer-Bottom-Line:
   Weiße Trennlinie oberhalb der unteren Footer-Zeile. */
#colophon::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 68px !important;
  transform: translateX(-50%) !important;
  width: var(--cr-footer-bottom-width) !important;
  max-width: calc(100% - 192px) !important;
  height: 1px !important;
  background: rgba(255,255,255,0.9) !important;
}
/* Copyright links unten */
#colophon::after {
  content: "2010 – 2026 CR TOOLS" !important;
  position: absolute !important;
  left: calc(50% - (var(--cr-footer-bottom-width) / 2)) !important;
  bottom: 30px !important;
  color: #ffffff !important;
  font-size: 11px !important;
  letter-spacing: 1.1px !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
/* Hinweis: Impressum/Datenschutzerklärung wurden früher per Position
   absolute aus der (damals ausgeblendeten) Liste herausgelöst und
   unten rechts als separate "Legal-Links" platziert. Jetzt, wo die
   echte Menüliste in Spalte 2 sichtbar ist, bleiben #menu-item-177
   und #menu-item-322 dort einfach als normale Listeneinträge stehen –
   die gesonderte Positionierung wurde entfernt, damit kein Eintrag
   doppelt oder an zwei Stellen gleichzeitig erscheint. */
/* Back-to-top entfernen */
#scroll-to-top {
  display: none !important;
}
/* Real Cookie Banner Powered-by entfernen.
   Wichtig: Diese Linkt-ID wird von Real Cookie Banner pro Seitenaufruf
   per UUID neu generiert (siehe pageRequestUuid4 im Quellcode), eine
   feste ID wie z.B. "#a430eac62-...-powered-by" trifft daher praktisch
   nie zuverlässig. Der Attribut-Selektor unten matcht jede ID, die auf
   "-powered-by" endet, unabhängig vom wechselnden UUID-Teil. */
a[id$="-powered-by"] {
  display: none !important;
}
/* ---------------------------------------------------------
   TABLET
   Anpassungen für mittlere Bildschirmbreiten.
--------------------------------------------------------- */
@media screen and (max-width: 900px) {
  /* Header niedriger machen */
  #masthead.site-header {
    padding: 28px 0 42px !important;
    border-radius: 0 !important;
  }
  /* Seitliche Innenabstände reduzieren */
  #masthead .hgroup.full-container,
  .hgroup.full-container {
    padding: 0 28px !important;
    display: flex !important;
  }
  /* Logo etwas kleiner */
  #masthead .logo img,
  .logo img {
    max-width: 200px !important;
    max-height: 40px !important;
  }
  /* Navigation nicht mehr absolut, sondern unter dem Logo */
  .main-navigation {
    position: static !important;
    margin-top: 24px !important;
  }
  .main-navigation .full-container {
    padding: 0 28px !important;
    justify-content: flex-start !important;
  }
  .main-navigation-container {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  /* Menü darf umbrechen */
  #menu-header {
    margin-left: 0 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
  #menu-header > li:not(#menu-item-406-de):not(#menu-item-406-en-us):not(.lang-item) > a {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }
  /* Service-Kacheln mit Innenabstand */
  .cr-service-grid {
    padding: 50px 24px 80px;
  }
  /* Kacheln brechen auf zwei Spalten um */
  .cr-service-grid .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 42px 26px;
  }
  .cr-service-grid .wp-block-column {
    flex-basis: calc(50% - 13px) !important;
  }
  .cr-service-card {
    height: 220px;
  }
  /* Footer wird einspaltig */
  #footer-widgets.full-container {
    width: calc(100% - 56px) !important;
    max-width: none !important;
    padding: 0 28px 40px !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  #footer-widgets .widget_nav_menu {
    grid-column: auto !important;
  }
  #footer-widgets::before {
    background-size: 200px auto !important;
    padding-top: 56px !important;
  }
  /* Footer-Linie über volle mobile Breite */
  #colophon::before {
    left: 28px !important;
    right: 28px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }
  /* Copyright nicht mehr absolut, sondern im Fluss */
  #colophon::after {
    position: static !important;
    display: block !important;
    margin: 26px 28px 0 !important;
  }
  /* Legal-Links ebenfalls in den normalen Fluss setzen */
  #menu-item-177,
  #menu-item-322 {
    position: static !important;
    display: inline-block !important;
    margin-top: 12px !important;
  }
  #menu-item-177 {
    right: auto !important;
    margin-left: 28px !important;
  }
  #menu-item-322 {
    right: auto !important;
  }
  #menu-item-177::after {
    position: static !important;
    margin: 0 8px !important;
    transform: none !important;
  }
}
/* ---------------------------------------------------------
   SMARTPHONE
   Optimierung für kleine Displays.
--------------------------------------------------------- */
@media screen and (max-width: 640px) {
  /* Slider: Smart Slider setzt den Außenabstand von .n2-ss-margin per
     Inline-Style fest in Pixeln (ca. 130px links/rechts) – siehe
     Plugin-Einstellung Größe/Layout -> Margin. Das ist NICHT
     responsive: auf einem ~375-430px breiten Handy-Bildschirm fressen
     diese 260px (130 links + 130 rechts) zusammen mit dem 40px
     Innenabstand von #main-slider fast die gesamte Breite auf, sodass
     vom Slide nur ein winziger Streifen übrig bleibt. Hier wird beides
     auf mobile Maße reduziert, damit der Slide ca. 80% der Bildschirm-
     breite einnimmt (Faustformel: kleiner Innenabstand außen + 8%
     Außenabstand links/rechts am Slide selbst). */
  #main-slider {
    padding: 12px !important;
  }
  #main-slider .n2-ss-margin {
    margin: 0 8% 24px 8% !important;
  }
  /* Bild 3D_print.jpg auf dem Handy ausblenden.
     Attribut-Selektor statt fixer URL, damit es unabhängig von der
     WordPress-Bildgröße greift (WP erzeugt z.B. 3D_print-768x511.jpg
     als verkleinerte Variante – "src*=" matcht alle davon).
     Im echten Markup liegt das Bild in einer eigenen Gutenberg-Spalte
     (.wp-block-column), die direkt danach noch einen Spacer-Block
     (feste Höhe von 81px) enthält. Wurde nur die  ausgeblendet,
     blieb der Spacer stehen und erzeugte genau den weißen Leerraum.
     Daher blenden wir die ganze umschließende Spalte aus – dann
     verschwindet auch der Spacer mit. */
  .wp-block-column:has(img[src*="3D_print"]) {
    display: none !important;
  }
  /* Gutenberg-Spalten auf Smartphone untereinander statt nebeneinander */
  .entry-content .wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 32px !important;
  }
  .entry-content .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Service-Kacheln */
  .cr-service-grid {
    padding: 45px 0px 70px;
  }
  /* Service-Kacheln untereinander */
  .cr-service-grid .wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
  }
  .cr-service-grid .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Kacheln werden dynamisch höher */
  .cr-service-card {
    height: auto;
    min-height: 190px;
    padding: 75px 4px 40px;
  }
  .cr-service-card p {
    font-size: 18px;
  }
  /* Icon bleibt in Desktop-Größe (82x82), rutscht aber weiter nach
     unten in die Kachel (top:60px statt -64px wie auf Desktop) */
  .cr-service-icon {
    top: 60px;
    width: 82px;
    height: 82px;
  }
  .cr-service-icon img {
    width: 48px;
    height: 48px;
  }
}
@media screen and (max-width: 480px) {
  /* Header nochmals kompakter */
  #masthead.site-header {
    padding: 24px 0 34px !important;
    border-radius: 0 !important;
  }
  #masthead .hgroup.full-container,
  .hgroup.full-container {
    padding: 0 20px !important;
  }
  #masthead .logo img,
  .logo img {
    max-width: 170px !important;
  }
  .main-navigation {
    background: transparent !important;
    margin-top: 20px !important;
  }
  .main-navigation .full-container {
    padding: 0 20px !important;
  }
  /* Mobile-Menü-Link von SiteOrigin an das Design anpassen */
  .mobilenav-main-link {
    color: #ffffff !important;
    background: transparent !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 20px !important;
  }
  /* "Menü" und Lupe exakt 20px vom Rand: .main-navigation .full-container
     hat hier bereits padding:20px, "Menü" sitzt dadurch schon links
     bündig. Die Lupe (#search-icon) bringt von Vantage selbst noch
     internes Padding/Margin am Link bzw. Icon mit, wodurch sie optisch
     weiter vom rechten Rand absteht – das wird hier entfernt, damit sie
     ebenfalls bündig auf 20px sitzt. */
  #search-icon {
    margin: 0 !important;
    padding: 0 !important;
  }
  #search-icon a,
  #search-icon .search-icon-icon,
  #search-icon svg,
  #search-icon img {
    margin: 0 !important;
    padding: 0 !important;
  }
  #menu-header {
    gap: 16px !important;
  }
  #menu-header > li:not(#menu-item-406-de):not(#menu-item-406-en-us):not(.lang-item) > a {
    font-size: 11px !important;
    letter-spacing: 1.8px !important;
  }
  /* Sprachflaggen kleiner */
  #menu-item-406-de > a,
  #menu-item-406-en-us > a,
  #menu-header .lang-item > a {
    width: 30px !important;
    height: 24px !important;
  }
  #menu-item-406-de img,
  #menu-item-406-en-us img,
  #menu-header .lang-item img {
    width: 30px !important;
    height: 22px !important;
  }
  /* Footer mit kleineren Seitenabständen */
  #footer-widgets.full-container {
    width: calc(100% - 40px) !important;
    padding: 0 24px 40px !important;
  }
  #footer-widgets::before {
    background-size: 170px auto !important;
    padding-top: 50px !important;
  }
  #colophon::before {
    left: 24px !important;
    right: 24px !important;
  }
  #colophon::after {
    font-size: 10px !important;
  }
}