/*
Theme Name: Hello Elementor Child
Theme URI: https://example.com/
Description: Custom Child Theme for Hello Elementor with sticky/hide-on-scroll header.
Author: Rezo Galstyan
Author URI: https://example.com/
Template: hello-elementor
Version: 3.2.0
Text Domain: hello-elementor-child
*/

@charset "utf-8";
/* --------------------------------------------------------------
   Body Background — Musik Pattern (ultra soft / fixed)
-------------------------------------------------------------- */
body,
body.site {
  background-color: #fff !important;
  background-attachment: fixed !important;
  background-image:
    /* Ebene 1 — extrem helle Punkte */
    radial-gradient(circle at 10% 20%, #b9b9b905 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, #dbdbdb05 3px, transparent 4px),
    radial-gradient(circle at 30% 80%, #ebebeb05 2px, transparent 3px),
    /* Ebene 2 — SVG Symbole superblass */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ctext x='10' y='40' font-size='36' fill='%23b9b9b915'%3E%F0%9D%84%9E%3C/text%3E%3Ctext x='60' y='70' font-size='36' fill='%23dbdbdb15'%3E%F0%9D%84%A2%3C/text%3E%3Ctext x='20' y='90' font-size='28' fill='%23ebebeb15'%3E%F0%9D%84%9E%3C/text%3E%3C/svg%3E"),
    /* Ebene 3 — rote Akzente nur noch minimal */
    radial-gradient(circle at 70% 10%, #bc141a05 4px, transparent 6px) !important;
  background-repeat: repeat !important;
  background-size:
    120px 120px,
    120px 120px,
    120px 120px,
    200px 200px,
    160px 160px !important;
  background-blend-mode: normal !important;
}

/* --------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
-------------------------------------------------------------- */
:root {
  --container-max: min( var(--e-global-content-width, 71.25rem), 92vw );

  --header-h: 8rem;              /* normale Headerhöhe */
  --header-h-sticky: 5rem;       /* Höhe im Sticky-Zustand */

  --h: 12.5rem;
  --scale-sticky: 0.8;      /* 20% kleiner im Sticky */
  --shift-x: 0rem;

  --gap: 1rem;
  --gap-lg: 2rem;
  --border: 0.0625rem;

  --color-fg: var(--e-global-color-text, #1a1a1a);
  --color-fg-dim: color-mix(in oklab, var(--color-fg) 72%, white);
  --color-bg: #fff;
  --color-border: color-mix(in oklab, var(--color-fg) 14%, white);

  --shadow-sticky: 0 0.25rem 1rem rgba(0,0,0,.12);

  --z-header: 1000;
}

/* Kleinere Viewports */
@media (max-width: 48rem) {
  :root {
    --header-h: 6.5rem;
    --header-h-sticky: 4.5rem;
    ---h: 9rem;
    ---scale-sticky: 0.8;
  }
}

/* --------------------------------------------------------------
   Base / Resets
-------------------------------------------------------------- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  color: var(--color-fg);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------
   Accessibility
---------------------------------------- */
.screen-reader-text {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important; width: 1px !important;
  margin: -1px !important; overflow: hidden !important; padding: 0 !important;
  position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto !important; clip-path: none !important;
  height: auto !important; width: auto !important;
  margin: 0 !important; padding: .5rem .75rem !important;
  background: #000; color: #fff; z-index: 999999;
}

/* --------------------------------------------------------------
   Header Layout
-------------------------------------------------------------- */
header {
  min-width: 100%;
  background: var(--color-bg);
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  border-bottom: var(--border) solid var(--color-border);
  z-index: var(--z-header);
  transition: all 300ms ease;
}

.header-inner {
  height: 100%;
  margin-inline: auto;
  max-width: none !important;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap);
  padding-inline: clamp(1rem, 3vw, 3rem);
}

/* Branding */
.site-branding {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .75rem 1rem;
  min-width: 0;
}

.brand-left { line-height: 0; transform-origin: top left; }
.brand-left .custom-logo,
.brand-left img {
  max-height: var(--h);
  height: auto;
  width: auto;
  display: block;
  transition: transform 400ms ease; /* smooth scale */
}

/* --- NEU:  Hover-Effekt (nur obere 60%) --- */
.site-logo {
  position: relative;
  display: inline-block;
  z-index:999;
}

.site-logo img {
  display: block;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.site-logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/wp-content/uploads/2025/09/Logo_M.png") no-repeat center top;
  background-size: contain;
  pointer-events: none;
  clip-path: inset(0 0 40% 0); /* nur oberer Teil sichtbar */
  transform-origin: bottom center;
}

.site-logo:hover::after {
  animation: tuning-fork-shake 0.7s linear infinite;
}

@keyframes tuning-fork-shake {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(-3deg); }
  20%  { transform: rotate(3deg); }
  30%  { transform: rotate(-3deg); }
  40%  { transform: rotate(3deg); }
  50%  { transform: rotate(-2deg); }
  60%  { transform: rotate(2deg); }
  70%  { transform: rotate(-1deg); }
  80%  { transform: rotate(1deg); }
  90%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}
/* --- Ende  Hover-Effekt --- */

.brand-right {
  align-self: start;
  display: grid;
  gap: .125rem;
  min-width: 0;
}

.site-title {
  margin: 1.75rem 0 0;
  font-size: clamp(1.795rem, 1rem + 1vw, 1.5rem);
  font-weight: 700;
}
.site-title a { color: var(--e-global-color-primary); text-decoration: none; }
.site-tagline {
  margin: 0;
  font-size: .795rem;
  color: var(--color-fg-dim);
}

/* Navigation */
.main-navigation {
  display: block;
  justify-self: end;
  align-self: start;
  margin-top: 3.25rem;
}
.main-navigation .menu,
.main-navigation ul.menu {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(.5rem, .6rem + .6vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation .menu-wrapper { display: contents; }
.main-navigation a {
  padding: 1rem .375rem;
  text-decoration: none;
  color: inherit;
  border-radius: .375rem;
  transition: background-color 750ms ease, color 950ms ease;
}
.main-navigation a:hover {
  background: var(--e-global-color-abc9256);
  color: var(--e-global-color-primary);
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: var(--e-global-color-primary, currentColor);
  font-weight: 600;
  transition: .77s;
}

/* Caret für alle Hauptmenüpunkte mit Submenu */
.main-navigation li.menu-item-has-children > a::after {
  content: " ▼"; /* Caret-Symbol */
  font-size: 0.8rem;
  margin-left: 0.3rem;
  color: #c00;
  transition: transform 0.75s ease;
  display: inline-block;
}
.main-navigation li.menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}


/* Submenu: Platz schaffen für Icons, Bullets entfernen */
  .main-navigation li:nth-child(2) ul.sub-menu {
    list-style: none;
    margin:0;
  }

  /* Submenu-Links als Flex mit Icons */
  .main-navigation li:nth-child(2) ul.sub-menu li a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-left: 0; /* kein Platzhalter nötig */
    position: relative;
  }

  /* Gemeinsame Icon-Basis für alle Submenu-Items */
  .main-navigation li:nth-child(2) ul.sub-menu li > a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1rem;
    color: var(--e-global-color-primary, #c00);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    content: "";
    position: static; /* nicht mehr absolut */
    transform: none;
  }

  /* 1. Stimmungen → fa-music */
  .main-navigation li:nth-child(2) ul.sub-menu li:nth-child(1) > a::before {
    content: "\f001";
  }

  /* 2. Reparaturen → fa-tools */
  .main-navigation li:nth-child(2) ul.sub-menu li:nth-child(2) > a::before {
    content: "\f7d9";
  }

  /* 3. Gutachten → fa-file-alt */
  .main-navigation li:nth-child(2) ul.sub-menu li:nth-child(3) > a::before {
    content: "\f15c";
  }

  /* 4. Handel → fa-coins */
  .main-navigation li:nth-child(2) ul.sub-menu li:nth-child(4) > a::before {
    content: "\f51e";
  }

  /* 5. Transport → fa-truck */
  .main-navigation li:nth-child(2) ul.sub-menu li:nth-child(5) > a::before {
    content: "\f0d1";
  }




/* Submenu */
ul.sub-menu {
  padding: 1rem 3rem;
}

.main-navigation li {
  position: relative;
}

.main-navigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: .375rem;
  padding: 0.5rem 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.25);
  z-index: 9999;
  min-width: 15rem;
  margin-top: 1rem;
}

