/*
================================================================================
TURFSPORT – Premium Search Rail V697
Desktop/Laptop mit Maus/Trackpad.
Mobil/Touch bleibt unverändert.

Die Suche wird von einem kleinen "angedockten Kasten" zu einer breiten,
ruhigen Portal-Suchleiste. Weißes Glas/Paper, grüne Kontur, Goldakzent.
================================================================================
*/

@media (min-width:1100px) and (hover:hover) and (pointer:fine){

  html body .rc-topbar.rc-site-header.rc-site-header-v3{
    margin-bottom:72px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-panel,
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-search-toggle{
    display:none!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-desktop-search-dock{
    display:block!important;
    position:absolute!important;
    z-index:48!important;
    left:50%!important;
    top:calc(100% + 9px)!important;
    transform:translateX(-50%)!important;

    /* Suchleiste folgt der neuen Portalbreite statt nur der Mittelspalte. */
    width:calc(100vw - 48px)!important;
    max-width:1780px!important;
    margin:0!important;
    padding:0!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form{
    position:relative!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) 116px!important;
    gap:8px!important;
    align-items:center!important;
    width:100%!important;
    min-height:54px!important;
    margin:0!important;
    padding:6px!important;
    box-sizing:border-box!important;

    overflow:hidden!important;
    border:1px solid rgba(18,83,57,.20)!important;
    border-radius:12px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,250,249,.96))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 10px 28px rgba(12,57,39,.11)!important;

    backdrop-filter:blur(14px) saturate(112%)!important;
    -webkit-backdrop-filter:blur(14px) saturate(112%)!important;
  }

  /* Goldene, sehr feine Premium-Kante oben. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form::before{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    left:0!important;
    right:0!important;
    top:0!important;
    height:2px!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(202,157,67,.18) 10%,
      rgba(202,157,67,.78) 50%,
      rgba(202,157,67,.18) 90%,
      transparent 100%)!important;
  }

  /* Suchsymbol als kleiner Portal-Aktionskreis. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-icon{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    width:34px!important;
    height:34px!important;
    margin:auto!important;
    border-radius:50%!important;
    background-color:#0f5a3e!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 3px 9px rgba(12,67,45,.13)!important;

    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-size:15px 15px!important;
    mask-size:15px 15px!important;
  }

  /* Da das Icon selbst per Mask eingefärbt wird, nutzen wir einen goldenen
     inneren Kreis als zweite Ebene über filter/drop-shadow. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-icon{
    background:#d5ae5c!important;
    filter:drop-shadow(0 0 0 #0f5a3e)!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"]{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    margin:0!important;
    padding:0 14px!important;
    border:1px solid #dfe5e2!important;
    border-radius:8px!important;
    outline:0!important;
    background:#f8faf9!important;
    color:#17382d!important;
    font-family:inherit!important;
    font-size:14px!important;
    line-height:1!important;
    font-weight:550!important;
    box-shadow:inset 0 1px 2px rgba(8,47,32,.035)!important;
    transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"]::placeholder{
    color:#6e7b75!important;
    opacity:1!important;
    font-weight:500!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"]:focus{
    border-color:rgba(19,91,62,.48)!important;
    background:#fff!important;
    box-shadow:
      0 0 0 3px rgba(15,90,62,.075),
      inset 0 1px 2px rgba(8,47,32,.025)!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form button{
    position:relative!important;
    z-index:1!important;
    height:40px!important;
    min-width:116px!important;
    margin:0!important;
    padding:0 18px!important;
    border:1px solid rgba(180,131,39,.40)!important;
    border-radius:8px!important;
    background:linear-gradient(180deg,#ddb85f 0%,#c99635 100%)!important;
    color:#153627!important;
    font-family:inherit!important;
    font-size:12.5px!important;
    line-height:1!important;
    font-weight:750!important;
    letter-spacing:.01em!important;
    cursor:pointer!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.48),
      0 3px 8px rgba(123,86,20,.10)!important;
    transition:transform .14s ease,box-shadow .14s ease,background .14s ease!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form button:hover{
    transform:translateY(-1px)!important;
    background:linear-gradient(180deg,#e5c46f 0%,#d0a044 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.54),
      0 5px 12px rgba(123,86,20,.14)!important;
  }
}

@media (min-width:1100px) and (max-width:1399px) and (hover:hover) and (pointer:fine){

  html body .rc-topbar.rc-site-header.rc-site-header-v3{
    margin-bottom:68px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-desktop-search-dock{
    width:calc(100vw - 32px)!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form{
    grid-template-columns:40px minmax(0,1fr) 100px!important;
    min-height:50px!important;
    border-radius:11px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-icon{
    width:30px!important;
    height:30px!important;
    -webkit-mask-size:14px 14px!important;
    mask-size:14px 14px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"],
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form button{
    height:38px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form button{
    min-width:100px!important;
    padding:0 14px!important;
  }
}


/* ==========================================================================
   V698 – Header-Fade + integrierte Suche + kräftigere Rennszene
   Desktop/Laptop mit Maus. Mobil/Touch bleibt unverändert.
   ========================================================================== */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){

  /* Weicher Auslauf statt harter grüner Schnittkante. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3{
    background:
      linear-gradient(180deg,
        #05331f 0%,
        #05331f 69%,
        rgba(5,51,31,.92) 77%,
        rgba(5,51,31,.66) 86%,
        rgba(5,51,31,.20) 95%,
        rgba(5,51,31,0) 100%)!important;
    box-shadow:none!important;
    margin-bottom:34px!important;
  }

  /* Rennszene sichtbar kräftiger: weniger grüne Abdunklung in der Mitte.
     Gleichzeitig wird das Bild nach unten weich ausgeblendet. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3::before{
    background:
      linear-gradient(90deg,
        rgba(3,45,28,.90) 0%,
        rgba(3,45,28,.70) 18%,
        rgba(3,45,28,.25) 43%,
        rgba(3,45,28,.34) 70%,
        rgba(3,45,28,.83) 100%),
      linear-gradient(180deg,
        rgba(2,25,15,.05) 0%,
        rgba(2,25,15,.16) 64%,
        rgba(2,25,15,.30) 80%,
        rgba(2,25,15,0) 100%),
      url('../header-race-scene-v242.png') center 46% / cover no-repeat!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 75%,rgba(0,0,0,.78) 86%,rgba(0,0,0,.22) 96%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 75%,rgba(0,0,0,.78) 86%,rgba(0,0,0,.22) 96%,transparent 100%)!important;
  }

  /* Außenabdunklung etwas reduzieren – Pferde bleiben erkennbarer. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3::after{
    background:
      radial-gradient(ellipse at 15% 52%,rgba(2,36,22,.68) 0%,rgba(2,36,22,.35) 18%,transparent 40%),
      linear-gradient(90deg,rgba(2,34,21,.20) 0%,transparent 28%,transparent 72%,rgba(2,34,21,.22) 100%)!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.52) 90%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.52) 90%,transparent 100%)!important;
  }

  /* Suche sitzt jetzt im transparent auslaufenden unteren Headerbereich. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-desktop-search-dock{
    top:calc(100% - 38px)!important;
    width:min(1320px, calc(100vw - 96px))!important;
    max-width:1320px!important;
    z-index:75!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form{
    min-height:50px!important;
    grid-template-columns:40px minmax(0,1fr) 108px!important;
    padding:5px!important;
    border-color:rgba(255,255,255,.42)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.91),rgba(247,250,248,.86))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.90),
      0 8px 22px rgba(7,44,29,.12)!important;
    backdrop-filter:blur(16px) saturate(108%)!important;
    -webkit-backdrop-filter:blur(16px) saturate(108%)!important;
  }

  /* Goldkante aus V697 zurücknehmen – nur noch ein feiner Mittelpunkt. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form::before{
    left:18%!important;
    right:18%!important;
    height:1px!important;
    opacity:.62!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-icon{
    width:30px!important;
    height:30px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"],
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form button{
    height:38px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"]{
    background:rgba(255,255,255,.80)!important;
  }

  /* Neuer Start-Link – kompakt, damit die Navigation nicht gedrängt wirkt. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-home-link{
    position:relative!important;
    padding-left:27px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-home-link::before{
    content:""!important;
    position:absolute!important;
    left:10px!important;
    top:50%!important;
    width:12px!important;
    height:12px!important;
    transform:translateY(-50%)!important;
    background:#d7b45f!important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 10.8 12 3l9 7.8v9.7a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 10.8 12 3l9 7.8v9.7a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E")!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:contain!important;
    mask-size:contain!important;
  }
}

@media (min-width:1100px) and (max-width:1399px) and (hover:hover) and (pointer:fine){
  html body .rc-topbar.rc-site-header.rc-site-header-v3{
    margin-bottom:30px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-desktop-search-dock{
    width:min(1040px, calc(100vw - 48px))!important;
    top:calc(100% - 34px)!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form{
    grid-template-columns:36px minmax(0,1fr) 96px!important;
    min-height:46px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-icon{
    width:27px!important;
    height:27px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"],
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form button{
    height:36px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-home-link{
    padding-left:24px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-home-link::before{
    left:8px!important;
    width:11px!important;
    height:11px!important;
  }
}


/* ==========================================================================
   V699 – Suche sauber im Mittelbereich statt im Header-Fade
   Korrekturen nach Praxistest:
   - Suche nicht mehr über Logo
   - Renntermine-Dropdown immer vor der Suche
   - Start-Icon sauber neben "Start"
   - Suche bewusst schmaler und mittig als Portal-Werkzeugleiste
   ========================================================================== */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){

  /* Header darf weiterhin weich auslaufen; die Suche liegt aber wieder
     sauber darunter und nicht mehr innerhalb der Logo-/Navigationsfläche. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3{
    overflow:visible!important;
    margin-bottom:74px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-desktop-search-dock{
    position:absolute!important;
    left:50%!important;
    top:calc(100% + 13px)!important;
    transform:translateX(-50%)!important;
    width:min(1180px, calc(100vw - 500px))!important;
    max-width:1180px!important;
    min-width:620px!important;
    z-index:40!important;
    margin:0!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form{
    min-height:48px!important;
    grid-template-columns:38px minmax(0,1fr) 104px!important;
    padding:5px!important;
    border:1px solid rgba(18,83,57,.16)!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 7px 18px rgba(12,57,39,.085)!important;
    backdrop-filter:blur(12px) saturate(106%)!important;
    -webkit-backdrop-filter:blur(12px) saturate(106%)!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form::before{
    left:28%!important;
    right:28%!important;
    opacity:.40!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-icon{
    width:27px!important;
    height:27px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"]{
    height:36px!important;
    background:#fbfcfb!important;
    font-size:13px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form button{
    height:36px!important;
    min-width:104px!important;
    padding:0 14px!important;
    font-size:12px!important;
  }

  /* Renntermine muss immer oberhalb der Suchleiste aufgehen. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-race-group{
    z-index:500!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-race-subnav{
    z-index:999999!important;
  }

  /* Start: echtes Flex-Icon, kein über das Wort gelegtes Pseudo-Element. */
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-home-link{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    padding-left:10px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-home-link::before{
    content:none!important;
    display:none!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-home-icon{
    display:block!important;
    flex:0 0 auto!important;
    width:12px!important;
    height:12px!important;
    background:#d7b45f!important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 10.8 12 3l9 7.8v9.7a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 10.8 12 3l9 7.8v9.7a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E")!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:contain!important;
    mask-size:contain!important;
  }
}

@media (min-width:1100px) and (max-width:1399px) and (hover:hover) and (pointer:fine){

  html body .rc-topbar.rc-site-header.rc-site-header-v3{
    margin-bottom:70px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-desktop-search-dock{
    top:calc(100% + 11px)!important;
    width:min(900px, calc(100vw - 390px))!important;
    min-width:600px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form{
    grid-template-columns:34px minmax(0,1fr) 92px!important;
    min-height:45px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-icon{
    width:25px!important;
    height:25px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"],
  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form button{
    height:34px!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form button{
    min-width:92px!important;
  }
}


/* ==========================================================================
   V700 – Suche etwas deutlicher hervorheben
   Nur die Suchleiste selbst wird etwas grüner/kontrastreicher.
   Position, Breite und Header bleiben wie in V699.
   ========================================================================== */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form{
    border-color:rgba(15,90,62,.34)!important;
    background:
      linear-gradient(180deg,rgba(232,243,236,.97),rgba(218,234,224,.96))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.78),
      0 7px 18px rgba(12,57,39,.10)!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"]{
    border-color:rgba(18,83,57,.24)!important;
    background:rgba(250,252,251,.94)!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-form input[type="search"]:focus{
    border-color:rgba(15,90,62,.58)!important;
    box-shadow:
      0 0 0 3px rgba(15,90,62,.09),
      inset 0 1px 2px rgba(8,47,32,.025)!important;
  }

  html body .rc-topbar.rc-site-header.rc-site-header-v3 .rc-header-search-dock-icon{
    background:#caa24b!important;
  }
}