/* Site-Overrides — wird nach style.css geladen.
   Hier nur statische Regeln; dynamische Branding-Werte (Primärfarbe)
   bleiben im <style>-Block des Layouts. */

/* Logo: Theme-CSS setzt img{width:100%} im Flex-Header — ohne
   Begrenzung wächst ein hochauflösendes CMS-Logo mit dem freien
   Platz (weniger Menü-Items → größeres Logo). Original-Logo: 193×53px. */
header img[src*="logo"],
header img[src*="branding"],
a.logo-1 img.logo,
[class*="footer"] .thumbnail img {
    width: auto !important;
    max-width: 193px;
    max-height: 60px;
    object-fit: contain;
}

/* Call-Area im Header darf durch den zusätzlichen Login-Button nicht
   gequetscht werden (Flex-Row schrumpft sonst Icon/Nummer) */
.header-right .call-area {
    flex-shrink: 0;
}
.header-right .call-area .icon {
    flex-shrink: 0;
}
/* Inline-SVG + Whitespace erzeugt eine 8px-Zeilenbox → das ::after-Backdrop
   (zentriert aufs Div) wirkt wie ein nach oben verschobenes Icon.
   display:block schrumpft das Div auf die SVG-Größe → echte Zentrierung. */
.header-right .call-area .icon svg {
    display: block;
}
.header-right .call-area .number-area,
.header-right .call-area .information {
    white-space: nowrap;
}

/* ≤1199px trägt das Logo (+20px Link-Padding) die Header-Höhe. Das
   CMS-Logo ist flacher als das 53px-Original-Logo → der Header würde
   auf ~73px schrumpfen und die rechte Zeile klebt am Rand. Das Theme
   zielt auf ~93px — Mindesthöhe hält die Zeile vertikal zentriert. */
@media only screen and (max-width: 1199px) {
    .header-two .main-header .content {
        min-height: 93px;
    }
}

/* Der zusätzliche Login-Button + die breitere CTA brauchen ~103px mehr
   als das Original — bei ≤991px würde die Reihe den Viewport überlaufen
   (Menu-Button abgeschnitten). Die call-area ist rein informativ
   (Nummer steht in Slideover/Footer) und blendet das Theme ohnedies
   ≤767px aus — hier nur früher, bis wieder Platz ist. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-two .main-header .content .header-right .call-area {
        display: none;
    }
}

/* Header-Login-Button (Gast) — Icon-Only, gleiche Höhe wie menu-btn
   (rts-btn = 55px). Die Margin trägt der Wrapper .header-user-menu —
   Theme-Regeln wie `.header-right a.rts-btn { margin-left:40px }`
   würden den Anker sonst schieben. */
.header-login-btn {
    width: 55px;
    min-width: 55px;
    padding: 0;
    margin-left: 0 !important;
}
@media only screen and (max-width: 575px) {
    .header-login-btn {
        width: 47px;
        min-width: 47px;
    }
    .header-user-menu .user-menu-trigger {
        width: 47px;
        height: 47px;
        min-width: 47px;
    }
}

/* Header-Usermenü (eingeloggt): gleicher Button wie der Login-Button
   (header-login-btn), nur dass der Avatar ihn ausfüllt. Toggle in
   custom.js — Frontend hat kein Alpine. */
.header-user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.header-user-menu .user-menu-trigger {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 55px;
    height: 55px;
    min-width: 55px;
    max-width: none !important;
    padding: 0;
    flex: 0 0 auto;
}
.header-user-menu .user-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    object-fit: cover;
}
/* Avatar-Zustand: kein rts-btn-Hover (Bild würde übermalt) */
.header-user-menu .user-menu-trigger.has-avatar::before {
    content: none;
}
.header-user-menu .user-menu-trigger.has-avatar:hover {
    background: #F2F2F2;
    color: #20282D;
}

/* Ohne Avatar: primary gefüllter Button, Hover = Icon-Farbwechsel
   wie beim menu-btn (!important gegen `.header-right button` im Theme) */
.header-user-menu .user-menu-trigger.no-avatar {
    background: var(--color-primary) !important;
    color: #fff;
}
.header-user-menu .user-menu-trigger.no-avatar:hover {
    background: #F2F2F2 !important;
    color: var(--color-primary);
}
.header-user-menu .user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    min-width: 210px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .14);
    padding: 8px;
    z-index: 100;
}
.header-user-menu.open .user-dropdown {
    display: block;
}
.header-user-menu .user-dropdown-name {
    padding: 10px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid #eef0f3;
    font-weight: 600;
    font-size: 14px;
    color: #20282D;
}
.header-user-menu .user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 14px;
    color: #20282D;
    cursor: pointer;
    text-align: left;
}
.header-user-menu .user-dropdown-item i {
    width: 16px;
    color: var(--color-primary);
}
.header-user-menu .user-dropdown-item:hover {
    background: #f2f5f5;
    color: var(--color-primary);
}
/* Abmelden: prominent rot, volle Dropdown-Breite (Padding-Bereich
   via negativem Margin mitbedeckt, an die Karten-Rundung angelehnt) */
.header-user-menu .user-dropdown .user-dropdown-logout {
    margin: 6px -8px -8px;
    /* !important nötig: Theme-Regeln wie `.header-right button
       { background:#F7F7F7; max-width:fit-content }` treffen auch
       Dropdown-Buttons und hätten höhere Spezifität. */
    width: calc(100% + 16px) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 12px 16px;
    background: var(--color-danger) !important;
    color: #fff;
    border-radius: 0 0 11px 11px;
    justify-content: center;
    font-weight: 600;
}
.header-user-menu .user-dropdown .user-dropdown-logout i {
    color: #fff;
}
.header-user-menu .user-dropdown .user-dropdown-logout:hover {
    background: #c70002 !important;
    color: #fff;
}
.header-user-menu .user-dropdown form {
    margin: 0;
}

/* Mobile: Kontakt-CTA ausblenden (Login-Button bleibt für Gäste,
   Avatar-Trigger für Eingeloggte). Selector trifft nur die CTA-
   Anchors ohne header-login-btn. !important nötig: das Theme setzt
   `.rts-btn { display:flex !important }` ≤575px — das würde sonst
   sogar seine eigene display:none-Regel schlagen. */
@media only screen and (max-width: 767px) {
    .header-two .main-header .content .header-right > a.rts-btn:not(.header-login-btn) {
        display: none !important;
    }
}