.main-navigation li:hover > ul {
  display: block;
}

.main-navigation ul ul li a {
  position: relative;
  display: flex;               /* sorgt für Text + Icon nebeneinander */
  align-items: center;         /* vertikale Zentrierung der Icons */
  white-space: nowrap;
  padding: 0.5rem 1rem;
  color: var(--e-global-color-secondary);
  text-decoration: none;
  overflow: hidden;            /* wichtig für ::before */
  z-index: 1;
}

.main-navigation ul ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 1rem;
  z-index: -1; /* Hintergrund hinter Text/Icon */
  transition: width 0.75s ease;
}

.main-navigation ul ul li a:hover::before {
  width: 100%; /* fährt von links nach rechts ein */
}

.main-navigation ul ul li a:hover {
  color: var(--e-global-color-primary);
}


/* --------------------------------------------------------------
   Sticky State
-------------------------------------------------------------- */
.site-header.sticky {
  height: var(--header-h-sticky);
  box-shadow: var(--shadow-sticky);
}
.site-header.sticky .brand-left img {
  transform: scale(var(--scale-sticky));
  transform-origin: top left;
}

.site-header.sticky .brand-right,
.site-header.sticky .main-navigation {
  transform: translateY(-1.5rem);
  transition: transform 300ms ease;
}
/* Sticky: Schwingendes Overlay komplett entfernen */
.site-header.sticky .site-logo::after {
  content: none !important;
}


/* --------------------------------------------------------------
   Content-Offset
-------------------------------------------------------------- */
#site-content {
  padding-top: calc(var(--header-h) + 0rem);
}
.site-header.sticky + #site-content {
  padding-top: calc(var(--header-h-sticky) + 2rem);
}


/*First Letter Uppercase*/
.elementor-drop-cap-letter {
	color: var(--e-global-color-17aed12);
	}
	
/* --------------------------------------------------------------
   Admin-Bar Offsets
-------------------------------------------------------------- */
body.admin-bar .site-header { top: 2rem; }
@media (max-width: 48.875rem) {
  body.admin-bar .site-header { top: 2.875rem; }
}

/*Table Content*/

table tbody tr {border-color:transparent;}
table td, table th {border: none;}

/* --------------------------------------------------------------
   Footer Widget Area
-------------------------------------------------------------- */
.footer-widget {
	padding: 3rem 1rem;
	}
.footer-widget-area {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 3rem clamp(1rem, 3vw, 2rem);
  display: grid;
  gap: 2rem;
}
.footer-widget .widget-title,
.wp-block-heading {
  margin: 0 0 .5rem 0;
  font-weight: 700;
  color: var(--e-global-color-0cc0bc3);
}

/* === CF7 Footer (ID: #anfrage) === */
#anfrage .wpcf7 form.wpcf7-form {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  font-size: 1rem;
}

/* Labels */
#anfrage .wpcf7-form label {
  display: block;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: var(--e-global-color-0cc0bc3);
}

/* Checkbox-Gruppe */
#anfrage .wpcf7-form .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem 1rem;
  margin-top: .25rem;
}

/* MOBILE: Checkboxen volle Breite */
@media (max-width: 767px) {
  #anfrage .wpcf7-form .wpcf7-checkbox {
    grid-template-columns: 1fr;
  }
}

#anfrage .wpcf7-form .wpcf7-list-item { margin: 0; }
#anfrage .wpcf7-form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 2rem; /* Abstand Box ↔ Text */
  font-weight: 500;
  line-height: 1.2;
}

/* Checkbox Input größer + Active Style */
#anfrage .wpcf7-form .wpcf7-list-item input[type="checkbox"] {
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid #ccc;
  border-radius: .25rem;
  position: relative;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}
#anfrage .wpcf7-form .wpcf7-list-item input[type="checkbox"]:checked {
  background-color: #e50914; /* Rot */
  border-color: #e50914;
}
#anfrage .wpcf7-form .wpcf7-list-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0.35em;
  width: 0.25em;
  height: 0.6em;
  border: solid #fff; /* weißes Häkchen */
  border-width: 0 0.2em 0.2em 0;
  transform: rotate(45deg);
}

/* Zweispaltig */
#anfrage .wpcf7-form .two-col { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  #anfrage .wpcf7-form .two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Datenschutz-Checkbox auf Mobile fixen */
@media (max-width: 767px) {
  #anfrage .wpcf7-form .wpcf7-acceptance {
    display: flex;
    align-items: flex-start; /* Checkbox oben ausrichten */
    gap: 1rem;               /* statt 2rem, damit es nicht zu breit auseinanderzieht */
  }
  #anfrage .wpcf7-form .wpcf7-acceptance label {
    flex: 1;                 /* Text bricht sauber um */
    line-height: 1.4;
    gap: 1rem;
  }
  #anfrage .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
  }
}

/* Inputs & Textarea */
#anfrage .wpcf7-form input[type="text"],
#anfrage .wpcf7-form input[type="email"],
#anfrage .wpcf7-form input[type="tel"],
#anfrage .wpcf7-form textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: none;
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 .25rem 1rem rgba(0,0,0,.12);
  transition: box-shadow .3s ease;
  font-size: 1rem;
}
#anfrage .wpcf7-form input[type="text"]:hover,
#anfrage .wpcf7-form input[type="email"]:hover,
#anfrage .wpcf7-form input[type="tel"]:hover,
#anfrage .wpcf7-form textarea:hover,
#anfrage .wpcf7-form input[type="text"]:focus,
#anfrage .wpcf7-form input[type="email"]:focus,
#anfrage .wpcf7-form input[type="tel"]:focus,
#anfrage .wpcf7-form textarea:focus {
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.2);
  outline: none;
}

/* Submit-Button*/
#anfrage .wpcf7-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .85rem 2rem;
  font-weight: 600;
  border-radius: .5rem;
  cursor: pointer;
  background: var(--e-global-color-primary, #3b82f6);
  border: 2px solid var(--e-global-color-primary, #3b82f6);
  color: var(--e-global-color-b9e2520, #ffffff);
  position: relative;
  overflow: hidden;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* Envelope Icon + Flip */
#anfrage .wpcf7-form button[type="submit"]::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 512 512"><path d="M512 464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V200.724a48 48 0 0 1 18.387-37.776c24.913-19.529 45.501-35.365 164.2-121.511C199.412 29.17 232.797-.347 256 .003c23.198-.354 56.596 29.172 73.413 41.433 118.687 86.137 139.303 101.995 164.2 121.512A48 48 0 0 1 512 200.724V464zm-65.666-196.605c-2.563-3.728-7.7-4.595-11.339-1.907-22.845 16.873-55.462 40.705-105.582 77.079-16.825 12.266-50.21 41.781-73.413 41.43-23.211.344-56.559-29.143-73.413-41.43-50.114-36.37-82.734-60.204-105.582-77.079-3.639-2.688-8.776-1.821-11.339 1.907l-9.072 13.196a7.998 7.998 0 0 0 1.839 10.967c22.887 16.899 55.454 40.69 105.303 76.868 20.274 14.781 56.524 47.813 92.264 47.573 35.724.242 71.961-32.771 92.263-47.573 49.85-36.179 82.418-59.97 105.303-76.868a7.998 7.998 0 0 0 1.839-10.967l-9.071-13.196z"/></svg>');
  transform: rotateY(0deg);
  transition: transform .75s ease;
}

#anfrage .wpcf7-form button[type="submit"]:hover {
  background: var(--e-global-color-secondary, #111827);
  border-color: var(--e-global-color-secondary, #111827);
}

#anfrage .wpcf7-form button[type="submit"]:hover::after {
  transform: rotateY(360deg);
}

#anfrage .wpcf7-form p { margin: 0 0 .75rem; }
#anfrage .wpcf7-spinner { margin-left: .75rem; }

/* Erfolgsmeldung Styling */
#anfrage .wpcf7 form.sent .wpcf7-response-output {
  background: #e6f9f0; /* sanftes Grün */
  border: 2px solid #4ade80;
  color: #166534;
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  margin-top: -2.5rem;
  font-weight: 600;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, .08);
  opacity: 1;
  transform: translateY(-10%);
  transition: opacity .6s ease, transform .6s ease;
}

/* Anfangszustand, bevor gesendet wurde */
#anfrage .wpcf7 .wpcf7-response-output {
  opacity: 0;
  transform: translateY(30px);
}

/*Kontaktdaten Footer*/
.contact {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 1rem;
  background-color: var(--e-global-color-5da4b2e);
}

.contact p {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  color: var(--color-fg);
}

.contact .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5rem;
  color: var(--e-global-color-primary); /* Elementor Primary Color */
}

.contact .icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor; /* übernimmt color */
}

.contact a {
  text-decoration: none;
  color: #333 !important;
  transition: color 0.3s ease;
}

.contact a:hover {
  color: var(--e-global-color-primary) !important;
  text-decoration:underline;
}

/*Copyright Area*/
.copyright {
	background-color: var(--e-global-color-primary);
	color: #fff;
	margin: 0;
	padding: 1rem;
	text-align: center}
.copyright a {color: var(--e-global-color-b9e2520) !important; transform:.75s;}
.copyright a:hover {color: #ccc; text-decoration:underline;}	

/* --------------------------------------------------------------
   Tabellen-Style für [concert] Shortcode
-------------------------------------------------------------- */
.concert-table {
  width: 100%;
  border-collapse: collapse;
}
.concert-table td {
  padding: .5rem .75rem;
  border-bottom: var(--border) solid var(--color-border);
  vertical-align: top;
}
.concert-table tr:last-child td { border-bottom: 0; }
.concert-table td:first-child { white-space: nowrap; width: 1%; }

/* --------------------------------------------------------------
   Sonstiges
-------------------------------------------------------------- */
#site-content:focus {
  outline: .25rem solid var(--e-global-color-primary, #000);
  outline-offset: .25rem;
}
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-max);
}
.site-header:not(.sticky) {
  border-bottom-color: color-mix(in oklab, var(--color-fg) 18%, white);
}



/* --------------------------------------------------------------
   Responsiveness
-------------------------------------------------------------- */
@media (max-width: 75rem) {
  .header-inner { gap: .75rem; }
}
/* Tablets: Slogan bleibt sichtbar */
@media (max-width: 64rem) {
  /* .site-tagline { display: none; } entfernt */
}
@media (max-width: 48rem) {
  .header-inner { grid-template-columns: 1fr auto; }
  .site-branding { grid-template-columns: auto 1fr; }
  .main-navigation .menu { flex-wrap: wrap; row-gap: .25rem; }
}
/* Smartphones: Titel + Slogan sichtbar */
@media (max-width: 30rem) {
  .site-tagline { display: block; }
}

/* Standard Navigation sichtbar ab 1025px */
@media (min-width: 1025px) {
  .menu-toggle { display: none; }
  .main-navigation { display: block; }
  
  .main-navigation li a {
    position: relative;
    padding-left: 1rem; /* Platz für Icon links */
  }

  /* Violinenschlüssel für aktives Menü-Item */
  .main-navigation .current-menu-item > a::before,
  .main-navigation .current_page_item > a::before {
    content: "\1D11E"; /* Violinenschlüssel */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #c00;
  }

  /* Bassschlüssel bei Hover */
  .main-navigation li:hover > a::before {
    content: "\1D122"; /* Bassschlüssel */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #c00;
  }
  
  :is(dir, menu, ol, ul) ul {list-style-type: none;}
}

/* Smartphones bis 767px */
@media all and (max-width: 767px) {
	.site-header {
		padding-inline-end: 1px !important;
		padding-inline-start: 1px !important;
		padding: 0 !important;
	}
	
  .header-inner {
    grid-template-columns: auto 1fr auto;  /* logo | spacer | burger */
    padding-inline-start: 2px;             /* Logo fast bündig links */
	padding-inline: 0 !important;
  }

  .site-branding {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start;
  }

  .brand-left img {
    max-height: calc(var(--h) * 0.9);
  }

  .site-title {
    font-size: 1.25rem;
    margin: 1rem 0 0 0;
  }

  .site-tagline {
    max-inline-size: 50ch;
    text-wrap: balance;
  }

  button.menu-toggle {
    display: inline-block;
    align-self: center;
    justify-self: end;        /* rechts im Grid */
    background-color: var(--e-global-color-primary) !important;
    border: none;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    padding: 1rem !important;
    width: auto;}
	
	.site-header.sticky .site-title {margin: 2rem 0 -.5rem 0;}

	  /* Sticky-Logo für Mobile kleiner */
  .site-header.sticky .brand-left img {
    transform: scale(0.5);
    transform-origin: top left;
  }

}

/* Tablets bis 1024px */
@media (max-width: 1024px) {
  .site-header .header-inner {
    grid-template-columns: auto 1fr auto; /* konsistent mit Mobile */
    padding-inline: 1rem;
  }

  button.menu-toggle {
    display: inline-block;
    align-self: center;
    justify-self: end;
    background-color: var(--e-global-color-primary) !important;
    border: none;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    padding: 1rem !important;
    width: auto;
	margin: -2.5rem 0 2.5rem 0;
  }

  .main-navigation {
    display: none;
    position: absolute;
    top: 100%;          /* direkt unter dem Header */
    right: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.25);
    padding: 2.5rem 4rem;
    z-index: 99;
    width: 100%;
    margin-top: 0;      /* KEIN Abstand zum Header */
  }
  .main-navigation.active { display: block; }

  /* Main Items untereinander */
  .main-navigation .menu,
  .main-navigation ul.menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .main-navigation li {
    display: block;
    margin-bottom: 0.5rem;
    width: 100%;
  }
  .main-navigation li a {
    display: block;
    padding: 0.5rem;
    width: 100%;
  }

  /* Submenu Items eingerückt */
  .main-navigation ul ul {
    position: static;
    display: block;
    background: none;
    box-shadow: none;
    padding-left: 1rem;
    margin-top: 0.25rem;
  }
  .main-navigation ul ul li a {
    padding-left: 1rem;
    font-size: 0.9rem;
  }

  /* Sticky-State: nur Größe anpassen */
  .site-header.sticky button.menu-toggle {
    font-size: 1.3rem;
  }
  .site-header.sticky button.menu-toggle {
	  font-size: 1rem;
	  margin: -5rem 0 3rem 0 !important;
	  padding:  .5rem 1rem !important;}
}