/* =========================================================
   Event ABC – ein Stylesheet für die gesamte Vorderseite
   style-2.11.css   (Nachfolger von style-2.10.css)

   Für die Vorderseite gibt es nur noch diese eine Datei.
   Neues gehört ans Ende – keine zusätzlichen CSS-Dateien mehr anlegen.

   Aufbau
     TEIL A  Bestand aus style-2.10.css, inhaltlich unverändert.
             Jede Regel ist auf  body.alt  eingeschränkt und greift nur
             auf Seiten, die noch nicht umgebaut sind.
     TEIL B  Neues Design: Grundlagen, Kopf, Fuß, Suchergebnisse, Profilseite
     TEIL C  Neues Design: eingeloggter Bereich
     TEIL D  Neues Design: Startseite

   Teil B bis D sind auf  body.ea  eingeschränkt. Beide Teile wiegen damit
   gleich schwer; weil das Neue später steht, gewinnt es. Die Kopfzeile
   setzt beide Klassen automatisch.

   Rundungen seitenweit einheitlich:
     10px  alles Rechteckige      8px  kleine Elemente      50%  runde

   Zusammengeführt am 15.08.2026.
   ========================================================= */

/* =========================================================
   TEIL A – Bestand, nur auf noch nicht umgebauten Seiten
   ========================================================= */

@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-Black.eot');
    src: local('Mont Black'), local('Mont-Black'),
    url('/fonts/Mont/Mont-Black.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-Black.woff2') format('woff2'),
    url('/fonts/Mont/Mont-Black.woff') format('woff'),
    url('/fonts/Mont/Mont-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-ThinItalic.eot');
    src: local('Mont Thin Italic'), local('Mont-ThinItalic'),
    url('/fonts/Mont/Mont-ThinItalic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-ThinItalic.woff2') format('woff2'),
    url('/fonts/Mont/Mont-ThinItalic.woff') format('woff'),
    url('/fonts/Mont/Mont-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-ExtraLight.eot');
    src: local('Mont ExtraLight'), local('Mont-ExtraLight'),
    url('/fonts/Mont/Mont-ExtraLight.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-ExtraLight.woff2') format('woff2'),
    url('/fonts/Mont/Mont-ExtraLight.woff') format('woff'),
    url('/fonts/Mont/Mont-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-Bold.eot');
    src: local('Mont Bold'), local('Mont-Bold'),
    url('/fonts/Mont/Mont-Bold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-Bold.woff2') format('woff2'),
    url('/fonts/Mont/Mont-Bold.woff') format('woff'),
    url('/fonts/Mont/Mont-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-HeavyItalic.eot');
    src: local('Mont Heavy Italic'), local('Mont-HeavyItalic'),
    url('/fonts/Mont/Mont-HeavyItalic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-HeavyItalic.woff2') format('woff2'),
    url('/fonts/Mont/Mont-HeavyItalic.woff') format('woff'),
    url('/fonts/Mont/Mont-HeavyItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-BlackItalic.eot');
    src: local('Mont Black Italic'), local('Mont-BlackItalic'),
    url('/fonts/Mont/Mont-BlackItalic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-BlackItalic.woff2') format('woff2'),
    url('/fonts/Mont/Mont-BlackItalic.woff') format('woff'),
    url('/fonts/Mont/Mont-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-ExtraLightItalic.eot');
    src: local('Mont ExtraLight Italic'), local('Mont-ExtraLightItalic'),
    url('/fonts/Mont/Mont-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-ExtraLightItalic.woff2') format('woff2'),
    url('/fonts/Mont/Mont-ExtraLightItalic.woff') format('woff'),
    url('/fonts/Mont/Mont-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-Heavy.eot');
    src: local('Mont Heavy'), local('Mont-Heavy'),
    url('/fonts/Mont/Mont-Heavy.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-Heavy.woff2') format('woff2'),
    url('/fonts/Mont/Mont-Heavy.woff') format('woff'),
    url('/fonts/Mont/Mont-Heavy.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-SemiBold.eot');
    src: local('Mont SemiBold'), local('Mont-SemiBold'),
    url('/fonts/Mont/Mont-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-SemiBold.woff2') format('woff2'),
    url('/fonts/Mont/Mont-SemiBold.woff') format('woff'),
    url('/fonts/Mont/Mont-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-RegularItalic.eot');
    src: local('Mont Regular Italic'), local('Mont-RegularItalic'),
    url('/fonts/Mont/Mont-RegularItalic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-RegularItalic.woff2') format('woff2'),
    url('/fonts/Mont/Mont-RegularItalic.woff') format('woff'),
    url('/fonts/Mont/Mont-RegularItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-BoldItalic.eot');
    src: local('Mont Bold Italic'), local('Mont-BoldItalic'),
    url('/fonts/Mont/Mont-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-BoldItalic.woff2') format('woff2'),
    url('/fonts/Mont/Mont-BoldItalic.woff') format('woff'),
    url('/fonts/Mont/Mont-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-SemiBoldItalic.eot');
    src: local('Mont SemiBold Italic'), local('Mont-SemiBoldItalic'),
    url('/fonts/Mont/Mont-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-SemiBoldItalic.woff2') format('woff2'),
    url('/fonts/Mont/Mont-SemiBoldItalic.woff') format('woff'),
    url('/fonts/Mont/Mont-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-LightItalic.eot');
    src: local('Mont Light Italic'), local('Mont-LightItalic'),
    url('/fonts/Mont/Mont-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-LightItalic.woff2') format('woff2'),
    url('/fonts/Mont/Mont-LightItalic.woff') format('woff'),
    url('/fonts/Mont/Mont-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-Thin.eot');
    src: local('Mont Thin'), local('Mont-Thin'),
    url('/fonts/Mont/Mont-Thin.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-Thin.woff2') format('woff2'),
    url('/fonts/Mont/Mont-Thin.woff') format('woff'),
    url('/fonts/Mont/Mont-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-Regular.eot');
    src: local('Mont Regular'), local('Mont-Regular'),
    url('/fonts/Mont/Mont-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-Regular.woff2') format('woff2'),
    url('/fonts/Mont/Mont-Regular.woff') format('woff'),
    url('/fonts/Mont/Mont-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'Mont';
    src: url('/fonts/Mont/Mont-Light.eot');
    src: local('Mont Light'), local('Mont-Light'),
    url('/fonts/Mont/Mont-Light.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Mont/Mont-Light.woff2') format('woff2'),
    url('/fonts/Mont/Mont-Light.woff') format('woff'),
    url('/fonts/Mont/Mont-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face{
    font-family: 'ArsenicaTrial';
    src: url('/fonts/ArsenicaTrial/ArsenicaTrial-Medium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face{
    font-family: 'ArsenicaTrial';
    src: url('/fonts/ArsenicaTrial/ArsenicaTrial-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
body.alt{
    font-family: 'Mont', sans-serif;
    background: #ffffff;
}
body.alt a{
    text-decoration: none;
}
body.alt header{
    background: #1D2225;
    padding-top: 10px;
    padding-bottom: 10px;
}
body.alt h1,
body.alt h2{
    font-size: 30px;
    font-weight: 600;
    color: #000000;
    font-family: "ArsenicaTrial", sans-serif;
    text-transform: uppercase;
}
body.alt .pointer:hover{
    cursor: pointer;
}
body.alt .btn-main{
    display: inline-block;
    padding: 11px 20px 10px 20px;
    color: #000000;
    font-size: 14px;
    transition: .3s;
    border: 1px solid #DBC093;
    border-radius: 0 !important;
    background: #DBC093;
    font-weight: 400;
    font-family: "ArsenicaTrial", sans-serif;
    text-transform: uppercase;
    /*text-transform: uppercase;*/
}
body.alt .btn-cancel{
    display: inline-block;
    padding: 11px 20px 10px 20px;
    color: #DBC093;
    background: transparent;
    border: 1px solid #DBC093;
    font-weight: 400;
    font-size: 14px;
    transition: .3s;
    /* border-radius: 30px; */
    margin-left: 5px;
    margin-right: 5px;
    font-family: 'ArsenicaTrial';
    text-transform: uppercase;
}
body.alt .btn-cancel:hover,
body.alt .btn-cancel:focus{
    color: #DBC093;
    background: transparent;
    border: 1px solid #DBC093;
    font-weight: 500;
    cursor: pointer;
}
body.alt .btn-main img{
    width: 10px;
}
body.alt .btn-green{
    display: block;
    padding: 11px 20px 10px 20px;
    color: #000000;
    background: #DBC093;
    border: 1px solid transparent;
    transition: .3s;
    border-radius: 0;
    font-family: "ArsenicaTrial", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}
body.alt .btn-green:hover{
    color: #000000;
    background: transparent;
    border: 1px solid #DBC093;
    cursor: pointer;
}
body.alt .btn-account{
    padding: 5px;
    background:transparent;
    font-size: 10px;
    color:#ffffff;
    transition: .3s;
}
body.alt .btn-account:hover,
body.alt .btn-account:focus{
    color: #DBC093;
}
body.alt header .btn-registration{
    background: transparent;
    padding: 0;
}
body.alt header .btn-registration:hover,
body.alt header .btn-registration:focus{
    border: none;
    padding: 0;
}
body.alt .btn-registration img{
   width: 40px;
   padding: 5px;
}
body.alt .modal-form{
    background: rgba(0, 0, 0, 0.6);
}
body.alt .modal-form .modal-content{
    background: #1D2225;
    color: #ffffff;
    padding: 25px 35px 30px 35px;
    /* border-radius: 20px; */
}
body.alt .modal-header,
body.alt .modal-body{
    padding: 0;
}
body.alt .modal-form .modal-header{
   	border-bottom: none;
	font-family: 'ArsenicaTrial';
    text-transform: uppercase;
}
body.alt .modal-form .btn-close{
  filter: invert(100%);
}
body.alt .modal-form .radio_label{
    font-size: 12px!important;
}
body.alt .modal-form .radio_label:before{
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #DBC093;
    background-color: #1D2225;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 1;

    transition: background .1s linear, border .1s linear;
}
body.alt .modal-form .radio_label:after{
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #DBC093;
    background-size: 12px 12px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    z-index: 2;
    transition: opacity .1s linear;
}
body.alt .modal-form .radio_input:checked + .radio_label:before{
    background-color: #DBC093;
    border-color: #DBC093;
}
body.alt .modal-form .radio_input:checked + .radio_label:after{
    opacity: 1;
}
body.alt .modal-form label{
    font-size: 10px;
    font-weight:200;
    color: #ffffff;
}
body.alt #registration-agreement-text a{
    color: #DBC093!important;
}
body.alt .modal-form label a{
    color: #ffffff;
    text-decoration: none;
}
body.alt .modal-form label a:hover{
    text-decoration: underline;
}
body.alt .modal-form input{
    font-size: 14px;
    color:#000000;
}
body.alt .modal-form .modal-form-btn-main{
    padding: 10px 20px;
    background: #DBC093;
    font-size: 16px;
    color: #000000;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    transition: .3s;
    font-family: "ArsenicaTrial", sans-serif;
    text-transform: uppercase;
}
body.alt .modal-form .modal-form-btn-main:hover{
    cursor: pointer;
    background: #DBC093;
    color: #ffffff;
}
body.alt .enter-changes span,
body.alt .enter-changes a{
    display: inline-block;
    color: #ffffff;
    font-size: 12px;
    transition: .3s;
}
body.alt .enter-changes span:last-child{
    border-bottom: 1px solid #1D2225;
    color: #fff;
}
body.alt .enter-changes span:hover,
body.alt .enter-changes span:hover{
    color: #DBC093;
    cursor: pointer;
}
body.alt .modal-form-btn img:hover,
body.alt .modal-form-btn a:hover{
    cursor: pointer;
}
body.alt .btn-main:hover{
    color: #DBC093;
    background: transparent;
    border: 1px solid #DBC093;
    cursor: pointer;
}
body.alt .navbar{
    padding-top: 10px;
    padding-bottom: 10px;
}
body.alt .btn-header:hover{
    color: #000000;
    background: #ffffff;
}
body.alt .navbar-toggler:focus{
    box-shadow: none;
}
body.alt .logo{
    width: 115px;
    transition: .3s;
    display: block;
}
body.alt .header-location{
    padding-left: 20px;
}
body.alt .header-location span{
    color: #ffffff;
    font-size: 10px;
    display: block;
    padding-left: 25px;
}
body.alt .header-location img{
    display: inline-block;
    width: 20px;
}
body.alt .header-location a{
    display: inline-block;
    color:#ffffff;
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
    border-bottom: 1px solid #ffffff;
}
body.alt .active-menu-item{
    color: #ec1c24!important;
}
body.alt .search-category{
    background: #F7F3F0;
    color: #000000;
    font-size: 12px;
    border-right: 1px solid #C1A9A4;
    box-shadow: none;
}
body.alt .search-category:focus{
    box-shadow: none;
}
body.alt .search-button{
    background: #DBC093;
    border: 2px solid #DBC093;
    transition: .3s;
    margin-bottom: -1px;
}
body.alt .search-button:hover{
    background: transparent;
    border: 2px solid #DBC093;
    transition: .3s;
}
body.alt .search-button img{
    display: inline-block;
    width: 20px;
}
body.alt header .form-control.search-input{
    border: none;
    margin-left: 0;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    width: 63%;
    display: block;
}
body.alt header .form-control.search-input:focus{
    box-shadow: none;
    border: none;
    margin: 0;
}
body.alt header .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
    margin-left: 0;
}
body.alt .header-location-xs{
    background: #121626;
    padding-top:10px;
    padding-bottom: 13px;
    padding-left: 8px;
}
body.alt .offcanvas-header .btn-close{
    border: 1px solid red;
    margin-right: 5px;
    margin-top: 5px;
    filter: invert(59%) sepia(94%) saturate(4649%) hue-rotate(200deg) brightness(42%) contrast(122%);
    border-radius: 0;
}
body.alt .navbar .navbar-toggler{
    padding: 0.25rem 0.75rem 0.25rem 0;
    filter: invert(81%) sepia(46%) saturate(289%) hue-rotate(350deg) brightness(415%) contrast(83%);
}
body.alt .dropdown-profile .dropdown-toggle{
    padding: 0;
    position: relative;
}
body.alt .dropdown-profile .dropdown-toggle:after{
    display: none;
}
body.alt .menu-left-side img{
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 10px;
}
body.alt .dropdown-profile{
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
    margin-right: 13px;
}
body.alt .dropdown-profile .dropdown-toggle{
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
}
body.alt .dropdown-profile img:first-child{
    display: inline-block;
    height: 32px!important;
    width: 32px!important;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #FAE5DD;
    padding: 0;
}
body.alt .profile-arrow{
    width: 8px!important;
    height: 8px!important;
    display: inline-block!important;
    transform: rotate(90deg) translateX(-10%);
    vertical-align: middle!important;
    margin-bottom:-4px!important;
    margin-left: -2px!important;
}
body.alt .dropdown-profile .dropdown-toggle span{
    font-size: 10px;
    color:#ffffff;
    text-transform: uppercase;
}
body.alt .menu-left-side .bell img{
    height: 23px;
    width: 23px;
    display: inline-block;
    margin-right: 5px;
}
body.alt .menu-left-side .bell{
    position: relative;
}
body.alt .menu-left-side .header-icon-badge{
    color: #ffffff;
    position: absolute;
    top: 0;
    right: -3px;
    background: red;
    font-size: 10px;
    padding: 0 5px;
    border-radius: 50%;
}
@media (min-width: 375px){


}
@media (min-width: 768px){
body.alt .modal-form .modal-content{
        padding: 35px 40px ;
        width: 90%;
        margin: 0 auto;
    }



}
@media (min-width: 992px){
body.alt .navbar{
        padding-top: 0;
        padding-bottom: 0;
    }
body.alt .menu-items a{
        padding-top: 40px;
        padding-bottom: 30px;
        margin-right: 20px;
        border-bottom: 5px solid transparent;
    }




}
@media (min-width: 1024px){
body.alt .btn-registration{
        background: #FAE5DD;
    }


}
@media (min-width: 1200px){
body.alt .btn-account{
        padding: 9px 15px;
        background: #DBC093;
        font-size: 13px;
        color: #000000;
        transition: .3s;
        border-radius: 0;
        border: 1px solid #DBC093;
       	font-family: "ArsenicaTrial", sans-serif;
        text-transform: uppercase;
    }
body.alt .btn-account:hover,
body.alt .btn-account:focus{
        color: #DBC093;
        background: transparent;
        border: 1px solid #DBC093;
    }
body.alt header .btn-registration{
        background: transparent;
        padding: 9px 15px;
        color: #DBC093;
        font-size: 13px;
        border: 1px solid #DBC093;
        border-radius: 0;
        transition: .3s;
        margin-left: 3px;
        font-family: "ArsenicaTrial", sans-serif;
        text-transform: uppercase;
    }
body.alt header .btn-registration:hover,
body.alt header .btn-registration:focus{
        padding: 9px 15px;
        border: 1px solid #DBC093;
        color: #000000;
        background: #DBC093;
    }
body.alt .dropdown-profile img{
        padding: 0;
    }
body.alt .menu-left-side img{
        margin: 0 13px;

    }





}
@media (min-width: 1380px){



}
@media (min-width: 1400px){
body.alt .dropdown-profile img{
        margin: 0 5px 0 13px;
    }


}
/*-------------------------------------------------*/
/*Main page*/
/*-------------------------------------------------*/
body.alt .slider img{
    margin: 0 auto;
    display: block;
}
body.alt #menu-wrap{
    overflow-x: scroll;
    position: relative;
}
body.alt #menu{
    background: #262938;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 300%;
}
body.alt #menu .menu-block a{
    font-size: 11px;
    color:#ffffff;
    transition: .3s;
}
body.alt #menu .menu-block .dropdown{
    position: static;
}
body.alt #menu .menu-block .dropdown-menu{
    width: 100%;
}
body.alt #menu .menu-block .dropdown-menu.show{
    width: 100%;
    display: block;
    background: #F7F3F0;
    position: absolute;
    left: 0;
    top:10px;
    z-index: 1;
}
body.alt #menu .menu-block .dropdown-menu li{
    color: #000000;
    display: inline-block;
}
body.alt #menu .menu-block a:hover{
    color: #DBC093;
}
body.alt #menu .menu-block .dropdown-menu a{
    color: #000000;
}
body.alt #menu .dropdown-item.active,
body.alt .dropdown-item:active{
    color: #000;
    text-decoration: none;
    background-color: transparent;
}
body.alt #menu .menu-block .dropdown-item:focus,
body.alt #menu .menu-block .dropdown-item:hover{
    color: #000000;
    background-color: transparent;
}
body.alt .menu-drop .btn-secondary{
    color: #fff;
    border-color: transparent;
    background: transparent;
    padding: 0 10px;
}
body.alt .menu-drop .btn-secondary:focus{
    box-shadow: none;
}
/*Main products*/
body.alt .products{
    padding-top: 50px;
    padding-bottom: 50px;
}
body.alt .product-block{
    margin-bottom: 25px;
}
body.alt .product-block > div{
    background: #ffffff;
    border-radius: 0;
    text-align: center;
    overflow: hidden;
    min-height: 100%;
    position: relative;
}
body.alt .product-favorites,
body.alt .product-favorites-auth{
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.4);
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    transition: .3s;
    border-radius: 50%;
}
body.alt .product-favorites > div,
body.alt .product-favorites-auth > div{
    position: relative;
    min-height: 100%;
    border-radius: 50%;
}
body.alt .heart-empty{
    width: 20px;
    height: 20px;
    background: url('/img/icons/icon-heart-empty.svg') center no-repeat;
    display: block;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50px;
}
body.alt .heart-full{
    width: 20px;
    height: 20px;
    background: url('/img/icons/icon-heart-full.svg') center no-repeat;
    display: block;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50px;
}
body.alt .product-favorites:hover,
body.alt .product-favorites-auth:hover{
    background: rgba(255,255,255,0.7);
    cursor: pointer;
}
body.alt .header-top{
    margin-bottom: 20px;
}
body.alt .header-top h1,
body.alt .header-top h2{
    font-size: 30px;
    font-weight: 600;
    color: #000000;
    font-family: "ArsenicaTrial", sans-serif;
    text-transform: uppercase;
}
body.alt .header-top a{
    font-size: 12px;
    font-weight: 500;
    color: #000000;
    transition: .3s;
}
body.alt .header-top a:hover{
    color: #DBC093;
}
body.alt .product-info{
    padding: 10px;
}
body.alt .product-info .product-header{
    font-size: 18px;
    color: #000000;
    font-weight: 700;
    transition: .3s;
    display: block;
    padding-top: 0;
    padding-bottom: 0;
    font-family: "ArsenicaTrial", sans-serif;
    text-transform: uppercase;
}
body.alt .product-info .product-header span{
    display: block;
    font-weight: 600;
    margin-top: 0;
}
body.alt .product-info .product-header:hover{
    color: #DBC093;
}
body.alt .article-info .article-header{
    font-size: 18px;
    color: #000000;
    font-weight: 700;
    transition: .3s;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
}
body.alt .article-info .article-header:hover{
    color: #DBC093
}
body.alt .article-slide{
    text-align: center;
}
body.alt .article-slide img{
    border-radius: 0 0 15px 15px;
}
body.alt .img-product{
    display: block;
    margin: 0 auto;
    overflow: hidden;
    transition: .3s;
    border-radius: 0;
    position: relative;
}
body.alt .img-product > img{
    display: block;
    margin: 0 auto;
    transition: .3s;
    border-radius: 0;
    opacity: 1;
    min-width: 100%;
}
body.alt .img-product:hover > img{
    opacity: 0.8;
}
body.alt .video-icon{
    position: absolute;
    width: 55px;
    height: 55px;
    bottom: 8px;
    right: 6px;
    transition: .3s;
    will-change: transform; 
  	border-radius: 50%;
  	animation: pulseShadow 5s infinite;
}
body.alt .video-icon:hover{
    transform: scale(1.1);
}
body.alt .product-type{
    margin-bottom: 15px;
    margin-top: 15px;
}
body.alt .product-type a{
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    display: inline-block;
    transition: .3s;
    line-height: 90%;
}
body.alt .product-type a:hover{
    color: #DBC093;
}
body.alt .product-type a:first-child{
    position: relative;
    margin-right: 20px;
}
body.alt .product-type a:first-child:after{
    content: '';
    position: absolute;
    top: 1px;
    right: -13px;
    width: 1px;
    height: 70%;
    background: #000000;
}
body.alt .rating > div{
    display: inline-block;
    vertical-align: middle;
}
body.alt .rating > span{
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 12px;
}
body.alt .star-full{
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('/img/icons/icon-full-star.svg') center no-repeat;
    background-size: cover;
    transition: .3s;
}
body.alt .star-full:hover{
    opacity: .5;
    cursor: pointer;
}
body.alt .star-empty{
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('/img/icons/icon-star-empty.svg') center no-repeat;
    background-size: cover;
    transition: .3s;
}
body.alt .star-empty:hover{
    opacity: .5;
    cursor: pointer;
}
body.alt .product-price{
    margin-top: 10px;
}
body.alt .product-price span{
    color: #000000;
    font-size: 12px;
}
body.alt .product-price strong{
    color: #000000;
    font-size: 18px;
}
body.alt .product-price{
    margin-top: 10px;
}
body.alt .product-block-small > div{
    min-height: auto;
    height: auto;
}
/*Category block*/
body.alt .categories{
    padding-bottom: 20px;
}
body.alt .category-block{
    margin-bottom: 30px;
}
body.alt .category-top{
    position: relative;
    padding-right: 28px;
    margin-bottom: 10px;
}
body.alt .category-top:after{
    content: '';
    width: 23px;
    height: 23px;
    background: url('/img/icons/icon-arrow-black.svg') center no-repeat;
    background-size: cover;
    position: absolute;
    top:50%;
    right: 0;
    transform: translateY(-50%) rotate(90deg);
}
body.alt .category-top.active-category:after{
    content: '';
    width: 23px;
    height: 23px;
    background: url('/img/icons/icon-arrow-black.svg') center no-repeat;
    background-size: cover;
    position: absolute;
    top:50%;
    right: 0;
    transform: translateY(-50%) rotate(-90deg);
}
body.alt .category-top strong{
    display: inline-block;
    color:#000000;
    font-size: 14px;vertical-align: middle;
}
body.alt .category-top img{
    width: 45px;
    display: inline-block;
    vertical-align: middle;
}
body.alt .category-top strong{
    display: inline-block;
    color:#000000;
    font-size: 16px;
    font-weight: 600;
    vertical-align: middle;
    text-transform: uppercase;
    padding-left: 5px;
}
body.alt .category-top strong a{
    color:#000000;
}
body.alt .category-top strong a:hover{
    text-decoration: underline;
}
body.alt .category-info{
    display: none;
}
body.alt .category-info ul{
    padding: 0;
    margin: 0;
}
body.alt .category-info ul li{
    padding-left: 5px;
    list-style: none;
}
body.alt .category-info ul li a{
    color:#000000;
    font-weight: 600;
    font-size: 14px;
    transition: .3s;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    padding: 5px;
    padding-left: 0;
}
body.alt .category-info ul li span{
    color:#000000;
    font-weight: 400;
    font-size: 14px;
    transition: .3s;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    padding: 5px;
    padding-left: 0;
}
body.alt .category-info ul li a:hover{
    color:#DBC093;
}
body.alt .active-info{
    display: block!important;
}
/*Footer*/
body.alt footer{
    padding-top: 50px;
    padding-bottom: 13px;
    background: #1D2225;
}
body.alt .footer-main-block ul{
    padding-left: 0;
}
body.alt .footer-main-block li{
    list-style: none;
    margin-top: 5px;
}
body.alt .footer-main-block a,
body.alt .footer-main-block span{
    color:#ffffff;
    font-size: 14px;
    transition: .3s;
}
body.alt .footer-main-block a:hover{
    color: #DBC093;
}
body.alt .footer-social a{
    margin-right: 10px;
    transition: .3s;
}
body.alt .footer-social a:hover{
   opacity: .5;
}
body.alt .footer-copyright{
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}
body.alt .footer-copyright span{
    color:#ffffff;
    font-size: 14px;
}
body.alt .footer-copyright a{
    transition: .3s;
}
body.alt .footer-copyright a:hover{
   opacity: .5;
}
body.alt .form-error-text{
    font-size: 10px;
    margin-top: 5px;
    color: #ff7d7d;
    font-weight: 600;
}
body.alt #registration-form-error-phone,
body.alt #registration-form-error-code,
body.alt #form-login-error-phone,
body.alt #form-login-error-pass,
body.alt #login-form-forget-error-code{
    display: none;
}
body.alt .justify-text{
    text-align: justify;
}
@media (min-width: 768px){
body.alt #menu{
        width: 200%;
    }
/*Category block*/
body.alt .category-top{
        padding-right: 0;
    }
body.alt .category-top strong{
        font-size: 20px;
    }
body.alt .category-top:after,
body.alt .category-top.active-category:after{
      display: none!important;
    }
body.alt .header-top h1,
body.alt .header-top h2{
        font-size: 26px;
    }
body.alt .header-top a{
        font-size: 14px;
    }
body.alt .category-info{
       display: block!important;
    }
body.alt .category-top img{
        width: 45px;
        height: 48px;
    }
body.alt .video-icon{
        width: 64px;
        height: 64px;
        bottom: 15px;
        right: 12px;

    }





}
@media (min-width: 992px){





}
@media (min-width: 1024px){
body.alt #menu-wrap{
        overflow-x: unset;
    }
body.alt #menu{
        width: 100%;
    }




}
@media (min-width: 1200px){
body.alt #menu .menu-block a{
        font-size: 10px;
    }
body.alt .product-info .product-header{
        font-size: 23px;
    }
body.alt .header-top a{
        font-size: 18px;
    }




}
@media (min-width: 1440px){
body.alt #menu .menu-block a{
        font-size: 12px;

    }
body.alt .profile-arrow{
        margin-left:2px!important;
    }
body.alt h1,
body.alt h2{
        font-size: 36px;
    }
body.alt .header-top h1,
body.alt .header-top h2{
        font-size: 36px;
    }





}
/*-----------------------------------*/
/* Profile Page */
/*-----------------------------------*/
body.alt .profile-add-img{
    position: relative;
}
body.alt #profile-bg-image{
    transition: .3s;
}
body.alt .icon-profile-add-img{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}
body.alt #profile-bg-image-text{
    color: #ffffff;
    display: none;
    position: absolute;
    max-width: 40%;
    bottom: 0;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    z-index: 1;
    padding: 10px;
}
body.alt .personal-page >.row>:first-child{
    position: relative;
    padding-top: 10px;
}
body.alt .personal-page >.row:first-child .profile-user{
    position: absolute;
    top:-53px;
    left: 50%;
    display: block;
    margin: 0 auto;
    transform: translate(-50%,-50%);
    width: 150px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    z-index: 1;
}
body.alt .profile-user-plus{
    position: absolute;
    top: -35px;
    right: 33%;
    width: 30px;
    height: 30px;
    display: block;
    z-index: 2;
}
body.alt .profile-user-plus:hover{
   cursor: pointer;
}
body.alt .profile-user-text{
    font-size: 12px;
    text-align: center;
}
body.alt #profile-rating{
    border-top: 1px solid #ECE1CE;
    padding-top: 20px;
}
body.alt #profile-rating li span,
body.alt #profile-rating li strong{
    font-size: 12px;
    text-transform: uppercase;
}
body.alt #profile-rating  li p{
    font-size: 12px;
}
body.alt #profile-rating  li{
    margin-bottom: 10px;
    border-bottom: none;
}
body.alt .profile-star div{
    display: inline-block;
    vertical-align: middle;
}
body.alt .profile-star > strong{
    display: inline-block;
    font-size: 12px;
}
body.alt .profile-star div img{
    display: inline-block;
    vertical-align: middle;
}
body.alt .personal-page ul{
    padding-left: 0;
    margin-bottom: 0;
}
body.alt .personal-page ul li{
    list-style: none;
}
body.alt .personal-page ul li a{
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    color:#000000;
    transition: .3s;
}
body.alt .personal-page ul li a:hover{
    text-decoration: none;
    color: #DBC093;
}
body.alt .personal-list{
    padding-left: 0;
    margin-bottom: 0;
}
body.alt .personal-list li{
    list-style: none;
    margin-bottom: 2px;
}
body.alt .personal-list li a{
    color: #262938;
    display: block;
    background: #fff;
    transition:.3s;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
}
body.alt .personal-list li a:hover{
    display: block;
    background: #DBC093;
}
body.alt .personal-list img{
    display: inline-block;
    width: 20px;
    height: 20px;
    transition: .3s;
    position: relative;
    filter: invert(90%)!important;
}
body.alt .personal-list img:after{
    content: '';
    position: absolute;
    top:50%;
    left: 0;
    width: 40px;
    height: 40px;
    background: #eeeeee;
}
body.alt .personal-list span{
    color:#262938;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    transition: .3s;
    margin-left: 5px;
    font-weight: 500;
}
body.alt .personal-list li a:hover{
    text-decoration: none;
}
body.alt .personal-list li a:hover img{
    filter: none!important;

}
body.alt .personal-list li a:hover span{
    color: #fff;
}
body.alt .profile-active-menu{
    background: #DBC093!important;
}
body.alt .profile-active-menu span{
    color: #fff!important;
}
body.alt .profile-active-menu img{
    filter: none!important;
}
/* Profile menu XS */
body.alt .profile-menu-xs-img-block a{
    border: 2px solid transparent;
    border-radius: 50%;
    display: block;
    padding: 5px;
    width: 70px;
    margin: 0 auto;
}
body.alt .col{
	padding: 0 5px;
}
body.alt .profile-menu-xs-img-block a:hover,
body.alt .profile-menu-xs-img-block a.active{
    border: 2px solid #DBC093;
}
body.alt .profile-menu-xs-img-block img{
    width: 100%;
}
body.alt .profile-menu-xs-active-menu{
    display: block;
    background: #ffffff!important;
    -webkit-box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    -moz-box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    position: relative;
}
body.alt .profile-menu-xs-active-menu:hover{
    cursor: pointer;
}
body.alt .profile-menu-xs-active-menu img{
    filter: invert(90%)!important;
    margin-right: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    transition: .3s;
    position: relative;
}
body.alt .profile-menu-xs-active-menu svg{
    position: absolute;
    top: 20px;
    right: 15px;
}
body.alt .profile-menu-xs-open-menu{
    background: #ffffff!important;
    display: none;
    -webkit-box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    -moz-box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    border-radius: 8px;
    margin-top: 10px;
}
body.alt .profile-menu-xs-open-menu a{
    color: #000000;
    display: block;
    padding: 15px 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}
body.alt .profile-menu-xs-open-menu a:last-child{
    border-bottom: none;
}
body.alt .profile-menu-xs-open-menu a img{
    filter: invert(90%)!important;
    margin-right: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    transition: .3s;
    position: relative;
}
body.alt .upside-down{
    transform: translateY(-10%) rotate(180deg);
}
body.alt .profile-menu-top{
    background: #1D2225;
    margin-bottom: 20px;
    border-radius: 0;
}
body.alt .profile-menu-top a{
    border: 1px solid transparent;
    display: block;
    /*background: #262938;*/
    color: #ffffff;
    transition: .3s;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
}
body.alt .profile-menu-top a:hover{
    background: #FAF5EF;
    color: #000000;
}
body.alt .profile-menu-top a.active{
    background: #FAF5EF;
    color: #000000;
}
body.alt .personal-avatar{
    padding: 15px;
    background: rgba(76, 88, 191, 0.6);
    margin-bottom: 10px;
}
body.alt .personal-avatar span{
    color:#1b1e21;
    border-radius: 10px;
    font-size: 12px;
}
body.alt .order-one{
    margin-bottom: 15px;
}
body.alt .order-header{
    margin-bottom: 3px;
}
body.alt .order-body{
    padding-top: 10px;
}
body.alt .order-body .row{
    margin-bottom: 14px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
}
body.alt .order-one .price-shopping h2{
    display: inline-block;
    font-size: 12px;
}
body.alt .order-one .price-shopping strong{
    display: inline-block;
    font-size: 12px;
}
body.alt .delivery-address{
    background: #eeeeee;
    padding: 10px;
}
body.alt .delivery-address strong{
    font-size: 12px;
}
body.alt .delivery-address p{
    font-size: 12px;
}
body.alt .date-delivery{
    margin-top: 15px;
    background: rgb(114, 128, 243);
}
body.alt .order-body{
    display: none;
}
body.alt .order-header > .row{
    padding: 0 0;
}
body.alt .active-block{
    display: block!important;
}
body.alt .order-one .order-header > .row{
    padding: 17px 0 0 0;
}
body.alt .order-done{
    color:#DBC093;!important;
}
body.alt .order-process{
    color: #d48731 !important;
}
body.alt .data-block > .row{
    margin-bottom: 20px;
    padding-top:20px;
    padding-bottom: 20px;
    border:1px solid #e9e9e9;
    border-radius: 10px;
    background: #ffffff;
}
body.alt .data-block h2{
    color:#000000;
    font-weight: 500;
    font-size: 20px;
}
body.alt .data-block-header{
    margin-bottom: 30px;
}
body.alt .data-block > .row > div{
    margin-bottom: 20px;
}
body.alt .data-block > .row > div span{
    color:#797878;
    font-size: 12px;
    display: block;
}
body.alt .data-block > .row > div strong{
    color:#000000;
    font-size: 14px;
    display: block;
    font-weight: 500;
}
body.alt .data-block > .row .change{
    color: #DBC093;
    font-weight: 600;
    transition: .3s;
    font-size: 16px;
}
body.alt .data-block > .row .change:hover{
    color :#000000;
    cursor: pointer;
}
body.alt .profile-main-form span{
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}
body.alt .profile-main-form::-webkit-input-placeholder{ /* Edge */
    color: #DBC093!important;
    font-weight: 500;
    font-size: 14px;
}
body.alt .profile-main-form:-ms-input-placeholder{ /* Internet Explorer 10-11 */
    font-weight: 500;
    color: #DBC093!important;
    font-size: 14px;
}
body.alt .profile-main-form::placeholder{
    font-weight: 500;
    color: #DBC093!important;
    font-size: 14px;
}
body.alt ::-webkit-input-placeholder{ /* Edge */
    color: #DBC093 !important;
    font-weight: 500;
    font-size: 14px;
}
body.alt :-ms-input-placeholder{ /* Internet Explorer 10-11 */
    font-weight: 500;
    color: #DBC093!important;
    font-size: 14px;
}
body.alt ::placeholder{
    font-weight: 500;
    color: #DBC093!important;
    font-size: 14px;
}
body.alt .profile-main-form .form-select{
    font-size: 14px;
    border: 1px solid #DBC093;
}
body.alt .main-profile-subcategory > ul{
    border: 1px solid #DBC093;
    border-radius: 5px;
}
body.alt .main-profile-categories .main-profile-subcategory ul li{
    padding: 5px 15px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 3px;
}
body.alt .main-profile-categories .main-profile-subcategory ul li:hover{
    color: #DBC093;
    cursor: pointer;
}
body.alt .main-profile-subcategory-active{
    background: #DBC093!important;
    color:#ffffff!important;
}
body.alt .radio{
    position: relative;
    margin-bottom: 0;
    display: inline-block;
    margin-right: 15px;
}
body.alt .radio_input{
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
}
body.alt .radio_label{
    padding-left: 25px;
    font-size: 14px!important;
    color: #000000;
    cursor: pointer;

}
body.alt .profile-main-form .radio .radio_label{
margin-bottom: 0;
}
body.alt .radio_label:before{
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #DBC093;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 1;

    transition: background .1s linear, border .1s linear;
}
body.alt .radio_label:after{
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1D2225;
    background-size: 12px 12px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    z-index: 2;
    transition: opacity .1s linear;
}
body.alt .radio_input:checked + .radio_label:before{
    background-color: #1D2225;
    border-color: #1D2225;
}
body.alt .radio_input:checked + .radio_label:after{
    opacity: 1;
}
body.alt .profile-main-form-header{
    margin-bottom: 20px;
}
body.alt .profile-main-form-header h1{
    font-size: 20px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 600;
}
body.alt .profile-main-form-header,
body.alt .profile-main-form-header span{
    color: #000000;
    font-size: 14px;
    font-weight: normal;
}
body.alt .profile-main-form p{
    font-size: 12px;
    font-weight: 600;
    text-align: justify;
}
body.alt .order-form .profile-main-form label{
    font-size: 12px;
    font-weight: 600;
    text-align: justify;
    display: inline-block;
    margin-bottom: 5px;
}
body.alt .main-profile-categories p{
    font-size: 12px;
}
body.alt .main-profile-categories .dropdown-toggle{
    width: 100%;
    border: 1px solid #DBC093;
    font-size: 12px;
}
body.alt .main-profile-form-btns span:hover{
    cursor: pointer;
}
body.alt .main-profile-categories .dropdown .dropdown-menu.show{
    width: 100%;
    border: 1px solid #DBC093;
    position: relative!important;
    transform: translate3d(0px, 0px, 0px)!important;
    max-height: 100px;
    overflow-y: scroll;
}
body.alt .main-profile-categories .dropdown .dropdown-menu.show{
    width: 100%;
    border: 1px solid #DBC093;
    position: relative!important;
    transform: translate3d(0px, 5px, 0px)!important;
}
body.alt .main-profile-categories .dropdown-item:focus,
body.alt .dropdown-item:hover{
    color: #000000;
    background-color: #FAF5EF;
}
body.alt .sending-info p{
    font-size: 12px;
    margin-top: 40px;
}
body.alt .profile-form-btns span{
    display: inline-block;
    margin-right: 10px;
    color:#DBC093;
    font-size: 14px;
    border:2px solid transparent;
    padding: 10px 20px;
    transition: .3s;
    font-family: 'ArsenicaTrial';
    text-transform: uppercase;
}
body.alt .profile-form-btns span.btn-main{
    color:#ffffff;
}
body.alt .profile-form-btns span:hover{
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    /*background-color: #FAF5EF;*/
    color:#DBC093;
    border: 2px solid #DBC093;
}
body.alt .profile-user-text{
    margin-top: 85px;
}
@media (min-width: 768px){
body.alt #profile-bg-image{
        border-radius: 0 0 15px 15px;
    }
body.alt .profile-menu-top > div{
       padding: 0;
    }
body.alt .profile-menu-top > div:first-child a{
        border-radius: 0;
    }
body.alt .profile-menu-top > div:last-child a{
        border-radius: 0;
    }
body.alt .personal-page >.row:first-child .profile-user{
        width: 150px;
    }
body.alt .profile-user-plus{
        top: -24px;
        right: 22%;
    }
body.alt .profile-user-text{
        margin-top: 70px;
    }



}
@media (min-width: 992px){





}
@media (min-width: 1024px){






}
@media (min-width: 1200px){
body.alt .profile-user-plus{
        top: -24px;
        right: 26%;
    }



}
@media (min-width: 1440px){




}
/*-----------------------------------*/
/*Profile message page*/
/*-----------------------------------*/
body.alt .customer-profile{
    padding: 10px;
 /*   -webkit-box-shadow: 0px 1px 12px -1px rgba(0,0,0,0.06);*/
 /*   -moz-box-shadow: 0px 1px 12px -1px rgba(0,0,0,0.06);*/
 /*   box-shadow: 0px 1px 12px -1px rgba(0,0,0,0.06);*/
/*  border-radius: 10px;*/
	border: 1px solid #FAF5EF;
	background-color: #FAF5EF;
    margin-bottom: 20px;

}
body.alt .customer-profile-img{
    margin-bottom: 20px;
}
body.alt .customer-profile-img img{
    border: 1px solid #ECECED;
    border-radius: 50%;
    width: 86px;
}
body.alt .customer-profile-img strong{
    text-transform: uppercase;
    font-size: 12px;
    line-height: 14px;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}
body.alt .customer-profile-img strong a{
    color: #000;
}
body.alt .customer-profile-img strong a:hover{
    text-decoration: underline;
}
body.alt .customer-profile-img span{
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 12px;
    display: block;
    padding-right: 5px;
}
body.alt .customer-profile-info strong{
    font-size: 12px;
}
body.alt .customer-profile-desc{
    font-size: 12px;
}
body.alt .customer-profile-desc img{
    display: inline-block;
    max-width: 15px;
    vertical-align: middle;
    margin-top: -3px;
}
body.alt .customer-profile-desc span{
    display: inline-block;
    padding-left: 5px;
    max-width: 84%;
    vertical-align: middle;
}
body.alt .customer-profile-icons img{
    width: 23px;
}
body.alt .customer-profile-icons strong{
   font-size: 12px;
    color: #00214E;
}
body.alt .customer-profile-icons span{
    display: inline-block;
    padding: 5px;
    font-size: 12px;
    border-radius: 5px;
    font-weight: 600;
    color:#00214E
}
@media (min-width: 768px){
body.alt .customer-profile-icons img{
        width: 30px;
    }
body.alt .customer-profile-img{
        margin-bottom: 0;
    }
body.alt .customer-profile-icons strong{
        font-size: 14px;
    }
body.alt .customer-profile-icons span{
        font-size: 14px;
        background-color: #FAF5EF;
    }



}
/*--------------------------------*/
/*Customer orders page*/
/*--------------------------------*/
body.alt .customer-orders > h1,
body.alt .customer-orders > h2,
body.alt .customer-orders > h3{
    font-size: 20px;
    margin-bottom: 15px;
}
body.alt .customer-orders > div{
    margin-bottom: 40px;
}
body.alt .customer-profile-short{
    position: relative;
    padding: 10px;
    /*filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));*/
    border: 1px solid #FAF5EF;
    /*border-radius: 8px;*/
    background: #FAF5EF;
}
body.alt .customer-profile-long{
    position: relative;
    padding: 10px;
    border-radius: 0;
    background: #FAF5EF;
    margin-top: 5px;
}
body.alt .customer-order-time{
    position: absolute;
    top:15px;
    right: 21px;
    color:#262938;
    font-size: 10px;
    font-weight: 300;
}
body.alt .customer-profile-long ul{
    border-top:1px solid #ECECED;
    padding-top: 20px;
}
body.alt .customer-profile-long ul li{
    margin-bottom: 10px;
    border-bottom: none;
}
body.alt .customer-profile-long span{
    display: block;
    font-size: 10px;
}
body.alt .customer-profile-long strong{
    font-size: 14px;
    display: block;
}
body.alt .customer-profile-long p{
    font-size: 14px;
}
body.alt .customer-profile-long .form-check-label{
    font-size: 10px;
}
body.alt .form-check-label a{
    color: #DBC093!important;
}
body.alt .customer-profile-long .form-check-input:checked{
    background-color: #DBC093;
    border-color: #DBC093;
}
body.alt .btn-message-open{
    color: #ffffff;
    text-align: center;
    display: block;
    background: #DBC093;
    padding: 11px 0 10px 0;
    /*border-radius: 5px;*/
    transition: .3s;
}
body.alt .btn-message-open:hover{
    color: #ffffff;
    background: #DBC093;
}
body.alt .btn-message-open img{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    margin-right: 10px;
    margin-top: -5px;
}
body.alt .btn-message-open span{
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 12px;
}
body.alt .btn-message-close{
    color: #ffffff;
    text-align: center;
    display: block;
    background: #1D2225;
    padding: 11px 0 10px 0;
    /*border-radius: 5px;*/
    transition: .3s;
}
body.alt .btn-message-close:hover{
    color: #ffffff;
    background: #171b3b;
}
body.alt .btn-message-close img{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    margin-right: 10px;
    margin-top: -5px;
}
body.alt .btn-message-close span{
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 12px;
}
/*_______________________*/
/* Order page form */
/*----------------------*/
body.alt .order-form form{
    background: transparent;
    padding: 0;
}
body.alt .order-form form .form-control{
    font-size: 14px;
}
body.alt .order-form form label{
   	display: block;
    font-size: 14px;
    font-weight: 700;
}
body.alt .order-form form strong{
    display: block;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 10px;
}
body.alt .btn-form-edit{
    display: inline-block;
    margin-right: 5px;
    transition: .3s;
}
body.alt .btn-form-edit:hover{
    cursor: pointer;
    opacity: .6;
}
body.alt .btn-form-edit img{
    display: block;
    width: 29px;
}
body.alt .order-form form h3{
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}
body.alt .order-form form ul li,
body.alt .order-form form .row > div{
    font-size: 14px;
    font-weight: 600;
    border-bottom: none;
}
body.alt .order-form form .order-form-payment ul li,
body.alt .order-form form .order-form-payment .row > div{
    margin-bottom: 5px;
    padding-bottom: 5px;
}
body.alt .order-form-payment{
    padding: 15px 0 20px 0;
    border: 1px solid #C2C2C2;
    border-radius: 5px;
    margin: 0 2px;
}
body.alt .order-form-payment ul li span,
body.alt .order-form-payment .row > div span,
body.alt .order-form-payment ul li strong,
body.alt .order-form-payment .row > div strong{
    font-size: 14px;
    padding: 0 0 0 5px;
    border-bottom: 1px solid #D2E1FF;
}
body.alt .order-form-payment .row > div strong{
    font-weight: 700;
}
body.alt .order-form-payment ul li span,
body.alt .order-form-payment .row > div span{
    font-weight: 500;
}
body.alt .order-form-btns a,
body.alt .order-form-btns span{
    font-size: 14px;
    text-transform: uppercase;
}
body.alt .order-form-btns span:hover{
    cursor: pointer;
}
body.alt .order-form-btns img{
    width: 20px;
    display: inline-block;
    margin-right: 10px;
}
body.alt .order-form-btns span:hover img{
    filter: brightness(0) saturate(100%) invert(86%) sepia(8%) saturate(1001%) hue-rotate(330deg) brightness(94%) contrast(92%);
}
@media (min-width: 992px){
body.alt .profile-main-form span{
        margin-bottom: 0;
    }


}
@media (min-width: 1200px){
body.alt .btn-form-edit img{
        width: 30px;
    }



}
body.alt .form-control{
    border-radius: 0px;
}
/*----------------------------------*/
/* Profile- leistungen page */
/*----------------------------------*/
body.alt .profile-leistungen{
    margin-bottom: 30px;
}
body.alt .profile-leistungen-header{
    background: #DBC093;
    padding-top: 10px;
    padding-bottom: 10px;
    /*border-radius: 5px;*/
    margin-bottom: 25px;
}
body.alt .profile-leistungen-header strong{
   color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}
body.alt .leistungen-block-close{
    background: #F7F3F0;
    padding-top: 10px;
    padding-bottom: 10px;
    /*border-radius: 5px;*/
    margin-bottom: 5px;
}
body.alt .leistungen-block-close .btn-open-block{
    padding: 3px;
    transition: .3s;
}
body.alt .leistungen-block-close .btn-open-block:hover{
    cursor: pointer;
    opacity: .6;
}
body.alt .service-opened img{
    transition: .3s;
    transform: rotate(45deg);
}
body.alt .btn-open-block{
   transition: .3s;
}
body.alt .btn-open-block:hover{
    opacity: .6;
    cursor: pointer;
}
body.alt .profile-leistungen-block strong{
    font-size: 14px;
    color: #1D2225;
}
body.alt .block-open input{
    border-radius: 3px;
    border: 1px solid #DBC093;
    font-size: 14px;
    padding: 10px;
}
body.alt .leistungen-block-close input{
    border-radius: 3px;
    border: 1px solid #DBC093;
    font-size: 16px;
    padding: 10px;
}
body.alt .block-open input:focus{
    box-shadow: none;
    border: 1px solid #DBC093!important;
    outline: none;
}
body.alt .block-open input::-webkit-input-placeholder{ /* Edge */
    color: #9d9d9d!important;
    font-weight: 500;
    font-size: 14px;
}
body.alt .block-open input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
    font-weight: 500;
    color: #9d9d9d!important;
    font-size: 14px;
}
body.alt .block-open input::placeholder{
    font-weight: 500;
    color: #9d9d9d !important;
    font-size: 14px;
}
body.alt .leistungen-block-close input::-webkit-input-placeholder{ /* Edge */
    color: #9d9d9d!important;
    font-weight: 500;
    font-size: 16px;
}
body.alt .leistungen-block-close input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
    font-weight: 500;
    color: #9d9d9d!important;
    font-size: 16px;
}
body.alt .leistungen-block-close input::placeholder{
    font-weight: 500;
    color: #9d9d9d !important;
    font-size: 16px;
}
body.alt .btn-add-category span{
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    font-weight: 600!important;
}
body.alt .btn-add-category strong{
    font-size: 14px;
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
    color: #000000;
    transition: .3s;
}
body.alt .btn-add-category img{
    display: inline-block;
    margin-right: 8px;
}
body.alt .profile-leistungen-block .block-subcategory input{
    width: 98%;
    display: block;
    border: 1px solid #DBC093;
    outline: none;
}
body.alt .block-subcategory{
    position: relative;
}
body.alt .block-subcategory:before{
    content: '';
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left: 3px;
    width: 5px;
    height: 5px;
    background: #DBC093;
    border-radius: 50%;
    display: block;
    z-index: 1;
}
@media (min-width: 768px){
body.alt .block-subcategory:before{
        content: '';
        left: 7px;
        width: 6px;
        height: 6px;
        background: #DBC093;
    }


}
body.alt .none{
    display: none!important;
}
/*----------------------------------*/
/*---------Profile Gallery page-----*/
/*----------------------------------*/
body.alt .h-profile{
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
body.alt .profile-gallery-add{
    background: #FAF5EF;
    min-height: 200px
}
body.alt .profile-gallery-add img{
    display: block;
    margin: 0 auto;
}
body.alt .gallery-input span{
    font-size: 14px;
}
body.alt .block-media span{
    display: block;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    background: #ffffff;
    padding-top: 20px;
    padding-bottom: 20px;
}
/*--------------------------------*/
/*----------About me--------------*/
/*--------------------------------*/
body.alt .form-about-me textarea{
    resize: none;
}
/*--------------------------------*/
/*-----------About us  -----------*/
/*--------------------------------*/
body.alt .about-us{
    margin-top: 50px;

}
body.alt .about-us h1{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
}
body.alt .about-us h2{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 25px;
}
body.alt .about-us > div > div:first-child a{
    color: #000000;
    border-bottom: 1px solid #000000;
    transition: .3s;
}
body.alt .about-us > div > div:first-child a:hover{
    color: #DBC093;
    border-bottom: 1px solid #DBC093;
}
body.alt .about-us h3{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 25px;
}
body.alt .about-us p{
    font-size: 14px;
    color: #000000;
    text-align: justify;
}
/*--------------------------------*/
/*-----------404  -----------*/
/*--------------------------------*/
body.alt .text-404 h1{
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}
body.alt .text-404 strong{
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}
body.alt .toast{
    /*background-color: rgba(255,255,255,.95);*/
    background-color: #DBC093;
    color: #ffffff;
}
body.alt .toast-body{
    padding: 15px 20px;
}
body.alt .toast .btn-close{
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: .75;
    padding: 0 10px;
}
body.alt .min-h-350{
    min-height: 350px;
}
body.alt .min-h-650{
    min-height: 650px;
}
body.alt .input-error{
    border: 1px solid red!important;
}
body.alt .profile-gallery-covers div{
    position: relative;
}
body.alt .gallery-cover-delete,
body.alt .gallery-photo-delete{
    width: 30px;
    height: 30px;
    transition: .3s;
    position: absolute;
    top: 20px;
    right: 30px;
}
body.alt .gallery-cover-delete:hover,
body.alt .gallery-photo-delete:hover{
    opacity: .7;
    cursor: pointer;
}
body.alt .profile-customer-info{
    margin-top: 5rem;
    text-align: center;
}
body.alt .profile-customer-info-name{
    font-size: 24px;
}
body.alt .profile-customer-info-name a{
    color: #000000;
}
body.alt .profile-customer-info-category{
    font-size: 14px;
}
body.alt .profile-customer-info .btn-green{
    margin-bottom: 30px;
    margin-top: 30px;
}
body.alt .profile-additional-services{
    line-height: 16px;
}
body.alt .profile-additional-services p{
    font-size: 12px;
    margin-bottom: 0;
    font-weight: 400;
}
body.alt .profile-additional-services span{
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;

}
body.alt .profile-additional-services span:nth-of-type(2){
    position: relative;
    margin-left: 20px;
    padding-left: 10px;
}
body.alt .profile-additional-services span:nth-of-type(2):before{
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
    background: #DBC093;
    border-radius: 50%;
}
body.alt .embed-responsive{
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
body.alt .embed-responsive::before{
     display: block;
     content: "";
 }
body.alt .embed-responsive .embed-responsive-item,
body.alt .embed-responsive iframe,
body.alt .embed-responsive embed,
body.alt .embed-responsive object,
body.alt .embed-responsive video{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
body.alt .embed-responsive-16by9{
    padding-bottom: 56.25%;
}
body.alt .profile-user-services-info{

}
body.alt .profile-user-services-info p{
    font-weight: bold;
    margin-bottom: 0.5rem;
}
body.alt .profile-user-services-info ul{
    padding-left: 2rem;
}
body.alt .profile-user-services-info ul li{
    list-style: disc;
    border: 0;
    margin-bottom: 5px;
    font-size: 14px;
}
body.alt .profile-gallery-block > div > a > img{
    transition: .3s;
    opacity: 1;
}
body.alt .profile-gallery-block > div > a > img:hover{
    opacity: 0.8;
}
/*Modal User*/
body.alt #user-modal.modal-form .modal-content{
    background: #ffffff;
    color: #000000;
    padding: 0;
    border-radius: 10px;
    border: none;
    margin: 0 auto;
}
body.alt #user-modal.modal-form .modal-content .modal-header{
    background: #DBC093;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px 8px 0px 0px;
}
body.alt #user-modal.modal-form .modal-content .modal-body{
    padding: 20px;
}
body.alt #user-modal.modal-form .modal-content .modal-body textarea{
   resize: none;
}
body.alt #user-modal.modal-form .modal-title{
    font-size: 14px;
}
body.alt #user-modal.modal-form .modal-title img{
    display: inline-block;
    width: 25px;
    vertical-align: middle;
    margin-right: 10px;
}
@media (min-width: 576px){
body.alt #user-modal.modal-form .modal-content{
        width: 90%;
    }



}
@media (min-width:768px){
body.alt #user-modal.modal-form .modal-title{
        font-size: 22px;
    }
body.alt #user-modal.modal-form .modal-content{
        width: 100%;
    }
body.alt #user-modal.modal-form .modal-dialog{
        min-width: 600px;
    }
body.alt #user-modal.modal-form .modal-content .modal-body{
        padding: 30px;
    }
body.alt #user-modal.modal-form .modal-title img{
        width: 30px;
    }



}
@media (min-width:992px){
body.alt #user-modal.modal-form .modal-dialog{
        min-width: 800px;
    }
body.alt #user-modal.modal-form .modal-title{
        font-size: 22px;
    }



}
body.alt .user-modal .profile-main-form span{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
body.alt .user-modal .profile-main-form textarea{
    font-size: 14px;
    border-radius: 5px;
    padding: 13px 20px;
    height: 172px;
}
body.alt .user-modal .profile-main-form input{
    border-radius: 5px;
    padding: 13px 20px;
}
body.alt .user-modal .sending-info p{
    font-size: 14px;
}
body.alt .user-modal .profile-main-form input::-webkit-input-placeholder,
body.alt .user-modal .profile-main-form textarea::-webkit-input-placeholder{ /* Edge */
    font-size: 14px!important;
    color: #DBC093!important;
    font-weight: 600;
}
body.alt .user-modal .profile-main-form input:-ms-input-placeholder,
body.alt .user-modal .profile-main-form textarea::-webkit-input-placeholder{ /* Internet Explorer 10-11 */
    font-size: 14px!important;
    color: #DBC093!important;
    font-weight: 600;

}
body.alt .user-modal .profile-main-form input::placeholder,
body.alt .user-modal .profile-main-form textarea::-webkit-input-placeholder{
    font-size: 14px!important;
    color: #DBC093!important;
    font-weight: 600;
}
body.alt .down{
    padding-top:0;
}
body.alt .user-modal .profile-main-form input{
    border-radius: 5px;
    padding: 13px 20px;
}
body.alt .user-modal .form-check-input{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 5px!important;
    padding: 1px!important;
    width: 15px;
    height: 15px;
    background-color:transparent;
    border: 1px solid rgb(0,0,0)!important;
    vertical-align: middle;
    margin-top: 4px;
}
body.alt .user-modal .form-check-input:checked{
    background-color:transparent;
    border: 1px solid rgb(0,0,0)!important;
    border-radius: 5px;
}
body.alt .user-modal .form-check-input:focus{
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}
body.alt .user-modal .form-check-input:checked[type=checkbox]{
    background-image: url('/img/icons/icon-arrow.svg');
    background-color:rgb(0,0,0);
    background-size: 10px;
    transform: rotate(90deg);
}
body.alt .user-modal .form-check-label{
    color:#000000;
    margin-left: 10px;
    vertical-align: middle;
}
body.alt .user-modal #book-form-btn-send{
    margin-top: 40px;
}
body.alt .form-book-btns span:hover{
    cursor: pointer;
}
body.alt .user-modal .user-modal-select{
    font-size: 14px;
    border-radius: 5px;
    padding: 13px 20px;
}
body.alt .user-modal .user-modal-select option{
    font-size: 14px;
    border-radius: 5px;
    padding: 13px 20px;
}
@media (min-width:992px){
body.alt .down{
        padding-top: 68px;
    }


}
body.alt .user-order-form-wrap{
    background: #ffffff;
    padding: 20px;
    /*filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));*/
    border: 1px solid #FAF5EF;
    background-color: #FAF5EF;
    /*border-radius: 8px;*/
    font-size: 12px;
}
body.alt .user-order-form-wrap p{
    font-size: 12px;
}
body.alt .user-order-form-wrap-subtitle{
	font-style: italic;
    font-size: 10px !important;
}
body.alt .order-form-btns .btn-main{
    border-radius: 10px;
}
body.alt .user-order-form-wrap .btn-form-edit{
    margin-right: 0;
}
body.alt .close-form-btn{
    position: absolute;
    top: 18px;
    right: 20px;
    transition: .3s;
}
body.alt .close-form-btn:hover{
    cursor: pointer;
    opacity: .6;
}
body.alt .order-form-btns{

}
/*-------form location---------*/
body.alt .form-offer .form-offer-location li{
    margin-top: 5px;
}
body.alt .form-offer .form-offer-location span{
    font-size: 14px;
    font-weight: 500;
}
body.alt .form-offer-list{
    font-size: 12px;
}
body.alt .form-offer-invoice-list{
    font-size: 12px;
    border: 1px solid #1D2225;
    border-radius: 5px;
    padding: 15px;
    line-height: 22px;
}
body.alt .form-offer strong{
    font-size: 14px!important;
}
body.alt .form-offer ul li,
body.alt .form-offer .row > div{
    font-size: 14px!important;
    font-weight: 600;
    border-bottom: none;
}
body.alt #form-offer-date li{
    font-size: 12px!important;
}
body.alt .fsz-12{
    font-size: 12px !important;
}
body.alt .form-offer-payment{
    border: 1px solid transparent;
    border-top: 1px solid #1D2225;
    border-radius: 0;
    padding:10px 0 10px 10px;
    font-size: 12px!important;
}
body.alt .form-offer-payment strong,
body.alt .form-offer-payment span{
    font-size: 12px!important;
}
body.alt .form-offer .btn-message-open:hover img{
    filter:invert(5%) !important;
}
/* Chat */
body.alt #chat-block{
    background: #ffffff;
    padding: 0;
    -webkit-box-shadow: 0 1px 12px -1px rgba(0,0,0,0.06);
    -moz-box-shadow: 0 1px 12px -1px rgba(0,0,0,0.06);
    box-shadow: 0 1px 12px -1px rgba(0,0,0,0.06);
    border-radius: 10px 10px 0 0;
    position: fixed;
    right: 30px;
    bottom: 0;
    width: 320px;
}
body.alt #chat-title{
    background: #DBC093;
    border-radius: 10px 10px 0 0;
    color: #ffffff;
    display: block;
    margin-bottom: 10px;
    padding: 15px 10px;
}
body.alt #close-chat-btn{
    position: absolute;
    top: 15px;
    right: 15px;
    filter: invert(100%);
}
body.alt #chat-messages{
    margin: 15px 0;
    max-height: 400px;
    overflow:scroll;
    overflow-x:hidden;
    padding: 10px;
}
body.alt /*
#chat-messages::-webkit-scrollbar{
    width: 0.5em;
    height: 0.5em;
}
body.alt #chat-messages::-webkit-scrollbar-thumb{
    background-color: rgba(255,255,255,.1);
    border-radius: 3px;
}
body.alt */

#chat-messages::-webkit-scrollbar-track{
    border-radius: 10px;
    /*border: 1px solid black;*/
    background-color: #fff;
}
body.alt #chat-messages::-webkit-scrollbar{
    width: 5px;
    background-color: #fff;
}
body.alt #chat-messages::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #000000;
    margin-left: 15px;
}
body.alt .chat-input{
    padding: 0 10px 10px 10px;
}
body.alt #chat-message-text{
    background: #ffffff;
    border: 1px solid #DBC093;
    outline: none;
    border-radius: 3px;
    padding: 5px;
    width:79%;
}
body.alt #chat-message-text::placeholder{
    color: #C4C4C4!important;
}
body.alt #chat-form-submit{
    background-color: #DBC093;
    border-radius: 3px;
    color: #ffffff;
    cursor: pointer;
    float: right;
    display: inline-block;
    padding: 6px 10px;
    text-align: center;
    width:18%;
}
body.alt .chat-msg-from{
    margin-bottom: 10px;
    text-align: right;
}
body.alt .chat-msg-from > div:first-child{
    background-color: #DBC093;
    border-radius: 3px;
    color: #262938;
    display: inline-block;
    padding: 5px 10px;
    text-align: left;
    max-width: 80%;
}
body.alt .chat-msg-to{
    margin-bottom: 10px;
}
body.alt .chat-msg-to > div:first-child{
    background-color: #FAF5EF;
    border-radius: 3px;
    color: #262938;
    display: inline-block;
    padding: 5px 10px;
    max-width: 80%;
}
body.alt .chat-msg-from > div,
body.alt .chat-msg-to > div{
    font-size: 14px;
}
body.alt .chat-msg-from > div:last-child,
body.alt .chat-msg-to > div:last-child{
    color: #222;
    font-size: 10px;
    margin-top: 3px;
}
body.alt .payment-form-input{
    border: 1px solid rgba(229, 229, 230, 0.996);
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 3px 6px rgba(0, 0, 0, 0.02);
    padding: 10px 12px;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
}
body.alt .user-payment-sum{
	font-size:16px;
	text-transform:uppercase;
	font-weight:600;
}
body.alt /*
.chat-msg-from{
    margin-bottom: 10px;
    text-align: right;
    width: 100%;
}
body.alt .chat-msg-from > span:first-child{
    background-color: #DBC093;
    border-radius: 3px;
    color: #fff;
    padding: 5px;
}
body.alt .chat-msg-to{
    text-align: left;
    margin-bottom: 10px;
    width: 100%;
}
body.alt .chat-msg-to > span:first-child{
    background-color: #121626;
    border-radius: 3px;
    color: #fff;
    padding: 5px;
}
body.alt .chat-msg-from > span,
body.alt .chat-msg-to > span{
    display: inline-block;
    font-size: 14px;
    max-width: 60%;
}
body.alt .chat-msg-from > span{
    margin: 0 0 0 auto;
}
body.alt */

.dropdown-menu{
    border: 0;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
    padding: 0;
}
body.alt .dropdown-menu li a{
    border-bottom: 1px solid #FAF5EF;
    font-size: 12px;
    padding: 8px 10px;
}
body.alt .dropdown-menu li:last-child a{
    border: 0;
}
body.alt .messages-dialog-items{
    background-color: #ffffff;
}
body.alt .messages-dialog-item{
    border-bottom: 1px solid #FAF5EF;
    padding: 5px 10px;
    transition: .3s;
}
body.alt .messages-dialog-item:hover{
    background-color: #FAF5EF;
    cursor: pointer;
}
body.alt .messages-dialog-item-active{
    background-color: #FAF5EF;
}
body.alt .messages-dialog-item:last-child{
    border: 0;
}
body.alt .messages-dialog-item > div{
    padding: 0;
}
body.alt .messages-dialog-item > div:last-child{
    padding-left: 10px;
}
body.alt .messages-dialog-item img{
    border-radius: 50%;
}
body.alt .messages-dialog-item span{
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}
body.alt .messages-dialog-item p{
    font-size: 12px;
    margin: 0 0 3px 0;
    padding: 0;
}
body.alt .messages-dialog-item-date{
    font-size: 10px!important;
    text-align: right;
    margin: 0!important;
}
body.alt .messages-dialog-chat > div{
    /*border-radius: 8px;*/
    background-color: #ffffff;
    /*filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));*/
    border: 1px solid #FAF5EF;
    padding: 15px;
}
body.alt .brb-0{
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;
}
body.alt .brt-0{
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
}
body.alt .h-500{
    height: 500px!important;
}
/* Cancel order modal */
body.alt #order-cancel-modal .modal-content,
body.alt .cancel-modal .modal-content{
    background: #1D2225;
    color: #ffffff;
    padding: 25px 35px 30px 35px;
    border-radius: 0px;
    border: 0;
}
body.alt #order-cancel-modal .modal-header,
body.alt .cancel-modal .modal-header{
    border: 0;
    margin-bottom: 30px;
    font-size: 18px;
    font-family: 'ArsenicaTrial';
    text-transform: uppercase;
}
body.alt #order-cancel-modal .modal-body,
body.alt .cancel-modal .modal-body{
    margin-bottom: 30px;
}
body.alt #order-cancel-modal .modal-body p:last-child,
body.alt .cancel-modal .modal-body p:last-child{
    font-size: 14px;
    margin-bottom: 0;
}
body.alt #order-cancel-modal .modal-footer,
body.alt .cancel-modal .modal-footer{
    border: 0;
    padding: 0;
}
body.alt #order-cancel-modal .modal-footer .btn-primary,
body.alt .cancel-modal .modal-footer .btn-primary{
    border: 1px solid #DBC093;
    padding: 10px 20px;
    background: #DBC093;
    font-size: 12px;
    color: #000000;
    display: inline-block;
    border-radius: 0px;
    text-align: center;
    vertical-align: middle;
    transition: .3s;
    font-family: 'ArsenicaTrial';
    text-transform: uppercase;
}
body.alt #order-cancel-modal .modal-footer .btn-primary:hover,
body.alt #order-cancel-modal .modal-footer .btn-primary:active,
body.alt #order-cancel-modal .modal-footer .btn-primary:focus,
body.alt .cancel-modal .modal-footer .btn-primary:hover,
body.alt .cancel-modal .modal-footer .btn-primary:active,
body.alt .cancel-modal .modal-footer .btn-primary:focus{
    color: #DBC093;
    background: transparent;
    border: 1px solid #DBC093;
    cursor: pointer;
}
body.alt #order-cancel-modal .modal-footer .btn-secondary,
body.alt .cancel-modal .modal-footer .btn-secondary{
    border: 1px solid #ffffff;
    padding: 10px 20px;
    background: #ffffff;
    font-size: 12px;
    color: #000000;
    display: inline-block;
    border-radius: 0px;
    text-align: center;
    vertical-align: middle;
    transition: .3s;
    font-family: 'ArsenicaTrial';
    text-transform: uppercase;
}
body.alt #order-cancel-modal .modal-footer .btn-secondary:hover,
body.alt #order-cancel-modal .modal-footer .btn-secondary:active,
body.alt #order-cancel-modal .modal-footer .btn-secondary:focus,
body.alt .cancel-modal .modal-footer .btn-secondary:hover,
body.alt .cancel-modal .modal-footer .btn-secondary:active,
body.alt .cancel-modal .modal-footer .btn-secondary:focus{
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    outline: 0;
}
body.alt #order-cancel-modal .btn-close,
body.alt .cancel-modal .btn-close{
    filter: invert(100%);
}
body.alt #payment-message{
    border: 1px solid red;
    border-radius: 5px;
    padding: 15px;
    margin-top: 20px;
    background: #FAE5DD;
    color: red;
    font-size: 14px;
}
body.alt .alert-dismissible .close{
    position: absolute;
    top: 0;
    right: 0;
    padding: 16px;
    color: inherit;
}
body.alt button.close{
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
}
body.alt .close{
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
body.alt .payments-table{
    border-spacing: 0;
    border-collapse: separate;
}
body.alt .payments-table thead th{
    border: 0;
    padding: 15px;
}
body.alt .payments-table tbody tr:nth-child(odd){
    background: #ffffff;
   /* -webkit-box-shadow: 0 1px 12px -1px rgba(0,0,0,0.06);*/
   /* -moz-box-shadow: 0 1px 12px -1px rgba(0,0,0,0.06);*/
   /* box-shadow: 0 1px 12px -1px rgba(0,0,0,0.06);*/
    border-radius: 5px;
}
body.alt .table>:not(:first-child){
    border-top: 2px solid transparent;
}
body.alt .payments-table td{
    border: 0;
    border-collapse: collapse;
    padding: 15px;
}
body.alt .payments-table tr td:first-child{ border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
body.alt .payments-table tr td:last-child{ border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
body.alt .payments-table tr:first-child td{ border-top-style: solid; }
body.alt .payments-table tr td:first-child{ border-left-style: solid; }
body.alt .profile-icon{
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: .3s;
    margin-left: 15px;
}
body.alt .profile-icon img{
    width: 20px;
    height: 20px;
    display: block;
    margin: 0 auto;
    position: absolute;
    top:50%;
    left: 50%;
    transition: .3s;
    transform: translate(-50%,-60%) perspective(1px) translateZ(0);
}
body.alt .profile-icon:hover:after,
body.alt .profile-icon.active:after{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top:50%;
    left: 50%;
    background: url('/img/icons/profile-icon-heart-full.svg') no-repeat;
    background-size: contain;
    transform: translate(-50%,-60%) perspective(1px) translateZ(0)!important;
    transition: .3s;
}
body.alt .profile-gallery-add-block .form-control{
    font-size: 14px;
}
body.alt #loader{
    background-color: rgba(76, 88, 191, 0.25);
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 999;
}
body.alt #loader span{
    display: block;
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #DBC093;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Safari */
@-webkit-keyframes spin{
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@media (max-width: 767px){
body.alt .product-type a:first-child{
        margin: 0;
        display: block;
    }
body.alt .product-type a:first-child:after{
        display: none;
    }


}
body.alt #main-profile-city-list{
    display: none;
    background: #ffffff;
    border-radius: 0.25rem;
    -webkit-box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    -moz-box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    position: absolute;
    top: 40px;
    left: 2px;
    border: 1px solid #DBC093;
    width: 99%;
    z-index: 1;
}
body.alt #main-profile-city-list li{
    display: block;
    padding: 0.375rem 0.75rem;
    width: 100%;
    font-weight: normal;
    border-bottom: 1px solid #eeeeee;
}
body.alt #main-profile-city-list li:last-child{
    border-bottom: 0;
}
body.alt #main-profile-city-list li:hover{
    background: #DBC093!important;
    color: #ffffff!important;
    cursor: pointer;
}
body.alt .empty-block{
    background: #ffffff;
    padding: 10px;
    -webkit-box-shadow: 0px 1px 12px -1px rgba(0,0,0,0.06);
    -moz-box-shadow: 0px 1px 12px -1px rgba(0,0,0,0.06);
    box-shadow: 0px 1px 12px -1px rgba(0,0,0,0.06);
    border-radius: 10px;
    min-height: 350px;
    text-align: center;
}
body.alt .empty-block span{
    background-color: #DBC093;
    border-radius: 5px;
    padding: 8px 12px;
    display: inline-block;
    margin-bottom: 10px;
}
body.alt .empty-block span img{
    height: 18px;
}
body.alt .empty-block-without-bg{
    padding: 10px;
    min-height: 350px;
    text-align: center;
}
body.alt .empty-block-without-bg span{
    background-color: #DBC093;
    border-radius: 5px;
    padding: 8px 12px;
    display: inline-block;
    margin-bottom: 10px;
}
body.alt .empty-block-without-bg span img{
    height: 18px;
}
/* Rating modal */
body.alt #bookings-rating-modal .modal-content{
    background: #1D2225;
    color: #ffffff;
    padding: 25px 35px 30px 35px;
    border-radius: 0px;
    border: 0;
}
body.alt #bookings-rating-modal .modal-header{
    border: 0;
    margin-bottom: 30px;
    font-size: 18px;
    font-family: 'ArsenicaTrial';
    text-transform: uppercase;
}
body.alt #bookings-rating-modal .modal-body{
    margin-bottom: 30px;
}
body.alt #bookings-rating-modal .modal-body p{
    font-size: 14px;
    margin-bottom: 5px;
}
body.alt #bookings-rating-modal .modal-footer{
    border: 0;
    padding: 0;
}
body.alt #bookings-rating-modal .modal-footer .btn-primary{
    border: 1px solid #DBC093;
    padding: 10px 20px;
    background: #DBC093;
    font-size: 12px;
    color: #000000;
    display: inline-block;
    border-radius: 0px;
    text-align: center;
    vertical-align: middle;
    transition: .3s;
    font-family: 'ArsenicaTrial';
    text-transform: uppercase;
}
body.alt #bookings-rating-modal .modal-footer .btn-primary:hover,
body.alt #bookings-rating-modal .modal-footer .btn-primary:active,
body.alt #bookings-rating-modal .modal-footer .btn-primary:focus{
    color: #DBC093;
    background: transparent;
    border: 1px solid #DBC093;
    cursor: pointer;
}
body.alt #bookings-rating-modal .modal-footer .btn-secondary{
   border: 1px solid #ffffff;
    padding: 10px 20px;
    background: #ffffff;
    font-size: 12px;
    color: #000000;
    display: inline-block;
    border-radius: 0px;
    text-align: center;
    vertical-align: middle;
    transition: .3s;
    font-family: 'ArsenicaTrial';
    text-transform: uppercase;
}
body.alt #bookings-rating-modal .modal-footer .btn-secondary:hover,
body.alt #bookings-rating-modal .modal-footer .btn-secondary:active,
body.alt #bookings-rating-modal .modal-footer .btn-secondary:focus{
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    outline: 0;
}
body.alt #bookings-rating-modal .btn-close,
body.alt .cancel-modal .btn-close{
    filter: invert(100%);
}
body.alt .booking-rating-stars div img{
    width: 25px;
}
body.alt .profile-review-block{
    padding-top: 5px;
    padding-bottom: 5px;
}
body.alt .profile-review-block-title img{
    border-radius: 50%;
    margin-right: 8px;
    width: 24px;
}
body.alt .profile-review-block-rating{
    margin-top: 10px;
    margin-bottom: 15px;
}
body.alt .profile-review-block-rating img{
    width: 20px;
}
body.alt .profile-review-block-text{
    text-align: justify;
}
body.alt .filter-block{
    text-align: left;
    /*background: #ffffff;
    border-radius: 8px;
    padding: 15px;
    -webkit-box-shadow: 0px 11px 33px 0px rgba(243,243,243,1);
    -moz-box-shadow: 0px 11px 33px 0px rgba(243,243,243,1);
    box-shadow: 0px 11px 33px 0px rgba(243,243,243,1);*/
}
body.alt .filter-block span{
    font-size: 14px;
    font-weight: 700;
}
body.alt .filter-block select{
    border: 1px solid #DBC093;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 15px;
    margin-top: 5px;
    width: 100%;
}
body.alt .filter-block select:last-child{
    margin-bottom: 0;
}
body.alt .filter-block select:active,
body.alt .filter-block select:focus{
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}
body.alt .filter-rating{
    margin-top: 5px;
    margin-bottom: 15px;
}
body.alt .filter-rating img{
    width: 24px;
}
body.alt #filter-sorting{
    border: 1px solid #DBC093;
	/* border-radius: 5px; */
	padding: 8px;
	margin-bottom: 15px;
	margin-top: 5px;
	color: black;
}
body.alt .cke{
    border-radius: 8px 8px 0 0;
}
body.alt .cke_inner{
    background: transparent!important;
}
body.alt .cke_top{
    background: transparent!important;
}
body.alt .order-agreement-checkbox input{
    float: left;
    margin: 0 7px 40px 0;
}
body.alt .order-agreement-checkbox label{
    font-size: 11px!important;
    display: inline-block;
}
body.alt .order-agreement-checkbox label a{
    color: #000000;
    text-decoration: underline;
}
body.alt .order-agreement-checkbox label a:hover{
    color: #DBC093;
}
body.alt .profile-agreement-block p{
    text-align: justify;
}
body.alt .profile-agreement-block ul{
    margin-bottom: 1rem;
    padding-left: 2rem;
}
body.alt .profile-agreement-block ul li{
    border-bottom: none;
    list-style: disc;
}
body.alt #book-form-place-city-list,
body.alt #book-form-city-list{
    display: none;
    background: #ffffff;
    border-radius: 0.25rem;
    -webkit-box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    -moz-box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    box-shadow: 1px 0 14px -4px rgba(0,0,0,0.13);
    position: absolute;
    top: 52px;
    left: 2px;
    border: 1px solid #DBC093;
    width: 98%;
    z-index: 100;
    padding-left: 0;
}
body.alt #book-form-place-city-list li,
body.alt #book-form-city-list li{
    font-size: 13px;
    display: block;
    padding: 0.375rem 0.75rem;
    width: 100%;
    font-weight: normal;
    border-bottom: 1px solid #eeeeee;
}
body.alt #book-form-place-city-list li:last-child,
body.alt #book-form-city-list li:last-child{
    border-bottom: 0;
}
body.alt #book-form-place-city-list li:hover,
body.alt #book-form-city-list li:hover{
    background: #DBC093!important;
    color: #ffffff!important;
    cursor: pointer;
}
body.alt .send-to-moderation-btn,
body.alt .send-to-moderation-inactive-btn{
    display: block;
    text-align: center;
    width: 100%;
}
body.alt .send-to-moderation-text{
    font-size: 12px;
    margin-top: 15px;
    text-align: center;
}
body.alt .menu-categories{
    display: none;
}
@media (min-width:768px){
body.alt .menu-categories{
        display: flex;
    }
body.alt .menu-categories a{
        display: inline-block;
        color: #ffffff;
        font-size: 10px;
        padding: 0 4px;
        transition: .3s;
    }
body.alt .menu-categories a:hover{
       text-decoration: none;
        color: #DBC093;
    }



}
@media (min-width:992px){
body.alt .menu-left-side{ /*DELETE IF CHANGING ON BLOCK SEARCH*/

    }
body.alt .menu-categories{ /*DELETE IF CHANGING ON BLOCK SEARCH*/

    }



}
@media (min-width:1024px){
body.alt .on-1024{
        display: inline-block!important;
    }



}
@media (min-width:1200px){
body.alt .menu-categories a{
        padding: 0 3px;
        font-size: 12px;
    }


}
@media (min-width:1400px){
body.alt .logo{
       width: 118px;
    }
body.alt .menu-categories a{
        padding: 0 8px;
        font-size: 13px;
    }


}
@media (min-width:1600px){
body.alt .menu-categories a{
        padding: 0 15px;
    }
body.alt .logo{
        width: 180px;
    }



}
@media (min-width:1700px){
body.alt .menu-categories a{
        padding: 0 18px;
    }


}
@media (min-width:1820px){



}
@media (min-width:1920px){
body.alt .menu-categories a{
        padding: 0 20px;
    }


}
body.alt #landing-slide > div{
    background: #DBC093;
    padding-bottom: 45px;
}
body.alt #landing-slide > div .main-slider-left h1{
    font-weight: 600;
    margin-bottom: 30px;
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    line-height: normal;
    margin-top: 25px;
}
body.alt #landing-slide > div .main-slider-left p{
    margin-bottom: 30px;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 177%;
}
body.alt .btn-registration-img{
    width: 45px!important;
    height: 45px!important;
    margin-left:0 !important;
}
body.alt .btn-landing-slider{
    background: #ffffff;
    color:#DBC093;
    border: 2px solid transparent;
}
body.alt .btn-landing-slider:hover{
    background:#DBC093;
    color:#ffffff;
    border: 2px solid #ffffff;
}
body.alt .main-slider-left h1{
    font-weight: 600;
    margin-bottom: 30px;
}
body.alt .main-slider-left p{
    font-size: 16px;
    margin-bottom: 50px;
}
@media (max-width:767px){
body.alt .main-slider-left h1,
body.alt #landing-slide > div .main-slider-left h1{
        font-size: 24px;
    }


}
@media (min-width:768px){
body.alt .main-slider-left h1,
body.alt #landing-slide > div .main-slider-left h1{
        font-size: 32px;
    }
body.alt .main-slider-left{
        margin-bottom: 40px;
    }
body.alt #landing-slide > div{
        padding-bottom: 0;
    }


}
@media (min-width:992px){
body.alt .main-slider-left h1,
body.alt #landing-slide > div .main-slider-left h1{
        font-size: 28px;
    }
body.alt #landing-slide > div{
        padding-top: 40px;
    }



}
@media (min-width:1200px){
body.alt .main-slider-left h1,
body.alt #landing-slide > div .main-slider-left h1{
        font-size: 32px;
    }
body.alt #landing-slide > div{
        padding-top: 45px;
    }
body.alt .main-slider-left h1{
        font-size: 36px;
    }
body.alt .main-slider-left p{
        margin-bottom: 50px;
    }




}
@media (min-width:1400px){
body.alt .main-slider-left h1,
body.alt #landing-slide > div .main-slider-left h1{
        font-size: 36px;
    }


}
body.alt .carousel-indicators [data-bs-target]{
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    margin-left: 8px;
    opacity: 1;
}
body.alt .carousel-indicators .active{
    background-color: #ffffff;
}
body.alt #accept-cookies-block{
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 999;
}
body.alt #accept-cookies-block div{
    background-color: #1D2225;
    display: block;
    /* border-radius: 15px; */
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 480px;
    padding: 30px;
}
body.alt #accept-cookies-block div p{
	
	font-weight:200;
}
body.alt #accept-cookies-block div a{
	color: #DBC093;
}
@media (max-width:767px){
body.alt #accept-cookies-block div{
        font-size: 13px;
        width: 92%;
    }


}
@media (min-width:767px) and (max-width:991px){
body.alt #accept-cookies-block div{
        width: 80%;
    }


}
body.alt .accept-cookies{
    text-align: center;
    display: block;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 100%;
}
body.alt .decline-cookies{
    text-align: center;
    display: block;
    width: 100%;
}
body.alt .decline-cookies:hover{
    cursor: pointer;
    text-decoration: underline;
}
body.alt .page-404{
    position: relative;
    background: url('/img/design/img-404.jpg') no-repeat;
    background-size: cover;
    min-height: 300px;
    margin-bottom: 40px;
}
body.alt .text-404 h1{
    color: #FFF;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-align: center;
    margin-bottom: 20px;
}
body.alt .text-404 strong{
    color: #FFF;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    font-size: 14px;
    font-weight: normal;
    display: block;
    text-align: center;
}
@media (min-width:768px){
body.alt .text-404{
        width: 80%;
    }
body.alt .text-404 h1{
        font-size: 34px;
    }
body.alt .text-404 strong{
        font-size: 16px;

    }


}
@media (min-width:992px){
body.alt .page-404{
        min-height: 500px;
    }
body.alt .text-404{
        margin-bottom: 70px;
        width: 60%;
    }
body.alt .text-404 h1{
        text-align: left;
    }
body.alt .text-404 strong{
        text-align: left;
    }



}
@media (min-width:1200px){
body.alt .page-404{
        margin-bottom: 90px;
        min-height: 700px;
    }
body.alt .text-404{
        width: 55%;
    }



}
body.alt .invoice-footer-details span{
    display: block;
}
body.alt .invoice-footer-details span:last-child{
    margin-top: 15px;
}
body.alt #invoice-details{
    width: 100%;
}
@media (max-width:575px){
body.alt #profile-bg-image{
        display: none;
    }
body.alt .personal-page{
        margin-top: 60px;
    }


}
@media (min-width:767px) and (max-width:991px){
body.alt .profile-menu-top a{
        font-size: 12px;
    }


}
body.alt .offcanvas-header{
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    filter: invert(100%);
}
body.alt .offcanvas-body{
    padding: 0!important;
    background: #24292D;
}
body.alt .menu-xs-header{
    background: #24292D;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}
body.alt .menu-xs-header img{
    display: block;
    width: 120px;
    margin-bottom: 10px;
}
body.alt .menu-xs-header span{
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    display: block;
    text-align: left;
}
body.alt .menu-xs-home{
    padding: 18px 20px;
}
body.alt .menu-xs-home:hover{
    text-decoration: none;
    color: #DBC093;
}
body.alt .menu-xs-home:hover strong{
    color: #DBC093;
    text-decoration: none;
}
body.alt .menu-xs-home strong{
    color: #DBC093;
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    display: block;
    line-height: 100%;
    text-align: center;
}
body.alt .menu-xs-home img{
    width: 20px;
    display: block;
    margin-left: 15px;
    margin-top: -3px;
}
body.alt .menu-xs-body{
    text-align: left;
}
body.alt .menu-xs-body ul{
    margin: 0;
    padding-left: 0;
}
body.alt .menu-xs-body > ul > li{
    list-style: none;
    padding: 15px 20px;
    text-align: center;
}
body.alt .menu-xs-body > ul > li > strong{
    color: #ffffff;
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%
}
body.alt .menu-xs-body > ul > li > a{
    color: #ffffff;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-decoration: none;
}
body.alt .menu-xs-body > ul > li > ul{
    margin-top: 10px;
}
body.alt .menu-xs-body > ul > li > ul > li{
    list-style: none;
}
body.alt .menu-xs-body > ul > li > ul > li > a{
    padding-top: 12px;
    padding-bottom: 12px;
    color: #121626;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    display: block;
}
body.alt .menu-xs-body > ul > li > ul > li > a:hover{
    display: block;
    color: #DBC093;
    text-decoration: none;
    line-height: 100%;
}
@media (max-width:767px){
body.alt #filter-category-name{
        display: block;
        width: 100%;
    }
body.alt #filter-sorting{
        display: block;
        width: 100%;
    }
body.alt .filter-block{
        margin-bottom: 30px;
    }
body.alt .filter-btn{
        display: block;
        margin-bottom: 15px;
        width: 100%;
    }


}
@media (max-width:420px){
body.alt .profile-main-form span{
        font-size: 12px;
    }


}
body.alt .profile-moderation-block{
    background-color: #BCB9B9;
    color: #ffffff;
    font-size: 12px;
    padding: 20px 24px;
    margin-bottom: 15px;
    position: relative;
    text-align: center;
    border-radius: 5px;
}
body.alt .profile-moderation-block img{
    display: inline-block;
    position: absolute;
    top: 8px;
    right: 8px;
}
body.alt .profile-moderation-block span{
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
}
body.alt .profile-moderation-block span a{
    color: #FFFFFF;
    text-decoration: underline;
}
body.alt .profile-moderation-block-ok{
    background: #1D2225;
    position: relative;
}
body.alt .profile-moderation-block-ok:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
    background: url('/img/icons/icon-moderation-check.svg') no-repeat;
    background-size: cover;
    width: 13px;
    height: 13px;
}
body.alt .profile-moderation-block img,
body.alt .profile-moderation-block-ok img{
    vertical-align: sub;
    width: 16px;
}
body.alt .profile-moderation-block-arrow{
    height: 22px;
}
body.alt .profile-moderation-block-arrow img{
    margin-top: 7px;
    transform: translateY(-50%) rotate(90deg);
    width: 22px;
}
body.alt .send-to-moderation-btn{
    color: #ffffff;
    background: #5DB94F;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 5px;
    transition: .3s;
}
body.alt .send-to-moderation-btn:hover{
    cursor: pointer;
    background: #41da2a;
}
body.alt .send-to-moderation-inactive-btn{
    color: #ffffff;
    background-color: #BCB9B9;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 5px;
    transition: .3s;
}
@media (min-width:1200px){
body.alt .profile-moderation-block{
        padding: 20px 30px;
    }
body.alt .profile-moderation-block-ok:before{
        left: 11px;
        width: 17px;
        height: 17px;
    }



}
body.alt .landing-block{
    margin-top: 50px;
    border: 2px solid #DBC093;
    padding: 30px 30px 100px 30px ;
    position: relative;
}
body.alt .landing-block h2{
    color: #000;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    display: block;
    margin-bottom: 30px;
}
body.alt .landing-block p{
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 240%;
    text-align: justify;
}
body.alt .with-flowers{
    position: relative;
}
body.alt .with-flowers:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    background: url('/img/icons/icon-flower.svg') center no-repeat;
    background-size: cover;
    width: 120px;
    height: 100px;
    transform: translateX(-50%);
}
body.alt .landing-video-block{
    margin-top: 70px;
}
body.alt .landing-video-header{
    color: #000;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    display: block;
    margin-bottom: 30px;
}
body.alt .landing-video-block ul{
    margin: 0;
    padding: 0;
}
body.alt .landing-video-block ul li{
    margin-bottom: 10px;
    list-style: none;
    position: relative;
    padding-left: 10px;
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 260%
}
body.alt .landing-video-block ul li:before{
    content: '';
    position: absolute;
    top: 17px;
    left: 0;
    background: #000000;
    border-radius: 50%;
    width: 2px;
    height: 2px;
}
body.alt .landing-video-block li strong{
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}
body.alt .landing-video-btn{
    margin-top: 30px;
}
body.alt .landing-video-btn h3,
body.alt .landing-video-btn h4{
    color: #000;
    display: block;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}
body.alt .landing-video-btn .btn-main{
    margin-top: 30px;
}
body.alt .landing-block-one-flower{
    margin-top: 170px;
}
body.alt .landing-block-one-flower:before{
    content: '';
    position: absolute;
    background: url('/img/icons/icon-flower.svg') bottom center no-repeat;
    background-size: cover;
    width: 120px;
    height: 100px;
    top:0;
    left: 0;
    transform: translateY(-100%);
}
body.alt .landing-products{
    margin-top: 70px;
}
body.alt .landing-products-header strong{
    color: #000;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: block;
}
body.alt .landing-products-header h2{
    color: #000;
    text-align: center;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: block;
    text-transform: uppercase;
}
body.alt .landing-products-header p{
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 260%;
    text-align: justify;
    margin-top: 20px;
}
body.alt .landing-info{
    margin-top: 70px;
}
body.alt .landing-info-header h2,
body.alt .landing-info-header h3{
    color: #000;
    text-align: center;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: block;
    text-transform: uppercase;
}
body.alt .landing-info-header p{
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 260%;
    text-align: justify;
    margin-top: 20px;
}
body.alt .landing-info .row{
    margin-top: 40px;
}
body.alt .landing-info-img img{
    display: block;
    margin: 0 auto;
}
body.alt .landing-text-block{
    margin-top: 70px;
}
body.alt .landing-text-block h2{
    color: #000;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: block;
    text-transform: uppercase;
}
body.alt .landing-text-block p{
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 260%;
    text-align: justify;
    margin-top: 20px;

}
body.alt .landing-text-row{
    margin-top: 60px;
}
body.alt .landing-text-row h3{
    margin-top: 30px;
    display: block;
    color: #000;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}
body.alt .landing-text-row{
    margin-top: 60px;
}
body.alt .landing-text-row img{
    display: block;
    margin: 0 auto;
    width: 100px;
}
body.alt .landing-text-row > div{
    margin-bottom: 30px;
}
body.alt .landing-block-decoration{
    margin-top: 50px;
    border: 2px solid #DBC093;
    padding: 30px 15px 100px 15px ;
    position: relative;
}
body.alt .landing-block-decoration > h2{
    text-transform: uppercase;
}
body.alt .landing-block-decoration p{
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 240%;
    text-align: justify;
    margin-top: 20px;
}
body.alt .landing-block-decoration p span{
    font-weight: 500;
    display: block;
}
body.alt .landing-block-decoration:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    background: url('/img/icons/icon-flower.svg') center no-repeat;
    background-size: cover;
    width: 120px;
    height: 100px;
    transform: translateX(-50%);
}
body.alt .landing-more{
    display: inline-block;
    border-bottom: 1px solid #DBC093;
    color: #DBC093;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
}
body.alt .landing-more:hover{
   cursor: pointer;
}
body.alt .lp-text-show{
    display: inline!important;
}
body.alt .lp-text-hide{
    display: none!important;
}
@media (min-width:768px){
body.alt .landing-block{
        padding: 50px 50px 100px 50px;
    }
body.alt .landing-block p{
        line-height: 260%;
    }
body.alt .with-flowers:before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 30px;
        background: url('/img/icons/icon-flower.svg') center no-repeat;
        background-size: cover;
        width: 150px;
        height: 120px;
        transform: translateX(0);
    }
body.alt .with-flowers:after{
        content: '';
        position: absolute;
        bottom: 0;
        right: 30px;
        background: url('/img/icons/icon-flower.svg') center no-repeat;
        background-size: cover;
        width: 150px;
        height: 120px;
        transform: scale(-1,1);
    }
body.alt .landing-block-decoration:before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 30px;
        background: url('/img/icons/icon-flower.svg') center no-repeat;
        background-size: cover;
        width: 150px;
        height: 120px;
        transform: translateX(0);
    }
body.alt .landing-block-decoration p span{
        font-weight: 500;
    }
body.alt .landing-block-one-flower:before{
        width: 150px;
        height: 120px;
        left: 25%;
        transform: translateY(-100%);
    }
body.alt .landing-products{
        margin-top: 100px;
    }
body.alt .landing-info{
        margin-top: 100px;
    }
body.alt .landing-text-block{
        margin-top: 100px;
    }
body.alt .landing-products-header p{
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
body.alt .landing-info-header p{
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
body.alt .landing-text-block p{
        text-align:center;
    }
body.alt .landing-text-row h3{
        font-size: 16px;
    }
body.alt .landing-block-decoration{
        margin-top: 60px;
        padding: 40px 48px 90px 48px;
    }



}
@media (min-width:992px){
body.alt .landing-block p{
        text-align: center;
    }
body.alt .landing-more{
        display: none;
    }


}
@media (min-width:1200px){
body.alt .landing-block{
        padding: 60px 80px 110px 80px;
    }
body.alt .landing-block h2{
        font-size: 32px;
    }
body.alt .with-flowers:before{
        width: 170px;
        height: 150px;
        left: 30px;
    }
body.alt .with-flowers:after{
        width: 170px;
        height: 150px;
        right: 30px;
    }
body.alt .landing-video-header{
        font-size: 32px;
    }
body.alt .landing-products-header h2{
        font-size: 32px;
        text-transform: uppercase;
    }
body.alt .landing-info-header h2,
body.alt .landing-info-header h3{
        font-size: 32px;
        text-transform: uppercase;
    }
body.alt .landing-text-block h2{
        font-size: 32px;
        text-transform: uppercase;
    }
body.alt .landing-text-row h3{
        font-size: 20px;
        text-transform: uppercase;
    }
body.alt .landing-block-decoration{
        padding: 60px 205px 40px 205px;
    }


}
body.alt .status-online{
    background-color: #5DB94F;
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: block;
    height: 18px;
    width: 18px;
    position: absolute;
    left: 61%;
    bottom: -7px;
    z-index: 2;
}
body.alt .status-offline{
    background-color: #aaa;
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: block;
    height: 18px;
    width: 18px;
    position: absolute;
    left: 61%;
    bottom: -7px;
    z-index: 2;
}
body.alt .profile-video-icon{
    position: absolute;
    width: 48px;
    height: 48px;
    bottom: -20px;
    right: 24%;
    z-index: 2;
    transition: .3s;
    will-change: transform;
     transition: .3s;
  	border-radius: 50%;
  	animation: pulseShadow 5s infinite;
}
body.alt .profile-video-icon:hover{
    cursor: pointer;
    transform: scale(1.1);
}
@media (min-width:370px){
body.alt .profile-video-icon{
        right: 28%;
    }


}
@media (min-width:400px){
body.alt .profile-video-icon{
        right: 30%;
    }


}
@media (min-width:450px){
body.alt .profile-video-icon{
        right: 35%;
    }


}
@media (min-width:500px){
body.alt .profile-video-icon{
        right: 35%;
    }


}
@media (min-width:550px){
body.alt .profile-video-icon{
        right: 36%;
    }


}
@media (min-width:768px){
body.alt .profile-video-icon{
        right: 15%;
    }


}
@media (min-width:1200px){
body.alt .profile-video-icon{
        right: 20%;
    }


}
@media (min-width:1400px){
body.alt .profile-video-icon{
        right: 25%;
    }


}
@media (max-width:767px){
body.alt .status-online,
body.alt .status-offline{
        left: 55%;
        bottom: 10px;
    }


}
@media (min-width:768px) and (max-width: 1399px){
body.alt .status-online,
body.alt .status-offline{
        left: 61%;
        bottom: -10px;
    }


}
body.alt .chat-msg-status{
    position: absolute;
    top: 20px;
    right: 2px;
}
body.alt .chat-msg-status > img{
    height: 17px;
}
body.alt #form-login-forget-btn-cancel{
    margin-right: 15px;
}
body.alt #my-profile-general-block{

}
body.alt #my-profile-general-block > .row > div{
    margin-bottom: 15px;
}
body.alt #my-profile-general-block strong{
    font-size: 18px;
    display: block;
}
body.alt #my-profile-general-block span{
    font-size: 16px;
    display: block;
}
body.alt #my-profile-change-pass-error-pass{
    display: none;
}
body.alt .modal-form-p{
    font-size: 12px;
}
body.alt #my-profile-change-password-btn,
body.alt #my-profile-edit-info-btn,
body.alt #my-profile-change-password-btn-cancel{
    font-size: 14px!important;
}
body.alt .profile-about-me-block strong,
body.alt .profile-about-me-block p strong,
body.alt .profile-about-me-block em strong,
body.alt .profile-about-me-block u strong,
body.alt .profile-about-me-block li strong{
    font-size: 16px!important;
}
body.alt .profile-about-me-block ul,
body.alt .profile-about-me-block ol{
    margin-top: 0!important;
    margin-bottom: 1rem!important;
    padding-left: 2rem!important;
}
body.alt .profile-about-me-block ul li{
    list-style: disc!important;
    border: 0!important;
}
body.alt .profile-about-me-block p:last-child{
    margin-bottom: 0;
}
body.alt .cke_notification_warning{
    display: none!important;
}
body.alt .icons-contacts-menu a{
    display: inline-block;
    margin:8px;
}
@keyframes pulseShadow{
  0% {
    box-shadow: 0 0 0 0 rgba(219, 192, 147, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(219, 192, 147, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(219, 192, 147, 0);
  }
}
body.alt .icons-contacts-menu a:hover{
    /*transform: translateY(-3px);*/
}
body.alt .icons-contacts-menu a img{
    display: block;
    width: 	23px;
    height:	23px;
    transition: .3s;
    border-radius: 50%;
    animation: pulseShadow 1.5s infinite;
}
@media (min-width:992px){
body.alt .icons-contacts-menu{
        margin-right: 7px;
    }



}
@media (min-width:1200px){
body.alt header{
        padding-top: 20px;
        padding-bottom: 20px;
    }
body.alt .menu-left-side .icons-contacts-menu img{
        margin: 0 2px!important;
    }


}
@media (min-width:1400px){
body.alt .icons-contacts-menu a img{
        width: 40px;
        height: 40px;
    }


}
@media (min-width:1900px){
body.alt .menu-categories a{
        padding: 0 30px;
    }
body.alt .menu-categories a:first-child{
        padding-left: 70px;
    }


}
body.alt .banner-wrap{
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: #1D2225;
}
body.alt .banner{
    position: relative;
    z-index: 0;

}
body.alt .banner-wrap:before{
    content: '';
    position: absolute;
    bottom:5%;
    left: -9%;
    background: url('/img/icons/icon-elipce.svg') center center no-repeat;
    background-size: cover;
    width: 300px;
    height: 300px;
    z-index: 0;
    transition: .4s;
    will-change: transform;
}
body.alt .banner-img{
    position: relative;
    z-index: 1;
    display: block;
}
body.alt .banner-img:after{
    content: '';
    position: absolute;
    bottom: 20%;
    left: 45%;
    background: url('/img/icons/icon-flower-lg.svg') top center no-repeat;
    background-size: contain;
    width: 226px;
    height: 226px;
    will-change: transform;
    transition: .9s;
    transform: scaleX(-1);
    z-index: -1;
}
body.alt .banner-wrap:after{
    content: '';
    position: absolute;
    top: 10%;
    right: 0;
    background: url('/img/icons/icon-flower-xs.svg') no-repeat;
    background-size: contain;
    width: 24%;
    height: 30%;
    z-index: -1;
    transform: rotate(-10deg);
    will-change: transform;
    transition: 1s;
}
body.alt .banner-img img{
    position: relative;
    transition: .4s;
    display: block;
    transform: translate(0) rotateZ(0) perspective(1px) scaleX(-1);
    will-change: transform;
    width: 300px;

}
body.alt .banner-text h1{
    color: #DBC093;
    font-size: 48px;
    font-family: "ArsenicaTrial", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    width: 95%;
    margin-bottom: 0;
}
body.alt .banner-text p{
    font-size: 14px;
    color: #ffffff;
    line-height: 234%;
    font-weight: 200;
    margin-bottom: 0;
}
body.alt .banner-text-landing h1{
color: #DBC093;
font-size: 30px;
font-family: "ArsenicaTrial", sans-serif;
font-weight: 600;
text-transform: uppercase;
width: 95%;
margin-bottom: 0;
}
body.alt .banner-text-landing p{
   font-size: 14px;
    color: #ffffff;
    line-height: 234%;
    font-weight: 200;
    margin-bottom: 0;
}
body.alt .banner-text .banner-text-width{
    margin-bottom:15px;
}
body.alt .main-text{
    text-align: center;
}
body.alt .main-text h2{
    margin-bottom: 25px;
    font-size: 24px;
    margin-top: 40px;
}
body.alt .main-text p{
    font-size: 14px;
    font-weight: 300;
    line-height: 300%;
}
body.alt .block-contacts-text{
    background: #1E2327;
    padding-top: 40px;
    padding-bottom: 137px;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
}
body.alt .block-contacts-text:before{
    content: '';
    position: absolute;
    bottom: -2%;
    left: 32%;
    background: url('/img/icons/icon-flower-xs.svg') center no-repeat;
    background-size: contain;
    width: 31%;
    height: 20%;
    transform: scaleX(-1) rotate(17deg);

}
body.alt .block-contacts-text h2{
    text-align: center;
    color: #DBC093;
}
body.alt .block-contacts-text p{
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    line-height: 180%;
    padding-top: 10px;
    padding-bottom: 30px;
}
body.alt .block-contacts-text-button{
    padding: 15px 40px;
    background: #DBC093;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    font-family: "ArsenicaTrial", sans-serif;
    color: #000000;
    margin: 0 auto 30px auto;
    transition: .3s;
    border: 1px solid #DBC093;
    min-width: 311px;

}
body.alt .block-contacts-text-button:hover{
    border: 1px solid #DBC093;
    color: #DBC093;
    background: transparent;
}
body.alt .block-contacts-text-tel .block-contacts-text-button{
    font-family: "Mont", sans-serif;
}
body.alt .why-we{
    padding-top: 50px;
}
body.alt .why-we .row > div{
    margin-bottom: 30px;
}
body.alt .why-we img{
    display: block;
    margin: 0 auto;
}
body.alt .why-we h3{
    text-transform: uppercase;
    font-family: "ArsenicaTrial", sans-serif;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 600;
}
body.alt .why-we p{
    line-height: 36px;
    font-size: 14px;
    font-weight: 300;
}
body.alt .slogan{
    margin-bottom: 50px;
    margin-top: 50px;
}
body.alt .slogan > div{
    border: 2px solid #DBC093;
    position: relative;
    overflow: hidden;
    padding: 45px 15px 135px 15px
}
body.alt .slogan h2{
   text-align: center;
    margin-bottom: 30px;
}
body.alt .slogan p{
   font-weight: 400;
    font-size: 14px;
    line-height: 36px;
}
body.alt .slogan span{
    display: block;
    margin-top: 35px;
    text-align: center;
    font-size: 18px;
    margin-bottom: 15px;
}
body.alt .slogan span{
    display: block;
    margin-top: 35px;
    text-align: center;
    font-size: 18px;
    margin-bottom: 15px;
}
body.alt .slogan > div:before{
    content: '';
    position: absolute;
    bottom: -8%;
    left: 21%;
    background: url('/img/icons/icon-flower-lg.svg') center no-repeat;
    background-size: contain;
    width: 55%;
    height: 25%;
    transform: scaleX(1);
}
body.alt .menu-xs-body .block-contacts-text-tel a{
    font-family: 'Mont', sans-serif;
    font-size: 18px;
}
body.alt .menu-xs-body .block-contacts-text{
    background: #24292D;
    margin-bottom: 0;
}
body.alt .menu-xs-body .block-contacts-text h2{
   color: #DBC093;
    margin-bottom: 20px;
}
body.alt .menu-xs-body .block-contacts-text:before{
   background: url('/img/icons/icon-flower-lg.svg') center no-repeat;
    background-size: contain;
    bottom: -7%;
    width: 40%;
    height: 40%;
}
body.alt .menu-xs-body .block-contacts-text-button{
    padding: 15px 40px;
    background: #DBC093;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    font-family: "ArsenicaTrial", sans-serif;
    color: #000000;
    margin: 0 auto 30px auto;
    transition: .3s;
    border: 1px solid #DBC093;
    min-width: 100%;
}
@media (min-width:768px){
body.alt .banner-img img{

        height: 442px;
        width: 454px;
    }
body.alt .banner-img:after{
        bottom: 28%;
        left: 60%;
        width: 200px;
        height: 200px;
        transform: scaleX(-1);
        z-index: -1;
    }
body.alt .banner-wrap:after{
        top: 81%;
        right: 3%;
        width: 22%;
        height: 22%;
        transform: rotate(355deg) scaleX(-1);
    }
body.alt .block-contacts-text-button{

        margin-bottom: 0;
    }
body.alt .block-contacts-text{
        padding: 40px 70px 50px 70px;
    }
body.alt .block-contacts-text:before{
        content: '';
        position: absolute;
        bottom: -2%;
        left: 73%;
        background: url('/img/icons/icon-flower-xs.svg') center no-repeat;
        background-size: contain;
        width: 36%;
        height: 27%;
        transform: scaleX(-1) rotate(17deg);
    }
body.alt .block-contacts-text:after{
        content: '';
        position: absolute;
        top: -4%;
        left: -1%;
        background: url('/img/icons/icon-flower-xs.svg') center no-repeat;
        background-size: contain;
        width: 16%;
        height: 51%;
        transform: scaleX(-1) rotate(-69deg);
    }
body.alt .block-contacts-text-button{
        padding: 15px 40px;
        min-width: 180px;
    }
body.alt .why-we h3{
        min-height: 57px;
        margin-bottom: 15px;
    }
body.alt .slogan > div{
        padding: 60px 30px 45px 30px
    }
body.alt .slogan > div:before{
        content: '';
        position: absolute;
        bottom: -11%;
        left: -10%;
        background: url('/img/icons/icon-flower-lg.svg') center no-repeat;
        background-size: contain;
        width: 47%;
        height: 47%;
        transform: scaleX(1);
    }
body.alt .slogan > div:before{
        content: '';
        position: absolute;
        bottom: -11%;
        left: -10%;
        background: url('/img/icons/icon-flower-lg.svg') center no-repeat;
        background-size: contain;
        width: 47%;
        height: 47%;
        transform: scaleX(1);
    }
body.alt .slogan > div:after{
        content: '';
        position: absolute;
        bottom: -11%;
        left: 63%;
        background: url('/img/icons/icon-flower-lg.svg') center no-repeat;
        background-size: contain;
        width: 47%;
        height: 47%;
        transform: scaleX(-1);
    }
body.alt .slogan p{
        width: 86%;
        margin: 0 auto;
        text-align: center;
    }



}
@media (min-width:992px){
body.alt .icons-contacts-menu{
        margin-right: 7px;
    }
body.alt .banner-img img{
        transform: scaleX(1);
        margin: 0 auto;
        height: 529px;
        width: 424px;
    }
body.alt .logo{
        width: 83px;
    }
body.alt .banner-img:after{
        bottom: 30%;
        left: -10%;
        width: 250px;
        height: 250px;
        transform: scaleX(1);
    }
body.alt .banner-wrap:after{
        top: 85%;
        right: 19%;
        width: 20%;
        height: 19%;
        transform: rotate(355deg) scaleX(-1);
    }
body.alt .banner-text-width{
        width: 73%;
        margin: 0 0 85px auto;
    }
body.alt .banner-text p.banner-text-width{
        width: 73%;
        margin: 0 0 15px auto;
    }
body.alt .block-contacts-text .row{
        width: 78%;
        margin: 0 auto 0 auto;
    }
body.alt .block-contacts-text-button{
        margin: 0 auto;
    }
body.alt .block-contacts-text p{
        font-size: 18px;
    }
body.alt .block-contacts-text-button{
        min-width: 190px;
    }
body.alt .why-we .row > div{
        margin-bottom: 0;
    }


}
@media (min-width:1200px){
body.alt header{
        padding-top: 20px;
        padding-bottom: 20px;
    }
body.alt /*  .menu-left-side .icons-contacts-menu img{
        margin: 0 2px!important;
    }
body.alt */

    .logo{
        width: 93px;
    }
body.alt .banner-img:after{
        bottom: 14%;
        left: -10%;
        width: 330px;
        height: 350px;
        transform: scaleX(1);
    }
body.alt .banner-wrap:after{
        top: 83%;
        right: 19%;
        width: 20%;
        height: 19%;
        transform: rotate(355deg) scaleX(-1);
    }
body.alt .banner-wrap:before{
        bottom: -9%;
        left: 16%;
        width: 400px;
        height: 400px;
    }
body.alt .banner-text p.banner-text-width{
        width: 63%;
        margin: 0 27px 15px auto;
    }
body.alt .btn-main{
        font-size: 16px;
        position: relative;
    }
body.alt .btn-main:hover{
        transition: .3s;
    }
body.alt .banner .btn-main:after{
        content: '';
        position: absolute;
        width: 90px;
        height: 5px;
        background: url('/img/icons/icon-long-arrow-brown.svg') center no-repeat;
        background-size: cover;
        top: 50%;
        transform: translateY(-50%);
        right: -65%;
        transition: .3s;
        will-change: transform;
    }
body.alt .banner .btn-main:hover:after{
        transform: translateY(-50%) translateX(10%);
    }
body.alt .header-top h1,
body.alt .header-top h2{
        padding-left: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        background: #DBC093;
        background: linear-gradient(90deg, rgb(219 192 147 / 70%) 0%, transparent);
    }
body.alt .block-contacts-text-button{
        min-width: 230px;
    }
body.alt .why-we h3{
        min-height: 50px;
        margin-top: 40px;
        margin-bottom: 0;
    }



}
@media (min-width:1400px){
body.alt .icons-contacts-menu a img{
        width: 23px;
        height: 23px;
    }
body.alt .banner-img img{
        height: 729px;
        width: 590px;
    }
body.alt .banner-img:after{
        bottom: 14%;
        left: -17%;
        width: 440px;
        height: 440px;
        transform: scaleX(1);
    }
body.alt .banner-wrap:after{
        top: 84%;
        right: 19%;
        width: 20%;
        height: 19%;
        transform: rotate(340deg) scaleX(-1);
    }
body.alt .banner-text h1{
        font-size: 64px;
        width: 95%;
    }
body.alt .banner-text p{
        font-size: 18px;
    }
body.alt .products{
        padding-top: 100px;
        padding-bottom: 100px;
    }
body.alt .product-info .product-header{
        display: inline-block;
        vertical-align: middle;
        padding-right: 3px;
    }
body.alt .product-info .rating{
        display: inline-block;
        vertical-align: middle;
    }
body.alt .block-contacts-text{
        margin-bottom: 100px;
    }
body.alt .block-contacts-text .row{
        width: 69%;
    }
body.alt .block-contacts-text-button{
        min-width: 239px;
    }
body.alt .block-contacts-text:before{
        bottom: -7%;
        left: 66%;
        width: 43%;
        height: 44%;
    }
body.alt .why-we h3{
        min-height: 60px;
        margin-top: 50px;
        margin-bottom: 0;
        text-align: left;
    }
body.alt .why-we img{
        margin: 0 auto 0 0;
    }
body.alt .header-top{
        margin-bottom: 50px;
    }
body.alt .main-text h2{
        font-size: 36px;
    }
body.alt /* .menu-left-side .icons-contacts-menu img{
        margin: 0 4px !important;
    }
body.alt */

    header .btn-registration{
        margin-left: 8px;
    }
body.alt .logo{
        width: 120px;
    }



}
@media (min-width:1900px){
body.alt .menu-categories a{
        padding: 0 30px;
    }
body.alt .menu-categories a:first-child{
        padding-left: 70px;
    }
body.alt .why-we p{
        width: 78%;
    }
body.alt .logo{
        width: 180px;
    }



}
body.alt #header-dropdown-ul{
    border-radius: 0!important;
}
body.alt #header-dropdown-ul a{
    padding: 10px!important;
    color: #212529;
}
body.alt #send-request-modal .request-form-block,
body.alt #send-user-request-modal .request-form-block{
    border-top: none;
    border-bottom: 1px solid rgba(219, 192, 147, 0.73)
}
body.alt #send-request-modal .request-form-block img,
body.alt #send-user-request-modal .request-form-block img{
    width: 35px;
    height: 35px;
    margin-bottom: 10px;
    padding-right: 10px;
}
body.alt .request-form-block input{
    background: #1D2225;
    padding: 10px;
    width: 80%;
    border: none;
    transform: translateY(-4px);
}
body.alt #send-request-modal .input-group-text,
body.alt #send-user-request-modal .input-group-text{
    border: none;
    padding: 0;
}
body.alt #send-request-modal .request-form-checkboxes .checkbox,
body.alt #send-user-request-modal .request-form-checkboxes .checkbox{
    display: block;
    position: relative;
    font-size: 14px;
    color: #ffffff;
    padding-left: 0;
    margin-bottom: 10px;
}
body.alt #send-request-modal .input-group-text,
body.alt #send-user-request-modal .input-group-text{
    background: transparent;
}
/* Hide original inputs */
body.alt #send-request-modal .request-form-checkboxes [type=checkbox],
body.alt input[type=radio],
body.alt #send-user-request-modal .request-form-checkboxes [type=checkbox],
body.alt input[type=radio]{
    display: none;

}
/* Checkboxes */
body.alt #send-request-modal .request-form-checkboxes input[type=checkbox] + label,
body.alt #send-user-request-modal .request-form-checkboxes input[type=checkbox] + label{
    border: 1px solid rgb(219, 192, 147);
    font-size: 14px;
    display: inline-block;
    width: 22px;
    height: 21px;
    line-height: 100%;
    margin: 4px 8px 8px 0;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    position: relative;
}
body.alt #send-request-modal .request-form-checkboxes  input[type=checkbox] + label span,
body.alt #send-user-request-modal .request-form-checkboxes  input[type=checkbox] + label span{
    padding-left: 30px;
    display: block;
    width: 144px;
    text-align: left;
    transform: translateY(1px);
}
body.alt #send-request-modal .request-form-checkboxes  input[type=checkbox]:checked + label::after,
body.alt #send-user-request-modal .request-form-checkboxes  input[type=checkbox]:checked + label::after{
    content: " > ";
    position: absolute;
    top:2px;
    left: 6px;
    background-size: contain;
    font-weight: 500;
    font-size: 16px;
    transform: rotate(90deg);
    color: #DBC093;
}
body.alt #request-form-send-btn,
body.alt #user-request-form-send-btn{
    margin-top: 50px;
}
body.alt #send-request-modal .request-form-title,
body.alt #send-user-request-modal .request-form-title{
    margin-bottom: 15px;
    display: block;
    text-transform: uppercase;
    font-family: "ArsenicaTrial", sans-serif;
}
body.alt #send-request-modal .btn-close,
body.alt #send-user-request-modal .btn-close{
    box-sizing: content-box;
    padding: 15px;
    color: #000;
    background: url('/img/icons/icon-close.svg') center no-repeat;
    background-size: contain;
    border: 0;
    border-radius: 0;
    opacity: 1;
    margin: 0;
    filter: invert(0);
    position: relative;
    z-index: 1;
}
body.alt #send-request-modal .modal-body,
body.alt #send-user-request-modal .modal-body{
    margin-top: 15px;
}
body.alt #send-request-modal .modal-form .btn-close,
body.alt #send-user-request-modal .modal-form .btn-close{
    filter: invert(0);
}
body.alt #send-request-modal .form-check .form-check-input,
body.alt #send-user-request-modal .form-check .form-check-input{
    transform: translateY(2px);
}
body.alt #send-request-modal .form-control:focus,
body.alt #send-user-request-modal .form-control:focus{
    background: transparent;
    outline: none;
    box-shadow: none;
}
body.alt #send-request-modal input,
body.alt #send-user-request-modal input{
    color: #ffffff;
    font-weight: 300;
}
body.alt #send-request-modal input:is(:-webkit-autofill,
body.alt :autofill),
body.alt #send-user-request-modal input:is(:-webkit-autofill,
body.alt :autofill){
    background-color: #1D2225!important;
}
body.alt #send-request-modal .form-control::placeholder,
body.alt #send-user-request-modal .form-control::placeholder{
    color: #DBC093!important;
    font-size: 14px;
    font-weight: 300;
}
body.alt #send-request-modal .form-control::placeholder,
body.alt #send-user-request-modal .form-control::placeholder{
    font-weight: 300;
    color: #ffffff!important;
    font-size: 14px;
}
body.alt #send-request-modal .form-control::-webkit-input-placeholder,
body.alt #send-user-request-modal .form-control::-webkit-input-placeholder{ /* Edge */
    color: #ffffff !important;
    font-weight: 300;
    font-size: 14px;
}
body.alt #send-request-modal .form-control:-ms-input-placeholder,
body.alt #send-user-request-modal .form-control:-ms-input-placeholder{ /* Internet Explorer 10-11 */
    font-weight: 300;
    color: #ffffff!important;
    font-size: 14px;
}
body.alt #send-request-modal .form-control::placeholder,
body.alt #send-user-request-modal .form-control::placeholder{
    font-weight: 300;
    color: #ffffff!important;
    font-size: 14px;
}
@media (min-width:768px){
body.alt #send-request-modal .request-form-checkboxes  input[type=checkbox] + label span,
body.alt #send-user-request-modal .request-form-checkboxes  input[type=checkbox] + label span{
        width: 170px;
    }


}
@media (min-width:900px){
body.alt #request-form-send-btn,
body.alt #user-request-form-send-btn{
        margin-top: 70px;
    }
body.alt #send-request-modal .modal-form .modal-content,
body.alt #send-user-request-modal .modal-form .modal-content{
        padding: 35px 40px 100px 40px;
        width: 90%;
        margin: 0 auto;
    }
body.alt #send-request-modal .request-form-title,
body.alt #send-user-request-modal .request-form-title{
            letter-spacing: 1px;
            font-size: 20px;
    }
body.alt #send-request-modal .modal-content,
body.alt #send-user-request-modal .modal-content{
        position: relative;
        overflow: hidden;
    }
body.alt #send-request-modal .modal-content:after,
body.alt #send-user-request-modal .modal-content:after{
        content: '';
        position: absolute;
        right: -34px;
        bottom: 14px;
        background: url('/img/icons/icon-flower-lg.svg') center no-repeat;
        background-size: cover;
        height: 280px;
        width: 250px;
        transform: rotate(-18deg);
    }
body.alt #send-request-modal .modal-body .modal-form-btn-main,
body.alt #send-user-request-modal .modal-body .modal-form-btn-main{
        padding: 20px 70px;
        font-size: 17px;
    }


}
body.alt #user-modal.user-modal-2 .modal-content .modal-header{
    background: #1D2225;
}
body.alt #user-modal.user-modal-2 .modal-body{
    position: relative;
}
body.alt #user-modal.user-modal-2 .modal-content .modal-body{
    padding-top: 0;
}
body.alt #user-modal.user-modal-2 .modal-content .modal-header span:hover{
    cursor: pointer;
}
body.alt #user-modal.user-modal-2 .modal-body{
    background: #1D2225;
}
body.alt #user-modal.user-modal-2 .input-group{
    border-top: none;
    border-bottom: 1px solid rgba(219, 192, 147, 0.73);
}
body.alt #user-modal.user-modal-2 .input-group input{
    border-radius: 0!important;
    background: transparent;
    border: none;
    padding-left: 2px;
    color:#ffffff;
    font-weight: 300;
}
body.alt #user-modal.user-modal-2 .input-group input:focus{
   box-shadow: none;
    outline: none;
}
body.alt #user-modal.user-modal-2 .input-group-text{
    display: flex;
    align-items: center;
    padding: 10px 10px 10px 1px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0;
}
body.alt #user-modal.user-modal-2 .input-group .form-select{
    background-image: url('/img/icons/icon-select.svg') ;
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: none;
    border-radius: 0!important;
}
body.alt #user-modal.user-modal-2 .input-group select{
    background:transparent;
    color:#ffffff;
    font-weight: 300;
    padding-left: 5px;
}
body.alt #user-modal.user-modal-2 .input-group select:focus{
    outline:none;
    box-shadow: none;
}
body.alt #user-modal.user-modal-2 .user-modal-select option{
    font-size: 14px;
    border-radius: 5px;
    padding: 13px 20px;
    background: #1D2225;
    font-weight: 300;
}
body.alt #user-modal.user-modal-2 .form-control::placeholder{
    color: #DBC093!important;
    font-size: 14px;
    font-weight: 300;
}
body.alt #user-modal.user-modal-2 .form-control::placeholder{
    font-weight: 300;
    color: #ffffff!important;
    font-size: 14px;
}
body.alt #user-modal.user-modal-2 .form-control::-webkit-input-placeholder{ /* Edge */
    color: #ffffff !important;
    font-weight: 300;
    font-size: 14px;
}
body.alt #user-modal.user-modal-2 .form-control:-ms-input-placeholder{ /* Internet Explorer 10-11 */
    font-weight: 300;
    color: #ffffff!important;
    font-size: 14px;
}
body.alt #user-modal.user-modal-2 .form-control::placeholder{
    font-weight: 300;
    color: #ffffff!important;
    font-size: 14px;
}
body.alt #user-modal.user-modal-2 .user-form-title{
    margin-bottom: 20px;
    display: block;
    font-size: 20px;
    text-transform: uppercase;
    padding: 0;
    margin-top: 40px;
    color: #ffffff;
    font-family: "ArsenicaTrial", sans-serif!important;
}
body.alt #user-modal.user-modal-2 #book-form-place-city-list,
body.alt #user-modal.user-modal-2 #book-form-city-list{
    background: #1D2225;
    color:#ffffff;
    font-weight: 300;
}
body.alt #user-modal.user-modal-2 #book-form-place-city-list li,
body.alt #user-modal.user-modal-2 #book-form-city-list li{
    color:#ffffff;
    font-weight: 300;
    border-bottom: 1px solid rgba(219, 192, 147, 0.73);
}
body.alt #user-modal.user-modal-2 input[disabled]{
    opacity: .5;
}
body.alt #user-modal.user-modal-2 .form-check-input{
    color: #ffffff;
    font-weight: 300;
    border: 1px solid #ffffff!important;
    background-color: rgb(255, 255, 255);

}
body.alt #user-modal.user-modal-2 .form-check-input:checked[type=checkbox]{
    background-image: url('/img/icons/icon-arrow-black.svg');
    background-color: rgb(255, 255, 255);
    background-size: 10px;
    transform: rotate(90deg);
}
body.alt .user-modal .form-check-label{
    color: #ffffff;
    margin-left: 10px;
    vertical-align: middle;
}
body.alt #user-modal.user-modal-2  #book-form-btn-send{
    font-size: 18px;
    padding: 16px 40px;

}
body.alt #user-modal.user-modal-2  #book-form-btn-send:hover{
    background: rgba(219, 192, 147, 1);
    color: #ffffff;

}
@media (min-width: 768px){



}
@media (min-width: 990px){
body.alt #user-modal.user-modal-2 .modal-body:after{
        content: '';
        position: absolute;
        right: -19px;
        top: 14px;
        background: url('/img/icons/icon-flower-lg.svg') center no-repeat;
        background-size: cover;
        height: 300px;
        width: 300px;
        transform: rotate(-18deg);
    }
body.alt #user-modal.user-modal-2  #book-form-btn-send{
        padding: 16px 80px;

    }



}
body.alt p a{
    color: #DBC093;
}
body.alt p a:hover{
    color: #1D2225;
}
body.alt .mb-4.block-media.profile-gallery-block{
    margin-bottom: 1px !important;
}
body.alt .row.mt-3.profile-gallery{
    --bs-gutter-x: 1px !important;
}
body.alt .footer-title-customer{
	color:#ffffff; 
	text-transform: uppercase; 
	font-size: 1.1rem; 
	font-weight:700;
}

/* =========================================================
   TEIL B – Neues Design: Grundlagen, Kopf, Fuß, Suche, Profilseite
   ========================================================= */

/* =========================================================
   Event ABC – Designsystem
   Farben abgeleitet aus dem Logo. Ersetzt schrittweise style-2.10.css.
   Stand: 13.08.2026
   ========================================================= */:root{
  /* Aus dem Logo */
  --ea-blue:#8096F8;          /* Logoblau – Flächen, dunkle Gründe */
  --ea-ink:#1E1E1C;           /* Logoschwarz – Schrift */
  --ea-blush:#F3F1EF;         /* neutraler Bildplatzhalter (früher Logorosé) */

  /* Abgeleitet für die Oberfläche */
  --ea-accent:#3F5AD1;        /* Bedienelemente, 5,84:1 auf Weiß – gewählt 15.08.2026 */
  --ea-accent-dark:#2F45A8;
  --ea-accent-soft:#EEF1FE;
  --ea-surface:#F5F4F3;
  --ea-ink-2:#45474A;
  --ea-muted:#71757B;
  --ea-line:#E7E2DE;
  --ea-line-2:#F2EEEB;
  --ea-white:#fff;

  /* Signalfarben */
  --ea-ok:#1F6B4E;
  --ea-ok-soft:#E9F3EE;
  --ea-gold:#B08327;
  --ea-error:#A8432F;

  --ea-radius:10px;
  --ea-radius-s:8px;
  --ea-shadow:0 1px 2px rgba(30,30,28,.05), 0 8px 24px rgba(30,30,28,.06);
  --ea-shadow-lg:0 2px 6px rgba(30,30,28,.06), 0 18px 48px rgba(30,30,28,.10);

  --ea-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --ea-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  --ea-wrap:1280px;
  --ea-header-h:86px;
}
/* ---------- Grundlagen ---------- */
body.ea .none{display:none !important}
/* wird vom vorhandenen JavaScript verwendet */
body.ea .pointer{cursor:pointer}
body.ea.ea{
  font-family:var(--ea-sans);
  color:var(--ea-ink);
  background:var(--ea-white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
body.ea a{color:inherit;text-decoration:none}
body.ea img{max-width:100%}
body.ea .ea-wrap{max-width:var(--ea-wrap);margin:0 auto;padding:0 clamp(18px,2.6vw,32px)}
body.ea .ea-section{padding:66px 0}
body.ea .ea-section--tint{background:#fff;border-top:1px solid var(--ea-line-2);border-bottom:1px solid var(--ea-line-2)}
body.ea .ea-h1{font-family:var(--ea-serif);font-size:clamp(30px,3.4vw,52px);line-height:1.12;letter-spacing:-.01em;margin:0 0 20px}
body.ea .ea-h2{font-family:var(--ea-serif);font-size:clamp(23px,2.2vw,31px);line-height:1.2;margin:0 0 8px}
body.ea .ea-h3{font-size:17px;font-weight:650;margin:0 0 4px}
body.ea .ea-lead{font-size:18px;color:var(--ea-ink-2);margin:0 0 32px;max-width:62ch}
body.ea .ea-sub{color:var(--ea-muted);font-size:14.5px;margin:0}
body.ea .ea-sectionhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
body.ea .ea-link{color:var(--ea-accent);font-weight:600;font-size:14.5px}
body.ea .ea-link:after{content:" →"}
body.ea .ea-link:hover{color:var(--ea-accent-dark)}
body.ea .ea-link--plain:after{content:none}
/* ---------- Schaltflächen ---------- */
body.ea .ea-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:8px;
  padding:12px 20px;font-size:15px;font-weight:600;cursor:pointer;
  background:var(--ea-accent);color:#fff;transition:background .15s;
}
body.ea .ea-btn:hover{background:var(--ea-accent-dark);color:#fff}
body.ea .ea-btn--ghost{background:#fff;color:var(--ea-ink);border-color:var(--ea-line)}
body.ea .ea-btn--ghost:hover{background:var(--ea-surface);color:var(--ea-ink)}
body.ea .ea-btn--light{background:#fff;color:var(--ea-ink)}
body.ea .ea-btn--light:hover{background:#f2f2f2;color:var(--ea-ink)}
body.ea .ea-btn--sm{padding:9px 14px;font-size:13.5px;border-radius:8px}
body.ea .ea-btn--block{width:100%}
body.ea .ea-btn:focus-visible,
body.ea a:focus-visible,
body.ea button:focus-visible,
body.ea input:focus-visible,
body.ea select:focus-visible{
  outline:3px solid var(--ea-accent-soft);outline-offset:2px;border-radius:8px;
}
/* ---------- Kopfzeile ---------- */
body.ea .ea-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--ea-line-2)}
body.ea .ea-header__in{max-width:var(--ea-wrap);margin:0 auto;padding:0 clamp(18px,2.6vw,32px);height:var(--ea-header-h);display:flex;align-items:center;gap:32px}
body.ea .ea-logo{display:inline-flex;align-items:center;line-height:0;flex:0 0 auto}
body.ea .ea-logo svg,
body.ea .ea-logo img{height:24px;width:auto;display:block}
body.ea .ea-nav{display:flex;gap:26px;font-size:15px;color:var(--ea-ink-2);white-space:nowrap;align-items:center}
body.ea .ea-nav a:hover{color:var(--ea-ink)}
body.ea .ea-nav .dropdown-toggle:after{margin-left:4px}
body.ea .ea-header__right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:15px;white-space:nowrap}
body.ea .ea-icon-btn{width:38px;height:38px;border-radius:8px;border:1px solid var(--ea-line);display:inline-grid;place-items:center;position:relative;background:#fff}
body.ea .ea-icon-btn:hover{border-color:var(--ea-ink)}
body.ea .ea-icon-btn img{width:17px;height:17px}
body.ea .ea-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:10px;background:var(--ea-accent);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
body.ea .ea-burger{display:none;width:34px;height:34px;border:0;background:none;place-items:center;margin-left:-6px}
body.ea .ea-burger img{width:18px}
/* Menü-Klappe */
body.ea .dropdown-menu{border:1px solid var(--ea-line);border-radius:10px;box-shadow:var(--ea-shadow);padding:8px;min-width:240px}
body.ea .dropdown-menu .dropdown-item{border-radius:8px;padding:8px 10px;font-size:14.5px;color:var(--ea-ink-2)}
body.ea .dropdown-menu .dropdown-item:hover{background:var(--ea-surface);color:var(--ea-ink)}
body.ea .dropdown-menu--cols.show{min-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
/* ---------- Startseite: Hero ---------- */
body.ea .ea-hero{background:#fff;border-bottom:1px solid var(--ea-line-2);padding:84px 0 64px}
body.ea .ea-hero .ea-h1{max-width:26ch}
body.ea .ea-search{
  display:grid;grid-template-columns:1fr 1.25fr 1fr auto;
  background:#fff;border:1px solid var(--ea-line);border-radius:10px;
  box-shadow:var(--ea-shadow);overflow:hidden;margin:38px 0 18px;
}
body.ea .ea-search__field{padding:15px 20px;border-right:1px solid var(--ea-line-2);min-width:0}
body.ea .ea-search__field:last-of-type{border-right:0}
body.ea .ea-search__field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ea-muted);font-weight:700;margin-bottom:3px}
body.ea .ea-search__field input,
body.ea .ea-search__field select{
  width:100%;border:0;padding:0;font-size:15px;color:var(--ea-ink);background:transparent;outline:none;
  appearance:none;-webkit-appearance:none;
}
body.ea .ea-search__field input::placeholder{color:#9CA1A8}
body.ea .ea-search__go{display:flex;align-items:center;padding:8px}
body.ea .ea-search__go .ea-btn{height:100%;padding:0 24px;border-radius:8px}
body.ea .ea-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
body.ea .ea-chip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ea-line);background:#fff;
  border-radius:10px;padding:8px 15px;font-size:14px;color:var(--ea-ink-2);white-space:nowrap;
}
body.ea .ea-chip:hover{border-color:var(--ea-ink);color:var(--ea-ink)}
body.ea .ea-chip.is-active{background:var(--ea-ink);color:#fff;border-color:var(--ea-ink)}
body.ea .ea-chip.is-active .ea-dot{background:#fff}
body.ea .ea-dot{width:7px;height:7px;border-radius:50%;background:var(--ea-accent)}
body.ea .ea-trust{display:flex;gap:34px;flex-wrap:wrap;color:var(--ea-muted);font-size:14px;align-items:center}
body.ea .ea-trust b{color:var(--ea-ink)}
body.ea .ea-trust span{display:flex;align-items:center;gap:7px}
/* ---------- Schritte ---------- */
body.ea .ea-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
body.ea .ea-step{display:flex;gap:14px;align-items:flex-start}
body.ea .ea-step__n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--ea-accent-soft);color:var(--ea-accent);display:grid;place-items:center;font-weight:700;font-size:15px}
/* ---------- Raster und Karten ---------- */
body.ea .ea-grid{display:grid;gap:20px}
body.ea .ea-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.ea .ea-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.ea .ea-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
body.ea .ea-card{background:#fff;border:1px solid var(--ea-line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s;position:relative}
body.ea .ea-card:hover{box-shadow:var(--ea-shadow);border-color:#D9D3CD}
body.ea .ea-card__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ea-surface)}
body.ea .ea-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
body.ea .ea-card:hover .ea-card__media img{transform:scale(1.03)}
body.ea .ea-card__video{position:absolute;left:10px;bottom:10px;background:rgba(30,30,28,.72);border-radius:8px;padding:5px 7px;display:grid;place-items:center}
body.ea .ea-card__video img{width:14px;height:14px}
body.ea .ea-card__fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;border:0}
body.ea .ea-card__fav .heart-empty:before,
body.ea .ea-card__fav .heart-full:before{content:"♡";font-size:17px;line-height:1;color:var(--ea-ink)}
body.ea .ea-card__fav .heart-full:before{content:"♥";color:var(--ea-error)}
body.ea .ea-card__body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
body.ea .ea-card__meta{font-size:12.5px;color:var(--ea-muted);margin-bottom:5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
body.ea .ea-card__name{font-size:16px;font-weight:650;margin:0 0 2px;color:var(--ea-ink)}
body.ea .ea-card__company{font-size:13px;color:var(--ea-muted);margin:0 0 8px}
body.ea .ea-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
body.ea .ea-price{font-size:14.5px;color:var(--ea-muted)}
body.ea .ea-price b{font-size:16px;color:var(--ea-ink)}
body.ea .ea-tag{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:10px;background:var(--ea-surface);color:var(--ea-ink-2);border:1px solid var(--ea-line-2)}
body.ea .ea-tag--ok{background:var(--ea-ok-soft);color:var(--ea-ok);border-color:#D3E7DC}
body.ea .ea-tag--accent{background:var(--ea-accent-soft);color:var(--ea-accent);border-color:#DDE3FD}
body.ea .ea-stars{color:var(--ea-ink);font-size:13px;letter-spacing:.06em;display:inline-flex;gap:1px}
body.ea .ea-stars .star-empty{color:#D8D3CE}
body.ea .ea-rate{font-size:13.5px;color:var(--ea-muted)}
body.ea .ea-rate b{color:var(--ea-ink)}
/* Kategorie-Kacheln */
body.ea .ea-cat{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--ea-line);border-radius:8px;padding:13px 15px;background:#fff;font-size:14.5px}
body.ea .ea-cat:hover{border-color:var(--ea-ink)}
body.ea .ea-cat span{color:var(--ea-muted);font-size:13px}
/* Anlass-Kacheln */
body.ea .ea-occ{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--ea-line);display:block}
body.ea .ea-occ__img{aspect-ratio:3/2;background:var(--ea-blush);display:block;width:100%;object-fit:cover}
body.ea .ea-occ__ov{position:absolute;inset:auto 0 0 0;padding:16px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.66));color:#fff}
body.ea .ea-occ__ov h3{margin:0;font-size:18px;font-family:var(--ea-serif);font-weight:500}
body.ea .ea-occ__ov p{margin:2px 0 0;font-size:12.5px;opacity:.88}
/* Dienstleister-Band */
body.ea .ea-band{background:var(--ea-ink);color:#fff;border-radius:10px;padding:34px;display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center}
body.ea .ea-band h2{color:#fff}
body.ea .ea-band ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
body.ea .ea-band li{position:relative;padding-left:22px;font-size:14.5px;color:#D9D6D1}
body.ea .ea-band li:before{content:"✓";position:absolute;left:0;top:0;color:var(--ea-blue);font-weight:700}
body.ea .ea-band__box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:20px}
body.ea .ea-band__price{font-size:26px;font-weight:700;margin:6px 0 2px}
body.ea .ea-band small{color:#B7B3AD}
body.ea .ea-eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ea-accent);margin:0 0 10px}
body.ea .ea-band .ea-eyebrow{color:var(--ea-blue)}
/* ---------- Fußzeile ---------- */
body.ea .ea-footer{background:var(--ea-ink);color:#B7B3AD;padding:52px 0 30px;font-size:14px;margin-top:0}
body.ea .ea-footer h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}
body.ea .ea-footer a{display:block;padding:3px 0}
body.ea .ea-footer a:hover{color:#fff}
body.ea .ea-footer__logo{display:inline-flex;margin-bottom:14px;line-height:0}
body.ea .ea-footer__logo svg{height:26px;width:auto}
body.ea .ea-footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}
/* ---------- Leerzustand ---------- */
body.ea .ea-empty{border:1px dashed var(--ea-line);border-radius:10px;padding:44px 20px;text-align:center;color:var(--ea-muted)}
body.ea .ea-empty p{margin:6px 0 0}
/* ---------- Mobil ---------- */
@media (max-width:991.98px){
body.ea .ea-nav{display:none}
body.ea .ea-burger{display:inline-grid}
body.ea .ea-header__in{height:60px;gap:12px}
body.ea .ea-hide-mobile{display:none !important}


}
@media (max-width:767.98px){
body.ea .ea-section{padding:38px 0}
body.ea .ea-hero{padding:22px 0 30px}
body.ea .ea-hero .ea-wrap{display:flex;flex-direction:column}
body.ea .ea-hero .ea-h1{order:1;font-size:26px;line-height:1.18;margin:0 0 14px;max-width:none}
body.ea .ea-hero .ea-search{order:2;grid-template-columns:1fr;margin:0 0 14px}
body.ea .ea-hero .ea-chips{order:3;margin-bottom:18px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
body.ea .ea-hero .ea-lead{order:4;font-size:15.5px;margin:0 0 12px}
body.ea .ea-hero .ea-trust{order:5;font-size:13px;gap:14px}
body.ea .ea-search__field{border-right:0;border-bottom:1px solid var(--ea-line-2)}
body.ea .ea-search__go{padding:10px}
body.ea .ea-search__go .ea-btn{width:100%;padding:14px}
body.ea .ea-grid{gap:12px}
body.ea .ea-grid--3,
body.ea .ea-steps{grid-template-columns:1fr}
body.ea .ea-grid--4,
body.ea .ea-grid--occ{grid-template-columns:repeat(2,minmax(0,1fr))}
body.ea .ea-card__media{aspect-ratio:1/1}
body.ea .ea-card__body{padding:10px 11px 13px}
body.ea .ea-card__meta{font-size:11px;margin-bottom:4px}
body.ea .ea-card__name{font-size:14.5px}
body.ea .ea-card__company{font-size:12px;margin-bottom:6px}
body.ea .ea-card__foot .ea-tag{display:none}
body.ea .ea-cat{padding:11px 12px;font-size:13.5px}
body.ea .ea-occ__img{aspect-ratio:4/3}
body.ea .ea-occ__ov{padding:12px}
body.ea .ea-occ__ov h3{font-size:15px;line-height:1.2}
body.ea .ea-occ__ov p{display:none}
body.ea .ea-band{grid-template-columns:1fr;padding:24px}
body.ea .ea-footer{padding:36px 0 24px}


}

/* ---------- Mobiles Menü (Bootstrap-Offcanvas) ---------- */
body.ea .ea-offcanvas{width:86vw;max-width:360px}
body.ea .ea-offcanvas .offcanvas-body{padding:0 18px 24px}
body.ea .ea-offcanvas .ea-logo{margin:4px 0 18px}
body.ea .ea-mnav{list-style:none;margin:0;padding:0}
body.ea .ea-mnav li{border-bottom:1px solid var(--ea-line-2)}
body.ea .ea-mnav a{display:block;padding:13px 2px;font-size:16px}
body.ea .ea-mnav__head{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ea-muted);font-weight:700;margin:22px 0 4px}
/* ---------- Cookie-Hinweis ---------- */
body.ea #accept-cookies-block{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:1040;   /* unter den Dialogen (1055), damit sie nicht blockiert werden */
  background:#fff;border:1px solid var(--ea-line);border-radius:10px;
  box-shadow:var(--ea-shadow-lg);padding:18px 20px;max-width:560px;margin:0 auto;
}
body.ea #accept-cookies-block p{font-size:13.5px;color:var(--ea-ink-2);margin:0 0 14px}
body.ea #accept-cookies-block a{color:var(--ea-accent);text-decoration:underline}
body.ea #accept-cookies-block > div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
body.ea #accept-cookies-block .accept-cookies{cursor:pointer}
body.ea #accept-cookies-block .decline-cookies{cursor:pointer;font-size:13.5px;color:var(--ea-muted);text-decoration:underline}
/* =========================================================
   Suchergebnisse
   ========================================================= */
body.ea .ea-crumbs{font-size:13px;color:var(--ea-muted);padding:16px 0 0}
body.ea .ea-crumbs a:hover{color:var(--ea-ink)}
body.ea .ea-results{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;padding:22px 0 48px;align-items:start}
body.ea .ea-filter{border:1px solid var(--ea-line);border-radius:10px;padding:18px;position:sticky;top:calc(var(--ea-header-h) + 18px);background:#fff}
body.ea .ea-filter__group{border-top:1px solid var(--ea-line-2);padding:14px 0}
body.ea .ea-filter__group:first-of-type{border-top:0;padding-top:0}
body.ea .ea-filter__group h3{margin:0 0 9px;font-size:13px;font-weight:700}
body.ea .ea-filter select{width:100%;border:1px solid var(--ea-line);border-radius:8px;padding:9px 11px;font-size:14px;color:var(--ea-ink-2);background:#fff}
body.ea .ea-filter .ea-stars-input{display:flex;gap:4px}
body.ea .ea-filter .ea-stars-input span{cursor:pointer;width:22px;height:22px;display:grid;place-items:center}
body.ea .ea-filter .ea-stars-input img{width:18px;height:18px}
body.ea .ea-sortbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
body.ea .ea-sortbar select{border:1px solid var(--ea-line);border-radius:8px;padding:9px 12px;font-size:14px;background:#fff;color:var(--ea-ink-2)}
body.ea .ea-count{font-size:14.5px;color:var(--ea-muted)}
body.ea .ea-count b{color:var(--ea-ink)}
body.ea .ea-row{display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid var(--ea-line);border-radius:10px;overflow:hidden;background:#fff;margin-bottom:14px;position:relative}
body.ea .ea-row:hover{box-shadow:var(--ea-shadow)}
body.ea .ea-row__media{position:relative;display:block;min-height:190px;background:var(--ea-surface)}
body.ea .ea-row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.ea .ea-row__body{padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
body.ea .ea-row__top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
body.ea .ea-row__name{font-size:18px;font-weight:650;margin:2px 0 1px;color:var(--ea-ink)}
body.ea .ea-row__right{text-align:right;white-space:nowrap}
body.ea .ea-row__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
body.ea .ea-row__desc{font-size:14px;color:var(--ea-ink-2);margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.ea .ea-row__acts{display:flex;gap:10px;align-items:center;margin-top:auto;padding-top:12px;flex-wrap:wrap}
body.ea .ea-row__fav{position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;z-index:2}
body.ea .ea-row__fav .heart-empty:before{content:"♡";font-size:17px;color:var(--ea-ink)}
body.ea .ea-row__fav .heart-full:before{content:"♥";font-size:17px;color:var(--ea-error)}
body.ea .ea-pick{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ea-ink-2);cursor:pointer;user-select:none}
body.ea .ea-pick input{accent-color:var(--ea-accent);width:16px;height:16px}
body.ea .ea-selbar{
  position:sticky;bottom:14px;margin-top:18px;background:var(--ea-ink);color:#fff;border-radius:10px;
  padding:13px 18px;display:none;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  box-shadow:var(--ea-shadow-lg);z-index:20;
}
body.ea .ea-selbar.is-visible{display:flex}
body.ea .ea-selbar .ea-btn{background:#fff;color:var(--ea-ink)}
body.ea .ea-selbar .ea-btn:hover{background:#efefef;color:var(--ea-ink)}
body.ea .ea-intro{max-width:75ch;color:var(--ea-ink-2);font-size:15.5px}
body.ea .ea-filter-open{display:none}
@media (max-width:991.98px){
body.ea .ea-results{grid-template-columns:1fr;gap:0;padding-top:14px}
body.ea .ea-filter{position:fixed;inset:auto 0 0 0;z-index:1090;border-radius:10px 10px 0 0;max-height:82vh;overflow:auto;
             transform:translateY(101%);transition:transform .25s;box-shadow:var(--ea-shadow-lg);padding:18px 18px 90px}
body.ea .ea-filter.is-open{transform:none}
body.ea .ea-filter__done{position:sticky;bottom:-18px;background:#fff;padding:12px 0;margin-top:10px;border-top:1px solid var(--ea-line-2)}
body.ea .ea-filter-open{display:inline-flex}
body.ea .ea-row{grid-template-columns:1fr}
body.ea .ea-row__media{min-height:0;aspect-ratio:16/10}
body.ea .ea-row__acts .ea-btn{flex:1}


}
/* =========================================================
   Dienstleisterprofil
   ========================================================= */
body.ea .ea-cover{position:relative;height:clamp(180px,26vw,320px);background:var(--ea-blush);overflow:hidden}
body.ea .ea-cover img{width:100%;height:100%;object-fit:cover;display:block}
body.ea .ea-profile{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:44px;align-items:start;padding-bottom:56px}
body.ea .ea-pblock{border-top:0;padding:26px 0 0}
body.ea .ea-pblock:first-child{border-top:0;padding-top:0}
body.ea .ea-phead{display:flex;gap:20px;align-items:flex-start;margin-top:-54px;position:relative;z-index:2}
body.ea .ea-avatar{width:112px;height:112px;border-radius:10px;border:4px solid #fff;object-fit:cover;background:var(--ea-surface);flex:0 0 auto;box-shadow:var(--ea-shadow)}
body.ea .ea-phead__meta{padding-top:58px;min-width:0}
body.ea .ea-pname{font-family:var(--ea-serif);font-size:clamp(24px,2.4vw,32px);margin:0 0 2px;line-height:1.15}
body.ea .ea-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
body.ea .ea-gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:150px 150px;gap:8px;margin:22px 0 6px}
body.ea .ea-gal a{display:block;overflow:hidden;background:var(--ea-surface)}
body.ea .ea-gal a img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
body.ea .ea-gal a:hover img{transform:scale(1.04)}
body.ea .ea-gal a:first-child{grid-row:span 2;border-radius:10px 0 0 10px}
body.ea .ea-gal a:nth-child(3){border-radius:0 10px 0 0}
body.ea .ea-gal a:nth-child(5){border-radius:0 0 10px 0}
body.ea .ea-gal__more{position:relative}
body.ea .ea-gal__more span{position:absolute;inset:0;background:rgba(30,30,28,.55);color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px}
body.ea .ea-pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
body.ea .ea-pkg{border:1px solid var(--ea-line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:6px}
body.ea .ea-pkg--best{border-color:var(--ea-accent);box-shadow:0 0 0 3px var(--ea-accent-soft)}
body.ea .ea-pkg__price{font-size:20px;font-weight:700;margin:2px 0 4px}
body.ea .ea-pkg ul{margin:6px 0 0;padding-left:18px;color:var(--ea-ink-2);font-size:13.5px;display:grid;gap:4px}
body.ea .ea-rev{border:1px solid var(--ea-line);border-radius:10px;padding:15px}
body.ea .ea-rev__who{display:flex;align-items:center;gap:10px;margin-bottom:6px}
body.ea .ea-rev__av{width:34px;height:34px;border-radius:50%;background:var(--ea-blush);object-fit:cover;flex:0 0 34px}
body.ea .ea-ask{border:1px solid var(--ea-line);border-radius:10px;padding:22px;position:sticky;top:calc(var(--ea-header-h) + 18px);box-shadow:var(--ea-shadow);background:#fff}
body.ea .ea-ask__price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px}
body.ea .ea-ask__price b{font-size:24px}
body.ea .ea-ask__note{font-size:12.5px;color:var(--ea-muted);text-align:center;margin:10px 0 0}
body.ea .ea-ask__hint{border-top:1px solid var(--ea-line-2);margin-top:14px;padding-top:12px;font-size:13.5px;color:var(--ea-muted)}
body.ea .ea-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px}
body.ea .ea-video{border:1px solid var(--ea-line);border-radius:10px;overflow:hidden}
body.ea .ea-video iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
body.ea .ea-video__t{padding:10px 13px;font-size:14px;font-weight:600}
@media (max-width:991.98px){
body.ea .ea-profile{grid-template-columns:1fr;gap:0}
body.ea .ea-ask{position:static;margin-bottom:24px}
body.ea .ea-pkgs{grid-template-columns:1fr}
body.ea .ea-videos{grid-template-columns:1fr}
body.ea .ea-gal{grid-template-columns:1fr 1fr;grid-template-rows:140px 100px}
body.ea .ea-gal a:first-child{grid-column:span 2;grid-row:auto;border-radius:10px}
body.ea .ea-gal a{border-radius:10px !important}
body.ea .ea-phead{margin-top:-40px;gap:14px}
body.ea .ea-avatar{width:84px;height:84px}
body.ea .ea-phead__meta{padding-top:44px}
/* Anfrage-Leiste bleibt auf dem Handy unten sichtbar */
body.ea .ea-askbar{position:fixed;left:0;right:0;bottom:0;z-index:1040;background:#fff;border-top:1px solid var(--ea-line);
             padding:10px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 -6px 20px rgba(30,30,28,.08)}
body.ea .ea-askbar .ea-btn{flex:1}
body.ea.ea{padding-bottom:74px}


}
body.ea .ea-askbar{display:none}

/* =========================================================
   TEIL C – Neues Design: eingeloggter Bereich
   ========================================================= */

/* =========================================================
   Event ABC – Eingeloggter Bereich
   Neue Datei: css/eventabc-profile.css
   Wird nur auf /profile geladen, nach style-2.10.css.

   Erster Teil: der neue Rahmen (Klassen mit ea-).
   Zweiter Teil: behutsame Überarbeitung der vorhandenen
   Innenseiten. Deren Klassennamen bleiben unangetastet,
   weil das JavaScript sie braucht – hier wird nur das
   Aussehen darübergelegt.

   Stand: 14.08.2026
   ========================================================= *//* ---------------------------------------------------------
   1. Rahmen: Kopfzeile, drei Bereiche, Reiter
   --------------------------------------------------------- */
body.ea .ea-mytop{
    background: #fff;
    border-bottom: 1px solid var(--ea-line, #E7E2DE);
    padding-top: 26px;
}
body.ea .ea-mytop__in{ display: flex; align-items: center; gap: 16px; padding-bottom: 18px; }
body.ea .ea-mytop__ava{ position: relative; flex: 0 0 auto; margin: 0; }
body.ea .ea-mytop__ava img{
    width: 62px; height: 62px; border-radius: 50%;
    object-fit: cover; background: var(--ea-surface, #F5F4F3);
    display: block;
}
body.ea .ea-mytop__ava label{
    position: absolute; right: -3px; bottom: -3px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--ea-accent, #3F5AD1); color: #fff;
    font-size: 15px; line-height: 22px; text-align: center;
    cursor: pointer; border: 2px solid #fff;
}
body.ea .ea-mytop__meta{ min-width: 0; }
body.ea .ea-myname{ font-size: 22px; line-height: 1.2; margin: 0 0 2px; text-transform: none !important; }
body.ea .ea-mytop__view{ margin-left: auto; flex: 0 0 auto; }
body.ea .ea-state{ font-weight: 600; }
body.ea .ea-state--ok{ color: var(--ea-ok, #1F6B4E); }
body.ea .ea-state--wait{ color: var(--ea-gold, #B08327); }
/* Ebene 1 – drei Bereiche */
body.ea .ea-main3{ display: flex; gap: 4px; }
body.ea .ea-main3 a{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    border-radius: 10px 10px 0 0;
    color: var(--ea-ink-2, #45474A);
    text-decoration: none;
    font-size: 17px; font-weight: 600;
    text-transform: none !important;
    border: 1px solid transparent;
    border-bottom: 0;
}
body.ea .ea-main3 a:hover{ background: var(--ea-line-2, #F2EEEB); color: var(--ea-ink, #1E1E1C); }
body.ea .ea-main3 a.is-active{
    background: var(--ea-surface, #F5F4F3);
    border-color: var(--ea-line, #E7E2DE);
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-main3__num{
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--ea-accent, #3F5AD1);
    color: #fff; font-size: 12px; font-weight: 700;
    line-height: 20px; text-align: center;
}
/* Ebene 2 – Reiter */
body.ea .ea-tabs{
    display: flex; gap: 2px;
    background: var(--ea-surface, #F5F4F3);
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 0 10px 10px 10px;
    padding: 6px;
    margin-bottom: -1px;
    overflow-x: auto;
    scrollbar-width: none;
}
body.ea .ea-tabs::-webkit-scrollbar{ display: none; }
body.ea .ea-tabs a{
    padding: 8px 15px;
    border-radius: 10px;
    color: var(--ea-ink-2, #45474A);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
    text-transform: none !important;
}
body.ea .ea-tabs a:hover{ background: #fff; color: var(--ea-ink, #1E1E1C); }
body.ea .ea-tabs a.is-active{ background: #fff; color: var(--ea-ink, #1E1E1C); font-weight: 600; box-shadow: 0 1px 3px rgba(30,30,28,.08); }
body.ea .ea-mypage{ padding: 30px 0 70px; }
/* Titelbild – nur auf den Stammdaten */
body.ea .ea-mycover{
    position: relative; height: 190px; overflow: hidden;
    border-radius: 10px; margin-bottom: 24px;
    background: var(--ea-blush, #F3F1EF);
}
body.ea .ea-mycover img{ width: 100%; height: 100%; object-fit: cover; display: block; }
body.ea .ea-mycover__edit{ position: absolute; right: 14px; bottom: 14px; }
body.ea .ea-mycover__edit label{
    display: inline-block; padding: 8px 14px; border-radius: 10px;
    background: rgba(255, 255, 255, .92); color: var(--ea-ink, #1E1E1C);
    font-size: 14px; font-weight: 600; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
body.ea .ea-mycover #profile-bg-image-text,
body.ea .ea-mycover__hint{
    display: block !important;
    position: absolute; left: 14px !important; top: 14px !important; bottom: auto !important;
    max-width: 60% !important; transform: none !important;
    background: rgba(30, 30, 28, .45); color: #fff;
    border-radius: 10px; padding: 5px 12px; font-size: 12.5px; text-shadow: none;
}
/* Einrichtung */
body.ea .ea-setup{
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px; padding: 20px 22px; margin-bottom: 26px; background: #fff;
}
body.ea .ea-setup__head{ display: flex; align-items: center; gap: 16px; }
body.ea .ea-setup__count{ margin-left: auto; font-weight: 700; font-size: 18px; color: var(--ea-accent, #3F5AD1); white-space: nowrap; }
body.ea .ea-setup__bar{ height: 6px; border-radius: 10px; background: var(--ea-line-2, #F2EEEB); margin: 14px 0 18px; overflow: hidden; }
body.ea .ea-setup__bar span{ display: block; height: 100%; background: var(--ea-accent, #3F5AD1); border-radius: 10px; }
body.ea .ea-setup__list{ list-style: none; margin: 0; padding: 0; }
body.ea .ea-setup__list li{
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 4px; border-top: 1px solid var(--ea-line-2, #F2EEEB);
    background: transparent !important; color: inherit !important; text-align: left !important;
}
body.ea .ea-setup__list li:first-child{ border-top: 0; }
body.ea .ea-setup__list p{ margin: 2px 0 0; font-size: 14px; }
body.ea .ea-setup__list > li > a,
body.ea .ea-setup__list > li > label{ margin-left: auto; white-space: nowrap; cursor: pointer; }
body.ea .ea-setup__mark{
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: var(--ea-line-2, #F2EEEB); color: var(--ea-ink-2, #45474A);
    font-size: 13px; font-weight: 700; line-height: 26px; text-align: center;
}
body.ea .ea-setup__list li.ea-done .ea-setup__mark{ background: #E6F4EA; color: #1E7B39; }
body.ea .ea-setup__foot{
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    border-top: 1px solid var(--ea-line-2, #F2EEEB); padding-top: 16px; margin-top: 6px;
}
body.ea .ea-setup__foot p{ flex: 1 1 260px; }
body.ea .ea-btn--off{ background: #D9D6D2; color: #fff; cursor: not-allowed; }
body.ea .ea-setup__foot .send-to-moderation-btn,
body.ea .ea-setup__foot .send-to-moderation-inactive-btn{
    display: inline-flex !important; width: auto !important; margin: 0 !important;
    padding: 12px 24px !important; text-transform: none !important;
    letter-spacing: 0 !important; font-size: 15px !important; border-radius: 10px !important;
}
body.ea .ea-setup__foot .send-to-moderation-btn{ background: var(--ea-accent, #3F5AD1) !important; color: #fff !important; }
body.ea .ea-setup__foot .send-to-moderation-inactive-btn{ background: #D9D6D2 !important; color: #fff !important; }
body.ea .ea-mymain{ min-width: 0; }
/* ---------------------------------------------------------
   2. Innenseiten – vorhandene Klassen, neues Aussehen
   --------------------------------------------------------- */
body.ea .ea-mymain h1,
body.ea .ea-mymain h2,
body.ea .ea-mymain h3{
    font-family: var(--ea-serif, Georgia, serif);
    color: var(--ea-ink, #1E1E1C);
    letter-spacing: -.01em;
}
body.ea .ea-mymain h1{ font-size: 27px; margin: 0 0 18px; }
body.ea .ea-mymain h2{ font-size: 21px; margin: 26px 0 12px; }
body.ea .ea-mymain h3{ font-size: 17px; }
/* Karten: Anfragen, Angebote, Buchungen */
body.ea .ea-mymain .customer-profile,
body.ea .ea-mymain .bookings-item,
body.ea .ea-mymain .offer-block,
body.ea .ea-mymain .customer-orders-block,
body.ea .ea-mymain .profile-leistungen,
body.ea .ea-mymain .profile-gallery,
body.ea .ea-mymain .empty-block{
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px;
    background: #fff;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: none;
}
body.ea .ea-mymain .customer-profile:hover,
body.ea .ea-mymain .bookings-item:hover{ border-color: #D8D3CE; }
body.ea .ea-mymain .empty-block{
    text-align: center;
    padding: 40px 20px;
    color: var(--ea-ink-2, #45474A);
    background: #FCFBFA;
    border-style: dashed;
}
body.ea .ea-mymain .customer-profile-img img,
body.ea .ea-mymain .customer-profile img.profile-user{
    border-radius: 10px;
    object-fit: cover;
}
body.ea .ea-mymain .customer-profile-info b,
body.ea .ea-mymain .customer-profile-info strong{ color: var(--ea-ink, #1E1E1C); }
body.ea .ea-mymain .customer-profile-desc{ color: var(--ea-ink-2, #45474A); font-size: 15px; }
body.ea .ea-mymain .customer-order-time{ color: var(--ea-muted, #71757B); font-size: 13px; }
/* Knöpfe im Innenbereich an das neue Design angleichen */
body.ea .ea-mymain .btn-primary,
body.ea .ea-mymain .user-booking-accept-btn,
body.ea .ea-mymain .user-orders-active-order-details-btn,
body.ea .ea-mymain .profile-services-add-paket-btn,
body.ea .ea-mymain .profile-gallery-edit-btn,
body.ea .ea-mymain .start-chat-btn,
body.ea .ea-mymain .bookings-invoice-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--ea-accent, #3F5AD1);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}
body.ea .ea-mymain .btn-primary:hover,
body.ea .ea-mymain .user-booking-accept-btn:hover,
body.ea .ea-mymain .user-orders-active-order-details-btn:hover,
body.ea .ea-mymain .start-chat-btn:hover,
body.ea .ea-mymain .bookings-invoice-btn:hover{ background: #3A50C8; color: #fff; }
body.ea .ea-mymain .btn-secondary,
body.ea .ea-mymain .profile-services-add-paket-cancel,
body.ea .ea-mymain .profile-services-edit-paket-cancel,
body.ea .ea-mymain .profile-video-add-item-cancel{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px;
    background: #fff;
    color: var(--ea-ink, #1E1E1C);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
/* Formulare */
body.ea .ea-mymain .form-control,
body.ea .ea-mymain .form-select{
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 15px;
    color: var(--ea-ink, #1E1E1C);
    background-color: #fff;
}
body.ea .ea-mymain .form-control:focus,
body.ea .ea-mymain .form-select:focus{
    border-color: var(--ea-accent, #3F5AD1);
    box-shadow: 0 0 0 3px rgba(74, 97, 222, .14);
    outline: 0;
}
body.ea .ea-mymain label{ font-size: 14px; color: var(--ea-ink-2, #45474A); }
/* Aufklappbare Blöcke (Leistungen, Angebote) */
body.ea .ea-mymain .profile-leistungen-header{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-mymain .profile-leistungen-block{ border-top: 1px solid var(--ea-line-2, #F2EEEB); margin-top: 12px; padding-top: 12px; }
/* Chat */
body.ea .ea-mymain .chat-messages{
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px;
    background: #FCFBFA;
}
body.ea .ea-mymain .chat-input .form-control{ border-radius: 10px; }
/* Bewertungssterne */
body.ea .ea-mymain .booking-rating-star{ color: #E0B84B; }
/* Rechnungs- und Summenblock */
body.ea .ea-mymain #order-subtotal,
body.ea .ea-mymain #order-sum,
body.ea .ea-mymain #order-tax-sum,
body.ea .ea-mymain #order-total,
body.ea .ea-mymain #order-abc-sum{ font-variant-numeric: tabular-nums; }
/* Tabellen */
body.ea .ea-mymain table{ width: 100%; border-collapse: collapse; font-size: 15px; }
body.ea .ea-mymain table th{
    text-align: left;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ea-muted, #71757B);
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ea-line, #E7E2DE);
}
body.ea .ea-mymain table td{ padding: 12px 10px; border-bottom: 1px solid var(--ea-line-2, #F2EEEB); }
/* ---------------------------------------------------------
   3. Handy und Tablet
   --------------------------------------------------------- */
@media (max-width: 900px){
body.ea .ea-mytop{ padding-top: 16px; }
body.ea .ea-mytop__in{ padding-bottom: 12px; gap: 12px; }
body.ea .ea-mytop__ava img{ width: 48px; height: 48px; }
body.ea .ea-myname{ font-size: 18px; }
body.ea .ea-mytop__view{ display: none; }
body.ea .ea-main3{ gap: 2px; }
body.ea .ea-main3 a{ flex: 1 1 0; justify-content: center; padding: 10px 8px; font-size: 15px; }
body.ea .ea-tabs{ border-radius: 10px; margin-top: 6px; }
body.ea .ea-tabs a{ padding: 8px 13px; font-size: 14px; }
body.ea .ea-mypage{ padding: 20px 0 60px; }
body.ea .ea-mycover{ height: 140px; }
body.ea .ea-mycover #profile-bg-image-text,
body.ea .ea-mycover__hint{ display: none !important; }
body.ea .ea-mycover__edit{ top: 12px; right: 12px; bottom: auto; }
body.ea .ea-mycover__edit label{ padding: 6px 12px; font-size: 13px; }
body.ea .ea-setup{ padding: 16px; }
body.ea .ea-setup__list li{ flex-wrap: wrap; }
body.ea .ea-setup__list > li > a,
body.ea .ea-setup__list > li > label{ margin-left: 38px; }
body.ea .ea-mymain h1{ font-size: 21px; }


}
/* Alte Seitennavigation ausblenden, falls eine Innenseite sie noch mitbringt */
body.ea .ea-mymain .personal-list,
body.ea .ea-mymain .profile-menu-xs{ display: none; }
/* Zusätzliche Kennzeichnung: Profil liegt zur Prüfung */
body.ea .ea-tag--wait{ background: #FBF3E3; color: var(--ea-gold, #B08327); border-color: #EFE0BF; }
/* ---------------------------------------------------------
   4. Reste des alten Stylesheets abfangen
   Das alte style-2.10.css schreibt Großbuchstaben, eigene
   Knopffarben und Abstände vor. Hier wird das im neuen
   Bereich zurückgenommen.
   --------------------------------------------------------- */
body.ea .ea-mytop,
body.ea .ea-mycover,
body.ea .ea-setup,
body.ea .ea-mypage{ font-family: var(--ea-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); }
body.ea .ea-myname,
body.ea .ea-setup h2,
body.ea .ea-mymain h1,
body.ea .ea-mymain h2,
body.ea .ea-mymain h3,
body.ea .ea-main3 a,
body.ea .ea-tabs a{ text-transform: none !important; }
/* Knöpfe der alten Innenseiten */
body.ea .ea-mymain .btn-main,
body.ea .ea-mymain .btn,
body.ea .ea-mymain .bookings-view-details-btn,
body.ea .ea-mymain .bookings-rating-btn,
body.ea .ea-mymain .bookings-invoice-details-btn,
body.ea .ea-mymain #my-profile-edit-info-btn,
body.ea .ea-mymain #my-profile-change-password-btn,
body.ea .ea-mymain #form-main-profile-btn-send,
body.ea .ea-mymain #form-main-profile-customer-btn-send,
body.ea .ea-mymain #profile-about-save-btn,
body.ea .ea-mymain #profile-imprint-save-btn,
body.ea .ea-mymain #profile-agreement-save-btn{
    background: var(--ea-accent, #3F5AD1) !important;
    border-color: var(--ea-accent, #3F5AD1) !important;
    color: #fff !important;
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600;
    padding: 10px 20px !important;
    letter-spacing: 0 !important;
}
body.ea .ea-mymain .btn-cancel,
body.ea .ea-mymain .btn-close,
body.ea .ea-mymain .order-cancel-btn,
body.ea .ea-mymain #form-main-profile-btn-cancel,
body.ea .ea-mymain #my-profile-change-password-btn-cancel{
    background: #fff !important;
    border: 1px solid var(--ea-line, #E7E2DE) !important;
    color: var(--ea-ink, #1E1E1C) !important;
    border-radius: 10px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* Abstände der alten Innenseiten etwas beruhigen */
body.ea .ea-mymain .main-profile-form-btns{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
body.ea .ea-mymain .customer-profile-desc b{ font-weight: 600; }
/* Der Veröffentlichen-Knopf trug im alten Stylesheet volle Breite und
   Großbuchstaben. Hier zurückgenommen. */
body.ea .ea-setup__foot .send-to-moderation-btn,
body.ea .ea-setup__foot .send-to-moderation-inactive-btn{
    display: inline-flex !important;
    width: auto !important;
    max-width: none;
    margin: 0 !important;
    padding: 12px 24px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 15px !important;
    border-radius: 10px !important;
}
body.ea .ea-setup__foot .send-to-moderation-btn{ background: var(--ea-accent, #3F5AD1) !important; color: #fff !important; }
body.ea .ea-setup__foot .send-to-moderation-inactive-btn{ background: #D9D6D2 !important; color: #fff !important; cursor: not-allowed; }
body.ea .ea-setup__foot p{ flex: 1 1 260px; }
/* Bootstrap-Zeilen der alten Innenseiten ragen sonst links und rechts
   um 12 Pixel über den Inhaltsbereich hinaus. */
body.ea .ea-mymain > .row,
body.ea .ea-mymain > div > .row{ margin-left: 0; margin-right: 0; }
body.ea .ea-mymain .container{ padding-left: 0; padding-right: 0; max-width: none; }
/* Auf schmalen Bildschirmen bleibt der Hinweis zum Titelbild weg. */
@media (max-width: 900px){
body.ea .ea-mycover #profile-bg-image-text,
body.ea .ea-mycover__hint{ display: none !important; }


}

/* =========================================================
   TEIL D – Neues Design: Startseite
   ========================================================= */

/* =========================================================
   Event ABC – Startseite
   Neue Datei: css/eventabc-start.css
   Wird nur auf der Startseite geladen, nach eventabc.css.

   Geschrieben fürs Handy. Die Regeln für breite Bildschirme
   stehen am Ende in einem einzigen Medienblock.

   Stand: 14.08.2026
   ========================================================= *//* ---------------------------------------------------------
   Erster Bildschirm
   --------------------------------------------------------- */
body.ea .ea-top{
    padding: 30px 0 26px;
    background: #fff;
}
body.ea .ea-top__h{
    font-family: var(--ea-serif, Georgia, serif);
    font-size: 29px;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 16px;
    text-transform: none;
}
body.ea .ea-find{
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
body.ea .ea-find__f{ padding: 11px 16px 12px; border-bottom: 1px solid var(--ea-line-2, #F2EEEB); }
body.ea .ea-find__f label{
    display: block;
    font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ea-muted, #71757B); font-weight: 700; margin-bottom: 2px;
}
body.ea .ea-find__f input,
body.ea .ea-find__f select{
    width: 100%; border: 0; padding: 0; background: none;
    font: inherit; font-size: 16.5px; color: var(--ea-ink, #1E1E1C);
    appearance: none; -webkit-appearance: none;
}
body.ea .ea-find__f input::placeholder{ color: #A9A49E; }
body.ea .ea-find__f input:focus,
body.ea .ea-find__f select:focus{ outline: 0; }
body.ea .ea-find__f:focus-within{ background: var(--ea-surface, #F5F4F3); }
body.ea .ea-find__f select{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371757B' stroke-width='1.8'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0 center; background-size: 15px;
    padding-right: 22px;
}
body.ea .ea-find__go{
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 16px; border: 0;
    background: var(--ea-accent, #3F5AD1); color: #fff;
    font: inherit; font-weight: 700; font-size: 16.5px; cursor: pointer;
}
body.ea .ea-find__go svg{
    width: 19px; height: 19px; stroke: #fff; fill: none;
    stroke-width: 2.2; stroke-linecap: round;
}
body.ea .ea-top__note{ margin: 12px 0 0; color: var(--ea-muted, #71757B); font-size: 13.5px; }
/* ---------------------------------------------------------
   Abschnitte
   --------------------------------------------------------- */
body.ea .ea-block{ padding: 28px 0; border-top: 1px solid var(--ea-line-2, #F2EEEB); }
body.ea .ea-block--tint{ background: #fff; }
body.ea .ea-block__h{
    font-family: var(--ea-serif, Georgia, serif);
    font-size: 23px; line-height: 1.2; margin: 0 0 3px; text-transform: none;
}
body.ea .ea-block__s{ color: var(--ea-muted, #71757B); font-size: 14.5px; margin: 0 0 16px; }
body.ea .ea-block__more{ margin: 14px 0 0; }
/* Waagerecht wischen */
body.ea .ea-slide{
    display: flex;
    gap: 11px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * clamp(18px, 2.6vw, 32px));
    padding: 0 clamp(18px, 2.6vw, 32px) 4px;
    /* ohne diese Zeile rastet die erste Kachel am Bildschirmrand ein */
    scroll-padding-left: clamp(18px, 2.6vw, 32px);
}
body.ea .ea-slide::-webkit-scrollbar{ display: none; }
body.ea .ea-occ2{ flex: 0 0 auto; width: 134px; scroll-snap-align: start; text-decoration: none; color: inherit; }
body.ea .ea-occ2__i{ display: block; height: 96px; border-radius: 10px; overflow: hidden; background: var(--ea-blush, #F3F1EF); }
body.ea .ea-occ2__i img{ width: 100%; height: 100%; object-fit: cover; display: block; }
body.ea .ea-occ2 b{ display: block; margin-top: 8px; font-size: 15px; font-weight: 600; }
body.ea .ea-post{ flex: 0 0 auto; width: 210px; scroll-snap-align: start; text-decoration: none; color: inherit; }
body.ea .ea-post__i{ display: block; height: 118px; border-radius: 10px; overflow: hidden; background: var(--ea-blush, #F3F1EF); }
body.ea .ea-post__i img{ width: 100%; height: 100%; object-fit: cover; display: block; }
body.ea .ea-post b{ display: block; margin-top: 9px; font-size: 15px; font-weight: 600; line-height: 1.3; }
/* Gewerke */
body.ea .ea-cats2{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.ea .ea-cat2{
    display: flex; align-items: center; gap: 10px;
    padding: 13px 14px;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px; background: #fff;
    text-decoration: none; color: inherit;
    font-size: 15px; font-weight: 600; line-height: 1.25;
}
body.ea .ea-cat2__p{ width: 34px; height: 34px; border-radius: 10px; background: var(--ea-accent-soft, #EEF1FE); flex: 0 0 auto; }
body.ea .ea-cat2__t{ min-width: 0; }
/* Anbieterkarten – zwei nebeneinander */
body.ea .ea-cards2{ display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
body.ea .ea-c{
    position: relative;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px; overflow: hidden; background: #fff;
}
body.ea .ea-c__m{ display: block; height: 108px; background: var(--ea-blush, #F3F1EF); }
body.ea .ea-c__m img{ width: 100%; height: 100%; object-fit: cover; display: block; }
body.ea .ea-c__b{ padding: 11px 12px 13px; }
body.ea .ea-c__n{ display: block; font-size: 15px; font-weight: 600; line-height: 1.25; color: inherit; text-decoration: none; }
body.ea .ea-c__k{ margin: 1px 0 0; color: var(--ea-muted, #71757B); font-size: 12.5px; }
body.ea .ea-c__z{ display: flex; align-items: center; gap: 6px; margin: 7px 0 0; font-size: 13px; }
body.ea .ea-c__st{ color: var(--ea-ink, #1E1E1C); }
body.ea .ea-c__p{ margin-left: auto; font-weight: 700; white-space: nowrap; }
body.ea .ea-c__fav{
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
/* Schritte */
body.ea .ea-steps2{ display: grid; gap: 0; }
body.ea .ea-step2{ display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--ea-line-2, #F2EEEB); }
body.ea .ea-step2:first-child{ border-top: 0; padding-top: 0; }
body.ea .ea-step2__n{
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ea-ink, #1E1E1C); color: #fff; flex: 0 0 auto;
    font-weight: 700; line-height: 34px; text-align: center; font-size: 15px;
}
body.ea .ea-step2 b{ display: block; font-size: 16.5px; }
body.ea .ea-step2 p{ margin: 2px 0 0; color: var(--ea-ink-2, #45474A); font-size: 14.5px; }
/* Für Dienstleister */
body.ea .ea-promo{ background: var(--ea-ink, #1E1E1C); color: #fff; border-radius: 10px; padding: 22px 18px; }
body.ea .ea-promo__h{ font-family: var(--ea-serif, Georgia, serif); font-size: 22px; margin: 0 0 6px; line-height: 1.2; text-transform: none; }
body.ea .ea-promo p{ margin: 0 0 16px; color: #D6D2CE; font-size: 14.5px; }
body.ea .ea-promo__b{
    display: flex; align-items: center; justify-content: center;
    padding: 14px; border-radius: 10px; background: #fff;
    color: var(--ea-ink, #1E1E1C); font-weight: 700; font-size: 16px; text-decoration: none;
}
/* ---------------------------------------------------------
   Fester Balken am unteren Rand (nur Handy)
   --------------------------------------------------------- */
body.ea .ea-bar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--ea-line, #E7E2DE);
}
body.ea .ea-bar__t{ flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ea-muted, #71757B); line-height: 1.3; }
body.ea .ea-bar__t b{ display: block; color: var(--ea-ink, #1E1E1C); font-size: 14.5px; }
body.ea .ea-bar__b{
    flex: 0 0 auto; border: 0; border-radius: 10px;
    background: var(--ea-accent, #3F5AD1); color: #fff;
    padding: 13px 18px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
/* Platz, damit der Balken nichts verdeckt */
body.ea.ea-start{ padding-bottom: 74px; }
/* ---------------------------------------------------------
   Breite Bildschirme
   --------------------------------------------------------- */
@media (min-width: 901px){
body.ea .ea-top{ padding: 62px 0 54px; text-align: center; }
body.ea .ea-top__h{ font-size: 48px; max-width: 17ch; margin: 0 auto 22px; }
body.ea .ea-find{
        display: flex; align-items: stretch;
        max-width: 940px; margin: 0 auto;
        border-radius: 10px; text-align: left;
    }
body.ea .ea-find__f{
        flex: 1 1 0; border-bottom: 0;
        border-right: 1px solid var(--ea-line-2, #F2EEEB);
        padding: 13px 26px;
    }
body.ea .ea-find__go{ width: auto; flex: 0 0 auto; padding: 0 32px; }
body.ea .ea-top__note{ margin-top: 16px; }
body.ea .ea-block{ padding: 46px 0; }
body.ea .ea-block__h{ font-size: 30px; }
body.ea .ea-block__s{ margin-bottom: 22px; }
body.ea .ea-slide{ display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0; padding: 0; }
body.ea .ea-occ2{ width: auto; }
body.ea .ea-occ2__i{ height: 132px; }
body.ea .ea-post{ width: auto; }
body.ea .ea-post__i{ height: 148px; }
body.ea .ea-cats2{ grid-template-columns: repeat(4, 1fr); }
body.ea .ea-cards2{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.ea .ea-c__m{ height: 168px; }
body.ea .ea-steps2{ grid-template-columns: repeat(3, 1fr); gap: 26px; }
body.ea .ea-step2{ border-top: 0; padding: 0; }
body.ea .ea-promo{ display: flex; align-items: center; gap: 30px; padding: 32px 34px; }
body.ea .ea-promo > div{ flex: 1 1 auto; }
body.ea .ea-promo__b{ flex: 0 0 auto; padding: 14px 30px; }
body.ea .ea-bar{ display: none; }
body.ea.ea-start{ padding-bottom: 0; }



}
/* ---------------------------------------------------------
   Cookie-Hinweis und fester Balken kommen sich sonst in die Quere
   --------------------------------------------------------- */


body.ea-start #accept-cookies-block{ bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 1045; }
@media (min-width: 901px){
body.ea.ea-start #accept-cookies-block{ bottom: 14px; }


}

/* =========================================================
   TEIL E – Startseite, ruhige Fassung („Luft statt Linien“)
   Stand 15.08.2026, beschlossen nach dem Vergleich mit apple.com

   Grundgedanken:
   – Abschnitte werden durch Abstand getrennt, nicht durch Linien.
   – Eine Aussage pro Abschnitt, Überschrift deutlich größer.
   – Bilder werden groß, Rahmen fallen weg; die Farbe kommt aus den Fotos.
   – Blau nur für Handlungen.

   Steht bewusst am Ende der Datei: gleiche Spezifität wie TEIL D,
   die spätere Regel gewinnt. Nichts hier oben löschen.
   ========================================================= */

body.ea-start{ --ea-luft: 74px; }

/* ---------- Kopf und erster Bildschirm ---------- */
body.ea.ea-start .ea-header{ border-bottom: 0; background: #fff; }
body.ea .ea-top{ padding: 44px 0 var(--ea-luft); text-align: center; }
body.ea .ea-top__h{ font-size: 40px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; }
body.ea .ea-top__vor{
    font-size: 17px; line-height: 1.5; color: var(--ea-ink-2, #45474A);
    max-width: 34ch; margin: 0 auto 28px;
}
body.ea .ea-top__note{ margin-top: 18px; }

/* ---------- Abschnitte ---------- */
body.ea .ea-block,
body.ea .ea-block--tint{
    border-top: 0; border-bottom: 0; background: #fff;
    padding: 0 0 var(--ea-luft); text-align: center;
}
body.ea .ea-block__h{ font-size: 32px; line-height: 1.15; letter-spacing: -.015em; margin: 0 0 8px; }
body.ea .ea-block__s{
    font-size: 17px; line-height: 1.5; color: var(--ea-ink-2, #45474A);
    max-width: 36ch; margin: 0 auto 30px;
}
body.ea .ea-block__more{ margin-top: 26px; }
body.ea .ea-block__more .ea-link{ font-size: 17px; }

/* ---------- Anlässe: Raster statt Wischleiste ---------- */
body.ea .ea-slide{
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    overflow: visible; margin: 0; padding: 0;
}
body.ea .ea-occ2{ width: auto; }
body.ea .ea-occ2__i{ height: 150px; border-radius: 14px; }
body.ea .ea-occ2 b{ margin-top: 12px; font-size: 17px; }
body.ea .ea-post{ width: auto; }
body.ea .ea-post__i{ height: 150px; border-radius: 14px; }

/* ---------- Gewerke: Textpillen statt Kacheln ---------- */
body.ea .ea-cats2{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
body.ea .ea-cat2{
    border: 0; background: #F5F4F3; border-radius: 100px;
    padding: 11px 18px; font-size: 16px; gap: 0;
}
body.ea .ea-cat2__p{ display: none; }

/* ---------- Anbieter: Bild, Name, Zeile – kein Kasten ---------- */
body.ea .ea-cards2{ gap: 16px; text-align: left; }
body.ea .ea-c{ border: 0; border-radius: 0; overflow: visible; }
/* Anbieterkarte: grosses Arbeitsfoto, darauf das Profilbild im Kreis. */
body.ea .ea-c__m{ height: auto; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; position: relative; }
body.ea .ea-c__m img.ea-c__av{
    position: absolute; left: 10px; bottom: 10px; z-index: 2;
    width: 46px; height: 46px; border-radius: 50%;
    border: 3px solid #fff; object-fit: cover; background: #fff;
    box-shadow: 0 1px 4px rgba(23, 24, 26, .18);
}
body.ea .ea-c__b{ padding: 12px 2px 0; }
body.ea .ea-c__n{ font-size: 17px; }
body.ea .ea-c__k{ font-size: 14px; }
body.ea .ea-c__z{ font-size: 14.5px; }
body.ea .ea-c__fav{ top: 10px; right: 10px; }

/* ---------- Schritte: untereinander, große Ziffer ---------- */
body.ea .ea-steps2{ display: block; }
body.ea .ea-step2{
    display: block; border-top: 0; padding: 0 0 var(--ea-luft); text-align: center;
}
body.ea .ea-step2:last-child{ padding-bottom: 0; }
body.ea .ea-step2__n{
    width: auto; height: auto; background: none; border-radius: 0;
    font-family: var(--ea-serif, Georgia, serif); font-size: 52px; font-weight: 400;
    line-height: 1; color: var(--ea-blue, #8096F8); display: block; margin: 0 0 10px;
}
body.ea .ea-step2 b{
    font-family: var(--ea-serif, Georgia, serif); font-weight: 400;
    font-size: 32px; letter-spacing: -.015em; line-height: 1.15;
}
body.ea .ea-step2 p{ font-size: 17px; max-width: 34ch; margin: 8px auto 0; }

/* ---------- Für Dienstleister: kein dunkler Klotz ---------- */
body.ea .ea-promo{
    background: #fff; color: var(--ea-ink, #1E1E1C);
    border-radius: 0; padding: 0; text-align: center;
}
body.ea .ea-promo__h{ font-size: 32px; letter-spacing: -.015em; margin: 0 0 8px; }
body.ea .ea-promo p{ color: var(--ea-ink-2, #45474A); font-size: 17px; max-width: 36ch; margin: 0 auto 26px; }
body.ea .ea-promo__b{
    display: inline-flex; background: var(--ea-accent, #3F5AD1); color: #fff;
    border-radius: 100px; padding: 15px 30px;
}

/* =========================================================
   Breite Bildschirme
   ========================================================= */
@media (min-width: 901px){
    body.ea-start{ --ea-luft: 130px; }

    body.ea .ea-top{ padding: 96px 0 var(--ea-luft); }
    body.ea .ea-top__h{ font-size: 76px; max-width: 13ch; margin: 0 auto 20px; letter-spacing: -.025em; }
    body.ea .ea-top__vor{ font-size: 21px; max-width: 46ch; margin-bottom: 40px; }
    body.ea .ea-find{ max-width: 840px; }

    body.ea .ea-block,
    body.ea .ea-block--tint{ padding: 0 0 var(--ea-luft); }
    body.ea .ea-block__h{ font-size: 52px; letter-spacing: -.02em; margin-bottom: 10px; }
    body.ea .ea-block__s{ font-size: 20px; max-width: 52ch; margin-bottom: 48px; }

    body.ea .ea-slide{ grid-template-columns: repeat(3, 1fr); gap: 26px; }
    body.ea .ea-occ2__i{ height: 260px; border-radius: 18px; }
    body.ea .ea-occ2 b{ font-size: 21px; }
    body.ea .ea-post__i{ height: 260px; border-radius: 18px; }

    body.ea .ea-cat2{ font-size: 19px; padding: 14px 26px; }

    body.ea .ea-cards2{ grid-template-columns: repeat(4, 1fr); gap: 30px; }
    body.ea .ea-c__m{ height: auto; aspect-ratio: 4 / 3; border-radius: 18px; }
    body.ea .ea-c__m img.ea-c__av{ left: 14px; bottom: 14px; width: 58px; height: 58px; border-width: 3px; }
    body.ea .ea-c__n{ font-size: 19px; }

    /* Am Bildschirm nebeneinander in drei Spalten - untereinander wuerde der
       Abschnitt sonst einen halben Bildschirm fuer drei Saetze verbrauchen. */
    body.ea .ea-steps2{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; align-items: start; }
    body.ea .ea-step2{ padding: 0; }
    body.ea .ea-step2__n{ font-size: 60px; margin-bottom: 6px; }
    body.ea .ea-step2 b{ font-size: 30px; }
    body.ea .ea-step2 p{ font-size: 18px; max-width: 34ch; margin: 10px auto 0; }

    body.ea .ea-promo{ display: block; padding: 0; }
    body.ea .ea-promo__h{ font-size: 52px; letter-spacing: -.02em; }
    body.ea .ea-promo p{ font-size: 20px; max-width: 50ch; margin-bottom: 36px; }
}

/* ---------- Anlass-Knopfzeile unter der Suche ---------- */
body.ea .ea-anl{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 18px 0 0;
}
body.ea .ea-anl a{
    display: inline-block; padding: 8px 15px; border-radius: 100px;
    background: #F5F4F3; color: var(--ea-ink, #1E1E1C);
    font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
body.ea .ea-anl a:hover{ background: var(--ea-accent-soft, #EEF1FE); color: var(--ea-accent, #3F5AD1); }

/* ---------- Ein einziges getöntes Band: der Ablauf ----------
   Sonst laufen auf der weissen Seite drei Textabschnitte ineinander.
   Bewusst nur an dieser einen Stelle, sonst verliert es die Wirkung. */
body.ea .ea-block--band{
    background: #F7F6F5;
    padding-top: var(--ea-luft);
    margin-bottom: var(--ea-luft);
}
body.ea .ea-block--band + .ea-block{ padding-top: 0; }

@media (min-width: 901px){
    body.ea .ea-anl{ gap: 10px; margin-top: 24px; }
    body.ea .ea-anl a{ font-size: 16px; padding: 10px 20px; }
}

/* =========================================================
   TEIL F – Kontaktwege im Anbieterprofil
   Stand 17.08.2026

   Die Adressen zeigen auf /kontakt/<art>/<id>, nie auf die echte
   Nummer. Der Server zählt den Klick und leitet erst dann weiter.
   ========================================================= */

body.ea .ea-wege{
    display: flex; flex-wrap: wrap; gap: 10px;
    /* mittig, weil Knopf und Hinweistext darüber ebenfalls mittig stehen */
    justify-content: center;
    margin: 16px 0 0; padding-top: 16px;
    border-top: 1px solid var(--ea-line-2, #F2EEEB);
}
body.ea .ea-weg{
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--ea-line, #E7E2DE); background: #fff;
    display: inline-grid; place-items: center;
    color: var(--ea-ink, #1E1E1C); transition: border-color .15s, background .15s;
}
body.ea .ea-weg:hover{ border-color: var(--ea-accent, #3F5AD1); background: var(--ea-accent-soft, #EEF1FE); color: var(--ea-accent, #3F5AD1); }
body.ea .ea-weg svg{ width: 21px; height: 21px; display: block; }
body.ea .ea-wege__hinweis{
    margin: 10px 0 0; font-size: 13px; line-height: 1.45;
    color: var(--ea-muted, #71757B); text-align: center;
}

@media (max-width: 767.98px){
    /* Am Handy ist die Anfrage-Leiste unten fest; die Wege dürfen darüber
       nicht zu viel Platz nehmen. */
    body.ea .ea-weg{ width: 44px; height: 44px; }
}

/* ---------------------------------------------------------
   Anfragekasten: Abstand zum Titelbild
   Die linke Spalte schiebt ihr Profilbild bewusst über das
   Titelbild (margin-top:-54px). Die rechte Spalte hatte diesen
   Ausgleich nicht und klebte dadurch unmittelbar am Bildrand.
   --------------------------------------------------------- */
@media (min-width: 992px){
    /* Beide Spalten beginnen auf einer Linie: Die linke zieht ihr Profilbild
       54 px über das Titelbild, die rechte tut jetzt dasselbe. Dadurch haben
       Profilbild und Anfragekasten dieselbe Oberkante. */
    body.ea .ea-profile > aside{ margin-top: -54px; }
}

/* ---------------------------------------------------------
   TEIL G — Anfragekasten bleibt beim Scrollen stehen
   Der Kasten hatte schon position:sticky, konnte sich aber
   nicht bewegen: das umgebende <aside> ist im Raster nur so
   hoch wie sein Inhalt, und ein klebendes Element kann seinen
   eigenen Kasten nicht verlassen. Deshalb klebt jetzt das
   <aside> selbst – der Kasten haengt unter der Kopfzeile,
   bis die Seite zu Ende gescrollt ist.
   --------------------------------------------------------- */
@media (min-width: 992px){
    body.ea .ea-profile > aside{
        position: sticky;
        top: calc(var(--ea-header-h) + 18px);
        align-self: start;
        margin-top: -54px;
        z-index: 5;
    }
    body.ea .ea-ask{ position: static; top: auto; }
}

/* ---------------------------------------------------------
   TEIL H — Anfrageformular klappt im Kasten auf
   Statt eines Überblendfensters öffnet sich das Formular an
   Ort und Stelle: auf dem Bildschirm im Anfragekasten, am
   Handy als volle Fläche, weil der Kasten dort am Seitenende
   steht. Es ist beide Male dasselbe Formular.
   --------------------------------------------------------- */

body.ea .ea-anfrage{
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ea-line-2);
    text-align: left;
}
body.ea .ea-anfrage[hidden]{ display: none; }

body.ea .ea-anfrage--auf{ animation: ea-anfrage-auf .26s ease both; }
@keyframes ea-anfrage-auf{
    from{ opacity: 0; transform: translateY(-6px); }
    to  { opacity: 1; transform: none; }
}

body.ea .ea-anfrage__kopf{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px;
}
body.ea .ea-anfrage__titel{
    font-family: var(--ea-serif); font-weight: 400;
    font-size: 19px; line-height: 1.2; margin: 0;
}
body.ea .ea-anfrage__zu{
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--ea-line); background: #fff;
    display: inline-grid; place-items: center; cursor: pointer;
    color: var(--ea-ink);
}
body.ea .ea-anfrage__zu svg{ width: 17px; height: 17px; display: block; }
body.ea .ea-anfrage__zu:hover{ background: var(--ea-surface); }
body.ea .ea-anfrage__fuss{ margin-top: 16px; }

/* Solange das Formular offen ist, tritt der Rest des Kastens zurück. */
body.ea .ea-ask--offen .ea-wege,
body.ea .ea-ask--offen .ea-wege__hinweis,
body.ea .ea-ask--offen .ea-ask__hint{ display: none; }

/* Im Kasten wird nirgends gescrollt. Passt das offene Formular nicht auf
   den Bildschirm, gibt die rechte Spalte das Kleben auf und die Seite
   scrollt wie gewohnt weiter. Das entscheidet sich beim Öffnen. */
@media (min-width: 992px){
    body.ea .ea-profile > aside.ea-aside--frei{ position: static; }
}
body.ea .ea-ask{ scroll-margin-top: calc(var(--ea-header-h) + 18px); }

/* Zwei Felder nebeneinander bleiben auch im schmalen Kasten stehen –
   das Formular wird dadurch spürbar kürzer. */
body.ea .ea-anfrage .ea-grid--2{ gap: 8px; }
body.ea .ea-anfrage .form-control{ min-width: 0; }

/* Im Klappfeld steht der Name des Anbieters schon groß über der Seite –
   die Zeile „Anfrage an: …" spart dort nur Höhe. Im Überblendfenster
   der Kategorieseite bleibt sie, dort können es mehrere sein. */
body.ea .ea-anfrage #ea-guest-names{ display: none; }

@media (max-width: 991.98px){
    body.ea .ea-anfrage{
        position: fixed; inset: 0; z-index: 1050;
        margin: 0; padding: 18px clamp(16px,4vw,22px) 26px;
        border-top: 0; background: #fff;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    body.ea .ea-anfrage__kopf{
        position: sticky; top: -18px; z-index: 2;
        background: #fff; margin: -18px 0 6px; padding: 16px 0 12px;
        border-bottom: 1px solid var(--ea-line-2);
    }
    body.ea .ea-anfrage__titel{ font-size: 21px; }
    body.ea .ea-anfrage__fuss{
        position: sticky; bottom: -26px; background: #fff;
        margin-top: 18px; padding: 12px 0 16px;
        border-top: 1px solid var(--ea-line-2);
    }
    body.ea-anfrage-offen{ overflow: hidden; }
    body.ea-anfrage-offen .ea-askbar{ display: none; }
}

@media (max-width: 479.98px){
    /* Auf schmalen Geräten stehen auch im Formular alle Felder untereinander. */
    body.ea .ea-anfrage .ea-grid--2{ grid-template-columns: 1fr; }
}

/* =========================================================
   TEIL I — Dienstleisterbereich (Fassung 3)
   Linke Karte mit Person und Menü, rechts der Inhalt.
   Alles auf ruhigem Grund, weiße Karten, Haarlinien.
   ========================================================= */

body.ea .ea-b{ position: relative; display: grid; grid-template-columns: 296px minmax(0,1fr);
    gap: 26px; align-items: start; padding: 26px 0 70px; }
body.ea .ea-b::before{ content:""; position: fixed; inset: 0; background: var(--ea-surface); z-index: -1; }

body.ea .ea-b__karte{ background:#fff; border:1px solid var(--ea-line-2); border-radius:16px; }

/* ---------- linke Karte ---------- */
body.ea .ea-b__seite{ position: sticky; top: 26px; }
body.ea .ea-b__ich{ padding: 24px 20px; }
body.ea .ea-b__kopf{ display:flex; gap:14px; align-items:center; }
body.ea .ea-b__ava{ position:relative; width:58px; height:58px; flex:0 0 auto; }
body.ea .ea-b__ava img{ width:58px; height:58px; border-radius:50%; object-fit:cover;
    border:1px solid var(--ea-line); background:#fff; display:block; }
body.ea .ea-b__ava label{ position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%;
    background:var(--ea-accent); color:#fff; display:grid; place-items:center; font-size:15px; line-height:1;
    cursor:pointer; border:2px solid #fff; }
body.ea .ea-b__name{ font-size:16.5px; font-weight:600; line-height:1.25; }
body.ea .ea-b__rolle{ color:var(--ea-muted); font-size:14px; }

body.ea .ea-b__stufe{ display:inline-flex; align-items:center; gap:7px; margin-top:18px; padding:7px 13px;
    border-radius:20px; background:#EEF1FC; color:var(--ea-accent-dark); font-size:13.5px; line-height:1.3; }
body.ea .ea-b__stufe i{ width:7px; height:7px; border-radius:50%; background:var(--ea-accent); display:block; flex:0 0 auto; }
body.ea .ea-b__stufe--aus{ background:var(--ea-surface); color:var(--ea-muted); }
body.ea .ea-b__stufe--aus i{ background:#BFC3C8; }

body.ea .ea-b__linie{ height:1px; background:var(--ea-line-2); margin:20px 0; }

body.ea .ea-b__menu{ display:flex; flex-direction:column; gap:3px; }
body.ea .ea-b__menu a{ padding:11px 15px; border-radius:10px; font-size:15.5px; color:var(--ea-ink-2,#3B3D40);
    text-decoration:none; display:flex; align-items:center; gap:9px; }
body.ea .ea-b__menu a:hover{ background:var(--ea-surface); }
body.ea .ea-b__menu a.on{ background:var(--ea-ink); color:#fff; }
body.ea .ea-b__num{ margin-left:auto; min-width:21px; height:21px; padding:0 6px; border-radius:11px;
    background:var(--ea-accent); color:#fff; font-size:12px; display:grid; place-items:center; }
body.ea .ea-b__menu a.on .ea-b__num{ background:#fff; color:var(--ea-ink); }
body.ea .ea-b__menu--fuss a{ color:var(--ea-muted); font-size:15px; }

/* ---------- Inhalt ---------- */
body.ea .ea-b__hut{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ea-accent); margin:6px 0 10px; }
body.ea .ea-b__h1{ font-family:var(--ea-serif); font-weight:400; font-size:clamp(27px,3vw,38px);
    line-height:1.14; margin:0 0 8px; }
body.ea .ea-b__lead{ color:var(--ea-muted); margin:0 0 26px; max-width:60ch; }
body.ea .ea-b__klein{ color:var(--ea-muted); font-size:13.5px; }
body.ea .ea-b__fuss{ color:var(--ea-muted); font-size:13.5px; margin:20px 0 0; padding:0 4px; }

body.ea .ea-b__kacheln{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:22px; }
body.ea .ea-b__kachel{ padding:26px 22px; text-align:center; }
body.ea .ea-b__kachel b{ display:block; font-family:var(--ea-serif); font-weight:400; font-size:34px;
    line-height:1.05; letter-spacing:-.01em; }
body.ea .ea-b__kachel span{ display:block; margin-top:10px; font-size:12px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ea-muted); }

body.ea .ea-b__block{ padding:26px 26px 8px; }
body.ea .ea-b__blockkopf{ display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
body.ea .ea-b__blockt{ font-size:19px; font-weight:600; }
body.ea .ea-b__mehr{ margin-left:auto; color:var(--ea-accent); font-size:14.5px; text-decoration:none; }
body.ea .ea-b__mehr:hover{ text-decoration:underline; }
body.ea .ea-b__leerzeile{ color:var(--ea-muted); padding:16px 0 22px; margin:0; max-width:60ch; }

body.ea .ea-b__zeile{ display:flex; align-items:flex-start; gap:16px; padding:18px 0;
    border-bottom:1px solid var(--ea-line-2); }
body.ea .ea-b__zeile:last-child{ border-bottom:0; }
body.ea .ea-b__zl{ min-width:0; flex:1; }
body.ea .ea-b__zt{ font-weight:600; }
body.ea .ea-b__zm{ color:var(--ea-muted); font-size:14.5px; margin-top:3px; }
body.ea .ea-b__zr{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
body.ea .ea-b__chip{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px;
    border-radius:20px; border:1px solid var(--ea-line); color:var(--ea-muted); white-space:nowrap; }
body.ea .ea-b__chip--neu{ background:var(--ea-accent); border-color:var(--ea-accent); color:#fff; }
body.ea .ea-b__chip--ok{ background:#EAF3EE; border-color:#CFE3D8; color:#2F7A4F; }
body.ea .ea-b__pfeil{ color:var(--ea-accent); font-size:14.5px; white-space:nowrap; text-decoration:none; }
body.ea .ea-b__pfeil:hover{ text-decoration:underline; }

/* ---------- Einrichtung ---------- */
body.ea .ea-b__setup{ padding:24px 26px; margin-bottom:22px; }
body.ea .ea-b__setupkopf{ display:flex; align-items:flex-start; gap:18px; }
body.ea .ea-b__setupzahl{ margin-left:auto; font-family:var(--ea-serif); font-size:26px; color:var(--ea-muted); }
body.ea .ea-b__balken{ height:4px; border-radius:3px; background:var(--ea-line-2); margin:16px 0 4px; overflow:hidden; }
body.ea .ea-b__balken span{ display:block; height:100%; background:var(--ea-accent); border-radius:3px; }
body.ea .ea-b__schritte{ list-style:none; margin:12px 0 0; padding:0; }
body.ea .ea-b__schritte li{ display:flex; align-items:baseline; gap:12px; padding:11px 0;
    border-bottom:1px solid var(--ea-line-2); }
body.ea .ea-b__schritte li span{ margin-left:auto; font-size:14.5px; color:var(--ea-accent); cursor:pointer; }
body.ea .ea-b__schritte li span a{ color:inherit; text-decoration:none; }
body.ea .ea-b__schritte li.fertig b{ color:var(--ea-muted); font-weight:400; }
body.ea .ea-b__schritte li.fertig span{ color:#2F7A4F; cursor:default; }
body.ea .ea-b__setupfuss{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px; }

/* ---------- Titelbild ---------- */
body.ea .ea-b__cover{ position:relative; overflow:hidden; margin-bottom:22px; }
body.ea .ea-b__cover img{ display:block; width:100%; height:210px; object-fit:cover; }
body.ea .ea-b__coveredit label{ position:absolute; right:14px; top:14px; background:rgba(255,255,255,.94);
    border:1px solid var(--ea-line); border-radius:9px; padding:8px 14px; font-size:14px; cursor:pointer; }
body.ea .ea-b__coverhint{ position:absolute; left:16px; bottom:14px; color:#fff; font-size:12.5px;
    text-shadow:0 1px 3px rgba(0,0,0,.5); }

/* ---------- Stapel ---------- */
body.ea .ea-b__gt{ padding:24px 26px 0; font-size:12.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ea-muted); }
body.ea .ea-b__rows{ padding:4px 26px 10px; }
body.ea .ea-b__row{ display:grid; grid-template-columns:190px minmax(0,1fr) auto; gap:20px;
    align-items:baseline; padding:16px 0; border-bottom:1px solid var(--ea-line-2); }
body.ea .ea-b__row:last-child{ border-bottom:0; }
body.ea .ea-b__row .k{ color:var(--ea-muted); font-size:14.5px; }
body.ea .ea-b__row .v{ color:var(--ea-ink-2,#3B3D40); min-width:0; }
body.ea .ea-b__row .leer{ color:#A9ADB3; }
body.ea .ea-b__row .a{ color:var(--ea-accent); font-size:14.5px; white-space:nowrap; text-decoration:none; }
body.ea .ea-b__row .a:hover{ text-decoration:underline; }
body.ea .ea-b__hinweisband{ margin:0 26px 6px; padding:14px 16px; border-radius:11px;
    background:var(--ea-surface); color:var(--ea-ink-2,#3B3D40); font-size:14.5px; }

/* ---------- Formular ---------- */
body.ea .ea-b__form{ padding:26px; }
body.ea .ea-b__feld{ display:block; margin-bottom:16px; max-width:460px; }
body.ea .ea-b__feld span{ display:block; font-size:14px; color:var(--ea-muted); margin-bottom:5px; }
body.ea .ea-b__feld em{ display:block; font-style:normal; font-size:13px; color:#A9ADB3; margin-top:5px; }
body.ea .ea-b__feld input{ width:100%; font:inherit; font-size:15px; color:var(--ea-ink); background:#fff;
    border:1px solid var(--ea-line); border-radius:9px; padding:11px 13px; }
body.ea .ea-b__feld input:focus{ outline:0; border-color:var(--ea-accent); box-shadow:0 0 0 3px rgba(63,90,209,.13); }
body.ea .ea-b__tun{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; }

/* ---------- Zahlen ---------- */
body.ea .ea-b__zz{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:6px 26px 10px; }
body.ea .ea-b__zi{ padding:22px 0; border-bottom:1px solid var(--ea-line-2); }
body.ea .ea-b__zi:nth-child(odd){ padding-right:26px; }
body.ea .ea-b__zi:nth-child(even){ padding-left:26px; border-left:1px solid var(--ea-line-2); }
body.ea .ea-b__zi .n{ font-family:var(--ea-serif); font-size:40px; line-height:1; }
body.ea .ea-b__zi .k{ color:var(--ea-muted); font-size:14.5px; margin-top:7px; }
body.ea .ea-b__zi .d{ color:#A9ADB3; font-size:13px; margin-top:3px; }
body.ea .ea-b__band{ background:#fff; border:1px solid var(--ea-line-2); border-radius:16px;
    padding:22px 26px; margin-top:22px; }
body.ea .ea-b__band b{ display:block; font-family:var(--ea-serif); font-size:20px; font-weight:400; margin-bottom:6px; }
body.ea .ea-b__band p{ margin:0; color:var(--ea-ink-2,#3B3D40); font-size:15px; max-width:62ch; }
body.ea .ea-b__monate{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
body.ea .ea-b__monate a{ padding:8px 14px; border-radius:20px; border:1px solid var(--ea-line);
    background:#fff; font-size:14px; color:var(--ea-ink-2,#3B3D40); text-decoration:none; }
body.ea .ea-b__monate a.on{ background:var(--ea-ink); border-color:var(--ea-ink); color:#fff; }

/* ---------- alte Seiten in der neuen Hülle ---------- */
body.ea .ea-b__alt{ padding:26px; }

@media (max-width: 900px){
    body.ea .ea-b{ grid-template-columns:1fr; gap:18px; padding-top:18px; }
    body.ea .ea-b__seite{ position:static; }
    body.ea .ea-b__ich{ padding:18px; }
    body.ea .ea-b__menu{ flex-direction:row; overflow-x:auto; gap:6px; scrollbar-width:none; }
    body.ea .ea-b__menu::-webkit-scrollbar{ display:none; }
    body.ea .ea-b__menu a{ white-space:nowrap; padding:9px 14px; }
    body.ea .ea-b__num{ margin-left:6px; }
    body.ea .ea-b__menu--fuss{ display:none; }
    body.ea .ea-b__kacheln{ grid-template-columns:1fr; gap:12px; }
    body.ea .ea-b__kachel{ display:flex; align-items:baseline; gap:14px; text-align:left; padding:18px 20px; }
    body.ea .ea-b__kachel b{ font-size:27px; }
    body.ea .ea-b__kachel span{ margin-top:0; }
    body.ea .ea-b__zz{ grid-template-columns:1fr; }
    body.ea .ea-b__zi:nth-child(odd),
    body.ea .ea-b__zi:nth-child(even){ padding-left:0; padding-right:0; border-left:0; }
    body.ea .ea-b__row{ grid-template-columns:1fr auto; gap:2px 16px; }
    body.ea .ea-b__row .k{ grid-column:1/3; font-size:13.5px; }
    body.ea .ea-b__zeile{ flex-direction:column; gap:10px; }
    body.ea .ea-b__block,
    body.ea .ea-b__rows,
    body.ea .ea-b__zz,
    body.ea .ea-b__setup,
    body.ea .ea-b__form,
    body.ea .ea-b__alt{ padding-left:18px; padding-right:18px; }
    body.ea .ea-b__gt{ padding-left:18px; padding-right:18px; }
    body.ea .ea-b__hinweisband{ margin-left:18px; margin-right:18px; }
    body.ea .ea-b__cover img{ height:150px; }
}

/* Die Überschriften im Bereich sind Fließtext, keine Versalien. */
body.ea .ea-b__h1{ text-transform: none; letter-spacing: -.005em; }
body.ea .ea-b__blockt{ text-transform: none; }

/* Schmale Kopfzeile im Dienstleisterbereich */
body.ea .ea-header__bereich{ margin-right:auto; margin-left:4px; padding-left:20px;
    border-left:1px solid var(--ea-line); font-size:12.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ea-muted); white-space:nowrap; }
body.ea .ea-header--bereich .ea-header__right{ margin-left:auto; }
@media (max-width: 600px){ body.ea .ea-header__bereich{ display:none; } }

/* Schmale Fußzeile im Dienstleisterbereich */
body.ea .ea-footer--schmal{ background:transparent; color:var(--ea-muted);
    border-top:1px solid var(--ea-line); padding:22px 0 44px; }
body.ea .ea-footer__schmal{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:13.5px; }
body.ea .ea-footer__schmal nav{ margin-left:auto; display:flex; gap:18px; flex-wrap:wrap; }
body.ea .ea-footer--schmal a{ color:var(--ea-muted); text-decoration:none; }
body.ea .ea-footer--schmal a:hover{ color:var(--ea-ink); text-decoration:underline; }

/* Anfragen: Text und Antwortfeld */
body.ea .ea-b__ztxt{ color:var(--ea-ink-2,#3B3D40); margin:10px 0 0; max-width:64ch; }
body.ea .ea-b__angebot{ margin:12px 0 0; color:var(--ea-ink-2,#3B3D40); }
body.ea .ea-b__antwort{ margin-top:16px; padding-top:16px; border-top:1px solid var(--ea-line-2); max-width:640px; }
body.ea .ea-b__zwei{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:12px; }
body.ea .ea-b__zwei .ea-b__feld{ max-width:none; margin-bottom:12px; }
body.ea .ea-b__feld--breit{ max-width:none; }
body.ea .ea-b__feld textarea{ width:100%; font:inherit; font-size:15px; color:var(--ea-ink); background:#fff;
    border:1px solid var(--ea-line); border-radius:9px; padding:11px 13px; resize:vertical; }
body.ea .ea-b__feld textarea:focus{ outline:0; border-color:var(--ea-accent); box-shadow:0 0 0 3px rgba(63,90,209,.13); }
@media (max-width: 900px){
    body.ea .ea-b__zwei{ grid-template-columns:1fr; }
}

/* Kontaktdaten des Kunden in der Anfrage */
body.ea .ea-b__kunde{ margin-top:14px; padding:14px 16px; border-radius:11px;
    background:var(--ea-surface); max-width:520px; }
body.ea .ea-b__kzeile{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px;
    padding:3px 0; font-size:14.5px; }
body.ea .ea-b__kzeile span{ color:var(--ea-muted); }
body.ea .ea-b__kzeile a{ color:var(--ea-accent); text-decoration:none; word-break:break-word; }
body.ea .ea-b__kzeile a:hover{ text-decoration:underline; }

/* Versendete Anfragen: Kopf mit Dienstleisterbild */
body.ea .ea-b__dl{ display:flex; align-items:center; gap:12px; }
body.ea .ea-b__dlbild{ width:44px; height:44px; border-radius:50%; object-fit:cover;
    border:1px solid var(--ea-line); background:#fff; flex:0 0 auto; }
body.ea .ea-b__dl a{ color:inherit; text-decoration:none; }
body.ea .ea-b__dl a:hover{ text-decoration:underline; }

/* Merkliste ohne Konto */
body.ea .ea-merk{ cursor:pointer; }
body.ea .ea-tag.ea-merk.is-gemerkt{ border-color:var(--ea-accent); color:var(--ea-accent); }

/* Das Herz auf den Karten kommt ohne Bilddatei aus. */
body.ea .ea-c__fav svg{ width:19px; height:19px; display:block;
    fill:none; stroke:var(--ea-ink); stroke-width:1.7; transition:fill .15s ease, stroke .15s ease; }
body.ea .ea-c__fav:hover svg{ stroke:var(--ea-accent); }
body.ea .ea-c__fav.is-gemerkt svg{ fill:var(--ea-accent); stroke:var(--ea-accent); }

/* Merkliste in der Kopfzeile – für alle, ohne Anmeldung */
body.ea .ea-merkbtn{ position:relative; width:40px; height:40px; border-radius:10px;
    border:1px solid var(--ea-line); background:#fff; display:inline-grid; place-items:center;
    color:var(--ea-ink); text-decoration:none; flex:0 0 auto; }
body.ea .ea-merkbtn:hover{ background:var(--ea-surface); }
body.ea .ea-merkbtn svg{ width:20px; height:20px; display:block;
    fill:none; stroke:currentColor; stroke-width:1.7; }
body.ea .ea-merkbtn__n{ position:absolute; top:-7px; right:-7px; box-sizing:border-box;
    min-width:20px; height:20px; padding:0 5px; border-radius:10px;
    background:var(--ea-accent); color:#fff; font-size:11px; font-weight:600; line-height:1;
    display:grid; place-items:center; border:2px solid #fff; }

/* Anmelden als Symbol, gleiche Form wie die Merkliste */
body.ea .ea-anmeldebtn{ width:40px; height:40px; border-radius:10px;
    border:1px solid var(--ea-line); background:#fff; display:inline-grid; place-items:center;
    color:var(--ea-ink); text-decoration:none; flex:0 0 auto; }
body.ea .ea-anmeldebtn:hover{ background:var(--ea-surface); }
body.ea .ea-anmeldebtn svg{ width:21px; height:21px; display:block;
    fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }

/* =========================================================
   TEIL J — Bewegung
   Kurz, weich, nie länger als eine Drittelsekunde. Wer im
   System „weniger Bewegung" eingestellt hat, bekommt keine.
   ========================================================= */

/* Die Merkliste soll den Bildschirm füllen, damit die Fußzeile
   nicht an der letzten Kartenreihe klebt. */
body.ea .ea-merkseite{ min-height: 52vh; padding-bottom: 84px; }

body.ea .ea-btn{ transition: background-color .18s ease, color .18s ease,
    border-color .18s ease, transform .12s ease; }
body.ea .ea-btn:active{ transform: translateY(1px); }

body.ea .ea-c__m{ transition: transform .35s cubic-bezier(.22,.61,.36,1); }
body.ea .ea-c__m img:not(.ea-c__av){ transition: transform .5s cubic-bezier(.22,.61,.36,1); }
body.ea .ea-c:hover .ea-c__m img:not(.ea-c__av){ transform: scale(1.035); }

body.ea .ea-c__n,
body.ea .ea-link,
body.ea .ea-b__pfeil,
body.ea .ea-b__mehr,
body.ea .ea-b__row .a{ transition: color .16s ease; }

body.ea .ea-merkbtn,
body.ea .ea-anmeldebtn,
body.ea .ea-c__fav,
body.ea .ea-weg{ transition: background-color .18s ease, border-color .18s ease, transform .12s ease; }
body.ea .ea-merkbtn:active,
body.ea .ea-anmeldebtn:active,
body.ea .ea-c__fav:active{ transform: scale(.94); }

/* Der Zähler hüpft kurz, wenn sich die Zahl ändert. */
@keyframes ea-huepf{
    0%{ transform: scale(1); } 40%{ transform: scale(1.28); } 100%{ transform: scale(1); }
}
body.ea .ea-merkbtn__n.huepf{ animation: ea-huepf .26s ease; }

/* Das Herz beim Merken kurz betonen. */
@keyframes ea-herz{
    0%{ transform: scale(1); } 45%{ transform: scale(1.22); } 100%{ transform: scale(1); }
}
body.ea .ea-c__fav.is-gemerkt svg,
body.ea .ea-merk.is-gemerkt svg{ animation: ea-herz .28s ease; }

@media (prefers-reduced-motion: reduce){
    body.ea *,
    body.ea *::before,
    body.ea *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Herz in der Ergebnisliste – ohne Bilddatei, ohne Anmeldung */
body.ea .ea-row__fav svg{ width:19px; height:19px; display:block;
    fill:none; stroke:var(--ea-ink); stroke-width:1.7;
    transition:fill .15s ease, stroke .15s ease; }
body.ea .ea-row__fav:hover svg{ stroke:var(--ea-accent); }
body.ea .ea-row__fav.is-gemerkt svg{ fill:var(--ea-accent); stroke:var(--ea-accent); }
body.ea .ea-row__fav{ transition: background-color .18s ease, transform .12s ease; }
body.ea .ea-row__fav:active{ transform: scale(.94); }
body.ea .ea-row__fav.is-gemerkt svg{ animation: ea-herz .28s ease; }

/* ---------------------------------------------------------
   Bewegung auf der Kategorieseite
   --------------------------------------------------------- */

body.ea .ea-row{ transition: transform .22s cubic-bezier(.22,.61,.36,1),
    box-shadow .22s ease, border-color .22s ease; }
body.ea .ea-row:hover{ transform: translateY(-2px); border-color: var(--ea-line); }
body.ea .ea-row__media img{ transition: transform .55s cubic-bezier(.22,.61,.36,1); }
body.ea .ea-row:hover .ea-row__media img{ transform: scale(1.045); }

body.ea .ea-row__name{ transition: color .16s ease; }
body.ea .ea-tag{ transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
body.ea .ea-pick__box{ transition: background-color .16s ease, border-color .16s ease, transform .12s ease; }
body.ea .ea-pick:active .ea-pick__box{ transform: scale(.9); }
body.ea .ea-filter select,
body.ea .ea-sortbar select{ transition: border-color .16s ease, box-shadow .16s ease; }
body.ea .ea-stars-input span{ transition: transform .14s ease, color .14s ease; }
body.ea .ea-stars-input span:hover{ transform: scale(1.18); }

/* Die Ergebnisse ziehen beim Laden kurz nach oben ein, gestaffelt.
   Nur die ersten acht – danach wäre es Zirkus. */
@keyframes ea-einzug{
    from{ opacity:0; transform: translateY(10px); }
    to  { opacity:1; transform: none; }
}
body.ea #filter-offers-block .ea-row{ animation: ea-einzug .38s cubic-bezier(.22,.61,.36,1) both; }
body.ea #filter-offers-block .ea-row:nth-child(1){ animation-delay:.02s }
body.ea #filter-offers-block .ea-row:nth-child(2){ animation-delay:.06s }
body.ea #filter-offers-block .ea-row:nth-child(3){ animation-delay:.10s }
body.ea #filter-offers-block .ea-row:nth-child(4){ animation-delay:.14s }
body.ea #filter-offers-block .ea-row:nth-child(5){ animation-delay:.18s }
body.ea #filter-offers-block .ea-row:nth-child(6){ animation-delay:.22s }
body.ea #filter-offers-block .ea-row:nth-child(7){ animation-delay:.26s }
body.ea #filter-offers-block .ea-row:nth-child(8){ animation-delay:.30s }
body.ea #filter-offers-block .ea-row:nth-child(n+9){ animation:none }

/* =========================================================
   TEIL K — Bewegung im Anbieterprofil
   Zurückhaltend: nichts blinkt, nichts springt. Ohne
   JavaScript ist alles sichtbar, die Klasse ea-anim kommt
   erst vom Skript.
   ========================================================= */

/* Titelbild fährt beim Laden ganz langsam auf Größe zurück. */
@keyframes ea-cover-ruhe{
    from{ transform: scale(1.045); }
    to  { transform: scale(1); }
}
html.ea-anim body.ea .ea-cover img{ animation: ea-cover-ruhe 1.6s cubic-bezier(.22,.61,.36,1) both; }

/* Profilbild und Name setzen sich kurz danach. */
@keyframes ea-auf{
    from{ opacity:0; transform: translateY(10px); }
    to  { opacity:1; transform: none; }
}
html.ea-anim body.ea .ea-avatar{ animation: ea-auf .5s cubic-bezier(.22,.61,.36,1) .12s both; }
html.ea-anim body.ea .ea-phead__meta{ animation: ea-auf .5s cubic-bezier(.22,.61,.36,1) .2s both; }
html.ea-anim body.ea .ea-ask{ animation: ea-auf .55s cubic-bezier(.22,.61,.36,1) .28s both; }

/* Abschnitte blenden ein, sobald sie in Sicht kommen. */
html.ea-anim body.ea .ea-warte{ opacity:0; transform: translateY(14px); }
html.ea-anim body.ea .ea-warte.ist-da{ opacity:1; transform:none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); }

/* Galerie: Bild zieht an, der Rahmen bleibt ruhig. */
body.ea .ea-gal a{ overflow:hidden; }
body.ea .ea-gal a img{ transition: transform .6s cubic-bezier(.22,.61,.36,1); }
body.ea .ea-gal a:hover img{ transform: scale(1.05); }
body.ea .ea-gal__more span{ transition: background-color .25s ease; }

/* Pakete heben sich leicht. */
body.ea .ea-pkg{ transition: transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease; }
body.ea .ea-pkg:hover{ transform: translateY(-3px); border-color: var(--ea-line); }

/* Kontaktwege: Symbol nimmt die Hausfarbe an und hebt sich einen Pixel. */
body.ea .ea-weg{ transition: transform .16s ease, border-color .18s ease, color .18s ease, background-color .18s ease; }
body.ea .ea-weg:hover{ transform: translateY(-1px); border-color: var(--ea-accent); color: var(--ea-accent); }
body.ea .ea-weg:active{ transform: scale(.94); }

/* Merkmale und Sterne */
body.ea .ea-chip{ transition: background-color .18s ease, border-color .18s ease; }
body.ea .ea-badges .ea-tag{ transition: background-color .18s ease, border-color .18s ease, color .18s ease; }

/* Mehr Luft zwischen Titelbild und Name: Der Name klebte 4 Pixel
   unter der Bildkante, jetzt sind es 24. */
body.ea .ea-phead__meta{ padding-top: 78px; }
body.ea .ea-badges{ margin-top: 14px; }
body.ea .ea-gal{ margin-top: 30px; }
@media (max-width: 900px){
    body.ea .ea-phead__meta{ padding-top: 60px; }
    body.ea .ea-gal{ margin-top: 24px; }
}

/* Die Sterne rechts standen mit fest eingetragenen 58 Pixeln genauso
   dicht am Bild wie vorher der Name. Jetzt auf derselben Linie wie er. */
body.ea .ea-phead__rating{ margin-left:auto; text-align:right; padding-top:78px; }

/* Firmenname unter dem Namen */
body.ea .ea-pfirma{ font-size:17px; color:var(--ea-ink-2,#3B3D40); margin:2px 0 2px; }

/* Bewertungen: lange Texte auf vier Zeilen kürzen, mit Weiterlesen */
body.ea .ea-rev__t{ margin-top:6px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
    overflow:hidden; transition: none; }
body.ea .ea-rev__t.offen{ display:block; -webkit-line-clamp:unset; overflow:visible; }
body.ea .ea-rev__mehr{ margin-top:6px; padding:0; border:0; background:none; cursor:pointer;
    font:inherit; font-size:13.5px; color:var(--ea-accent); }
body.ea .ea-rev__mehr:hover{ text-decoration:underline; }

/* „von Andrej Koch Events" – das „von" tritt zurück, die Firma steht vorn. */
body.ea .ea-pfirma span{ color:var(--ea-muted); font-weight:400; }

/* Aufklappblöcke (Anbieterinformationen, Vertragsbedingungen) */
body.ea .ea-aufklapp{ border-top:1px solid var(--ea-line-2); }
body.ea .ea-aufklapp:last-of-type{ border-bottom:1px solid var(--ea-line-2); }
body.ea .ea-aufklapp summary{ list-style:none; cursor:pointer; padding:16px 0;
    display:flex; align-items:center; gap:10px; font-size:15.5px; color:var(--ea-ink);
    transition: color .16s ease; }
body.ea .ea-aufklapp summary::-webkit-details-marker{ display:none; }
body.ea .ea-aufklapp summary::after{ content:""; margin-left:auto; width:9px; height:9px;
    border-right:1.6px solid var(--ea-muted); border-bottom:1.6px solid var(--ea-muted);
    transform: rotate(45deg) translate(-2px,-2px); transition: transform .22s ease; }
body.ea .ea-aufklapp[open] summary::after{ transform: rotate(-135deg) translate(-3px,-3px); }
body.ea .ea-aufklapp summary:hover{ color:var(--ea-accent); }
body.ea .ea-aufklapp__in{ padding:2px 0 20px; color:var(--ea-ink-2,#3B3D40); max-width:60ch;
    font-size:15px; line-height:1.6; animation: ea-auf .3s cubic-bezier(.22,.61,.36,1) both; }
body.ea .ea-aufklapp__in p{ margin:0 0 12px; }
body.ea .ea-aufklapp__in p:last-child{ margin-bottom:0; }

/* Fehlende Pflichtangabe hervorheben */
body.ea .ea-b__feld.fehlt input,
body.ea .ea-b__feld.fehlt textarea{ border-color:#C4433A; box-shadow:0 0 0 3px rgba(196,67,58,.10); }
body.ea .ea-b__feld.fehlt span{ color:#C4433A; }

/* Gesperrte Kontaktwege sind Schaltflächen, keine Verweise. */
body.ea button.ea-weg{ font: inherit; padding: 0; cursor: pointer; }
body.ea .ea-weg--zu{ color: var(--ea-muted); border-color: var(--ea-line-2); }
body.ea .ea-weg--zu:hover{ color: var(--ea-ink); border-color: var(--ea-line);
    background: var(--ea-surface); transform: none; }

/* Der Hinweis darunter tritt kurz hervor, wenn man einen davon antippt. */
@keyframes ea-hinweis-an{
    0%  { color: var(--ea-muted); }
    18% { color: var(--ea-accent-dark); }
    100%{ color: var(--ea-ink-2,#3B3D40); }
}
body.ea .ea-wege__hinweis--an{ animation: ea-hinweis-an 2.4s ease both; }

/* „Was brauchst du?" – Leistungen zum Anklicken im Anfrageformular */
body.ea .ea-was{ display:flex; flex-wrap:wrap; gap:8px; margin-top:7px; }
body.ea .ea-was__w{ display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    border:1px solid var(--ea-line); border-radius:20px; padding:7px 13px;
    font-size:14px; color:var(--ea-ink-2,#3B3D40); background:#fff;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
body.ea .ea-was__w:hover{ background:var(--ea-surface); }
body.ea .ea-was__w input{ width:15px; height:15px; margin:0; accent-color:var(--ea-accent); }
body.ea .ea-was__w:has(input:checked){ border-color:var(--ea-accent); color:var(--ea-accent-dark);
    background:#EEF1FC; }

/* Leistungsauswahl im Dienstleisterbereich */
body.ea .ea-was--gross{ margin:8px 0 4px; }
body.ea .ea-b__auswahl{ width:100%; font:inherit; font-size:15px; color:var(--ea-ink);
    background:#fff; border:1px solid var(--ea-line); border-radius:9px; padding:11px 13px; }
body.ea .ea-b__auswahl:focus{ outline:0; border-color:var(--ea-accent);
    box-shadow:0 0 0 3px rgba(63,90,209,.13); }

/* ---------------------------------------------------------
   Leistungsauswahl: suchen statt scrollen
   --------------------------------------------------------- */
body.ea .ea-lst__oben{ padding:16px 18px; border-radius:12px; background:var(--ea-surface); }
body.ea .ea-lst__gewaehlt{ display:flex; flex-wrap:wrap; gap:8px; }
body.ea .ea-lst__gewaehlt:empty{ display:none; }
body.ea .ea-lst__chip{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    border:1px solid var(--ea-accent); background:#fff; color:var(--ea-accent-dark);
    border-radius:20px; padding:7px 9px 7px 14px; font:inherit; font-size:14px;
    transition: background-color .16s ease; }
body.ea .ea-lst__chip:hover{ background:#EEF1FC; }
body.ea .ea-lst__chip i{ font-style:normal; font-size:16px; line-height:1; opacity:.6; }
body.ea .ea-lst__chip:hover i{ opacity:1; }

body.ea .ea-lst__bereich summary{ font-size:15.5px; }
body.ea .ea-lst__bereich.hat summary{ color:var(--ea-accent-dark); }
body.ea .ea-lst__zahl:not(:empty){ display:inline-grid; place-items:center; min-width:20px; height:20px;
    padding:0 6px; margin-left:8px; border-radius:10px; background:var(--ea-accent);
    color:#fff; font-size:11.5px; }
body.ea .ea-lst__bereich .ea-was{ padding-bottom:16px; }
body.ea .ea-chip--mehr{ color:var(--ea-muted); border-style:dashed; }

/* =====================================================================
   TEIL L – Vorschlagsfelder in der Suchleiste
   Anlass und Leistung sind keine Klappmenüs mehr, sondern Textfelder
   mit einer Liste darunter. Antippen zeigt alles, Tippen macht enger.
   ===================================================================== */

/* Die Suchleiste hat overflow:hidden für die runden Ecken - damit würde die
   Vorschlagsliste abgeschnitten. Also Ecken einzeln setzen und aufmachen. */
body.ea .ea-find{ overflow: visible; }
body.ea .ea-find > *:first-child{ border-top-left-radius:10px; border-top-right-radius:10px; }
body.ea .ea-find > *:last-child{ border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
@media (min-width: 901px){
    body.ea .ea-find > *:first-child{ border-radius:10px 0 0 10px; }
    body.ea .ea-find > *:last-child{ border-radius:0 10px 10px 0; }
}

body.ea .ea-kombi{ position: relative; }

body.ea .ea-kombi__liste{
    position: absolute;
    left: 0; right: 0; top: calc(100% + 6px);
    z-index: 60;
    margin: 0; padding: 6px;
    list-style: none;
    max-height: 302px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--ea-line);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(20,20,25,.14);
    -webkit-overflow-scrolling: touch;
}

body.ea .ea-kombi__liste[hidden]{ display: none; }

body.ea .ea-kombi__liste li{
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--ea-ink);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ea .ea-kombi__liste li[hidden]{ display: none; }
body.ea .ea-kombi__liste li:hover,
body.ea .ea-kombi__liste li.an{ background: var(--ea-surface-2, #f4f2ef); }

/* Auf dem Handy steht die Leiste eng an den Rändern – dort darf die
   Liste über die Feldbreite hinausgehen, sonst passt kein Wort hinein. */
@media (max-width: 640px){
    body.ea .ea-kombi__liste{ max-height: 244px; }
}

@media (prefers-reduced-motion: no-preference){
    body.ea .ea-kombi__liste{ animation: eaKombiAuf .13s ease-out both; }
    @keyframes eaKombiAuf{
        from{ opacity: 0; transform: translateY(-4px); }
        to  { opacity: 1; transform: none; }
    }
}

/* Mobile Hinweise: App installieren und Push aktivieren. */
.ea-pwa-startbild{ display:none; }
.ea-ist-pwa.ea-pwa-kaltstart .ea-pwa-startbild{
    position:fixed;z-index:5000;inset:0;display:grid;place-items:center;
    padding:env(safe-area-inset-top,0px) 24px env(safe-area-inset-bottom,0px);
    background:#fff;opacity:1;transition:opacity .26s ease,visibility .26s ease;
}
.ea-ist-pwa.ea-pwa-kaltstart .ea-pwa-startbild.ist-fertig{ opacity:0;visibility:hidden;pointer-events:none; }
.ea-pwa-startbild__mitte{ display:flex;flex-direction:column;align-items:center;text-align:center; }
.ea-abc-logo{
    position:relative;display:block;width:82px;height:82px;overflow:hidden;
    border-radius:20px;background:#3F5AD1;box-shadow:0 12px 32px rgba(34,47,105,.16);
}
/* Das bestehende Logo ist ein einziges scharfes SVG aus EVENT + ABC.
   Im quadratischen Ausschnitt wird nur sein rechter ABC-Teil gezeigt. */
.ea-abc-logo img{
    position:absolute;top:0;left:0;display:block;width:227px!important;height:82px!important;
    max-width:none!important;transform:translateX(-145px);
}
.ea-pwa-startbild__kreis{
    width:31px;height:31px;margin:25px 0 17px;border:3px solid #e4e7f5;
    border-top-color:var(--ea-accent,#3F5AD1);border-radius:50%;
    animation:eaPwaStartDrehen .75s linear infinite;
}
.ea-pwa-startbild strong{ font-size:18px;color:var(--ea-ink,#1E1E1C); }
.ea-pwa-startbild small{ margin-top:4px;font-size:13px;color:var(--ea-muted,#75777A); }
@keyframes eaPwaStartDrehen{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .ea-pwa-startbild__kreis{ animation-duration:1.5s; } }

.ea-apphinweis{
    position:fixed;
    z-index:1200;
    left:50%;
    bottom:calc(94px + env(safe-area-inset-bottom,0px));
    width:min(420px,calc(100% - 28px));
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:12px 42px 12px 12px;
    border:1px solid rgba(255,255,255,.94);
    border-radius:20px;
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 42px rgba(23,24,26,.22);
    opacity:0;
    transform:translate(-50%,18px);
    transition:opacity .2s ease,transform .2s ease;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
}
.ea-apphinweis.ist-sichtbar{ opacity:1;transform:translate(-50%,0); }
.ea-apphinweis img{ width:48px;height:48px;border-radius:12px;display:block; }
.ea-apphinweis div{ min-width:0; }
.ea-apphinweis b,.ea-apphinweis span{ display:block; }
.ea-apphinweis b{ margin-bottom:3px;font-size:15px;color:var(--ea-ink,#1E1E1C); }
.ea-apphinweis span{ font-size:12.5px;line-height:1.35;color:var(--ea-muted,#75777A); }
.ea-apphinweis [data-app-aktion]{
    min-height:38px;padding:0 14px;border:0;border-radius:999px;
    background:var(--ea-accent,#3F5AD1);color:#fff;font-weight:650;
}
.ea-apphinweis__zu{
    position:absolute;top:5px;right:7px;width:30px;height:30px;
    padding:0;border:0;background:none;color:var(--ea-muted,#75777A);
    font-size:24px;line-height:1;
}
.ea-ist-pwa .ea-pushhinweis{ bottom:calc(94px + env(safe-area-inset-bottom,0px)); }
@media (max-width:390px){
    .ea-apphinweis{ grid-template-columns:42px minmax(0,1fr); }
    .ea-apphinweis img{ width:42px;height:42px; }
    .ea-apphinweis [data-app-aktion]{ grid-column:1/-1;width:100%; }
}

/* iPhone/iPad: Safari stellt keinen direkten Installationsdialog bereit.
   Dieses Blatt zeigt deshalb die drei echten Apple-Schritte deutlich an. */
.ea-ios-anleitung{
    position:fixed;z-index:1300;inset:0;display:grid;place-items:end center;
    padding:20px 14px calc(22px + env(safe-area-inset-bottom,0px));
    background:rgba(20,22,26,.42);opacity:0;transition:opacity .18s ease;
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
.ea-ios-anleitung.ist-sichtbar{ opacity:1; }
.ea-ios-anleitung section{
    position:relative;width:min(430px,100%);padding:22px 20px 15px;
    border:1px solid rgba(255,255,255,.95);border-radius:28px;
    background:rgba(255,255,255,.98);box-shadow:0 20px 60px rgba(14,16,20,.3);
    text-align:center;transform:translateY(20px);transition:transform .18s ease;
}
.ea-ios-anleitung.ist-sichtbar section{ transform:none; }
.ea-ios-anleitung section>img{ width:64px;height:64px;border-radius:15px; }
.ea-ios-anleitung h2{ margin:10px 32px 16px;font-size:22px;line-height:1.2; }
.ea-ios-anleitung ol{ margin:0;padding:0;list-style:none;text-align:left; }
.ea-ios-anleitung li{ display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;padding:10px 0; }
.ea-ios-anleitung li i{
    display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
    background:#eef1ff;color:var(--ea-accent,#3F5AD1);font-size:18px;
}
.ea-ios-anleitung li span{ font-size:15px;line-height:1.35;color:var(--ea-ink,#1E1E1C); }
.ea-ios-anleitung p{ margin:10px 8px 0;font-size:12.5px;line-height:1.4;color:var(--ea-muted,#75777A); }
.ea-ios-anleitung__zu{
    position:absolute;right:10px;top:9px;width:38px;height:38px;border:0;
    border-radius:50%;background:#f3f3f3;color:#333;font-size:25px;line-height:1;
}
.ea-ios-anleitung__pfeil{ margin-top:3px;font-size:28px;line-height:1;color:var(--ea-accent,#3F5AD1); }

/* PWA: Rueckmeldung fuer "zum Aktualisieren herunterziehen". */
.ea-pwa-aktualisieren{ display:none; }
.ea-ist-pwa .ea-pwa-aktualisieren{
    position:fixed;
    z-index:1100;
    top:calc(env(safe-area-inset-top,0px) + 4px);
    left:50%;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.94);
    border-radius:50%;
    background:rgba(255,255,255,.94);
    color:var(--ea-ink,#1E1E1C);
    box-shadow:0 8px 26px rgba(23,24,26,.18);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,-58px);
    transition:opacity .14s ease,transform .18s ease,color .14s ease;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
}
.ea-pwa-aktualisieren svg{
    width:24px;height:24px;
    fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
}
.ea-pwa-aktualisieren.ist-sichtbar{ opacity:1;transition:opacity .08s ease; }
.ea-pwa-aktualisieren.ist-bereit{ color:var(--ea-accent,#3F5AD1); }
.ea-pwa-aktualisieren.ist-bereit svg{ transform:rotate(35deg); }
.ea-pwa-aktualisieren.wird-geladen svg{
    animation:ea-pwa-drehen .7s linear infinite;
}
@keyframes ea-pwa-drehen{ to{ transform:rotate(360deg); } }

/* =====================================================================
   TEIL M – Leistungen im Dienstleisterbereich
   Eine Ebene, ein Suchfeld. Was gewählt ist, steht oben und ist
   ruhig hervorgehoben; was zur Wahl steht, liegt darunter als Pillen.
   ===================================================================== */

body.ea .ea-lst{ margin-top: 22px; }

/* ---------- oben: was gewählt ist ---------- */

body.ea .ea-lst__oben{
    padding: 18px 20px 20px;
    border-radius: 14px;
    background: var(--ea-accent-soft);
    border: 1px solid #DDE3F8;
}

body.ea .ea-lst__kopf{
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}

body.ea .ea-lst__titel{
    font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
    font-weight: 700; color: var(--ea-accent-dark);
}

body.ea .ea-lst__zaehler:not(:empty){
    display: inline-grid; place-items: center;
    min-width: 21px; height: 21px; padding: 0 7px;
    border-radius: 11px;
    background: var(--ea-accent); color: #fff;
    font-size: 11.5px; font-weight: 700; line-height: 1;
}

body.ea .ea-lst__gewaehlt{ display: flex; flex-wrap: wrap; gap: 8px; }
body.ea .ea-lst__gewaehlt:empty{ display: none; }

body.ea .ea-lst__chip{
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 10px 8px 15px;
    border: 0; border-radius: 22px;
    background: var(--ea-accent); color: #fff;
    font: inherit; font-size: 14.5px; line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(47,69,168,.24);
    transition: background-color .16s ease, transform .16s ease;
}
body.ea .ea-lst__chip:hover{ background: var(--ea-accent-dark); }
body.ea .ea-lst__chip:active{ transform: scale(.97); }
body.ea .ea-lst__chip i{
    font-style: normal; font-size: 17px; line-height: 1;
    opacity: .7; margin-top: -1px;
}
body.ea .ea-lst__chip:hover i{ opacity: 1; }

body.ea .ea-lst__leer{
    margin: 0; font-size: 14.5px; color: var(--ea-accent-dark); opacity: .8;
}

/* ---------- Suchfeld ---------- */

body.ea .ea-lst__suche{
    position: relative;
    margin: 22px 0 4px;
}

body.ea .ea-lst__suche svg{
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 19px; height: 19px; color: var(--ea-muted);
    pointer-events: none;
}

body.ea .ea-lst__suche input{
    width: 100%; box-sizing: border-box;
    font: inherit; font-size: 16px; color: var(--ea-ink);
    padding: 15px 44px 15px 46px;
    background: #fff;
    border: 1px solid var(--ea-line);
    border-radius: 12px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
body.ea .ea-lst__suche input::placeholder{ color: var(--ea-muted); }
body.ea .ea-lst__suche input:focus{
    outline: 0;
    border-color: var(--ea-accent);
    box-shadow: 0 0 0 3px rgba(63,90,209,.13);
}

body.ea .ea-lst__weg{
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--ea-surface); color: var(--ea-ink-2);
    font-size: 18px; line-height: 1; cursor: pointer;
}
body.ea .ea-lst__weg:hover{ background: var(--ea-line); }

/* ---------- die Liste ---------- */

body.ea .ea-lst__liste{
    display: flex; flex-wrap: wrap; gap: 9px;
    margin-top: 18px;
}

body.ea .ea-lst__w{
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 15px 9px 12px;
    border: 1px solid var(--ea-line);
    border-radius: 22px;
    background: #fff;
    font-size: 14.5px; line-height: 1.2;
    color: var(--ea-ink-2);
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease,
                color .16s ease, transform .16s ease;
}
body.ea .ea-lst__w:hover{ border-color: #CFC9C3; background: var(--ea-surface); }
body.ea .ea-lst__w:active{ transform: scale(.98); }

/* Das echte Kästchen bleibt bedienbar, ist aber nicht zu sehen –
   an seiner Stelle steht der runde Haken. */
body.ea .ea-lst__w input{
    position: absolute; opacity: 0; width: 1px; height: 1px;
    margin: 0; pointer-events: none;
}

body.ea .ea-lst__haken{
    display: grid; place-items: center;
    width: 20px; height: 20px; flex: 0 0 20px;
    border: 1.5px solid var(--ea-line);
    border-radius: 50%;
    background: #fff;
    transition: background-color .16s ease, border-color .16s ease;
}
body.ea .ea-lst__haken svg{
    width: 12px; height: 12px; color: #fff;
    opacity: 0; transform: scale(.6);
    transition: opacity .14s ease, transform .14s ease;
}

body.ea .ea-lst__w:has(input:checked){
    border-color: var(--ea-accent);
    background: var(--ea-accent-soft);
    color: var(--ea-accent-dark);
    font-weight: 600;
}
body.ea .ea-lst__w:has(input:checked) .ea-lst__haken{
    background: var(--ea-accent); border-color: var(--ea-accent);
}
body.ea .ea-lst__w:has(input:checked) .ea-lst__haken svg{ opacity: 1; transform: none; }

body.ea .ea-lst__w:has(input:focus-visible){
    outline: 2px solid var(--ea-accent); outline-offset: 2px;
}

/* Ohne :has() – ältere Browser zeigen wieder das echte Kästchen,
   damit man trotzdem sieht, was gewählt ist. */
@supports not selector(:has(*)){
    body.ea .ea-lst__w input{ position: static; opacity: 1; width: 15px; height: 15px;
        pointer-events: auto; accent-color: var(--ea-accent); }
    body.ea .ea-lst__haken{ display: none; }
}

body.ea .ea-lst__nichts{
    margin: 16px 0 0; font-size: 14.5px; color: var(--ea-muted);
}

/* ---------- Fuß ---------- */

body.ea .ea-lst__fuss{
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 26px; padding-top: 22px;
    border-top: 1px solid var(--ea-line-2);
}
body.ea .ea-lst__meldung{ font-size: 14px; color: var(--ea-muted); }

@media (max-width: 640px){
    body.ea .ea-lst__oben{ padding: 15px 16px 17px; }
    body.ea .ea-lst__suche input{ font-size: 16px; padding: 14px 42px 14px 44px; }
    body.ea .ea-lst__liste{ gap: 8px; }
    body.ea .ea-lst__w{ font-size: 14px; padding: 8px 13px 8px 11px; }
}

@media (prefers-reduced-motion: reduce){
    body.ea .ea-lst__chip,
    body.ea .ea-lst__w,
    body.ea .ea-lst__haken,
    body.ea .ea-lst__haken svg{ transition: none; }
}

/* ---------- Sprachen ---------- */

body.ea .ea-lst__sprachen{
    margin-top: 30px; padding-top: 26px;
    border-top: 1px solid var(--ea-line-2);
}
body.ea .ea-lst__h2{
    font-family: var(--ea-serif);
    font-size: 21px; font-weight: 400; margin: 0 0 6px;
}
body.ea .ea-lst__hinweis{
    margin: 0 0 4px; font-size: 14.5px; color: var(--ea-muted); max-width: 60ch;
}

/* Sprachzeile im Profilkopf: „Spricht Deutsch, Russisch und Englisch" */
body.ea .ea-phead__spr{
    display: flex; align-items: center; gap: 7px;
    margin: 11px 0 0;
    font-size: 14.5px; color: var(--ea-ink-2, #45474A);
}
body.ea .ea-phead__spr svg{ width: 16px; height: 16px; flex: 0 0 16px; color: var(--ea-muted); }

/* =====================================================================
   TEIL N – Pakete im Dienstleisterbereich
   Je Leistung ein Block: Überschrift, die Pakete als Zeilen, darunter
   der Knopf zum Anlegen. Das Formular klappt an Ort und Stelle auf.
   ===================================================================== */

body.ea .ea-pk{ margin-top: 30px; }
body.ea .ea-pk:first-of-type{ margin-top: 24px; }

/* ---------- oben: Leistung waehlen, Paket anlegen ----------
   In der Liste stehen nur Leistungen, die schon Pakete haben. Alles
   Leere kommt hierueber zum Vorschein - so bleibt die Seite kurz. */
body.ea .ea-pk__waehl{
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    margin-top: 22px; padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--ea-line);
    border-radius: 14px;
}
body.ea .ea-pk__wfeld{ display: block; flex: 1 1 260px; min-width: 0; margin: 0; }
body.ea .ea-pk__wfeld > span{
    display: block; font-size: 14px; color: var(--ea-muted); margin-bottom: 5px;
}
body.ea .ea-pk__wfeld > span b{ color: var(--ea-ink-2, #45474A); font-weight: 600; }
/* Auswahlfeld und Knopf sind ein Paar: gleiche Hoehe, gleicher Radius,
   gleicher Rahmen. Vorher war das Feld 43 px hoch mit 9 px Radius und
   der Knopf 49 px mit 8 px - das sah aus wie zwei fremde Teile. */
body.ea .ea-pk__wfeld select{
    width: 100%; height: 46px; font: inherit; font-size: 15px; color: var(--ea-ink);
    background: #fff; border: 1px solid var(--ea-line); border-radius: 8px;
    padding: 0 14px;
}
body.ea .ea-pk__wfeld select:focus{
    outline: 0; border-color: var(--ea-accent);
    box-shadow: 0 0 0 3px rgba(63,90,209,.13);
}
body.ea .ea-pk__waehl .ea-btn{ flex: 0 0 auto; height: 46px; padding: 0 20px; border-radius: 8px; }
body.ea .ea-pk__waehl .ea-btn[disabled]{
    background: #C9CEEA; color: #fff; cursor: default;
}

@media (max-width: 700px){
    body.ea .ea-pk__waehl{ flex-direction: column; align-items: stretch; }
    /* Untereinander wirkt flex-basis auf die Hoehe - ohne diese Zeile
       waere zwischen Menue und Knopf eine 260 px hohe Luecke. */
    body.ea .ea-pk__wfeld{ flex: 0 0 auto; }
    body.ea .ea-pk__waehl .ea-btn{ width: 100%; justify-content: center; }
}

body.ea .ea-pk__kopf{
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 10px;
}
body.ea .ea-pk__h{
    font-family: var(--ea-serif);
    font-size: 21px; font-weight: 400; margin: 0;
}
body.ea .ea-pk__anz{
    display: inline-grid; place-items: center;
    min-width: 21px; height: 21px; padding: 0 7px;
    border-radius: 11px;
    background: var(--ea-accent); color: #fff;
    font-size: 11.5px; font-weight: 700; line-height: 1;
}
body.ea .ea-pk__hin{ font-size: 13.5px; color: var(--ea-muted); }

body.ea .ea-pk__block{
    background: #fff;
    border: 1px solid var(--ea-line);
    border-radius: 14px;
    padding: 8px 8px 10px;
}

/* ---------- eine Paketzeile ---------- */

body.ea .ea-pk__zeile{
    display: flex; align-items: center; gap: 14px;
    padding: 13px 12px;
    border-radius: 10px;
    /* Der beige Grund kommt aus dem alten Bausatz (body.alt) und faerbt
       hier jede Zeile ein. Er gehoert nicht in die weisse Karte. */
    background: transparent;
    transition: background-color .16s ease;
}
body.ea .ea-pk__zeile + .ea-pk__zeile{ border-top: 1px solid var(--ea-line-2); border-radius: 0; }
body.ea .ea-pk__zeile:hover{ background: var(--ea-surface); }

body.ea .ea-pk__name{ flex: 1 1 auto; font-size: 15.5px; font-weight: 600; }
body.ea .ea-pk__preis{
    flex: 0 0 auto; font-size: 15.5px; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

body.ea .ea-pk__stift{
    flex: 0 0 auto; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%;
    color: var(--ea-muted); cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
body.ea .ea-pk__stift svg{ width: 17px; height: 17px; }
body.ea .ea-pk__stift:hover{ background: var(--ea-accent-soft); color: var(--ea-accent); }

/* ---------- Knopf zum Anlegen ---------- */

body.ea .ea-pk__neu{
    display: flex; align-items: center; gap: 9px;
    width: 100%; margin: 4px 0 0;
    padding: 13px 12px;
    border: 0; border-radius: 10px;
    background: none; color: var(--ea-accent);
    font: inherit; font-size: 15px; font-weight: 600;
    text-align: left; cursor: pointer;
    transition: background-color .16s ease;
}
body.ea .ea-pk__neu:hover{ background: var(--ea-accent-soft); }
body.ea .ea-pk__neu svg{ width: 18px; height: 18px; flex: 0 0 18px; }

/* ---------- das Formular ---------- */

body.ea .ea-pk__form,
body.ea .profile-services-edit-paket-form{
    margin: 6px 4px 4px;
    padding: 20px;
    border-radius: 12px;
    background: var(--ea-surface);
}

body.ea .ea-pk__felder{
    display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 12px;
}
@media (max-width: 640px){
    body.ea .ea-pk__felder{ grid-template-columns: 1fr; }
}

body.ea .ea-pk__ekopf{ display: flex; align-items: flex-end; gap: 12px; }
body.ea .ea-pk__ekopf .ea-pk__felder{ flex: 1 1 auto; }

body.ea .ea-pk__feld{ display: block; }
body.ea .ea-pk__feld > span{
    display: block; margin-bottom: 5px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ea-muted);
}
body.ea .ea-pk__feld input,
body.ea .ea-pk__zeile2f input{
    width: 100%; box-sizing: border-box;
    font: inherit; font-size: 15.5px; color: var(--ea-ink);
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ea-line);
    border-radius: 10px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
body.ea .ea-pk__feld input:focus,
body.ea .ea-pk__zeile2f input:focus{
    outline: 0; border-color: var(--ea-accent);
    box-shadow: 0 0 0 3px rgba(63,90,209,.13);
}

body.ea .ea-pk__was{ margin-top: 20px; }
body.ea .ea-pk__wash{
    display: block; margin-bottom: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ea-muted);
}

body.ea .ea-pk__zeile2{
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
body.ea .ea-pk__zeile2f{ flex: 1 1 auto; }
body.ea .ea-pk__zeile2w{ flex: 0 0 34px; display: grid; place-items: center; }

body.ea .profile-services-delete-row{
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    color: var(--ea-muted); cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
body.ea .profile-services-delete-row svg{ width: 16px; height: 16px; }
body.ea .profile-services-delete-row:hover{ background: #F6E7E3; color: var(--ea-error); }

body.ea .ea-pk__mehr{
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 4px;
    font-size: 14.5px; font-weight: 600; color: var(--ea-accent);
    cursor: pointer;
}
body.ea .ea-pk__mehr svg{ width: 16px; height: 16px; }
body.ea .ea-pk__mehr:hover{ color: var(--ea-accent-dark); }

body.ea .ea-pk__tun{
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--ea-line);
}
body.ea .ea-pk__tun .ea-btn{ cursor: pointer; }
body.ea .ea-pk__ab{
    font-size: 14.5px; color: var(--ea-muted); cursor: pointer;
}
body.ea .ea-pk__ab:hover{ color: var(--ea-ink); text-decoration: underline; }

body.ea .profile-services-delete-paket{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    color: var(--ea-muted); cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
body.ea .profile-services-delete-paket svg{ width: 18px; height: 18px; }
body.ea .profile-services-delete-paket:hover{ background: #F6E7E3; color: var(--ea-error); }

@media (max-width: 640px){
    body.ea .ea-pk__ekopf{ flex-wrap: wrap; }
    body.ea .ea-pk__form,
    body.ea .profile-services-edit-paket-form{ padding: 16px; }
}

@media (prefers-reduced-motion: reduce){
    body.ea .ea-pk__zeile,
    body.ea .ea-pk__neu,
    body.ea .ea-pk__stift{ transition: none; }
}

/* Punkte als Text: eine Zeile, ein Punkt. Daneben die Vorschau. */
body.ea .ea-pk__text{
    width: 100%; box-sizing: border-box;
    font: inherit; font-size: 15.5px; line-height: 1.55;
    color: var(--ea-ink);
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ea-line);
    border-radius: 10px;
    resize: vertical; min-height: 110px; overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}
body.ea .ea-pk__text:focus{
    outline: 0; border-color: var(--ea-accent);
    box-shadow: 0 0 0 3px rgba(63,90,209,.13);
}
body.ea .ea-pk__text--fehlt{ border-color: var(--ea-error); }
body.ea .ea-pk__texthin{ margin: 6px 0 0; font-size: 13px; color: var(--ea-muted); }

/* Der Hinweis "bitte auf Deutsch schreiben" (Fassung 200).

   EINE Klasse fuer alle vier Stellen - Pakete, "Ueber dich", die
   Antwort auf eine Anfrage, der Videotitel. Vier gleich aussehende
   Kaesten aus vier Regeln waeren genau der doppelte Bestand, der in
   diesem Blatt schon dreimal auseinandergelaufen ist.

   Er steht dort, wo man ihn VOR dem Tippen sieht. Wer erst danach
   liest, dass es auf Deutsch sein muss, tippt zweimal.

   Ein heller Ton des Blaus und kein Rot: Es ist kein Fehler, den er
   gemacht hat, sondern etwas, das er wissen muss. Sand waere hier
   unsichtbar - das Formular steht selbst auf sandfarbenem Grund. */
body.ea .ea-f__deutsch{
    margin: 8px 0 0;
    padding: 8px 12px;
    font-size: 13.5px; line-height: 1.5;
    color: var(--ea-ink);
    background: rgba(63, 90, 209, .07);
    border-left: 3px solid var(--ea-accent);
    border-radius: 0 8px 8px 0;
}
/* Der Hinweis zum Kontaktfilter (Fassung 204).

   BEWUSST ANDERS ALS .ea-f__deutsch: kein Kasten, kein farbiger
   Balken, nur kleine graue Schrift. Unter "Ueber mich" stehen beide
   untereinander - zwei gleich laute Kaesten uebereinander liest
   niemand mehr, und dann ist auch der erste weg.

   Der hier soll gelesen werden, wenn man ihn sucht, und nicht
   auffallen, wenn man es nicht tut. Er ist eine Auskunft, keine
   Warnung: Der Anbieter hat nichts falsch gemacht. */
body.ea .ea-f__kontakt{
    margin: 6px 0 0;
    font-size: 12.5px; line-height: 1.5;
    color: var(--ea-muted);
}

/* Bei den Paketen steht er ueber dem ganzen Formular, nicht unter
   einem einzelnen Feld - deshalb dort Abstand nach unten. */
body.ea .ea-pk__deutsch{ margin: 0 0 16px; }

body.ea .ea-pk__vor{ margin-top: 22px; }
body.ea .ea-pk__vorh{
    display: block; margin-bottom: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ea-muted);
}
body.ea .ea-pk__karte{ max-width: 340px; background: #fff; }
body.ea .ea-pk__vn--leer{ color: var(--ea-muted); font-weight: 400; }

/* ---------------------------------------------------------------------
   Pakete auf dem Profil – je Leistung ein Aufklapper
   Der erste steht offen, die weiteren sind zugeklappt. Bei nur einer
   Leistung gibt es keinen Aufklapper, dann stehen die Karten direkt da.
   --------------------------------------------------------------------- */

body.ea .ea-pak__auf summary{ padding: 15px 0; }
body.ea .ea-pak__n{ font-weight: 600; }
body.ea .ea-pak__z{
    margin-left: 10px; font-size: 13px;
    color: var(--ea-muted); white-space: nowrap;
}
body.ea .ea-pak__auf summary:hover .ea-pak__z{ color: inherit; }

/* Die Karten brauchen die volle Breite – .ea-aufklapp__in ist auf 60ch
   gedeckelt, das wäre für die Paketkarten zu schmal. */
body.ea .ea-pak__k{ max-width: none; padding-top: 4px; padding-bottom: 22px; }
body.ea .ea-pak .ea-pkgs{ margin-top: 0; }

/* =====================================================================
   TEIL O – Über mich
   Links das Textfeld, rechts die Vorschau. Kein Editor mehr: Der Text
   erscheint auf dem Profil als reiner Text, deshalb steht hier auch
   reiner Text – was man tippt, ist was man bekommt.
   ===================================================================== */

body.ea .ea-ueber{
    display: grid;
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 26px;
    align-items: start;
    margin-top: 22px;
}
@media (max-width: 1040px){
    body.ea .ea-ueber{ grid-template-columns: 1fr; gap: 20px; }
}

body.ea .ea-ueber__karte{ padding: 0; }

body.ea .ea-ueber__lab{
    display: block; margin-bottom: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ea-muted);
}

body.ea .ea-ueber__feld{
    display: block; width: 100%; box-sizing: border-box;
    min-height: 240px; resize: vertical; overflow: hidden;
    padding: 16px 18px;
    font: inherit; font-size: 16px; line-height: 1.62;
    color: var(--ea-ink);
    background: #fff;
    border: 1px solid var(--ea-line);
    border-radius: 12px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
body.ea .ea-ueber__feld::placeholder{ color: #A9ADB3; }
body.ea .ea-ueber__feld:focus{
    outline: 0; border-color: var(--ea-accent);
    box-shadow: 0 0 0 3px rgba(63,90,209,.13);
}
body.ea .ea-ueber__feld--fehlt{ border-color: var(--ea-error); }

body.ea .ea-ueber__unten{
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin-top: 9px;
    font-size: 13px; color: var(--ea-muted);
}
body.ea .ea-ueber__zahl{ font-variant-numeric: tabular-nums; }
body.ea .ea-ueber__zahl--hin{ color: #8A6D1F; }
body.ea .ea-ueber__tipp{ margin-left: auto; }

/* ---------- Speichern ---------- */

body.ea .ea-ueber__tun{
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 16px;
}
body.ea .ea-ueber__tun .ea-btn{ cursor: pointer; }
body.ea .ea-btn--laeuft{ opacity: .6; pointer-events: none; }

body.ea .ea-ueber__stand{ font-size: 14px; color: var(--ea-muted); }
body.ea .ea-ueber__stand--gut{ color: #2E6B45; }
body.ea .ea-ueber__stand--fehlt{ color: var(--ea-error); }

/* ---------- Hilfe zum Aufklappen ---------- */

body.ea .ea-ueber__hilfe{ margin-top: 26px; }
body.ea .ea-ueber__hilfe ul{ margin: 0; padding-left: 20px; }
body.ea .ea-ueber__hilfe li{ margin-bottom: 7px; }
body.ea .ea-ueber__hilfe li:last-child{ margin-bottom: 0; }

/* ---------- Vorschau ---------- */

body.ea .ea-ueber__vorh{
    display: block; margin-bottom: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ea-muted);
}
body.ea .ea-ueber__vor{ padding: 20px; position: sticky; top: 22px; }
@media (max-width: 1040px){
    body.ea .ea-ueber__vor{ position: static; }
}

body.ea .ea-ueber__vorkopf{
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid var(--ea-line-2);
}
body.ea .ea-ueber__vorbild{
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 50%; object-fit: cover;
    background: var(--ea-surface);
}
body.ea .ea-ueber__vorname{ font-size: 15.5px; font-weight: 600; line-height: 1.3; }
body.ea .ea-ueber__vorort{ font-size: 13px; color: var(--ea-muted); }

body.ea .ea-ueber__vortext{
    font-size: 14.5px; line-height: 1.62;
    color: var(--ea-ink-2);
    max-height: 460px; overflow: auto;
}
body.ea .ea-ueber__vortext p{ margin: 0 0 12px; }
body.ea .ea-ueber__vortext p:last-child{ margin-bottom: 0; }
body.ea .ea-ueber__vorleer{ color: var(--ea-muted); font-style: italic; }

@media (prefers-reduced-motion: reduce){
    body.ea .ea-ueber__feld{ transition: none; }
}

/* =====================================================================
   TEIL P – Profilkopf: alles an einer Kante
   Vorher stand der Name neben dem Bild und damit 130 Pixel weiter
   rechts als Galerie, Texte und Pakete darunter. Das ließ links eine
   leere Ecke. Jetzt steht das Bild allein in seiner Zeile, Name und
   Angaben beginnen an derselben Kante wie der Rest der Seite.
   ===================================================================== */

body.ea .ea-phead{ flex-wrap: wrap; column-gap: 20px; row-gap: 0; }
body.ea .ea-phead__bild{ flex: 0 0 100%; line-height: 0; }
body.ea .ea-phead__meta{ flex: 1 1 260px; padding-top: 16px; }
body.ea .ea-phead__rating{ flex: 0 0 auto; padding-top: 20px; }

@media (max-width: 900px){
    body.ea .ea-phead__meta{ padding-top: 12px; }
}

/* =====================================================================
   TEIL Q – Geprüft-Zeichen
   Trägt nur, wer wirklich geprüft wurde. Wer darauf zeigt oder es mit
   der Tastatur ansteuert, liest, was geprüft wurde – ein Zeichen ohne
   Erklärung ist für Kunden wertlos.
   ===================================================================== */

body.ea .ea-geprueft{
    position: relative;
    display: inline-flex; align-items: center; gap: 5px;
    cursor: help; outline: 0;
}
body.ea .ea-geprueft svg{ width: 12px; height: 12px; flex: 0 0 12px; }

body.ea .ea-geprueft__box{
    position: absolute; left: 0; top: calc(100% + 9px); z-index: 30;
    width: max-content; max-width: 264px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #24262A; color: #fff;
    font-size: 13px; line-height: 1.5; font-weight: 400;
    text-transform: none; letter-spacing: 0;
    white-space: normal; text-align: left;
    box-shadow: 0 10px 26px rgba(20,20,22,.22);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
body.ea .ea-geprueft__box b{
    display: block; margin-bottom: 4px;
    font-size: 13px; font-weight: 700; color: #fff;
}
body.ea .ea-geprueft__box::before{
    content: ""; position: absolute; left: 16px; top: -5px;
    width: 10px; height: 10px; background: #24262A;
    transform: rotate(45deg); border-radius: 2px;
}

body.ea .ea-geprueft:hover .ea-geprueft__box,
body.ea .ea-geprueft:focus .ea-geprueft__box,
body.ea .ea-geprueft:focus-within .ea-geprueft__box{
    opacity: 1; visibility: visible; transform: none;
}

/* Am rechten Rand – etwa in der Anfragekarte – kippt der Kasten nach links,
   damit er nicht aus der Spalte läuft. */
body.ea .ea-ask__price .ea-geprueft .ea-geprueft__box{ left: auto; right: 0; }
body.ea .ea-ask__price .ea-geprueft .ea-geprueft__box::before{ left: auto; right: 16px; }

@media (max-width: 640px){
    body.ea .ea-geprueft__box{ max-width: 220px; }
}
@media (prefers-reduced-motion: reduce){
    body.ea .ea-geprueft__box{ transition: none; }
}

/* Nachtrag zu TEIL Q – der Kasten in der Ergebnisliste
   Die Zeile hatte overflow:hidden, damit das Bild in den runden Ecken
   sitzt; das schnitt den Kasten ab. Die Ecken übernimmt jetzt das Bild.
   Und weil jede Zeile durch ihre Einblend-Animation eine eigene Ebene
   bildet, legte sich die nächste Zeile darüber – die Zeile unter der
   Maus kommt deshalb nach vorn. */

body.ea .ea-row{ overflow: visible; }
body.ea .ea-row__media{ overflow: hidden; border-radius: 10px 0 0 10px; }
@media (max-width: 991.98px){
    body.ea .ea-row__media{ border-radius: 10px 10px 0 0; }
}
body.ea .ea-row:hover,
body.ea .ea-row:focus-within{ z-index: 6; }

/* Kleines Geprüft-Zeichen auf den Karten – nur der Haken neben dem Namen. */
body.ea .ea-c__nz,
body.ea .ea-card__nz{ display: flex; align-items: center; gap: 6px; min-width: 0; }
body.ea .ea-c__nz .ea-c__n,
body.ea .ea-card__nz .ea-card__name{ min-width: 0; }

body.ea .ea-geprueft--klein{ color: var(--ea-ok, #2E6B45); gap: 0; flex: 0 0 auto; }
body.ea .ea-geprueft--klein svg{ width: 16px; height: 16px; flex: 0 0 16px; display: block; }

/* Auf einer Karte hat der Kasten nach rechts wenig Platz. */
body.ea .ea-c .ea-geprueft__box,
body.ea .ea-card .ea-geprueft__box{ left: -22px; max-width: 240px; }
body.ea .ea-c .ea-geprueft__box::before,
body.ea .ea-card .ea-geprueft__box::before{ left: 38px; }

/* Der Haken auf den Karten: etwas grösser, kräftigeres Grün, weisser
   Ring und ein hauchdünner Schein. Er fällt auf, weil er wie ein Siegel
   sitzt – nicht, weil er laut ist. */
body.ea .ea-geprueft--klein{ color: #137A46; }
body.ea .ea-geprueft--klein svg{ width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(19,122,70,.16); }
body.ea .ea-c__nz,
body.ea .ea-card__nz{ gap: 8px; }

/* Der Erklärkasten am Geprüft-Zeichen: helle Karte statt dunklem Kasten –
   dieselbe Sprache wie die übrigen Karten der Seite. */
body.ea .ea-geprueft__box{
    background: #fff;
    color: var(--ea-ink-2);
    border: 1px solid var(--ea-line);
    box-shadow: var(--ea-shadow-lg);
}
body.ea .ea-geprueft__box b{ color: var(--ea-ink); }
body.ea .ea-geprueft__box::before{
    background: #fff;
    border-left: 1px solid var(--ea-line);
    border-top: 1px solid var(--ea-line);
    border-radius: 3px 0 0 0;
    top: -6px;
}

/* Das Geprüft-Zeichen im Blau der Wortmarke. Das „abc" im Logo ist
   #8096F8 – darauf wäre ein weißer Haken mit 2,75:1 zu blass, deshalb
   eine Spur dunkler (#5C74EE, 4,1:1). Gleiche Familie, klar lesbar. */
body.ea .ea-geprueft--klein{ color: #5C74EE; }
body.ea .ea-geprueft--klein svg{
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(92,116,238,.20);
}
body.ea .ea-tag--ok.ea-geprueft{
    background: var(--ea-accent-soft);
    color: var(--ea-accent-dark);
    border-color: #CFD8FB;
}

/* In der Ergebnisliste steht das Zeichen jetzt hinter dem Namen –
   wie auf den Karten – statt als Schildchen unter den Angaben. */
body.ea .ea-row__nz{ display: flex; align-items: center; gap: 8px; min-width: 0; }
body.ea .ea-row__nz .ea-row__name{ min-width: 0; }

/* Im Profilkopf sitzt das Siegel neben dem Namen statt als Schildchen
   in der Reihe darunter – dieselbe Form wie auf Karten und in Listen,
   nur eine Spur größer, weil der Name größer ist. */
body.ea .ea-pname__z{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.ea .ea-pname__z .ea-pname{ margin-bottom: 0; }
body.ea .ea-pname__z .ea-geprueft--klein svg{
    width: 22px; height: 22px; flex: 0 0 22px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(92,116,238,.20);
}
body.ea .ea-ask__price .ea-geprueft--klein svg{ width: 20px; height: 20px; flex: 0 0 20px; }

/* Das Menüzeichen steckt jetzt als SVG in der Vorlage – vorher lag es
   als Datei in /img/icons/, die auf dem Server fehlt; der Knopf war
   dadurch unsichtbar. */
body.ea .ea-burger{ color: var(--ea-ink); }
body.ea .ea-burger svg{ width: 22px; height: 22px; display: block; }

/* Suchleiste: Beschriftung und Eingabe an derselben Kante.
   Auf dem Handy steht der Kopfbereich mittig, dadurch rutschte die
   Beschriftung in die Mitte, während die Eingabe links blieb. */
body.ea .ea-find__f label,
body.ea .ea-find__f input,
body.ea .ea-find__f select,
body.ea .ea-kombi__liste li{ text-align: left; }

/* Der feste Balken am unteren Rand ist entfernt (Vorlage), damit auf
   dem Handy nichts mehr über dem Inhalt klebt. */
body.ea.ea-start{ padding-bottom: 0; }

/* Namenstreffer auf der Suchseite: eine ruhige Liste, kein Kartenraster –
   wer einen Namen sucht, will ihn wiederfinden, nicht bebildert bekommen. */
body.ea .ea-namen{ display: grid; gap: 8px; margin-bottom: 30px; }
body.ea .ea-name{
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--ea-line); border-radius: 12px;
    background: #fff; text-decoration: none; color: inherit;
    transition: border-color .16s ease, box-shadow .16s ease;
}
body.ea .ea-name:hover{ border-color: #D9D3CD; box-shadow: var(--ea-shadow); }
body.ea .ea-name__n{ font-size: 16px; font-weight: 600; }
body.ea .ea-name__u{ font-size: 14px; color: var(--ea-muted); }
body.ea .ea-name__p{ margin-left: auto; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce){ body.ea .ea-name{ transition: none; } }

/* Vorschlagsliste: oben die Leistungen, darunter die gefundenen
   Anbieter unter einer kleinen Überschrift. */
body.ea .ea-kombi__kopf{
    padding: 10px 14px 4px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ea-muted);
    pointer-events: none;
}
body.ea .ea-kombi__a{ display: block; line-height: 1.35; }
body.ea .ea-kombi__an{ display: block; font-weight: 600; }
body.ea .ea-kombi__au{ display: block; font-size: 13px; color: var(--ea-muted); }
body.ea .ea-kombi__a.an .ea-kombi__au{ color: inherit; opacity: .75; }

/* Auf der Suchseite steht das Feld in einem eigenen Kasten – die Liste
   braucht dort denselben Bezugspunkt wie in der Suchleiste. */
body.ea .ea-search__field.ea-kombi{ position: relative; }

/* Sprachen im Profilkopf: Das Wort "Sprachen" führt die Aufzählung an –
   "Spricht Deutsch …" klang, als spräche eine Person, während hinter
   einer Agentur mehrere Menschen stehen. */
body.ea .ea-phead__sprk{ font-weight: 600; color: var(--ea-ink); }

/* =====================================================================
   TEIL R – Fotos im Dienstleisterbereich
   Eine Strecke statt Alben je Leistung: Ablegen oder auswählen, fertig.
   Ein Bild trägt die Marke „Titelbild" und steht damit in den Listen.
   ===================================================================== */

body.ea .ea-fo{ margin-top: 22px; }

body.ea .ea-fo__zone{
    display: grid; place-items: center; gap: 6px;
    padding: 34px 20px;
    border: 1.5px dashed var(--ea-line);
    border-radius: 14px;
    background: #fff;
    text-align: center; cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}
body.ea .ea-fo__zone:hover,
body.ea .ea-fo__zone--drauf{ border-color: var(--ea-accent); background: var(--ea-accent-soft); }
body.ea .ea-fo__zone--laeuft{ opacity: .6; pointer-events: none; }
body.ea .ea-fo__zone svg{ width: 26px; height: 26px; color: var(--ea-accent); }
body.ea .ea-fo__zt{ font-size: 15.5px; font-weight: 600; }
body.ea .ea-fo__zu{ font-size: 13.5px; color: var(--ea-muted); }

body.ea .ea-fo__stand{ min-height: 20px; margin: 10px 0 0; font-size: 14px; color: var(--ea-muted); }
body.ea .ea-fo__stand--gut{ color: #2E6B45; }
body.ea .ea-fo__stand--fehlt{ color: var(--ea-error); }

body.ea .ea-fo__gitter{
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px; margin-top: 14px;
}
body.ea .ea-fo__leer{ grid-column: 1 / -1; margin: 8px 0; color: var(--ea-muted); }

body.ea .ea-fo__b{
    position: relative; margin: 0;
    aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: 12px; background: var(--ea-surface);
}
body.ea .ea-fo__b img{ width: 100%; height: 100%; object-fit: cover; display: block; }

body.ea .ea-fo__marke{
    position: absolute; left: 8px; top: 8px; z-index: 2;
    display: none;
    padding: 4px 9px; border-radius: 20px;
    background: var(--ea-accent); color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
body.ea .ea-fo__b--titel .ea-fo__marke{ display: block; }
body.ea .ea-fo__b--titel{ box-shadow: 0 0 0 2px var(--ea-accent); }

body.ea .ea-fo__tun{
    position: absolute; inset: auto 0 0 0; z-index: 2;
    display: flex; gap: 6px; padding: 8px;
    background: linear-gradient(to top, rgba(20,20,22,.72), rgba(20,20,22,0));
    opacity: 0; transition: opacity .16s ease;
}
body.ea .ea-fo__b:hover .ea-fo__tun,
body.ea .ea-fo__b:focus-within .ea-fo__tun{ opacity: 1; }

body.ea .ea-fo__t{
    border: 0; border-radius: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,.92); color: var(--ea-ink);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
body.ea .ea-fo__t:hover{ background: #fff; }
body.ea .ea-fo__b--titel .ea-fo__t--titel{ display: none; }
body.ea .ea-fo__b--fragt .ea-fo__t--weg{ background: var(--ea-error); color: #fff; }

@media (max-width: 640px){
    body.ea .ea-fo__gitter{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    body.ea .ea-fo__tun{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
    body.ea .ea-fo__zone, body.ea .ea-fo__tun{ transition: none; }
}

/* Handy: die beiden Spalten des Bereichs duerfen schrumpfen.
   Ohne min-width:0 zieht das laengste Wort im linken Menue die
   ganze Seite breiter als den Bildschirm – dann laesst sich die
   Seite seitlich schieben und rechts steht alles ueber. */
@media (max-width: 900px){
    body.ea .ea-b__seite,
    body.ea .ea-b__inhalt{ min-width: 0; }
}

/* Handy: der Bereich braucht seitlich Luft. Die Regel .ea-b setzt
   padding:26px 0 70px und loescht damit den seitlichen Abstand,
   den .ea-wrap sonst mitbringt. Auf dem Handy geben wir ihn zurueck. */
@media (max-width: 900px){
    body.ea .ea-b{ padding-left: 16px; padding-right: 16px; }
}

/* ================================================================
   TEIL S – Fotos, Fassung 2: Vorschau, Ablagefeld, Alben
   ================================================================ */

/* ---------- Vorschau: wo das Titelbild landet ---------- */
body.ea .ea-fo__vor{ background:#fff; border:1px solid var(--ea-line-2,#E7E2DE); border-radius:16px;
    padding:22px 24px; margin:0 0 26px; }
body.ea .ea-fo__vh{ margin:0 0 16px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ea-muted,#75777A); }
body.ea .ea-fo__vz{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:22px; align-items:start; }
body.ea .ea-fo__vk, body.ea .ea-fo__vp{ margin:0; }
body.ea .ea-fo__vl{ display:block; font-size:12.5px; color:var(--ea-muted,#75777A); margin:0 0 8px; }
body.ea .ea-fo__vkb, body.ea .ea-fo__vpb{ overflow:hidden; border-radius:12px; background:var(--ea-surface,#F5F4F3); }
body.ea .ea-fo__vkb{ aspect-ratio:4/3; }
body.ea .ea-fo__vpb{ aspect-ratio:21/7; }
body.ea .ea-fo__vkb img, body.ea .ea-fo__vpb img{ width:100%; height:100%; object-fit:cover; display:block; }
body.ea .ea-fo__vk figcaption, body.ea .ea-fo__vp figcaption{ display:flex; gap:10px; align-items:baseline;
    margin-top:9px; font-size:14px; color:var(--ea-ink-2,#45474A); }
body.ea .ea-fo__vk figcaption b, body.ea .ea-fo__vp figcaption b{ color:var(--ea-ink,#1E1E1C); font-weight:600; }
body.ea .ea-fo__vt{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--ea-line,#E7E2DE);
    font-size:14px; color:var(--ea-muted,#75777A); }

/* ---------- Ablagefeld mit Zielalbum ---------- */
body.ea .ea-fo__neu{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
body.ea .ea-fo__ziel{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:14px;
    color:var(--ea-ink-2,#45474A); }
body.ea .ea-fo__ziel select{ height:38px; padding:0 12px; border:1px solid var(--ea-line,#E7E2DE);
    border-radius:9px; background:#fff; font:inherit; color:var(--ea-ink,#1E1E1C); max-width:100%; }
body.ea .ea-fo__nk{ height:38px; padding:0 14px; border:1px solid var(--ea-line,#E7E2DE); border-radius:9px;
    background:#fff; font:inherit; font-size:14px; color:var(--ea-accent,#3F5AD1); cursor:pointer; }
body.ea .ea-fo__nk:hover{ border-color:var(--ea-accent,#3F5AD1); background:var(--ea-accent-soft,#EEF1FE); }

/* ---------- ein Album ---------- */
body.ea .ea-fo__alben{ display:grid; gap:30px; margin-top:24px; }
body.ea .ea-fo__album{ display:grid; gap:12px; }
body.ea .ea-fo__ak{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
    padding-bottom:10px; border-bottom:1px solid var(--ea-line,#E7E2DE); }
body.ea .ea-fo__an{ margin:0; font-family:var(--ea-serif); font-weight:400; font-size:20px;
    color:var(--ea-ink,#1E1E1C); text-transform:none; letter-spacing:-.005em; }
body.ea .ea-fo__az{ font-size:13.5px; color:var(--ea-muted,#75777A); }
body.ea .ea-fo__vorn{ font-size:12.5px; padding:3px 9px; border-radius:20px;
    background:var(--ea-accent-soft,#EEF1FE); color:var(--ea-accent-dark,#2F45A8); }
body.ea .ea-fo__k{ margin-left:auto; border:0; background:none; padding:0; font:inherit; font-size:13.5px;
    color:var(--ea-muted,#75777A); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
body.ea .ea-fo__k + .ea-fo__k{ margin-left:0; }
body.ea .ea-fo__k:hover{ color:var(--ea-ink,#1E1E1C); }
body.ea .ea-fo__k--aweg:hover{ color:var(--ea-error,#A8432F); }
body.ea .ea-fo__k--fragt{ color:var(--ea-error,#A8432F); font-weight:600; }

@media (max-width: 700px){
    body.ea .ea-fo__vz{ grid-template-columns:1fr; gap:18px; }
    body.ea .ea-fo__vkb{ aspect-ratio:16/10; }
    body.ea .ea-fo__ak{ align-items:center; }
    body.ea .ea-fo__k{ margin-left:0; }
    body.ea .ea-fo__az{ width:100%; order:3; }
}

/* ---------- weitere Alben als Kacheln ---------- */
body.ea .ea-alb{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
body.ea .ea-alb__w{ min-width:0; }
body.ea .ea-alb__k{ position:relative; display:block; overflow:hidden; border-radius:12px;
    aspect-ratio:4/3; background:var(--ea-surface,#F5F4F3); }
body.ea .ea-alb__k img{ width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .6s cubic-bezier(.22,.61,.36,1); }
body.ea .ea-alb__k:hover img{ transform:scale(1.05); }
body.ea .ea-alb__t{ position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px;
    display:flex; flex-direction:column; gap:1px; color:#fff;
    background:linear-gradient(to top, rgba(20,20,19,.78), rgba(20,20,19,0)); }
body.ea .ea-alb__t b{ font-size:15px; font-weight:600; line-height:1.25; }
body.ea .ea-alb__t i{ font-style:normal; font-size:12.5px; color:rgba(255,255,255,.75); }

/* Alben mit weniger als fuenf Bildern: das Muster fuer fuenf laesst
   sonst Luecken. Jede Anzahl bekommt ihre eigene, gefuellte Form. */
body.ea .ea-gal[data-n="1"]{ grid-template-columns:1fr; grid-template-rows:308px; }
body.ea .ea-gal[data-n="2"]{ grid-template-columns:1fr 1fr; grid-template-rows:308px; }
body.ea .ea-gal[data-n="3"]{ grid-template-columns:2fr 1fr; }
body.ea .ea-gal[data-n="4"]{ grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:230px; }

body.ea .ea-gal[data-n="1"] a:first-child,
body.ea .ea-gal[data-n="2"] a:first-child,
body.ea .ea-gal[data-n="4"] a:first-child{ grid-row:auto; }

body.ea .ea-gal[data-n="1"] a,
body.ea .ea-gal[data-n="2"] a,
body.ea .ea-gal[data-n="3"] a,
body.ea .ea-gal[data-n="4"] a{ border-radius:10px; }


/* Die Abschnitte auf dem Anbieterprofil kommen ohne Trennstriche aus.
   Ueberschrift und Abstand sagen schon, dass etwas Neues beginnt -
   der Strich sagt es ein zweites Mal und macht die Seite unruhig. */
body.ea .ea-pblock{ border-top:0; padding-top:34px; padding-bottom:0; }
body.ea .ea-pblock:first-child{ padding-top:26px; }

/* ---------- langer Text, abgeblendet ----------
   Ohne JavaScript steht der Text vollstaendig da: Erst die Klasse
   ea-mehr--an, die das Skript setzt, blendet ab. So verliert niemand
   Inhalt, wenn das Skript nicht laeuft. */
body.ea .ea-mehr{ color:var(--ea-ink-2,#45474A); max-width:66ch; }
body.ea .ea-mehr__in{ overflow:hidden; line-height:1.62; }
body.ea .ea-mehr__k{ display:none; }

body.ea .ea-mehr--an .ea-mehr__in{ position:relative; max-height:11.4em; }
/* Der Verlauf sitzt im Textkasten, nicht im Rahmen aussen herum:
   So endet er immer genau an der Schnittkante, egal wie hoch der
   Knopf darunter faellt. Sonst blieb die letzte Zeile halb lesbar. */
body.ea .ea-mehr--an .ea-mehr__in::after{ content:""; position:absolute; left:0; right:0;
    bottom:0; height:6.4em; pointer-events:none;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 72%, #fff 100%); }
body.ea .ea-mehr--an .ea-mehr__k{ display:inline-flex; align-items:center; gap:7px;
    margin-top:12px; padding:0; border:0; background:none; font:inherit; font-size:15px;
    color:var(--ea-accent,#3F5AD1); cursor:pointer; }
body.ea .ea-mehr--an .ea-mehr__k::after{ content:""; width:7px; height:7px; margin-top:-3px;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:rotate(45deg); transition:transform .2s ease; }
body.ea .ea-mehr--an .ea-mehr__k:hover{ color:var(--ea-accent-dark,#2F45A8); }

body.ea .ea-mehr--auf .ea-mehr__in{ max-height:none; }
body.ea .ea-mehr--auf .ea-mehr__in::after{ opacity:0; }
body.ea .ea-mehr--auf .ea-mehr__k::after{ transform:rotate(-135deg); margin-top:2px; }

/* ---------- Portrait in der Ergebnisliste ---------- */
body.ea .ea-row__wer{ display:flex; align-items:center; gap:12px; min-width:0; }
body.ea .ea-row__wt{ min-width:0; }
body.ea .ea-row__ava{ flex:0 0 auto; width:46px; height:46px; border-radius:50%;
    overflow:hidden; background:var(--ea-surface,#F5F4F3);
    box-shadow:0 0 0 1px var(--ea-line,#E7E2DE); display:block; }
body.ea .ea-row__ava img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Auf dem Handy hat die Kopfzeile zu wenig Platz fuer beides
   nebeneinander: Der Name bricht dann auf drei Zeilen um, waehrend
   rechts Sterne und Preis stehen. Also untereinander - erst wer,
   dann wie bewertet und was es kostet. */
@media (max-width: 640px){
    body.ea .ea-row__ava{ width:42px; height:42px; }
    body.ea .ea-row__wer{ gap:10px; align-items:flex-start; }
    body.ea .ea-row__top{ flex-direction:column; gap:10px; }
    body.ea .ea-row__right{ text-align:left; white-space:normal;
        display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
    body.ea .ea-row__right .ea-price{ margin-top:0 !important; }
}

/* ---------- fester Balken am Handy ----------
   Nur unter 900 Pixel. Am Rechner steht der Anfragekasten ohnehin
   rechts neben dem Profil und wandert beim Scrollen mit. */
body.ea .ea-fix{ display:none; }

@media (max-width: 900px){
    body.ea .ea-fix{
        position:fixed; left:0; right:0; bottom:0; z-index:60;
        display:flex; align-items:center; gap:10px;
        padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        /* Deckende Farbe statt Weichzeichner: backdrop-filter bringt
           iPhones beim Scrollen ins Stocken und kostet hier nichts. */
        background:#fff;
        border-top:1px solid var(--ea-line,#E7E2DE);
        box-shadow:0 -6px 24px rgba(20,20,19,.07);
    }
    body.ea .ea-fix__ask{
        flex:1 1 auto; display:flex; align-items:center; justify-content:center;
        height:46px; padding:0 16px; border-radius:10px; white-space:nowrap;
        background:var(--ea-accent,#3F5AD1); color:#fff; font-weight:600; font-size:15.5px;
        text-decoration:none; }
    body.ea .ea-fix__ask:active{ background:var(--ea-accent-dark,#2F45A8); }
    body.ea .ea-fix__weg{
        flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center;
        border:1px solid var(--ea-line,#E7E2DE); border-radius:10px; background:#fff;
        color:var(--ea-ink,#1E1E1C); cursor:pointer; padding:0; }
    body.ea .ea-fix__weg svg{ width:21px; height:21px; }
    body.ea .ea-fix__weg:active{ background:var(--ea-surface,#F5F4F3); }

    /* Platz, damit der Balken nichts verdeckt. */
    body.ea .ea-profile{ padding-bottom:84px; }

    /* Ist das Formular offen, waere der Balken doppelt gemoppelt. */
    body.ea-anfrage-offen .ea-fix{ display:none; }
}


/* Notbremse: Sollte die Klasse am body haengenbleiben, ohne dass ein
   Formular zu sehen ist, bleibt die Seite trotzdem bedienbar. */
@media (max-width: 991.98px){
    body.ea-anfrage-offen:has(.ea-anfrage[hidden]){ overflow: auto; }
}

/* Zweite Sicherung zum selben Fehler: Solange das Anfrageformular
   offen ist, traegt der Kasten keine Einblendung mehr. Damit faellt
   auch in Safari der Bezugsrahmen weg, der ein "position: fixed"
   darin am Kasten statt am Bildschirm festmachen wuerde. */
@media (max-width: 991.98px){
    body.ea-anfrage-offen .ea-ask,
    body.ea-anfrage-offen .ea-profile > aside{
        animation: none !important;
        transform: none !important;
        filter: none !important;
        will-change: auto !important;
    }
}

/* ================================================================
   TEIL T – Anfrageformular als Blatt von unten (Handy)
   ================================================================
   Vorher legte sich das Formular ueber den ganzen Bildschirm. Das
   sah aus wie eine andere Seite: Man wusste nicht mehr, wo man ist
   und wem man schreibt. Jetzt schiebt es sich von unten herein und
   laesst oben einen Streifen der Seite stehen - das Profil bleibt
   sichtbar, das Formular gehoert erkennbar dazu. */

@media (max-width: 991.98px){

    body.ea .ea-anfrage{
        top: auto; bottom: 0; left: 0; right: 0;
        max-height: 80vh;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 44px rgba(20,20,19,.26);
        padding-top: 10px;
    }

    /* Der dunkle Bereich dahinter. Er gehoert zum Seitenkoerper,
       damit kein zusaetzliches Element noetig ist. */
    body.ea-anfrage-offen::after{
        content: ""; position: fixed; inset: 0; z-index: 1049;
        background: rgba(20,20,19,.45);
        animation: ea-dunkel .2s ease both;
    }
    @keyframes ea-dunkel{ from{ opacity: 0; } to{ opacity: 1; } }

    /* Der Griff oben - das Zeichen dafuer, dass hier ein Blatt liegt. */
    body.ea .ea-anfrage__kopf{ top: -10px; margin-top: -10px; padding-top: 18px; }
    body.ea .ea-anfrage__kopf::before{
        content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px; border-radius: 4px; background: var(--ea-line,#E7E2DE);
    }

    body.ea .ea-anfrage--auf{ animation: ea-blatt .26s cubic-bezier(.22,.61,.36,1) both; }
    @keyframes ea-blatt{
        from{ transform: translateY(28px); }
        to  { transform: none; }
    }
}

/* Wem schreibe ich? Bild und Name stehen im Kopf des Formulars. */
/* Die Zeile traegt dieselbe Kennung wie der sonst leere Platzhalter
   fuer die Empfaengerliste, und der ist im Klappfeld ausgeblendet.
   Deshalb hier ausdruecklich wieder sichtbar machen. */
body.ea .ea-anfrage #ea-guest-names.ea-anfrage__wer,
body.ea .ea-anfrage__wer{
    display: flex; align-items: center; gap: 11px;
    margin: 0 0 16px; padding-bottom: 14px;
    border-bottom: 1px solid var(--ea-line,#E7E2DE);
}
body.ea .ea-anfrage__wer img{
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    box-shadow: 0 0 0 1px var(--ea-line,#E7E2DE);
}
body.ea .ea-anfrage__wer span{
    display: flex; flex-direction: column; font-size: 13px; color: var(--ea-muted,#75777A); min-width: 0;
}
body.ea .ea-anfrage__wer b{ font-size: 15.5px; color: var(--ea-ink,#1E1E1C); font-weight: 600; }

/* ---------- viele Kontaktwege im Balken ----------
   Der Platz unten ist fest, die Zahl der Wege nicht. Also ruecken die
   Symbole enger zusammen, je mehr es sind - und ab fuenf traegt der
   Knopf die kurze Aufschrift. Alle Wege bleiben sichtbar; das ist der
   Sinn der Sache, sonst haette der Dienstleister nichts davon. */
@media (max-width: 900px){

    body.ea .ea-fix__kurz{ display: none; }

    body.ea .ea-fix[data-wege="3"] .ea-fix__weg,
    body.ea .ea-fix[data-wege="4"] .ea-fix__weg{ width: 44px; height: 44px; }
    body.ea .ea-fix[data-wege="3"] .ea-fix__weg svg,
    body.ea .ea-fix[data-wege="4"] .ea-fix__weg svg{ width: 19px; height: 19px; }
    body.ea .ea-fix[data-wege="3"],
    body.ea .ea-fix[data-wege="4"]{ gap: 7px; padding-left: 11px; padding-right: 11px; }
    body.ea .ea-fix[data-wege="3"] .ea-fix__ask,
    body.ea .ea-fix[data-wege="4"] .ea-fix__ask{ font-size: 14.5px; padding: 0 10px; height: 44px; }

    body.ea .ea-fix[data-wege="5"] .ea-fix__weg,
    body.ea .ea-fix[data-wege="6"] .ea-fix__weg,
    body.ea .ea-fix[data-wege="7"] .ea-fix__weg,
    body.ea .ea-fix[data-wege="8"] .ea-fix__weg{ width: 40px; height: 42px; }
    body.ea .ea-fix[data-wege="5"] .ea-fix__weg svg,
    body.ea .ea-fix[data-wege="6"] .ea-fix__weg svg,
    body.ea .ea-fix[data-wege="7"] .ea-fix__weg svg,
    body.ea .ea-fix[data-wege="8"] .ea-fix__weg svg{ width: 18px; height: 18px; }
    body.ea .ea-fix[data-wege="5"],
    body.ea .ea-fix[data-wege="6"],
    body.ea .ea-fix[data-wege="7"],
    body.ea .ea-fix[data-wege="8"]{ gap: 5px; padding-left: 9px; padding-right: 9px; }
    body.ea .ea-fix[data-wege="5"] .ea-fix__ask,
    body.ea .ea-fix[data-wege="6"] .ea-fix__ask,
    body.ea .ea-fix[data-wege="7"] .ea-fix__ask,
    body.ea .ea-fix[data-wege="8"] .ea-fix__ask{ font-size: 14.5px; padding: 0 10px; height: 42px; }

    body.ea .ea-fix[data-wege="5"] .ea-fix__lang,
    body.ea .ea-fix[data-wege="6"] .ea-fix__lang,
    body.ea .ea-fix[data-wege="7"] .ea-fix__lang,
    body.ea .ea-fix[data-wege="8"] .ea-fix__lang{ display: none; }
    body.ea .ea-fix[data-wege="5"] .ea-fix__kurz,
    body.ea .ea-fix[data-wege="6"] .ea-fix__kurz,
    body.ea .ea-fix[data-wege="7"] .ea-fix__kurz,
    body.ea .ea-fix[data-wege="8"] .ea-fix__kurz{ display: inline; }

    /* Sollten es doch einmal mehr werden, als in eine Reihe passen:
       lieber schieben als abschneiden. */
    body.ea .ea-fix{ overflow-x: auto; scrollbar-width: none; }
    body.ea .ea-fix::-webkit-scrollbar{ display: none; }
}

/* ---------- gesperrte Kontaktwege sichtbar machen ----------
   Der Kunde soll vor dem Tippen wissen, welcher Weg offen ist -
   nicht erst danach. Formuliert wird das aus seiner Sicht: welchen
   Weg er nehmen soll. Was der Anbieter gebucht hat, geht ihn
   nichts an. */
body.ea .ea-weg,
body.ea .ea-fix__weg{ position: relative; }

body.ea .ea-weg__schloss{
    position: absolute; right: -2px; bottom: -2px;
    width: 15px; height: 15px; border-radius: 50%;
    background: #fff center/9px 9px no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375777A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
    box-shadow: 0 0 0 1px var(--ea-line, #E7E2DE);
}

/* Der Hinweis steht jetzt ueber den Symbolen und ist dauerhaft da.
   Er uebernimmt dabei die Trennlinie, die sonst die Symbolreihe traegt -
   sonst klebte er am Satz darueber und die Reihe haette einen zweiten
   Strich bekommen. */
body.ea .ea-wege__hinweis{
    margin: 16px 0 0; padding-top: 16px;
    border-top: 1px solid var(--ea-line-2, #F2EEEB);
}
body.ea .ea-wege__hinweis + .ea-wege{
    margin-top: 12px; padding-top: 0; border-top: 0;
}

/* Gesperrte Symbole ruhig, aber nicht kaputt: Sie bleiben antippbar,
   damit der Anbieter erfaehrt, wie oft jemand ihn erreichen wollte. */
body.ea .ea-fix__weg.ea-weg--zu{ color: var(--ea-muted, #75777A); }

/* ---------- noch nicht freigeschaltete Wege ----------
   Eine Reihe gleicher Zeichen, keine Sperren, kein Sonderknopf. Der
   Weg, fuer den es einen echten Ersatz gibt - der Rueckruf -, traegt
   die Akzentfarbe. Was beim Tippen passiert, sagt der Satz darueber
   und die Ueberschrift des Formulars. */
body.ea .ea-weg--rueck{
    color: var(--ea-accent, #3F5AD1);
    border-color: var(--ea-accent, #3F5AD1);
    background: var(--ea-accent-soft, #EEF1FE);
}
body.ea .ea-weg--rueck:hover{
    color: var(--ea-accent-dark, #2F45A8);
    border-color: var(--ea-accent-dark, #2F45A8);
    background: var(--ea-accent-soft, #EEF1FE);
}

/* Im Balken unten bleibt es beim Zeichen - der Platz reicht nicht fuer
   ein Wort neben allen anderen Wegen. Statt einer Sperre traegt es die
   Akzentfarbe: kein totes Symbol, sondern ein Angebot. */
body.ea .ea-fix__weg--rueck{
    color: var(--ea-accent, #3F5AD1);
    border-color: var(--ea-accent, #3F5AD1);
    background: var(--ea-accent-soft, #EEF1FE);
}

/* ---------- verpasste Wege im Bereich ----------
   Zahl und Satz gehoeren in eine Zeile: "6x wollte jemand dir ueber
   WhatsApp schreiben". Untereinander liest es sich wie eine Liste
   von Zahlen, nebeneinander wie ein Befund. */
body.ea .ea-b__wege{ list-style: none; margin: 14px 0 16px; padding: 0; display: grid; gap: 8px; }
body.ea .ea-b__wege li{ display: flex; gap: 10px; align-items: baseline;
    font-size: 15px; color: var(--ea-ink-2, #45474A); }
body.ea .ea-b__wege li b{ flex: 0 0 auto; min-width: 36px;
    color: var(--ea-ink, #1E1E1C); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ================================================================
   TEIL U – Dienstleisterbereich am Handy: Leiste unten wie in einer App
   ================================================================ */

body.ea .ea-app,
body.ea .ea-mehrblatt{ display: none; }

@media (max-width: 900px){

    /* Das Menü in der Karte wird überflüssig - es steht jetzt unten. */
    body.ea .ea-b__ich .ea-b__menu,
    body.ea .ea-b__ich .ea-b__linie{ display: none; }
    body.ea .ea-b__ich{ padding: 16px 18px; }
    body.ea .ea-b__stufe{ margin-top: 12px; }

    /* Foto, Name und Stufe stehen nur auf "Start". Auf Anfragen, Profil,
       Fotos und Paketen nahmen sie ein Drittel des Bildschirms weg und
       sagten nichts, was in der Kopfzeile nicht schon steht. */
    body.ea .ea-b:not(.ea-b--start) > .ea-b__seite{ display: none; }

    body.ea .ea-b{ padding-bottom: 92px; }

    body.ea .ea-app{
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        display: grid; grid-template-columns: repeat(5, 1fr);
        background: #fff; border-top: 1px solid var(--ea-line, #E7E2DE);
        box-shadow: 0 -6px 24px rgba(20,20,19,.07);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    body.ea .ea-app__t{
        position: relative; display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 3px; min-height: 58px; padding: 7px 2px 8px;
        border: 0; background: none; font: inherit; cursor: pointer;
        color: var(--ea-muted, #75777A); text-decoration: none;
    }
    body.ea .ea-app__t svg{ width: 23px; height: 23px; display: block; }
    body.ea .ea-app__t span{ font-size: 11px; letter-spacing: .01em; }
    body.ea .ea-app__t.on{ color: var(--ea-accent, #3F5AD1); }

    body.ea .ea-app__num{
        position: absolute; top: 5px; left: 50%; margin-left: 5px;
        min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
        background: var(--ea-accent, #3F5AD1); color: #fff;
        font-size: 11px; font-style: normal; font-weight: 600;
        display: grid; place-items: center;
    }

    /* ---------- das Blatt hinter "Mehr" ---------- */
    /* Unter der Leiste, nicht darueber: Sie bleibt sichtbar und
       bedienbar, und "Mehr" bleibt als geoeffnet erkennbar. */
    body.ea .ea-mehrblatt{
        position: fixed; inset: 0; z-index: 59;
        display: block; background: rgba(20,20,19,.45);
        animation: ea-dunkel .18s ease both;
    }
    body.ea .ea-mehrblatt[hidden]{ display: none; }

    body.ea .ea-mehrblatt__in{
        position: absolute; left: 0; right: 0; bottom: 0;
        background: #fff; border-radius: 18px 18px 0 0;
        padding: 10px 0 calc(70px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -12px 44px rgba(20,20,19,.26);
        animation: ea-blatt .22s cubic-bezier(.22,.61,.36,1) both;
    }
    body.ea .ea-mehrblatt__griff{
        width: 40px; height: 4px; border-radius: 4px; margin: 0 auto 8px;
        background: var(--ea-line, #E7E2DE);
    }
    body.ea .ea-mehrblatt a{
        display: block; padding: 15px 22px; font-size: 16px;
        color: var(--ea-ink, #1E1E1C); text-decoration: none;
        border-top: 1px solid var(--ea-line-2, #F2EEEB);
    }
    body.ea .ea-mehrblatt a:first-of-type{ border-top: 0; }
    body.ea .ea-mehrblatt a:active{ background: var(--ea-surface, #F5F4F3); }
    body.ea .ea-mehrblatt__ab{ color: var(--ea-error, #A8432F) !important; }

    body.ea-mehr-offen{ overflow: hidden; }
}

/* ================================================================
   TEIL V – Anfragen als Postfach
   ================================================================ */

/* ---------- Filter ---------- */
body.ea .ea-an__filter{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
body.ea .ea-an__f{
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 20px; background: #fff;
    font: inherit; font-size: 14.5px; color: var(--ea-ink-2, #45474A); cursor: pointer;
}
body.ea .ea-an__f i{ font-style: normal; font-size: 12.5px; color: var(--ea-muted, #75777A); }
body.ea .ea-an__f:hover{ border-color: var(--ea-accent, #3F5AD1); color: var(--ea-accent-dark, #2F45A8); }
body.ea .ea-an__f.on{ background: var(--ea-ink, #1E1E1C); border-color: var(--ea-ink, #1E1E1C); color: #fff; }
body.ea .ea-an__f.on i{ color: rgba(255,255,255,.62); }

/* ---------- die Liste ---------- */
body.ea .ea-an{ background: #fff; border: 1px solid var(--ea-line-2, #F2EEEB); border-radius: 16px; overflow: hidden; }
body.ea .ea-an__z + .ea-an__z{ border-top: 1px solid var(--ea-line-2, #F2EEEB); }

body.ea .ea-an__kopf{
    width: 100%; display: flex; align-items: flex-start; gap: 12px;
    padding: 15px 18px; border: 0; background: none; text-align: left;
    font: inherit; cursor: pointer;
}
body.ea .ea-an__kopf:hover{ background: var(--ea-surface, #F5F4F3); }

/* Der Punkt sagt in einem Zeichen, was Sache ist. */
body.ea .ea-an__punkt{
    flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%;
    background: transparent;
}
body.ea .ea-an__z[data-status="neu"] .ea-an__punkt{ background: var(--ea-accent, #3F5AD1); }

body.ea .ea-an__mitte{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.ea .ea-an__betreff{ font-size: 15.5px; font-weight: 600; color: var(--ea-ink, #1E1E1C); }
body.ea .ea-an__z[data-status="ok"] .ea-an__betreff{ font-weight: 500; }
body.ea .ea-an__von{ font-size: 13.5px; color: var(--ea-muted, #75777A); }

/* Der Anfang des Textes - eine Zeile, mehr nicht. */
body.ea .ea-an__vor{
    font-size: 14px; color: var(--ea-ink-2, #45474A); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.ea .ea-an__z--auf .ea-an__vor{ display: none; }

body.ea .ea-an__rechts{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
body.ea .ea-an__tag{ font-size: 12.5px; color: var(--ea-muted, #75777A); }

/* ---------- die aufgeklappte Anfrage ---------- */
body.ea .ea-an__auf{ padding: 2px 18px 20px 38px; }
/* Die offene Anfrage bleibt weiss - sie ist dieselbe Karte, nur
   ausgeklappt. Ein grauer Hintergrund liesse sie wie ein anderes
   Element aussehen. */
body.ea .ea-an__z--auf .ea-an__kopf:hover{ background: transparent; }
body.ea .ea-an__meta{ font-size: 13.5px; color: var(--ea-muted, #75777A); margin: 0 0 10px; }
body.ea .ea-an__text{ margin: 0 0 14px; color: var(--ea-ink-2, #45474A); max-width: 62ch; line-height: 1.6; }
body.ea .ea-an__leer{ padding: 22px 18px; margin: 0; color: var(--ea-muted, #75777A); }

@media (max-width: 640px){
    body.ea .ea-an__kopf{ padding: 14px 14px; gap: 10px; }
    body.ea .ea-an__auf{ padding: 2px 14px 18px 32px; }
    body.ea .ea-an__vor{ display: none; }
    body.ea .ea-an__rechts{ align-items: flex-end; }
    body.ea .ea-an__tag{ display: none; }
}

/* ================================================================
   TEIL W – Profil direkt in der Zeile bearbeiten
   ================================================================ */

body.ea .ea-f{ position: relative; }

/* Rechts stehen die Knoepfe in derselben Spalte:
   "Aendern" weicht "Speichern", damit die Zeile nicht springt.
   Sie sehen aus wie die Schaltflaechen bei den Anfragen: "Ändern" ist
   der weisse Knopf, "Speichern" der volle blaue.
   Feste Breite, weil "Speichern ✕" breiter ist als "Ändern". Ohne feste
   Breite wuerde die Spalte beim Aufklappen wachsen und die Felder
   daneben schmaler machen - dann rutscht doch wieder etwas. */
body.ea .ea-f__tun{ display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; width: 152px; }
body.ea .ea-b__row > .a{ min-width: 152px; text-align: right; }

body.ea .ea-f__auf,
body.ea .ea-f__ok,
body.ea .ea-f__ab{
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 8px;
    padding: 9px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.2;
    font-family: inherit; cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
/* "Ändern" / "Hinzufügen" – der weisse Knopf */
body.ea .ea-f__auf{ background: #fff; color: var(--ea-ink, #1E1E1C);
    border-color: var(--ea-line, #E7E2DE); }
body.ea .ea-f__auf:hover{ background: var(--ea-surface, #F5F4F3); }
/* "Speichern" – der volle blaue Knopf */
body.ea .ea-f__ok{ background: var(--ea-accent, #3F5AD1); color: #fff; }
body.ea .ea-f__ok:hover{ background: var(--ea-accent-dark, #2F45A8); color: #fff; }
body.ea .ea-f__ok[disabled]{ background: #B9C1E8; color: #fff; cursor: default; }
/* "✕" – schmaler weisser Knopf daneben */
body.ea .ea-f__ab{ background: #fff; color: var(--ea-muted, #75777A);
    border-color: var(--ea-line, #E7E2DE); padding: 9px 11px; font-size: 14px; }
body.ea .ea-f__ab:hover{ background: var(--ea-surface, #F5F4F3); color: var(--ea-ink, #1E1E1C); }
body.ea .ea-f__auf[hidden], body.ea .ea-f__ok[hidden], body.ea .ea-f__ab[hidden]{ display: none; }

/* Die Felder stehen immer da - im Ruhezustand weiss mit duennem
   Rahmen, beim Bearbeiten mit eingefaerbtem Hintergrund. Weil sich
   nur die Farbe aendert und nicht die Groesse, rutscht nichts. */
body.ea .ea-f .v{ min-width: 0; }
body.ea .ea-f__in{
    width: 100%; padding: 8px 12px; border-radius: 9px;
    border: 1px solid var(--ea-line, #E7E2DE); background: #fff;
    font: inherit; color: var(--ea-ink, #1E1E1C);
    -webkit-appearance: none; appearance: none;
}
body.ea textarea.ea-f__in{ display: block; line-height: 1.55; resize: vertical; }
body.ea select.ea-f__in{ opacity: 1; color: var(--ea-ink, #1E1E1C); }
body.ea .ea-f__in[readonly],
body.ea .ea-f__in[disabled]{ cursor: default; }
body.ea .ea-f__in::placeholder{ color: var(--ea-muted, #75777A); }

body.ea .ea-f--auf .ea-f__in{ background: var(--ea-surface, #F5F4F3); border-color: var(--ea-line, #E7E2DE); }
body.ea .ea-f--auf .ea-f__in:focus{
    outline: none; background: var(--ea-accent-soft, #EEF1FE);
    border-color: var(--ea-accent, #3F5AD1);
}

body.ea .ea-f__paar{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.ea .ea-f__drei{ display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 10px; }

/* Nur im Fehlerfall taucht eine Zeile auf. */
body.ea .ea-f__meldung{ margin: 8px 0 0; font-size: 13.5px; color: var(--ea-error, #A8432F); }
body.ea .ea-f__meldung[hidden]{ display: none; }

/* Die Felder tragen ihre eigene Kante - die Trennstriche zwischen
   den Zeilen waeren daneben ein zweiter Strich fuer dieselbe Sache. */
body.ea .ea-b__row.ea-f{ border-bottom: 0; align-items: center; padding: 10px 0; }

@media (max-width: 640px){
    body.ea .ea-f__paar,
    body.ea .ea-f__drei{ grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Alben auf- und zuklappen ---------- */
body.ea .ea-fo__auf{
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
    color: var(--ea-ink, #1E1E1C); text-align: left;
}
body.ea .ea-fo__auf svg{ width: 15px; height: 15px; flex: 0 0 auto;
    color: var(--ea-muted, #75777A); transition: transform .18s ease; }
body.ea .ea-fo__album--auf .ea-fo__auf svg{ transform: rotate(90deg); }
body.ea .ea-fo__auf:hover svg{ color: var(--ea-ink, #1E1E1C); }

/* ---------- Videos im Fotobereich ---------- */
body.ea .ea-fo__filme{ margin-top: 34px; }
body.ea .ea-fo__k--film{ margin-left: auto; }

body.ea .ea-fo__filmneu{ margin: 14px 0 4px; display: grid; gap: 12px; max-width: 520px; }
body.ea .ea-fo__filmneu[hidden]{ display: none; }
body.ea .ea-fo__lang{ display: block; }
body.ea .ea-fo__lang span{ display: block; margin: 0 0 5px; font-size: 13px; color: var(--ea-muted, #75777A); }
body.ea .ea-fo__lang input{
    width: 100%; min-height: 42px; padding: 9px 12px; border-radius: 9px;
    border: 1px solid var(--ea-line, #E7E2DE); background: #fff; font: inherit; font-size: 15px;
}
body.ea .ea-fo__lang input:focus{ outline: none; border-color: var(--ea-accent, #3F5AD1);
    box-shadow: 0 0 0 3px var(--ea-accent-soft, #EEF1FE); }
body.ea .ea-fo__tunreihe{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body.ea .ea-fo__ab{ border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px;
    color: var(--ea-muted, #75777A); cursor: pointer; }
body.ea .ea-fo__meldung{ font-size: 13.5px; color: var(--ea-muted, #75777A); }
body.ea .ea-fo__meldung--fehlt{ color: var(--ea-error, #A8432F); }

body.ea .ea-fo__filmgitter{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px; margin-top: 14px; }
body.ea .ea-fo__film{ margin: 0; position: relative; }
body.ea .ea-fo__filmbild{ position: relative; display: block; aspect-ratio: 16/9;
    border-radius: 12px; overflow: hidden; background: var(--ea-ink, #1E1E1C); }
body.ea .ea-fo__filmbild:hover .ea-fo__filmspiel{ background: var(--ea-accent, #3F5AD1); }
body.ea .ea-fo__filmbild img{ width: 100%; height: 100%; object-fit: cover; display: block; }
body.ea .ea-fo__filmspiel{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 42px; height: 42px; border-radius: 50%; background: rgba(20,20,19,.55);
}
body.ea .ea-fo__filmspiel::after{
    content: ""; position: absolute; left: 17px; top: 13px;
    border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
body.ea .ea-fo__film figcaption{ display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
body.ea .ea-fo__film figcaption b{ font-size: 14.5px; font-weight: 600; color: var(--ea-ink, #1E1E1C); }
body.ea .ea-fo__film figcaption span{ font-size: 12.5px; color: var(--ea-muted, #75777A); }
body.ea .ea-fo__filmweg{
    margin-top: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px;
    color: var(--ea-muted, #75777A); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
body.ea .ea-fo__filmweg:hover{ color: var(--ea-error, #A8432F); }
body.ea .ea-fo__film--fragt .ea-fo__filmweg{ color: var(--ea-error, #A8432F); font-weight: 600; }

/* ---------- eigenes Foto als Videobild ---------- */
body.ea .ea-fo__filmtun{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
body.ea .ea-fo__filmbild-waehl,
body.ea .ea-fo__filmweg{
    border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px;
    color: var(--ea-muted, #75777A); cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
body.ea .ea-fo__filmbild-waehl:hover{ color: var(--ea-accent, #3F5AD1); }

body.ea .ea-fo__waehlband{
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    margin: 14px 0 0; padding: 12px 16px; border-radius: 10px;
    background: var(--ea-accent-soft, #EEF1FE); color: var(--ea-accent-dark, #2F45A8);
    font-size: 14.5px;
}
body.ea .ea-fo__waehlband[hidden]{ display: none; }
body.ea .ea-fo__waehlband button{
    margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: 14px;
    color: var(--ea-accent-dark, #2F45A8); cursor: pointer; text-decoration: underline;
}

/* Waehlt jemand gerade ein Bild, sind die Fotos das Ziel - und die
   uebrigen Knoepfe in den Kacheln waeren nur im Weg. */
body[data-waehlt] .ea-fo__tun{ display: none; }
body[data-waehlt] .ea-fo__b{ cursor: pointer; }
body[data-waehlt] .ea-fo__b img{ transition: transform .18s ease; }
body[data-waehlt] .ea-fo__b:hover img{ transform: scale(1.04); }
body[data-waehlt] .ea-fo__b:hover{ box-shadow: 0 0 0 3px var(--ea-accent, #3F5AD1); border-radius: 12px; }

/* ================================================================
   TEIL X – Ein Knopf fuer den ganzen Dienstleisterbereich

   Vorher gab es drei Sorten nebeneinander: unterstrichene Woerter,
   nackte Textknoepfe und volle Flaechen. Ab hier haben alle
   Schaltflaechen im Bereich dieselbe Form - weiss mit duennem
   Rahmen, die Hauptaktion voll in der Akzentfarbe.

   Steht bewusst am Dateiende: Die alten Regeln fuer .ea-fo__k und
   Verwandte stehen weiter oben und werden hier ueberschrieben,
   ohne dass ich sie einzeln herausschneiden muss.
   ================================================================ */

body.ea .ea-kn,
body.ea .ea-f__auf,
body.ea .ea-f__ab,
body.ea .ea-fo__k,
body.ea .ea-fo__nk,
body.ea .ea-fo__ab,
body.ea .ea-fo__filmbild-waehl,
body.ea .ea-fo__filmweg,
body.ea .ea-pk__neu,
body.ea .ea-pk__ab{
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: auto; height: auto; margin: 0;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 8px;
    background: #fff; color: var(--ea-ink, #1E1E1C);
    padding: 9px 14px;
    font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2;
    text-align: center; text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

body.ea .ea-kn:hover,
body.ea .ea-f__auf:hover,
body.ea .ea-f__ab:hover,
body.ea .ea-fo__k:hover,
body.ea .ea-fo__nk:hover,
body.ea .ea-fo__ab:hover,
body.ea .ea-fo__filmbild-waehl:hover,
body.ea .ea-fo__filmweg:hover,
body.ea .ea-pk__neu:hover,
body.ea .ea-pk__ab:hover{
    background: var(--ea-surface, #F5F4F3);
    color: var(--ea-ink, #1E1E1C);
    border-color: var(--ea-line, #E7E2DE);
}

/* Die Hauptaktion: volle Flaeche. */
body.ea .ea-kn--voll,
body.ea .ea-f__ok{
    background: var(--ea-accent, #3F5AD1); color: #fff; border-color: transparent;
}
body.ea .ea-kn--voll:hover,
body.ea .ea-f__ok:hover{
    background: var(--ea-accent-dark, #2F45A8); color: #fff; border-color: transparent;
}
body.ea .ea-f__ok[disabled],
body.ea .ea-kn--voll[disabled]{ background: #B9C1E8; color: #fff; cursor: default; }

/* Loeschen bleibt ein normaler Knopf - erst beim Nachfragen wird er rot.
   Ein von vornherein roter Knopf schreit, bevor etwas passiert ist. */
body.ea .ea-fo__k--aweg:hover,
body.ea .ea-fo__filmweg:hover{
    border-color: var(--ea-error, #A8432F); color: var(--ea-error, #A8432F); background: #fff;
}
body.ea .ea-fo__k--fragt,
body.ea .ea-fo__film--fragt .ea-fo__filmweg{
    border-color: var(--ea-error, #A8432F); color: var(--ea-error, #A8432F); background: #fff;
}

/* Das "✕" neben Speichern ist schmaler, sonst gleich. */
body.ea .ea-f__ab{ padding: 9px 11px; font-size: 14px; color: var(--ea-muted, #75777A); }

body.ea .ea-f__auf[hidden],
body.ea .ea-f__ok[hidden],
body.ea .ea-f__ab[hidden]{ display: none; }

/* ---------- Albumkopf: Name, darunter die Zahl, darunter die Knoepfe ----------
   Vorher standen Name, Zahl und drei unterstrichene Woerter in einer
   Zeile und sind am Handy wild umgebrochen. Jetzt drei feste Ebenen. */

body.ea .ea-fo__ak{
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
    align-items: start;
    padding-bottom: 12px; border-bottom: 1px solid var(--ea-line, #E7E2DE);
}
/* Die Reihenfolge festnageln: Name, Zahl, Knoepfe. Weiter oben setzt
   eine Regel fuer schmale Fenster die Zahl auf order:3 - dann stuende
   sie unter den Knoepfen. */
body.ea .ea-fo__ak > .ea-fo__auf,
body.ea .ea-fo__ak > .ea-fo__an{ order: 1; }
body.ea .ea-fo__ak > .ea-fo__az{ order: 2; width: auto; font-size: 13.5px;
    color: var(--ea-muted, #75777A); }
body.ea .ea-fo__ak > .ea-fo__aktun{ order: 3; }

body.ea .ea-fo__aktun{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.ea .ea-fo__leistung{ display:flex; align-items:center; gap:8px; width:100%; }
body.ea .ea-fo__leistung span{ font-size:13px; color:var(--ea-muted, #75777A); }
body.ea .ea-fo__leistung select{ min-width:180px; max-width:100%; }
body.ea .ea-fo__aktun .ea-fo__vorn{ align-self: center; }
body.ea .ea-fo__k{ margin-left: 0; }

/* Knoepfe mit Zeichen davor: das Zeichen so gross wie die Schrift,
   sonst wird der Knopf zwei Pixel hoeher als seine Nachbarn. */
body.ea .ea-pk__neu svg,
body.ea .ea-kn svg{ width: 16px; height: 16px; flex: 0 0 16px; }
body.ea .ea-pk__neu{ margin: 8px 4px 4px; }

/* ================================================================
   TEIL Y – Alben als Kacheln, drei nebeneinander

   Vorher war jedes Album eine Zeile mit Namen. Bei zehn Hochzeiten
   sagt "Hochzeit - K & V" wenig - das Deckblatt sagt sofort, wer
   drin ist. Also: Bild oben, Name, Zahl, Knoepfe darunter.

   Alle Kacheln sind zu. Ein Tipp klappt eine auf; sie nimmt dann
   die ganze Reihe ein und zeigt ihre Bilder genau wie bisher, die
   anderen bleiben daneben Kacheln.
   ================================================================ */

body.ea .ea-fo__alben{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 26px 22px;
    align-items: start;
    margin-top: 24px;
}

body.ea .ea-fo__album{ display: grid; gap: 14px; align-content: start; min-width: 0; }
body.ea .ea-fo__akopf{ display: grid; gap: 10px; align-content: start; min-width: 0; }

/* Aufgeklappt nimmt das Album die ganze Reihe - aber die Kachel selbst
   bleibt genau da, wo sie war: Sie steht weiter in der ersten Spalte und
   ist genauso breit wie zu. Dafuer bekommt der aufgeklappte Abschnitt
   dieselben Spalten und denselben Abstand wie die Kachelreihe darueber.
   Die Bilder gehen darunter auf, ueber die volle Breite. */
body.ea .ea-fo__album--auf{ grid-column: 1 / -1; }

/* Der Kopf bekommt dieselben Spalten und denselben Abstand wie die
   Kachelreihe darueber. Dadurch ist das Deckblatt aufgeklappt genau so
   breit und steht an derselben Stelle wie zu; Name, Zahl und Knoepfe
   ruecken daneben, statt eine leere Flaeche stehen zu lassen. */
body.ea .ea-fo__album--auf > .ea-fo__akopf{
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    column-gap: 22px; align-items: start;
}
body.ea .ea-fo__album--auf .ea-fo__auf{ grid-column: 1; grid-row: 1 / span 2; }
body.ea .ea-fo__album--auf .ea-fo__vorn,
body.ea .ea-fo__album--auf .ea-fo__aktun{ grid-column: 2; }

/* ---------- die Kachel ---------- */

body.ea .ea-fo__auf{
    display: grid; gap: 10px;
    width: 100%; margin: 0; padding: 0;
    border: 0; background: none; font: inherit; color: inherit;
    text-align: left; cursor: pointer;
}
body.ea .ea-fo__abild{
    position: relative; display: block; width: 100%;
    aspect-ratio: 4 / 3; overflow: hidden;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 12px;
    background: var(--ea-surface, #F5F4F3);
}
body.ea .ea-fo__abild img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s ease;
}
body.ea .ea-fo__auf:hover .ea-fo__abild img{ transform: scale(1.03); }
body.ea .ea-fo__aleer{
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 13.5px; color: var(--ea-muted, #75777A);
}
/* Der Pfeil sitzt auf dem Bild - er sagt: hier geht etwas auf. */
body.ea .ea-fo__apfeil{
    position: absolute; right: 10px; bottom: 10px;
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; background: rgba(255,255,255,.94);
    color: var(--ea-ink, #1E1E1C);
    box-shadow: 0 1px 5px rgba(20,20,19,.18);
    transition: transform .2s ease;
}
body.ea .ea-fo__apfeil svg{ width: 15px; height: 15px; }
body.ea .ea-fo__album--auf .ea-fo__apfeil{ transform: rotate(90deg); }

body.ea .ea-fo__atext{ display: grid; gap: 2px; min-width: 0; }
body.ea .ea-fo__an{
    display: block; margin: 0;
    font-family: var(--ea-serif); font-weight: 400; font-size: 18px;
    color: var(--ea-ink, #1E1E1C); letter-spacing: -.005em;
    overflow-wrap: anywhere;
}
body.ea .ea-fo__atext .ea-fo__az{ font-size: 13.5px; color: var(--ea-muted, #75777A); }

body.ea .ea-fo__album .ea-fo__vorn{ justify-self: start; }

/* Fehlt die Datei auf dem Server, bleibt der graue Platz mit Hinweis -
   kein kaputtes Bildsymbol. */
body.ea .ea-fo__abild--fehlt::after{
    content: "Bild nicht gefunden";
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 13.5px; color: var(--ea-muted, #75777A);
}

/* Der Bilderraster steht wie bisher unter dem Kopf. */
body.ea .ea-fo__album--auf .ea-fo__gitter{ margin-top: 6px; }
body.ea .ea-fo__t--links,
body.ea .ea-fo__t--rechts{
    min-width:38px; font-size:19px; line-height:1; text-decoration:none;
}

@media (max-width: 620px){
    body.ea .ea-fo__alben{ grid-template-columns: minmax(0, 1fr); gap: 26px; }

    /* Am Handy ist nur eine Spalte da - der Kopf bleibt auch aufgeklappt
       untereinander, sonst laeuft die Seite seitlich ueber. */
    body.ea .ea-fo__album--auf > .ea-fo__akopf{ grid-template-columns: minmax(0, 1fr); }
    body.ea .ea-fo__album--auf .ea-fo__auf,
    body.ea .ea-fo__album--auf .ea-fo__vorn,
    body.ea .ea-fo__album--auf .ea-fo__aktun{ grid-column: 1; grid-row: auto; }
}

/* ================================================================
   TEIL Z – Zahlen mit Linien

   Vier Kacheln mit der Zahl und einer schmalen Linie darunter, dann
   die grossen Diagramme. Bei einem kostenlosen Eintrag kommt eine
   zweite, schraffierte Reihe dazu: was angetippt, aber nicht
   durchgestellt wurde.
   ================================================================ */

/* ---------- Band fuer den kostenlosen Eintrag ---------- */
body.ea .ea-za__band{
    display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
    background: var(--ea-accent-soft, #EEF1FE);
    border: 1px solid #D5DCFA; border-radius: 14px;
    padding: 18px 20px; margin-bottom: 20px;
}
body.ea .ea-za__schloss{
    flex: 0 0 auto; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: #fff; color: var(--ea-accent-dark, #2F45A8);
}
body.ea .ea-za__schloss svg{ width: 17px; height: 17px; }
body.ea .ea-za__bandtext{ flex: 1 1 320px; min-width: 0; }
body.ea .ea-za__bandtext b{ display: block; font-size: 15.5px; margin-bottom: 3px; }
body.ea .ea-za__bandtext p{ margin: 0; font-size: 14px; color: var(--ea-ink-2, #45474A); max-width: 62ch; }
body.ea .ea-za__bandtun{ flex: 0 0 auto; margin-left: auto; }

/* ---------- die vier Kacheln ---------- */
body.ea .ea-za__kacheln{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 14px;
}
body.ea .ea-za__kachel{
    position: relative;
    background: #fff; border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 14px; padding: 18px;
}
body.ea .ea-za__zahl{
    font-family: var(--ea-serif); font-size: 42px; line-height: 1.05;
    margin: 0 0 2px; font-variant-numeric: tabular-nums;
}
body.ea .ea-za__zahl--zu{ color: #A9A7A2; }
body.ea .ea-za__was{ font-size: 13.5px; color: var(--ea-muted, #75777A); margin-bottom: 2px; }
body.ea .ea-za__dazu{ font-size: 13px; color: var(--ea-muted, #75777A); line-height: 1.45; }
body.ea .ea-za__weg{ color: var(--ea-accent-dark, #2F45A8); font-weight: 700; }
body.ea .ea-za__linie{ margin-top: 12px; }
body.ea .ea-za__marke{
    position: absolute; top: 16px; right: 16px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--ea-accent-dark, #2F45A8);
    background: var(--ea-accent-soft, #EEF1FE); border-radius: 20px; padding: 4px 9px;
}
body.ea .ea-za__marke svg{ width: 12px; height: 12px; }

/* ---------- Karten mit Diagramm ---------- */
body.ea .ea-za__karte{ margin-top: 18px; padding: 22px; }
body.ea .ea-za__kopf{
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 6px;
}
/* body.alt setzt h2 auf Grossbuchstaben - hier gehoert die Ueberschrift
   in die Schrift der Seite, nicht in Versalien. */
body.ea .ea-za__kopf h2{
    font-family: var(--ea-serif); font-weight: 400; font-size: 20px; margin: 0;
    color: var(--ea-ink, #1E1E1C); text-transform: none; letter-spacing: -.005em;
}
body.ea .ea-za__kopf span{ font-size: 13.5px; color: var(--ea-muted, #75777A); }
body.ea .ea-za__fuss{ font-size: 13px; color: var(--ea-muted, #75777A); margin: 12px 0 0; }

body.ea .ea-za__legende{
    display: flex; gap: 18px; flex-wrap: wrap;
    margin: 2px 0 10px; font-size: 13px; color: var(--ea-ink-2, #45474A);
}
body.ea .ea-za__legende span{ display: flex; align-items: center; gap: 7px; }
body.ea .ea-za__s{ width: 22px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
body.ea .ea-za__s--an{ background: var(--ea-accent, #3F5AD1); }
body.ea .ea-za__s--weg{
    background: repeating-linear-gradient(135deg, #D6D4D0 0 4px, #fff 4px 8px);
    border: 1px solid #D6D4D0;
}

/* ---------- Tabelle als Rueckfallebene ---------- */
body.ea .ea-za__tab{ margin-top: 14px; }
body.ea .ea-za__tab summary{
    cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ea-accent, #3F5AD1);
}
body.ea .ea-za__tab table{
    border-collapse: collapse; width: 100%; margin-top: 12px; font-size: 13.5px;
}
body.ea .ea-za__tab th,
body.ea .ea-za__tab td{
    text-align: right; padding: 7px 10px;
    border-bottom: 1px solid var(--ea-line-2, #F2EEEB);
    font-variant-numeric: tabular-nums;
}
body.ea .ea-za__tab th:first-child,
body.ea .ea-za__tab td:first-child{ text-align: left; }
body.ea .ea-za__tab th{ color: var(--ea-muted, #75777A); font-weight: 600; }

/* ---------- im Diagramm ---------- */
body.ea .ea-za__achse{ fill: var(--ea-muted, #75777A); font-size: 12px; }
body.ea .ea-za__wert{
    fill: var(--ea-ink, #1E1E1C); font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
body.ea .ea-za__wert--weg{ fill: var(--ea-muted, #75777A); }
body.ea .ea-za__gitter{ stroke: #EDEAE7; stroke-width: 1; }
body.ea .ea-za__karte svg text,
body.ea .ea-za__kachel svg text{ font-family: inherit; }

/* ---------- Hinweisfahne am Zeiger ---------- */
body.ea .ea-za__tip{
    position: fixed; z-index: 60; pointer-events: none; opacity: 0;
    transition: opacity .1s;
    background: var(--ea-ink, #1E1E1C); color: #fff;
    border-radius: 9px; padding: 8px 11px; font-size: 13px;
    box-shadow: 0 6px 18px rgba(20,20,19,.22); white-space: nowrap;
}
body.ea .ea-za__tip.an{ opacity: 1; }

@media (max-width: 700px){
    body.ea .ea-za__band{ flex-direction: column; }
    /* Untereinander wirkt flex-basis auf die Hoehe - ohne diese Zeile
       klafft zwischen Text und Knopf eine 320 px hohe Luecke. */
    body.ea .ea-za__bandtext{ flex: 0 0 auto; }
    body.ea .ea-za__bandtun{ margin-left: 0; }
    body.ea .ea-za__zahl{ font-size: 36px; }
}

/* ================================================================
   TEIL AB – Ergebnisliste als Karten
   Neu, 19.08.2026. Ersetzt die breiten Zeilen (.ea-row) auf der
   Ergebnisliste; .ea-row bleibt im Stylesheet, weil andere Seiten
   sie noch benutzen.

   Warum: In der Zeilenfassung passten auf einen Bildschirm zweieinhalb
   Anbieter, jetzt neun. Die Karte ist nicht neu erfunden - es ist
   dieselbe .ea-c wie auf der Startseite, nur mit Bewertungszeile.

   Drei Dinge stecken hier drin:
     1. das Raster der Ergebnisse
     2. die Karte mit Wischstreifen fuer Premium
     3. die drei gesponserten Plaetze ueber der Liste
   ================================================================ */

/* ---------- Raster ---------- */
body.ea .ea-erg{ display: grid; grid-template-columns: minmax(0,1fr); gap: 26px 16px; }
@media (min-width: 620px){ body.ea .ea-erg{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Ab 992 px steht die Filterspalte daneben und nimmt 280 px weg -
   deshalb kommt die dritte Spalte erst bei 1120 px. */
@media (min-width: 1120px){ body.ea .ea-erg{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1620px){ body.ea .ea-erg{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---------- die Karte ---------- */
body.ea .ea-spon__reihe .ea-c,
body.ea .ea-erg .ea-c{
    position: relative; border: 0; border-radius: 0; overflow: visible; background: none;
}

/* Huelle um das Bild: sie traegt Herz, Portrait und Punkte. Im Bild
   selbst duerfen die nicht liegen - bei Premium ist das Bild ein
   Wischstreifen (grid mit auto-flow: column), dort wuerde jedes Kind
   zu einer weiteren Spalte. */
body.ea .ea-spon__reihe .ea-c__mw,
body.ea .ea-erg .ea-c__mw{
    position: relative; border-radius: 14px; overflow: hidden;
    background: var(--ea-surface, #F5F4F3);
}
body.ea .ea-spon__reihe .ea-c__m,
body.ea .ea-erg .ea-c__m{
    height: auto; aspect-ratio: 4/3; overflow: hidden; position: relative; display: block;
}
body.ea .ea-spon__reihe .ea-c__m > img,
body.ea .ea-erg .ea-c__m > img{
    width: 100%; height: 100%; object-fit: cover; display: block;
}
body.ea .ea-c__m > picture.ea-c__bild{
    display: block; width: 100%; height: 100%; overflow: hidden;
}
body.ea .ea-c__m > picture.ea-c__bild > img{
    width: 100%; height: 100%; object-fit: cover; display: block;
}
body.ea .ea-spon__reihe .ea-c__av,
body.ea .ea-erg .ea-c__av{
    position: absolute; left: 10px; bottom: 10px; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid #fff; object-fit: cover; background: #fff;
    box-shadow: 0 1px 4px rgba(23,24,26,.18);
}
body.ea .ea-spon__reihe .ea-c__b,
body.ea .ea-erg .ea-c__b{ padding: 11px 2px 0; }
body.ea .ea-spon__reihe .ea-c__nz,
body.ea .ea-erg .ea-c__nz{ display: flex; align-items: center; gap: 6px; min-width: 0; }
body.ea .ea-spon__reihe .ea-c__n,
body.ea .ea-erg .ea-c__n{
    font-size: 16.5px; font-weight: 600; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
body.ea .ea-spon__reihe .ea-c__k,
body.ea .ea-erg .ea-c__k{
    font-size: 14px; margin-top: 1px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
body.ea .ea-spon__reihe .ea-c__z,
body.ea .ea-erg .ea-c__z{ font-size: 14.5px; margin-top: 6px; }
body.ea .ea-spon__reihe .ea-c__bw,
body.ea .ea-erg .ea-c__bw{ color: var(--ea-muted, #75777A); }
body.ea .ea-spon__reihe .ea-c__fav,
body.ea .ea-erg .ea-c__fav{ top: 10px; right: 10px; background: rgba(255,255,255,.92); }
body.ea .ea-spon__reihe .ea-geprueft--klein svg,
body.ea .ea-erg .ea-geprueft--klein svg{
    width: 16px; height: 16px; display: block; color: var(--ea-accent, #3F5AD1); flex: 0 0 auto;
}

/* ---------- Premium: dieselbe Karte, nur mit Wischstreifen ---------- */
body.ea .ea-c--top .ea-c__m{
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.ea .ea-c--top .ea-c__m::-webkit-scrollbar{ display: none; }
body.ea .ea-c--top .ea-c__m > img,
body.ea .ea-c--top .ea-c__m > picture{ scroll-snap-align: start; }

body.ea .ea-c__punkte{
    position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3;
    display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
body.ea .ea-c__punkte i{
    width: 5px; height: 5px; border-radius: 50%; display: block;
    background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.25);
    transition: background .15s;
}
body.ea .ea-c__punkte i.on{ background: #fff; }

/* Pfeile zum Blaettern. Am Rechner gibt es keinen Finger zum Wischen -
   ohne sie merkt dort niemand, dass mehrere Fotos da sind. Sie liegen
   in der Huelle, nicht im Bildlink, sonst wuerde jeder Klick auf einen
   Pfeil das Profil oeffnen. */
body.ea .ea-c__pf{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(255,255,255,.94); color: var(--ea-ink, #1E1E1C);
    display: none; place-items: center; cursor: pointer; z-index: 4;
    box-shadow: 0 1px 5px rgba(23,24,26,.22);
}
body.ea .ea-c__pf svg{ width: 17px; height: 17px; display: block; }
body.ea .ea-c__pf--l{ left: 8px; }
body.ea .ea-c__pf--r{ right: 8px; }
body.ea .ea-c__pf:hover{ background: #fff; }

/* Nur wo es einen Zeiger gibt und Platz ist. Am Handy wischt man. */
@media (hover: hover) and (min-width: 768px){
    body.ea .ea-c--top:hover .ea-c__pf,
    body.ea .ea-c--top:focus-within .ea-c__pf{ display: grid; }
}

/* ---------- gesponserte Plaetze ---------- */
body.ea .ea-spon{
    background: #FAFAF9; border: 1px solid var(--ea-line-2, #F0ECE8);
    border-radius: 14px; padding: 16px 16px 18px; margin: 0 0 26px;
}
body.ea .ea-spon__kopf{ display: flex; align-items: baseline; gap: 9px; margin: 0 0 14px; }
body.ea .ea-spon__kopf b{ font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
body.ea .ea-spon__kopf span{ color: var(--ea-muted, #75777A); font-size: 12.5px; }
body.ea .ea-spon__reihe{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }

@media (max-width: 767.98px){
    /* Am Handy nebeneinander zum Wischen. Drei gestapelte Karten waeren
       ein halber Bildschirm bezahlte Werbung, bevor das erste echte
       Ergebnis kommt. */
    body.ea .ea-spon{ padding: 14px 0 16px; border: 0; border-radius: 0; background: none; }
    body.ea .ea-spon__kopf{ padding: 0 2px; }
    body.ea .ea-spon__reihe{
        /* grid-template-columns muss zurueckgesetzt werden, sonst gewinnt
           die Dreierteilung von oben gegen grid-auto-columns. */
        grid-template-columns: none;
        grid-auto-flow: column; grid-auto-columns: 76%;
        gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
        scrollbar-width: none; padding-bottom: 2px;
    }
    body.ea .ea-spon__reihe::-webkit-scrollbar{ display: none; }
    body.ea .ea-spon__reihe > .ea-c{ scroll-snap-align: start; }
}

/* ---------- Sterne im Filter ohne Bilddateien ----------
   /img/icons/ fehlt auf dem Server; beim ersten Klick verschwanden die
   Sterne. Jetzt steht das Sternbild als SVG in der Vorlage und
   js/filter-1.35.js setzt nur noch die Klasse "voll". */
body.ea .ea-stars-input{ display: flex; gap: 4px; }
body.ea .ea-stars-input .pointer{ cursor: pointer; line-height: 0; }
body.ea .ea-stars-input svg{ width: 22px; height: 22px; display: block; }
body.ea .ea-stars-input svg path{
    fill: none; stroke: #E0A81E; stroke-width: 1.6; stroke-linejoin: round;
    transition: fill .12s;
}
body.ea .ea-stars-input .voll svg path{ fill: #E0A81E; }

/* Platz fuer Werbung von aussen, unter dem Filter. Er erscheint nur,
   wenn wirklich etwas drinsteht. */
body.ea .ea-anzeige{
    margin-top: 16px; border: 1px solid var(--ea-line-2, #F0ECE8); border-radius: 10px;
    padding: 14px; text-align: center;
}
body.ea .ea-anzeige__k{
    display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ea-muted, #75777A); margin-bottom: 8px;
}
body.ea .ea-anzeige img{ max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }

/* ---------- Geprueft-Zeichen in der Karte ----------
   Der Erklaerkasten aus TEIL Q ist bis 264 px breit und haengt am
   Zeichen selbst. In einer 269 px schmalen Karte schob er die Seite
   waagerecht auf (gemessen: scrollWidth 443 statt 390). Hier haengt
   er stattdessen an der Namenszeile und wird nie breiter als die
   Karte. */
body.ea .ea-spon__reihe .ea-c__nz,
body.ea .ea-erg .ea-c__nz{ position: relative; }

body.ea .ea-spon__reihe .ea-c__nz .ea-geprueft,
body.ea .ea-erg .ea-c__nz .ea-geprueft{ position: static; }

body.ea .ea-spon__reihe .ea-c__nz .ea-geprueft__box,
body.ea .ea-erg .ea-c__nz .ea-geprueft__box{
    left: 0; right: auto; width: auto; max-width: 100%;
}
body.ea .ea-spon__reihe .ea-c__nz .ea-geprueft__box::before,
body.ea .ea-erg .ea-c__nz .ea-geprueft__box::before{ left: 16px; right: auto; }

/* ================================================================
   TEIL AC – Datum in der Suche
   Neu, 19.08.2026.

   Das Datum sucht nicht mit: Wer wann frei ist, weiss die Seite nicht -
   dafuer muesste jeder Dienstleister einen Kalender pflegen. Es wird
   durchgereicht bis ins Anfrageformular. Deshalb steht ueber der Liste
   "wird in deine Anfrage uebernommen" und nicht "verfuegbar".
   ================================================================ */

/* Das Datumsfeld braucht keine halbe Leiste - Text ist es keiner. */
@media (min-width: 901px){
    body.ea .ea-find__f--wann{ flex: 0 0 210px; }
    body.ea .ea-find{ max-width: 1000px; }
}
/* Safari zeigt ein leeres Datumsfeld sonst als schmalen Strich. */
body.ea .ea-find__f--wann input{ min-height: 22px; }
body.ea .ea-find__f--wann input::-webkit-calendar-picker-indicator{ margin-left: 4px; opacity: .55; }

body.ea .ea-wann{
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin: 0 0 18px; padding: 10px 14px;
    border: 1px solid var(--ea-line-2, #F0ECE8); border-radius: 10px;
    background: #fff; font-size: 14.5px;
}
body.ea .ea-wann svg{ width: 18px; height: 18px; flex: 0 0 18px; color: var(--ea-accent, #3F5AD1); }
body.ea .ea-wann span{ color: var(--ea-muted, #75777A); }
body.ea .ea-wann a{ margin-left: auto; color: var(--ea-muted, #75777A); font-size: 13.5px; }
body.ea .ea-wann a:hover{ color: var(--ea-error, #A8432F); }

/* ================================================================
   TEIL AD – eigener Kalender
   Neu, 19.08.2026.

   Der Kalender des Browsers kommt aus dem Betriebssystem: englische
   Monatsnamen auf englischen Rechnern, fremde Farben, nicht gestaltbar.
   Deshalb ein eigener (js/datum-1.0.js). Das echte <input type="date">
   bleibt im Formular stehen und wird nur unsichtbar - ohne JavaScript
   ist alles wie vorher.

   Am Handy kommt der Kalender als Blatt von unten, wie das Suchblatt
   und das Anfrageformular. Ueber 600 px haengt er unter dem Feld.
   ================================================================ */

/* Das echte Feld bleibt im Formular - unsichtbar, aber vorhanden.
   Die Auswahl ist bewusst body.ea input.ea-dp__echt und nicht nur
   .ea-dp__echt: In der Suchleiste gilt sonst  body.ea .ea-find__f input
   { width:100% } weiter, und das versteckte Feld schob die Seite
   waagerecht auf (gemessen: scrollWidth 1787 statt 1180). */
body.ea input.ea-dp__echt{
    position: absolute; width: 1px; max-width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Die lesbare Flaeche an seiner Stelle - sieht aus wie die anderen
   Felder der Suchleiste, ist aber ein Knopf. */
body.ea .ea-dp__feld{
    display: block; width: 100%; padding: 0; border: 0; background: none;
    font: inherit; font-size: 16.5px; line-height: 1.35;
    color: var(--ea-ink, #1E1E1C); text-align: left; cursor: pointer;
}
body.ea .ea-dp__feld--leer{ color: #A9A49E; }
body.ea .ea-dp__feld:focus{ outline: 0; }
body.ea .ea-dp__feld:focus-visible{ text-decoration: underline; }

/* ---------- der Kalender ---------- */
body.ea .ea-dp{ position: absolute; inset: 0; z-index: 1200; }
body.ea .ea-dp__in{
    position: absolute; width: 316px; box-sizing: border-box;
    background: #fff; border: 1px solid var(--ea-line, #E7E2DE); border-radius: 14px;
    box-shadow: 0 14px 40px rgba(20,20,22,.16);
    padding: 14px 14px 12px;
}
body.ea .ea-dp__griff{ display: none; }

body.ea .ea-dp__kopf{
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
}
body.ea .ea-dp__monat{
    flex: 1 1 auto; text-align: center; font-size: 15.5px; font-weight: 600;
}
body.ea .ea-dp__pf{
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    border: 1px solid var(--ea-line, #E7E2DE); background: #fff;
    display: grid; place-items: center; cursor: pointer; color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-dp__pf svg{ width: 16px; height: 16px; }
body.ea .ea-dp__pf:hover{ background: var(--ea-surface, #F5F4F3); }
body.ea .ea-dp__pf[disabled]{ opacity: .35; cursor: default; }

body.ea .ea-dp__wochentage,
body.ea .ea-dp__gitter{
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
body.ea .ea-dp__wochentage span{
    text-align: center; font-size: 11.5px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ea-muted, #75777A); padding: 4px 0 6px;
}
body.ea .ea-dp__tag{
    height: 38px; border: 0; border-radius: 9px; background: none;
    font: inherit; font-size: 14.5px; color: var(--ea-ink, #1E1E1C); cursor: pointer;
    transition: background .12s, color .12s;
}
body.ea .ea-dp__tag:hover{ background: var(--ea-accent-soft, #EEF1FE); }
body.ea .ea-dp__tag--weg{ color: #C4C7CB; cursor: default; }
body.ea .ea-dp__tag--weg:hover{ background: none; }
body.ea .ea-dp__tag--heute{ box-shadow: inset 0 0 0 1px var(--ea-line, #E7E2DE); font-weight: 600; }
body.ea .ea-dp__tag--an,
body.ea .ea-dp__tag--an:hover{
    background: var(--ea-accent, #3F5AD1); color: #fff; font-weight: 600; box-shadow: none;
}

body.ea .ea-dp__fuss{
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--ea-line-2, #F0ECE8);
}
body.ea .ea-dp__weg{
    border: 0; background: none; font: inherit; font-size: 13.5px;
    color: var(--ea-muted, #75777A); cursor: pointer; padding: 6px 0;
}
body.ea .ea-dp__weg:hover{ color: var(--ea-error, #A8432F); }
body.ea .ea-dp__zu{
    margin-left: auto; border: 0; border-radius: 8px;
    background: var(--ea-ink, #1E1E1C); color: #fff;
    font: inherit; font-size: 13.5px; font-weight: 600;
    padding: 9px 16px; cursor: pointer;
}

/* ---------- Handy: Blatt von unten ---------- */
@media (max-width: 600px){
    body.ea .ea-dp{ position: fixed; background: rgba(20,20,22,.32); }
    body.ea .ea-dp__in{
        position: absolute; left: 0; right: 0; bottom: 0; top: auto;
        width: auto; border-radius: 16px 16px 0 0; border-width: 0;
        padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        animation: ea-dp-auf .22s cubic-bezier(.22,.61,.36,1);
    }
    body.ea .ea-dp__griff{
        display: block; width: 40px; height: 4px; border-radius: 2px;
        background: var(--ea-line, #E7E2DE); margin: 4px auto 12px;
    }
    body.ea .ea-dp__tag{ height: 44px; font-size: 15.5px; }
    body.ea.ea-dp-offen{ overflow: hidden; }
}
@keyframes ea-dp-auf{ from{ transform: translateY(14%); } to{ transform: none; } }
@media (prefers-reduced-motion: reduce){
    body.ea .ea-dp__in{ animation: none; }
}

/* ---------- Suchleiste auf der Suchseite ----------
   Die Regel, die sie am Handy untereinander stellt, gilt nur innerhalb
   von .ea-hero - auf /suchen steht sie ausserhalb und blieb deshalb
   vierspaltig. Mit dem dritten Feld quetschten sich "Was", "Wo",
   "Wann" und der Knopf nebeneinander auf 390 px. */
@media (max-width: 767.98px){
    body.ea .ea-search{ grid-template-columns: 1fr; }
    body.ea .ea-search__field{
        border-right: 0; border-bottom: 1px solid var(--ea-line-2, #F0ECE8);
    }
    body.ea .ea-search__go{ padding: 10px; }
    body.ea .ea-search__go .ea-btn{ width: 100%; padding: 14px; }
}


/* ================================================================
   TEIL AE – Startseite mit Karten
   Neu, 19.08.2026.

   Wer ankommt, sieht Dienstleister, nicht ein leeres Suchfeld. Die
   Suche ist eine 46 px hohe Flaeche in der Kopfzeile und oeffnet ein
   Blatt. Darunter Reihen mit denselben Karten wie in der
   Ergebnisliste (TEIL AB) - nur in einem Streifen statt im Raster.

   Zahlen aus der Bestandspruefung vom 19.08.2026: sechs Leistungen
   haben mindestens sechs Anbieter mit Fotos, die uebrigen 23 stehen
   unten als Knoepfe.
   ================================================================ */

/* ---------- Suchflaeche in der Kopfzeile ---------- */
body.ea .ea-pille{
    display: flex; align-items: stretch; height: 46px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 100px;
    background: #fff; box-shadow: 0 1px 3px rgba(23,24,26,.06);
    max-width: 520px; flex: 1 1 auto; overflow: hidden;
    text-decoration: none; margin: 0 6px;
}
body.ea .ea-pille:hover{ box-shadow: 0 2px 8px rgba(23,24,26,.12); }
body.ea .ea-pille__f{
    display: flex; align-items: center; padding: 0 16px; min-width: 0;
    border-right: 1px solid var(--ea-line-2, #F0ECE8);
    font-size: 14.5px; color: var(--ea-muted, #75777A);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ea .ea-pille__f:first-child{ flex: 1.4 1 0; color: var(--ea-ink, #1E1E1C); }
body.ea .ea-pille__f:nth-child(2),
body.ea .ea-pille__f:nth-child(3){ flex: 1 1 0; }
body.ea .ea-pille__go{
    flex: 0 0 auto; width: 46px; display: grid; place-items: center;
    background: var(--ea-accent, #3F5AD1); color: #fff;
}
body.ea .ea-pille__go svg{
    width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round;
}

@media (max-width: 860px){
    /* Am Handy nur noch ein Feld - Ort und Datum stehen im Blatt. */
    body.ea .ea-pille{ max-width: none; margin: 0; height: 42px; }
    body.ea .ea-pille__f:nth-child(2),
    body.ea .ea-pille__f:nth-child(3){ display: none; }
    body.ea .ea-pille__f:first-child{ flex: 1 1 auto; font-size: 14px; }
    body.ea .ea-pille__go{ width: 42px; }
}

/* ---------- das Suchblatt ---------- */
/* Ohne JavaScript ist es einfach sichtbar - die Suche muss auch dann gehen. */
body.ea .ea-blatt{ margin: 18px 0; }
body.ea .ea-blatt__in{ max-width: 940px; margin: 0 auto; padding: 0 18px; }
body.ea .ea-blatt__griff{ display: none; }

body.ea.js .ea-blatt,
body.ea:not(.no-js) .ea-blatt{
    position: fixed; inset: 0; z-index: 1100; margin: 0;
    background: rgba(20,20,22,.34);
}
body.ea:not(.no-js) .ea-blatt[hidden]{ display: none; }
body.ea:not(.no-js) .ea-blatt__in{
    position: absolute; left: 50%; transform: translateX(-50%);
    /* Unter die Kopfzeile, nicht darauf. --ea-header-h ist die Hoehe der
       inneren Leiste (86 px); die Kopfzeile hat darum herum noch 20 px
       Polster oben und unten - gemessen sind es zusammen 126 px. */
    top: calc(var(--ea-header-h, 86px) + 44px);
    width: min(940px, calc(100% - 36px)); padding: 0;
}
body.ea:not(.no-js) .ea-blatt .ea-find{ box-shadow: 0 18px 44px rgba(20,20,22,.22); }
body.ea.ea-blatt-offen{ overflow: hidden; }

@media (max-width: 700px){
    body.ea:not(.no-js) .ea-blatt__in{
        left: 0; right: 0; bottom: 0; top: auto; transform: none;
        width: auto; background: #fff; border-radius: 16px 16px 0 0;
        padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        animation: ea-dp-auf .22s cubic-bezier(.22,.61,.36,1);
    }
    body.ea:not(.no-js) .ea-blatt__griff{
        display: block; width: 40px; height: 4px; border-radius: 2px;
        background: var(--ea-line, #E7E2DE); margin: 4px auto 12px;
    }
    body.ea:not(.no-js) .ea-blatt .ea-find{ border: 0; box-shadow: none; }
}

/* ---------- eine Zeile Text, kein Aufmacher ---------- */
/* nur oben und unten - links und rechts kommt aus .ea-wrap, sonst
   klebt die Ueberschrift am Bildschirmrand. */
body.ea .ea-satz{ padding-top: 20px; padding-bottom: 4px; }
body.ea .ea-satz h1{
    font-family: var(--ea-serif); font-weight: 400; font-size: 26px; letter-spacing: -.01em;
    margin: 0 0 4px; text-transform: none;
}
body.ea .ea-satz p{ color: var(--ea-muted, #75777A); margin: 0; font-size: 15px; }

/* ---------- Anlässe als Knöpfe ---------- */
body.ea .ea-chips2{ display: flex; gap: 9px; flex-wrap: wrap; padding: 16px 0 2px; }
body.ea .ea-chip2{
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 9px 16px; border-radius: 100px; background: var(--ea-surface, #F5F4F3);
    color: var(--ea-ink, #1E1E1C); text-decoration: none; font-size: 15px;
}
body.ea .ea-chip2 span{ color: var(--ea-muted, #75777A); font-size: 13px; }
body.ea .ea-chip2:hover{ background: var(--ea-accent-soft, #EEF1FE); }

/* ---------- Reihen ---------- */
body.ea .ea-rh{ padding: 26px 0 0; }
body.ea .ea-rh__kopf{ display: flex; align-items: flex-end; gap: 16px; margin: 0 0 14px; }
body.ea .ea-rh__h{
    font-family: var(--ea-serif); font-weight: 400; font-size: 24px; margin: 0;
    text-transform: none; letter-spacing: -.01em;
}
body.ea .ea-rh__u{ color: var(--ea-muted, #75777A); font-size: 14.5px; margin: 3px 0 0; }
body.ea .ea-rh__alle{
    margin-left: auto; white-space: nowrap; color: var(--ea-accent, #3F5AD1);
    text-decoration: none; font-size: 14.5px;
}
body.ea .ea-rh__alle:hover{ text-decoration: underline; }

/* Die Karte selbst kommt aus TEIL AB - deshalb traegt der Streifen auch
   die Klasse .ea-erg. Nur das Raster wird hier umgestellt: statt Spalten
   ein Streifen zum Wischen. grid-template-columns muss dabei ausdruecklich
   zurueckgesetzt werden, sonst gewinnt es gegen grid-auto-columns. */
body.ea .ea-rh__streifen{
    display: grid; grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 250px;
    gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; padding-bottom: 6px;
}
body.ea .ea-rh__streifen::-webkit-scrollbar{ display: none; }
body.ea .ea-rh__streifen > .ea-c{ scroll-snap-align: start; }

@media (max-width: 700px){
    /* Anlaesse waagerecht schiebbar statt in drei Zeilen umgebrochen -
       das spart auf dem ersten Bildschirm zwei Zeilen. */
    body.ea .ea-chips2{
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin: 0 -18px; padding: 16px 18px 4px;
    }
    body.ea .ea-chips2::-webkit-scrollbar{ display: none; }
    body.ea .ea-chip2{ flex: 0 0 auto; }

    body.ea .ea-rh__streifen{ grid-auto-columns: 74%; gap: 12px; }
    body.ea .ea-rh__h{ font-size: 21px; }
    body.ea .ea-rh__kopf{ align-items: baseline; }
    body.ea .ea-rh__u{ display: none; }
}

/* ---------- alle übrigen Leistungen ---------- */
body.ea .ea-alle{ padding: 40px 0 10px; }
body.ea .ea-alle__gitter{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
body.ea .ea-mini{
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 8px 13px; border: 1px solid var(--ea-line, #E7E2DE); border-radius: 100px;
    color: var(--ea-ink-2, #45474A); text-decoration: none; font-size: 14px; background: #fff;
}
body.ea .ea-mini span{ color: var(--ea-muted, #75777A); font-size: 12.5px; }
body.ea .ea-mini:hover{ border-color: var(--ea-accent, #3F5AD1); color: var(--ea-accent, #3F5AD1); }

/* ---------- Handy: Suche unter dem Logo ---------- */
@media (max-width: 860px){
    body.ea .ea-header__in{ height: auto; flex-wrap: wrap; padding: 10px 16px 12px; gap: 10px; }
    body.ea .ea-pille{ order: 3; flex: 1 0 100%; max-width: none; height: 48px; }
    body.ea .ea-pille__f:nth-child(2),
    body.ea .ea-pille__f:nth-child(3){ display: none; }
    body.ea .ea-pille__f:first-child{ flex: 1 1 auto; }
}

/* ================================================================
   TEIL AF – aufgeraeumte Kopfzeile
   Neu, 19.08.2026.

   Vorher standen rechts oben vier Dinge nebeneinander: "Fuer
   Dienstleister", ein Herz, ein Anmelde-Symbol und ein blauer Knopf.
   Jetzt ein Satz und zwei Knoepfe - Merkliste und Menue. Alles Uebrige
   liegt im Menue.

   Die Suche steht ab 1000 px genau in der Mitte, nicht zwischen Logo
   und rechter Seite gequetscht. Sie wird dafuer absolut gesetzt; ein
   "position: fixed" liegt darin nicht, sonst wuerde die Verschiebung
   es an sich binden (die WebKit-Falle vom Anfrageformular).
   ================================================================ */

/* Der Satz steht links neben Herz und Menue - er ist die Einladung,
   die Symbole sind Werkzeug. (order statt Markup-Umbau, damit der
   ausgeloggte und der eingeloggte Zweig gleich bleiben.) */
body.ea .ea-dlbtn{ order: -1; }
body.ea .ea-dlbtn{
    padding: 9px 14px; border-radius: 100px;
    color: var(--ea-ink-2, #45474A); text-decoration: none;
    font-size: 14.5px; font-weight: 600; white-space: nowrap;
    transition: background .15s;
}
body.ea .ea-dlbtn:hover{ background: var(--ea-surface, #F5F4F3); color: var(--ea-ink, #1E1E1C); }

body.ea .ea-konto{
    display: inline-flex; align-items: center; gap: 7px;
    height: 42px; padding: 0 8px 0 12px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 100px;
    background: #fff; color: var(--ea-ink, #1E1E1C); cursor: pointer;
}
body.ea .ea-konto:hover{ box-shadow: 0 1px 6px rgba(23,24,26,.12); }
body.ea .ea-konto svg{ width: 18px; height: 18px; display: block; }
body.ea .ea-konto__p{ width: 26px; height: 26px; color: #9A9EA5; }
body.ea .ea-kontomenu{ min-width: 232px; padding: 8px; border-radius: 12px;
    border: 1px solid var(--ea-line, #E7E2DE); box-shadow: 0 12px 34px rgba(20,20,22,.16); }
body.ea .ea-kontomenu .dropdown-item{ border-radius: 8px; padding: 9px 12px; font-size: 15px; }

/* Die Suche mittig - erst wenn wirklich Platz ist.

   Nicht absolut gesetzt: Ein absolut mittiges Feld weiss nichts von
   "Dienstleister werden" daneben und schob sich darueber, sobald der
   Text laenger war als der Rest an Platz. Stattdessen drei Zonen -
   links das Logo, in der Mitte die Suche, rechts das Menue. Logo und
   rechte Seite bekommen denselben Anteil (flex: 1 1 0), dadurch steht
   die Suche von selbst in der Mitte des Fensters und kann nichts
   ueberdecken.

   margin-left muss dabei auf 0: Ein "auto" schluckt den freien Platz,
   bevor flex-grow ihn verteilen kann - die Zonen waeren wieder
   ungleich. */
@media (min-width: 1000px){
    body.ea-start .ea-logo{ flex: 1 1 0; }
    body.ea-start .ea-header__right{
        flex: 1 1 0; margin-left: 0; justify-content: flex-end;
    }
}

/* Am Handy gibt es schon den Burger links - zwei Menueknoepfe
   nebeneinander waeren einer zu viel. Anmelden und Eintragen stehen
   dort im Blatt hinter dem Burger. */
@media (max-width: 991.98px){
    body.ea .ea-konto{ display: none; }
}

/* ================================================================
   TEIL AG – Herz und Menue ohne Kaesten
   Neu, 19.08.2026.

   Das Herz sass in einem weissen Kreis - auf hellen Fotos ein Fleck,
   auf dunklen ein Loch. Jetzt steht es frei auf dem Bild: innen weiss,
   aussen eine dunkle Linie, dazu ein weicher Schatten, damit es auf
   jedem Foto lesbar bleibt. Gemerkt heisst: ganz in der Akzentfarbe.

   In der Kopfzeile faellt der Rahmen um das Herz weg und die Zahl
   daneben; der Menueknopf zeigt nur noch drei Striche.
   ================================================================ */

/* ---------- Herz auf den Karten ----------
   Auswahl bewusst  body.ea .ea-c .ea-c__fav  und nicht nur .ea-c__fav:
   In TEIL AB steht  body.ea .ea-erg .ea-c__fav { background: ... } - das
   ist staerker und haette den weissen Kreis stehen lassen, egal wie weit
   hinten diese Regel steht. */
body.ea .ea-c .ea-c__fav{
    background: none; border: 0; box-shadow: none;
    width: 40px; height: 40px; top: 6px; right: 6px;
    display: grid; place-items: center;
}
body.ea .ea-c .ea-c__fav svg{
    width: 27px; height: 27px; display: block;
    /* Ungemerkt wie bei Airbnb: innen dunkel und halbdurchsichtig, aussen
       eine weisse Linie. Das haelt auf hellen wie auf dunklen Fotos - die
       weisse Kante traegt es, die dunkle Fuellung gibt ihr Halt. */
    fill: rgba(20, 20, 22, .42);
    stroke: #fff; stroke-width: 2;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(20, 20, 22, .28));
    transition: fill .15s ease, stroke .15s ease, transform .12s ease;
}
body.ea .ea-c .ea-c__fav:hover svg{ transform: scale(1.08); }
body.ea .ea-c .ea-c__fav.is-gemerkt svg{
    fill: var(--ea-accent, #3F5AD1);
    stroke: rgba(255, 255, 255, .95); stroke-width: 1.6;
}

/* ---------- Herz in der Kopfzeile ---------- */
body.ea .ea-merkbtn{
    border: 0; background: none; width: 40px; height: 40px; border-radius: 50%;
}
body.ea .ea-merkbtn:hover{ background: var(--ea-surface, #F5F4F3); }
body.ea .ea-merkbtn svg{
    width: 25px; height: 25px;
    fill: rgba(255, 255, 255, .5); stroke: var(--ea-ink, #1E1E1C); stroke-width: 1.5; stroke-linejoin: round;
}
body.ea .ea-merkbtn.is-gemerkt svg{ fill: var(--ea-accent, #3F5AD1); stroke: var(--ea-accent, #3F5AD1); }
/* Die Zahl war ein blauer Punkt neben einem Symbol - zu viel oben. */
body.ea .ea-merkbtn__n{ display: none !important; }

/* ---------- Menue: nur drei Striche ---------- */
body.ea .ea-konto{
    border: 0; background: none; padding: 0;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-grid; place-items: center;
}
body.ea .ea-konto:hover{ background: var(--ea-surface, #F5F4F3); box-shadow: none; }
body.ea .ea-konto svg{ width: 22px; height: 22px; }
body.ea .ea-konto__p{ display: none; }

/* ================================================================
   TEIL AH – breitere Seite, ganze Karten in den Reihen
   Neu, 19.08.2026.

   Drei Sachen:

   1. Die Seite war auf 1280 px begrenzt. Auf einem 27-Zoll-Bildschirm
      blieb links und rechts eine Handbreit Nichts, waehrend die fuenfte
      Karte hinter dem Rand verschwand. Jetzt 1600 px.

   2. In den Reihen wird die Kartenbreite AUS DER SPALTENZAHL gerechnet,
      nicht andersherum. Vorher waren die Karten 250 px breit und die
      letzte wurde angeschnitten - vier volle und eine halbe sehen aus
      wie ein Fehler. Jetzt passen immer ganze Karten hinein: eine am
      Handy, zwei ab 560, drei ab 860, vier ab 1200, fuenf ab 1500 px.

   3. Die Suchleiste darf breiter werden - in der Mitte war zwischen
      Logo und rechter Seite mehr Platz, als sie genutzt hat.
   ================================================================ */

body.ea{ --ea-wrap: 1600px; }

/* Wie viele Karten nebeneinander - eine Zahl, der Rest rechnet sich. */
body.ea .ea-rh__streifen{ --ea-n: 1; }
@media (min-width: 560px){  body.ea .ea-rh__streifen{ --ea-n: 2; } }
@media (min-width: 860px){  body.ea .ea-rh__streifen{ --ea-n: 3; } }
@media (min-width: 1200px){ body.ea .ea-rh__streifen{ --ea-n: 4; } }
@media (min-width: 1500px){ body.ea .ea-rh__streifen{ --ea-n: 5; } }

body.ea .ea-rh__streifen{
    grid-auto-columns: calc((100% - (var(--ea-n) - 1) * 16px) / var(--ea-n));
    gap: 16px;
    /* mandatory statt proximity: nach dem Wischen steht die Reihe wieder
       buendig, nie mit einer halben Karte am Rand. */
    scroll-snap-type: x mandatory;
}
@media (max-width: 700px){
    body.ea .ea-rh__streifen{ gap: 12px;
        grid-auto-columns: calc((100% - (var(--ea-n) - 1) * 12px) / var(--ea-n)); }
}



/* ================================================================
   TEIL AI – Suchleiste mit Klappen
   Neu, 19.08.2026. Ersetzt die Pille aus TEIL AF.

   Drei Abschnitte in einer Leiste: Was · Wo · Wann. Ein Klick hebt den
   Abschnitt hervor und oeffnet darunter eine Klappe ueber die volle
   Breite der Leiste - Vorschlaege, Orte oder der Kalender.

   Die Klappe haengt an der Leiste (position: absolute), nicht am
   Bildschirm: Sie soll mit der Leiste wandern, wenn die Kopfzeile
   klebt. Ein "position: fixed" liegt nirgends darin.
   ================================================================ */

/* Die Breite als Grundmass, nicht als Hoechstmass: Die Leiste soll
   den mittleren Platz wirklich fuellen. 44vw, damit links und rechts
   genug fuer Logo und Menue bleibt - sonst kippt die Mitte. */
body.ea .ea-sl{
    position: relative;
    flex: 0 1 min(44vw, 760px);
    max-width: 760px; min-width: 0;
}

body.ea .ea-sl__bar{
    display: flex; align-items: stretch; height: 58px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 100px;
    background: #fff; box-shadow: 0 1px 4px rgba(23,24,26,.07);
    padding: 4px 4px 4px 0;
}
body.ea .ea-sl.is-offen .ea-sl__bar{ box-shadow: 0 4px 18px rgba(23,24,26,.13); }

body.ea .ea-sl__f{
    display: flex; flex-direction: column; justify-content: center;
    padding: 4px 18px; min-width: 0; flex: 1 1 0;
    border-radius: 100px; cursor: pointer;
}
/* Nicht drei gleiche Drittel: "Fotograf, DJ oder ein Name" braucht mehr
   Platz als "Datum waehlen", sonst steht der Hinweis abgeschnitten da. */
body.ea .ea-sl__f[data-panel="was"]{ flex: 1.3 1 0; }
body.ea .ea-sl__f[data-panel="wann"]{ flex: .85 1 0; }
body.ea .ea-sl__f:hover{ background: var(--ea-surface, #F5F4F3); }
body.ea .ea-sl.is-offen .ea-sl__f.is-an{
    background: #fff; box-shadow: 0 1px 8px rgba(23,24,26,.16);
}
body.ea .ea-sl__f label{
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--ea-ink, #1E1E1C); cursor: pointer; margin: 0 0 1px;
}
body.ea .ea-sl__f input{
    border: 0; padding: 0; background: none; width: 100%;
    font: inherit; font-size: 14.5px; color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-sl__f input::placeholder{ color: var(--ea-muted, #75777A); }
body.ea .ea-sl__f input:focus{ outline: 0; }

body.ea .ea-sl__datum{ font-size: 14.5px; color: var(--ea-ink, #1E1E1C); }
body.ea .ea-sl__datum--leer{ color: var(--ea-muted, #75777A); }

body.ea .ea-sl__tr{ width: 1px; background: var(--ea-line-2, #F0ECE8); margin: 10px 0; flex: 0 0 1px; }
/* Frueher verschwanden hier ALLE Striche, sobald die Leiste offen war.
   Jetzt nur die neben dem markierten Abschnitt - siehe TEIL AO. */

body.ea .ea-sl__go{
    flex: 0 0 auto; width: 50px; height: 50px; align-self: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--ea-accent, #3F5AD1); color: #fff;
    display: grid; place-items: center;
}
body.ea .ea-sl__go:hover{ background: var(--ea-accent-dark, #2F45A8); }
body.ea .ea-sl__go svg{ width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }

/* ---------- die Klappe ---------- */
body.ea .ea-sl__klappe{
    position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 60;
    background: #fff; border: 1px solid var(--ea-line, #E7E2DE); border-radius: 16px;
    box-shadow: 0 14px 44px rgba(20,20,22,.16);
    padding: 14px; max-height: min(62vh, 520px); overflow-y: auto;
}
body.ea .ea-sl__kopf{
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ea-muted, #75777A); margin: 2px 0 8px 8px;
}
body.ea .ea-sl__liste{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; }
body.ea .ea-sl__v{
    display: flex; align-items: baseline; gap: 8px; width: 100%;
    border: 0; background: none; text-align: left; cursor: pointer;
    padding: 10px 12px; border-radius: 10px;
    font: inherit; font-size: 15px; color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-sl__v:hover{ background: var(--ea-surface, #F5F4F3); }
body.ea .ea-sl__vn{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ea .ea-sl__va{ margin-left: auto; color: var(--ea-muted, #75777A); font-size: 13px; }
body.ea .ea-sl__leer{ color: var(--ea-muted, #75777A); font-size: 14.5px; padding: 10px 12px; margin: 0; }

/* ---------- Kalender in der Klappe ---------- */
body.ea .ea-sl__kal{ position: relative; padding: 2px 4px 0; }
body.ea .ea-dp__monate{ display: flex; gap: 26px; justify-content: center; }
body.ea .ea-dp__monatkasten{ flex: 1 1 0; min-width: 0; max-width: 340px; }
body.ea .ea-dp__monatkasten .ea-dp__monat{
    display: block; text-align: center; font-size: 15.5px; font-weight: 600; margin: 0 0 10px;
}
body.ea .ea-dp__leiste{ position: absolute; inset: 0 4px auto; display: flex;
    justify-content: space-between; pointer-events: none; }
body.ea .ea-dp__leiste .ea-dp__pf{ pointer-events: auto; }

/* ---------- Handy ---------- */
@media (max-width: 991.98px){
    /* Steht schon in TEIL AF, muss aber hier noch einmal: TEIL AG setzt
       .ea-konto danach neu auf display:inline-grid und hebt die Regel
       von dort auf. Ohne das stehen am Handy zwei Menueknoepfe
       nebeneinander - der Burger links und die drei Striche rechts. */
    body.ea .ea-konto{ display: none; }

    body.ea .ea-sl{ order: 3; flex: 1 0 100%; max-width: none; }
    body.ea .ea-sl__bar{ height: 52px; }
    body.ea .ea-sl__f label{ display: none; }
    body.ea .ea-sl__f{ padding: 4px 14px; }
    /* Am Handy nur ein Feld sichtbar - die anderen beiden erreicht man
       ueber die Klappe, sobald man das erste ausgefuellt hat. */
    body.ea .ea-sl__f[data-panel="wo"],
    body.ea .ea-sl__f[data-panel="wann"],
    body.ea .ea-sl__tr{ display: none; }
    body.ea .ea-sl.is-offen .ea-sl__f[data-panel="wo"],
    body.ea .ea-sl.is-offen .ea-sl__f[data-panel="wann"]{ display: flex; }
    body.ea .ea-sl.is-offen .ea-sl__bar{ flex-wrap: wrap; height: auto; border-radius: 22px; }
    body.ea .ea-sl.is-offen .ea-sl__f{ flex: 1 0 100%; border-radius: 14px; padding: 10px 14px; }
    body.ea .ea-sl.is-offen .ea-sl__f label{ display: block; }
    body.ea .ea-sl.is-offen .ea-sl__go{ margin: 6px 0 4px auto; }
    body.ea .ea-sl__liste{ grid-template-columns: minmax(0,1fr); }
    body.ea .ea-dp__monate{ gap: 0; }
}


/* ================================================================
   TEIL AJ – Breiten: Kopfzeile ganz aussen, Karten 1440, Text 1280
   Neu, 19.08.2026.

   TEIL AH hatte alles auf 1600 px gestellt - auch das Profil, wo eine
   Zeile Text dann quer ueber den ganzen Bildschirm laeuft und niemand
   mehr die naechste Zeile findet. Jetzt drei Maße statt einem:

     Kopfzeile  – ohne Begrenzung, Logo ganz links, Menue ganz rechts
                  (so macht es Airbnb; die Suche steht trotzdem in der
                  Mitte des Fensters, das regelt TEIL AF)
     Karten     – 1440 px auf Startseite und Ergebnisliste. Gemessen
                  ergibt das bei fuenf Spalten 262 px je Karte.
     alles Uebrige – 1280 px wie vorher. Profil, Ratgeber, Formulare.

   Der body traegt dafuer seit dieser Fassung die Klasse ea-p-<seite>
   (siehe templates/header.tpl).
   ================================================================ */

/* Grundmass zurueck auf 1280 - das war es vor TEIL AH und ist fuer
   Text das richtige. */
body.ea{ --ea-wrap: 1280px; }

/* Wo Karten liegen, darf es breiter sein. */
body.ea-start,
body.ea-p-kategorien,
body.ea-p-suchen,
body.ea-p-dienstleistungen{ --ea-wrap: 1440px; }

/* Die Kopfzeile geht ueber die volle Breite. Nur der Rand bleibt, damit
   das Logo nicht am Bildschirmrand klebt. */
body.ea .ea-header__in{
    max-width: none;
    padding: 0 clamp(16px, 2.4vw, 40px);
}

/* .ea-wrap rechnet den Rand mit hinein: 1440 soll die Breite des
   Kastens sein, die man sieht, nicht 1440 plus zweimal Rand. Ohne das
   waere der Block 1504 px breit - und der Vergleich mit Airbnb
   ginge daneben. */
body.ea .ea-wrap{ box-sizing: border-box; }

/* Fuenf Karten schon ab 1440 px, nicht erst ab 1500: Bei 1440 bleiben
   nach Rand und Luecken 1376 px, das sind 262 px je Karte - genau das
   Mass, das Airbnb dort auch hat. */
@media (min-width: 1440px){ body.ea .ea-rh__streifen{ --ea-n: 5; } }


/* ================================================================
   TEIL AK – Ueberschrift, Suche und Anlaesse mittig
   Neu, 19.08.2026.

   Die Suchleiste stand in der Kopfzeile. Jetzt steht sie auf der
   Startseite unter der Ueberschrift: erst wofuer die Seite da ist,
   dann das Feld. Alles mittig, wie ein Aufmacher - nur eben ein
   flacher, damit die erste Kartenreihe noch auf den Bildschirm passt.

   Gemessen: der ganze Kopf ist rund 210 px hoch, danach beginnt die
   Reihe "Fotograf". Vorher waren es 96 px, dafuer sass die Suche oben.

   Damit sind auch die Regeln aus TEIL AF hinfaellig, die Logo und
   rechte Seite gleich breit gemacht haben, um die Leiste in der
   Kopfzeile mittig zu halten. Sie werden hier zurueckgenommen.
   ================================================================ */

@media (min-width: 1000px){
    body.ea-start .ea-logo{ flex: 0 0 auto; }
    body.ea-start .ea-header__right{ flex: 0 0 auto; margin-left: auto; }
}

/* nur oben und unten - links und rechts kommt aus .ea-wrap. Eine
   Kurzschreibweise mit vier Werten wuerde den Seitenrand ueberschreiben,
   dann klebt die Ueberschrift am Bildschirmrand und die schiebbaren
   Anlass-Knoepfe stehen ueber. */
body.ea .ea-kopfsatz{ padding-top: 34px; padding-bottom: 6px; text-align: center; }
body.ea .ea-kopfsatz h1{
    font-family: var(--ea-serif); font-weight: 400; font-size: 34px; letter-spacing: -.015em;
    margin: 0 0 6px; text-transform: none;
}
body.ea .ea-kopfsatz p{ color: var(--ea-muted, #75777A); margin: 0; font-size: 16px; }

/* Die Leiste ist hier ein Block in der Mitte, kein Fach in einer
   Flexzeile mehr - order und flex aus der Kopfzeilenfassung muessen
   deshalb zurueckgesetzt werden, sonst wirken sie am Handy weiter. */
body.ea .ea-kopfsatz .ea-sl{
    order: 0; flex: 0 0 auto;
    width: 100%; max-width: 760px;
    margin: 20px auto 0;
    text-align: left;
}

/* Die Anlaesse mittig unter der Suche - links buendig saehen sie aus,
   als gehoerten sie zur naechsten Reihe. */
body.ea .ea-kopfsatz .ea-chips2{ justify-content: center; padding-top: 18px; }

@media (max-width: 991.98px){
    body.ea .ea-kopfsatz{ padding-top: 22px; padding-bottom: 4px; }
    body.ea .ea-kopfsatz h1{ font-size: 26px; }
    body.ea .ea-kopfsatz p{ font-size: 15px; }
    body.ea .ea-kopfsatz .ea-sl{ margin-top: 16px; }
    /* waagerecht schiebbar: mittig zentriert wuerde die erste Kachel
       verstecken, sobald es mehr sind als hineinpassen. */
    body.ea .ea-kopfsatz .ea-chips2{ justify-content: flex-start; }
}


/* ================================================================
   TEIL AL – die Suchleiste groesser, der Abstand darueber kleiner
   Neu, 19.08.2026.

   Sie war 760 x 58 px und stand 20 px unter dem Satz. Neben dem
   Vorbild wirkte sie zu klein: Die Leiste ist das Werkzeug der Seite,
   nicht eine Zeile unter der Ueberschrift. Jetzt 880 x 68 px und
   dichter am Text.

   Nur die Masse - Verhalten, Klappen und Kalender bleiben, wie sie
   sind. Am Handy aendert sich nichts, dort ist sie ohnehin so breit
   wie der Bildschirm.
   ================================================================ */

@media (min-width: 992px){

    body.ea .ea-kopfsatz{ padding-top: 24px; }
    body.ea .ea-kopfsatz .ea-sl{ max-width: 880px; margin-top: 14px; }

    body.ea .ea-kopfsatz .ea-sl__bar{ height: 68px; padding: 5px 5px 5px 0; }

    /* Mehr Luft in den Abschnitten, sonst sieht eine hohe Leiste innen
       leer aus statt grosszuegig. */
    body.ea .ea-kopfsatz .ea-sl__f{ padding: 4px 24px; }
    body.ea .ea-kopfsatz .ea-sl__f label{ font-size: 12.5px; margin-bottom: 2px; }
    body.ea .ea-kopfsatz .ea-sl__f input,
    body.ea .ea-kopfsatz .ea-sl__datum{ font-size: 15.5px; }

    body.ea .ea-kopfsatz .ea-sl__go{ width: 58px; height: 58px; }
    body.ea .ea-kopfsatz .ea-sl__go svg{ width: 21px; height: 21px; }

    /* Der Trenner darf mitwachsen, sonst schwimmt er in der Mitte. */
    body.ea .ea-kopfsatz .ea-sl__tr{ margin: 13px 0; }
}


/* ================================================================
   TEIL AM – zweistoeckige Kopfzeile, die beim Scrollen zusammenfaellt
   Neu, 19.08.2026.

   Auf der Startseite steht die Suche wieder oben - aber nicht als
   Zeile neben dem Logo, sondern als eigenes Stockwerk darunter:

       Zeile 1   Logo · (kleine Pille) · Dienstleister werden · Herz · Menue
       Zeile 2   Ueberschrift und Satz          (nur ganz oben)
       Zeile 3   die grosse Suchleiste          (nur ganz oben)

   Sobald man scrollt, fallen Zeile 2 und 3 zusammen und die Pille
   erscheint. Ein Klick darauf holt Zeile 3 zurueck - Zeile 2 bleibt
   weg, oben soll dann nur die Suche stehen. Ein Klick daneben oder
   weiteres Scrollen schliesst wieder. Das Ganze steuert
   js/suchleiste-1.1.js ueber zwei Klassen am <header>:
   is-klein und is-auf.

   Warum max-height und nicht height: "auto" laesst sich nicht
   bewegen. Die Werte sind grosszuegig gewaehlt; sie begrenzen nichts,
   sie geben der Bewegung nur ein Ziel.
   ================================================================ */

body.ea .ea-header--suche{ padding-bottom: 4px; }

/* Innenrand zaehlt zur Breite. Ohne das rechnet ein Feld mit
   "flex: 1 0 100%" seine 100 Prozent OHNE die eigenen 14 px links und
   rechts - am Handy ragte die aufgeklappte Leiste dadurch ueber den
   Bildschirmrand hinaus. */
body.ea .ea-sl,
body.ea .ea-sl *{ box-sizing: border-box; }

/* ---------- Zeile 2: Ueberschrift ---------- */
body.ea .ea-kopf__satz{
    max-width: var(--ea-wrap); margin: 0 auto;
    padding: 2px clamp(18px, 2.6vw, 32px) 0;
    text-align: center; overflow: hidden;
    max-height: 140px; opacity: 1;
    transition: max-height .24s ease, opacity .16s ease, padding .24s ease;
}
body.ea .ea-kopf__satz h1{
    font-family: var(--ea-serif); font-weight: 400; font-size: 34px; letter-spacing: -.015em;
    margin: 0 0 6px; text-transform: none;
}
body.ea .ea-kopf__satz p{ color: var(--ea-muted, #75777A); margin: 0; font-size: 16px; }

/* ---------- Zeile 3: die grosse Leiste ---------- */
body.ea .ea-kopf__suche{
    display: flex; justify-content: center;
    padding: 14px clamp(18px, 2.6vw, 32px) 16px;
    max-height: 160px; opacity: 1;
    transition: max-height .24s ease, opacity .16s ease, padding .24s ease;
}
/* Waehrend der Bewegung beschnitten, danach wieder offen - sonst
   haengt die Klappe waehrend des Aufklappens ueber der Seite. */
body.ea .ea-kopf__suche.is-klappt{ overflow: hidden; }

body.ea .ea-kopf__suche .ea-sl{
    order: 0; flex: 0 0 auto;
    width: 100%; max-width: 880px; margin: 0; text-align: left;
}
body.ea .ea-kopf__suche .ea-sl__bar{ height: 68px; padding: 0; }
body.ea .ea-kopf__suche .ea-sl__f{ padding: 4px 24px; }
body.ea .ea-kopf__suche .ea-sl__f label{ font-size: 12.5px; margin-bottom: 2px; }
body.ea .ea-kopf__suche .ea-sl__f input,
body.ea .ea-kopf__suche .ea-sl__datum{ font-size: 15.5px; }
body.ea .ea-kopf__suche .ea-sl__go{ width: 58px; height: 58px; }
body.ea .ea-kopf__suche .ea-sl__go svg{ width: 21px; height: 21px; }
body.ea .ea-kopf__suche .ea-sl__tr{ margin: 13px 0; }

/* ---------- zusammengefallen ---------- */
body.ea .ea-header.is-klein .ea-kopf__satz,
body.ea .ea-header.is-auf   .ea-kopf__satz,
body.ea .ea-header.is-klein .ea-kopf__suche{
    max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;
    overflow: hidden; pointer-events: none;
}

/* ---------- die kleine Pille ---------- */
body.ea .ea-slmini{
    display: none; align-items: center; gap: 0;
    height: 46px; padding: 0 6px 0 4px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 100px;
    background: #fff; box-shadow: 0 1px 5px rgba(23,24,26,.09);
    cursor: pointer; max-width: 100%; min-width: 0;
}
body.ea .ea-slmini:hover{ box-shadow: 0 2px 10px rgba(23,24,26,.15); }
body.ea .ea-slmini__t{
    padding: 0 14px; font-size: 14.5px; font-weight: 600;
    color: var(--ea-ink, #1E1E1C);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
body.ea .ea-slmini__t--blass{ font-weight: 500; color: var(--ea-muted, #75777A); }
body.ea .ea-slmini__tr{ width: 1px; height: 20px; background: var(--ea-line-2, #F0ECE8); flex: 0 0 1px; }
body.ea .ea-slmini__go{
    width: 34px; height: 34px; flex: 0 0 34px; margin-left: 8px;
    border-radius: 50%; background: var(--ea-accent, #3F5AD1);
    display: grid; place-items: center;
}
body.ea .ea-slmini__go svg{ width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }

/* Sichtbar nur im kleinen Zustand - und dann mittig zwischen Logo und
   Menue, dieselben drei Zonen wie bei der grossen Leiste. */
body.ea .ea-header.is-klein .ea-slmini{ display: inline-flex; }
@media (min-width: 1000px){
    body.ea .ea-header.is-klein .ea-logo{ flex: 1 1 0; }
    body.ea .ea-header.is-klein .ea-header__right{ flex: 1 1 0; margin-left: 0; justify-content: flex-end; }
}

/* ---------- Handy ---------- */
@media (max-width: 991.98px){
    body.ea .ea-kopf__satz{ padding-top: 0; }
    body.ea .ea-kopf__satz h1{ font-size: 24px; }
    body.ea .ea-kopf__satz p{ font-size: 14.5px; }
    body.ea .ea-kopf__suche{ padding: 10px 18px 12px; }
    /* Am Handy klappt die Leiste im geoeffneten Zustand untereinander
       auf - dafuer muss das Stockwerk hoeher werden duerfen, sonst
       schneidet es Felder und Knopf ab. */
    body.ea .ea-header.is-offen-hoch .ea-kopf__suche{ max-height: 460px; }

    /* Im offenen Zustand stehen die drei Felder untereinander und sind
       je 100 % breit. Der Rahmen hat rechts 4 px Innenrand, links
       keinen (dort sitzt sonst der Knopf) - macht 4 px, die ueber den
       Bildschirm hinausragen. Deshalb hier ringsum derselbe Rand. */
    body.ea .ea-kopf__suche .ea-sl.is-offen .ea-sl__bar{ padding: 6px; }
    body.ea .ea-kopf__suche .ea-sl__bar{ height: 52px; padding: 0; }
    body.ea .ea-kopf__suche .ea-sl__f{ padding: 4px 14px; }
    body.ea .ea-kopf__suche .ea-sl__go{ width: 44px; height: 44px; }
    /* Auf schmalen Schirmen bleibt in der Zeile kein Platz fuer drei
       Woerter - dort steht nur, wonach gesucht wird. */
    body.ea .ea-slmini__t[data-mini="wo"],
    body.ea .ea-slmini__t[data-mini="wann"],
    body.ea .ea-slmini__tr{ display: none; }
    body.ea .ea-slmini{ flex: 1 1 auto; margin: 0 4px; height: 42px; }
    body.ea .ea-slmini__t{ flex: 1 1 auto; max-width: none; }
    body.ea .ea-slmini__go{ width: 30px; height: 30px; flex: 0 0 30px; }
}

/* Der alte Kopfsatz auf der Seite selbst ist jetzt nur noch der
   Kasten um die Anlass-Knoepfe. */
body.ea .ea-kopfsatz{ padding-top: 14px; padding-bottom: 2px; }


/* ================================================================
   TEIL AN – Ueberschrift und Satz in dieselbe Zeile wie das Logo
   Neu, 19.08.2026.

   Vorher standen sie als eigenes Stockwerk zwischen Logo und Suche.
   Das waren drei Etagen, bevor die erste Karte kam. Jetzt sind es
   zwei:

     Zeile 1   Logo · Ueberschrift und Satz · Dienstleister werden ·
               Herz · Menue
     Zeile 2   die Suchleiste

   Die Ueberschrift ist dafuer kleiner geworden - in einer Zeile mit
   dem Logo waere eine 34-px-Ueberschrift lauter als die Marke.

   Faellt die Kopfzeile beim Scrollen zusammen, treten Ueberschrift
   und Satz ab und die kleine Pille nimmt ihren Platz ein. Zwei Dinge
   in derselben Mitte gehen nicht.
   ================================================================ */

body.ea .ea-header--suche .ea-header__in{
    height: auto; min-height: 74px;
    padding-top: 9px; padding-bottom: 9px;
    gap: 18px;
}

/* Drei Zonen: Logo und rechte Seite gleich breit, dazwischen der Satz
   - dann steht er in der Mitte des Fensters, nicht in der Mitte des
   Restplatzes. */
@media (min-width: 1000px){
    body.ea .ea-header--suche .ea-logo{ flex: 1 1 0; }
    body.ea .ea-header--suche .ea-header__right{
        flex: 1 1 0; margin-left: 0; justify-content: flex-end;
    }
}

body.ea .ea-header--suche .ea-kopf__satz{
    flex: 0 1 auto; min-width: 0;
    max-width: none; max-height: none; margin: 0; padding: 0;
    overflow: visible; opacity: 1; transition: none;
    text-align: center;
}
body.ea .ea-header--suche .ea-kopf__satz h1{
    font-family: var(--ea-serif); font-weight: 400; font-size: 19px;
    letter-spacing: -.01em; line-height: 1.2; margin: 0 0 2px;
    text-transform: none; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
body.ea .ea-header--suche .ea-kopf__satz p{
    color: var(--ea-muted, #75777A); margin: 0; font-size: 13.5px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Zusammengefallen: der Satz tritt ab, die Pille kommt. */
body.ea .ea-header.is-klein .ea-kopf__satz,
body.ea .ea-header.is-auf   .ea-kopf__satz{ display: none; }

/* Aufgeklappt steht wieder nur die Suche oben - dann braucht die
   obere Zeile auch keine Hoehe fuer zwei Textzeilen. */
body.ea .ea-header.is-klein .ea-header__in,
body.ea .ea-header.is-auf   .ea-header__in{ min-height: 64px; }

/* ---------- Handy ---------- */
@media (max-width: 991.98px){
    /* Nebeneinander ist auf 390 px kein Platz - dort geht der Satz in
       eine eigene Zeile unter Logo und Menue. */
    body.ea .ea-header--suche .ea-header__in{ flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
    body.ea .ea-header--suche .ea-kopf__satz{ order: 5; flex: 1 0 100%; }
    body.ea .ea-header--suche .ea-kopf__satz h1{ font-size: 17px; }
    body.ea .ea-header--suche .ea-kopf__satz p{ font-size: 12.5px; }
}

/* Nachtrag zu AN: Abstaende zwischen Leiste und Anlaessen kuerzen -
   zwischen zwei Sachen, die zusammengehoeren, standen 55 px. */
body.ea .ea-kopfsatz{ padding-top: 2px; }

@media (max-width: 991.98px){
    /* Der Satz darf umbrechen. Abgeschnitten ("Antwort ...") sagt er
       nichts mehr; zwei Zeilen kosten hier weniger als der halbe Satz. */
    body.ea .ea-header--suche .ea-kopf__satz h1,
    body.ea .ea-header--suche .ea-kopf__satz p{ white-space: normal; }
}

/* Nachtrag zu AN: die Ueberschrift groesser. 19 px waren neben dem
   Logo zu leise - sie ist der Satz, um den es geht. 24 px bleiben
   trotzdem unter der Logogroesse, damit die Zeile nicht kippt. */
body.ea .ea-header--suche .ea-header__in{ min-height: 80px; }
body.ea .ea-header--suche .ea-kopf__satz h1{ font-size: 24px; margin-bottom: 3px; }
@media (max-width: 991.98px){
    body.ea .ea-header--suche .ea-kopf__satz h1{ font-size: 20px; }
}


/* ================================================================
   TEIL AO – die Markierung in der Suchleiste bis an den Rand
   Neu, 19.08.2026.

   Bisher lag die helle Flaeche eines Abschnitts fuenf Pixel innerhalb
   der Leiste: links buendig, oben und unten aber nicht. Das sah aus
   wie ein Aufkleber statt wie ein Teil der Leiste. Jetzt fuellt sie
   die volle Hoehe, und der Rundung der Leiste folgt sie von selbst -
   Feld und Leiste sind gleich hoch und haben denselben Radius.

   Drei Dinge gehoeren dazu:

   1. Die Leiste hat keinen Innenrand mehr. Der Knopf bekommt seinen
      Abstand jetzt vom Abschnitt "Wann", in dem er steht.
   2. Der Suchknopf steht IM Abschnitt "Wann" (siehe
      templates/suchleiste.inc.tpl). Nur so reicht dessen Markierung
      bis an den rechten Rand und liegt auch hinter dem Knopf.
   3. Neben einem markierten Abschnitt verschwindet der Trennstrich -
      sonst schneidet er die Markierung an. Beim Zeigen mit der Maus
      ueber :has(), beim angeklickten Abschnitt ueber die Klasse
      is-an-… am Formular. Zwei Wege, weil :has() nur den Zeiger
      kennt und aeltere Browser es gar nicht kennen.
   ================================================================ */

body.ea .ea-sl__bar{ padding: 0; }

/* Gleiche Hoehe wie die Leiste, gleicher Radius - dadurch sitzt die
   Markierung an jeder Kante buendig. */
body.ea .ea-sl__f{ align-self: stretch; border-radius: 100px; }

/* Der Abschnitt "Wann" traegt den Knopf und laeuft bis an den Rand. */
body.ea .ea-sl__f--wann{
    flex-direction: row; align-items: center;
    padding-right: 5px;
}
body.ea .ea-sl__fi{
    display: flex; flex-direction: column; justify-content: center;
    flex: 1 1 auto; min-width: 0;
}
body.ea .ea-sl__go{ margin-left: 12px; }

/* ---------- Trennstriche neben einer Markierung ---------- */

/* Der Strich rechts vom Abschnitt - das kann CSS allein. */
body.ea .ea-sl__f:hover + .ea-sl__tr,
body.ea .ea-sl__f.is-an + .ea-sl__tr{ background: transparent; }

/* Der Strich links davon. Fuer den Zeiger braucht es :has(); der
   angeklickte Zustand laeuft zusaetzlich ueber die Klasse am
   Formular, damit er auch ohne :has() stimmt. */
body.ea .ea-sl__tr:has(+ .ea-sl__f:hover){ background: transparent; }

body.ea .ea-sl.is-an-was  .ea-sl__tr:nth-of-type(1),
body.ea .ea-sl.is-an-wo   .ea-sl__tr,
body.ea .ea-sl.is-an-wann .ea-sl__tr:nth-of-type(2){ background: transparent; }

/* ---------- Handy ---------- */
@media (max-width: 991.98px){
    /* Der Knopf steckt jetzt im Abschnitt "Wann". Wird der versteckt,
       waere auch der Knopf weg - deshalb bleibt der Abschnitt stehen
       und nur seine Beschriftung geht. */
    body.ea .ea-sl__f[data-panel="wann"]{ display: flex; flex: 0 0 auto; padding: 0 4px 0 0; }
    body.ea .ea-sl__f[data-panel="wann"] .ea-sl__fi{ display: none; }
    body.ea .ea-sl.is-offen .ea-sl__f[data-panel="wann"]{ flex: 1 0 100%; padding: 10px 14px; }
    body.ea .ea-sl.is-offen .ea-sl__f[data-panel="wann"] .ea-sl__fi{ display: flex; }
    body.ea .ea-sl.is-offen .ea-sl__go{ margin: 0 0 0 12px; }
}

/* Nachtrag zu AO: Der Knopf sass 25 px vom rechten Rand entfernt, oben
   und unten aber nur 5 px - er stand also nicht in der Rundung, sondern
   daneben. Der Abstand rechts muss derselbe sein wie oben und unten,
   dann sitzt der Kreis mittig im runden Ende der Leiste.

   Die Auswahl muss so lang sein wie die Regel, die die 24 px setzt
   (body.ea .ea-kopf__suche .ea-sl__f) - sonst gewinnt die. */
/* 4 px, nicht 5: Der Rahmen der Leiste ist 1 px stark und zaehlt oben
   wie rechts mit. 68 minus zweimal Rahmen minus 58 Knopf macht 4 oben
   und 4 unten - also auch 4 rechts. */
body.ea .ea-sl__f--wann,
body.ea .ea-kopf__suche .ea-sl__f--wann{ padding-right: 4px; }

@media (max-width: 991.98px){
    /* Dort ist die Leiste 52 px hoch und der Knopf 44 - macht 3. */
    body.ea .ea-kopf__suche .ea-sl__f--wann{ padding-right: 3px; }
}

/* Nachtrag zu AN: Ueberschrift kraeftiger, Logo kleiner.
   Beides in der Kopfzeile ausprobiert und so uebernommen: Bei 24 px
   traegt die Schrift mehr Gewicht als bei den grossen Ueberschriften
   auf der Seite, und das Logo darf daneben etwas zurueckstehen. */
body.ea .ea-header--suche .ea-kopf__satz h1{ font-weight: 600; }

/* Das Logo auf ALLEN Seiten 20 statt 24 px - auch im
   Dienstleisterbereich und im mobilen Menue. Sonst waere es auf der
   Startseite kleiner als anderswo, und das faellt beim Wechseln auf. */
body.ea .ea-logo svg,
body.ea .ea-logo img{ height: 20px; }

/* Die Reihenueberschrift ist ein Verweis in die Leistung. Sie soll
   aber nicht aussehen wie einer - blau und unterstrichen waere sie
   lauter als die Karten darunter. Deshalb erbt sie Farbe und Schnitt
   und zeigt sich erst beim Zeigen mit der Maus. */
body.ea .ea-rh__h a{
    color: inherit; text-decoration: none;
    font: inherit; letter-spacing: inherit;
}
body.ea .ea-rh__h a:hover{ text-decoration: underline; text-underline-offset: 3px; }


/* ================================================================
   TEIL AP – die Kopfzeile in warmem Hellgrau
   Neu, 19.08.2026.

   Vorher war sie weiss wie die Seite darunter - man sah beim Scrollen
   nicht, wo sie aufhoert. Jetzt ein warmer heller Ton mit einer feinen
   Linie darunter. Warm, nicht kalt: Er gehoert zu demselben Beigegrau
   wie die Filterknoepfe und die Trennlinien; ein kuehles Grau wuerde
   neben den warmen Hochzeitsfotos schmutzig wirken.

   Kraeftiger wollten wir es nicht. Die Startseite ist eine Wand aus
   Fotos, und die bringen ihre Farbe selbst mit. Vor allem nicht in der
   Akzentfarbe: Die steckt im Suchknopf, im gemerkten Herzchen und in
   "Alle 25 ansehen" - waere die ganze Kopfzeile blau, waere das Blau
   kein Signal mehr, sondern Tapete.

   Die beiden Werte stehen als Variablen. Wer den Ton aendern will,
   aendert sie hier und sonst nichts.
   ================================================================ */

body.ea{
    --ea-kopf: #F7F5F3;
    --ea-kopf-linie: #EBE6E1;
}

body.ea .ea-header{
    background: var(--ea-kopf);
    border-bottom: 1px solid var(--ea-kopf-linie);
}
/* Auf der Startseite stand vorher ausdruecklich weiss und kein Rand -
   diese Regel hier hebt beides auf. */
body.ea.ea-start .ea-header{
    background: var(--ea-kopf);
    border-bottom: 1px solid var(--ea-kopf-linie);
}

/* Die Knoepfe oben werden beim Zeigen WEISS statt hellgrau. Auf einer
   hellgrauen Flaeche waere Hellgrau nicht zu sehen; Weiss liest sich
   wie die Suchleiste darunter - es hebt sich, statt sich einzugraben. */
body.ea .ea-dlbtn:hover,
body.ea .ea-merkbtn:hover,
body.ea .ea-konto:hover,
body.ea .ea-burger:hover{
    background: #fff;
    box-shadow: 0 1px 4px rgba(23, 24, 26, .10);
}

/* Die kleine Pille sitzt jetzt auf Hellgrau - ihr Rand darf einen
   Tick deutlicher sein, sonst verschwimmt sie darin. */
body.ea .ea-slmini{ border-color: var(--ea-kopf-linie); }

/* Nachtrag zu AP: mehr Luft oben und unten, wie im Vorbild.
   Die Kopfzeile sass zu eng in ihrem Band - oben 9 px ueber dem Logo,
   unten 16 px unter der Suchleiste. Beim Vorbild sind es ungefaehr 16
   und 26; dadurch wirkt das Band wie ein Raum und nicht wie eine
   Klammer. */
body.ea .ea-header--suche .ea-header__in{ padding-top: 16px; padding-bottom: 8px; }
body.ea .ea-kopf__suche{ padding-top: 14px; padding-bottom: 26px; }

/* Und der weisse Streifen ganz oben: Zieht man am Seitenanfang weiter
   nach oben (Gummiband am Mac) oder rechnet der Browser die Kopfzeile
   erst nach, zeigt er dahinter das Fensterblatt - und das ist weiss.
   Bekommt es denselben Ton wie die Kopfzeile, faellt nichts mehr auf.

   Der Wert steht hier ausgeschrieben und nicht als var(--ea-kopf):
   Die Variablen haengen an body, das Fensterblatt ist html und damit
   eine Ebene darueber. Wer den Ton aendert, aendert BEIDE Stellen. */
html{ background: #F7F5F3; }

@media (max-width: 991.98px){
    body.ea .ea-header--suche .ea-header__in{ padding-top: 12px; padding-bottom: 4px; }
    body.ea .ea-kopf__suche{ padding-top: 10px; padding-bottom: 18px; }
}


/* ================================================================
   TEIL AQ – die Suchleiste auf jeder Seite
   Neu, 19.08.2026.

   Bisher trug nur die Startseite die Suche oben; auf allen anderen
   Seiten stand dort eine Textnavigation. Jetzt ist es ueberall
   dieselbe Kopfzeile - nur ausserhalb der Startseite von Anfang an
   zusammengefallen, also die kleine Pille statt der grossen Leiste.
   Ein Klick darauf klappt sie auf wie gewohnt.

   Die Klasse ea-header--zu steht dafuer schon im HTML (header.tpl),
   zusammen mit is-klein. Beides gleich im Quelltext, damit die grosse
   Leiste nicht kurz aufblitzt, bevor das Skript laeuft.
   ================================================================ */

/* Zusammengefallen braucht die obere Zeile keine Hoehe fuer zwei
   Textzeilen - dort steht ja nur noch die Pille. */
body.ea .ea-header--zu .ea-header__in{
    min-height: 64px; padding-top: 10px; padding-bottom: 10px;
}

/* Ohne JavaScript kann niemand die Pille aufklappen. Dann steht die
   grosse Leiste da und die Pille bleibt weg - lieber eine hohe
   Kopfzeile als gar keine Suche. */
body.no-js .ea-header.is-klein .ea-kopf__suche{
    max-height: 160px; opacity: 1; overflow: visible;
    padding-top: 14px; padding-bottom: 26px; pointer-events: auto;
}
body.no-js .ea-slmini{ display: none !important; }

/* Nachtrag zu AQ: Am Handy darf die obere Zeile im zusammengefallenen
   Zustand NICHT umbrechen. Sie darf es nur, solange die Ueberschrift
   darin steht (Startseite ganz oben) - sonst rutscht das Herz in eine
   zweite Zeile und die Pille schiebt sich darueber. */
@media (max-width: 991.98px){
    body.ea .ea-header.is-klein .ea-header__in,
    body.ea .ea-header.is-auf .ea-header__in{ flex-wrap: nowrap; gap: 8px; }
    body.ea .ea-header.is-klein .ea-slmini{ flex: 1 1 auto; min-width: 0; margin: 0; }
    /* Der Satz "Dienstleister werden" braucht am Handy zu viel Platz,
       sobald die Pille daneben steht - er liegt ohnehin im Menue. */
    body.ea .ea-header--zu .ea-dlbtn{ display: none; }
}

@media (max-width: 560px){
    /* Auf schmalen Schirmen zaehlt jeder Millimeter in der Pille. */
    body.ea .ea-slmini__t{ padding: 0 10px; font-size: 14px; }
    body.ea .ea-slmini{ padding-left: 2px; }
}


/* ================================================================
   TEIL AR – die Suche hat nur noch zwei Felder
   Neu, 19.08.2026.

   "Wann" ist raus. Es hat nicht gefiltert - ob jemand am 12. Juni
   frei ist, weiss die Seite nicht - und ein Feld, das aussieht wie
   ein Filter und keiner ist, kostet mehr Vertrauen, als es einbringt.
   Nach dem Datum wird im Anfrageformular gefragt, wo es hingehoert.

   Der Suchknopf sitzt jetzt im Abschnitt "Wo", weil der der letzte
   ist. Die Regeln dafuer hiessen bisher ea-sl__f--wann; sie gelten
   ab hier fuer ea-sl__f--letzt. Die alten bleiben stehen und greifen
   auf nichts mehr.
   ================================================================ */

body.ea .ea-sl__f--letzt{
    flex-direction: row; align-items: center;
}
body.ea .ea-sl__f--letzt,
body.ea .ea-kopf__suche .ea-sl__f--letzt{ padding-right: 4px; }

/* Zwei Felder statt drei: "Was" darf breiter bleiben als "Wo", aber
   nicht mehr doppelt so breit - bei zweien faellt ein Uebergewicht
   staerker auf als bei dreien. */
body.ea .ea-sl__f[data-panel="was"]{ flex: 1.15 1 0; }
body.ea .ea-sl__f[data-panel="wo"]{ flex: 1 1 0; }

@media (max-width: 991.98px){
    body.ea .ea-kopf__suche .ea-sl__f--letzt{ padding-right: 3px; }

    /* Am Handy ist zugeklappt nur "Was" zu sehen. Der Abschnitt "Wo"
       bleibt trotzdem stehen, weil der Suchknopf darin sitzt - nur
       seine Beschriftung geht weg. */
    body.ea .ea-sl__f[data-panel="wo"]{ display: flex; flex: 0 0 auto; padding: 0 4px 0 0; }
    body.ea .ea-sl__f[data-panel="wo"] .ea-sl__fi{ display: none; }
    body.ea .ea-sl.is-offen .ea-sl__f[data-panel="wo"]{ flex: 1 0 100%; padding: 10px 14px; }
    body.ea .ea-sl.is-offen .ea-sl__f[data-panel="wo"] .ea-sl__fi{ display: flex; }
}

/* Nachtrag zu AR: die Anbieternamen in der Klappe "Was".

   Sie stehen ueber den Leistungen, weil sie die genauere Antwort sind:
   Wer einen Namen tippt, will zu diesem einen Anbieter, nicht in eine
   Liste. Deshalb ist jeder Eintrag ein Verweis aufs Profil.

   Untereinander statt zweispaltig: Ein Name mit Leistung und Ort
   darunter braucht die ganze Zeile. */
body.ea .ea-sl__namen{ grid-template-columns: minmax(0, 1fr); margin-bottom: 6px; }
body.ea .ea-sl__n{ text-decoration: none; }
body.ea .ea-sl__n .ea-sl__vn{ font-weight: 600; }
body.ea .ea-sl__kopf--n{ margin-top: 2px; }

/* FEHLER, der seit TEIL AI drinsteckte: Das Attribut hidden macht ein
   Element nur unsichtbar, solange KEINE Regel ihm ein display gibt.
   .ea-sl__v hat display:flex und .ea-sl__liste display:grid - beide
   sind staerker als die Browservorgabe fuer [hidden]. Die Vorschlaege
   wurden also gefiltert, blieben aber alle stehen.

   Aufgefallen ist es erst, als die Anbieternamen dazukamen: Da stand
   "AK Events" ueber einer vollstaendigen Leistungsliste, in der nichts
   zu "ak events" passte. */
body.ea .ea-sl__v[hidden],
body.ea .ea-sl__liste[hidden],
body.ea .ea-sl__leer[hidden],
body.ea .ea-sl__kopf[hidden]{ display: none; }


/* ================================================================
   TEIL AS – das Titelbild im Profil folgt der Seitenbreite
   Neu, 19.08.2026.

   Das Titelbild lief von Rand zu Rand, waehrend der Inhalt darunter
   in einer 1280 px breiten Spalte steht. Solange die Seite 1600 px
   breit war, fiel das kaum auf; seit sie auf 1280 zurueck ist, steht
   ein Streifen ueber die ganze Wand und darunter eine schmale Spalte.
   Das sieht aus wie zwei verschiedene Seiten.

   Jetzt ist das Titelbild eine Karte in derselben Spalte, mit runden
   Ecken wie die Karten in der Ergebnisliste. Das Profilbild haengt
   weiterhin darueber hinaus - das war schon vorher so.
   ================================================================ */

body.ea-p-dienstleister .ea-cover{
    box-sizing: border-box;
    max-width: var(--ea-wrap); margin: 0 auto;
    padding: 0 clamp(18px, 2.6vw, 32px);
    background: none; overflow: visible;
}
body.ea-p-dienstleister .ea-cover img{
    border-radius: 18px;
}
@media (max-width: 560px){
    /* Am Handy ist der Rand so schmal, dass die Karte kaum noch als
       Karte lesbar ist - dort darf das Bild an den Rand. */
    body.ea-p-dienstleister .ea-cover{ padding: 0; }
    body.ea-p-dienstleister .ea-cover img{ border-radius: 0; }
}

/* Der Streifen ist flach, das Foto ist es nicht - beschnitten wird also
   immer. Zwei Kleinigkeiten machen den Beschnitt vertraeglicher:
   etwas mehr Hoehe, und der Ausschnitt sitzt leicht ueber der Mitte,
   wo auf Fotos meistens die Gesichter sind. */
body.ea-p-dienstleister .ea-cover{ height: clamp(200px, 24vw, 360px); }
body.ea-p-dienstleister .ea-cover img{ object-position: center 38%; }

/* Nachtrag zu AS: Der Streifen darf 40 px ueber die Inhaltsspalte
   hinausgehen. Vorher endete er genau dort, wo auch die Anfragekarte
   endet - die klebte damit an seiner Kante, und das Profilbild links
   an der anderen. Jetzt liegen beide sichtbar IM Bild, mit Luft zum
   Rand. Vierzig Pixel: genug, dass man es sieht, zu wenig, als dass
   der Streifen wieder aus der Seite ausbricht. */
body.ea-p-dienstleister .ea-cover{ max-width: calc(var(--ea-wrap) + 80px); }

/* Nachtrag zu AS: Die Rundung am Banner war zu kraeftig - 18 px sehen
   an einem 1300 px breiten Streifen nach Knopf aus, nicht nach Bild.
   10 px nehmen der Kante nur die Haerte. */
body.ea-p-dienstleister .ea-cover img{ border-radius: 10px; }


/* ================================================================
   TEIL AT – Teilen und Merken oben im Profil
   Neu, 19.08.2026.

   Ueber dem Titelbild stehen jetzt rechts zwei Schalter, wie bei
   Airbnb ueber den Fotos: "Teilen" und "Merken". Das Merken-Kaestchen
   unter dem Namen ist dafuer weggefallen - zweimal derselbe Schalter
   auf einer Seite ist einer zu viel.

   "Merken" haengt am vorhandenen data-merken (js/merken-1.0.js). Mit
   data-merken-text="nein" laesst das Skript den Text in Ruhe; welches
   der beiden Woerter zu sehen ist, entscheidet hier die Klasse
   is-gemerkt.
   ================================================================ */

body.ea .ea-pkopf{ display: flex; align-items: center; gap: 16px; }
body.ea .ea-pkopf .ea-crumbs{ min-width: 0; flex: 1 1 auto; }
body.ea .ea-pakts{ display: flex; gap: 4px; flex: 0 0 auto; }

body.ea .ea-pakt{
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; background: none; cursor: pointer;
    padding: 8px 12px; border-radius: 10px;
    font: inherit; font-size: 14.5px; color: var(--ea-ink, #1E1E1C);
    text-decoration: underline; text-underline-offset: 3px;
}
body.ea .ea-pakt:hover{ background: var(--ea-surface, #F5F4F3); }
body.ea .ea-pakt svg{ width: 17px; height: 17px; flex: 0 0 17px; }
body.ea .ea-pakt--merk svg{
    fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round;
}
body.ea .ea-pakt--merk.is-gemerkt svg{
    fill: var(--ea-accent, #3F5AD1); stroke: var(--ea-accent, #3F5AD1);
}
body.ea .ea-pakt__b{ display: none; }
body.ea .ea-pakt--merk.is-gemerkt .ea-pakt__a{ display: none; }
body.ea .ea-pakt--merk.is-gemerkt .ea-pakt__b{ display: inline; }

@media (max-width: 700px){
    /* Am Handy nur die Zeichen - die Woerter kosten dort die halbe
       Zeile, und beide Zeichen sind bekannt genug. */
    body.ea .ea-pakt span{ display: none; }
    body.ea .ea-pakt--merk.is-gemerkt .ea-pakt__b{ display: none; }
    body.ea .ea-pakt{ padding: 8px; }
}

/* ---------- das Teilen-Blatt ---------- */

body.ea .ea-teil{
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(20, 20, 22, .45);
    display: grid; place-items: center; padding: 20px;
}
body.ea .ea-teil[hidden]{ display: none; }
body.ea-teil-offen{ overflow: hidden; }

body.ea .ea-teil__blatt{
    position: relative; background: #fff; border-radius: 18px;
    width: min(560px, 100%); max-height: min(88vh, 760px); overflow-y: auto;
    padding: 26px 26px 30px;
    box-shadow: 0 24px 70px rgba(20, 20, 22, .3);
}
body.ea .ea-teil__blatt:focus{ outline: none; }
body.ea .ea-teil__blatt h2{
    font-family: var(--ea-serif); font-weight: 400; font-size: 26px;
    margin: 4px 0 20px; text-transform: none;
}
body.ea .ea-teil__zu{
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: none; cursor: pointer; display: grid; place-items: center;
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-teil__zu:hover{ background: var(--ea-surface, #F5F4F3); }
body.ea .ea-teil__zu svg{ width: 18px; height: 18px; }

body.ea .ea-teil__vor{ display: flex; gap: 14px; align-items: center; margin: 0 0 20px; }
body.ea .ea-teil__vor img{
    width: 62px; height: 62px; flex: 0 0 62px;
    border-radius: 10px; object-fit: cover; display: block;
}
body.ea .ea-teil__vor p{ margin: 0; font-size: 15px; color: var(--ea-ink-2, #45474A); }

body.ea .ea-teil__gitter{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.ea .ea-teil__w{
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 12px;
    border: 1px solid var(--ea-line, #E7E2DE); background: #fff;
    font: inherit; font-size: 15px; color: var(--ea-ink, #1E1E1C);
    text-decoration: none; cursor: pointer; text-align: left;
}
body.ea .ea-teil__w:hover{ border-color: var(--ea-ink, #1E1E1C); }
body.ea .ea-teil__w svg{ width: 20px; height: 20px; flex: 0 0 20px; }
body.ea .ea-teil__w[data-teil-art="whatsapp"] svg,
body.ea .ea-teil__w[data-teil-art="facebook"] svg,
body.ea .ea-teil__w[data-teil-art="x"] svg{ fill: currentColor; }
body.ea .ea-teil__w[hidden]{ display: none; }

@media (max-width: 560px){
    body.ea .ea-teil{ place-items: end center; padding: 0; }
    body.ea .ea-teil__blatt{
        width: 100%; border-radius: 18px 18px 0 0; max-height: 90vh;
        padding: 22px 18px 26px;
    }
    body.ea .ea-teil__gitter{ grid-template-columns: minmax(0, 1fr); }
}

/* Nachtrag zu AT: Die Leiste ueber dem Titelbild ist hoeher, und ihre
   beiden Enden stehen genau an den Kanten des Bildes darunter - nicht
   40 px weiter innen. Damit bilden Brotkrumen, Zeichen und Bild eine
   gerade Linie statt dreier verschiedener Anfaenge.

   Der negative Rand rechts holt den Innenrand des Knopfes wieder
   heraus: Die SCHRIFT soll an der Kante stehen, die Klickflaeche darf
   trotzdem groesser sein. */
body.ea .ea-pkopf{
    max-width: calc(var(--ea-wrap) + 80px);
    min-height: 66px;
    padding-top: 4px; padding-bottom: 10px;
}
body.ea .ea-pkopf .ea-crumbs{ padding: 0; }
body.ea .ea-pakts{ margin-right: -12px; }

@media (max-width: 700px){
    body.ea .ea-pkopf{ min-height: 54px; }
    body.ea .ea-pakts{ margin-right: -8px; }
}


/* ================================================================
   TEIL AU – Filter als Zeile oben statt Spalte links
   Neu, 19.08.2026.

   Die Filter standen in einer Spalte links neben den Ergebnissen.
   Jetzt stehen sie als Zeile darueber, wie bei Airbnb. Das kostet
   eine Zeile Hoehe und bringt eine ganze Spalte Breite: Statt drei
   Karten passen vier bis fuenf in eine Reihe.

   Die Ausklappfelder bleiben gewoehnliche <select>-Felder, nur als
   Pille gestaltet. Ein selbstgebautes Menue waere schoener und am
   Handy schlechter - das eingebaute kennt jedes Geraet.
   ================================================================ */

body.ea .ea-fz{
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    padding: 6px 0 18px;
}

body.ea .ea-fz__f{ position: relative; display: inline-flex; }
body.ea .ea-fz__f > span{
    /* Die Beschriftung braucht nur das Vorleseprogramm - im Feld steht
       die Auswahl selbst, und "Leistung: Fotograf" waere doppelt. */
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
body.ea .ea-fz__f select{
    -webkit-appearance: none; appearance: none;
    height: 42px; padding: 0 36px 0 16px; max-width: 260px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 100px;
    background: #fff; cursor: pointer;
    font: inherit; font-size: 14.5px; color: var(--ea-ink, #1E1E1C);
    /* Das Dreieck als Bild im Hintergrund - ein eigenes Element
       liesse sich nicht in ein <select> legen. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
}
body.ea .ea-fz__f select:hover{ border-color: var(--ea-ink, #1E1E1C); }

body.ea .ea-fz__b{
    display: inline-flex; align-items: center; gap: 7px;
    height: 42px; padding: 0 16px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 100px;
    background: #fff; cursor: pointer;
    font: inherit; font-size: 14.5px; color: var(--ea-ink, #1E1E1C);
    white-space: nowrap;
}
body.ea .ea-fz__b svg{ width: 15px; height: 15px; fill: #E0A32E; flex: 0 0 15px; }
body.ea .ea-fz__b:hover{ border-color: var(--ea-ink, #1E1E1C); }
body.ea .ea-fz__b.is-an{
    border-color: var(--ea-ink, #1E1E1C); background: var(--ea-ink, #1E1E1C); color: #fff;
}
body.ea .ea-fz__b.is-an svg{ fill: #fff; }

/* Die Sortierung und die Anzahl gehen nach rechts - sie sind keine
   Filter, sondern sagen etwas ueber das Ergebnis. */
body.ea .ea-fz__f--sort{ margin-left: auto; }
body.ea .ea-fz__z{ font-size: 14.5px; color: var(--ea-muted, #75777A); white-space: nowrap; }

/* Ohne Spalte ist die Liste ein einfacher Block ueber die ganze
   Breite - das Raster darin bringt TEIL AB mit. */
body.ea .ea-results--breit{ display: block; }

body.ea .ea-anzeige--unten{ margin: 30px auto 0; max-width: 720px; }

@media (max-width: 900px){
    /* Am Handy eine Zeile zum Schieben statt vier Zeilen Umbruch. */
    body.ea .ea-fz{
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin: 0 -18px; padding: 4px 18px 14px;
    }
    body.ea .ea-fz::-webkit-scrollbar{ display: none; }
    body.ea .ea-fz > *{ flex: 0 0 auto; }
    body.ea .ea-fz__f--sort{ margin-left: 0; }
    /* Die Anzahl steht am Handy schon in der Ueberschrift darueber. */
    body.ea .ea-fz__z{ display: none; }
}

/* Das Raster darf jetzt mehr Spalten haben - die Filterspalte nimmt
   keine 260 px mehr weg. Gemessen bei 1440 px: vier Karten a 332 px;
   bei 1600 px fuenf a 262 px, also dasselbe Mass wie auf der
   Startseite. */
@media (min-width: 900px){  body.ea .ea-results--breit .ea-erg{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1180px){ body.ea .ea-results--breit .ea-erg{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1560px){ body.ea .ea-results--breit .ea-erg{ grid-template-columns: repeat(5, minmax(0,1fr)); } }

/* Nachtrag zu AU: Die Filterzeile liegt im dritten Stockwerk der
   Kopfzeile und bleibt damit beim Scrollen stehen - wie bei Airbnb.
   Sie braucht dafuer eine eigene Flaeche mit einer Linie darueber,
   sonst schwimmt sie in der Kopfzeile.

   Die Zeile faellt NICHT mit zusammen, wenn die Suche zusammenfaellt:
   Wer scrollt, filtert weiter. */
body.ea .ea-kopf__filter{
    border-top: 1px solid var(--ea-kopf-linie, #EBE6E1);
    background: var(--ea-kopf, #F7F5F3);
}
body.ea .ea-kopf__filter .ea-fz{
    box-sizing: border-box;
    max-width: var(--ea-wrap); margin: 0 auto;
    padding: 10px clamp(18px, 2.6vw, 32px);
}
/* In der Kopfzeile steht die Zeile auf hellgrau - die Pillen brauchen
   dort einen Tick mehr Kante, damit sie sich abheben. */
body.ea .ea-kopf__filter .ea-fz__f select,
body.ea .ea-kopf__filter .ea-fz__b{ border-color: var(--ea-kopf-linie, #EBE6E1); }

@media (max-width: 900px){
    body.ea .ea-kopf__filter .ea-fz{ margin: 0; padding: 8px 18px 10px; }
}

/* Nachtrag: keine Linien in der Kopfzeile mehr, und die Filter stehen
   mittig unter dem Suchfeld.

   Die Linie zwischen den Stockwerken teilte etwas, was zusammengehoert:
   Suche und Filter sind beides Werkzeuge derselben Zeile. Und die
   Linie unten braucht es nicht - das Grau der Kopfzeile setzt sich vom
   weissen Inhalt schon selbst ab. */
body.ea .ea-kopf__filter{ border-top: 0; }
body.ea .ea-header--filter{ border-bottom: 0; }

/* Mittig statt auseinandergezogen: Vorher stand die Sortierung rechts
   am Rand, die Filter links - zwei Gruppen mit einem Loch in der
   Mitte. Jetzt eine Gruppe unter dem Suchfeld. */
body.ea .ea-kopf__filter .ea-fz{ justify-content: center; }
body.ea .ea-kopf__filter .ea-fz__f--sort{ margin-left: 0; }

/* Die Anzahl steht zwei Zeilen darunter schon im Text ("25 Anbieter
   fuer Trauredner ..."). In der Mitte der Filterzeile waere sie ein
   Fremdkoerper zwischen Schaltern. */
body.ea .ea-kopf__filter .ea-fz__z{ display: none; }

/* Neues Logo, 19.08.2026: Die Wortmarke "ABC" ist jetzt eine
   verschraenkte Ligatur statt drei einzelner Buchstaben. Bei 20 px
   laufen die drei Buchstaben ineinander und werden zu einem Fleck;
   bei 24 px sind sie zu lesen. Vier Pixel mehr, dafuer erkennt man,
   was da steht. */
body.ea .ea-logo svg,
body.ea .ea-logo img{ height: 24px; }


/* ================================================================
   TEIL AV – Seite „Dienstleister werden“
   Neu, 19.08.2026. Gehoert zu templates/fuer-dienstleister.tpl.

   Eine Verkaufsseite, die nicht wie eine aussieht: dieselbe Schrift,
   dieselben Karten, dieselben Knoepfe wie im Rest der Seite. Wer
   Anbieter werden will, hat die Kundenseite schon gesehen - wenn die
   Anbieterseite plotzlich schreit, glaubt er ihr weniger.
   ================================================================ */

body.ea-p-fuer-dienstleister{ --ea-wrap: 1180px; }

/* ---------- Aufmacher ---------- */
body.ea .ea-dl__kopf{ padding: 46px 0 40px; }
body.ea .ea-dl__h1{
    font-family: var(--ea-serif); font-weight: 400; font-size: clamp(30px, 4vw, 46px);
    letter-spacing: -.02em; margin: 0 0 16px; text-transform: none;
}
body.ea .ea-dl__lead{
    font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55;
    color: var(--ea-ink-2, #45474A); max-width: 62ch; margin: 0 0 26px;
}
body.ea .ea-dl__tun{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.ea .ea-dl__tun--mitte{ justify-content: center; }
body.ea .ea-btn--lg{ padding: 15px 30px; font-size: 16.5px; border-radius: 100px; }
body.ea .ea-dl__klein{ font-size: 14px; color: var(--ea-muted, #75777A); }
body.ea .ea-dl__klein--tab{ display: block; max-width: 76ch; margin: 16px 0 0; line-height: 1.6; }

body.ea .ea-dl__zahlen{
    list-style: none; margin: 34px 0 0; padding: 0;
    display: flex; gap: 34px; flex-wrap: wrap;
    font-size: 15px; color: var(--ea-ink-2, #45474A);
}
body.ea .ea-dl__zahlen b{ font-size: 21px; display: block; color: var(--ea-ink, #1E1E1C); }

/* ---------- Abschnitte ---------- */
body.ea .ea-dl__abs{ padding: 44px 0; }
body.ea .ea-dl__abs--grau{ background: var(--ea-kopf, #F7F5F3); }
body.ea .ea-dl__h2{
    font-family: var(--ea-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -.015em; margin: 0 0 8px; text-transform: none;
}
body.ea .ea-dl__h3{
    font-family: var(--ea-serif); font-weight: 400; font-size: 22px;
    margin: 0 0 12px; text-transform: none;
}
body.ea .ea-dl__unter,
body.ea .ea-dl__unter p{ color: var(--ea-muted, #75777A); font-size: 15px; margin: 0 0 26px; max-width: 70ch; }

/* ---------- drei Schritte ---------- */
body.ea .ea-dl__schritte{
    list-style: none; margin: 26px 0 0; padding: 0;
    display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.ea .ea-dl__schritte h3{ font-size: 18px; margin: 12px 0 6px; text-transform: none; }
body.ea .ea-dl__schritte p{ margin: 0; color: var(--ea-ink-2, #45474A); font-size: 15.5px; line-height: 1.6; }
body.ea .ea-dl__nr{
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; background: var(--ea-accent, #3F5AD1); color: #fff;
    font-size: 16px; font-weight: 600;
}

/* ---------- die drei Stufen ---------- */
body.ea .ea-stufen{
    display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}
body.ea .ea-stufe{
    position: relative; background: #fff;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 16px;
    padding: 26px 24px 24px;
}
/* Die empfohlene Stufe steht nicht groesser da, nur deutlicher
   umrandet - eine hochgezogene Karte draengt, und draengen passt
   nicht zu einer Seite, die mit "kostenlos" anfaengt. */
body.ea .ea-stufe--empf{ border-color: var(--ea-accent, #3F5AD1); border-width: 2px; }
body.ea .ea-stufe__mark{
    position: absolute; top: -12px; left: 24px;
    background: var(--ea-accent, #3F5AD1); color: #fff;
    font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 100px;
}
body.ea .ea-stufe__n{
    font-family: var(--ea-serif); font-weight: 400; font-size: 24px;
    margin: 0 0 4px; text-transform: none;
}
body.ea .ea-stufe__p{ margin: 0 0 4px; font-size: 15px; color: var(--ea-muted, #75777A); }
body.ea .ea-stufe__p b{ font-size: 32px; color: var(--ea-ink, #1E1E1C); font-weight: 600; }
body.ea .ea-stufe__p i{ font-style: normal; }
body.ea .ea-stufe__s{ margin: 0 0 18px; font-size: 16px; color: var(--ea-ink, #1E1E1C); font-weight: 600; }
body.ea .ea-stufe__l{ list-style: none; margin: 0 0 22px; padding: 0; }
body.ea .ea-stufe__l li{
    position: relative; padding: 0 0 10px 24px;
    font-size: 15.5px; line-height: 1.5; color: var(--ea-ink-2, #45474A);
}
body.ea .ea-stufe__l li::before{
    content: ""; position: absolute; left: 2px; top: 7px;
    width: 11px; height: 6px; border-left: 2px solid var(--ea-accent, #3F5AD1);
    border-bottom: 2px solid var(--ea-accent, #3F5AD1); transform: rotate(-45deg);
}
body.ea .ea-btn--block{ display: block; width: 100%; text-align: center; }
body.ea .ea-stufe__hin{
    margin: 10px 0 0; font-size: 13.5px; line-height: 1.5;
    color: var(--ea-muted, #75777A); text-align: center;
}

body.ea .ea-dl__enthalten{
    margin: 26px 0 0; font-size: 15px; line-height: 1.65;
    color: var(--ea-ink-2, #45474A); max-width: 80ch;
}

/* ---------- Erklaerkasten ---------- */
body.ea .ea-dl__kasten{
    background: var(--ea-accent-soft, #EEF1FE);
    border-radius: 16px; padding: 28px 30px; max-width: 82ch;
}
body.ea .ea-dl__kasten p{
    margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; color: var(--ea-ink-2, #45474A);
}
body.ea .ea-dl__kasten p:last-child{ margin-bottom: 0; }

/* ---------- Vergleichstabelle ---------- */
body.ea .ea-vgl__rahmen{ overflow-x: auto; margin: 26px 0 0; }
body.ea .ea-vgl{
    width: 100%; min-width: 620px; border-collapse: collapse;
    background: #fff; border: 1px solid var(--ea-line, #E7E2DE); border-radius: 14px;
    overflow: hidden; font-size: 15px;
}
body.ea .ea-vgl th,
body.ea .ea-vgl td{
    padding: 13px 16px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--ea-line-2, #F2EEEB);
}
body.ea .ea-vgl thead th{
    background: var(--ea-surface, #F5F4F3); font-size: 15.5px; font-weight: 600;
    white-space: nowrap;
}
body.ea .ea-vgl thead th span{
    display: block; font-weight: 400; font-size: 13.5px; color: var(--ea-muted, #75777A);
}
body.ea .ea-vgl tbody th{ font-weight: 400; color: var(--ea-ink, #1E1E1C); }
body.ea .ea-vgl tbody tr:last-child th,
body.ea .ea-vgl tbody tr:last-child td{ border-bottom: 0; }
body.ea .ea-vgl td{ color: var(--ea-ink-2, #45474A); }
body.ea .ea-vgl td.ja{ color: #2C7A4B; font-weight: 600; }
body.ea .ea-vgl td.nein{ color: var(--ea-muted, #9A9EA5); }
body.ea .ea-vgl__gp{
    display: inline-block; margin-left: 4px; padding: 1px 7px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 100px;
    background: #fff; color: var(--ea-muted, #75777A);
    font-size: 11.5px; font-weight: 500; white-space: nowrap;
}

/* ---------- Fragen ---------- */
body.ea .ea-dl__fragen{ margin: 22px 0 0; max-width: 80ch; }
body.ea .ea-dl__fragen details{
    border-bottom: 1px solid var(--ea-line-2, #F2EEEB);
}
body.ea .ea-dl__fragen summary{
    cursor: pointer; padding: 16px 30px 16px 0; position: relative;
    font-size: 16.5px; font-weight: 600; color: var(--ea-ink, #1E1E1C);
    list-style: none;
}
body.ea .ea-dl__fragen summary::-webkit-details-marker{ display: none; }
body.ea .ea-dl__fragen summary::after{
    content: ""; position: absolute; right: 6px; top: 22px;
    width: 9px; height: 9px; border-right: 2px solid var(--ea-ink-2, #45474A);
    border-bottom: 2px solid var(--ea-ink-2, #45474A); transform: rotate(45deg);
    transition: transform .18s;
}
body.ea .ea-dl__fragen details[open] summary::after{ transform: rotate(-135deg); top: 25px; }
body.ea .ea-dl__fragen p{
    margin: 0 0 18px; font-size: 15.5px; line-height: 1.65; color: var(--ea-ink-2, #45474A);
}

/* ---------- Abschluss ---------- */
body.ea .ea-dl__schluss{ text-align: center; padding-bottom: 60px; }
body.ea .ea-dl__schluss .ea-dl__unter{ margin-left: auto; margin-right: auto; }

/* ---------- Handy ---------- */
@media (max-width: 900px){
    body.ea .ea-dl__schritte,
    body.ea .ea-stufen{ grid-template-columns: minmax(0, 1fr); }
    body.ea .ea-dl__kopf{ padding: 30px 0 28px; }
    body.ea .ea-dl__abs{ padding: 34px 0; }
    body.ea .ea-dl__zahlen{ gap: 22px; }
    body.ea .ea-dl__kasten{ padding: 22px 20px; }
    /* Die Karte der empfohlenen Stufe braucht oben Luft fuer ihr
       Schildchen, sonst schneidet der Abstand es an. */
    body.ea .ea-stufe--empf{ margin-top: 14px; }
}

/* ================================================================
   TEIL AW – vier Premium-Plaetze statt drei
   20.08.2026

   Bis eben standen oben drei Karten. Vier passen in dieselbe Breite,
   weil die Ergebnisliste auf der Kategorieseite ohne Filterspalte
   laeuft und der Rumpf dort 1440 px breit ist – bei 1440 px sind das
   je Karte rund 340 px, also mehr als die 5-spaltige Startseite hat.

   Warum nicht einfach Zeile 9859 geaendert wird: dieses Blatt wird
   nur hinten fortgeschrieben. So bleibt jede Aenderung datiert und
   nachlesbar, und ein Rueckbau heisst „Abschnitt loeschen“ und nicht
   „alte Zeile suchen“.

   Reihenfolge der Regeln ist Absicht:
     - unter 768 px bleibt der Wischstreifen von TEIL AH gueltig,
       darum steht hier KEINE Regel ohne min-width. Eine solche Regel
       wuerde grid-template-columns: none dort ueberschreiben und die
       vier Karten am Handy in vier winzige Spalten quetschen.
     - 768-1179 px: zwei mal zwei. Vier in einer Reihe waeren dort
       unter 200 px pro Karte, da ist das Gesicht auf dem Portrait
       nicht mehr zu erkennen.
     - ab 1180 px: vier in einer Reihe.
   ================================================================ */

@media (min-width: 768px){
    body.ea .ea-spon__reihe{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1180px){
    body.ea .ea-spon__reihe{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }

    /* Die Karten sind schmaler als vorher, also darf die Schrift
       einen Hauch kleiner werden – sonst bricht der Name mit dem
       Haekchen daneben zu frueh in die Auslassungspunkte. */
    body.ea .ea-spon__reihe .ea-c__n{ font-size: 15.5px; }
    body.ea .ea-spon__reihe .ea-c__k{ font-size: 13.5px; }
    body.ea .ea-spon__reihe .ea-c__z{ font-size: 14px; }
    body.ea .ea-spon__reihe .ea-c__av{ width: 40px; height: 40px; border-width: 2.5px; }
    body.ea .ea-spon__reihe .ea-c__mw{ border-radius: 12px; }
}

/* Zweite, kleinere Zeile unter dem Vorspann. Auf der Statistik steht
   dort der Datenschutzsatz: er gehoert dazu, soll aber nicht so laut
   sein wie die Erklaerung, was die Seite zeigt. */
body.ea .ea-b__lead--klein{ font-size: 13.5px; margin-top: -18px; }

/* ================================================================
   TEIL AX – zwei Spalten in den Klappen der Suchleiste,
             und die Ueberschrift ueber der aufgeklappten Leiste
   20.08.2026

   1) Beide Klappen sind am Rechner zweispaltig.

      Vorher lief alles untereinander: bei "Was" standen die
      Anbieternamen OBEN und die Leistungen darunter - wer "Fotograf"
      tippte, sah drei fremde Firmennamen und musste scrollen, bis der
      Beruf kam. Jetzt links die Leistungen (der haeufige Fall),
      rechts die Anbieter (der Fall "ich kenne den Namen schon").
      Bei "Wo" links Deutschlandweit und die sechzehn Laender, rechts
      die Staedte.

      Jede Spalte scrollt fuer sich. Anders geht es nicht: sechzehn
      Laender und sechzig Staedte in einer gemeinsamen Rolle heisst,
      dass man die Staedte nur findet, wenn man an den Laendern
      vorbeiscrollt - und dann sind die Laender nicht mehr zu sehen.

      Am Handy stehen die Spalten untereinander. Zwei Spalten auf
      380 px sind zwei halbe Spalten.

   2) Ueber der aufgeklappten Leiste steht auf ALLEN Seiten wieder
      "Dienstleister fuer jeden Anlass" mit der Zahl der Anbieter.
      Auf der Startseite stand das immer da; auf Kategorieseite und
      Profil klappte die Leiste auf und der Kopf war leer.

      Wichtig: NUR bei is-auf, also nachdem der Besucher die Pille
      angeklickt hat. Solange die Leiste zusammengefallen ist
      (is-klein), bleibt der Satz weg - dort steht die Pille.
   ================================================================ */

/* ---------- zwei Spalten ---------- */
body.ea .ea-sl__zwei{
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 16px;
    /* stretch, nicht start: Der Trennstrich haengt am rechten Kasten.
       Bei "start" ist der Kasten nur so hoch wie sein Inhalt - solange
       rechts nur der Satz "Tipp einen Namen ein" steht, waere der
       Strich ein 40 px langer Stummel neben einer 330 px langen
       Liste. */
    align-items: stretch;
}
body.ea .ea-sl__sp{ min-width: 0; }

/* Der Trennstrich steht am rechten Kasten, nicht als eigenes Element:
   ein leeres <span> dazwischen waere eine dritte Rasterspalte und
   muesste bei jedem Umbruch mitgedacht werden. */
body.ea .ea-sl__sp--r{
    border-left: 1px solid var(--ea-line-2, #F0ECE8);
    padding-left: 16px;
}

/* Jede Spalte rollt fuer sich. Die Hoehe ist so gewaehlt, dass am
   Rechner acht bis neun Zeilen sichtbar sind - genug, um zu erkennen,
   dass es weitergeht. */
body.ea .ea-sl__sp > .ea-sl__liste{
    grid-template-columns: minmax(0, 1fr);
    max-height: min(46vh, 330px); overflow-y: auto;
    scrollbar-width: thin;
}
/* Der Kasten mit "Deutschlandweit" ist eine Liste mit einem Eintrag -
   der darf nicht scrollen und braucht seine eigene Trennlinie nach
   unten, sonst klebt er an Baden-Wuerttemberg. */
body.ea .ea-sl__sp > .ea-sl__liste:has(.ea-sl__v--alle){
    max-height: none; overflow: visible;
    border-bottom: 1px solid var(--ea-line-2, #F0ECE8);
    padding-bottom: 6px; margin-bottom: 6px;
}
body.ea .ea-sl__v--alle{ font-weight: 600; }

/* Die Klappe selbst rollt nicht mehr mit, sonst rollen zwei Dinge
   uebereinander und der Finger trifft das falsche. */
body.ea .ea-sl__klappe{ overflow: hidden; max-height: none; }

/* Der Satz in der Anbieterspalte, solange nichts eingegeben ist. */
body.ea .ea-sl__tipp{
    color: var(--ea-muted, #75777A); font-size: 14px; line-height: 1.5;
    padding: 4px 12px 10px; margin: 0;
}
body.ea .ea-sl__tipp[hidden]{ display: none; }

/* Die Namen stehen nicht mehr ueber der Liste, sondern in der Spalte -
   der Abstand von TEIL AR wird hier nicht mehr gebraucht. */
body.ea .ea-sl__namen{ margin-bottom: 0; }

@media (max-width: 991.98px){
    body.ea .ea-sl__zwei{ grid-template-columns: minmax(0, 1fr); gap: 0; }
    body.ea .ea-sl__sp--r{
        border-left: 0; padding-left: 0; margin-top: 10px; padding-top: 10px;
        border-top: 1px solid var(--ea-line-2, #F0ECE8);
    }
    /* Am Handy rollt wieder die Klappe als Ganzes: zwei kurze
       Rollbereiche untereinander auf einem Telefon sind eine Falle -
       man wischt und die halbe Liste bewegt sich nicht. */
    body.ea .ea-sl__klappe{ overflow-y: auto; max-height: min(62vh, 520px); }
    body.ea .ea-sl__sp > .ea-sl__liste{ max-height: none; overflow: visible; }
}

/* ---------- Ueberschrift ueber der aufgeklappten Leiste ---------- */

/* TEIL AN blendet den Satz bei is-klein UND bei is-auf aus. Bei
   is-auf war das fuer die Startseite gedacht: dort ist die Seite
   gescrollt, und ein Kopf mit Ueberschrift schiebt den Inhalt zu weit
   nach unten. Auf den Seiten, die von Anfang an zusammengefallen sind
   (ea-header--zu), ist es anders: dort ist die aufgeklappte Leiste
   der einzige Zustand, in dem der Satz stehen kann.

   Drei Regeln legen den Satz still, nicht eine: TEIL AN nimmt ihm
   display, TEIL AM zusaetzlich max-height, opacity, padding und
   pointer-events. Alles vier muss zurueck, sonst steht der Satz mit
   der richtigen Breite und der Hoehe null da - genau das war beim
   ersten Versuch der Fall (gemessen: width 385, height 0). */
body.ea .ea-header--zu.is-auf .ea-kopf__satz{
    display: block; max-height: 140px; opacity: 1;
    padding-top: 2px; padding-bottom: 0; pointer-events: auto;
}

/* Auf diesen Seiten ist es KEINE h1 - die hat die Seite selbst
   (Kategoriename, Anbietername). Zwei h1 auf einer Seite, und die
   erste davon ein Werbesatz, ist fuer Suchmaschinen und fuer
   Vorleseprogramme dieselbe Verwirrung.

   Aussehen soll es wie die h1 der Startseite in derselben Zeile -
   dieselbe Schrift, dieselbe Groesse, dieselben Auslassungspunkte,
   wenn die Zeile eng wird. Deshalb steht hier eine Kopie der Regel
   von TEIL AN und nicht eine eigene Gestaltung. */
body.ea .ea-header--suche .ea-kopf__t{
    display: block;
    font-family: var(--ea-serif); font-weight: 400; font-size: 19px;
    letter-spacing: -.01em; line-height: 1.2; margin: 0 0 2px;
    color: var(--ea-ink, #1E1E1C); text-transform: none; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 991.98px){
    /* Am Handy geht der Satz in eine eigene Zeile (TEIL AN) und darf
       dann umbrechen. */
    body.ea .ea-header--suche .ea-kopf__t{ font-size: 17px; white-space: normal; }

    /* Und die obere Zeile muss dafuer umbrechen DUERFEN. Der Nachtrag
       zu TEIL AQ verbietet das bei is-klein und is-auf - damals zu
       Recht, denn dort stand nie eine Ueberschrift drin, und ohne das
       Verbot rutschte das Herz in eine zweite Zeile.

       Jetzt steht bei ea-header--zu.is-auf eine Ueberschrift drin. Ohne
       Umbruch stellt sich der Satz neben das Logo, ist 100 % breit und
       ragt rechts hinaus - gemessen 268 px Ueberstand auf 390 px
       Schirm. Die Pille ist in diesem Zustand ausgeblendet, sie kann
       hier also nicht in die Quere kommen. */
    body.ea .ea-header--zu.is-auf .ea-header__in{ flex-wrap: wrap; }
}

/* ================================================================
   TEIL AY – die Premium-Reihe steht oben, ohne Kasten, und laesst
             sich blaettern
   20.08.2026

   Drei Aenderungen an einer Stelle:

   1. KEIN GRAUER KASTEN MEHR. Der Rahmen mit #FAFAF9 hat den
      bezahlten Plaetzen die Anmutung eines Werbeblocks gegeben - und
      genau daran gewoehnt sich das Auge und liest daran vorbei
      (Bannerblindheit). Ohne Kasten sehen die Karten aus wie
      Ergebnisse, was sie auch sind; die Kennzeichnung darueber bleibt
      unveraendert stehen und leistet die Offenlegung.

   2. VIER SICHTBAR, MEHR ZUM BLAETTERN. Die Reihe ist ein
      Rollbereich mit Rastung. Eine Spalte ist genau ein Viertel der
      Breite minus der drei Abstaende - dadurch endet eine Seite immer
      an einer Kartenkante und nicht mitten in einem Gesicht.

   3. DIE PFEILE stehen rechts in der Kopfzeile des Kastens, nicht auf
      den Karten. Auf den Karten sitzen schon Pfeile - fuer die Fotos
      IN einer Karte. Zwei Paar Pfeile im selben Bereich, die
      Verschiedenes tun, ist eine Falle; oben in der Zeile ist klar,
      dass sie die REIHE bewegen.

   Der Abstand nach TEIL AW: Dort steht grid-template-columns mit
   repeat(4). Das wird hier abgeloest - grid-auto-flow: column und
   grid-auto-columns, sonst quetscht das Raster alle zwoelf Karten in
   die sichtbare Breite statt sie hinauszuschieben.
   ================================================================ */

body.ea .ea-spon{
    --ea-spg: 14px;
    background: none; border: 0; border-radius: 0;
    /* Der Abstand nach unten ersetzt den Rahmen: Ohne Kasten braucht
       es LUFT, damit man sieht, wo der bezahlte Teil aufhoert und die
       Seite anfaengt. Eine Linie waere die andere Loesung - sie sieht
       aber wieder nach Werbeblock aus, und genau davon soll weg. */
    padding: 22px 0 6px; margin: 0 0 18px;
}

body.ea .ea-spon__kopf{ align-items: center; gap: 9px; margin: 0 0 12px; }

/* Die Pfeile ganz rechts. margin-left:auto und nicht
   justify-content:space-between: Sonst wanderte die Zeile
   "bezahlte Platzierung" mit an den rechten Rand und stuende nicht
   mehr neben dem Wort, auf das sie sich bezieht. */
body.ea .ea-spon__pf{ margin-left: auto; display: flex; gap: 8px; }
body.ea .ea-spon__pf[hidden]{ display: none; }

body.ea .ea-spon__p{
    width: 32px; height: 32px; border-radius: 50%; padding: 0;
    border: 1px solid var(--ea-line, #E7E2DE); background: #fff;
    color: var(--ea-ink, #1E1E1C); cursor: pointer;
    display: grid; place-items: center;
}
body.ea .ea-spon__p svg{ width: 16px; height: 16px; display: block; }
body.ea .ea-spon__p:hover:not(:disabled){ background: var(--ea-surface, #F5F4F3); }
/* Am Ende ausgegraut statt versteckt: Ein Knopf, der verschwindet,
   laesst die Zeile springen, und beim naechsten Klick ist der andere
   woanders. */
body.ea .ea-spon__p:disabled{ opacity: .35; cursor: default; }

/* Am Handy keine Pfeile: Dort wischt man, und die beiden Knoepfe
   drueckten "PREMIUM-ANBIETER · bezahlte Platzierung" in vier Zeilen.
   Genauso sind die Pfeile IN der Karte nur am Rechner da (TEIL AH). */
@media (max-width: 767.98px){
    body.ea .ea-spon__pf{ display: none !important; }
}

/* ---------- die Reihe als Rollbereich ---------- */
@media (min-width: 768px){
    body.ea .ea-spon__reihe{
        display: grid;
        grid-template-columns: none;          /* loest TEIL AW ab */
        grid-auto-flow: column;
        gap: var(--ea-spg);
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scrollbar-width: none;
        padding-bottom: 2px;
    }
    body.ea .ea-spon__reihe::-webkit-scrollbar{ display: none; }
    body.ea .ea-spon__reihe > .ea-c{ scroll-snap-align: start; }

    /* zwei nebeneinander bis 1180 px - vier waeren dort unter 200 px
       je Karte, siehe TEIL AW */
    body.ea .ea-spon__reihe{
        grid-auto-columns: calc((100% - var(--ea-spg)) / 2);
    }
}
@media (min-width: 1180px){
    body.ea .ea-spon__reihe{
        grid-auto-columns: calc((100% - 3 * var(--ea-spg)) / 4);
    }
}

/* ================================================================
   TEIL AZ – das eigene Foto in der Kopfzeile
   20.08.2026

   Angemeldet steht rechts jetzt: Herz · rundes Foto · Name mit Pfeil.

   Es ist DASSELBE Bild wie im Profil (/img/profiles/sm_...), nur
   kleiner gezeichnet. Kein zweites Format und keine zweite Datei -
   wer sein Foto wechselt, wechselt es damit ueberall gleichzeitig.

   34 px, nicht 40: Die Kopfzeile ist zusammengefallen 64 px hoch, und
   das Foto soll neben dem Namensknopf (32 px hoch) stehen, nicht
   darueber hinausragen. Der weisse Ring von 2 px setzt es vom warmen
   Hellgrau der Kopfzeile ab - ohne ihn verschwimmt ein helles Foto
   mit dem Hintergrund.
   ================================================================ */

body.ea .ea-kopfbild{
    flex: 0 0 auto; display: block; line-height: 0;
    width: 34px; height: 34px; border-radius: 50%;
    overflow: hidden; background: var(--ea-surface, #F5F4F3);
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(23,24,26,.16);
    transition: box-shadow .15s;
}
body.ea .ea-kopfbild img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: 50%;
}
body.ea .ea-kopfbild:hover{
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ea-line, #E7E2DE), 0 1px 4px rgba(23,24,26,.2);
}

/* Am Handy geht das HERZ, nicht der Namensknopf.

   Der erste Versuch war umgekehrt - Knopf weg, Herz bleibt. Das war
   falsch: Hinter dem Knopf haengen "Mein Bereich", "Anfragen" und
   "Abmelden", und im Burger-Menue stehen diese Punkte NICHT. Ohne den
   Knopf kaeme man am Handy nicht mehr heraus.

   Die Merkliste ist dagegen im Klappmenue gleich mit dabei, und das
   Foto fuehrt mit einem Klick dorthin. Auf 390 px zaehlt jeder
   Millimeter: Burger, Logo, Pille, Foto und Knopf sind schon genug. */
@media (max-width: 767.98px){
    body.ea .ea-header__right .ea-merkbtn{ display: none; }
    body.ea .ea-kopfbild{ width: 30px; height: 30px; }
}

/* Nachtrag zu AZ: die Pille bekommt am Handy eine eigene Zeile.

   Die Pille war angemeldet schon vorher zu schmal - sie steht in der
   Zeile zwischen Logo und Kontoknopf und bekommt, was uebrig ist. Bei
   390 px waren das etwa 10 Pixel: ein runder Suchknopf, der aus einem
   Stummel herausragte. Das Foto aendert daran nichts, es macht es nur
   sichtbar.

   Eine Mindestbreite hilft nicht: Ich hatte 96 px gesetzt, und die
   rechte Gruppe ist daraufhin 35 px aus dem Schirm gewandert
   (gemessen) - das Logo ist ein Bild und schrumpft nicht mit.

   Also unter 560 px eine eigene Zeile. Gemessen, alle Werte aus dem
   Browser:

       Breite  Pille   Kopfzeile hoch
        360    328 px    130 px
        390    358 px    130 px
        430    398 px    130 px
        560    528 px    130 px
        600    207 px     99 px   (wieder einzeilig)
        768    312 px     99 px

   Der Preis steht in der letzten Spalte: Die Kopfzeile wird am Handy
   31 Pixel hoeher, und sie bleibt beim Scrollen stehen. Das ist mir
   den Tausch wert - eine Suche, die man bedienen kann, gegen 31
   Pixel. Wenn Du das anders siehst, ist der Rueckbau das Loeschen
   dieses Blocks; dann ist die Pille wieder ein Stummel.

   Das Logo wird in dieser Zeile auf 18 px gesetzt. Ohne das ist die
   obere Zeile bei 360 px umgebrochen und die Kopfzeile 172 px hoch
   geworden - auch gemessen. */
@media (max-width: 560px){
    body.ea .ea-header--zu.is-klein .ea-header__in{ flex-wrap: wrap; }
    body.ea .ea-header--zu.is-klein .ea-slmini{
        order: 5; flex: 1 0 100%; margin: 8px 0 2px; min-width: 0;
    }
    body.ea .ea-header--zu.is-klein .ea-logo img{ height: 18px; }
}

/* ================================================================
   TEIL BA – die Erklaerkaesten auf "Dienstleister werden"
   20.08.2026

   Zwei Dinge, beide aus deiner Rueckmeldung.

   1. SIE SIND SO BREIT WIE DIE SEITE. Vorher stand max-width: 82ch am
      Kasten, das sind etwa 780 px in einem 1280 px breiten Rumpf -
      rechts blieben 500 px leer, und der blaue Kasten sah aus, als
      waere er falsch platziert.

   2. INNEN ZWEI SPALTEN, UEBERSCHRIFT LINKS. Nur die max-width
      wegzunehmen waere schlechter gewesen als vorher: Eine Textzeile
      ueber 1220 px ist bei 15,5 px Schrift rund 110 Zeichen lang.
      Ab etwa 75 findet das Auge beim Zeilenwechsel den Anfang der
      naechsten Zeile nicht mehr sicher - man liest dieselbe Zeile
      zweimal. Deshalb: Ueberschrift in eine eigene Spalte links, der
      Text rechts in zwei Spalten von je etwa 55 Zeichen.

   column-count und nicht grid fuer den Text: Damit laeuft er wie in
   einer Zeitung - erst die linke Spalte hinunter, dann die rechte.
   Mit grid landete Absatz 1 links, Absatz 2 rechts, Absatz 3 wieder
   links: Man muesste nach jedem Absatz mit dem Auge zurueckspringen.
   ================================================================ */

body.ea .ea-dl__kasten{
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 4px 40px; align-items: start;
    padding: 30px 34px;
}
body.ea .ea-dl__kasten > .ea-dl__h3{ margin: 0; }

body.ea .ea-dl__ktext{
    column-count: 2; column-gap: 40px;
    /* Die feine Linie zwischen den Spalten ersetzt den Abstand als
       Trennung - bei zwei Spalten ohne Linie liest man auf einem
       breiten Schirm gern quer ueber die Luecke weiter. */
    column-rule: 1px solid rgba(63,90,209,.14);
}
/* Ein Absatz darf nicht mit einer einzelnen Zeile am Spaltenfuss
   anfangen oder aufhoeren. */
body.ea .ea-dl__ktext p{ orphans: 2; widows: 2; }
body.ea .ea-dl__ktext p:first-child{ margin-top: 0; }
/* Der kleine Hinweis am Ende bleibt beisammen und rutscht nicht
   mitten in eine Spalte. */
body.ea .ea-dl__ktext .ea-dl__klein{ break-inside: avoid; }

/* Ab hier ist fuer zwei Textspalten neben einer Ueberschriftenspalte
   kein Platz mehr: Die Ueberschrift geht nach oben. */
@media (max-width: 1099.98px){
    body.ea .ea-dl__kasten{ grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
    body.ea .ea-dl__kasten > .ea-dl__h3{ margin-bottom: 2px; }
}
@media (max-width: 760px){
    body.ea .ea-dl__ktext{ column-count: 1; column-rule: 0; }
    body.ea .ea-dl__kasten{ padding: 24px 22px; }
}

/* ================================================================
   TEIL BB – Hinweis, wenn der Ort nicht erkannt wurde
   20.08.2026

   Wer "Bonnn" tippt, bekommt die ganze Liste. Ohne einen Satz dazu
   liest er "25 Anbieter" und denkt, die stehen alle in seinem Ort.
   Der Hinweis ist kein Fehlerkasten in Rot: Es ist kein Fehler, es
   ist eine Auskunft. Deshalb dieselbe helle Flaeche wie die
   Erklaerkaesten.
   ================================================================ */

/* Fassung 226, 29.08.2026 - leise gestellt.

   Vorher: heller blauer Kasten mit Rundung, fetter erster Satz, unter
   dem Kopf. Damit war das Auffaelligste auf der Seite eine
   Entschuldigung - noch bevor der Besucher gesehen hatte, was es
   ueberhaupt gibt. Genau dieselbe Kur hat der Hinweis "aus ganz
   Deutschland" auf den Stadtseiten bekommen (Abschnitt AF); die Werte
   hier sind absichtlich dieselben, damit beide Seiten gleich klingen.

     MERKSATZ: Ein Hinweis, der lauter ist als das Angebot, verkauft
     den Mangel statt der Sache. */
body.ea .ea-ortweg{
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ea-muted, #71757B);
    max-width: 62ch;
}

/* ================================================================
   TEIL BC – Ladeanzeige: Balken, Platzhalterkarten, Einblenden
   20.08.2026

   Gehoert zu js/laden-1.0.js. Drei Teile:

   1. DER BALKEN ganz oben. Fest am Fensterrand und nicht in der
      Kopfzeile: Die Kopfzeile faellt beim Scrollen zusammen und
      aendert dabei ihre Hoehe - ein Balken darin wuerde mitwandern.

      Er wird mit transform: scaleX bewegt und nicht mit width. Der
      Unterschied ist nicht theoretisch: width laesst den Browser bei
      jedem Bild neu rechnen, wo alles liegt; scaleX laeuft auf der
      Grafikkarte. Bei einem Balken, der drei Sekunden kriecht, ist das
      der Unterschied zwischen fluessig und ruckelig auf einem alten
      Telefon.

   2. PLATZHALTERKARTEN in der Form der echten Karten - 4:3-Bild,
      zwei Textzeilen, eine Preiszeile. Sie halten das Layout ruhig:
      Nach dem Tausch springt nichts, weil vorher ungefaehr dieselbe
      Hoehe da stand.

   3. DAS EINBLENDEN der neuen Karten, eine nach der anderen. Der
      Versatz kommt aus --i, das js/laden-1.0.js an die Karte schreibt.

   prefers-reduced-motion ganz unten: Wer im Betriebssystem
   eingestellt hat, dass Bewegung ihn stoert, bekommt dieselbe
   Auskunft ohne Wandern und ohne Einblenden. Das ist keine
   Nettigkeit - bei manchen Menschen loest Bewegung auf dem Schirm
   Schwindel aus.
   ================================================================ */

/* ---------- 1. der Balken ---------- */
body.ea .ea-ladebalken{
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
    background: var(--ea-accent, #3F5AD1);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .22s ease-out, opacity .26s ease;
    opacity: 0; pointer-events: none;
}
body.ea .ea-ladebalken.is-an{ opacity: 1; }
/* Der letzte Zug auf 100 darf schneller sein als das Kriechen davor -
   sonst wartet man auf die Anzeige, obwohl das Ergebnis schon da ist. */
body.ea .ea-ladebalken.is-fertig{ transition: transform .12s ease-out, opacity .3s ease .12s; opacity: 0; }

/* ---------- 2. die Platzhalterkarten ---------- */
body.ea .ea-skelett{ min-width: 0; }
body.ea .ea-skelett__bild{
    aspect-ratio: 4/3; border-radius: 14px; margin-bottom: 11px;
}
body.ea .ea-skelett__z{ height: 11px; border-radius: 6px; margin: 0 2px 7px; }
body.ea .ea-skelett__z--n{ width: 62%; height: 13px; }
body.ea .ea-skelett__z--k{ width: 44%; }
body.ea .ea-skelett__z--p{ width: 30%; margin-bottom: 0; }

/* Ein wandernder Schimmer, kein Blinken. Blinken zieht das Auge immer
   wieder hin; ein Schimmer sagt "es laeuft" und laesst einen in Ruhe. */
body.ea .ea-skelett__bild,
body.ea .ea-skelett__z{
    background: linear-gradient(90deg,
        var(--ea-surface, #F5F4F3) 0%,
        #ECEAE7 40%,
        var(--ea-surface, #F5F4F3) 80%);
    background-size: 300% 100%;
    animation: ea-schimmer 1.25s linear infinite;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes ea-schimmer{
    from{ background-position: 120% 0; }
    to  { background-position: -120% 0; }
}

/* ---------- 3. die neuen Karten kommen nacheinander ---------- */
body.ea .ea-c.ea-kommt{
    animation: ea-karte-kommt .32s ease-out both;
    animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes ea-karte-kommt{
    from{ opacity: 0; transform: translateY(8px); }
    to  { opacity: 1; transform: none; }
}

/* ---------- wer keine Bewegung will ---------- */
@media (prefers-reduced-motion: reduce){
    body.ea .ea-skelett__bild,
    body.ea .ea-skelett__z{ animation: none; background: var(--ea-surface, #F5F4F3); }
    body.ea .ea-c.ea-kommt{ animation: none; }
    body.ea .ea-ladebalken{ transition: opacity .2s ease; }
}

/* ================================================================
   TEIL BD – nie eine leere Seite
   20.08.2026

   Wenn eine Suche nichts ergibt, steht jetzt ein kleiner Satz da und
   darunter, was wir sonst haben. Der Satz ist bewusst KLEIN und kein
   Kasten: Es ist keine Fehlermeldung, sondern eine Ueberleitung. Ein
   roter oder grau gerahmter Kasten macht aus "hier ist etwas anderes"
   ein "hier ist etwas schiefgegangen".

   Das versteckte .ea-erg mit data-treffer="0" braucht eine eigene
   Zeile: TEIL AW gibt .ea-erg ein display:grid, und ein author-
   display schlaegt das hidden-Attribut. Ohne diese Regel stuende
   ueber dem Ersatz ein leeres Raster. Derselbe Stolperstein wie in
   TEIL AR bei der Suchklappe - inzwischen der dritte Fall, also
   gehoert er in die Liste der Dinge, an die man denkt.
   ================================================================ */

body.ea .ea-erg[hidden]{ display: none; }

body.ea .ea-nix{
    margin: 0 0 22px; font-size: 15px; line-height: 1.6;
    color: var(--ea-muted, #75777A); max-width: 78ch;
}
body.ea .ea-nix b{
    color: var(--ea-ink, #1E1E1C); font-weight: 600;
}


/* ================================================================
   TEIL BE – der Kopf am Handy: Zeichen, Suchpille, Leistungen,
             und eine feste Leiste unten
   21.08.2026

   ANLASS: „Dieses Logo oben, dann Menue und so weiter bitte das
   komplett wegmachen" – mit dem Bild von Airbnb daneben.

   Vorher stand am Handy oben: drei Striche, der Schriftzug EVENT ABC,
   darunter die Ueberschrift, darunter ein Satz mit der Anbieterzahl,
   darunter erst die Suche. Fuenf Zeilen, bevor irgendetwas zu sehen
   war, wofuer man gekommen ist. Auf 390 x 844 Pixeln war das erste
   Foto nach 470 Pixeln – mehr als die halbe Hoehe des Schirms fuer
   den Kopf.

   Jetzt: ein kleines Zeichen, eine Suchpille daneben, darunter die
   Leistungen zum Wischen. Alles Uebrige – Merkliste, Anmelden – steht
   unten in einer festen Leiste, dort wo der Daumen ist.

   NUR AM HANDY und NUR auf Startseite und Ergebnisliste. Am Rechner
   ist Platz genug, und im Profil klebt unten schon die Kontaktleiste.

   Die Klasse dafuer heisst ea-header--handy und wird in header.tpl
   gesetzt; der body traegt zusaetzlich ea-hb (Platz fuer die Leiste).

   ---- Zur Schreibweise der Regeln ----

   Viele Regeln hier stehen doppelt geklasst:

       .ea-header--handy.ea-header--suche

   Das ist kein Versehen. TEIL AZ und TEIL AQ setzen dieselben
   Eigenschaften mit zwei Klassen am Kopf (.ea-header--zu.is-klein).
   Bei gleichem Gewicht gewinnt die spaetere Regel – aber nur bei
   GLEICHEM Gewicht. Mit nur einer Klasse waere die Regel hier
   leichter und wuerde verlieren, obwohl sie weiter unten steht. Wer
   eine dieser Zeilen kuerzt, macht die alte Gestaltung wieder
   lebendig.
   ================================================================ */

/* Am Rechner gibt es das alles nicht. Basis: aus. */
body.ea .ea-marke,
body.ea .ea-lreihe,
body.ea .ea-fleiste{ display: none; }


@media (max-width: 767.98px){

/* ---------------- 1. die obere Zeile ---------------- */

/* Weg: die drei Striche, der Schriftzug, die Symbolreihe rechts.
   Die drei Striche fuehrten ins Klappmenue - dessen Punkte stehen
   jetzt unten in der Leiste oder auf der Seite selbst. Die Symbole
   rechts (Herz, Konto, Name) sind unten besser aufgehoben: oben
   rechts ist am Handy die Ecke, an die der Daumen am schlechtesten
   kommt. */
body.ea .ea-header--handy .ea-burger,
body.ea .ea-header--handy .ea-logo{ display: none; }

/* Die Gruppe rechts (Herz, Foto, Namensknopf) faellt nur dort weg, wo
   eine Leiste UNTEN sie auffaengt - also auf Startseite und
   Ergebnisliste (body.ea-hb).

   Auf der Anbieterseite gibt es diese Leiste nicht: dort klebt unten
   die Kontaktleiste. Naehme man die Gruppe dort auch weg, kaeme man
   von einem Profil aus nicht mehr zu "Anmelden" oder "Mein Bereich" -
   und das Burger-Menue ist ja ebenfalls weg. Ein Weg weniger ist in
   Ordnung; kein Weg ist es nicht. */
body.ea.ea-hb .ea-header--handy .ea-header__right{ display: none; }

/* Und wo sie bleibt, darf sie nur so viel nehmen wie noetig. Das
   Herz ist am Handy ohnehin ausgeblendet (TEIL AZ) und steht auf der
   Anbieterseite direkt neben der Brotkrume. */
body.ea .ea-header--handy .ea-header__right{
    margin-left: 0; gap: 8px; flex: 0 0 auto;
}
body.ea .ea-header--handy .ea-dlbtn{ display: none; }

/* NACHTRAG vom 21.08.2026, dritte Fassung: Es steht wieder NICHTS
   oben rechts - auch nicht auf der Anbieterseite.

   Der Zwischenschritt war ein Menueknopf dort. Der ist weg, weil die
   Anbieterseite jetzt ebenfalls die Leiste unten hat: Merkliste und
   "Mein Bereich" (angemeldet mit dem eigenen Foto) stehen dort, wo
   der Daumen ohnehin ist. Ein zweiter Weg oben rechts waere derselbe
   Weg an der unbequemsten Stelle des Schirms.

   Damit ist auch das Klappmenue (offcanvas) auf allen drei Seiten
   nicht mehr erreichbar - so gewollt. Auf den uebrigen Seiten steht
   der Burger unveraendert da; die Vorlage dafuer bleibt.

   Die Regel oben (body.ea.ea-hb ... .ea-header__right) erledigt das
   von selbst, weil ea-hb jetzt auch auf der Anbieterseite steht. */

/* Das Zeichen. 32 px, damit es neben der 46 px hohen Pille steht,
   ohne sie zu ueberragen. Der Radius von 8 px ist derselbe Anteil wie
   in der Datei selbst (68 von 512 = 13,3 %) - so sieht es aus wie das
   Symbol auf dem Startbildschirm und nicht wie ein zweites Bild. */
body.ea .ea-header--handy .ea-marke{
    display: block; flex: 0 0 32px; width: 32px; height: 32px; line-height: 0;
    overflow: hidden; border-radius: 8px;
}
body.ea .ea-header--handy .ea-marke img{
    width: auto; max-width: none; height: 32px; display: block;
    transform: translateX(-56.56px);
}

/* Eine Zeile, kein Umbruch: Es stehen nur noch zwei Dinge darin. */
body.ea .ea-header--handy.ea-header--suche .ea-header__in{
    flex-wrap: nowrap; gap: 10px;
    height: auto; min-height: 0;
    padding: 9px 16px 9px; align-items: center;
}

/* Die Pille ist am Handy nicht mehr der zusammengefallene Zustand,
   sondern der NORMALE. Sie ist immer da und nimmt die ganze Breite
   neben dem Zeichen.

   Das ist der Kern des Umbaus: Vorher war die grosse Leiste der
   Normalzustand und die Pille die Ausnahme beim Scrollen. Am Handy
   ist es umgekehrt - die grosse Leiste mit ihren Klappen ist dort ein
   eigenes Blatt, das man aufruft, und kein Dauerzustand. */
body.ea .ea-header--handy.ea-header--suche .ea-slmini{
    display: inline-flex; order: 0;
    flex: 1 1 auto; min-width: 0; margin: 0;
    height: 46px; padding-left: 4px;
}
body.ea .ea-header--handy.ea-header--suche .ea-slmini__t{
    font-size: 14.5px; padding: 0 12px;
}

/* Aufgeklappt tritt die Pille ab und die grosse Leiste kommt. */
body.ea .ea-header--handy.is-auf .ea-slmini{ display: none; }

/* Die grosse Leiste: zu, solange nicht aufgeklappt.
   Dieselben Werte wie bei is-klein (TEIL AM) - hier aber ohne
   Bedingung an den Scrollstand. */
body.ea .ea-header--handy.ea-header--suche .ea-kopf__suche{
    max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;
    overflow: hidden; pointer-events: none;
}
body.ea .ea-header--handy.is-auf .ea-kopf__suche{
    max-height: 560px; opacity: 1; padding-top: 8px; padding-bottom: 16px;
    overflow: visible; pointer-events: auto;
}

/* ---------------- 2. Ueberschrift und Satz ---------------- */

/* „Dienstleister fuer jeden Anlass · 114 Anbieter · kostenlos …" -
   drei Zeilen, die am Handy oben nichts mehr zu suchen haben.

   Sie werden NICHT geloescht und auch nicht auf display:none gesetzt,
   sondern weggeschnitten: Die Ueberschrift ist auf der Startseite die
   h1. Sie bleibt im Text der Seite, Vorleseprogramme lesen sie, und
   Google findet sie - sie wird nur nicht gemalt. Eine Seite ohne h1
   waere ein Ruecktritt, den niemand sieht und der trotzdem zaehlt.

   display:block muss ausdruecklich dastehen: TEIL AN setzt bei
   is-klein ein display:none, und display kommt aus der frueheren
   Regel weiter, wenn die spaetere es nicht selbst setzt. */
body.ea .ea-header--handy.ea-header--suche .ea-kopf__satz{
    display: block;
    position: absolute; width: 1px; height: 1px; max-height: none;
    padding: 0; margin: -1px; border: 0; opacity: 1;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

/* Beim Aufklappen kommt der Satz zurueck - dann ist Platz dafuer, und
   ueber einer offenen Suche gehoert die Ueberschrift hin (das war
   Dein Punkt aus Fassung 53). */
body.ea .ea-header--handy.is-auf .ea-kopf__satz{
    position: static; width: auto; height: auto; max-height: 140px;
    padding: 4px 0 0; margin: 0; clip: auto; clip-path: none;
    white-space: normal; overflow: visible; pointer-events: auto;
    order: 5; flex: 1 0 100%;
}
body.ea .ea-header--handy.is-auf .ea-header__in{ flex-wrap: wrap; }

/* ---------------- 3. die Reihe der Leistungen ---------------- */

/* Wie die Reihe bei Airbnb: waagerecht zu wischen, die gewaehlte
   gefuellt. Sie liegt AUSSERHALB von .ea-header__in, damit sie bis an
   beide Raender laufen kann - eine Reihe zum Wischen, die vor dem
   Rand aufhoert, sieht aus, als waere sie zu Ende. */
body.ea .ea-header--handy .ea-lreihe{
    display: block;
    border-top: 1px solid var(--ea-kopf-linie, #EBE6E1);
}
body.ea .ea-header--handy.is-auf .ea-lreihe{ display: none; }

/* Und die Filterzeile ebenso, solange gesucht wird. Die Klappe liegt
   ueber der Seite; rechts neben ihr blitzte sonst das Ende der
   Filterzeile hervor ("Nur 5,0" halb angeschnitten) - ein Rest von
   etwas, das gerade niemanden interessiert. Die Felder bleiben im
   Quelltext, js/filter-1.40.js liest sie weiter. */
body.ea .ea-header--handy.is-auf .ea-kopf__filter{ display: none; }

body.ea .ea-lreihe__in{
    display: flex; gap: 8px; align-items: center;
    padding: 9px 16px 10px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body.ea .ea-lreihe__in::-webkit-scrollbar{ display: none; }

body.ea .ea-lreihe__c{
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    height: 34px; padding: 0 14px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 100px;
    background: #fff;
    font-size: 13.5px; font-weight: 600; line-height: 1;
    color: var(--ea-ink-2, #4A4C4F); text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
body.ea .ea-lreihe__c:hover{ color: var(--ea-ink, #1E1E1C); }

/* Die gewaehlte ist gefuellt, nicht nur umrandet. Eine Umrandung
   allein ist bei zwoelf Knoepfen nebeneinander zu leise - man findet
   nicht wieder, wo man ist. */
body.ea .ea-lreihe__c.is-an{
    background: var(--ea-ink, #1E1E1C); border-color: var(--ea-ink, #1E1E1C);
    color: #fff;
}

/* Auf der Ergebnisliste macht die Reihe die Leistung. Dann waere die
   Klappe „Leistung" im Filter darunter dieselbe Auswahl ein zweites
   Mal - und zwei Bedienungen fuer dieselbe Sache laufen frueher oder
   spaeter auseinander.

   Das Feld wird nur VERSTECKT, nicht entfernt: js/filter-1.40.js
   liest und schreibt weiter #filter-subcategory. Die Reihe setzt es,
   das Skript liest es - eine Wahrheit, zwei Anzeigen. */
body.ea .ea-header--handy .ea-fz__f--leistung{ display: none; }


/* ---------------- 4. die feste Leiste unten ---------------- */

/* Die drei Wege stehen als GRUPPE in der Mitte, nicht ueber die
   ganze Breite verteilt.

   Geaendert am 21.08.2026 auf Deinen Wunsch. Vorher war es wie im
   Vorbild: flex: 1 1 0 je Punkt, also drei gleich breite Drittel und
   die aeusseren Beschriftungen fast am Bildschirmrand.

   Was dafuer spricht, so wie es jetzt ist: Drei Punkte fuellen eine
   Zeile nicht - verteilt sehen sie aus, als fehlten zwei. Als Gruppe
   sind sie eine Sache und nicht drei einzelne, und alle drei liegen
   dort, wo der Daumen ohnehin ist.

   Was dagegen spricht, und das ist der ehrliche Teil: Verteilt sind
   die Flaechen zum Antippen groesser (je ein Drittel des Schirms
   statt 84 px). Bei drei Punkten faellt das kaum ins Gewicht; bei
   fuenf wuerde ich es anders sehen. */
body.ea .ea-fleiste{
    display: flex; align-items: stretch;
    justify-content: center; gap: 10px;
    /* Feste Hoehe, damit die Zahl bekannt ist: Auf der Anbieterseite
       sitzt die Kontaktleiste genau um diese Hoehe darueber. Ohne sie
       war die Leiste bei 320 px 55 und bei 390 px 56 Pixel hoch - und
       dazwischen blitzte die Seite durch. */
    min-height: 56px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: #fff;
    border-top: 1px solid var(--ea-kopf-linie, #EBE6E1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 10px rgba(23,24,26,.06);
}

/* 66 px: gerade breit genug fuer "Mein Bereich" in einer Zeile
   (gemessen 66 px) und immer noch deutlich ueber den 44 px, die eine
   Flaeche zum Antippen mindestens haben soll.

   Gemessen auf 390 px: Der Block ist 226 px breit, links und rechts
   bleiben je 82 px Luft. Enger geht - bei 60 px und ohne Abstand
   waeren es 184 px und 103 px Rand -, dann stossen "Merkliste" und
   "Anmelden" aber fast aneinander. Diese Werte sind die engste
   Fassung, in der die drei Beschriftungen noch als drei Woerter zu
   lesen sind. */
body.ea .ea-fleiste__p{
    flex: 0 0 auto; min-width: 66px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px;
    border: 0; background: none; text-decoration: none;
    color: var(--ea-muted, #75777A);
    font-size: 10.5px; font-weight: 600; line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
body.ea .ea-fleiste__ic{
    position: relative; width: 26px; height: 26px;
    display: grid; place-items: center;
}
body.ea .ea-fleiste__ic svg{
    width: 23px; height: 23px; display: block;
}
body.ea .ea-fleiste__t{
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Die Stelle, an der man gerade ist, in der Akzentfarbe - dieselbe
   wie im Suchknopf und im gemerkten Herzchen. Kein zweites Blau. */
body.ea .ea-fleiste__p.is-an{ color: var(--ea-accent, #3F5AD1); }

/* Das eigene Foto statt eines Zeichens, sobald jemand angemeldet ist.
   Dieselbe Datei wie oben im Kopf und im Profil. */
body.ea .ea-fleiste__bild{
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; display: block;
    box-shadow: 0 0 0 1.5px var(--ea-line, #E7E2DE);
}

/* Der Zaehler an der Merkliste. Er sitzt am Zeichen und nicht neben
   der Beschriftung: dort waere er in einer 10-px-Zeile nicht mehr zu
   lesen. */
body.ea .ea-fleiste__n{
    position: absolute; top: -2px; right: -6px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 100px; background: var(--ea-accent, #3F5AD1);
    color: #fff; font-size: 10px; font-style: normal; font-weight: 700;
    line-height: 16px; text-align: center;
}
body.ea .ea-fleiste__n.none{ display: none; }

/* Platz, damit die Leiste nichts verdeckt. Ohne diese Zeile steht das
   letzte Element jeder Seite hinter der Leiste - beim Fuss der Seite
   faellt das sofort auf. */
body.ea.ea-hb{
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* Beim Suchen tritt die Leiste ab.

   Die aufgeklappte Suchklappe wird am Handy bis zu 62 % der
   Bildschirmhoehe hoch. Sie steckt in der Kopfzeile (z-index 1030),
   die Leiste liegt darueber (1040) - die letzten Zeilen der Ortsliste
   waeren also verdeckt gewesen.

   Die Leiste tiefer zu legen waere der andere Weg, aber ein
   unsicherer: Dann kann jede Karte mit eigenem z-index sie
   ueberdecken. Sie wegzunehmen ist ehrlicher - wer sucht, sucht, und
   die drei Wege kommen zurueck, sobald die Klappe zu ist. */
body.ea .ea-header--handy.is-auf ~ .ea-fleiste{ display: none; }

/* ---- die Anbieterseite hat ZWEI Leisten unten ----

   .ea-fix ist die Kontaktleiste ("Kostenlos anfragen" und der
   Hoerer). Sie klebte bisher am unteren Rand. Jetzt liegt dort die
   Navigation, also rutscht sie genau um deren Hoehe nach oben.

   56 px ist die Hoehe von .ea-fleiste ohne den Sicherheitsrand des
   Geraets (sie steht dort als min-height, damit die Zahl stimmt); der Sicherheitsrand kommt einmal dazu und nicht zweimal -
   .ea-fleiste bringt ihn selbst mit, .ea-fix bekommt deshalb hier
   wieder ein glattes padding-bottom. Wer eine der beiden Hoehen
   aendert, muss die andere Zeile mitaendern. */
body.ea.ea-hb .ea-fix{
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 10px;
}

/* Platz fuer BEIDE: 56 fuer die Navigation, 69 fuer die
   Kontaktleiste (gemessen, mit Rand). Die Regel weiter oben (ea-hb
   allein) rechnet nur mit einer. */
body.ea.ea-hb.ea-p-dienstleister{
    padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px));
}

/* Ist das Anfrageblatt offen, treten beide ab - es legt sich ohnehin
   ueber die Seite. Fuer .ea-fix macht das TEIL AJ schon. */
body.ea-anfrage-offen .ea-fleiste{ display: none; }

/* Der Cookie-Hinweis klebt unten links und rechts am Rand. Ohne diese
   Zeile liegt er hinter der Leiste - und die Knoepfe "Akzeptieren"
   und "Fortfahren" sind genau die, die er verdeckt.

   Fuer die Startseite gab es das schon einmal (Zeile ~6882, wegen
   eines frueheren festen Balkens). Jetzt gilt es fuer jede Seite mit
   der Leiste, also fuer ea-hb. */
body.ea.ea-hb #accept-cookies-block{
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 1045;
}
body.ea.ea-hb.ea-p-dienstleister #accept-cookies-block{
    bottom: calc(138px + env(safe-area-inset-bottom, 0px));
}

/* ---------------- 5. ohne JavaScript ---------------- */

/* Die Pille laesst sich ohne Skript nicht aufklappen. Dann steht die
   grosse Leiste da und die Pille bleibt weg - lieber eine hohe
   Kopfzeile als gar keine Suche. Dieselbe Entscheidung wie in
   TEIL AQ, nur fuer den neuen Zustand. */
body.no-js .ea-header--handy.ea-header--suche .ea-kopf__suche{
    max-height: none; opacity: 1; overflow: visible;
    padding-top: 8px; padding-bottom: 16px; pointer-events: auto;
}
body.no-js .ea-header--handy.ea-header--suche .ea-slmini{ display: none !important; }
body.no-js .ea-header--handy.ea-header--suche .ea-kopf__satz{
    position: static; width: auto; height: auto; clip: auto; clip-path: none;
    white-space: normal; margin: 0; order: 5; flex: 1 0 100%;
}
body.no-js .ea-header--handy.ea-header--suche .ea-header__in{ flex-wrap: wrap; }

}


/* Sehr schmale Geraete (320 px, iPhone SE der ersten Reihe):
   Die Beschriftungen unten duerfen kleiner werden, bevor sie
   abgeschnitten werden. */
@media (max-width: 359.98px){
    body.ea .ea-fleiste__t{ font-size: 9.5px; }

    /* Fuer die Leiste unten braucht es hier nichts mehr: Der Block
       ist 226 px breit und passt auch auf 320 px. (Bis Fassung 70
       stand hier eine Sonderregel, weil er mit den weiteren
       Abstaenden 336 px breit war und links herausragte.) */

    body.ea .ea-header--handy .ea-marke{ width: 28px; height: 28px; flex-basis: 28px; border-radius: 7px; }
    body.ea .ea-header--handy .ea-marke img{ width: auto; max-width: none; height: 28px; transform: translateX(-49.49px); }
    body.ea .ea-lreihe__c{ height: 32px; padding: 0 12px; font-size: 13px; }
}


/* ================================================================
   Nachtrag zu TEIL BE – ein Fehler, der beim Messen auffiel
   21.08.2026

   Die Filterzeile in der Kopfzeile steht mittig (TEIL AU, Nachtrag
   "Mittig statt auseinandergezogen"). Am Rechner ist das richtig -
   dort passt sie in eine Zeile.

   Unter 900 px ist sie aber ein Rollbereich (flex-wrap: nowrap,
   overflow-x: auto). Und mittig heisst in einem Rollbereich: Was
   nicht hineinpasst, wandert zur HAELFTE nach links aus dem Bild -
   und dorthin kommt man nicht mehr, weil scrollLeft schon 0 ist.

   Gemessen auf 390 px: Das erste Feld begann bei -82 px; von "Ganz
   Deutschland" war "tschland" zu lesen, und kein Wischen holte den
   Rest zurueck.

   Das war vor diesem Umbau genauso - es ist nur nie jemandem
   aufgefallen, weil dort noch ein weiteres Feld davorstand und alles
   gleich falsch aussah. Deshalb steht der Wert hier bei 900 px und
   nicht bei 768: Der Fehler haengt am Rollbereich, nicht am neuen
   Kopf.
   ================================================================ */
@media (max-width: 900px){
    body.ea .ea-kopf__filter .ea-fz{ justify-content: flex-start; }
}


/* ================================================================
   TEIL BF – zwei Karten je Reihe am Handy
   21.08.2026

   Bis jetzt stand am Handy EINE Karte je Reihe: 354 px breit, 348 px
   hoch. Auf einem 390er Schirm waren damit zwei Karten zu sehen, und
   man konnte nie zwei Anbieter nebeneinander halten - man musste sich
   den vorigen merken.

   Jetzt zwei: 171 px breit, 195 px hoch, sechs sichtbar. Auf der
   Startseite passen dadurch zwei ganze Reihen uebereinander
   (Fotograf UND Trauredner), ohne zu scrollen.

   DER PREIS, damit er dasteht und nicht spaeter jemand rueckwaerts
   raten muss: Das Foto ist halb so breit. Bei einem Fotografen ist
   das Foto praktisch das ganze Angebot. Airbnb zeigt am Handy
   bewusst EINE Unterkunft je Reihe, obwohl der Platz da waere;
   Etsy und Pinterest zeigen zwei, weil dort das einzelne Bild
   weniger traegt. Wir liegen dazwischen und haben uns fuer zwei
   entschieden - fuer das Vergleichen.

   DREI STELLEN, nicht eine:

     1. Die Ergebnisliste            .ea-erg
     2. Die Reihen auf der Startseite .ea-rh__streifen (zum Wischen)
     3. Die Premium-Reihe            .ea-spon__reihe   (zum Wischen)

   Sie sehen gleich aus, werden aber verschieden gebaut: Die Liste
   ist ein Raster mit festen Spalten, die beiden Reihen sind
   Rollbereiche mit grid-auto-columns. Wer eine aendert, muss an die
   anderen denken - sonst stehen auf einer Seite zwei Groessen
   nebeneinander.

   ACHTUNG, das hat mich beim Ausprobieren erwischt: Die Reihen auf
   der Startseite tragen BEIDE Klassen (class="ea-erg ea-rh__streifen").
   Gibt man .ea-erg zwei feste Spalten, bekommen sie die zusaetzlich
   zu ihren Wisch-Spalten - die Karten werden dann 80 px schmal
   (gemessen). Deshalb steht unten :not(.ea-rh__streifen).
   ================================================================ */

/* ---------- 1. die Ergebnisliste ---------- */

/* Ab 620 px macht das TEIL AB schon selbst. Diese Regel gilt nur
   darunter, wo bisher eine Spalte stand. */
@media (max-width: 619.98px){
    body.ea .ea-erg:not(.ea-rh__streifen){
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 22px 12px;
    }
}

/* ---------- 2. die Reihen auf der Startseite ---------- */

/* Dort steuert eine einzige Zahl, wie viele nebeneinander stehen
   (TEIL AG). Ab 560 px sind es ohnehin zwei - hier also nur der
   Bereich darunter. */
@media (max-width: 559.98px){
    body.ea .ea-rh__streifen{ --ea-n: 2; }
}

/* ---------- 3. die Premium-Reihe ---------- */

/* Sie stand am Handy auf 76 % je Karte - eine grosse Karte zum
   Wischen. Neben einer Liste mit zwei Karten je Reihe waere das ein
   Bruch: dieselbe Sache, zwei Groessen, direkt uebereinander.
   Jetzt zwei sichtbar, weitergewischt wird weiterhin. */
@media (max-width: 767.98px){
    body.ea .ea-spon__reihe{ grid-auto-columns: calc((100% - 12px) / 2); }
}

/* ---------- die Karte selbst wird enger ---------- */

/* Alles hier ist gemessen und nicht geschaetzt: Bei 171 px Breite
   ragte mit den bisherigen Groessen der Name in die Auslassungspunkte
   und Bewertung und Preis passten nicht mehr in eine Zeile.

   DREI Behaelter stehen davor: die Ergebnisliste (.ea-erg), die
   Premium-Reihe (.ea-spon__reihe) und die Merkliste (.ea-cards2).

   Ohne die Premium-Reihe haetten die bezahlten Plaetze groessere
   Schrift als alle anderen - ein Vorteil, den niemand gekauft hat.
   Ohne die Merkliste stuende dieselbe Karte auf zwei Seiten in zwei
   Groessen; das faellt auf, sobald man von der Liste auf die
   Merkliste wechselt (nachgetragen am 21.08.2026). */
@media (max-width: 619.98px){

    body.ea .ea-erg .ea-c__mw,
    body.ea .ea-cards2 .ea-c__mw,
    body.ea .ea-spon__reihe .ea-c__mw{ border-radius: 12px; }

    /* 24 statt 44 px. Der weisse Ring wird von 3 auf 2 px duenner -
       bei 24 px frisst ein 3-px-Ring ein Viertel des Bildes. */
    body.ea .ea-erg .ea-c__av,
    body.ea .ea-cards2 .ea-c__av,
    body.ea .ea-spon__reihe .ea-c__av{
        width: 24px; height: 24px; border-width: 2px; left: 7px; bottom: 7px;
    }

    /* Die Merkliste braucht eine eigene, schwerere Zeile.

       Dort haengt das Portrait im Bild-Link (.ea-c__m img.ea-c__av),
       in der Ergebnisliste dagegen in der Huelle daneben. Fuer die
       Merkliste greift deshalb eine alte Regel aus TEIL K mit drei
       Klassen UND zwei Elementnamen - die ist schwerer als meine drei
       Klassen und hat gewonnen. Ergebnis: ueberall 24 px, in der
       Merkliste weiter 46 (gemessen).

       Elementnamen im Weg mitzuschreiben ist haesslich, aber ehrlich:
       Die alte Regel steht seit Monaten da und wird von anderen
       Seiten gebraucht. */
    body.ea .ea-cards2 .ea-c__m img.ea-c__av{
        width: 24px; height: 24px; border-width: 2px; left: 7px; bottom: 7px;
    }

    body.ea .ea-erg .ea-c__fav,
    body.ea .ea-cards2 .ea-c__fav,
    body.ea .ea-spon__reihe .ea-c__fav{ top: 6px; right: 6px; width: 27px; height: 27px; }
    body.ea .ea-erg .ea-c__fav svg,
    body.ea .ea-cards2 .ea-c__fav svg,
    body.ea .ea-spon__reihe .ea-c__fav svg{ width: 15px; height: 15px; }

    body.ea .ea-erg .ea-c__b,
    body.ea .ea-cards2 .ea-c__b,
    body.ea .ea-spon__reihe .ea-c__b{ padding: 8px 1px 0; }

    body.ea .ea-erg .ea-c__n,
    body.ea .ea-cards2 .ea-c__n,
    body.ea .ea-spon__reihe .ea-c__n{ font-size: 13.5px; }

    body.ea .ea-erg .ea-c__k,
    body.ea .ea-cards2 .ea-c__k,
    body.ea .ea-spon__reihe .ea-c__k{ font-size: 12px; margin-top: 1px; }

    /* Bewertung und Preis bleiben in EINER Zeile, links und rechts.
       Gemessen passen sie: 103 px Inhalt in 169 px Zeile, beim
       teuersten Fall ("auf Anfrage") 121 px. white-space verhindert,
       dass "ab 600 EUR" zwischen Zahl und Zeichen umbricht. */
    body.ea .ea-erg .ea-c__z,
    body.ea .ea-cards2 .ea-c__z,
    body.ea .ea-spon__reihe .ea-c__z{
        font-size: 12px; margin-top: 4px; gap: 2px 6px; flex-wrap: wrap;
    }
    body.ea .ea-erg .ea-c__st,
    body.ea .ea-erg .ea-c__p,
    body.ea .ea-cards2 .ea-c__st,
    body.ea .ea-cards2 .ea-c__p,
    body.ea .ea-spon__reihe .ea-c__st,
    body.ea .ea-spon__reihe .ea-c__p{ white-space: nowrap; }

    /* flex-wrap ist die Notbremse fuer sehr schmale Geraete. Auf
       320 px ist die Karte nur 136 px breit; dort passen
       "* 5.0 (39)" und "auf Anfrage" nicht mehr nebeneinander. Ohne
       diese Zeile ragte der Preis 19 px aus dem Bildschirm und die
       ganze Seite liess sich waagerecht schieben (gemessen). Jetzt
       rutscht er in eine zweite Zeile - eine Zeile mehr ist besser
       als eine Seite, die wackelt. Ab 360 px passt wieder alles in
       eine Zeile. */

    /* Das Geprueft-Haekchen steht neben dem Namen und nimmt ihm
       Platz. 16 statt 18 px und ein engerer Abstand geben dem Namen
       9 px zurueck - das ist bei 13,5 px Schrift ungefaehr ein
       Buchstabe mehr, bevor die Auslassungspunkte kommen. */
    body.ea .ea-erg .ea-c__nz,
    body.ea .ea-cards2 .ea-c__nz,
    body.ea .ea-spon__reihe .ea-c__nz{ gap: 5px; }
    body.ea .ea-erg .ea-geprueft--klein svg,
    body.ea .ea-cards2 .ea-geprueft--klein svg,
    body.ea .ea-spon__reihe .ea-geprueft--klein svg{
        width: 16px; height: 16px; flex-basis: 16px;
    }

    /* Die Platzhalterkarten beim Laden (TEIL BC) sitzen in demselben
       Raster und muessen dieselbe Ecke haben - sonst springt die
       Rundung im Moment des Austauschs. Die Hoehe rechnet sich von
       selbst, sie steht als aspect-ratio da. */
    body.ea .ea-skelett__bild{ border-radius: 12px; }
}


/* ================================================================
   Nachtrag zu TEIL AS – das Titelbild geht am Handy bis an den Rand
   21.08.2026

   Du hast auf einem Profil am Handy gesagt, der Banner muesse bis an
   den Rand und sehe abgeschnitten aus. Zwei Dinge waren daran schuld.

   1. DIE RUNDEN ECKEN WAREN NIE WEG.

      TEIL AS nimmt sie unter 560 px ausdruecklich zurueck
      (border-radius: 0). Zwanzig Zeilen weiter steht aber ein
      Nachtrag OHNE Medienabfrage:

          body.ea-p-dienstleister .ea-cover img{ border-radius: 10px; }

      Gleiches Gewicht, spaeter im Blatt - der gewinnt, auch am Handy.
      Ein Bild, das ueber die ganze Breite laeuft und an den vier Ecken
      abgerundet ist, sieht genau so aus, wie Du es beschrieben hast:
      als waere es abgeschnitten. Runde Ecken brauchen Rand daneben,
      sonst sind sie nur Loecher.

      Das ist derselbe Fehler wie schon dreimal in diesem Stylesheet:
      eine spaetere Zeile hebt eine Medienabfrage still auf. Gemessen
      und nicht vermutet - bei 390 px stand border-radius: 10px.

   2. DIE GRENZE LAG BEI 560 PX.

      Unter 560 war das Bild randlos, zwischen 560 und 620 bekam es
      18 px Rand und eine Kartenoptik. Genau in diesem Streifen liegen
      grosse Telefone quer und kleine Tablets - und dort sah es aus
      wie auf Deinem Bild: ein Streifen mit Luft links und rechts.

      Die Grenze ist jetzt 767,98 px, dieselbe wie beim neuen Kopf und
      bei der Leiste unten. Eine Grenze fuer das ganze Handy-Layout
      statt drei verschiedene.

   Ab 768 px bleibt alles, wie es war: Karte in der Spalte, 10 px
   Ecke, Rand daneben.
   ================================================================ */

@media (max-width: 767.98px){
    body.ea-p-dienstleister .ea-cover{
        padding: 0; max-width: none; margin: 0;
    }
    /* !important steht hier NICHT ohne Grund und auch nicht aus
       Bequemlichkeit: Die Regel, die es aufhebt, steht weiter oben im
       Blatt und hat dasselbe Gewicht. Wer sie eines Tages loescht,
       darf auch dieses Wort hier loeschen. */
    body.ea-p-dienstleister .ea-cover img{ border-radius: 0 !important; }
}


/* ================================================================
   TEIL BG – die Suche am Handy ist ein Blatt, kein Klappmenue
   21.08.2026

   WAS KAPUTT WAR

   Du hast die Suchpille angetippt, "Fotograf" eingegeben - und die
   Suche ging von selbst wieder zu. Beim Ort dasselbe. Beide Felder
   nacheinander auszufuellen war nicht moeglich.

   Die Ursache ist nicht die Auswahl, sondern die TASTATUR: Wenn sie
   am Handy aufgeht, wird das sichtbare Fenster kleiner, und der
   Browser meldet das als Scrollen. In js/suchleiste-1.7.js stand:

       wer scrollt, will weiterlesen, nicht suchen  ->  zumachen

   Das war fuer den Rechner richtig gedacht und am Handy falsch. Die
   Tastatur hat die Suche zugemacht, nicht Du.

   WAS JETZT DA IST

   Am Handy legt sich die Suche als eigenes Blatt ueber die ganze
   Seite - wie im Vorbild:

     oben     Zeichen links, Schliessknopf (X) rechts
     darunter zwei Karten: die aktive aufgeklappt mit Liste,
              die andere als schmale Zeile mit ihrem Wert
     unten    "Alle loeschen" links, "Suchen" rechts

   Ein Blatt hat kein Daneben. Es geht nur zu, wenn man X drueckt,
   Esc tippt oder sucht. Scrollen macht gar nichts mehr - dafuer
   sorgt das Skript, hier steht nur das Aussehen.

   WARUM display: contents

   Die Liste soll UNTER der Karte stehen, die gerade dran ist, und die
   andere Karte darunter. Im Quelltext liegen aber beide Karten
   zusammen in .ea-sl__bar und die Liste daneben - in dieser
   Reihenfolge waere die Liste immer unter BEIDEN Karten.

   display: contents loest den Behaelter auf: Seine Kinder werden zu
   Kindern des Formulars, und dann laesst sich die Reihenfolge mit
   "order" frei setzen. Ohne das haette es neues Markup gebraucht -
   und damit zwei Fassungen der Suchleiste, die auseinanderlaufen.
   ================================================================ */

/* Am Rechner gibt es beides nicht. */
body.ea .ea-slx,
body.ea .ea-sl__fuss{ display: none; }


@media (max-width: 767.98px){

/* ---------------- 1. das Blatt ---------------- */

body.ea .ea-header--handy.is-auf{
    position: fixed; left: 0; right: 0; top: 0; bottom: 0;
    z-index: 1090; border-bottom: 0;
    background: var(--ea-kopf, #F7F5F3);
    display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Die Seite darunter darf nicht mitscrollen. Ohne diese Zeile
   schiebt sich der Inhalt hinter dem Blatt weg, und beim Schliessen
   steht man an einer anderen Stelle als vorher. */
body.ea-sl-blatt{ overflow: hidden; }

/* ---------------- 2. die obere Zeile ---------------- */

body.ea .ea-header--handy.is-auf .ea-header__in{
    flex: 0 0 auto; flex-wrap: nowrap;
    padding: 10px 16px 6px; min-height: 0; height: auto;
    gap: 12px;
}

/* Der Schliessknopf. Rund und mit Rand wie im Vorbild - ein blosses
   Kreuz ohne Kreis sieht auf einer hellen Flaeche nach Zierat aus und
   wird uebersehen. 40 px: knapp unter der Faustregel von 44, dafuer
   liegt um ihn herum nichts anderes. */
body.ea .ea-header--handy.is-auf .ea-slx{
    display: grid; place-items: center; margin-left: auto;
    flex: 0 0 40px; width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 50%;
    background: #fff; color: var(--ea-ink, #1E1E1C); cursor: pointer;
}
body.ea .ea-header--handy.is-auf .ea-slx svg{ width: 18px; height: 18px; display: block; }
body.ea .ea-header--handy.is-auf .ea-slx:active{ background: var(--ea-surface, #F5F4F3); }

/* Im Blatt ist die Ueberschrift eine eigene Zeile unter Zeichen und
   X - und ohne den Satz mit der Anbieterzahl darunter. Der gehoert
   auf die Seite, nicht ins Suchblatt. */
body.ea .ea-header--handy.is-auf .ea-kopf__satz{ order: 5; flex: 1 0 100%; padding: 6px 0 0; }
body.ea .ea-header--handy.is-auf .ea-kopf__satz p{ display: none; }
body.ea .ea-header--handy.is-auf .ea-header__in{ flex-wrap: wrap; }

/* ---------------- 3. die Karten ---------------- */

body.ea .ea-header--handy.is-auf .ea-kopf__suche{
    flex: 1 1 auto; display: block;
    padding: 6px 12px 16px; max-height: none; overflow: visible;
    opacity: 1; pointer-events: auto;
}

body.ea .ea-header--handy.is-auf .ea-sl{
    display: flex; flex-direction: column; gap: 10px;
    background: none; box-shadow: none; border: 0; padding: 0;
    border-radius: 0;
    /* mindestens so hoch wie der Rest des Blatts - sonst haengt der
       Fuss direkt unter der letzten Karte in der Luft. 150 px sind
       Kopfzeile und Ueberschrift darueber. */
    min-height: calc(100vh - 150px);
}

/* Der Behaelter loest sich auf, siehe oben. */
body.ea .ea-header--handy.is-auf .ea-sl__bar{ display: contents; }
body.ea .ea-header--handy.is-auf .ea-sl__fi{ display: contents; }
body.ea .ea-header--handy.is-auf .ea-sl__tr{ display: none; }
/* Der runde Knopf in der Leiste - unten steht ein grosser. */
body.ea .ea-header--handy.is-auf .ea-sl__go{ display: none; }

/* Reihenfolge: die aktive Karte, dann die Liste, dann die andere. */
body.ea .ea-header--handy.is-auf .ea-sl__f[data-panel="was"]{ order: 1; }
body.ea .ea-header--handy.is-auf .ea-sl__klappe{ order: 2; }
body.ea .ea-header--handy.is-auf .ea-sl__f[data-panel="wo"]{ order: 3; }
body.ea .ea-header--handy.is-auf .ea-sl.is-an-wo .ea-sl__f[data-panel="wo"]{ order: 2; }
body.ea .ea-header--handy.is-auf .ea-sl.is-an-wo .ea-sl__klappe{ order: 3; }

/* flex-direction: row muss ausdruecklich dastehen: In der Leiste am
   Rechner steht die Beschriftung UEBER dem Feld (column), und ohne
   diese Zeile bliebe es dabei - die eingeklappte Karte war dann
   104 statt 53 Pixel hoch, mit der Beschriftung mittig darueber
   (gemessen). */
body.ea .ea-header--handy.is-auf .ea-sl__f{
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    background: #fff; border: 0; border-radius: 16px;
    padding: 15px 18px; margin: 0; min-width: 0;
    box-shadow: 0 2px 10px rgba(23,24,26,.07);
    cursor: pointer;
}
body.ea .ea-header--handy.is-auf .ea-sl__f::before,
body.ea .ea-header--handy.is-auf .ea-sl__f::after{ content: none; }

/* Eingeklappt: "Was" links grau, der Wert rechts. Wie die Zeilen
   "Wann - Zeitraum hinzufuegen" im Vorbild. */
body.ea .ea-header--handy.is-auf .ea-sl__f label{
    position: static; width: auto; height: auto; clip: auto; clip-path: none;
    font-size: 14.5px; font-weight: 600; color: var(--ea-muted, #75777A);
    margin: 0; white-space: nowrap; pointer-events: none;
    letter-spacing: 0; text-transform: none;
}
body.ea .ea-header--handy.is-auf .ea-sl__f input{
    flex: 1 1 auto; min-width: 0; margin-left: auto;
    text-align: right; font-size: 15px; font-weight: 600;
    border: 0; background: none; padding: 0;
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-header--handy.is-auf .ea-sl__f input::placeholder{
    color: var(--ea-ink, #1E1E1C); font-weight: 600; opacity: 1;
}

/* Aufgeklappt: Ueberschrift oben gross, Eingabefeld darunter mit
   Rahmen und Lupe - genau die Anordnung aus Deinem Bild. */
body.ea .ea-header--handy.is-auf .ea-sl__f.is-an{
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 18px 18px 16px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 2px 10px rgba(23,24,26,.07);
}
body.ea .ea-header--handy.is-auf .ea-sl__f.is-an label{
    font-family: var(--ea-serif); font-size: 24px; font-weight: 400;
    color: var(--ea-ink, #1E1E1C); letter-spacing: -.01em;
}
body.ea .ea-header--handy.is-auf .ea-sl__f.is-an input{
    text-align: left; margin-left: 0; font-weight: 500; font-size: 16px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 12px;
    padding: 13px 14px 13px 42px;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375777A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 18px 18px;
}
body.ea .ea-header--handy.is-auf .ea-sl__f.is-an input::placeholder{
    color: var(--ea-muted, #75777A); font-weight: 400;
}

/* ---------------- 4. die Liste ---------------- */

/* Sie haengt optisch an der aktiven Karte: oben keine Ecke, kein
   Abstand dazwischen. Zwei getrennte Kaesten waeren zwei Sachen; hier
   ist es eine. */
body.ea .ea-header--handy.is-auf .ea-sl__klappe{
    position: static; margin: -10px 0 0; width: auto;
    background: #fff; border: 0; border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 10px rgba(23,24,26,.07);
    padding: 0 8px 8px; overflow: visible; max-height: none;
}
body.ea .ea-header--handy.is-auf .ea-sl__zwei{ display: block; }
body.ea .ea-header--handy.is-auf .ea-sl__sp{ padding: 0; border: 0; }
body.ea .ea-header--handy.is-auf .ea-sl__sp--r{ border-top: 1px solid var(--ea-line-2, #F0ECE8); margin-top: 6px; padding-top: 6px; }

/* ---------------- 5. der Fuss ---------------- */

/* order: 9 - die Karten und die Liste tragen 1 bis 3, und wer keine
   Zahl hat, faengt bei 0 an. Ohne diese Zeile stand der Fuss GANZ
   OBEN, ueber der ersten Karte (gemessen: bei 121 px statt 790). */
body.ea .ea-header--handy.is-auf .ea-sl__fuss{
    order: 9;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: auto;
    padding: 12px 4px calc(10px + env(safe-area-inset-bottom, 0px));

    /* Klebt am unteren Rand des Blatts, auch wenn die Liste laenger
       ist als der Schirm. "Suchen" ist der Weg heraus - der darf nicht
       erst nach dreissig Staedten kommen. margin-top: auto schiebt ihn
       nach unten, wenn oben Platz uebrig ist; sticky haelt ihn dort,
       wenn nicht. */
    position: sticky; bottom: 0;
    background: var(--ea-kopf, #F7F5F3);
}
body.ea .ea-sl__leeren{
    border: 0; background: none; padding: 10px 4px;
    font: inherit; font-size: 15px; font-weight: 600;
    color: var(--ea-ink, #1E1E1C);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
body.ea .ea-sl__such{
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; border-radius: 12px; cursor: pointer;
    padding: 0 24px; height: 50px;
    background: var(--ea-accent, #3F5AD1); color: #fff;
    font: inherit; font-size: 16px; font-weight: 700;
}
body.ea .ea-sl__such svg{
    width: 18px; height: 18px; fill: none; stroke: #fff;
    stroke-width: 2.4; stroke-linecap: round;
}
body.ea .ea-sl__such:active{ filter: brightness(.94); }

/* ---------------- 6. was im Blatt NICHT mitkommt ---------------- */

/* Die Reihe der Leistungen, die Filterzeile und die Leiste unten
   liegen sonst ueber oder unter dem Blatt. Sie sind schon durch die
   Regeln in TEIL BE weg; hier steht es nur noch einmal fuer die
   Leiste unten, weil das Blatt jetzt hoeher liegt als sie. */
body.ea-sl-blatt .ea-fleiste,
body.ea-sl-blatt .ea-fix{ display: none; }

}


/* ================================================================
   Nachtrag zu TEIL BG – drei Dinge aus dem Video
   21.08.2026

   Du hast eine Bildschirmaufnahme geschickt. Darin waren drei Sachen
   zu sehen, die vorher niemand gemessen hatte:

   1. DIE FELDER WUCHSEN INS LEERE.

      Auf dem Video werden die weissen Karten mitten im Tippen
      riesig - ein hohes leeres Feld mit der Eingabe oben drin. Das
      sah aus wie ein Fehler, und es war einer.

      Grund: .ea-sl__f traegt aus der Leiste am Rechner ein
      flex: 1 1 0. Dort ist die Leiste WAAGERECHT, und die Zahl
      heisst "teilt euch die Breite". Im Blatt steht sie SENKRECHT -
      und dieselbe Zahl heisst dort "teilt euch die Hoehe". Sobald
      die Liste kuerzer wurde, war Hoehe uebrig, und die Karten haben
      sie unter sich aufgeteilt.

      Eine Zeile, die in zwei Richtungen etwas Verschiedenes bedeutet:
      genau die Sorte Fehler, die man nur im Betrieb sieht.

   2. DIE LISTE STAND SCHON BEIM AUFMACHEN DA.

      Alle Leistungen von Akrobatik bis Zauberer, sofort, ueber die
      ganze Hoehe - und das Feld "Wo" darunter war weg. Man sah nicht
      mehr, was man ueberhaupt ausfuellt. Die Liste kommt jetzt erst
      ab dem dritten Zeichen (js/suchleiste-1.9.js).

      NUR AM HANDY: Am Rechner haengt die Liste als Klappe unter der
      Leiste und verdeckt kein Feld - dort ist die sofortige Liste
      eine Hilfe und kein Hindernis.

   3. ALLES SPRANG.

      Kein Uebergang, nirgends. Jetzt: Das Blatt kommt herein, die
      Liste faltet sich auf, die Karten wechseln weich zwischen
      gross und klein. Kurz gehalten - 160 bis 220 ms; alles
      darueber fuehlt sich langsam an statt ruhig.

      Wer im Betriebssystem "Bewegung reduzieren" eingeschaltet hat,
      bekommt keine davon. Das ist keine Feinheit: Fuer Menschen mit
      Schwindel sind bewegte Flaechen ein koerperliches Problem.
   ================================================================ */

@media (max-width: 767.98px){

/* ---- 1. die Karten wachsen nicht mehr ----

   Die zweite und dritte Zeile sehen ueberfluessig aus, sind es aber
   nicht: TEIL AR setzt fuer das Feld "Wo" ein eigenes

       body.ea .ea-sl.is-offen .ea-sl__f[data-panel="wo"]{ flex: 1 0 100% }

   Das sind fuenf Klassen, meine erste Zeile hat vier - die verliert,
   egal wie weit unten sie steht. Gemessen: "Was" wurde 136 px hoch
   und richtig, "Wo" 466 px. Wer hier kuerzt, holt das zurueck. */
body.ea .ea-header--handy.is-auf .ea-sl__f,
body.ea .ea-header--handy.is-auf .ea-sl__f[data-panel="was"],
body.ea .ea-header--handy.is-auf .ea-sl__f[data-panel="wo"]{ flex: 0 0 auto; }

/* Dasselbe Spiel eine Ebene tiefer: Die Huelle um Beschriftung und
   Feld bei "Wo" wird von TEIL AR auf display:flex gesetzt (sechs
   Klassen). Sie muss aber verschwinden, damit Beschriftung und Feld
   direkte Kinder der Karte werden - sonst sitzen sie im eigenen
   Kasten und die Zeile "Wo ....... Ort oder Postleitzahl" bricht. */
body.ea .ea-header--handy.is-auf .ea-sl.is-offen .ea-sl__f[data-panel="wo"] .ea-sl__fi{
    display: contents;
}

/* Ohne Liste ist die Karte unten wieder rund - sonst haengt eine
   abgeschnittene Kante in der Luft. Die Klasse setzt das Skript. */
body.ea .ea-header--handy.is-auf .ea-sl:not(.is-liste) .ea-sl__f.is-an{
    border-radius: 16px;
}

/* ---- 3. die Bewegung ---- */

/* Nicht von 0, sondern von 0,4.

   Bei 0 ist das Blatt im ersten Moment durchsichtig - man sieht die
   Seite dahinter DURCH die Karten, und das liest sich als Fehler, so
   wie es Dir aufgefallen ist. Bei 0,4 ist es von der ersten Bildfolge
   an deckend genug, dass man Karten sieht und keine Geisterbilder,
   und die Bewegung bleibt trotzdem weich. Das Gleiten von unten macht
   ohnehin den groesseren Teil des Eindrucks. */
@keyframes ea-blatt-rein{
    from{ opacity: .4; transform: translateY(10px); }
    to{   opacity: 1; transform: translateY(0); }
}
@keyframes ea-liste-rein{
    from{ opacity: 0; transform: translateY(-6px); }
    to{   opacity: 1; transform: translateY(0); }
}

body.ea .ea-header--handy.is-auf{
    animation: ea-blatt-rein .22s cubic-bezier(.22,.61,.36,1) both;
}

/* Die Liste faellt jedes Mal neu herein, wenn sie sichtbar wird -
   beim Wechsel von "Was" auf "Wo" und beim dritten Zeichen. Das
   geht von selbst: hidden bedeutet display:none, und was neu
   gezeichnet wird, faengt seine Bewegung von vorn an. */
body.ea .ea-header--handy.is-auf .ea-sl__klappe:not([hidden]){
    animation: ea-liste-rein .18s cubic-bezier(.22,.61,.36,1) both;
}

/* Die Karten: was sich weich aendern KANN, aendert sich weich.
   Hoehe steht bewusst nicht dabei - eine Hoehe von "auto" auf einen
   Wert zu bringen kostet entweder eine feste Zahl (die frueher oder
   spaeter falsch ist) oder ein Nachmessen bei jedem Tastendruck.
   Beides waere teurer als der kleine Sprung, der uebrig bleibt. */
body.ea .ea-header--handy.is-auf .ea-sl__f{
    transition: padding .18s ease, border-radius .18s ease, box-shadow .18s ease;
}
body.ea .ea-header--handy.is-auf .ea-sl__f label,
body.ea .ea-header--handy.is-auf .ea-sl__f input{
    transition: font-size .18s ease, color .18s ease;
}

/* Der Schliessknopf und der Suchknopf geben beim Tippen nach - die
   einzige Rueckmeldung, die ein Finger auf Glas bekommt. */
body.ea .ea-header--handy.is-auf .ea-slx,
body.ea .ea-sl__such{ transition: transform .12s ease, filter .12s ease; }
body.ea .ea-header--handy.is-auf .ea-slx:active,
body.ea .ea-sl__such:active{ transform: scale(.96); }

@media (prefers-reduced-motion: reduce){
    body.ea .ea-header--handy.is-auf,
    body.ea .ea-header--handy.is-auf .ea-sl__klappe:not([hidden]){ animation: none; }
    body.ea .ea-header--handy.is-auf .ea-sl__f,
    body.ea .ea-header--handy.is-auf .ea-sl__f label,
    body.ea .ea-header--handy.is-auf .ea-sl__f input,
    body.ea .ea-header--handy.is-auf .ea-slx,
    body.ea .ea-sl__such{ transition: none; }
    body.ea .ea-header--handy.is-auf .ea-slx:active,
    body.ea .ea-sl__such:active{ transform: none; }
}

}


/* ================================================================
   TEIL BH – die Reihen zum Wischen lassen sich nicht mehr
             hoch und runter ziehen
   21.08.2026

   WAS DU GEMELDET HAST

   Auf der Startseite liess sich die ERSTE Reihe (Fotograf) mit dem
   Finger hoch und runter schieben - der Inhalt wanderte innerhalb
   der Zeile. Bei Trauredner, Moderation, DJ und Videograf ging das
   nicht, dort nur nach links und rechts. Auf der Ergebnisliste
   dasselbe bei der Premium-Reihe.

   WARUM AUSGERECHNET DIE ERSTE

   Nicht weil sie die erste ist, sondern weil in ihr ein GEPRUEFTER
   Anbieter steht. Nachgestellt und gemessen:

       Reihe mit Geprueft-Zeichen:   scrollHeight 344, clientHeight 201
                                     -> 143 Pixel zum Ziehen
       Reihe ohne:                   344 gibt es nicht, Differenz 0

   Am Geprueft-Zeichen haengt ein Erklaerkasten (.ea-geprueft__box).
   Er ist position:absolute und steht 9 Pixel UNTER dem Zeichen. Er
   ist nicht sichtbar - aber mit visibility:hidden, und das nimmt ihn
   nicht aus dem Aufbau. Er zaehlt also zur Hoehe des Inhalts, obwohl
   ihn niemand sieht.

   Und zwei Zeilen weiter kommt das dazu:

       overflow-x: auto;     (fuer das Wischen nach links und rechts)

   Steht nur die eine Richtung da, macht der Browser aus der anderen
   nicht "sichtbar", sondern ebenfalls "auto". Das ist so vorgesehen -
   zwei verschiedene Richtungen liessen sich nicht sauber malen. Also
   war die Zeile senkrecht scrollbar, sobald irgendetwas 143 Pixel
   ueberstand.

   ZWEI SPERREN STATT EINER

   1. overflow-y: hidden auf allen Reihen zum Wischen. Damit ist die
      Frage grundsaetzlich beantwortet - auch fuer alles, was spaeter
      einmal ueber eine Karte hinausragt.

   2. Der Erklaerkasten kommt in diesen Reihen gar nicht erst vor.
      Sonst haenge er beim Antippen halb abgeschnitten im Bild - er
      ist 264 Pixel breit und braucht Platz nach unten, den es dort
      nicht gibt.

      Was dabei verloren geht: In den Reihen erklaert das Zeichen sich
      nicht mehr selbst. Es traegt aber weiter sein aria-label
      ("Geprueft von Event ABC: Unternehmensangaben wurden
      abgeglichen"), Vorleseprogramme lesen es also, und auf der Anbieterseite
      steht die Erklaerung ausgeschrieben. In der Ergebnisliste
      (.ea-erg) ist nichts geaendert - die ist kein Rollbereich, dort
      funktioniert der Kasten wie bisher.
   ================================================================ */

body.ea .ea-rh__streifen,
body.ea .ea-spon__reihe,
body.ea .ea-lreihe__in,
body.ea .ea-fz{
    overflow-y: hidden;
}

body.ea .ea-rh__streifen .ea-geprueft__box,
body.ea .ea-spon__reihe .ea-geprueft__box{
    display: none;
}


/* ================================================================
   TEIL BI – die Fotoansicht auf weissem Grund
   21.08.2026

   Der Bilderbetrachter (Fancybox 5) kommt von Haus aus fast schwarz:
   rgba(24, 24, 27, 0.98) hinter dem Foto, hellgraue Schrift, weisse
   Zeichen mit Schattenwurf. Auf Deinen Wunsch ist der Grund jetzt
   WEISS - deckend, ohne Durchsicht auf die Seite dahinter.

   Alles Uebrige bleibt: dieselbe Anordnung, dieselben Miniaturen
   unten, dieselbe Bedienung. Es wechseln nur die Farben - und die
   muessen ALLE mitwechseln, sonst steht Weiss auf Weiss.

   Fancybox laesst sich zum Glueck ueber Variablen umstellen. Deshalb
   steht hier fast nur eine Liste von Werten und kaum eine eigene
   Regel: Wer spaeter die Bibliothek austauscht, verliert damit nichts
   Selbstgebautes.

   WAS SICH ALLES AENDERN MUSSTE

     Grund               fast schwarz  ->  weiss
     Zaehler "3 / 24"    hellgrau      ->  Tintenschwarz
     Kreuz und Pfeile    weiss         ->  Tintenschwarz
     Knopfflaechen       dunkelgrau    ->  ganz helles Grau
     Schattenwurf        vorhanden     ->  weg (auf Weiss nur Schmutz)
     Rahmen am gewaehlten
     Miniaturbild        #ededed       ->  Akzentblau
                         (Hellgrau auf Weiss sieht man nicht)

   DER EINE HAKEN, den es zu wissen gilt: Ein helles Foto - ein
   weisses Kleid, eine weisse Wand - hat auf weissem Grund keine
   Kante mehr und scheint zu schweben. Dagegen liegt ein sehr weicher
   Schatten um das Bild. Er ist so leise, dass man ihn nicht als
   Schatten wahrnimmt, aber er gibt dem Foto einen Rand. Wenn Du auch
   den nicht willst, ist es die letzte Regel in diesem Block.
   ================================================================ */

/* Ohne body davor: Fancybox haengt seinen Behaelter direkt an den
   body, und diese Datei wird nach fancybox.css geladen - gleiches
   Gewicht, spaeter im Blatt, also gewinnt sie. */
.fancybox__container{
    --fancybox-bg: #fff;
    --fancybox-color: var(--ea-ink, #1E1E1C);
    --fancybox-hover-color: var(--ea-ink, #1E1E1C);
    --fancybox-toolbar-text-shadow: none;

    /* Der Ladekreisel war fuer dunklen Grund gedacht. */
    --f-spinner-color-1: rgba(30, 30, 28, .10);
    --f-spinner-color-2: var(--ea-muted, #75777A);

    color: var(--ea-ink, #1E1E1C);
}

/* Der Grund selbst - deckend, nicht durchscheinend. */
.fancybox__backdrop{ background: #fff; }

/* Die Leiste oben: Zaehler, Vollbild, Miniaturen, Kreuz. */
.fancybox__toolbar{
    --f-button-color: var(--ea-ink, #1E1E1C);
    --f-button-hover-color: var(--ea-ink, #1E1E1C);
    --f-button-bg: rgba(30, 30, 28, .06);
    --f-button-hover-bg: rgba(30, 30, 28, .12);
    --f-button-active-bg: rgba(30, 30, 28, .18);
    --f-button-svg-filter: none;
    --f-progress-color: var(--ea-accent, #3F5AD1);
}

/* Die Pfeile links und rechts. Ohne Flaeche, damit sie das Foto
   nicht bedraengen - erst beim Zeigen wird ein Kreis sichtbar. */
.fancybox__nav{
    --f-button-color: var(--ea-ink, #1E1E1C);
    --f-button-hover-color: var(--ea-ink, #1E1E1C);
    --f-button-bg: transparent;
    --f-button-hover-bg: rgba(30, 30, 28, .08);
    --f-button-active-bg: rgba(30, 30, 28, .14);
    --f-button-svg-filter: none;
}

/* Am Handy (is-compact) sitzt das Kreuz IM Bild, oben rechts. Dort
   war es ein schwarzer Kreis mit weissem Kreuz. Auf hellen Fotos
   waere der jetzt der einzige dunkle Fleck - also andersherum:
   heller Kreis, dunkles Kreuz, und ein feiner Schatten, damit er
   auch auf einem weissen Foto eine Kante hat. */
.is-compact .fancybox__content > .f-button.is-close-btn{
    --f-button-color: var(--ea-ink, #1E1E1C);
    --f-button-hover-color: var(--ea-ink, #1E1E1C);
    --f-button-bg: rgba(255, 255, 255, .92);
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;
    --f-button-outline-color: var(--ea-ink, #1E1E1C);
    box-shadow: 0 1px 6px rgba(23, 24, 26, .22);
}

/* Die Bildunterschrift am Handy lag auf einem dunklen Band. */
.is-compact .fancybox__footer{ background: rgba(255, 255, 255, .94); }
.fancybox__caption{ color: var(--ea-ink, #1E1E1C); }

/* Die Miniaturen unten. Der Rahmen um die gewaehlte war #ededed -
   auf weissem Grund unsichtbar. Jetzt das Akzentblau, dasselbe wie
   im Suchknopf. */
.fancybox__thumbs{
    --f-thumb-outline-color: var(--ea-accent, #3F5AD1);
}

/* Und der Rand, der ein helles Foto vom hellen Grund trennt.
   Wenn Du ihn nicht willst: diese eine Regel loeschen. */
.fancybox__slide.has-image > .fancybox__content{
    box-shadow: 0 6px 34px rgba(23, 24, 26, .13);
}


/* ================================================================
   TEIL BJ – "Aehnliche Anbieter" unter einem kostenlosen Profil
   21.08.2026

   Der Block steht ganz unten, nach den Bewertungen und vor der
   Fusszeile - und nur auf kostenlosen Profilen. Warum dort und nicht
   weiter oben, steht in templates/dienstleister.tpl.

   Er sieht bewusst RUHIG aus: keine Farbe, kein Kasten, kein Rahmen -
   nur eine feine Linie darueber und dieselben Karten wie ueberall
   sonst. Ein auffaelliger Block waere doppelt falsch. Fuer den
   Besucher waere er eine Werbeflaeche mitten in einem Profil, und fuer
   den Anbieter, der hier steht, eine Behauptung, er sei der bessere -
   die wir gar nicht aufstellen wollen. Es ist ein Angebot, kein
   Vorschlag.

   NACHTRAG 21.08.2026: Die feine Linie darueber ist wieder weg - auf
   Deinen Wunsch. Ich hatte sie gesetzt, damit der Block nicht wie ein
   weiterer Teil DIESES Profils gelesen wird ("meine Partner", "auch
   von mir"). Diese Aufgabe uebernimmt jetzt der Abstand: 80 Pixel
   ueber der Ueberschrift sind mehr, als zwischen zwei Abschnitten
   desselben Profils je stehen. Weisse Flaeche trennt genauso gut wie
   ein Strich, sie ist nur leiser - und auf einer Seite, die schon
   viele Linien hat, ist das die bessere Wahl.

   Unten sind es 72 Pixel bis zur Fusszeile. Vorher waren es 10, und
   der Block klebte an ihr - das sah aus, als gehoerte er dazu.
   ================================================================ */

body.ea .ea-aehnlich{
    margin-top: 46px;
    padding: 34px 0 72px;
}

body.ea .ea-aehnlich__h{
    font-family: var(--ea-serif); font-weight: 400;
    font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -.01em;
    margin: 0 0 4px; color: var(--ea-ink, #1E1E1C);
}

body.ea .ea-aehnlich__u{
    margin: 0 0 20px; font-size: 14.5px;
    color: var(--ea-muted, #75777A);
}

/* Vier nebeneinander, sobald Platz ist. .ea-erg alleine gaebe auf
   einer 1280er Seite drei - und die vierte Karte staende allein in
   einer zweiten Reihe, was nach "da fehlt etwas" aussieht. */
@media (min-width: 900px){
    body.ea .ea-aehnlich__gitter{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Darunter machen die vorhandenen Regeln alles richtig: zwei Karten
   je Reihe am Handy (TEIL BF), enger gesetzte Schrift, dieselben
   Bilder. Hier steht deshalb nichts weiter. */

@media (max-width: 767.98px){
    body.ea .ea-aehnlich{ margin-top: 30px; padding: 22px 0 48px; }
    body.ea .ea-aehnlich__u{ margin-bottom: 16px; }
}


/* ================================================================
   TEIL BK – die Anfragekarte steht am Handy nicht zweimal da
   21.08.2026

   Am Handy klebt unten der feste Balken mit Preis, "Kostenlos
   anfragen" und den Kontaktwegen. Dieselbe Karte stand zusaetzlich
   im Text der Seite - derselbe Preis, derselbe Knopf, dieselben
   Zeichen, nur ein Stueck weiter oben. Doppelt, und die feste
   Fassung ist die bessere: Sie ist immer da.

   Die Grenze ist 900 px, dieselbe wie beim Balken (TEIL AJ). Wer
   eine der beiden Zahlen aendert, muss die andere mitaendern - sonst
   gibt es einen Bereich mit zwei Anfragekarten oder einen ganz ohne.

   NUR wo der Balken wirklich steht: Die Klasse ea-ask--balken setzt
   templates/dienstleister.tpl genau unter derselben Bedingung wie
   den Balken selbst. Auf dem eigenen Profil ("Profil bearbeiten")
   und bei noch nicht freigeschalteten Profilen bleibt die Karte
   stehen - dort gibt es unten nichts, was sie ersetzt.

   Was dabei verloren geht, damit es dasteht: die drei Saetze aus der
   Karte - "Unverbindlich, keine Gebuehren, Antwort direkt in deinem
   Postfach", der Hinweis auf den Weg, und "Du kannst dieselbe
   Anfrage anschliessend auch an aehnliche Anbieter senden". Sie
   stehen am Handy jetzt nirgends. Der erste taucht im
   Anfrageformular wieder auf, sobald es offen ist; die anderen
   beiden nicht. Wenn Dir einer davon fehlt, ist der richtige Ort
   dafuer das Formular und nicht eine zweite Karte.
   ================================================================ */

@media (max-width: 900px){
    body.ea .ea-ask--balken{ display: none; }
}


/* ================================================================
   TEIL BL – der doppelte Abstand unter den Anbieterangaben
   22.08.2026

   Zwischen dem letzten Block des Profils ("Anbieterinformationen")
   und "Aehnliche Anbieter" klaffte am Handy rund 140 Pixel Weiss.
   Gemessen setzte sich das so zusammen:

       84 px   .ea-profile { padding-bottom }   (TEIL AJ)
       30 px   .ea-aehnlich { margin-top }
       22 px   .ea-aehnlich { padding-top }

   Die 84 Pixel sind aelter als die Leiste unten. Sie waren einmal der
   Platz, damit die Kontaktleiste den letzten Absatz nicht verdeckt.
   Diesen Platz macht heute der body selbst:

       body.ea.ea-hb.ea-p-dienstleister { padding-bottom: 126px }

   Seitdem stehen sie zweimal da - und seit es "Aehnliche Anbieter"
   gibt, stehen sie nicht mehr am Seitenende, sondern MITTEN in der
   Seite. Genau dort faellt Platz auf, der nichts trennt.

   Deshalb: Wo unten noch etwas kommt, braucht das Profil keinen
   Abschlussabstand. Die Klasse dafuer setzt die Vorlage selbst -
   sie weiss als Einzige, ob der Block ueberhaupt gefuellt ist.
   ================================================================ */

/* Am Rechner war dieselbe Rechnung nur mit anderen Zahlen:

       56 px   .ea-profile { padding-bottom }
       46 px   .ea-aehnlich { margin-top }
       34 px   .ea-aehnlich { padding-top }
      ------
      136 px   Weiss zwischen zwei Bloecken, die zusammengehoeren.

   Die Regel gilt deshalb OHNE Bildschirmgrenze. Der Abschlussabstand
   des Profils ist ein Abstand zum SEITENENDE - wo noch etwas folgt,
   hat er nichts zu suchen, gleich wie breit der Bildschirm ist. */
body.ea .ea-profile--folgt{ padding-bottom: 0; }

/* Bleiben 52 px am Rechner (26 + 26) und 38 am Handy (18 + 20).
   Das ist dieselbe Staffel wie zwischen den Bloecken im Profil
   darueber - der Block sieht damit aus, als gehoerte er zur Seite,
   und nicht, als haette ihn jemand angehaengt. */
body.ea .ea-aehnlich{ margin-top: 26px; padding-top: 26px; }

@media (max-width: 767.98px){
    body.ea .ea-aehnlich{ margin-top: 18px; padding-top: 20px; }
}


/* ---------------- die Note am Handy ----------------

   "★ 5.0 · " steht im Bewertungskaestchen und ist am Rechner
   verborgen: dort zeigen die fuenf Sterne rechts oben dasselbe.

   ACHTUNG, DIE ZAHL: .ea-hide-mobile blendet den Sternekasten bis
   991.98 px aus - nicht bis 900, wie der Rest des Handy-Bauteils.
   Diese Zeile muss deshalb genau ab 992 greifen. Stuende hier 901,
   gaebe es zwischen 901 und 991 ein Fenster, in dem der Sternekasten
   schon weg und die Note hier auch schon verborgen ist - also gar
   keine Bewertung auf der Seite. Wer eine der beiden Zahlen aendert,
   muss die andere mitaendern. */

body.ea .ea-tag--bew .ea-tag__note{ font-weight: 600; color: var(--ea-ink, #1E1E1C); }

@media (min-width: 992px){
    body.ea .ea-tag--bew .ea-tag__note{ display: none; }
}


/* ================================================================
   TEIL BM – auf dem Anbieterprofil steht unten EINE Leiste
   22.08.2026

   Bis heute standen dort zwei uebereinander: die Kontaktleiste des
   Anbieters ("Kostenlos anfragen" plus die Wege) und darunter noch
   die Navigation (Suchen · Merkliste · Anmelden). Zusammen 126 Pixel
   plus Geraeterand - ein Fuenftel eines iPhone-Bildschirms, dauerhaft
   belegt, auf einer Seite mit Bildern.

   Und die untere der beiden war ausgerechnet die, die niemand
   gesucht hat: Wer ein Profil liest, will anfragen. Suchen und
   Merkliste stehen weiter oben in der Kopfzeile, die mitscrollt.

   Also tritt die Navigation ab, wo die Kontaktleiste steht. Das ist
   dieselbe Entscheidung, die Airbnb auf der Inseratsseite trifft.

   WAS DAS KOSTET, ehrlich: Von einem Profil aus fuehrt der Weg zur
   Merkliste jetzt ueber die Kopfzeile oben statt ueber einen Daumen
   unten. Ein Griff mehr. Dafuer ist der Balken, der bleibt, der
   richtige.

   Die Klasse ea-balken setzt header.tpl; die Bedingung dafuer steht
   in includes/dienstleister.php. Auf dem EIGENEN Profil und bei noch
   nicht freigeschalteten Profilen gibt es keine Kontaktleiste - dort
   bleibt die Navigation unten stehen, sonst haette die Seite gar
   nichts mehr.
   ================================================================ */

body.ea.ea-balken .ea-fleiste{ display: none; }

@media (max-width: 767.98px){

    /* Ohne Navigation darunter sitzt die Kontaktleiste wieder auf dem
       unteren Rand - und bringt den Geraeterand selbst mit. Das ist
       genau der Zustand, den TEIL AJ ohnehin vorsieht; die Zeile
       darueber (body.ea.ea-hb .ea-fix) rechnet mit der Navigation und
       wird hier zurueckgenommen. */
    body.ea.ea-hb.ea-balken .ea-fix{
        bottom: 0;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* Platz nur noch fuer EINE Leiste. 70 px ist die gemessene Hoehe
       der Kontaktleiste mit Rand (vorher: 126 = 56 Navigation + 69
       Kontaktleiste). */
    body.ea.ea-hb.ea-p-dienstleister.ea-balken{
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    /* Der Cookie-Hinweis rueckt mit, sonst verdeckt die Leiste genau
       die Knoepfe "Akzeptieren" und "Fortfahren". 16 px Luft wie bei
       den anderen Seiten auch. */
    body.ea.ea-hb.ea-p-dienstleister.ea-balken #accept-cookies-block{
        bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    }

    /* Und der umgekehrte Fall, der sonst durchgerutscht waere: Auf dem
       EIGENEN Profil und bei nicht freigeschalteten Profilen gibt es
       KEINE Kontaktleiste, wohl aber die Navigation. Die alte Zeile
       rechnete dort weiter mit 126 Pixeln - also 70 Pixel Leere unter
       der Fusszeile, fuer einen Balken, der gar nicht da ist.
       Hier steht deshalb, was fuer eine Leiste allein gilt. */
    body.ea.ea-hb.ea-p-dienstleister:not(.ea-balken){
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
    body.ea.ea-hb.ea-p-dienstleister:not(.ea-balken) #accept-cookies-block{
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}


/* ================================================================
   TEIL BN – das Herz auf den Karten am Handy
   22.08.2026

   Am Handy war es 15 Pixel breit auf einer 171 Pixel breiten Karte,
   also 8,8 % - gemessen bei 390 px. Bei Airbnb sind es 21 %. Das
   Herz war damit nicht nur klein, sondern auch schwer zu treffen:
   der Knopf darum war 27 Pixel, und 44 gelten als Untergrenze.

   Warum es ueberhaupt so klein war: Als am Handy zwei Karten in eine
   Reihe kamen (TEIL BF), wurde ALLES auf der Karte kleiner gerechnet
   - Portrait, Schrift, Herz. Fuer Portrait und Schrift ist das
   richtig, sie stehen im Weg. Das Herz steht auf dem Bild und nimmt
   niemandem etwas weg.

   Jetzt waechst es mit dem Bildschirm, damit der Anteil gleich
   bleibt: 7,6 vw sind bei 320 px 26, bei 390 px 30 und bei 430 px
   33 Pixel - rund 17 % der Karte.

   NACHTRAG vom selben Tag: Erst standen hier 9,3 vw, also die 21 %
   aus dem Vorbild. Auf dem Geraet war das zu viel - das Herz nahm
   die Ecke des Bildes ein. 17 % ist der Wert nach dem Blick darauf,
   und der zaehlt mehr als der abgemessene.

   Die Obergrenze ist da, weil dieser Bereich bis 619 px reicht. Ohne
   sie waere das Herz auf einem quer gehaltenen Telefon 47 Pixel
   gross. Die Untergrenze des KNOPFES bleibt 44 - das ist die Flaeche
   zum Antippen, sie darf groesser sein als das, was man sieht.

   Die weisse Kante war 2 Einheiten breit. Bei 36 Pixeln waren das
   3 gemalte Pixel - bei 27 (Rechner) nur 2,3, deshalb ist es erst
   am Handy aufgefallen. Jetzt 1,5, also rund 1,9 Pixel.
   ================================================================ */

@media (max-width: 619.98px){
    body.ea .ea-erg .ea-c__fav,
    body.ea .ea-cards2 .ea-c__fav,
    body.ea .ea-spon__reihe .ea-c__fav{
        top: 4px; right: 4px;
        width: clamp(44px, 11vw, 50px);
        height: clamp(44px, 11vw, 50px);
    }
    body.ea .ea-erg .ea-c__fav svg,
    body.ea .ea-cards2 .ea-c__fav svg,
    body.ea .ea-spon__reihe .ea-c__fav svg{
        width: clamp(26px, 7.6vw, 33px);
        height: clamp(26px, 7.6vw, 33px);
        stroke-width: 1.5;
    }
    body.ea .ea-erg .ea-c__fav.is-gemerkt svg,
    body.ea .ea-cards2 .ea-c__fav.is-gemerkt svg,
    body.ea .ea-spon__reihe .ea-c__fav.is-gemerkt svg{ stroke-width: 1.3; }
}


/* ================================================================
   TEIL BO – Bewertungen einholen
   22.08.2026

   Zwei Orte: die oeffentliche Seite /bewerten/<schluessel>, auf der
   der Kunde landet, und die Seite im Dienstleisterbereich, auf der
   der Anbieter einlaedt.

   Die oeffentliche Seite ist absichtlich karg. Sie hat genau eine
   Aufgabe, und alles, was daneben steht, kostet Bewertungen.
   ================================================================ */

/* ---------------- 1. die Seite fuer den Kunden ---------------- */

/* NUR oben und unten. Die Kurzschreibweise "padding: 34px 0 80px"
   stand hier zuerst - und hat den seitlichen Rand von .ea-wrap auf 0
   gesetzt, weil beide Regeln gleich schwer wiegen und diese spaeter
   steht. Ergebnis am Handy: Die Karte klebte an beiden Bildschirm-
   raendern und die Zeile darunter lief rechts hinaus.
   Gemessen bei 390 px: Karte 390 statt 354.

   Das ist in diesem Stylesheet der vierte Fall derselben Art. Merksatz:
   Wer .ea-wrap eine zweite Klasse gibt, fasst dort padding nie als
   Kurzschreibweise an. */
body.ea .ea-bw{ padding-top: 34px; padding-bottom: 80px; }

body.ea .ea-bw__karte{
    background: #fff; border: 1px solid var(--ea-line-2, #EDE8E4);
    border-radius: 18px; padding: 30px;
    max-width: 620px; margin: 0 auto;
}
body.ea .ea-bw__karte--schmal{ max-width: 520px; text-align: center; }

body.ea .ea-bw__h1{
    font-family: var(--ea-serif); font-weight: 400;
    font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.01em;
    margin: 0 0 8px; color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-bw__lead{ margin: 0 0 22px; color: var(--ea-muted, #71757B); line-height: 1.55; }
body.ea .ea-bw__klein{ margin: 16px 0 0; font-size: 13px; line-height: 1.55;
    color: #A0A4A9; }

/* Wer bewertet wird - steht ueber der Frage, damit niemand die
   falsche Person bewertet. Bei zwei Auftraegen in derselben Woche ist
   das keine Kleinigkeit. */
body.ea .ea-bw__wer{
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 20px; margin-bottom: 20px;
    border-bottom: 1px solid var(--ea-line-2, #EDE8E4);
}
body.ea .ea-bw__bild{
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    flex: 0 0 56px; background: var(--ea-surface, #F5F4F3);
}
body.ea .ea-bw__hut{
    margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: #A0A4A9;
}
body.ea .ea-bw__firma{ margin: 2px 0 0; font-size: 17px; font-weight: 600; }

body.ea .ea-bw__fehler{
    margin: 0 0 18px; padding: 12px 14px; border-radius: 10px;
    background: #FCEFEE; border: 1px solid #F0CFCB; color: #9E332B;
    font-size: 14.5px;
}

/* ---- die Sterne ----

   Fuenf echte Radio-Knoepfe, im Quelltext von 5 nach 1. Zurueckgedreht
   wird hier mit row-reverse. Der Grund steht in der Vorlage: CSS kann
   nur NACH vorne faerben (input:checked ~ label), also muessen die
   kleineren Zahlen im Quelltext hinter den groesseren stehen.

   Wer die Reihenfolge in der Vorlage "aufraeumt", bekommt eine
   Bewertung, bei der die falschen Sterne leuchten - und merkt es
   erst, wenn sich jemand beschwert. */
body.ea .ea-bw__sterne{ border: 0; padding: 0; margin: 0 0 24px; }
body.ea .ea-bw__sterne legend{
    padding: 0; margin: 0 0 8px;
    font-size: 14px; color: var(--ea-muted, #71757B);
}
body.ea .ea-bw__reihe{
    display: flex; flex-direction: row-reverse; justify-content: flex-end;
    gap: 4px;
}
body.ea .ea-bw__radio{
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.ea .ea-bw__stern{
    cursor: pointer; line-height: 0; padding: 2px;
    border-radius: 8px;
}
body.ea .ea-bw__stern svg{
    width: 42px; height: 42px; display: block;
    fill: #E4E0DC;
    transition: fill .12s ease, transform .12s ease;
}
body.ea .ea-bw__stern:active svg{ transform: scale(.92); }

/* Gewaehlt: der Stern selbst und alle davor (im Quelltext danach). */
body.ea .ea-bw__radio:checked ~ .ea-bw__stern svg{ fill: #F0A93E; }

/* Solange der Finger ueber der Reihe liegt, zeigt sie die HAND, nicht
   die gespeicherte Wahl.

   Ohne die erste der beiden Zeilen passiert Folgendes: Es sind fuenf
   Sterne gewaehlt, jemand faehrt ueber den zweiten - dann leuchten
   5, 4 und 3 aus der Wahl und 2 und 1 aus dem Zeigen. Also alle
   fuenf, und man sieht nicht mehr, was man gerade waehlen wuerde.
   Deshalb erst alles grau, dann die Hand einfaerben.

   Beide Regeln wiegen gleich schwer; die zweite gewinnt, weil sie
   spaeter steht. Wer sie umsortiert, bekommt graue Sterne unter dem
   Finger. */
body.ea .ea-bw__reihe:hover .ea-bw__radio:checked ~ .ea-bw__stern svg{ fill: #E4E0DC; }
body.ea .ea-bw__reihe:hover .ea-bw__stern:hover svg,
body.ea .ea-bw__reihe:hover .ea-bw__stern:hover ~ .ea-bw__stern svg{ fill: #F0A93E; }

/* Die Tastatur muss sehen, wo sie steht. Ohne diese Zeile ist der
   Fokus unsichtbar, weil der Radio-Knopf selbst versteckt ist. */
body.ea .ea-bw__radio:focus-visible + .ea-bw__stern{
    outline: 2px solid var(--ea-accent, #3F5AD1); outline-offset: 2px;
}

body.ea .ea-bw__feld{ display: block; margin: 0 0 20px; }
body.ea .ea-bw__feld span{ display: block; font-size: 14px;
    color: var(--ea-muted, #71757B); margin-bottom: 6px; }
body.ea .ea-bw__feld em{ font-style: normal; color: #A9ADB3; }
body.ea .ea-bw__feld textarea{
    width: 100%; font: inherit; font-size: 15px; line-height: 1.5;
    color: var(--ea-ink, #1E1E1C); background: #fff;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 10px;
    padding: 11px 13px; resize: vertical;
}
body.ea .ea-bw__feld textarea:focus{
    outline: 0; border-color: var(--ea-accent, #3F5AD1);
    box-shadow: 0 0 0 3px rgba(63, 90, 209, .13);
}

body.ea .ea-bw__haken{
    width: 54px; height: 54px; margin: 0 auto 16px;
    border-radius: 50%; display: grid; place-items: center;
    background: #EAF4EE; color: #2F7D4F;
}
body.ea .ea-bw__haken svg{ width: 28px; height: 28px; }

body.ea .ea-bw__ab{
    max-width: 620px; margin: 20px auto 0; text-align: center;
    font-size: 13px; color: #A0A4A9;
}
body.ea .ea-bw__ab a{ color: #A0A4A9; text-decoration: underline; }

@media (max-width: 619.98px){
    body.ea .ea-bw{ padding-top: 20px; padding-bottom: 60px; }
    body.ea .ea-bw__karte{ padding: 22px 18px; border-radius: 14px; }
    /* Bei 320 px bleiben nach den Raendern 246 px fuer die Reihe.
       Mit 42er Sternen waeren es 5 x 46 + 4 x 4 = 246 - also auf den
       Pixel genau, ohne jede Luft. Mit 38ern sind es 226 und damit
       20 px Reserve. Gemessen, nicht geschaetzt. */
    body.ea .ea-bw__stern svg{ width: 38px; height: 38px; }
}


/* ---------------- 2. die Seite fuer den Anbieter ---------------- */

body.ea .ea-bw__meldung{
    margin: 0 0 20px; padding: 12px 15px; border-radius: 10px;
    background: #EAF4EE; border: 1px solid #C9E3D4; color: #2A6A44;
    font-size: 14.5px;
}
body.ea .ea-bw__meldung--fehler{
    background: #FCEFEE; border-color: #F0CFCB; color: #9E332B;
}

body.ea .ea-bw__zahlen{
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px; margin: 0 0 22px;
}
body.ea .ea-bw__zahlen div{
    background: #fff; border: 1px solid var(--ea-line-2, #EDE8E4);
    border-radius: 14px; padding: 16px 14px;
}
body.ea .ea-bw__zahlen b{ display: block; font-size: 26px; font-weight: 600;
    line-height: 1.1; }
body.ea .ea-bw__zahlen span{ display: block; margin-top: 3px; font-size: 13px;
    color: var(--ea-muted, #71757B); }

body.ea .ea-b__hinweis{
    margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: #A0A4A9;
}

body.ea .ea-bw__regeln{ margin-top: 24px; }
body.ea .ea-bw__regeln .ea-aufklapp__in p{ margin: 0 0 12px; font-size: 14.5px;
    line-height: 1.6; color: var(--ea-muted, #71757B); }
body.ea .ea-bw__regeln .ea-aufklapp__in b{ color: var(--ea-ink, #1E1E1C); }

body.ea .ea-bw__h2{
    font-family: var(--ea-serif); font-weight: 400; font-size: 21px;
    margin: 32px 0 12px;
}

body.ea .ea-bw__liste{ padding: 4px 22px; }

/* Die Zeile ist seit dem 22.08. ein BLOCK, nicht mehr die Flex-Reihe
   selbst: Unter Name und Stand steht jetzt der Text der Bewertung.
   Die Reihe darueber heisst .ea-bw__oben. */
body.ea .ea-bw__zeile{
    padding: 15px 0; border-top: 1px solid var(--ea-line-2, #EDE8E4);
}
body.ea .ea-bw__zeile:first-child{ border-top: 0; }
body.ea .ea-bw__oben{ display: flex; align-items: center; gap: 14px; }

/* Was der Kunde geschrieben hat. Eingerueckt mit einer Linie links -
   ein Zitat, kein Fliesstext: Es sind seine Worte, nicht die der
   Seite. */
body.ea .ea-bw__text{
    margin: 10px 0 0; padding: 2px 0 2px 14px;
    border-left: 2px solid var(--ea-line, #E7E2DE);
    font-size: 14.5px; line-height: 1.6; color: var(--ea-ink-2, #3B3D40);
}
body.ea .ea-bw__text cite{
    display: block; margin-top: 6px; font-style: normal;
    font-size: 12.5px; color: #A9ADB3;
}
body.ea .ea-bw__ohnetext{
    margin: 8px 0 0; font-size: 13px; color: #A9ADB3;
}
body.ea .ea-bw__zwer{ min-width: 0; flex: 1 1 auto; }
body.ea .ea-bw__zwer b{ display: block; font-size: 15px; }
body.ea .ea-bw__zwer span{ display: block; font-size: 13px; color: #A0A4A9;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ea .ea-bw__zstand{ flex: 0 0 auto; text-align: right; }
body.ea .ea-bw__zstand em{ display: block; font-style: normal; font-size: 12px;
    color: #A0A4A9; margin-top: 3px; }
body.ea .ea-bw__ztun{ flex: 0 0 auto; }

body.ea .ea-bw__marke{
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 12.5px; background: var(--ea-surface, #F5F4F3);
    border: 1px solid var(--ea-line-2, #EDE8E4); color: var(--ea-muted, #71757B);
}
body.ea .ea-bw__marke--ja{ background: #EAF4EE; border-color: #C9E3D4; color: #2A6A44; }
body.ea .ea-bw__marke--weg{ background: #FCEFEE; border-color: #F0CFCB; color: #9E332B; }

body.ea .ea-kn--klein{ height: 34px; padding: 0 12px; font-size: 13.5px; }

/* Gesperrt bei kostenlosem Eintrag - derselbe Aufbau wie das Band in
   der Statistik, damit beide Sperren gleich aussehen und nicht wie
   zwei verschiedene Zustaende der Seite. */
body.ea .ea-bw__sperre{
    display: flex; align-items: center; gap: 18px; padding: 22px;
}
body.ea .ea-bw__schloss{
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ea-surface, #F5F4F3); color: var(--ea-muted, #71757B);
}
body.ea .ea-bw__schloss svg{ width: 22px; height: 22px; }
body.ea .ea-bw__sperre b{ display: block; margin-bottom: 4px; }
body.ea .ea-bw__sperre p{ margin: 0; font-size: 14px; line-height: 1.55;
    color: var(--ea-muted, #71757B); }
body.ea .ea-bw__sperretun{ flex: 0 0 auto; }

@media (max-width: 719.98px){
    body.ea .ea-bw__zahlen{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    body.ea .ea-bw__zahlen div{ padding: 13px 11px; }
    body.ea .ea-bw__zahlen b{ font-size: 22px; }
    body.ea .ea-bw__zahlen span{ font-size: 12px; }

    /* Am Handy passen Name, Stand und Knopf nicht in eine Zeile.
       Statt sie zu quetschen: Name oben, darunter Stand und Knopf. */
    body.ea .ea-bw__oben{ flex-wrap: wrap; row-gap: 10px; }
    body.ea .ea-bw__zwer{ flex: 1 1 100%; }
    body.ea .ea-bw__zstand{ text-align: left; }
    body.ea .ea-bw__ztun{ margin-left: auto; }

    body.ea .ea-bw__sperre{ flex-wrap: wrap; }
    body.ea .ea-bw__sperretun{ flex: 1 1 100%; }
    /* box-sizing gehoert dazu, und es fehlte hier seit Fassung 92.
       .ea-kn bringt links und rechts je 22 px Innenabstand mit. Ohne
       diese Zeile ist "width: 100%" die Breite des INHALTS, und der
       Knopf ist 44 px breiter als sein Kasten - gemessen 402 px auf
       einem 390-px-Bildschirm. Betroffen waren die gesperrten Karten
       bei "Bewertungen einholen" und beim Vergleich.

       Fuenftes Vorkommen desselben Fehlers in diesem Projekt. Merksatz:
       Wo "width: 100%" steht und der Kasten Innenabstand hat, muss
       box-sizing daneben. */
    body.ea .ea-bw__sperretun .ea-kn{ width: 100%; box-sizing: border-box; text-align: center; }
}

/* Herkunft unter der einzelnen Bewertung (siehe TEIL BO). Klein und
   grau: Es ist eine Auskunft, keine Auszeichnung. Wer sie fett setzt,
   macht aus einer Pflichtangabe ein Verkaufsargument - und genau das
   liest sich dann wie eines. */
body.ea .ea-rev__her{
    margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: #A9ADB3;
}


/* ================================================================
   TEIL BP – Vergleich mit anderen an deinem Ort
   22.08.2026

   Vier Balken, je einer fuer ein Merkmal. Jeder Balken zeigt ZWEI
   Zahlen: die Fuellung ist der eigene Wert, der senkrechte Strich
   steht auf der Mitte der Gruppe.

   Warum nicht mehr: Ein Diagramm mit Achsen, Legende und vier Farben
   waere genauer und wuerde nicht gelesen. Ein Balken mit einem Strich
   beantwortet die einzige Frage, die hier zaehlt - liege ich darueber
   oder darunter -, und zwar in einem Blick.
   ================================================================ */

body.ea .ea-vg__karte{ padding: 8px 24px 20px; }

body.ea .ea-vg__punkt{
    padding: 18px 0; border-top: 1px solid var(--ea-line-2, #EDE8E4);
}
body.ea .ea-vg__punkt:first-child{ border-top: 0; }

body.ea .ea-vg__kopf{
    display: flex; align-items: baseline; gap: 12px; margin-bottom: 9px;
}
body.ea .ea-vg__kopf b{ font-size: 15px; }
body.ea .ea-vg__mein{
    margin-left: auto; font-size: 19px; font-weight: 600;
    color: var(--ea-ink, #1E1E1C); white-space: nowrap;
}

body.ea .ea-vg__balken{
    position: relative; height: 10px; border-radius: 999px;
    background: var(--ea-surface, #F5F4F3);
    border: 1px solid var(--ea-line-2, #EDE8E4);
    overflow: hidden;
}
body.ea .ea-vg__fuellung{
    position: absolute; left: 0; top: 0; bottom: 0;
    border-radius: 999px; background: var(--ea-accent, #3F5AD1);
}

/* Der Preisbalken ist grau, nicht blau. Blau heisst auf dieser Seite
   "gut" - und beim Preis gibt es kein gut. Siehe den Hinweis in der
   Vorlage und die Begruendung in class.vergleich.php. */
body.ea .ea-vg__fuellung--neutral{ background: #A9ADB3; }

/* Die Mitte der Gruppe. Steht IM Balken, nicht daneben: Daneben
   waere es eine zweite Zahl zum Vergleichen, hier ist es eine Linie,
   die man ueber- oder unterschreitet. */
body.ea .ea-vg__mitte{
    position: absolute; top: -3px; bottom: -3px; width: 2px;
    background: var(--ea-ink, #1E1E1C);
    /* Bei 0 % und 100 % wuerde der Strich halb aus dem Balken ragen;
       die Verschiebung holt ihn zurueck. */
    transform: translateX(-1px);
}

body.ea .ea-vg__unter{
    margin: 8px 0 0; font-size: 13.5px; color: var(--ea-muted, #71757B);
}
body.ea .ea-vg__unter b{ color: var(--ea-ink, #1E1E1C); }

body.ea .ea-vg__hin{
    margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: #A9ADB3;
}

body.ea .ea-vg__punkt--video .ea-vg__mein{ font-size: 17px; }

body.ea .ea-vg__leer{ padding: 24px; }
body.ea .ea-vg__leer p{ margin: 0 0 12px; font-size: 14.5px; line-height: 1.6;
    color: var(--ea-muted, #71757B); }
body.ea .ea-vg__leer p:last-child{ margin-bottom: 0; }
body.ea .ea-vg__leer b{ color: var(--ea-ink, #1E1E1C); }

@media (max-width: 619.98px){
    body.ea .ea-vg__karte{ padding: 4px 18px 16px; }
    body.ea .ea-vg__mein{ font-size: 17px; }
}

/* Auswahl "Was steht unter deinem Namen?" im Leistungskasten (TEIL BP).
   Steht IM Kasten mit den gewaehlten Leistungen, nicht darunter: Sie
   gehoert zu dem, was dort schon steht, und nicht zur Suche darunter. */
body.ea .ea-lst__haupt{
    margin: 16px 0 0; padding-top: 16px;
    border-top: 1px solid rgba(63, 90, 209, .16);
}
body.ea .ea-lst__haupt label{
    display: block; font-size: 14px; font-weight: 600;
    color: var(--ea-ink, #1E1E1C); margin-bottom: 7px;
}
body.ea .ea-lst__haupt select{
    width: 100%; max-width: 420px; font: inherit; font-size: 15px;
    color: var(--ea-ink, #1E1E1C); background: #fff;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 10px;
    padding: 10px 12px;
}
body.ea .ea-lst__haupt select:focus{
    outline: 0; border-color: var(--ea-accent, #3F5AD1);
    box-shadow: 0 0 0 3px rgba(63, 90, 209, .13);
}
body.ea .ea-lst__haupt em{
    display: block; margin-top: 7px; font-style: normal;
    font-size: 12.5px; line-height: 1.5; color: var(--ea-muted, #71757B);
}

/* Umschalter "Vergleich für:" (TEIL BP). Chips, keine Auswahlliste:
   Bei elf Leistungen soll man sehen, wie viele es sind und welche
   gerade gilt - eine zugeklappte Liste verbirgt beides. */
body.ea .ea-vg__schalter{
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 22px;
}
body.ea .ea-vg__schaltertitel{
    font-size: 13.5px; color: var(--ea-muted, #71757B); margin-right: 2px;
}
body.ea .ea-vg__schaltern{
    display: inline-block; padding: 6px 13px; border-radius: 999px;
    font-size: 13.5px; text-decoration: none;
    background: #fff; border: 1px solid var(--ea-line, #E7E2DE);
    color: var(--ea-ink-2, #3B3D40);
    transition: border-color .15s ease, background-color .15s ease;
}
body.ea .ea-vg__schaltern:hover{ border-color: var(--ea-accent, #3F5AD1); }
body.ea .ea-vg__schaltern.is-an{
    background: var(--ea-accent, #3F5AD1); border-color: var(--ea-accent, #3F5AD1);
    color: #fff; font-weight: 600;
}


/* ================================================================
   TEIL BQ – das neue Logo
   22.08.2026

   EINE Datei: img/logo-event-abc.svg. (Es war einen Nachmittag lang
   in zwei Teile zerlegt - zurueckgebaut auf Wunsch, und das ist die
   bessere Entscheidung: Zwei Dateien heissen zwei Stellen, an die man
   beim naechsten Logowechsel denken muss.)

   36 PIXEL, NICHT 24 - und das ist der ganze Punkt hier:
   Das neue Logo ist 2,8:1, das alte war 6,2:1. Bei gleicher Hoehe
   waere der Schriftzug nur noch ein Drittel so gross und das ABC im
   blauen Quadrat zehn Pixel hoch, also nicht mehr zu lesen. Gemessen,
   nicht geschaetzt.

   Bei 36 px ist der Schriftzug immer noch kleiner als frueher. Mehr
   geht nicht: Die Kopfzeile ist 60 px hoch, und ein Logo, das 44
   davon fuellt, laesst sie eng aussehen.

   ACHTUNG bei Aenderungen: An DREI Stellen weiter oben im Stylesheet
   steht  body.ea .ea-logo img { height: ... }  - einmal 24, einmal
   20, einmal wieder 24. Die Regel hier traegt deshalb den
   Klassennamen am img mit (img.ea-logo__voll), damit sie schwerer
   wiegt. Wer ihn weglaesst, bekommt ueberall wieder 24 Pixel.

   Am Handy ist .ea-logo ohnehin aus (.ea-header--handy .ea-logo), das
   Zeichen steht dort links als .ea-marke.
   ================================================================ */

body.ea .ea-logo img.ea-logo__voll{ height: 36px; width: auto; }

/* Auf schmalen Rechnerfenstern etwas kleiner - dieselbe Staffel, die
   der Schriftzug frueher hatte (24 auf 20). */
@media (max-width: 991.98px){
    body.ea .ea-logo img.ea-logo__voll{ height: 30px; }
}


/* Vergleich: was fehlt (gehoert zu TEIL BP). Ein Strich statt einer
   Zahl und ein Satz statt eines Balkens - ein Balken bei null waere
   eine Aussage ueber einen Preis, den es nicht gibt.

   (Dieser Block stand schon einmal hier und ist beim Zurueckbauen von
    TEIL BQ am 22.08. mit abgeschnitten worden - er stand darunter.
    Merksatz: Wer einen Abschnitt am Ende ersetzt, muss nachsehen, ob
    wirklich nichts dahinter steht.) */
body.ea .ea-vg__mein--leer{ color: #C3C6CA; font-weight: 400; }
body.ea .ea-vg__leerhin{
    margin: 2px 0 0; font-size: 13.5px; line-height: 1.55;
    color: var(--ea-muted, #71757B);
}
body.ea .ea-vg__leerhin a{ color: var(--ea-accent, #3F5AD1); }


/* ================================================================
   TEIL BR – "So funktioniert's", die Seite fuer Kunden
   22.08.2026  ·  /so-gehts

   Sie ist nah an "Dienstleister werden" gebaut (TEIL Y), aber nicht
   dieselbe Vorlage: Dort wird geworben, hier wird erklaert. Der
   Unterschied sitzt in den Abstaenden - hier steht mehr Text
   untereinander, und Text braucht mehr Luft als Preiskaesten.
   ================================================================ */

body.ea .ea-sg__kopf{ padding: 56px 0 44px; }
body.ea .ea-sg__abs{ padding: 52px 0; border-top: 1px solid var(--ea-line-2, #EDE8E4); }
body.ea .ea-sg__abs--tint{ background: var(--ea-surface, #F5F4F3); border-top: 0; }

body.ea .ea-sg__hut{
    margin: 0 0 10px; font-size: 12.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ea-accent, #3F5AD1);
}
body.ea .ea-sg__h1{
    font-family: var(--ea-serif); font-weight: 400;
    font-size: clamp(30px, 4.4vw, 52px); line-height: 1.1;
    letter-spacing: -.015em; margin: 0 0 18px; max-width: 18ch;
}
body.ea .ea-sg__h2{
    font-family: var(--ea-serif); font-weight: 400;
    font-size: clamp(23px, 2.8vw, 34px); letter-spacing: -.01em;
    margin: 0 0 22px;
}
body.ea .ea-sg__h3{
    font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ea-muted, #71757B); margin: 32px 0 10px;
}
body.ea .ea-sg__fragen > .ea-sg__h3:first-child{ margin-top: 0; }

body.ea .ea-sg__lead{
    font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6;
    color: var(--ea-ink-2, #3B3D40); max-width: 62ch; margin: 0 0 26px;
}

/* Die drei Zahlen unter dem Aufmacher. Sie stehen VOR den Schritten,
   weil sie die Frage beantworten, mit der jeder herkommt: Was kostet
   mich das? Wer sie erst unten liest, hat vorher schon ueberlegt
   wegzugehen. */
body.ea .ea-sg__drei{
    list-style: none; padding: 0; margin: 0 0 30px;
    display: flex; flex-wrap: wrap; gap: 10px 28px;
    font-size: 15.5px; color: var(--ea-ink-2, #3B3D40);
}
body.ea .ea-sg__drei b{ color: var(--ea-ink, #1E1E1C); }

body.ea .ea-sg__tun{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
body.ea .ea-sg__klein{ font-size: 14px; color: var(--ea-muted, #71757B); }

/* ---------- die drei Schritte ---------- */
body.ea .ea-sg__schritte{
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 26px;
}
@media (min-width: 860px){
    body.ea .ea-sg__schritte{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
}
body.ea .ea-sg__schritte h3{ font-size: 19px; margin: 0 0 8px; }
body.ea .ea-sg__schritte p{
    margin: 0; font-size: 15px; line-height: 1.65;
    color: var(--ea-ink-2, #3B3D40);
}
body.ea .ea-sg__nr{
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; margin-bottom: 12px;
    background: var(--ea-accent, #3F5AD1); color: #fff;
    font-size: 15px; font-weight: 600;
}

/* ---------- was wir sind, was nicht ---------- */
body.ea .ea-sg__zwei{ display: grid; gap: 18px; }
@media (min-width: 860px){
    body.ea .ea-sg__zwei{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
body.ea .ea-sg__kasten{
    background: #fff; border: 1px solid var(--ea-line-2, #EDE8E4);
    border-radius: 16px; padding: 24px 26px;
}
body.ea .ea-sg__kasten h3{ font-size: 17px; margin: 0 0 14px; }
body.ea .ea-sg__kasten ul{ margin: 0; padding: 0; list-style: none; }
body.ea .ea-sg__kasten li{
    position: relative; padding-left: 26px; margin-bottom: 12px;
    font-size: 15px; line-height: 1.6; color: var(--ea-ink-2, #3B3D40);
}
body.ea .ea-sg__kasten li:last-child{ margin-bottom: 0; }

/* Haken und Kreuz als Zeichen, nicht als Bild: Sie muessen sich mit
   der Schrift mitvergroessern, wenn jemand den Browser hochzoomt. */
body.ea .ea-sg__kasten li::before{
    position: absolute; left: 0; top: -1px; font-size: 15px; font-weight: 700;
}
body.ea .ea-sg__kasten--ja li::before{ content: "✓"; color: #2F7D4F; }
body.ea .ea-sg__kasten--nein li::before{ content: "✕"; color: #A9ADB3; }

/* ---------- Fliesstext ---------- */
body.ea .ea-sg__text{ max-width: 68ch; }
body.ea .ea-sg__text p{
    margin: 0 0 16px; font-size: 15.5px; line-height: 1.7;
    color: var(--ea-ink-2, #3B3D40);
}
body.ea .ea-sg__text p:last-child{ margin-bottom: 0; }
body.ea .ea-sg__text b{ color: var(--ea-ink, #1E1E1C); }

/* ---------- Fragen ---------- */
body.ea .ea-sg__fragen{ max-width: 74ch; }
body.ea .ea-sg__fragen .ea-aufklapp summary{ font-size: 16px; }
body.ea .ea-sg__fragen .ea-aufklapp__in{ padding-bottom: 18px; }
body.ea .ea-sg__fragen .ea-aufklapp__in p{
    margin: 0 0 12px; font-size: 15px; line-height: 1.7;
    color: var(--ea-ink-2, #3B3D40); max-width: 66ch;
}
body.ea .ea-sg__fragen .ea-aufklapp__in p:last-child{ margin-bottom: 0; }
body.ea .ea-sg__fragen .ea-aufklapp__in b{ color: var(--ea-ink, #1E1E1C); }

body.ea .ea-sg__ende{ padding-bottom: 76px; }

@media (max-width: 619.98px){
    body.ea .ea-sg__kopf{ padding: 34px 0 30px; }
    body.ea .ea-sg__abs{ padding: 38px 0; }
    body.ea .ea-sg__kasten{ padding: 20px 18px; }
    body.ea .ea-sg__drei{ gap: 8px 0; flex-direction: column; }
    /* Die zwei Knoepfe am Ende untereinander und ueber die ganze
       Breite - nebeneinander sind sie bei 320 px je 140 px schmal. */
    body.ea .ea-sg__ende .ea-sg__tun{ flex-direction: column; align-items: stretch; }
    /* box-sizing gehoert dazu: .ea-btn bringt links und rechts je 22 px
       Innenabstand mit. Ohne diese Zeile ist "width: 100%" die Breite
       des INHALTS und der Knopf am Ende 44 px breiter als der
       Bildschirm - gemessen 434 statt 390. */
    body.ea .ea-sg__ende .ea-btn{ width: 100%; box-sizing: border-box; text-align: center; }
}


/* =========================================================
   TEIL BS - PLATZHALTER FUER PROFILE OHNE TITELBILD
   Event ABC, 21.08.2026

   Bis heute fiel der Streifen oben weg, wenn ein Anbieter weder
   ein Querformat im Album noch ein eigenes Hintergrundbild hatte.
   Zwei Folgen:

   1. Das Profilbild haengt mit einem negativen Aussenabstand unter
      dem Streifen. Ohne Streifen zog es hoch in die Brotkrume - im
      Bildschirmfoto vom 21.08. gut zu sehen.
   2. Die Seite sah nicht zurueckhaltend aus, sondern unfertig.

   Jetzt steht dort img/cover-platzhalter.svg. Warum eine Zeichnung
   und kein Foto: Ein fremdes Hochzeitsfoto ueber einem Profil
   behauptet, der Anbieter sei dort gewesen. Das Muster behauptet
   nichts.

   MERKSATZ: Der Platzhalter ist KEIN Bild des Anbieters. Alles,
   was ein echtes Titelbild inszeniert - die Einblendung aus TEIL AK,
   der Anschnitt bei 38 % Hoehe - gilt hier nicht.
   ========================================================= */

/* Ruhig. Der Platzhalter faehrt nicht auf, er ist ja nichts, worauf
   man wartet. Die Regel in TEIL AK traegt html.ea-anim vorne und hat
   damit dieselbe Gewichtsklasse - deshalb steht hier "none" auch mit
   html.ea-anim davor, sonst kaeme die frueher stehende Regel durch. */
html.ea-anim body.ea .ea-cover--platz img{ animation: none; }

/* Mittig anschneiden. Das Zeichen sitzt in der Mitte der Zeichnung,
   und die Zeichnung wird links und rechts beschnitten - am Handy
   kraeftig. "center 38 %" aus TEIL BJ wuerde es nach oben schieben. */
body.ea .ea-cover--platz img,
body.ea-p-dienstleister .ea-cover--platz img{ object-position: center center; }

/* Der Grund unter dem Bild. Faellt die Datei einmal aus, steht dort
   kein Weiss, sondern der Ton, den die Zeichnung ohnehin hat. */
body.ea .ea-cover--platz{ background: #EEF1FA; }


/* =========================================================
   TEIL BT - DER ANBIETER WAEHLT SEINE ZWEI BILDER SELBST
   Event ABC, 21.08.2026

   Gehoert zur Vorschau "So sehen dich Kunden" unter Fotos im
   Dienstleisterbereich (templates/profil-fotos.inc.tpl).

   Die Grundregeln der beiden Vorschaukarten stehen weiter oben
   im Bestand (.ea-fo__vor und Folgende). Hier kommt dazu, was
   neu ist: der Erklaertext ueber den Karten, die zwei Knoepfe
   unter jeder Karte und die Standzeile darunter.

   ZWEI ZAHLEN WERDEN HIER KORRIGIERT, UND DAS IST DER KERN:
   Die Vorschau heisst "So sehen dich Kunden". Wenn ihre Rahmen
   ein anderes Seitenverhaeltnis haben als die echten Stellen,
   zeigt sie einen anderen Ausschnitt - und der Anbieter waehlt
   sein Bild nach einem Bild, das es so nicht gibt.
     Karte draussen:   4:3          (war hier am Handy 16:10)
     Streifen draussen: etwa 3,8:1  (war hier 3:1)
   ========================================================= */

body.ea .ea-fo__vpb{ aspect-ratio: 19/5; }

body.ea .ea-fo__verkl{
    margin: -4px 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ea-ink-2, #45474A);
    max-width: 66ch;
}
body.ea .ea-fo__verkl b{ color: var(--ea-ink, #1E1E1C); font-weight: 600; }

/* Die zwei Knoepfe unter einer Vorschaukarte. Untereinander erst am
   Handy - nebeneinander sind sie dort je 120 px schmal und der Text
   bricht mitten im Wort. */
body.ea .ea-fo__vtun{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Das Label MIT dem versteckten Dateifeld ist der Knopf. Deshalb
   sieht es aus wie einer und faengt auch die Tastatur ab. */
body.ea .ea-fo__vk1{
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ea-accent, #3F5AD1);
    border-radius: 9px;
    background: var(--ea-accent-soft, #EEF1FE);
    font-size: 13.5px;
    color: var(--ea-accent-dark, #2F45A8);
    cursor: pointer;
}
body.ea .ea-fo__vk1:hover{ background: #E3E9FD; }
body.ea .ea-fo__vk1:focus-within{
    outline: 2px solid var(--ea-accent, #3F5AD1);
    outline-offset: 2px;
}

body.ea .ea-fo__vk2{
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    color: var(--ea-muted, #75777A);
    cursor: pointer;
}
body.ea .ea-fo__vk2:hover{
    border-color: var(--ea-ink-2, #45474A);
    color: var(--ea-ink, #1E1E1C);
}

/* Die Zeile darunter sagt in drei Woertern, was gerade gilt. Sie
   ist absichtlich klein und grau: Sie ist eine Auskunft, keine
   Aufforderung - "automatisch" ist ein voellig richtiger Zustand
   und soll nicht wie ein offener Posten aussehen. */
body.ea .ea-fo__vstand{
    margin: 7px 0 0;
    font-size: 13px;
    color: var(--ea-muted, #75777A);
}
body.ea .ea-fo__vstand--fehlt{ color: var(--ea-error, #A8432F); }

body.ea .ea-fo__vt code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--ea-surface, #F5F4F3);
}

@media (max-width: 700px){
    /* Der Ausschnitt der Karte ist draussen 4:3 - hier stand 16:10,
       und damit sah der Anbieter am Handy mehr von seinem Bild, als
       der Kunde spaeter sieht. */
    body.ea .ea-fo__vkb{ aspect-ratio: 4/3; }

    /* Zwei Knoepfe nebeneinander sind bei 390 px je 120 px breit.
       "Wieder automatisch" bricht dann mitten im Wort. */
    body.ea .ea-fo__vtun{ flex-direction: column; align-items: stretch; }
    body.ea .ea-fo__vk1{ justify-content: center; }
}


/* =========================================================
   TEIL BU - BEWERTUNGEN BEI GOOGLE
   Event ABC, 21.08.2026

   Zwei Stellen: das Kaestchen auf dem oeffentlichen Profil
   (.ea-gk) und der Kasten im Dienstleisterbereich (.ea-go).

   DIE WICHTIGSTE ENTSCHEIDUNG STEHT IN DEN GROESSEN
   Das Kaestchen auf dem Profil ist bewusst KLEIN. Stuende dort
   eine zweite grosse Sternenreihe, laese sich jedes Profil als
   "die echten Bewertungen sind da drueben" - und Event ABC
   haette sich selbst zur schlechteren Google-Kopie gemacht.
   Es steht deshalb VOR den eigenen Bewertungen, aber kleiner
   als sie: eine Zeile Auskunft, kein zweites Zeugnis.

   DER RAHMEN IST PFLICHT, NICHT ZIERDE
   Googles Richtlinien verlangen, dass fremde Inhalte erkennbar
   Google zugeordnet und optisch von allem anderen getrennt
   sind - "borders, backgrounds, or whitespace". Wer diesen
   Rahmen wegnimmt, weil er "unruhig" aussieht, nimmt die
   Trennung weg, die dort verlangt wird.

   WARUM DAS WORT "Google" UND KEIN LOGO
   Die Richtlinien lassen beides zu und nennen den Schriftzug
   ausdruecklich als Ersatz, wo der Platz knapp ist. Ein selbst
   nachgezeichnetes Google-G waere eine ungenaue Kopie einer
   fremden Marke - der Schriftzug ist genauso zulaessig und
   kann nicht falsch geraten sein.
   ========================================================= */

/* ---------- auf dem oeffentlichen Profil ----------
   HIER STAND EIN EIGENER KASTEN (.ea-gk), und er ist am 21.08.2026
   ersatzlos verschwunden. Nicht weil er haesslich war, sondern weil
   er am falschen Ort stand: weit unten, direkt ueber den eigenen
   Bewertungen - hinter Galerie und Anfrageformular.

   Es ist ein LINK. Wer eine Auskunft anklicken soll, muss sie sehen,
   ohne erst dreimal zu scrollen. Ein Verweis, den niemand findet,
   ist kein verkauftes Merkmal.

   Google steht jetzt als .ea-tag--goo oben in der Kaestchenreihe
   unter dem Namen - siehe weiter unten in diesem Teil. Die Regeln
   dafuer stehen dort.
   ---------------------------------------------------------------- */

/* ---------- im Dienstleisterbereich ---------- */

/* INNENMASS, NACHGETRAGEN AM 22.08.2026 (Fassung 162).

   .ea-b__karte bringt nur Rahmen, Hintergrund und Radius mit. Diese
   Karte hatte deshalb gar keinen Innenabstand: Die Ueberschrift
   "Deine Bewertungen bei Google" klebte am Rahmen, und der graue
   Kasten mit der Note stiess mit seiner eigenen Linie direkt an die
   Linie der Karte - zwei Striche im Abstand von null. Auf der Seite
   "Weitere Orte" dasselbe mit der Zeile "Im Umkreis von 25 km".

   Dieselben Masse wie auf der Seite "Anmeldung" (.ea-zg), damit die
   Karten im Bereich gleich atmen. */
body.ea .ea-go{ margin-bottom: 26px; padding: 22px 24px 24px; }

/* Der Google-Kasten steht seit Fassung 207 UNTEN, hinter der Liste
   "Wen du schon gefragt hast". Dort klebte er am Kasten darueber -
   zwei Rahmen, die sich beruehren, liest man als einen. (Fassung 208)

   WARUM EIN ZUSATZ UND KEIN margin-top AUF .ea-go:

   Dieselbe Klasse benutzt auch "Weitere Orte", und dort steht der
   Kasten weiterhin ganz oben, direkt unter der Einleitung. Ein
   margin-top auf .ea-go risse dort eine Luecke auf, die niemand
   bestellt hat.

   32px und nicht 26px: Das ist derselbe Abstand, den .ea-bw__h2
   ueber einer Abschnittsueberschrift haelt. Hier faengt ein neuer
   Abschnitt an, kein weiterer Kasten desselben. */
body.ea .ea-go--unten{ margin-top: 32px; }

body.ea .ea-go__kopf{
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}
body.ea .ea-go__h{
    margin: 0;
    font-family: var(--ea-serif);
    font-weight: 400;
    font-size: 20px;
    text-transform: none;
    letter-spacing: -.005em;
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-go__marke{
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ea-muted, #75777A);
    padding: 2px 8px;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 20px;
}

body.ea .ea-go__lead{
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ea-ink-2, #45474A);
    max-width: 68ch;
}
body.ea .ea-go__lead--warn b{ color: var(--ea-error, #A8432F); }
body.ea .ea-go__lead code,
body.ea .ea-go__lead--warn code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--ea-surface, #F5F4F3);
}

/* Eingabe und Knopf in einer Zeile, am Handy untereinander. */
body.ea .ea-go__form{ display: flex; flex-wrap: wrap; gap: 10px; }
body.ea .ea-go__form input{
    flex: 1 1 260px;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--ea-ink, #1E1E1C);
    box-sizing: border-box;
}
body.ea .ea-go__form input:focus{
    outline: 2px solid var(--ea-accent, #3F5AD1);
    outline-offset: 1px;
    border-color: var(--ea-accent, #3F5AD1);
}

/* ---------- verbunden ---------- */
body.ea .ea-go__da{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 20px;
    padding: 16px 18px;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 12px;
    background: var(--ea-surface, #F7F6F5);
}
body.ea .ea-go__zahl{
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex: 0 0 auto;
}
body.ea .ea-go__zahl b{
    font-family: var(--ea-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-go__zahl span{ font-size: 13.5px; color: var(--ea-muted, #75777A); }

body.ea .ea-go__wer{ flex: 1 1 220px; min-width: 0; }
body.ea .ea-go__name{
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ea-ink, #1E1E1C);
    overflow-wrap: anywhere;
}
body.ea .ea-go__klein{
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ea-muted, #75777A);
}
body.ea .ea-go__klein--warn{ color: var(--ea-error, #A8432F); }
body.ea .ea-go__hin{ margin-top: 10px; }

body.ea .ea-go__loesen{ margin-left: auto; flex: 0 0 auto; }
body.ea .ea-go__weg{
    height: 36px;
    padding: 0 13px;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    color: var(--ea-muted, #75777A);
    cursor: pointer;
}
body.ea .ea-go__weg:hover{
    border-color: var(--ea-error, #A8432F);
    color: var(--ea-error, #A8432F);
}

/* Die Sperre fuer kostenlose Konten - dasselbe Muster wie bei
   "Bewertungen einholen" und beim Vergleich. Es steht hier
   trotzdem eigens, weil .ea-bw__sperre eine eigene Karte ist
   und diese hier IN einer Karte sitzt. */
body.ea .ea-go__sperre{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 12px;
    background: var(--ea-surface, #F7F6F5);
}
body.ea .ea-go__sperre b{ display: block; color: var(--ea-ink, #1E1E1C); font-size: 15px; }
body.ea .ea-go__sperre p{
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ea-ink-2, #45474A);
}
body.ea .ea-go__sperre .ea-bw__sperretun{ grid-column: 2; margin-top: 12px; }

body.ea .ea-go__regeln{ margin-top: 16px; }
/* Steht die Aufklapp-Zeile als ERSTES in der Karte (Seite "Weitere
   Orte"), braucht sie oben keine zweite Linie - die Karte hat schon
   eine. Ohne das stehen zwei Striche uebereinander. */
body.ea .ea-go > .ea-aufklapp:first-child{ border-top: 0; padding-top: 0; }
body.ea .ea-go > .ea-aufklapp:first-child > summary{ padding-top: 0; }
/* Und unten dasselbe umgekehrt: Die Schlusslinie der letzten
   Aufklapp-Zeile schwebte seit dem Innenmass frei ueber dem
   Kartenrand. Eine Linie kurz vor einer zweiten Linie sieht aus wie
   ein Versehen. */
body.ea .ea-go > .ea-aufklapp:last-of-type{ border-bottom: 0; }

@media (max-width: 619.98px){
    body.ea .ea-go{ padding: 18px 16px 20px; }
    body.ea .ea-go__form input{ flex: 1 1 100%; }
    body.ea .ea-go__form .ea-kn{ width: 100%; box-sizing: border-box; text-align: center; }
    /* Der Knopf zum Loesen rutscht sonst neben den Namen und wird
       80 px schmal. */
    body.ea .ea-go__loesen{ margin-left: 0; width: 100%; }
    body.ea .ea-go__weg{ width: 100%; }
}

/* ---------- "Meintest du einen anderen?" (TEIL BU, 21.08.2026) ----
   Doppelte Google-Eintraege desselben Betriebs sind haeufig. Die
   Liste steht deshalb direkt unter dem verbundenen Eintrag - nicht
   aufklappbar, nicht kleingedruckt: Wer den falschen verbunden hat,
   soll es sehen, bevor er die Seite verlaesst. */
body.ea .ea-go__andere{
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px dashed var(--ea-line, #E7E2DE);
    border-radius: 12px;
}
body.ea .ea-go__anderekopf{
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--ea-ink-2, #45474A);
}
body.ea .ea-go__anderez{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--ea-line, #E7E2DE);
}
body.ea .ea-go__anderez:first-of-type{ border-top: 0; }
body.ea .ea-go__anderen{ flex: 1 1 auto; min-width: 0; }
body.ea .ea-go__anderen b{
    display: block;
    font-size: 14.5px;
    color: var(--ea-ink, #1E1E1C);
    overflow-wrap: anywhere;
}
body.ea .ea-go__anderen span{
    display: block;
    font-size: 12.5px;
    color: var(--ea-muted, #75777A);
    overflow-wrap: anywhere;
}
body.ea .ea-go__anderez .ea-go__weg{ flex: 0 0 auto; }

@media (max-width: 619.98px){
    /* Nebeneinander bleibt bei 390 px fuer den Knopf nichts uebrig -
       "Diesen nehmen" braucht 118 px, der Name den Rest. */
    body.ea .ea-go__anderez{ flex-direction: column; align-items: stretch; gap: 8px; }
    body.ea .ea-go__anderez .ea-go__weg{ width: 100%; }
}

/* ---------- Google auf der Karte (TEIL BU, 21.08.2026) -----------
   ES GIBT KEINE EIGENE ZEILE MEHR.

   Am 21.08. stand hier eine: ".ea-c__goo", klein und grau unter
   Bewertung und Preis. Sie war inhaltlich richtig und gestalterisch
   falsch - Karten MIT Google wurden hoeher als Karten ohne, und das
   Raster der Ergebnisliste zerfiel. In einer Liste, in der jede
   zweite Karte anders hoch ist, sieht man die Karten nicht mehr,
   nur noch das Zickzack.

   Jetzt ersetzt Google den Satz "noch keine Bewertung" an genau
   seiner Stelle. Die Karte aendert ihre Hoehe damit nie - und
   Google steht nur dort, wo wir selbst nichts zu sagen haben.

   MERKSATZ: In einem Raster ist jede zusaetzliche Zeile eine
   Aenderung an ALLEN Karten, auch an denen, die sie nicht haben.

   Uebrig bleibt das kleine Wort "Google" als Herkunftsangabe. Es
   steht direkt vor der Note - ohne das laese sich die Zahl als
   unsere lesen, und das waere die eine Verwechslung, die hier
   wirklich schadet.

   OHNE RAHMEN UND OHNE STERN, und beides ist gemessen:
   In der zweispaltigen Kartenansicht am Handy hat die Zeile 185 px,
   davon nimmt der Preis 66. Fuer die Bewertung bleiben rund 111.

       "[GOOGLE] ★ 4,7 (312)"   128 px   passt nicht
       "[GOOGLE] 4,7 (312)"     114 px   zu knapp
       "Google ★ 4,7 (312)"     104 px   passt
       "Google 4,7 (312)"        90 px   passt bequem

   Bei 128 px rutschte "auf Anfrage" in die naechste Zeile, und die
   Karte war eine Zeile hoeher als ihre Nachbarin - genau der Fehler,
   den wir gerade behoben haben, nur an anderer Stelle. Gewaehlt ist
   die letzte Fassung: Sie ueberlebt auch einen laengeren Preis wie
   "ab 1.250 EUR".

   Der Stern faellt weg, weil er neben einer Zahl nichts erklaert -
   "4,7" ist auch ohne ihn eine Note. */
body.ea .ea-c__gk{
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--ea-muted, #75777A);
    margin-right: 1px;
}

/* Die Pille gibt es weiterhin - im Kasten auf dem Profil, wo Platz
   ist. Auf der Karte waere sie 24 px, die dort niemand hat. */
body.ea .ea-c__gm{
    flex: 0 0 auto;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ea-muted, #75777A);
    padding: 1px 6px;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 20px;
}

/* ---------- Google im Kopf des Profils (21.08.2026) --------------
   Der Kasten stand bis heute WEIT UNTEN, direkt ueber den eigenen
   Bewertungen. Das war der falsche Ort, und zwar aus einem Grund,
   der ueber Geschmack hinausgeht: Es ist ein LINK. Wer eine Auskunft
   anklicken soll, muss sie sehen, ohne erst an einer Galerie und
   einem Anfrageformular vorbeizuscrollen.

   Jetzt ist es ein .ea-tag in derselben Reihe wie "168 Bewertungen"
   und "Video im Profil" - direkt unter dem Namen, und in derselben
   Form. Es IST eine Auskunft ueber den Anbieter, keine eigene
   Abteilung.

   Das Wort "Google" steht als erstes darin und dunkler als der Rest.
   Googles Richtlinien verlangen, dass fremde Inhalte erkennbar
   zugeordnet und optisch getrennt sind - der eigene Rahmen des
   Kaestchens und die vorangestellte Quelle erfuellen beides. */
body.ea .ea-tag--goo{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    text-decoration: none;
    color: var(--ea-ink-2, #45474A);
}
body.ea a.ea-tag--goo:hover{
    border-color: var(--ea-accent, #3F5AD1);
    background: var(--ea-accent-soft, #EEF1FE);
    color: var(--ea-accent-dark, #2F45A8);
}
body.ea .ea-tag__goom{
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ea-ink, #1E1E1C);
}
body.ea a.ea-tag--goo:hover .ea-tag__goom{ color: inherit; }

/* Das Zeichen fuer "oeffnet ein neues Fenster". Es steht NUR im
   anklickbaren Fall - ohne Premium gibt es kein <a> und damit auch
   nichts, wohin es zeigen koennte. */
body.ea .ea-tag__gooweg{
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    opacity: .55;
}

/* Die Reihe darf umbrechen: "★ 5.0 · 168 Bewertungen", "Video im
   Profil" und "Google ★ 4,9 · 183 Bewertungen" sind zusammen breiter
   als ein Handybildschirm. */
body.ea .ea-badges{ display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* Der Hinweis auf die Premium-Stufe im Bereich. Steht UNTER dem
   verbundenen Eintrag, nicht als Sperre davor: Wer kostenlos ist,
   hat gerade etwas Nuetzliches getan und soll das auch merken. */
body.ea .ea-go__stufe{
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ea-accent-soft, #EEF1FE);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ea-ink-2, #45474A);
}
body.ea .ea-go__stufe b{ color: var(--ea-ink, #1E1E1C); }
body.ea .ea-go__stufe .ea-link{ white-space: nowrap; }

/* ---------- Google auf dem Bild (TEIL BU, 21.08.2026) ------------
   Steht dort NUR, wenn der Anbieter auch eigene Bewertungen hat.
   Hat er keine, steht Google unten an ihrer Stelle - beides
   zusammen waere dieselbe Zahl zweimal auf einer Karte.

   WARUM AUFS BILD
   Die Zeile unten ist dann belegt, und die eigene Bewertung soll
   dort bleiben. Eine zusaetzliche Zeile darunter hat das Raster
   zerrissen: Karten mit Google wurden hoeher als Karten ohne. Das
   Bild hat dagegen Platz, den niemand braucht - oben links ist
   nichts, das Herz sitzt oben rechts, das Profilbild unten links.

   Die weisse Pille mit Schatten ist keine Zierde, sondern das
   Einzige, was auf einem beliebigen Foto lesbar bleibt: Der
   Untergrund kann ein weisses Brautkleid oder ein schwarzer Anzug
   sein, und Text ohne Traeger ist auf einem davon unsichtbar. */
body.ea .ea-c__gpin{
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 60px);
    padding: 4px 9px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
    font-size: 12px;
    line-height: 1.25;
    color: var(--ea-ink, #1E1E1C);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}
body.ea .ea-c__gpinm{
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ea-muted, #75777A);
}
body.ea .ea-c__gpinz{ color: var(--ea-muted, #75777A); }

/* max-width laesst 60 px fuer das Herz oben rechts frei. Bei einer
   sehr grossen Zahl wird die Pille also nicht breiter, sondern
   schneidet hinten ab - besser als eine Pille, die unter dem Herz
   verschwindet. */

@media (max-width: 619.98px){
    /* Zwei Karten nebeneinander: das Bild ist dort etwa 185 px breit.
       Die Pille darf davon nicht die Haelfte nehmen. */
    body.ea .ea-c__gpin{
        top: 6px; left: 6px;
        padding: 3px 7px;
        font-size: 11px;
        gap: 4px;
        max-width: calc(100% - 46px);
    }
    body.ea .ea-c__gpinm{ font-size: 9.5px; }
}

/* ---------- Google in den Sternen rechts oben (22.08.2026) --------
   Nach dem Aufraeumen der Testkonten standen dort fuenf Sterne ohne
   eine Zahl darunter: Der Kasten zeigte immer fuenf, weil er die
   Note nie hatte pruefen muessen.

   MERKSATZ: Ein Bild, das jede Auskunft gleich darstellt, ist keine
   Auskunft. Wo nichts zu sagen ist, faellt der Kasten jetzt weg -
   das entscheidet die Vorlage, nicht das Stylesheet.

   Hier steht nur, wie Googles Fassung aussieht: dieselben Sterne,
   aber blasser, und darunter dieselbe Zeile mit dem Wort "Google"
   davor. Blasser, weil es nicht unsere Bewertung ist und auf den
   ersten Blick unterscheidbar sein muss - nicht, weil sie weniger
   wert waere. */
body.ea .ea-stars--goo{ opacity: .75; }

body.ea .ea-rate--goo{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--ea-muted, #75777A);
}
body.ea .ea-rate--goo b{ color: var(--ea-ink, #1E1E1C); font-weight: 600; }
body.ea a.ea-rate--goo:hover{ color: var(--ea-accent, #3F5AD1); }
body.ea a.ea-rate--goo:hover b{ color: inherit; }

body.ea .ea-rate__goom{
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ea-ink, #1E1E1C);
}
body.ea a.ea-rate--goo:hover .ea-rate__goom{ color: inherit; }

/* Am Rechner steht Google schon rechts oben in den Sternen. Das
   Kaestchen unter dem Namen waere dann dieselbe Zahl ein zweites Mal
   auf demselben Bildschirm.

   Am Handy ist der Sternekasten ausgeblendet (.ea-hide-mobile, bis
   991.98 px) - dort ist das Kaestchen die EINZIGE Stelle und muss
   bleiben. Genau dieselbe Arbeitsteilung wie bei .ea-tag__note.

   991.98 und nicht 900: .ea-hide-mobile greift bis 991.98. Die
   beiden Zahlen gehoeren zusammen, sonst gibt es ein Fenster, in dem
   Google zweimal oder gar nicht steht. */
@media (min-width: 992px){
    body.ea .ea-tag--goo--handy{ display: none; }
}

/* Der Zusatz unter der Tagesgrenze im kostenlosen Eintrag. Klein und
   grau: Es ist eine Erklaerung, keine Aufforderung - und ausdruecklich
   KEINE Verkaufsanzeige. Wer gerade eine Einladung schreibt, soll
   nicht an dieser Stelle zum Buchen gedraengt werden. */
body.ea .ea-b__hinweis--goe{
    display: inline-block;
    margin-top: 4px;
    color: var(--ea-muted, #75777A);
}


/* ------------------------------------------------------------------
   DIE DRITTE FARBE: "ich habe eine Frage"
   Event ABC, 22.08.2026
   ------------------------------------------------------------------

   Es gab gruen (erledigt) und rot (ging nicht). Gefehlt hat die Farbe
   fuer den haeufigsten Ausgang einer Suche, die raet: Ich habe etwas
   gefunden, aber ich glaube es nicht.

   Am 22.08.2026 stand fuer den Hochzeitsfotografen yamaweddings ein
   Brautmodengeschaeft in einem GRUENEN Kasten. Gruen liest sich als
   Ergebnis, und wer ein Ergebnis liest, prueft nicht mehr nach.

   Gelb, nicht rot: Es ist kein Fehler. Es ist eine Rueckfrage, und
   sie hat eine Antwort, die einen Klick weit weg liegt. */
body.ea .ea-bw__meldung--frage{
    background: #FDF6E3; border-color: #EDDCB0; color: #7A5B15;
}

/* Die Auswahl darunter gehoert optisch zur Frage, nicht zum Bestand.
   Der Streifen links verbindet beide, ohne einen zweiten Kasten um
   den Kasten zu legen. */
body.ea .ea-go__andere--frage{
    border-left: 3px solid #EDDCB0;
    padding-left: 14px;
}
body.ea .ea-go__andere--frage .ea-go__anderekopf{ color: #7A5B15; }


/* ------------------------------------------------------------------
   NACHBARORTE - die Zeile ueber der bezahlten Reihe
   Event ABC, 22.08.2026 (Fassung 137)
   ------------------------------------------------------------------

   "auch aus der Umgebung" steht neben "bezahlte Platzierung", nicht
   darunter: Eine zusaetzliche Zeile ueber der Reihe schoebe die
   Karten nach unten, und zwar NUR auf den Seiten, auf denen es
   Gaeste gibt. Dieselbe Seite saehe dann je nach Ort unterschiedlich
   hoch aus - derselbe Fehler wie am 21.08. bei der Google-Zeile auf
   der Karte.

   Am Handy faellt sie weg. Dort ist die Kopfzeile schon voll, der
   Ort steht ohnehin unter jedem Namen, und drei Angaben
   nebeneinander auf 390 px werden zu drei Zeilen. */
body.ea .ea-spon__um{
    color: var(--ea-muted, #75777A);
    font-size: 12.5px;
}
body.ea .ea-spon__um::before{
    content: "·";
    margin-right: 7px;
    opacity: .5;
}

@media (max-width: 767.98px){
    body.ea .ea-spon__um{ display: none; }
}

/* Die Ortsliste im Bereich benutzt dieselben Bausteine wie die
   Google-Auswahl (.ea-go__andere / .ea-go__anderez). Sie hat nur
   keinen zweiten Textteil - deshalb steht der Name allein und der
   Knopf rechts. */
body.ea .ea-go__anderen b:only-child{ font-size: 15px; }

/* Der Zusatz unter einer Zeile der Stufentabelle. Klein und grau -
   er sagt, WIE weit, nicht DASS. (Fassung 138) */
body.ea .ea-vgl__zu{
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ea-muted, #75777A);
}


/* ------------------------------------------------------------------
   ORT AUSWAEHLEN STATT EINTIPPEN
   Event ABC, 22.08.2026 (Fassung 143)
   ------------------------------------------------------------------

   Die Vorschlagsklappe unter dem Feld "weitere Orte". Sie liegt
   ABSOLUT ueber dem, was darunter steht - eine Klappe, die den Rest
   der Seite nach unten schiebt, laesst den Knopf unter dem Finger
   wegrutschen, waehrend man ihn drueckt.

   Deshalb braucht der Rahmen ein position: relative, und deshalb ist
   das Feld in einen eigenen Kasten gewickelt: .ea-go__form ist ein
   Flex-Behaelter, und ein absolut gesetztes Kind darin haengt sonst
   an der falschen Kante. */
body.ea .ea-go__feld{
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}
body.ea .ea-go__feld input{ width: 100%; }

body.ea .ea-go__vs{
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 288px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
    padding: 4px;
}
body.ea .ea-go__vs[hidden]{ display: none; }

body.ea .ea-go__vsz{
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 15px;
    color: var(--ea-ink, #1E1E1C);
    cursor: pointer;
}
body.ea .ea-go__vsz:hover,
body.ea .ea-go__vsz:focus{ background: var(--ea-sand, #F6F3F0); outline: none; }


/* ------------------------------------------------------------------
   ANMELDEN - das Pop-up
   Event ABC, 22.08.2026 (Fassung 150)
   ------------------------------------------------------------------

   Der Dialog steckt weiter in Bootstraps .modal (zwoelf Stellen
   oeffnen ihn ueber data-bs-toggle), aber alles darin ist neu. Die
   Bootstrap-Klassen .modal-content, .form-control und
   .modal-form-btn-main sind raus - sie bringen ihre eigene
   Schriftgroesse und ihren eigenen Rahmen mit, und beides passt
   nicht zum Rest.

   Die Felder sind 46 px hoch statt 44 wie sonst im Bereich: Auf
   einem Handy ist dies das erste, was jemand tippt, oft mit einer
   Hand und im Gehen. Zwei Pixel sind hier billiger als ein
   Fehlversuch. */
body.ea .ea-anm .modal-dialog{ max-width: 424px; }

body.ea .ea-anm__box{
    border: 0;
    border-radius: 16px;
    background: #fff;
    padding: 26px 24px 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
}

body.ea .ea-anm__kopf{
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin: 0 0 6px;
}
body.ea .ea-anm__h{
    font-family: var(--ea-serif); font-weight: 400;
    font-size: 25px; line-height: 1.15; margin: 0;
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-anm__zu{
    flex: 0 0 auto; width: 34px; height: 34px; margin: -6px -6px 0 0;
    border: 0; border-radius: 50%; background: none; cursor: pointer;
    color: var(--ea-muted, #75777A);
}
body.ea .ea-anm__zu svg{ width: 20px; height: 20px; display: block; margin: auto; }
body.ea .ea-anm__zu:hover{ background: var(--ea-sand, #F6F3F0); }

body.ea .ea-anm__lead{
    margin: 0 0 18px; font-size: 14.5px; line-height: 1.5;
    color: var(--ea-muted, #75777A);
}

body.ea .ea-anm__lab{
    display: block; margin: 0 0 6px;
    font-size: 13px; color: var(--ea-muted, #75777A);
}

body.ea .ea-anm__feld{
    width: 100%; height: 46px; padding: 0 14px; margin: 0 0 14px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 10px;
    background: #fff; font: inherit; font-size: 16px;
    color: var(--ea-ink, #1E1E1C);
    box-sizing: border-box;
}
/* 16 px und keinen Punkt weniger: Unter 16 px zoomt iOS beim
   Hineintippen in das Feld hinein und die halbe Seite ist weg. */
body.ea .ea-anm__feld:focus{
    outline: none; border-color: var(--ea-ink, #1E1E1C);
}

/* Das Passwortfeld traegt den "anzeigen"-Knopf rechts INNEN. Innen
   und nicht daneben, damit die Zeile so breit bleibt wie die
   daruber - zwei verschieden breite Felder untereinander sehen aus
   wie ein Fehler. */
body.ea .ea-anm__pwzeile{ position: relative; }
body.ea .ea-anm__pwzeile .ea-anm__feld{ padding-right: 92px; }
body.ea .ea-anm__zeigen{
    position: absolute; right: 6px; top: 6px; height: 34px;
    padding: 0 10px; border: 0; border-radius: 8px; background: none;
    font: inherit; font-size: 13px; color: var(--ea-muted, #75777A);
    cursor: pointer;
}
body.ea .ea-anm__zeigen:hover{ background: var(--ea-sand, #F6F3F0); }

body.ea .ea-anm__bleiben{
    display:flex;align-items:center;gap:9px;margin:-2px 0 10px;
    font-size:14px;color:var(--ea-ink,#1E1E1C);cursor:pointer;
}
body.ea .ea-anm__bleiben input{ width:19px;height:19px;margin:0;accent-color:var(--ea-accent,#3F5AD1); }
/* ea-anm__faceid entfernt (LIEFERUNG 93) - der Face-ID-Absatz im Anmeldedialog ist weg. */

body.ea .ea-anm__fehler{
    margin: -4px 0 12px; padding: 10px 12px; border-radius: 10px;
    background: #FCEFEE; border: 1px solid #F0CFCB; color: #9E332B;
    font-size: 14px; line-height: 1.45;
}
/* Der Anmeldelink ist keine Absage, sondern eine Auskunft. */
body.ea .ea-anm__fehler--ok{
    background: #EAF4EE; border-color: #C9E3D4; color: #2A6A44;
}

body.ea .ea-anm__kn{ width: 100%; height: 46px; margin: 2px 0 0; }

body.ea .ea-anm__unten{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 14px 0 0;
}
body.ea .ea-anm__link{
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 14px; color: var(--ea-ink, #1E1E1C);
    text-decoration: underline; text-underline-offset: 3px;
}
body.ea .ea-anm__link:hover{ color: var(--ea-muted, #75777A); }

@media (max-width: 767.98px){
    /* Am Handy von unten und ueber die ganze Breite - dort steht der
       Daumen. Ein mittig schwebendes Kaestchen zwingt ihn nach oben. */
    body.ea .ea-anm .modal-dialog{
        max-width: none; margin: 0; position: absolute; left: 0; right: 0; bottom: 0;
    }
    /* Gemessen am 22.08.2026 bei 390 px: OHNE diese Zeile stand das
       Fenster trotzdem in der Mitte. Bootstrap gibt .modal-dialog-
       centered eine Mindesthoehe von calc(100% - 1rem) und zentriert
       den Inhalt darin - der Kasten haengt dann zwar unten am
       Bildschirmrand, ist aber 828 px hoch und leer. min-height:0
       laesst ihn wieder auf seine eigene Hoehe schrumpfen. */
    body.ea .ea-anm .modal-dialog-centered{
        min-height: 0; align-items: flex-end;
    }
    body.ea .ea-anm__box{
        border-radius: 18px 18px 0 0; padding: 22px 18px calc(20px + env(safe-area-inset-bottom));

        /* Gemessen bei 740 x 360 (Handy quer): ohne Deckel stand die
           Ueberschrift 12 px ueber dem oberen Bildschirmrand - und
           weil der Kasten unten festhaengt, war sie nicht zu
           erreichen. Jetzt scrollt der Kasten in sich selbst.
           dvh steht danach, weil es auf dem iPhone die WIRKLICH
           sichtbare Hoehe meint; wo es fehlt, gilt die Zeile davor. */
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
    }
}


/* ------------------------------------------------------------------
   ANMELDUNG - E-Mail-Adresse und Passwort  (/profile/anmeldung)
   Event ABC, 22.08.2026 (Fassung 160)
   ------------------------------------------------------------------

   .ea-b__karte bringt NUR Rahmen, Hintergrund und Radius mit - kein
   Innenmass. Jede Seite im Bereich setzt ihre Abstaende selbst
   (siehe .ea-go bei "Weitere Orte", .ea-bw bei den Bewertungen).
   Fassung 159 hat das uebersehen: Die Ueberschrift klebte am
   Rahmen und der Knopf hing halb aus der Karte heraus.

   Die Felder bekommen eine HOECHSTBREITE. Ein Passwortfeld ueber
   die ganze Breite eines 1400-px-Bildschirms sieht aus wie ein
   Fehler und liest sich auch so - Eingabefelder sollen so breit
   sein wie das, was hineinkommt. */
body.ea .ea-zg{ padding: 22px 24px 24px; }
body.ea .ea-zg + .ea-zg{ margin-top: 18px; }

body.ea .ea-zg__h{
    font-family: var(--ea-serif); font-weight: 400;
    font-size: 21px; line-height: 1.2; margin: 0 0 10px;
    color: var(--ea-ink, #1E1E1C);
}

body.ea .ea-zg__wert{ font-size: 17px; font-weight: 600; margin: 0 0 4px; }

body.ea .ea-zg__hin{
    margin: 0 0 18px; font-size: 14.5px; line-height: 1.5;
    color: var(--ea-muted, #75777A); max-width: 62ch;
}
body.ea .ea-zg__hin:last-child{ margin-bottom: 0; }

/* Der aufklappbare Teil bekommt Luft nach oben und eine feine Linie:
   Er gehoert zur Karte, ist aber ein anderer Schritt. */
body.ea .ea-zg__auf{
    margin-top: 20px; padding-top: 20px;
    border-top: 1px solid var(--ea-line, #E7E2DE);
}

body.ea .ea-zg .ea-anm__lab{ margin-bottom: 6px; }
body.ea .ea-zg .ea-anm__feld{ max-width: 460px; margin-bottom: 16px; }
body.ea .ea-zg .ea-anm__fehler{ max-width: 460px; margin: -4px 0 14px; }

body.ea .ea-zg__reihe{
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap; margin-top: 4px;
}
body.ea .ea-zg__kn{ width: auto; min-width: 190px; height: 46px; }

@media (max-width: 619.98px){
    body.ea .ea-zg{ padding: 18px 16px 20px; }
    body.ea .ea-zg .ea-anm__feld,
    body.ea .ea-zg .ea-anm__fehler{ max-width: none; }
    /* Am Handy ueber die volle Breite - dort ist ein 190 px breiter
       Knopf neben viel Leere die schlechtere Antwort. */
    body.ea .ea-zg__kn{ width: 100%; }
    body.ea .ea-zg__reihe{ gap: 12px; }
}


/* ------------------------------------------------------------------
   REGISTRIEREN - die zwei Zusaetze zum Anmeldefenster
   Event ABC, 22.08.2026 (Fassung 165)
   ------------------------------------------------------------------

   Das Fenster benutzt sonst die Regeln von .ea-anm (Fassung 150) -
   dieselben Felder, dieselben Masse. Hier stehen nur die drei
   Dinge, die es im Anmeldefenster nicht gibt: zwei Felder
   nebeneinander, der Haken, und der kleine Satz unter einem Feld. */
body.ea .ea-reg__zwei{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}
/* Unter 380 px bleiben von 12 px Abstand zwei Felder von je 155 px -
   fuer "Nachname" reicht das, fuer eine getippte Adresse nicht mehr.
   Dann lieber untereinander. */
@media (max-width: 379.98px){
    body.ea .ea-reg__zwei{ grid-template-columns: 1fr; }
}

/* Der Satz gehoert zum Feld darueber, nicht zum naechsten Block:
   deshalb sitzt er dicht daran und traegt den Abstand nach unten. */
body.ea .ea-anm__hin{
    margin: -8px 0 16px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ea-muted, #75777A);
}

body.ea .ea-reg__zu{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 16px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ea-ink-2, #45474A);
    cursor: pointer;
}
/* 18 px und nicht 13: Ein Haken, den man am Handy dreimal antippen
   muss, ist die letzte Huerde vor dem Eintrag - und die duemmste. */
body.ea .ea-reg__zu input{
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin-top: 1px;
    accent-color: var(--ea-accent, #4A61DE);
}
body.ea .ea-reg__zu a{ color: var(--ea-ink, #1E1E1C); text-underline-offset: 2px; }

body.ea .ea-anm__klein{ font-size: 14px; color: var(--ea-muted, #75777A); }


/* ------------------------------------------------------------------
   MITGLIEDSCHAFT - die drei Stufen im Bereich
   Event ABC, 23.08.2026 (Fassung 167)
   ------------------------------------------------------------------

   Eigene Klassen (.ea-stf) und nicht die der oeffentlichen Seite
   (.ea-stufe): Dort stehen die Stufen als Schaufenster nebeneinander,
   hier als Auswahl neben dem, was schon gebucht ist. Die Karten
   muessen unterschiedlich hoch sein duerfen, und eine davon traegt
   eine Marke. */
body.ea .ea-stf{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 22px;
    align-items: stretch;
}
@media (max-width: 900px){
    body.ea .ea-stf{ grid-template-columns: 1fr; }
}

body.ea .ea-stf__k{
    position: relative;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
}
/* Die gebuchte Stufe traegt einen Rahmen in der Akzentfarbe - nicht
   eine andere Hintergrundfarbe: Sie soll erkennbar sein, nicht
   werben. */
body.ea .ea-stf__k.is-jetzt{
    border-color: var(--ea-accent, #4A61DE);
    box-shadow: 0 0 0 1px var(--ea-accent, #4A61DE) inset;
}
body.ea .ea-stf__marke{
    position: absolute; top: -10px; left: 20px;
    background: var(--ea-accent, #4A61DE); color: #fff;
    font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px;
}

body.ea .ea-stf__n{
    margin: 0 0 4px;
    font-family: var(--ea-serif); font-weight: 400; font-size: 22px;
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-stf__p{ margin: 0 0 16px; font-size: 15px; color: var(--ea-ink-2, #45474A); }
body.ea .ea-stf__p b{ font-size: 26px; font-weight: 600; }
body.ea .ea-stf__p i{ font-style: normal; color: var(--ea-muted, #75777A); }

body.ea .ea-stf__liste{
    list-style: none; margin: 0 0 18px; padding: 0;
    font-size: 14.5px; line-height: 1.5; color: var(--ea-ink-2, #45474A);
}
body.ea .ea-stf__liste li{
    position: relative; padding: 0 0 8px 22px;
}
/* Der Haken als Zeichnung und nicht als Zeichen aus der Schrift:
   Emojis sehen auf jedem Geraet anders aus, und auf manchen bunt. */
body.ea .ea-stf__liste li::before{
    content: ""; position: absolute; left: 2px; top: 6px;
    width: 10px; height: 5px;
    border-left: 1.8px solid var(--ea-accent, #4A61DE);
    border-bottom: 1.8px solid var(--ea-accent, #4A61DE);
    transform: rotate(-45deg);
}

/* Der Fuss klebt unten: Drei Karten mit verschieden vielen Punkten
   haetten sonst die Knoepfe auf drei verschiedenen Hoehen. */
body.ea .ea-stf__fuss{ margin-top: auto; }
body.ea .ea-stf__kn{ width: 100%; height: 46px; }
body.ea .ea-kn--aus{
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 46px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 10px;
    background: var(--ea-sand, #F6F3F0); color: var(--ea-muted, #75777A);
    font-size: 13.5px; cursor: default;
}
body.ea .ea-stf__klein{
    display: block; font-size: 13px; line-height: 1.45;
    color: var(--ea-muted, #75777A);
}

body.ea .ea-stf__tab{
    width: 100%; border-collapse: collapse; font-size: 14.5px;
}
body.ea .ea-stf__tab th{
    text-align: left; font-weight: 600; font-size: 13px;
    color: var(--ea-muted, #75777A); padding: 0 12px 8px 0;
}
body.ea .ea-stf__tab td{
    padding: 10px 12px 10px 0;
    border-top: 1px solid var(--ea-line, #E7E2DE);
}

/* Die Zahlungstabelle hat seit Fassung 172 eine Spalte mehr. Am
   Handy passen fuenf Spalten nicht nebeneinander - dann wandert die
   Tabelle IN IHREM Kasten zur Seite und nicht die ganze Seite. */
body.ea .ea-stf__tabaussen{ overflow-x: auto; }
body.ea .ea-stf__tab{ min-width: 460px; }
body.ea .ea-stf__tab td a{ color: var(--ea-accent, #4A61DE); }

/* ================================================================
   TEIL BF – das Fragezeichen an der bezahlten Reihe
   23.08.2026 (Fassung 182)

   Aus

       PREMIUM-ANBIETER   bezahlte Platzierung

   wird

       PREMIUM-ANBIETER · Anzeige ⓘ

   und hinter dem ⓘ steht, was das heisst.

   ----------------------------------------------------------------
   WARUM DER HINWEIS NICHT GANZ VERSCHWINDET

   Wenn Geld die Reihenfolge beeinflusst, muss der Besucher das
   erkennen koennen, OHNE erst irgendwo draufzuklicken (§ 5a Abs. 4
   UWG). Deshalb bleibt ein sichtbares Wort stehen - nur ein
   kuerzeres und gelaeufigeres.

   Was das Gesetz ausdruecklich in einem eigenen, gut erreichbaren
   Bereich zulaesst, ist die ERKLAERUNG, wie die Reihenfolge
   zustande kommt (§ 5b Abs. 2 UWG). Genau dafuer ist das ⓘ da.

   ----------------------------------------------------------------
   OHNE JAVASCRIPT

   <details> und <summary> koennen auf- und zuklappen von sich aus,
   samt Tastatur und Vorlesegeraet. Ein eigenes Skript waere hier
   drei Dinge, die kaputtgehen koennen, fuer nichts.

   Der durchsichtige Deckel (::before am offenen Kasten) faengt den
   naechsten Klick irgendwo auf der Seite ab und schliesst damit -
   so, wie man es von einem Kaestchen erwartet.
   ================================================================ */

body.ea .ea-spon__was{ position: relative; line-height: 0; }

/* Das Dreieck, das der Browser vor <summary> setzt, muss auf beiden
   Wegen weg - Firefox hoert auf list-style, Safari auf das eigene
   ::-webkit-details-marker. */
body.ea .ea-spon__was > summary{
    list-style: none;
    cursor: pointer;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--ea-muted, #75777A);
}
body.ea .ea-spon__was > summary::-webkit-details-marker{ display: none; }
body.ea .ea-spon__was > summary::marker{ content: ""; }

body.ea .ea-spon__was > summary:hover,
body.ea .ea-spon__was[open] > summary{
    background: var(--ea-surface, #F5F4F3);
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-spon__was > summary svg{ width: 16px; height: 16px; display: block; }

/* Der Deckel: liegt hinter dem Kaestchen ueber der ganzen Seite und
   schliesst es beim naechsten Klick. */
body.ea .ea-spon__was[open] > summary::before{
    content: "";
    position: fixed; inset: 0;
    z-index: 58;
}

body.ea .ea-spon__blase{
    position: absolute; z-index: 60;
    top: 28px; left: -10px;
    width: 330px; max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(23, 24, 26, .14);
    padding: 16px 18px;
    font-size: 13.5px; line-height: 1.55;
    text-align: left;
}

/* Die Kopfzeile setzt jedes <b> in Versalien und gesperrt. Das gilt
   fuer die Ueberschrift der Reihe - nicht fuer den Fliesstext im
   Kaestchen darunter, der darin liegt. */
body.ea .ea-spon__blase b{
    text-transform: none; letter-spacing: 0; font-size: inherit;
}
body.ea .ea-spon__blase > b{
    display: block; font-size: 14px; margin: 0 0 8px;
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-spon__blase p{
    margin: 0 0 9px; color: #3A3D42; font-size: 13.5px;
}
body.ea .ea-spon__blase p:last-child{ margin: 0; }

/* Der Punkt vor "Anzeige" - dieselbe Trennung wie bei
   .ea-spon__um daneben, damit die Zeile eine Zeile bleibt und nicht
   drei lose Woerter. */
body.ea .ea-spon__mark::before{ content: "·"; margin-right: 7px; opacity: .5; }

/* ----------------------------------------------------------------
   DAS KREUZ ZUM SCHLIESSEN

   Auf dem Handy ist nicht zu erraten, wie man das Kaestchen wieder
   zubekommt: Das Fragezeichen liegt darunter verdeckt, und "irgendwo
   danebentippen" muss man erst einmal wissen. Ein Kreuz oben rechts
   ist die Antwort, die jeder schon kennt.

   Es steht auch am Rechner - eine Bedienung, die auf zwei Geraeten
   verschieden aussieht, muss man zweimal lernen.
   ---------------------------------------------------------------- */
body.ea .ea-spon__zu{
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px; padding: 0;
    border: 0; background: none; border-radius: 50%;
    color: var(--ea-muted, #75777A); cursor: pointer;
    display: grid; place-items: center;
}
body.ea .ea-spon__zu:hover{ background: var(--ea-surface, #F5F4F3); color: var(--ea-ink, #1E1E1C); }
body.ea .ea-spon__zu svg{ width: 16px; height: 16px; display: block; }

/* Damit die Ueberschrift nicht unter das Kreuz laeuft. */
body.ea .ea-spon__blase > b{ padding-right: 30px; }

/* ----------------------------------------------------------------
   AM HANDY: UNTER DIE UEBERSCHRIFT, NICHT AN DEN UNTEREN RAND

   Erster Versuch war ein Blatt am unteren Bildschirmrand, wie beim
   Anmeldefenster. Das war falsch - UNTEN STEHT DIE LEISTE mit
   Suchen, Merkliste und Mein Bereich. Sie liegt fest ueber der
   Seite, und der letzte Absatz des Kaestchens verschwand darunter.

   Ein Kaestchen, dessen Ende man nicht lesen kann, ist keine
   Erklaerung.

   Jetzt haengt es dort, wo es hingehoert: direkt unter der Zeile
   "PREMIUM-ANBIETER · Anzeige", ueber die volle Breite der Reihe.
   Die steht immer oben im Bild - dort ist Platz, und der Bezug zum
   Fragezeichen bleibt sichtbar.

   Dafuer gibt .ea-spon__was am Handy seine Position ab: Bezugspunkt
   ist dann die ganze Reihe (.ea-spon) und nicht mehr das kleine
   Zeichen.
   ---------------------------------------------------------------- */
@media (max-width: 767.98px){

    body.ea .ea-spon{ position: relative; }
    body.ea .ea-spon__was{ position: static; }

    body.ea .ea-spon__blase{
        position: absolute;
        /* 48 und nicht 34: Die Kopfzeile endet 42 Punkt unter der
           Oberkante der Reihe (gemessen, nicht geschaetzt). Bei 34
           lag das Kaestchen zur Haelfte darauf. */
        left: 0; right: 0; top: 48px; bottom: auto;
        width: auto; max-width: none;
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(23, 24, 26, .22);
        padding: 18px 18px 20px;
    }
}

/* ================================================================
   TEIL BG – das Geprüft-Zeichen antippbar, und der Weg dorthin
   23.08.2026 (Fassung 183)

   ----------------------------------------------------------------
   1. DAS ZEICHEN

   Die Erklaerung am Haken erschien bisher nur bei :hover und
   :focus. Am Handy gibt es kein Zeigen - und in der Ergebnisliste
   steht der Haken MITTEN IN DER KARTE, und die Karte ist ein Link.
   Ein Tipp fuehrte aufs Profil, ohne dass je jemand erfahren
   haette, was das Zeichen bedeutet.

   js/siegel-1.0.js faengt den Klick ab und setzt .is-offen. Die
   Regel unten ist alles, was es dafuer im Stylesheet braucht.

   OHNE das Skript bleibt alles beim Alten - :hover und :focus
   stehen unveraendert weiter oben. Kein Bruch, nur weniger.
   ================================================================ */

body.ea .ea-geprueft{ cursor: pointer; }

body.ea .ea-geprueft.is-offen .ea-geprueft__box{
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* ----------------------------------------------------------------
   2. DAS DATEIFELD auf /profile/geprueft

   Das eingebaute Dateifeld sieht in jedem Browser anders aus und in
   keinem gut. Deshalb liegt es durchsichtig ueber einer eigenen
   Flaeche - dieselbe Bauart wie beim Profilfoto.
   ---------------------------------------------------------------- */

body.ea .ea-gp__feld{
    position: relative; display: block;
    border: 1.5px dashed var(--ea-line, #E7E2DE);
    border-radius: 12px;
    padding: 22px 18px;
    background: var(--ea-surface, #F5F4F3);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
body.ea .ea-gp__feld:hover{
    border-color: var(--ea-accent, #4A61DE);
    background: #fff;
}

/* Nicht display:none - ein verstecktes Feld ist fuer die Tastatur
   und fuer Vorlesegeraete weg. Durchsichtig und darueberliegend
   bleibt es bedienbar. */
body.ea .ea-gp__feld input[type="file"]{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
body.ea .ea-gp__feld:focus-within{
    border-color: var(--ea-accent, #4A61DE);
    box-shadow: 0 0 0 3px rgba(74, 97, 222, .18);
}

body.ea .ea-gp__feldtext{
    display: block; text-align: center;
    font-size: 14.5px; color: var(--ea-muted, #75777A);
    word-break: break-word;
}

/* ================================================================
   TEIL BH – wie der Haken aussieht, auf /profile/geprueft
   23.08.2026 (Fassung 189)

   Eine Seite ueber ein Zeichen, auf der das Zeichen nicht zu sehen
   ist, verlangt vom Leser, dass er es sich vorstellt - und er weiss
   nicht einmal, welches gemeint ist. Auf einer Karte stehen mehrere
   kleine Bilder nebeneinander.

   Deshalb steht dort jetzt sein eigener Name mit seinem eigenen
   Foto und dem Haken daneben, gesetzt wie in der Ergebnisliste.
   ================================================================ */

body.ea .ea-gp__zeig{ padding: 20px 22px 18px; }

body.ea .ea-gp__zeigh{
    margin: 0 0 14px;
    font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ea-muted, #75777A);
}

body.ea .ea-gp__reihe{ display: flex; align-items: center; gap: 13px; }

body.ea .ea-gp__ava{
    flex: 0 0 auto; display: block; line-height: 0;
    width: 46px; height: 46px; border-radius: 50%;
    overflow: hidden; background: var(--ea-surface, #F5F4F3);
}
body.ea .ea-gp__ava img{ width: 100%; height: 100%; object-fit: cover; display: block; }

body.ea .ea-gp__wer{ min-width: 0; }

/* Die Zeile mit Namen und Haken. inline-flex und nicht einfach
   nebeneinander: So sitzt der Haken auf der Mitte des Namens und
   nicht auf der Grundlinie - genauso wie auf der Karte. */
body.ea .ea-gp__name{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 17px; font-weight: 700; line-height: 1.25;
    color: var(--ea-ink, #1E1E1C);
}

body.ea .ea-gp__unter{
    display: block; margin-top: 2px;
    font-size: 14px; color: var(--ea-muted, #75777A);
}

body.ea .ea-gp__zeigu{
    margin: 16px 0 0; font-size: 13.5px; line-height: 1.55;
    color: var(--ea-muted, #75777A);
}

/* ================================================================
   TEIL BI – das Geprüft-Zeichen klappt jetzt selbst auf
   23.08.2026 (Fassung 190)

   Der Haken ist seit dieser Fassung ein <details> und kein <span>
   mehr. Grund steht in templates/geprueft-klein.inc.tpl: Am Handy
   gibt ein Tipp auf ein <span tabindex> KEINEN Fokus - Safari
   fokussiert bei Beruehrung nur Formularfelder. Die Erklaerung war
   damit fuer die Haelfte aller Besucher unerreichbar.

   Die Regeln fuer :hover und :focus weiter oben (TEIL Q) bleiben
   stehen: Es gibt den Haken noch als <span> in geprueft.inc.tpl
   und in der Anfragekarte. Was hier steht, kommt dazu.
   ================================================================ */

/* Das Dreieck des Browsers muss auf beiden Wegen weg. */
body.ea details.ea-geprueft > summary{
    list-style: none;
    display: inline-flex; align-items: center;
    cursor: pointer;
}
body.ea details.ea-geprueft > summary::-webkit-details-marker{ display: none; }
body.ea details.ea-geprueft > summary::marker{ content: ""; }

/* <details> ist von Haus aus ein Block. Der Haken steht aber MITTEN
   IN EINER ZEILE, neben dem Namen - also inline und mittig. */
body.ea details.ea-geprueft{
    display: inline-flex; align-items: center;
    position: relative;
}

body.ea details.ea-geprueft[open] > .ea-geprueft__box{
    opacity: 1; visibility: visible; transform: none;
}

/* Der durchsichtige Deckel: faengt den naechsten Klick irgendwo auf
   der Seite ab und schliesst damit. Ohne ihn bekaeme man das
   Kaestchen am Handy nur wieder zu, indem man den Haken erneut
   trifft - und der ist 18 Punkt gross. */
body.ea details.ea-geprueft[open] > summary::before{
    content: "";
    position: fixed; inset: 0;
    z-index: 29;
}

/* Der Kasten muss ueber dem Deckel liegen, sonst faengt der Deckel
   auch den Klick auf den Kasten ab und man kann ihn nicht einmal
   markieren. */
body.ea details.ea-geprueft > .ea-geprueft__box{ z-index: 31; }

/* Am Handy waere ein 264 Punkt breiter Kasten am rechten Rand halb
   ausserhalb. Er darf dort bis an den linken Rand der Karte
   ausweichen. */
@media (max-width: 767.98px){
    /* Gemessen bei 390 px: Der Haken steht etwa 158 Punkt von links,
       der Kasten setzt bei -22 an. 240 Punkt breit endet er bei 376 -
       gerade noch drin. Mit den 264 aus der Grundregel waeren es 400
       gewesen, also 10 Punkt neben dem Schirm.

       Die 140 im calc() sind der Abstand des Hakens vom linken Rand
       plus etwas Luft. Auf einem 320er Schirm bleibt der Kasten damit
       180 Punkt breit - schmal, aber der Satz darin ist kurz. Lieber
       schmal und ganz zu lesen als breit und halb daneben. */
    body.ea details.ea-geprueft > .ea-geprueft__box{
        max-width: min(240px, calc(100vw - 140px));
    }
}

/* ================================================================
   TEIL BJ – der Hilfebereich, /profile/hilfe
   23.08.2026 (Fassung 191)

   Sehr viel Text. Deshalb zwei Dinge, die sonst niemand braucht:
   eine engere Zeilenbreite und mehr Luft zwischen den Absaetzen.

   Eine Zeile mit hundert Zeichen laesst das Auge beim Zeilenwechsel
   die Spur verlieren - man liest dieselbe Zeile zweimal und weiss
   nicht warum. 68 Zeichen sind die Spanne, in der man laengere
   Texte am Stueck lesen kann.
   ================================================================ */

body.ea .ea-hi{ padding: 24px 26px 26px; }

/* Der Kasten selbst muss mit, sonst nutzt die Breite an den Absaetzen
   nichts: .ea-aufklapp__in steht seit jeher auf 60ch (Zeile ~7662),
   und der aeussere Riegel gewinnt immer - ein Absatz kann nicht
   breiter werden als das, worin er steht. Sichtbar war das als
   Treppe: Der Einleitungstext lief bis zum Rand, die aufgeklappten
   Antworten hoerten ein Stueck davor auf. */
body.ea .ea-hi .ea-aufklapp__in{ max-width: 68ch; }

body.ea .ea-hi__p,
body.ea .ea-hi .ea-aufklapp__in p,
body.ea .ea-hi .ea-aufklapp__in li{
    max-width: 68ch;
    font-size: 15px; line-height: 1.65;
    color: #3A3D42;
}
body.ea .ea-hi__p{ margin: 0 0 14px; }
body.ea .ea-hi .ea-aufklapp__in p{ margin: 0 0 13px; }
body.ea .ea-hi .ea-aufklapp__in p:last-child{ margin-bottom: 0; }

body.ea .ea-hi .ea-aufklapp__in ul,
body.ea .ea-hi .ea-aufklapp__in ol{
    margin: 0 0 14px; padding-left: 22px;
}
body.ea .ea-hi .ea-aufklapp__in li{ margin: 0 0 7px; }

body.ea .ea-hi__h3{
    margin: 22px 0 12px;
    font-size: 16px; font-weight: 700;
    color: var(--ea-ink, #1E1E1C);
}

/* Die nummerierten Schritte im ersten Kasten - etwas groesser
   gesetzt als eine gewoehnliche Liste, weil sie den ganzen Ablauf
   tragen. */
body.ea .ea-hi__schritte{
    margin: 0 0 16px; padding-left: 22px;
    max-width: 68ch;
}
body.ea .ea-hi__schritte li{
    margin: 0 0 10px;
    font-size: 15px; line-height: 1.6; color: #3A3D42;
}

/* Die Klappabschnitte untereinander, mit einer Trennlinie dazwischen
   statt eigener Rahmen: Vierzehn Kaesten mit vierzehn Rahmen sehen
   aus wie ein Formular, nicht wie ein Text. */
body.ea .ea-hi__k{ border-top: 1px solid var(--ea-line-2, #F0ECE8); }
body.ea .ea-hi__k:last-child{ border-bottom: 1px solid var(--ea-line-2, #F0ECE8); }

body.ea .ea-hi__k > summary{
    padding: 15px 0; cursor: pointer;
    font-size: 16px; font-weight: 600;
    color: var(--ea-ink, #1E1E1C);
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
body.ea .ea-hi__k > summary::-webkit-details-marker{ display: none; }
body.ea .ea-hi__k > summary::marker{ content: ""; }

/* DAS ZEICHEN RECHTS KOMMT NICHT VON HIER.

   Hier stand bis zuletzt ein selbstgebautes Pluszeichen, das beim
   Aufklappen zum Minus werden sollte - zwei Striche aus
   linear-gradient. Auf dem Bildschirm sah das Ergebnis aus wie ein
   verrutschtes Sternchen.

   Der Grund: Diese Abschnitte tragen ZWEI Klassen,
   .ea-aufklapp und .ea-hi__k. Und .ea-aufklapp summary::after
   (Zeile ~7657) zeichnet dort laengst ein Winkelchen - aus
   border-right und border-bottom, um 45 Grad gedreht. Mein Plus
   setzte nur background und content. Borders bleiben Borders: Das
   Winkelchen lag weiter darueber, und beides zusammen ergab den
   Krakel.

   Behoben nicht durch einen Ueberschreiber mehr, sondern durch
   Weglassen. Das Winkelchen ist auf dieser Seite ohnehin das
   richtige Zeichen - es steht in den Anbieterinformationen und auf
   der Siegelseite genauso. Wer es einmal kennt, kennt es hier
   wieder.

     MERKSATZ: Wer eine fremde Klasse mitbenutzt, erbt auch das,
     woran er nicht gedacht hat. Erst nachsehen, was sie schon
     zeichnet - sonst zeichnet man daneben, nicht darueber.

   Bleibt nur die Groesse: Die Ueberschriften hier sind etwas
   groesser als in den Anbieterinformationen, deshalb auch etwas
   mehr Luft ueber und unter der Zeile. */
body.ea .ea-hi__k > summary:hover{ color: var(--ea-accent, #4A61DE); }

body.ea .ea-hi__k .ea-aufklapp__in{ padding: 0 0 20px; }

@media (max-width: 767.98px){
    body.ea .ea-hi{ padding: 20px 18px 22px; }
    body.ea .ea-hi__k > summary{ font-size: 15.5px; }
}

/* ================================================================
   TEIL BK - DER RUNDGANG (Fassung 192)

   Zwei Teile: ein Ring um das, was gerade gezeigt wird, und das
   Kaestchen mit dem Text. Beide haengen an position:fixed und
   werden von js/tour-1.0.js gesetzt - hier steht nur, wie sie
   aussehen.

   DER RING IST GLEICHZEITIG DER SCHATTEN UEBER DER SEITE. Der
   box-shadow mit 9999px Streuung faerbt alles ausserhalb des Rings
   ab; innen bleibt es hell. Ein Loch in einer Flaeche, ohne
   clip-path und ohne zweites Element - und vor allem, ohne das
   gezeigte Element anzufassen. Haette man es stattdessen mit
   z-index nach vorn geholt, waere es aus seinem Kasten gesprungen,
   sobald irgendein Vorfahr overflow oder transform hat. Genau das
   ist bei den Karten der Fall.

   pointer-events:none, und das ist Absicht: Die Seite bleibt
   bedienbar. Wer mitten in der Tour etwas anklickt, soll das
   duerfen - die Tour meldet sich auf der naechsten Seite wieder
   und bietet an, weiterzumachen. Ein Rundgang, der die Seite
   sperrt, ist eine Geiselnahme.
   ================================================================ */

body.ea .ea-tour__ring{
    position: fixed; z-index: 1300; display: none;
    pointer-events: none;
    border-radius: 14px;
    border: 2px solid var(--ea-accent, #4A61DE);
    box-shadow: 0 0 0 9999px rgba(20, 20, 19, .48);
    transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}

body.ea .ea-tour{
    position: fixed; z-index: 1301;
    width: 360px; max-width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: 20px 22px 18px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(20, 20, 19, .28);
    transition: left .18s ease, top .18s ease;
}

body.ea .ea-tour__zu{
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; padding: 7px;
    border: 0; border-radius: 8px; background: none;
    color: var(--ea-muted, #75777A); cursor: pointer;
}
body.ea .ea-tour__zu:hover{ background: var(--ea-surface, #F5F4F3); color: var(--ea-ink, #1E1E1C); }
body.ea .ea-tour__zu svg{ width: 100%; height: 100%; display: block; }

body.ea .ea-tour__zahl{
    margin: 0 0 6px; padding-right: 30px;
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ea-accent, #4A61DE);
}

body.ea .ea-tour__t{
    margin: 0 0 8px; padding-right: 20px;
    font-family: var(--ea-serif, Georgia, serif);
    font-size: 19px; font-weight: 600; line-height: 1.25;
    color: var(--ea-ink, #1E1E1C);
}

body.ea .ea-tour__x{
    margin: 0 0 18px;
    font-size: 14.5px; line-height: 1.6; color: #3A3D42;
}

body.ea .ea-tour__tun{
    display: flex; align-items: center; gap: 10px;
}

body.ea .ea-tour__weiter{
    margin-left: auto;
    padding: 10px 20px;
    border: 0; border-radius: 10px;
    background: var(--ea-accent, #4A61DE); color: #fff;
    font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
body.ea .ea-tour__weiter:hover{ filter: brightness(1.08); }

body.ea .ea-tour__zurueck{
    padding: 10px 4px;
    border: 0; background: none;
    font: inherit; font-size: 14.5px; color: var(--ea-muted, #75777A);
    cursor: pointer; text-decoration: underline;
}
body.ea .ea-tour__zurueck:hover{ color: var(--ea-ink, #1E1E1C); }

/* Der Knopf in der Hilfe, mit dem man den Rundgang noch einmal
   startet. Steht dort unten in eigener Zeile. */
body.ea .ea-hi__tourkn{
    display: inline-block; margin-top: 4px;
    padding: 11px 20px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 10px;
    background: #fff; color: var(--ea-ink, #1E1E1C);
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
body.ea .ea-hi__tourkn:hover{ border-color: var(--ea-accent, #4A61DE); color: var(--ea-accent, #4A61DE); }

@media (max-width: 619.98px){
    /* Am Handy nimmt das Kaestchen fast die ganze Breite - bei 360px
       fester Breite blieben links und rechts vier Pixel, und der Text
       braeche nach drei Woertern um. */
    body.ea .ea-tour{ width: calc(100vw - 20px); padding: 18px 18px 16px; }
    body.ea .ea-tour__t{ font-size: 18px; }
    body.ea .ea-tour__x{ font-size: 14px; margin-bottom: 16px; }
}

/* Zwei Kleinigkeiten IM Text der Sprechblase (Fassung 193).

   Der Rundgang setzt seinen Text als HTML zusammen, damit ein
   Beispiellink oder ein hervorgehobener Rat nicht als nackter
   Fliesstext untergeht. */
body.ea .ea-tour__rat{
    display: block; margin: 12px 0 2px;
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-tour__code{
    display: inline-block; margin-top: 4px;
    padding: 2px 7px; border-radius: 6px;
    background: var(--ea-surface, #F5F4F3);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px; color: var(--ea-ink, #1E1E1C);
    word-break: break-all;
}

/* Ein Beispiellink im Hilfetext - etwa der Google-Kurzlink. Er muss
   umbrechen duerfen: Am Handy passt er sonst nicht in die Zeile und
   schiebt die ganze Seite seitwaerts. */
body.ea .ea-hi__code{
    display: inline-block;
    padding: 3px 8px; border-radius: 6px;
    background: var(--ea-surface, #F5F4F3);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px; color: var(--ea-ink, #1E1E1C);
    word-break: break-all;
}

/* ================================================================
   TEIL BL - DIE SPRACHAUSWAHL
   Event ABC, 24.08.2026 (Fassung 196)

   Sie liegt ueber allem und laesst sich nicht wegklicken: Sie
   erscheint genau einmal, und danach steht fest, in welcher Sprache
   der Bereich spricht. Ein halb beantwortetes "in welcher Sprache?"
   gibt es nicht.

   z-index 1400 - ueber dem Rundgang (1300/1301). Der startet erst,
   wenn hier geantwortet ist.
   ================================================================ */

body.ea .ea-sw{
    position: fixed; inset: 0; z-index: 1400;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(20, 20, 19, .58);
    overflow-y: auto;
}

body.ea .ea-sw__kasten{
    width: 100%; max-width: 460px;
    box-sizing: border-box;
    padding: 28px 28px 22px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(20, 20, 19, .3);
}

body.ea .ea-sw__hut{
    margin: 0 0 6px;
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ea-accent, #4A61DE);
}

body.ea .ea-sw__titel{
    margin: 0 0 10px;
    font-family: var(--ea-serif, Georgia, serif);
    font-size: 24px; font-weight: 600; line-height: 1.2;
    color: var(--ea-ink, #1E1E1C);
}

body.ea .ea-sw__text{
    margin: 0 0 20px;
    font-size: 14.5px; line-height: 1.6; color: #3A3D42;
}

body.ea .ea-sw__liste{ display: grid; gap: 8px; margin-bottom: 20px; }

body.ea .ea-sw__w{
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ea-line, #E7E2DE); border-radius: 12px;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
body.ea .ea-sw__w:hover{ border-color: var(--ea-accent, #4A61DE); }

/* Das echte Auswahlfeld bleibt da, nur unsichtbar: Es traegt die
   Bedienung mit der Tastatur und dem Vorlesegeraet. Weggenommen
   (display:none) waere beides weg. */
body.ea .ea-sw__w input{
    position: absolute; opacity: 0; width: 1px; height: 1px;
    margin: 0; pointer-events: none;
}

body.ea .ea-sw__haken{
    flex: 0 0 22px; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border: 1.6px solid var(--ea-line, #E7E2DE); border-radius: 50%;
    color: #fff;
}
body.ea .ea-sw__haken svg{ width: 13px; height: 13px; opacity: 0; }

body.ea .ea-sw__w:has(input:checked){
    border-color: var(--ea-accent, #4A61DE);
    background: rgba(74, 97, 222, .05);
}
body.ea .ea-sw__w:has(input:checked) .ea-sw__haken{
    background: var(--ea-accent, #4A61DE);
    border-color: var(--ea-accent, #4A61DE);
}
body.ea .ea-sw__w:has(input:checked) .ea-sw__haken svg{ opacity: 1; }

/* :has() koennen alle Browser seit Ende 2023. Fuer aeltere setzt
   js/sprachwahl-1.0.js zusaetzlich die Klasse is-an - dann sieht es
   genauso aus. Zwei Wege zum selben Bild, damit keiner leer ausgeht. */
body.ea .ea-sw__w.is-an{
    border-color: var(--ea-accent, #4A61DE);
    background: rgba(74, 97, 222, .05);
}
body.ea .ea-sw__w.is-an .ea-sw__haken{
    background: var(--ea-accent, #4A61DE);
    border-color: var(--ea-accent, #4A61DE);
}
body.ea .ea-sw__w.is-an .ea-sw__haken svg{ opacity: 1; }

/* Der Tastaturfokus muss sichtbar sein - sonst weiss der, der mit
   der Tabulatortaste geht, nie, wo er steht. */
body.ea .ea-sw__w:focus-within{ outline: 2px solid var(--ea-accent, #4A61DE); outline-offset: 2px; }

body.ea .ea-sw__n{ display: flex; flex-direction: column; gap: 1px; }
body.ea .ea-sw__n b{ font-size: 16px; font-weight: 600; color: var(--ea-ink, #1E1E1C); }
body.ea .ea-sw__n i{ font-size: 12.5px; font-style: normal; color: var(--ea-muted, #75777A); }

body.ea .ea-sw__kn{ width: 100%; }

body.ea .ea-sw__klein{
    margin: 12px 0 0;
    font-size: 12.5px; line-height: 1.5; color: var(--ea-muted, #75777A);
    text-align: center;
}

@media (max-width: 619.98px){
    body.ea .ea-sw{ align-items: flex-start; padding: 12px; }
    body.ea .ea-sw__kasten{ padding: 22px 18px 18px; }
    body.ea .ea-sw__titel{ font-size: 21px; }
}

/* ================================================================
   TEIL BM - DER SPRACHUMSCHALTER IM KONTOMENUE
   Event ABC, 24.08.2026 (Fassung 197)

   Er sitzt im Klappmenue hinter dem Namen, nicht als eigenes
   Zeichen in der Kopfzeile: Die ist am Handy schon voll (Logo,
   Herz, Foto, Name), und ein sechstes Element haette etwas
   verdeckt.

   KEINE FLAGGEN. Eine Flagge ist ein Land, keine Sprache. Russisch
   spricht man in vielen Laendern, und eine russische neben einer
   ukrainischen Fahne ist seit 2022 keine harmlose Auswahl mehr -
   ausgerechnet fuer die Leute, fuer die dieser Bereich gebaut ist.
   Englisch mit britischer oder amerikanischer Fahne waere fuer die
   Haelfte der Leser falsch.

   Stattdessen der Name in seiner eigenen Schrift. Das ist auch das
   Einzige, was jemand sicher erkennt, der die Seite gerade nicht
   lesen kann.
   ================================================================ */

body.ea .ea-sprmenu__kopf{
    padding: 8px 16px 4px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ea-muted, #75777A);
}

body.ea .ea-sprmenu__w{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; width: 100%;
    border: 0; background: none; text-align: left;
    font: inherit; cursor: pointer;
}

body.ea .ea-sprmenu__w svg{
    flex: 0 0 15px; width: 15px; height: 15px;
    color: var(--ea-accent, #4A61DE);
}

body.ea .ea-sprmenu__w.is-an{ font-weight: 600; }

/* Waehrend umgestellt wird, bleibt das Menue stehen und der Punkt
   wird blass - sonst klickt man in der Sekunde bis zum Neuladen
   noch eine zweite Sprache an. */
body.ea .ea-sprmenu__w[disabled]{ opacity: .5; cursor: default; }

/* ==================================================================
   Die fuenf Bilder der Karte (Fassung 209)

   Eine Reihe von Kacheln im Kartenformat 4:3 - dasselbe Verhaeltnis
   wie in der Ergebnisliste. Wer hier ein Bild sieht, sieht es genau
   so beschnitten, wie der Kunde es bekommt.

   WARUM KEINE GITTER-SPALTEN, SONDERN EINE ROLLENDE REIHE

   Fuenf Kacheln nebeneinander sind am Rechner schoen. Auf einem
   Handy waeren sie fuenf Briefmarken. Also eine Reihe, die auf
   schmalen Bildschirmen seitlich rollt - dann sind es zwei bis drei
   erkennbare Bilder statt fuenf unerkennbarer.
   ================================================================== */
body.ea .ea-fo__kf{
    margin-top: 26px;
    padding: 22px 24px 24px;
    background: #fff;
    border: 1px solid var(--ea-line-2);
    border-radius: 16px;
}

/* Das Woertchen "Premium" neben der Ueberschrift - dieselbe Marke wie
   der GOOGLE-Zusatz bei den Bewertungen, damit man sie als dieselbe
   Sorte Hinweis liest. */
body.ea .ea-fo__kfp{
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    font-family: var(--ea-sans);
    font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ea-accent);
    border: 1px solid var(--ea-line);
    border-radius: 999px;
    vertical-align: middle;
}

body.ea .ea-fo__kfreihe{
    display: flex;
    gap: 12px;
    margin: 16px 0 0;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

body.ea .ea-fo__kfk1{
    position: relative;
    flex: 0 0 168px;
    margin: 0;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    background: #F5F4F3;
}

body.ea .ea-fo__kfk1 img{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Die Platznummer. Sie steht IM Bild und nicht darunter: Beim
   Verschieben soll man sehen, was sich aendert, ohne den Blick zu
   bewegen. */
body.ea .ea-fo__kfnr{
    position: absolute; top: 8px; left: 8px;
    padding: 3px 8px;
    font-size: 11.5px; font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,.55);
    border-radius: 999px;
}

body.ea .ea-fo__kfkn{
    position: absolute; right: 6px; bottom: 6px;
    display: flex; gap: 4px;
}

body.ea .ea-fo__kfb{
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; line-height: 1;
    color: var(--ea-ink);
    background: rgba(255,255,255,.94);
    border: 1px solid var(--ea-line);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
}
body.ea .ea-fo__kfb:hover{ background: #fff; }
body.ea .ea-fo__kfb:disabled{ opacity: .35; cursor: default; }
body.ea .ea-fo__kfb--weg{ color: var(--ea-error, #B3261E); }

body.ea .ea-fo__kfleer,
body.ea .ea-fo__kfhin{
    margin: 12px 0 0;
    font-size: 13px; line-height: 1.55;
    color: var(--ea-muted);
}

body.ea .ea-fo__kftun{
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 16px;
}

body.ea .ea-fo__kfk{
    display: inline-flex; align-items: center;
    padding: 9px 16px;
    font: inherit; font-size: 14px;
    color: var(--ea-ink);
    background: #fff;
    border: 1px solid var(--ea-line);
    border-radius: 10px;
    cursor: pointer;
}
body.ea .ea-fo__kfk:hover{ border-color: var(--ea-ink); }

/* Sind alle Plaetze belegt, werden die beiden Knoepfe stumpf. Nicht
   versteckt: Ein Knopf, der verschwindet, laesst den Anbieter suchen -
   einer, der grau dasteht, sagt "spaeter wieder". */
body.ea .ea-fo__kftun--aus .ea-fo__kfk{
    opacity: .45; cursor: default; border-color: var(--ea-line-2);
}

@media (max-width: 700px){
    body.ea .ea-fo__kf{ padding: 18px 16px 20px; }
    body.ea .ea-fo__kfk1{ flex: 0 0 150px; }
}

/* =========================================================
   TEXTSEITEN AUS DER VERWALTUNG
   Datenschutz, AGB, Impressum und Hilfe. Flach, ruhig und auf eine
   angenehme Zeilenlaenge begrenzt; keine Karten und keine Schatten.
   ========================================================= */
body.ea .ea-textseite{
    padding: clamp(54px, 8vw, 112px) 0 clamp(72px, 10vw, 140px);
    background: #fff;
}
body.ea .ea-textseite__wrap{ max-width: 1060px; }
body.ea .ea-textseite__kopf{
    padding-bottom: clamp(28px, 4vw, 48px);
    border-bottom: 1px solid var(--ea-line);
}
body.ea .ea-textseite__marke{
    margin: 0 0 12px;
    color: var(--ea-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
body.ea .ea-textseite h1{
    max-width: 900px;
    margin: 0;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--ea-ink);
}
body.ea .ea-textseite__inhalt{
    max-width: 820px;
    padding-top: clamp(34px, 5vw, 64px);
    color: var(--ea-ink);
    font-size: 17px;
    line-height: 1.75;
}
body.ea .ea-textseite__inhalt h2,
body.ea .ea-textseite__inhalt h3,
body.ea .ea-textseite__inhalt h4{
    margin: 2.4em 0 .7em;
    color: var(--ea-ink);
    line-height: 1.25;
}
body.ea .ea-textseite__inhalt h2{ font-size: clamp(24px, 3vw, 32px); }
body.ea .ea-textseite__inhalt h3{ font-size: 21px; }
body.ea .ea-textseite__inhalt p{ margin: 0 0 1.25em; }
body.ea .ea-textseite__inhalt ul,
body.ea .ea-textseite__inhalt ol{ margin: 0 0 1.5em; padding-left: 1.35em; }
body.ea .ea-textseite__inhalt li{ margin: .45em 0; padding-left: .25em; }
body.ea .ea-textseite__inhalt a{ color: var(--ea-blue); text-underline-offset: 3px; }
body.ea .ea-textseite__inhalt hr{ margin: 42px 0; border: 0; border-top: 1px solid var(--ea-line); }

body.ea .ea-footer__link{
    display: block;
    margin: 0;
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
body.ea .ea-footer__link:hover{ color: #fff; }

body.ea .ea-reg__prinzip,
body.ea .ea-dl__kontaktprinzip,
body.ea .ea-hilfe__prinzip,
body.ea .ea-kontaktprinzip{
    padding: 14px 16px;
    color: var(--ea-ink);
    background: #EEF1FF;
    border-left: 4px solid var(--ea-blue);
    line-height: 1.55;
}
body.ea .ea-reg__prinzip{ margin: 0 0 20px; font-size: 14px; }
/* ea-anm__nurdl entfernt (LIEFERUNG 93) - stand nur beim Anmeldedialog, dort jetzt weg. */
body.ea .ea-kontomenu__kopf{
    padding: 8px 16px 5px;
    color: var(--ea-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
body.ea .ea-mnav__nurdl{
    margin: 0 0 4px;
    color: var(--ea-muted);
    font-size: 13px;
    line-height: 1.45;
}
body.ea .ea-dl__kontaktprinzip{ max-width: 760px; margin: 26px 0 24px; font-size: 16px; }
body.ea .ea-kontaktprinzip{ max-width: 850px; margin: 18px 0 26px; }

body.ea .ea-video__zustimmung{
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px;
    color: var(--ea-muted);
    background: var(--ea-soft, #f6f6f4);
    text-align: center;
}
body.ea .ea-video__zustimmung p{ max-width: 480px; margin: 0; }

@media (max-width: 700px){
    body.ea .ea-textseite{ padding-top: 42px; }
    body.ea .ea-textseite__inhalt{ font-size: 16px; line-height: 1.68; }
}

/* Öffentliche Hilfe: kurze Antworten, flach und ohne Karten-Schatten. */
body.ea .ea-hilfe{ padding: clamp(50px, 7vw, 96px) 0 110px; background: #fff; }
body.ea .ea-hilfe__wrap{ max-width: 1120px; }
body.ea .ea-hilfe__kopf{ max-width: 900px; padding-bottom: 58px; }
body.ea .ea-hilfe__marke{ margin: 0 0 12px; color: var(--ea-blue); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body.ea .ea-hilfe h1{ margin: 0 0 20px; max-width: 820px; color: var(--ea-ink); font-size: clamp(38px, 5.5vw, 68px); line-height: 1.02; letter-spacing: -.045em; }
body.ea .ea-hilfe__kopf > p:not(.ea-hilfe__marke){ max-width: 680px; margin: 0; color: var(--ea-muted); font-size: 18px; line-height: 1.65; }
body.ea .ea-hilfe__kopf > .ea-hilfe__prinzip{ max-width: 760px; margin-top: 24px; color: var(--ea-ink); font-size: 16px; }
body.ea .ea-hilfe__sprung{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
body.ea .ea-hilfe__sprung a{ padding: 9px 14px; color: var(--ea-ink); border: 1px solid var(--ea-line); border-radius: 999px; text-decoration: none; }
body.ea .ea-hilfe__sprung a:hover{ color: var(--ea-blue); border-color: var(--ea-blue); }
body.ea .ea-hilfe__abschnitt{ display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(36px, 7vw, 90px); padding: 54px 0; border-top: 1px solid var(--ea-line); scroll-margin-top: 100px; }
body.ea .ea-hilfe__titel{ display: flex; gap: 16px; align-items: flex-start; }
body.ea .ea-hilfe__titel > span{ color: var(--ea-blue); font-size: 13px; font-weight: 700; }
body.ea .ea-hilfe__titel h2{ margin: -5px 0 7px; color: var(--ea-ink); font-size: 28px; letter-spacing: -.025em; }
body.ea .ea-hilfe__titel p{ margin: 0; color: var(--ea-muted); line-height: 1.55; }
body.ea .ea-hilfe__fragen details{ border-bottom: 1px solid var(--ea-line); }
body.ea .ea-hilfe__fragen details:first-child{ border-top: 1px solid var(--ea-line); }
body.ea .ea-hilfe__fragen summary{ position: relative; padding: 22px 46px 22px 0; color: var(--ea-ink); font-size: 17px; font-weight: 650; cursor: pointer; list-style: none; }
body.ea .ea-hilfe__fragen summary::-webkit-details-marker{ display: none; }
body.ea .ea-hilfe__fragen summary::after{ content: '+'; position: absolute; right: 4px; top: 18px; color: var(--ea-blue); font-size: 26px; font-weight: 400; }
body.ea .ea-hilfe__fragen details[open] summary::after{ content: '−'; }
body.ea .ea-hilfe__fragen details p{ margin: -4px 0 23px; max-width: 700px; color: var(--ea-muted); font-size: 16px; line-height: 1.7; }
body.ea .ea-hilfe__fragen details p + p{ margin-top: -12px; }
body.ea .ea-hilfe__fragen a{ color: var(--ea-blue); text-underline-offset: 3px; }
body.ea .ea-hilfe__kontakt{ display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-top: 54px; padding: 44px 0 0; border-top: 1px solid var(--ea-line); }
body.ea .ea-hilfe__kontakt h2{ margin: 0 0 10px; color: var(--ea-ink); font-size: clamp(28px, 4vw, 42px); letter-spacing: -.035em; }
body.ea .ea-hilfe__kontakt p:not(.ea-hilfe__marke){ margin: 0; color: var(--ea-muted); }

@media (max-width: 760px){
    body.ea .ea-hilfe{ padding-top: 40px; }
    body.ea .ea-hilfe__kopf{ padding-bottom: 42px; }
    body.ea .ea-hilfe__abschnitt{ grid-template-columns: 1fr; gap: 26px; padding: 42px 0; }
    body.ea .ea-hilfe__kontakt{ align-items: flex-start; flex-direction: column; }
}
/* ================================================================
   EVENT ABC RATGEBER — Fassung 26.08.2026
   Ruhig, ohne Schatten und vollständig im neuen Event-ABC-System.
   ================================================================ */
body.ea .ea-blog{--blog-blue:var(--ea-accent,#3F5AD1);--blog-soft:var(--ea-accent-soft,#EEF1FE);--blog-ink:var(--ea-ink,#1E1E1C);--blog-muted:var(--ea-muted,#71757B);--blog-line:var(--ea-line,#E7E2DE);--blog-warm:var(--ea-surface,#F5F4F3);color:var(--blog-ink);font-family:var(--ea-sans)}
body.ea .ea-blog a{text-decoration:none}
body.ea .ea-blog-crumbs{font-size:13px;color:var(--blog-muted);margin:0 0 34px;text-align:left}
body.ea .ea-blog-crumbs span{margin:0 8px;color:#a6a6a6}
body.ea .ea-blog-crumbs a:hover{color:var(--blog-ink)}
body.ea .ea-blog-eyebrow{font-size:14px;letter-spacing:0;text-transform:none!important;font-weight:600;color:var(--blog-blue);margin:0 0 10px}
body.ea .ea-blog-lead{font-size:19px;line-height:1.6;color:var(--ea-ink-2);max-width:760px;margin:18px auto 0}
body.ea .ea-blog-intro{padding-top:48px;text-align:left}
body.ea .ea-blog-intro h1,body.ea .ea-blog-article__head h1{font-family:var(--ea-serif);font-weight:400;line-height:1.08;letter-spacing:-.015em;margin:0}
body.ea .ea-blog-intro h1{font-size:clamp(32px,3vw,46px)!important;line-height:1.24!important;text-transform:none!important;letter-spacing:-.01em!important}
body.ea .ea-blog-intro .ea-blog-lead{margin-left:0;margin-right:0}
body.ea .ea-blog-chips{display:flex;justify-content:flex-start;gap:10px;flex-wrap:wrap;margin:28px 0 38px}
body.ea .ea-blog-chips button{border:1px solid var(--blog-line);background:#fff;border-radius:22px;padding:9px 17px;color:var(--ea-ink-2);font-size:14px;cursor:pointer}
body.ea .ea-blog-chips button:hover{border-color:var(--blog-ink)}
body.ea .ea-blog-chips button.is-active{background:var(--blog-ink);color:#fff;border-color:var(--blog-ink)}
body.ea .ea-blog-featured-label{margin-top:0;margin-bottom:10px;color:var(--blog-blue);font-size:14px;font-weight:600}
body.ea .ea-blog-featured{display:grid;grid-template-columns:minmax(460px,560px) minmax(0,1fr);align-items:center;background:#fff;border:0;border-radius:0;overflow:hidden;padding:24px 0}
body.ea .ea-blog-featured__media{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:12px;margin:0!important}
body.ea .ea-blog-featured__media img{width:100%;height:100%;min-height:0;object-fit:cover}
body.ea .ea-blog-featured__copy{padding:24px 0 24px 46px;display:flex;flex-direction:column;justify-content:center}
body.ea .ea-blog-card__meta{font-size:12.5px;color:var(--blog-muted);margin:0 0 11px}
body.ea .ea-blog-featured h2,body.ea .ea-blog-section-head h2,body.ea .ea-blog-service h2,body.ea .ea-blog-related>h2{font-family:var(--ea-serif);font-weight:400;line-height:1.16;text-transform:none!important}
body.ea .ea-blog-featured h2{font-size:clamp(26px,2.4vw,34px)!important;line-height:1.25!important;text-transform:none!important;letter-spacing:-.01em!important;margin:0 0 14px}
body.ea .ea-blog-featured__copy>p:not(.ea-blog-card__meta){color:var(--ea-ink-2);font-size:16px;margin:0}
body.ea .ea-blog-link{display:inline-flex;align-items:center;gap:8px;color:var(--blog-blue);font-weight:650;font-size:14px;margin-top:16px}
body.ea .ea-blog-link:hover{color:var(--ea-accent-dark)}
body.ea .ea-blog-list{padding-top:96px;padding-bottom:100px}
body.ea .ea-blog-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px}
body.ea .ea-blog-section-head h2{font-size:clamp(32px,3vw,42px);margin:0}
body.ea .ea-blog-section-head>p{color:var(--blog-muted);margin:0}
body.ea .ea-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 24px}
body.ea .ea-blog-card{border-top:1px solid var(--blog-line);padding-top:15px;min-width:0}
body.ea .ea-blog-card__media{display:block;overflow:hidden;border-radius:10px;background:var(--blog-warm);aspect-ratio:4/3}
body.ea .ea-blog-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
body.ea .ea-blog-card:hover .ea-blog-card__media img{transform:scale(1.015)}
body.ea .ea-blog-card__body{padding:17px 3px 0}
body.ea .ea-blog-card h3,body.ea .ea-blog-related__card h3{font-family:var(--ea-serif);font-weight:400;line-height:1.3;font-size:clamp(21px,2vw,25px);text-transform:none!important;letter-spacing:0!important;margin:0 0 10px}
body.ea .ea-blog-card__body>p:not(.ea-blog-card__meta){color:var(--ea-ink-2);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.ea .ea-blog-empty{border:1px solid var(--blog-line);padding:34px;text-align:center;color:var(--blog-muted)}
body.ea .ea-blog-service{background:var(--blog-soft);border-top:1px solid #dfe4fd;border-bottom:1px solid #dfe4fd}
body.ea .ea-blog-service__inner{min-height:235px;display:flex;align-items:center;justify-content:space-between;gap:30px}
body.ea .ea-blog-service h2{font-size:clamp(29px,3vw,39px);margin:0 0 7px}
body.ea .ea-blog-service__inner p:last-child{margin:0;color:#555b72}
body.ea .ea-blog-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blog-blue);color:#fff!important;border-radius:24px;padding:13px 22px;font-weight:650;white-space:nowrap;font-family:var(--ea-sans);font-size:14px}
body.ea .ea-blog-button:hover{background:var(--ea-accent-dark)}

body.ea .ea-blog--article{background:#fff!important;color:var(--blog-ink)!important}
body.ea .ea-blog--article>article{display:block;background:#fff!important;color:var(--blog-ink)!important}
body.ea .ea-blog-article__head{max-width:1040px;padding-top:48px;text-align:left;background:#fff!important;color:var(--blog-ink)!important}
body.ea .ea-blog-article__head .ea-blog-crumbs{margin-bottom:42px}
body.ea .ea-blog-article__head h1{font-size:clamp(32px,3vw,46px)!important;max-width:900px;margin:0;line-height:1.24!important;text-transform:none!important;letter-spacing:-.01em!important;font-weight:400!important}
body.ea .ea-blog-article__head h1,body.ea .ea-blog-article__head .ea-blog-lead{color:var(--blog-ink)!important}
body.ea .ea-blog-article__head .ea-blog-lead{color:var(--ea-ink-2)!important}
body.ea .ea-blog-article__head .ea-blog-lead{max-width:830px;margin:30px 0 0;font-size:19px;line-height:1.85}
body.ea .ea-blog-meta{display:flex;justify-content:flex-start;gap:0;color:var(--blog-muted);margin:28px 0 76px;font-size:12.5px;letter-spacing:.08em}
body.ea .ea-blog-meta span+span:before{content:"·";margin:0 12px}
body.ea .ea-blog-article__cover{width:100%;height:min(500px,43vw);object-fit:cover;border-radius:0}
body.ea .ea-blog-article__layout{max-width:1040px;display:flex;flex-direction:column;align-items:flex-start;gap:62px;padding-top:72px;padding-bottom:100px}
body.ea .ea-blog-toc{position:static;width:100%;height:auto;border:1px solid var(--blog-line);padding:26px 30px;font-size:13.5px;background:#fff}
body.ea .ea-blog-toc strong{display:block;margin-bottom:12px}
body.ea .ea-blog-toc div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 34px}
body.ea .ea-blog-toc a{color:var(--ea-ink-2);line-height:1.4}
body.ea .ea-blog-toc a.is-sub{padding-left:12px;color:var(--blog-muted)}
body.ea .ea-blog-toc a:hover{color:var(--blog-blue)}
body.ea .ea-blog-prose{width:min(100%,800px);font-family:var(--ea-sans);font-size:17px;line-height:1.82;color:var(--blog-ink);min-width:0}
body.ea .ea-blog-prose>p:first-child{font-size:22px;line-height:1.58;margin-top:0}
body.ea .ea-blog-prose h2{font-family:var(--ea-serif);font-size:clamp(29px,3vw,38px);line-height:1.22;font-weight:400;margin:56px 0 16px;scroll-margin-top:110px}
body.ea .ea-blog-prose h3{font-family:var(--ea-serif);font-size:24px;line-height:1.3;font-weight:400;margin:38px 0 12px;scroll-margin-top:110px}
body.ea .ea-blog-prose img{max-width:100%;height:auto;border-radius:10px;margin:28px 0}
body.ea .ea-blog-prose ul,body.ea .ea-blog-prose ol{padding-left:24px}
body.ea .ea-blog-prose li{margin:8px 0;padding-left:6px}
body.ea .ea-blog-prose a{color:var(--blog-blue);text-decoration:underline;text-underline-offset:3px}
body.ea .ea-blog-inline-cta{background:var(--blog-soft);color:var(--blog-ink);padding:26px 28px;border:1px solid #dfe4fd;border-left:4px solid var(--blog-blue);border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:48px 0 0;font-family:var(--ea-sans)}
body.ea .ea-blog-inline-cta h2{font-family:var(--ea-serif);font-size:25px;font-weight:400;line-height:1.25;text-transform:none!important;letter-spacing:0!important;color:var(--blog-ink)!important;margin:0 0 5px}
body.ea .ea-blog-inline-cta p{margin:0;color:var(--ea-ink-2);font-size:14px;line-height:1.55}
body.ea .ea-blog-inline-cta .ea-blog-button{text-decoration:none}
body.ea .ea-blog-related{border-top:1px solid var(--blog-line);padding-top:80px;padding-bottom:86px}
body.ea .ea-blog-related>h2{font-size:clamp(28px,2.6vw,36px)!important;line-height:1.25!important;text-transform:none!important;letter-spacing:-.01em!important;margin:0 0 30px}
body.ea .ea-blog-related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
body.ea .ea-blog-related__media{display:block;aspect-ratio:3/2;border-radius:10px;overflow:hidden;margin-bottom:15px;background:var(--blog-warm)}
body.ea .ea-blog-related__media img{width:100%;height:100%;object-fit:cover}
body.ea .ea-blog-related__card h3{text-transform:none!important}
body.ea .ea-blog-related__text{color:var(--ea-ink-2);font-size:14.5px;line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.ea .ea-blog-related__card .ea-blog-link{margin-top:13px}
body.ea .ea-blog-back{display:inline-block;margin-top:36px;color:var(--blog-blue);font-weight:650;font-size:14px}
@media(max-width:575px){body.ea .ea-blog-intro h1,body.ea .ea-blog-article__head h1{font-size:30px!important;line-height:1.24!important;text-transform:none!important}}
@media(max-width:991px){body.ea .ea-blog-featured{grid-template-columns:1fr}body.ea .ea-blog-featured__media img{min-height:300px;max-height:400px}body.ea .ea-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.ea .ea-blog-article__layout{grid-template-columns:1fr;gap:34px}body.ea .ea-blog-toc{position:static;border:1px solid var(--blog-line);padding:20px;border-radius:10px}body.ea .ea-blog-related__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){body.ea .ea-blog-intro,body.ea .ea-blog-article__head{padding-top:40px}body.ea .ea-blog-crumbs,body.ea .ea-blog-article__head .ea-blog-crumbs{margin-bottom:28px}body.ea .ea-blog-intro h1,body.ea .ea-blog-article__head h1{font-size:37px;line-height:1.2}body.ea .ea-blog-lead,body.ea .ea-blog-article__head .ea-blog-lead{font-size:16.5px;line-height:1.65;margin-top:20px}body.ea .ea-blog-chips{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;margin:28px 0 30px;padding-bottom:5px}body.ea .ea-blog-chips button{white-space:nowrap}body.ea .ea-blog-featured{margin-left:12px;margin-right:12px;width:auto}body.ea .ea-blog-featured__media img{height:235px;min-height:0}body.ea .ea-blog-featured__copy{padding:26px 22px}body.ea .ea-blog-featured h2{font-size:29px}body.ea .ea-blog-list{padding-top:64px;padding-bottom:68px}body.ea .ea-blog-section-head{display:block}body.ea .ea-blog-section-head>p{margin-top:7px}body.ea .ea-blog-grid{grid-template-columns:1fr}body.ea .ea-blog-service__inner{display:block;padding-top:44px;padding-bottom:44px}body.ea .ea-blog-service .ea-blog-button{margin-top:22px}body.ea .ea-blog-meta{display:flex;flex-wrap:wrap;margin:22px 0 40px;letter-spacing:0}body.ea .ea-blog-meta span+span:before{margin:0 7px}body.ea .ea-blog-article__cover{height:240px;border-radius:0}body.ea .ea-blog-article__layout{padding-top:34px;padding-bottom:64px;gap:38px}body.ea .ea-blog-toc{padding:21px}body.ea .ea-blog-toc div{grid-template-columns:1fr}body.ea .ea-blog-prose{font-size:16.5px}body.ea .ea-blog-prose>p:first-child{font-size:19px}body.ea .ea-blog-prose h2{font-size:29px;margin-top:46px}body.ea .ea-blog-inline-cta{display:block}body.ea .ea-blog-inline-cta .ea-blog-button{margin-top:20px}body.ea .ea-blog-related{padding-top:60px;padding-bottom:68px}body.ea .ea-blog-related__grid{grid-template-columns:1fr}}

/* reCAPTCHA v3 arbeitet unsichtbar. Google erlaubt das Ausblenden des
   Abzeichens, wenn der Hinweis im geschuetzten Ablauf sichtbar bleibt. */
.grecaptcha-badge{visibility:hidden!important}
body.ea .ea-reg__captcha-hinweis{margin:10px 0 0;text-align:center;color:var(--ea-muted,#777);font-size:10.5px;line-height:1.45}
body.ea .ea-reg__captcha-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* LANDINGPAGES "LEISTUNG IN STADT" – 26.08.2026 */
body.ea .ea-lp{background:#f7f5f3;padding:0 0 64px;color:var(--ea-ink,#1e1e1c)}body.ea .ea-lp__hero{padding:14px 0 20px;background:transparent}body.ea .ea-lp__hero .ea-h1{font-family:var(--ea-serif);font-size:clamp(28px,2.7vw,38px);font-weight:400;line-height:1.16;letter-spacing:-.015em;text-transform:none;color:var(--ea-ink,#1e1e1c);margin:0 0 10px}body.ea .ea-lp__intro{max-width:900px;color:#555b63;font-size:16.5px;line-height:1.55;margin:0}
.ea-lp__facts{display:flex;gap:24px;flex-wrap:wrap;border-top:1px solid #e5e1dd;border-bottom:1px solid #e5e1dd;padding:12px 0;margin-top:14px;color:#555b63}.ea-lp__facts b{color:#202124}
body.ea .ea-lp__vorteil{display:inline-flex;align-items:center;gap:7px}body.ea .ea-lp__vorteil:before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e9f3ee;color:#1f6b4e;font-size:11px;font-weight:800;flex:none}
.ea-lp__notice{background:#eef1fe;border:1px solid #dce2fc;border-radius:10px;padding:15px 18px;margin:0 0 26px}.ea-lp__results{padding:28px 0 0}.ea-lp__results>h2{font-family:Arsenica,Georgia,serif;font-size:28px;margin-bottom:18px}
.ea-lp__text{max-width:820px;margin:52px auto 0;padding-top:46px;border-top:1px solid #e5e1dd;font-size:16.5px;line-height:1.78;color:#45474a}.ea-lp__text h2{font-family:Arsenica,Georgia,serif;font-size:30px;color:#202124;margin:38px 0 14px}.ea-lp__text h2:first-child{margin-top:0}.ea-lp__text h3{font-family:Arsenica,Georgia,serif;font-size:22px;color:#202124;margin:30px 0 10px}.ea-lp__text p,.ea-lp__text ul,.ea-lp__text ol{margin-bottom:18px}.ea-lp__text li{margin-bottom:8px}
.ea-lp__cta{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;background:#fff;border:1px solid #e5e1dd;border-radius:14px;padding:30px 34px;margin-top:44px}.ea-lp__cta h2{font-family:Arsenica,Georgia,serif;font-size:25px;margin:0 0 4px}.ea-lp__cta p{margin:0;color:#555b63}
@media(max-width:700px){.ea-lp__facts{display:grid;gap:8px}.ea-lp__text{font-size:16px}.ea-lp__cta{padding:24px}.ea-lp__cta .ea-btn{width:100%;text-align:center}}

/* EIN KOPF AUF ALLEN OEFFENTLICHEN SEITEN – 26.08.2026
   Der Text ist auf Unterseiten aus semantischen Gruenden kein zweites h1,
   sieht aber genauso aus wie die Startseiten-Ueberschrift. */
body.ea .ea-header--suche .ea-kopf__t{font-family:var(--ea-serif);font-size:34px;font-weight:400;line-height:1.2;letter-spacing:-.015em;margin:0 0 6px;text-transform:none;color:var(--ea-ink,#1e1e1c)}
@media(max-width:991.98px){body.ea .ea-header--suche .ea-kopf__t{font-size:26px;line-height:1.2}}

/* Sichtbare Zwischenansicht beim Wechsel von einer Karte zum Profil. */
body.ea .ea-seitenladen{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:24px;background:#fff;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility 0s linear .16s}
body.ea .ea-seitenladen.is-an{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
body.ea .ea-seitenladen__innen{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ea-ink,#1e1e1c)}
body.ea .ea-seitenladen__logo{display:block;width:82px;height:82px}
body.ea .ea-seitenladen__kreis{width:31px;height:31px;margin:25px 0 17px;border:3px solid #e4e7f5;border-top-color:var(--ea-accent,#3F5AD1);border-radius:50%;animation:ea-seitenladen-dreh .75s linear infinite}
body.ea .ea-seitenladen strong{font-family:inherit;font-size:18px;font-weight:700}
body.ea .ea-seitenladen__innen>span:last-child{margin-top:4px;color:var(--ea-muted,#75777A);font-size:13px}
@keyframes ea-seitenladen-dreh{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){body.ea .ea-seitenladen,body.ea .ea-seitenladen__kreis{transition:none;animation:none}}

/* SCHWEBENDE KONTAKTLEISTE AM HANDY UND IN DER PWA – 26.08.2026
   Die gemeinsame Pille bleibt auf allen Handys gleich. In der
   installierten iPhone-App hebt die Safe Area sie zusaetzlich ueber
   den abgerundeten Geraeterand. */
@media (max-width:767.98px){
    body.ea.ea-hb.ea-balken .ea-fix{
        left:10px;right:10px;
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
        padding:7px;gap:6px;overflow:hidden;
        background:rgba(255,255,255,.96);
        border:1px solid rgba(255,255,255,.9);
        border-radius:999px;
        box-shadow:0 10px 34px rgba(23,24,26,.18),0 1px 5px rgba(23,24,26,.10);
    }
    body.ea.ea-hb.ea-balken .ea-fix__ask{
        height:46px;border-radius:999px;
    }
    body.ea.ea-hb.ea-balken .ea-fix__weg,
    body.ea.ea-hb.ea-balken .ea-fix[data-wege] .ea-fix__weg{
        width:42px;height:42px;border-radius:50%;
        background:rgba(247,245,243,.72);
    }
    body.ea.ea-hb.ea-p-dienstleister.ea-balken{
        padding-bottom:calc(90px + env(safe-area-inset-bottom,0px));
    }
    body.ea.ea-hb.ea-p-dienstleister.ea-balken #accept-cookies-block{
        bottom:calc(106px + env(safe-area-inset-bottom,0px));
    }

    /* Dieselbe schwebende Pille fuer die Navigation auf allen Seiten,
       auf denen keine Kontaktleiste steht. */
    body.ea.ea-hb:not(.ea-balken) .ea-fleiste{
        left:50%;right:auto;
        width:auto;
        transform:translateX(-50%);
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
        min-height:60px;
        padding:7px;
        gap:12px;
        align-items:center;
        background:rgba(255,255,255,.96);
        border:1px solid rgba(255,255,255,.9);
        border-radius:999px;
        box-shadow:0 10px 34px rgba(23,24,26,.18),0 1px 5px rgba(23,24,26,.10);
    }
    body.ea.ea-hb:not(.ea-balken) .ea-fleiste__p{
        flex:0 0 46px;
        width:46px;min-width:46px;height:46px;min-height:46px;
        padding:0;
        gap:0;
        border:1px solid var(--ea-line,#E7E2DE);
        border-radius:50%;
        background:rgba(247,245,243,.72);
        color:var(--ea-ink,#1E1E1C);
    }
    body.ea.ea-hb:not(.ea-balken) .ea-fleiste__t{
        display:none;
    }
    body.ea.ea-hb:not(.ea-balken) .ea-fleiste__p.is-an{
        color:var(--ea-accent,#3F5AD1);
        background:rgba(63,90,209,.12);
        border-color:rgba(63,90,209,.32);
    }
    body.ea.ea-hb:not(.ea-balken){
        padding-bottom:calc(90px + env(safe-area-inset-bottom,0px));
    }
    body.ea.ea-hb:not(.ea-balken) #accept-cookies-block{
        bottom:calc(106px + env(safe-area-inset-bottom,0px));
    }
}

/* DIENSTLEISTERBEREICH: SCHWEBENDER KOPF UND KOMPAKTE APP-LEISTE
   Gleiche Formensprache wie auf den oeffentlichen Handyseiten. */
body.ea .ea-kopfprofil{
    flex:0 0 38px;
    width:38px;height:38px;
    display:grid;place-items:center;
    color:var(--ea-ink,#1E1E1C);
    background:rgba(247,245,243,.72);
    border:1px solid var(--ea-line,#E7E2DE);
    border-radius:50%;
    text-decoration:none;
}
body.ea .ea-kopfprofil svg{ width:21px;height:21px; }

/* Im Dienstleisterbereich sind Profilfoto und Auge gleichwertige
   Schnellwege und deshalb exakt gleich gross. */
body.ea .ea-header--bereich .ea-kopfbild{
    width:38px;
    height:38px;
    flex-basis:38px;
}

@media (max-width:767.98px){
    body.ea .ea-header--bereich{
        padding:0;
        background:rgba(247,245,243,.96);
        border-bottom:1px solid var(--ea-line-2,#F2EEEB);
        backdrop-filter:blur(10px);
    }
    body.ea .ea-header--bereich .ea-header__in{
        width:100%;
        height:72px;
        min-height:72px;
        margin:0;
        padding:8px 16px;
        flex-wrap:nowrap;
        gap:10px;
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
    }
    body.ea .ea-header--bereich .ea-header__right{
        gap:7px;
        min-width:0;
        padding:5px;
        background:rgba(255,255,255,.96);
        border:1px solid var(--ea-line,#E7E2DE);
        border-radius:999px;
        box-shadow:0 5px 18px rgba(23,24,26,.10);
    }
    body.ea .ea-header--bereich .ea-btn--sm{
        min-height:38px;
        padding-left:12px;
        padding-right:12px;
        border-radius:999px;
    }

    body.ea .ea-app{
        left:50%;right:auto;
        width:auto;
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
        transform:translateX(-50%);
        display:flex;
        gap:10px;
        padding:7px;
        background:rgba(255,255,255,.96);
        border:1px solid rgba(255,255,255,.9);
        border-radius:999px;
        box-shadow:0 10px 34px rgba(23,24,26,.18),0 1px 5px rgba(23,24,26,.10);
    }
    body.ea .ea-app__t{
        flex:0 0 46px;
        width:46px;height:46px;min-height:46px;
        padding:0;
        gap:0;
        border:1px solid var(--ea-line,#E7E2DE);
        border-radius:50%;
        background:rgba(247,245,243,.72);
        color:var(--ea-ink,#1E1E1C);
    }
    body.ea .ea-app__t span{ display:none; }
    body.ea .ea-app__t.on{
        color:var(--ea-accent,#3F5AD1);
        background:rgba(63,90,209,.12);
        border-color:rgba(63,90,209,.32);
    }
    body.ea .ea-app__num{
        top:-3px;left:auto;right:-3px;margin-left:0;
    }
    body.ea .ea-b{
        padding-bottom:calc(98px + env(safe-area-inset-bottom,0px));
    }
    body.ea .ea-mehrblatt__in{
        padding-bottom:calc(106px + env(safe-area-inset-bottom,0px));
    }
}

/* Geprueft-Zeichen: Trennung zwischen Datei und Impressumslink. */
body.ea .ea-gp__oder{
    display:flex;align-items:center;gap:12px;
    margin:20px 0;color:var(--ea-muted,#75777A);
    font-size:13px;text-transform:uppercase;letter-spacing:.08em;
}
body.ea .ea-gp__oder::before,
body.ea .ea-gp__oder::after{
    content:"";height:1px;flex:1;background:var(--ea-line,#E7E2DE);
}
body.ea .ea-gp__url{ margin-bottom:0; }

/* Geprueft-Siegel ohne zusaetzlichen Aussenkreis: sichtbar bleibt nur
   die eigentliche blaue Siegelform mit weissem Haken. */
body.ea .ea-geprueft--klein svg,
body.ea .ea-pname__z .ea-geprueft--klein svg,
body.ea .ea-ask__price .ea-geprueft--klein svg{
    border-radius:0;
    box-shadow:none;
}
/* Der Browser setzt Inhalte geschlossener details sonst auf display:none.
   Mit display:block kann der Kasten am Desktop weiterhin bei Hover
   erscheinen; Sichtbarkeit und Klickzustand regeln die vorhandenen
   opacity-/visibility-Regeln. */
body.ea details.ea-geprueft > .ea-geprueft__box{ display:block; }

/* Eingeloggt im oeffentlichen Frontend: Das Profilfoto fuellt den
   ganzen runden Navigationspunkt statt in einem zweiten kleinen Kreis
   darin zu schweben. */
body.ea.ea-hb:not(.ea-balken) .ea-fleiste__p--bild{
    overflow:hidden;
    padding:0;
}
body.ea.ea-hb:not(.ea-balken) .ea-fleiste__p--bild .ea-fleiste__ic,
body.ea.ea-hb:not(.ea-balken) .ea-fleiste__p--bild .ea-fleiste__bild{
    width:100%;
    height:100%;
}
body.ea.ea-hb:not(.ea-balken) .ea-fleiste__p--bild .ea-fleiste__bild{
    border-radius:50%;
    box-shadow:none;
    object-position:center;
    transform:none;
}

/* PWA: kompakte Browsernavigation oberhalb der unteren App-Leiste. */
.ea-pwa-verlauf{ display:none; }
.ea-ist-pwa .ea-pwa-verlauf{
    position:fixed;
    z-index:1046;
    left:22px;
    bottom:24px;
    display:flex;
    align-items:center;
    gap:4px;
    padding:6px;
    border:1px solid rgba(255,255,255,.92);
    border-radius:999px;
    background:rgba(255,255,255,.90);
    box-shadow:0 10px 34px rgba(23,24,26,.18),0 1px 5px rgba(23,24,26,.10);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
}
.ea-pwa-verlauf__taste{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    padding:0;
    border:1px solid var(--ea-line,#E7E2DE);
    border-radius:50%;
    background:rgba(247,245,243,.82);
    color:var(--ea-ink,#1E1E1C);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.ea-pwa-verlauf__taste svg{
    width:26px;height:26px;
    fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
}
.ea-pwa-verlauf__taste:active:not(:disabled){
    color:var(--ea-accent,#3F5AD1);
    background:rgba(63,90,209,.12);
    border-color:rgba(63,90,209,.32);
}
.ea-pwa-verlauf__taste:disabled{
    opacity:.28;
    cursor:default;
}
@media (max-width:767px){
    .ea-ist-pwa .ea-pwa-verlauf{
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
    }

    /* Start, Suche und Merkliste: Pfeile links neben der bestehenden
       Dreier-Navigation. Beide Pillen bilden zusammen eine mittige
       Bediengruppe und stehen exakt auf derselben Hoehe. */
    .ea-ist-pwa body.ea.ea-hb:not(.ea-balken) .ea-pwa-verlauf{
        left:calc(50% - 149px);
    }
    .ea-ist-pwa body.ea.ea-hb:not(.ea-balken) .ea-fleiste{
        left:calc(50% + 61px);
    }

    /* Dienstleisterprofil: Die Kontaktpille rueckt nach oben. Darunter
       stehen Zurueck und Vorwaerts als eigene, mittige Reihe. */
    .ea-ist-pwa body.ea.ea-p-dienstleister.ea-balken .ea-pwa-verlauf{
        left:50%;
        transform:translateX(-50%);
    }
    .ea-ist-pwa body.ea.ea-hb.ea-p-dienstleister.ea-balken .ea-fix{
        bottom:calc(92px + env(safe-area-inset-bottom,0px));
    }
    .ea-ist-pwa body.ea.ea-hb.ea-p-dienstleister.ea-balken{
        padding-bottom:calc(164px + env(safe-area-inset-bottom,0px));
    }
    .ea-ist-pwa body.ea.ea-hb.ea-p-dienstleister.ea-balken #accept-cookies-block{
        bottom:calc(180px + env(safe-area-inset-bottom,0px));
    }

    /* Interner Dienstleisterbereich: eine gemeinsame Reihe.
       Zurueck steht links, die Fuenfer-Navigation in der Mitte und
       Vorwaerts rechts. Die Verlaufshuelle ist dabei unsichtbar; nur
       ihre beiden runden Tasten bleiben sichtbar. */
    .ea-ist-pwa body.ea.ea-p-profile .ea-app{
        width:calc(100% - 140px);
        max-width:250px;
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
        gap:4px;
        padding:6px;
    }
    .ea-ist-pwa body.ea.ea-p-profile .ea-app__t{
        flex:1 1 0;
        width:42px;
        min-width:38px;
        height:44px;
        min-height:44px;
    }
    .ea-ist-pwa body.ea.ea-p-profile .ea-pwa-verlauf{
        left:0;
        right:0;
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
        width:100%;
        height:56px;
        padding:0;
        border:0;
        background:none;
        box-shadow:none;
        transform:none;
        pointer-events:none;
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
    .ea-ist-pwa body.ea.ea-p-profile .ea-pwa-verlauf__taste{
        position:absolute;
        top:6px;
        width:44px;
        height:44px;
        pointer-events:auto;
        background:rgba(255,255,255,.96);
        box-shadow:0 6px 20px rgba(23,24,26,.12);
    }
    .ea-ist-pwa body.ea.ea-p-profile [data-pwa-zurueck]{ left:18px; }
    .ea-ist-pwa body.ea.ea-p-profile [data-pwa-vor]{ right:18px; }
    .ea-ist-pwa body.ea.ea-p-profile .ea-b{
        padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));
    }
    .ea-ist-pwa body.ea.ea-p-profile .ea-mehrblatt__in{
        padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));
    }

}

/* Unter 360 px werden sechs Zwischenraeume zu eng. Dort bleibt die
   gut bedienbare zweizeilige Fassung erhalten. */
@media (max-width:359px){
    .ea-ist-pwa body.ea.ea-p-profile .ea-app{
        width:auto;
        max-width:none;
        bottom:calc(92px + env(safe-area-inset-bottom,0px));
        gap:6px;
    }
    .ea-ist-pwa body.ea.ea-p-profile .ea-pwa-verlauf{
        left:50%;right:auto;
        width:auto;height:auto;
        padding:6px;
        border:1px solid rgba(255,255,255,.92);
        background:rgba(255,255,255,.90);
        box-shadow:0 10px 34px rgba(23,24,26,.18);
        transform:translateX(-50%);
        pointer-events:auto;
    }
    .ea-ist-pwa body.ea.ea-p-profile .ea-pwa-verlauf__taste{
        position:static;
        width:44px;height:44px;
        box-shadow:none;
    }
    .ea-ist-pwa body.ea.ea-p-profile .ea-b{
        padding-bottom:calc(172px + env(safe-area-inset-bottom,0px));
    }
    .ea-ist-pwa body.ea.ea-p-profile .ea-mehrblatt__in{
        padding-bottom:calc(180px + env(safe-area-inset-bottom,0px));
    }
}

/* PWA-Navigation einheitlich in EINER Reihe (Fassung 272).
   Oeffentliche Seiten: Zurueck links, Hauptnavigation mittig,
   Vorwaerts rechts. Die Pfeile haben keine zusaetzliche Umrandung
   und keine gemeinsame Hintergrundpille. */
@media (max-width:767px){
    .ea-ist-pwa body.ea.ea-hb:not(.ea-balken):not(.ea-p-profile) .ea-pwa-verlauf{
        left:0;
        right:0;
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
        width:100%;
        height:60px;
        padding:0;
        border:0;
        background:none;
        box-shadow:none;
        transform:none;
        pointer-events:none;
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
    .ea-ist-pwa body.ea.ea-hb:not(.ea-balken):not(.ea-p-profile) .ea-pwa-verlauf__taste{
        position:absolute;
        top:6px;
        width:48px;
        height:48px;
        border:0;
        background:rgba(255,255,255,.90);
        box-shadow:0 6px 20px rgba(23,24,26,.10);
        pointer-events:auto;
    }
    .ea-ist-pwa body.ea.ea-hb:not(.ea-balken):not(.ea-p-profile) [data-pwa-zurueck]{ left:18px; }
    .ea-ist-pwa body.ea.ea-hb:not(.ea-balken):not(.ea-p-profile) [data-pwa-vor]{ right:18px; }
    .ea-ist-pwa body.ea.ea-hb:not(.ea-balken):not(.ea-p-profile) .ea-fleiste{
        left:50%;
        transform:translateX(-50%);
    }

    /* Auch im internen Bereich sind die beiden einzelnen Pfeile ohne
       sichtbare Kontur; ihre Position links und rechts bleibt gleich. */
    .ea-ist-pwa body.ea.ea-p-profile .ea-pwa-verlauf__taste{
        border:0;
    }

    /* Oeffentliches Anbieterprofil: nur Zurueck, direkt links neben
       der grossen Kontaktpille. Vorwaerts hat hier keinen Mehrwert. */
    .ea-ist-pwa body.ea.ea-p-dienstleister.ea-balken .ea-pwa-verlauf{
        left:18px;
        right:auto;
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
        width:48px;
        height:60px;
        padding:0;
        border:0;
        background:none;
        box-shadow:none;
        transform:none;
        pointer-events:none;
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
    .ea-ist-pwa body.ea.ea-p-dienstleister.ea-balken .ea-pwa-verlauf__taste{
        position:absolute;
        top:6px;
        left:0;
        width:48px;
        height:48px;
        border:0;
        background:rgba(255,255,255,.90);
        box-shadow:0 6px 20px rgba(23,24,26,.10);
        pointer-events:auto;
    }
    .ea-ist-pwa body.ea.ea-p-dienstleister.ea-balken [data-pwa-vor]{ display:none; }
    .ea-ist-pwa body.ea.ea-hb.ea-p-dienstleister.ea-balken .ea-fix{
        left:76px;
        right:10px;
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
    }
    .ea-ist-pwa body.ea.ea-hb.ea-p-dienstleister.ea-balken{
        padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));
    }
    .ea-ist-pwa body.ea.ea-hb.ea-p-dienstleister.ea-balken #accept-cookies-block{
        bottom:calc(112px + env(safe-area-inset-bottom,0px));
    }
}

/* ==================================================================
   AC. ORTSLINKS UNTER KATEGORIE- UND STADTSEITEN          29.08.2026

   Die Stadtseiten waren verwaiste Seiten - im ganzen Frontend fuehrte
   kein Link auf /dienstleistungen/. Dieser Baustein verbindet sie:
   von der Kategorieseite nach unten in die Staedte, von jeder
   Stadtseite quer zu den anderen.

   Bewusst eine schlichte Liste in Spalten, kein Kachelraster. Es ist
   Navigation, keine Ware - sie soll den Blick nicht von den
   Anbieterkarten darueber wegziehen.

   Spaltenzahl ueber column-width statt column-count: Bei drei langen
   Stadtnamen nebeneinander wird es auf kleinen Geraeten sonst eng,
   und der Browser rechnet das besser aus als eine feste Zahl.
   ================================================================== */

body.ea .ea-orte {
    margin: 34px 0 10px;
    padding: 22px 0 4px;
    border-top: 1px solid var(--ea-line, #E7E2DE);
}

body.ea .ea-orte__titel {
    font-size: clamp(17px, 1.6vw, 20px);
    margin: 0 0 14px;
}

body.ea .ea-orte__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 14rem auto;
    column-gap: 26px;
}

body.ea .ea-orte__liste li {
    break-inside: avoid;
    margin: 0 0 7px;
    font-size: 15px;
    line-height: 1.45;
}

body.ea .ea-orte__liste a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

body.ea .ea-orte__liste a:hover,
body.ea .ea-orte__liste a:focus-visible {
    border-bottom-color: currentColor;
}

/* Unter dem Umbruchpunkt der Ergebnisliste (991.98 px) bleibt es bei
   zwei Spalten, damit die Liste nicht zu einer langen Schlange wird. */
@media (max-width: 991.98px) {
    body.ea .ea-orte__liste { columns: 11rem auto; column-gap: 18px; }
    body.ea .ea-orte { margin-top: 26px; }
}

/* ==================================================================
   AD. FEHLERSEITE 404                                     29.08.2026

   Die alte Fassung trug Bootstrap-Klassen (.main-banner, .col-xl-3),
   zu denen es unter body.ea keine Regeln gibt. Die Seite erschien
   deshalb ungestaltet: riesige Ueberschrift ueber die halbe Breite,
   nackte Aufzaehlungspunkte, vier Spalten voller Nullen.

   Absichtlich zurueckhaltend. Wer hier landet, hat sich verlaufen;
   die Seite soll ihn weiterschicken und nicht um Aufmerksamkeit
   werben. Deshalb kein Bild, keine Farbflaeche, keine Animation -
   nur Text, zwei Knoepfe und eine Liste.
   ================================================================== */

body.ea .ea-fehler {
    padding: clamp(38px, 7vw, 84px) 0 clamp(48px, 8vw, 96px);
}

body.ea .ea-fehler__kopf {
    max-width: 42rem;
}

body.ea .ea-fehler__code {
    margin: 0 0 10px;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ea-muted, #71757B);
}

body.ea .ea-fehler .ea-h1 {
    margin: 0 0 14px;
    font-size: clamp(28px, 4.2vw, 42px);
    line-height: 1.15;
}

body.ea .ea-fehler__satz {
    margin: 0 0 26px;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.6;
    color: var(--ea-ink-2, #45474A);
}

body.ea .ea-fehler__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Die Liste der Leistungen.

   column-width statt column-count: Die Namen sind unterschiedlich
   lang ("DJ" gegen "Dekoration & Eventdesign"), und der Browser
   verteilt das besser als eine feste Spaltenzahl. Dieselbe
   Ueberlegung wie beim Ortsblock in Abschnitt AC. */
body.ea .ea-fehler__leistungen {
    margin-top: clamp(38px, 6vw, 64px);
    padding-top: clamp(24px, 4vw, 34px);
    border-top: 1px solid var(--ea-line, #E7E2DE);
}

body.ea .ea-fehler__leistungen h2 {
    margin: 0 0 16px;
    font-size: clamp(17px, 1.6vw, 20px);
}

body.ea .ea-fehler__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 15rem auto;
    column-gap: 26px;
}

body.ea .ea-fehler__liste li {
    break-inside: avoid;
    margin: 0 0 2px;
}

body.ea .ea-fehler__liste a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--ea-radius-s, 8px);
    color: inherit;
    text-decoration: none;
    line-height: 1.4;
}

body.ea .ea-fehler__liste a:hover,
body.ea .ea-fehler__liste a:focus-visible {
    background: var(--ea-surface, #F5F4F3);
}

/* Die Zahl ist Beiwerk, nicht Botschaft. Sie steht nur da, wenn sie
   groesser als null ist - die alte Seite zeigte hinter fast jeder
   Zeile eine 0, und das las sich, als sei hier nichts los. */
body.ea .ea-fehler__zahl {
    flex: none;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--ea-muted, #71757B);
}

@media (max-width: 991.98px) {
    body.ea .ea-fehler__liste { columns: 12rem auto; column-gap: 16px; }
}

/* ==================================================================
   AE. EINLEITUNG DER STADTSEITE KUERZEN                   29.08.2026
   (Umbruchpunkt entfernt, 29.08.2026 nachmittags)

   Zuerst galt die Kuerzung nur bis 700 px. Am Rechner standen weiter
   neun Zeilen ueber dem ersten Anbieter - und dort ist der Grund
   derselbe wie auf dem Handy: Wer eine Stadtseite aufruft, sucht
   keinen Text, sondern Anbieter. Die Regeln gelten deshalb jetzt in
   JEDER Breite.

   Drei Zeilen, dann "Weiterlesen". Ohne JavaScript ueber ein
   unsichtbares Kontrollkaestchen und :checked. Faellt ein Skript
   aus, bleibt die Bedienung.
   ================================================================== */

body.ea .ea-lp__einleitung {
    position: relative;
}

/* Das Kaestchen bleibt bedienbar (Tastatur), ist aber nicht zu sehen.
   display:none waere falsch - damit fiele es aus der Tabulatorfolge. */
body.ea .ea-lp__mehr {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

body.ea .ea-lp__intro {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

body.ea .ea-lp__mehr:checked ~ .ea-lp__intro {
    display: block;
    -webkit-line-clamp: initial;
    line-clamp: initial;
    overflow: visible;
}

body.ea .ea-lp__mehrknopf {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ea-accent, #3F5AD1);
    cursor: pointer;
    user-select: none;
}

body.ea .ea-lp__mehrzu { display: none; }
body.ea .ea-lp__mehr:checked ~ .ea-lp__mehrknopf .ea-lp__mehrauf { display: none; }
body.ea .ea-lp__mehr:checked ~ .ea-lp__mehrknopf .ea-lp__mehrzu  { display: inline; }

/* Wer mit der Tastatur navigiert, muss sehen, wo er steht. Das
   Kaestchen selbst ist unsichtbar - also traegt die Beschriftung
   den Rahmen. */
body.ea .ea-lp__mehr:focus-visible ~ .ea-lp__mehrknopf {
    outline: 2px solid var(--ea-accent, #3F5AD1);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ==================================================================
   AF. HINWEIS "AUS GANZ DEUTSCHLAND"                      29.08.2026

   Vorher: ein blauer Kasten mit Rahmen, fett, ueber den Anbietern -
   das Auffaelligste auf der Seite. Er kuendigte einen Mangel an,
   bevor der Besucher gesehen hatte, was da ist, und kostete auf dem
   Handy einen Viertel-Bildschirm.

   Jetzt: eine graue Zeile unter der Ueberschrift der Liste, nach den
   Premium-Anbietern. Kein Kasten, keine Farbe, kein Fettdruck.

   Die Regel mit :has() zieht die Ueberschrift naeher an die Zeile
   heran. Versteht ein Browser :has() nicht, bleibt der normale
   Abstand der Ueberschrift stehen - das sieht immer noch richtig
   aus. Deshalb braucht es dafuer keinen Ersatz.
   ================================================================== */

body.ea .ea-lp__quelle {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ea-muted, #71757B);
    max-width: 62ch;
}

body.ea .ea-lp__results > h2:has(+ .ea-lp__quelle) {
    margin-bottom: 6px;
}

/* ==================================================================
   AG. ORTSLINKS: NUR NOCH DIE NACHBARN               29.08.2026

   Abschnitt AC hat den Block gebaut, als dort ALLE Staedte standen -
   fuenf Spalten, alphabetisch. Unter einer Stadtseite stehen jetzt
   nur noch acht, dazu ein Link auf die vollstaendige Liste. Fuer acht
   Eintraege sind fuenf Spalten zu viel: Die Liste zerfaellt in
   Schnipsel, und rechts bleibt eine leere Flaeche.

   Deshalb hier eine breitere Spalte. Die Kategorieseite behaelt ihre
   fuenf, weil dort weiterhin alle stehen - sie erkennt man an
   .ea-orte ohne .ea-orte--nah.
   ================================================================== */

body.ea .ea-lp .ea-orte__liste {
    columns: 20rem auto;
    column-gap: 32px;
    max-width: 68rem;
}

body.ea .ea-orte__alle {
    margin: 16px 0 0;
    font-size: 14.5px;
}

body.ea .ea-orte__alle a {
    color: var(--ea-accent, #3F5AD1);
    font-weight: 600;
    text-decoration: none;
}

body.ea .ea-orte__alle a:hover,
body.ea .ea-orte__alle a:focus-visible {
    text-decoration: underline;
}

body.ea .ea-orte__alle a::after { content: " →"; }

/* =====================================================================
   FOTOS: Ablagefeld je Album  (Fassung 223, 29.08.2026)

   Vorher: ein Ablagefeld ueber der ganzen Seite, daneben eine Auswahl
   "Neue Fotos kommen in ...". Jetzt: ein Feld IN jedem Album, oben nur
   noch der Knopf "Neues Album".
   ===================================================================== */

/* Die Zeile ganz oben. Kein Kasten, keine Umrandung - sie soll nicht
   aussehen wie ein Ablagefeld, sonst zieht jemand die Fotos wieder
   dorthin. */
body.ea .ea-fo__start{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:14px; margin-bottom:26px;
}
body.ea .ea-fo__starttext{ display:grid; gap:2px; min-width:0; }
body.ea .ea-fo__starttext strong{ font-size:15.5px; font-weight:600; color:var(--ea-ink,#1E1E1C); }
body.ea .ea-fo__starttext span{ font-size:14px; color:var(--ea-muted,#75777A); }

body.ea .ea-fo__nk--gross{
    height:42px; padding:0 18px; font-size:15px; font-weight:600;
    border-color:var(--ea-accent,#3F5AD1); background:var(--ea-accent,#3F5AD1); color:#fff;
    white-space:nowrap;
}
body.ea .ea-fo__nk--gross:hover{ filter:brightness(1.06); background:var(--ea-accent,#3F5AD1); }
body.ea .ea-fo__nk--gross[disabled]{ opacity:.55; cursor:default; filter:none; }

/* Das Ablagefeld sitzt als erste Zelle im Bilderraster und nimmt die
   ganze Breite ein. Flacher als das alte Feld oben: Es steht jetzt in
   jedem Album, und zehn hohe Kaesten untereinander waeren eine Wand. */
body.ea .ea-fo__azone{
    grid-column:1 / -1;
    display:grid; place-items:center; gap:4px;
    padding:20px; margin-bottom:2px;
    border:1.5px dashed var(--ea-line,#E7E2DE);
    border-radius:14px; background:#fff;
    text-align:center; cursor:pointer;
    transition:border-color .16s ease, background-color .16s ease;
}
body.ea .ea-fo__azone:hover{ border-color:var(--ea-accent,#3F5AD1); background:var(--ea-accent-soft,#EEF1FE); }
body.ea .ea-fo__azone svg{ width:22px; height:22px; color:var(--ea-accent,#3F5AD1); }
body.ea .ea-fo__azone .ea-fo__zt{ font-size:14.5px; }
body.ea .ea-fo__azone .ea-fo__zu{ font-size:13px; }

/* Das frisch angelegte Album. Es steht oben und soll auch so aussehen -
   sonst sucht man es, und genau das war der alte Fehler. */
body.ea .ea-fo__album--neu{
    padding:14px; margin:-14px -14px 0;
    border-radius:16px;
    background:var(--ea-accent-soft,#EEF1FE);
}
body.ea .ea-fo__frisch{
    justify-self:start;
    padding:3px 10px; border-radius:999px;
    background:var(--ea-accent,#3F5AD1); color:#fff;
    font-size:12.5px; font-weight:600;
}

/* Namenszeile - nur beim frisch angelegten Album. */
body.ea .ea-fo__anamz{ display:grid; gap:4px; margin-top:10px; max-width:420px; }
body.ea .ea-fo__anamz > span{ font-size:13.5px; color:var(--ea-ink-2,#45474A); }
body.ea .ea-fo__aname{
    height:42px; padding:0 12px;
    border:1px solid var(--ea-line,#E7E2DE); border-radius:9px;
    background:#fff; font:inherit; font-size:15px; color:var(--ea-ink,#1E1E1C);
}
body.ea .ea-fo__aname:focus{ outline:none; border-color:var(--ea-accent,#3F5AD1); }

@media (max-width: 640px){
    body.ea .ea-fo__nk--gross{ width:100%; }
    body.ea .ea-fo__azone{ padding:16px; }
}
@media (prefers-reduced-motion: reduce){
    body.ea .ea-fo__azone{ transition:none; }
}

/* =====================================================================
   AH. DIE KACHELZEILE IM KOPFBAND                (Fassung 228, 30.08.2026)

   FASSUNG 227 legte die Zeile in den Inhalt (.ea-kopfsatz in
   main.tpl), also auf weissen Grund unter das graue Kopfband. Das war
   falsch: Sie sah aus, als gehoerte sie zur ersten Reihe, und beim
   Zusammenfallen der Kopfzeile rutschte sie mit dem Inhalt nach oben,
   waehrend die Suchleiste darueber schrumpfte. Genau dieses Springen
   war zu sehen.

     MERKSATZ: Was zusammen bedient wird, muss zusammen stehen.
     Ein Bedienelement im Inhalt bewegt sich mit dem Inhalt.

   Jetzt liegt sie IM Kopfband (header.tpl, .ea-kopf__kacheln) und
   traegt DIESELBEN PILLEN wie die Filterzeile der Ergebnisliste:
   weiss, 42 px hoch, 100 px Rundung, ein Strich in --ea-kopf-linie.
   Die Werte sind nicht neu erfunden, sondern von .ea-fz__b
   uebernommen - zwei Zeilen im selben Band duerfen nicht zwei
   Handschriften haben.

   BREITE: max-width var(--ea-wrap) und derselbe Innenrand wie
   .ea-wrap - die erste Kachel beginnt also genau dort, wo die erste
   Karte darunter beginnt.

   BEIM SCROLLEN bleibt sie stehen. .ea-kopf__satz und .ea-kopf__suche
   fallen bei is-klein zusammen, diese Zeile nicht - wie die Filter
   auf der Ergebnisliste, die man auch beim Scrollen noch braucht.

   AM HANDY wird sie zum Wischstreifen. Die alte Leistungsreihe
   (.ea-lreihe) entfaellt dort, wo diese steht: zwei Reihen mit
   demselben Inhalt untereinander waeren nur doppelt.
   ===================================================================== */

body.ea .ea-kopf__kacheln{
    box-sizing: border-box;
    display: block;
    max-width: var(--ea-wrap); margin: 0 auto;
    padding: 0 clamp(18px, 2.6vw, 32px) 18px;
}

/* Der Abstand unter der Suchleiste gehoert jetzt der Kachelzeile.
   Ohne das stuenden 26 px Luft zwischen Leiste und Kacheln - sie
   wirkten dann wieder wie ein eigener Block statt wie ein Stockwerk. */
body.ea .ea-header--kacheln .ea-kopf__suche{ padding-bottom: 12px; }

body.ea .ea-kopf__kacheln .ea-chips2{
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0; margin: 0;
}

/* Dieselben Masse wie .ea-fz__b in der Filterzeile. */
body.ea .ea-kopf__kacheln .ea-chip2{
    align-items: center;
    height: 42px; padding: 0 16px;
    border: 1px solid var(--ea-kopf-linie, #EBE6E1); border-radius: 100px;
    background: #fff;
    font-size: 14.5px; color: var(--ea-ink, #1E1E1C);
    white-space: nowrap;
}
body.ea .ea-kopf__kacheln .ea-chip2 span{
    color: var(--ea-muted, #75777A); font-size: 13px;
}
/* Wie im Filter: der Rand wird dunkler, die Flaeche bleibt weiss.
   Ein Farbwechsel waere hier eine zweite Sprache. */
body.ea .ea-kopf__kacheln .ea-chip2:hover{
    background: #fff; border-color: var(--ea-ink, #1E1E1C);
}
/* "Alle" grenzt nicht ein, es setzt zurueck - deshalb halbfett. */
body.ea .ea-kopf__kacheln .ea-chip2--alle{ font-weight: 600; }
body.ea .ea-kopf__kacheln .ea-chip2--alle:hover{
    background: #fff; border-color: var(--ea-ink, #1E1E1C);
}

/* Bis 1279 px passen acht Kacheln nicht mehr in eine Zeile. Statt sie
   umbrechen zu lassen - eine einzelne Kachel in Zeile zwei sieht aus
   wie vergessen -, wird die Zeile hier zum Wischstreifen, so wie am
   Handy. Ab 1280 px steht alles nebeneinander. */
@media (max-width: 1279.98px){
    body.ea .ea-kopf__kacheln{ max-width: none; padding: 0 0 12px; }
    /* Waagerecht schiebbar statt in drei Zeilen umgebrochen - der
       Innenrand wandert in die schiebbare Flaeche, sonst schneidet er
       die erste und die letzte Kachel an. */
    body.ea .ea-kopf__kacheln .ea-chips2{
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none;
        padding: 0 18px;
    }
    body.ea .ea-kopf__kacheln .ea-chips2::-webkit-scrollbar{ display: none; }
    body.ea .ea-kopf__kacheln .ea-chip2{ flex: 0 0 auto; }
}
@media (max-width: 991.98px){
    body.ea .ea-kopf__kacheln .ea-chip2{ height: 38px; font-size: 14px; }
    body.ea .ea-header--kacheln .ea-kopf__suche{ padding-bottom: 10px; }
}

/* Den Abstand zwischen Kopfband und erster Reihe trug bis Fassung 227
   ein leerer .ea-kopfsatz im Inhalt. Der Kasten ist weg; die Reihe
   traegt ihn jetzt selbst. */
body.ea .ea-rh--erste{ padding-top: 40px; }
@media (max-width: 991.98px){
    body.ea .ea-rh--erste{ padding-top: 26px; }
}


/* =================================================================
   TEIL BV - Profil-Service
   /profil-anlegen-lassen · /profil-freigeben · /keine-einladung
   Event ABC, 30.08.2026
   =================================================================

   Zwei Seiten, die aus einer E-Mail heraus aufgerufen werden und je
   EINE Aufgabe haben. Gebaut wie die Bewertungsseite (TEIL AH):
   eine Karte in der Mitte, Haarlinien statt Kaesten, eine
   Akzentfarbe fuer genau eine Handlung.

   NUR padding-top/-bottom auf .ea-ps und .ea-fg, nie die
   Kurzschreibweise: .ea-wrap bringt den seitlichen Rand mit, und
   "padding: 34px 0 80px" wuerde ihn auf 0 setzen - die Karte klebte
   dann am Bildschirmrand. Das ist in dieser Datei schon viermal
   passiert.
   ================================================================= */

body.ea .ea-ps,
body.ea .ea-fg{ padding-top: 34px; padding-bottom: 90px; }

body.ea .ea-ps__karte,
body.ea .ea-fg__karte{
    background: #fff; border: 1px solid var(--ea-line-2, #EDE8E4);
    border-radius: 18px; padding: 30px;
    max-width: 620px; margin: 0 auto;
}
body.ea .ea-ps__karte{ max-width: 560px; }
body.ea .ea-fg__karte--schmal{ max-width: 520px; text-align: center; }

body.ea .ea-ps__h1,
body.ea .ea-fg__h1{
    font-family: var(--ea-serif); font-weight: 400;
    font-size: clamp(26px, 3.4vw, 32px); letter-spacing: -.01em;
    margin: 0 0 8px; color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-ps__lead,
body.ea .ea-fg__lead{ margin: 0 0 24px; color: var(--ea-muted, #71757B); line-height: 1.55; }
body.ea .ea-ps__klein,
body.ea .ea-fg__klein{ margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: #A0A4A9; }
body.ea .ea-ps__weiter,
body.ea .ea-fg__weiter{ margin: 26px 0 0; }

body.ea .ea-ps__fehler,
body.ea .ea-fg__fehler{
    margin: 0 0 20px; padding: 12px 14px; border-radius: 10px;
    background: #FCEFEE; border: 1px solid #F0CFCB; color: #9E332B;
    font-size: 14.5px; line-height: 1.5;
}
body.ea .ea-ps__fehler a{ color: #9E332B; }

/* Der Haken auf den Dankeseiten. */
body.ea .ea-ps__haken,
body.ea .ea-fg__haken{
    width: 52px; height: 52px; border-radius: 50%;
    background: #EEF1FE; color: #3F5AD1;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
}
body.ea .ea-ps__haken svg,
body.ea .ea-fg__haken svg{ width: 26px; height: 26px; }

/* ---------------------------------------------------------------
   Das Formular auf /profil-anlegen-lassen
   --------------------------------------------------------------- */

body.ea .ea-ps__feld{
    display: block; font-size: 14px; color: var(--ea-muted, #71757B); margin: 0 0 7px;
}

/* 16 px ist keine Geschmacksfrage: Unter 16 px zoomt iOS beim
   Antippen in das Feld hinein, und danach steht die halbe Seite
   ausserhalb des Bildschirms. */
body.ea .ea-ps__eingabe,
body.ea .ea-fg__eingabe{
    width: 100%; box-sizing: border-box;
    font-family: inherit; font-size: 16px; line-height: 1.4;
    padding: 14px; border: 1px solid #D9D5CE; border-radius: 10px;
    background: #fff; color: var(--ea-ink, #1E1E1C);
    -webkit-appearance: none; appearance: none;
}
body.ea .ea-ps__eingabe::placeholder,
body.ea .ea-fg__eingabe::placeholder{ color: #B4B0A8; }
body.ea .ea-ps__eingabe:focus,
body.ea .ea-fg__eingabe:focus{
    outline: none; border-color: #8096F8; box-shadow: 0 0 0 3px #EEF1FE;
}
body.ea .ea-fg__eingabe--gross{ min-height: 120px; resize: vertical; }

body.ea .ea-ps__hinweis{
    font-size: 13.5px; line-height: 1.55; color: var(--ea-muted, #71757B);
    margin: 8px 0 22px;
}
body.ea .ea-ps__hinweis b{ color: var(--ea-ink, #1E1E1C); font-weight: 600; }

body.ea .ea-ps__zweit{ margin-bottom: 6px; }
body.ea .ea-ps__mehr{ margin: 0 0 22px; font-size: 13.5px; color: var(--ea-muted, #71757B); }
body.ea .ea-ps__mehrkn{
    appearance: none; background: none; border: 0; padding: 0;
    font: inherit; font-size: 13.5px; color: #3F5AD1; cursor: pointer;
}
body.ea .ea-ps__mehrkn:hover{ text-decoration: underline; }

body.ea .ea-ps__haupt,
body.ea .ea-fg__haupt{
    width: 100%; box-sizing: border-box;
    appearance: none; border: 0; cursor: pointer;
    background: #3F5AD1; color: #fff;
    font: inherit; font-size: 16.5px; font-weight: 600;
    padding: 16px; border-radius: 10px;
}
body.ea .ea-ps__haupt:hover,
body.ea .ea-fg__haupt:hover{ background: #3550BC; }

/* Der Honigtopf. NICHT display:none - manche Formularroboter lesen
   das und lassen das Feld dann gerade aus. So steht es im Quelltext
   wie ein normales Feld und ist trotzdem ausserhalb des Bildes. */
body.ea .ea-ps__topf{
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

body.ea .ea-ps__auf,
body.ea .ea-fg__auf{
    border-top: 1px solid var(--ea-line-2, #EDE8E4);
    margin-top: 26px; padding-top: 16px;
}
body.ea .ea-ps__auf summary,
body.ea .ea-fg__auf summary{
    cursor: pointer; font-size: 15px; color: #3F5AD1; list-style: none;
}
body.ea .ea-ps__auf summary::-webkit-details-marker,
body.ea .ea-fg__auf summary::-webkit-details-marker{ display: none; }
body.ea .ea-ps__auf summary:before,
body.ea .ea-fg__auf summary:before{ content: "+ "; font-weight: 600; }
body.ea .ea-ps__auf[open] summary:before,
body.ea .ea-fg__auf[open] summary:before{ content: "\2013 "; }
body.ea .ea-ps__aufinnen{ padding-top: 14px; }
body.ea .ea-ps__aufinnen .ea-ps__eingabe{ margin-bottom: 10px; }
body.ea .ea-fg__aufinnen{ padding-top: 12px; }

/* Der zweite Weg. Leiser als der Knopf darueber - er ist die
   Ausnahme und nicht die Empfehlung. */
body.ea .ea-ps__selbst{
    margin: 18px 0 0; text-align: center;
    font-size: 13.5px; line-height: 1.55; color: var(--ea-muted, #71757B);
}
body.ea .ea-ps__selbstkn{
    appearance: none; background: none; border: 0; padding: 0;
    font: inherit; font-size: 13.5px; color: #3F5AD1; cursor: pointer;
}
body.ea .ea-ps__selbstkn:hover{ text-decoration: underline; }

body.ea .ea-ps__fuss{
    margin: 24px 0 0; padding-top: 18px;
    border-top: 1px solid var(--ea-line-2, #EDE8E4);
    font-size: 12.5px; line-height: 1.6; color: #A0A4A9;
}
body.ea .ea-ps__fuss a{ color: #A0A4A9; text-decoration: underline; }

/* ---------------------------------------------------------------
   Die Freigabeseite
   --------------------------------------------------------------- */

body.ea .ea-fg__frist{
    margin: -8px -8px 18px; padding: 9px 14px;
    background: #EEF1FE; color: #2C3E9E;
    border-radius: 10px; font-size: 13px; text-align: center;
}

body.ea .ea-fg__ueber{
    margin: 24px 0 9px; font-size: 12px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--ea-muted, #71757B);
}

/* Die echte Suchkarte. Sie MUSS aussehen wie die in der
   Ergebnisliste - eine geschoente Karte hier und eine duenne dort
   ist der schnellste Weg, das Vertrauen wieder zu verlieren. */
body.ea .ea-fg__karte2{
    border: 1px solid var(--ea-line-2, #EDE8E4); border-radius: 10px;
    overflow: hidden; background: #fff;
}
body.ea .ea-fg__bild{
    height: 150px; background: #F5F4F3;
    display: flex; align-items: center; justify-content: center;
}
body.ea .ea-fg__bild img{ width: 100%; height: 100%; object-fit: cover; display: block; }
body.ea .ea-fg__bildleer{ font-size: 13px; color: #A0A4A9; }
body.ea .ea-fg__karte2text{ padding: 13px 14px 15px; }
body.ea .ea-fg__karte2text h2{
    font-family: var(--ea-serif); font-weight: 400; font-size: 19px;
    margin: 0 0 3px; color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-fg__meta{ margin: 0; font-size: 14px; color: var(--ea-muted, #71757B); }

/* Die Zeilen. <details> statt Klickskript: Antippen oeffnet EIN
   Feld, ohne JavaScript, mit der Tastatur bedienbar, und ein
   Vorleseprogramm sagt "aufklappbar" statt "Grafik". */
body.ea .ea-fg__zeilen{ margin: 22px 0 0; border-top: 1px solid var(--ea-line-2, #EDE8E4); }

body.ea .ea-fg__zeile{
    border-bottom: 1px solid var(--ea-line-2, #EDE8E4);
    padding: 0;
}
body.ea .ea-fg__zeile > summary,
body.ea .ea-fg__zeile--fest{
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 2px; cursor: pointer; list-style: none;
}
body.ea .ea-fg__zeile--fest{ cursor: default; }
body.ea .ea-fg__zeile > summary::-webkit-details-marker{ display: none; }

body.ea .ea-fg__was{ flex: 0 0 84px; font-size: 13px; color: var(--ea-muted, #71757B); padding-top: 2px; }
body.ea .ea-fg__wert{ flex: 1 1 auto; font-size: 15.5px; line-height: 1.5; min-width: 0; }
body.ea .ea-fg__wert i{ color: #A9A59D; font-style: normal; }
body.ea .ea-fg__wert small{ display: block; color: var(--ea-muted, #71757B); font-size: 13px; margin-top: 3px; }
body.ea .ea-fg__stift{ flex: 0 0 auto; color: #3F5AD1; font-size: 13px; padding-top: 3px; }
body.ea .ea-fg__zeile[open] > summary .ea-fg__stift{ color: #A0A4A9; }
body.ea .ea-fg__zeile > .ea-fg__eingabe{ margin: 0 0 16px; }

/* Die Bilder und der Haken, der ueber sie entscheidet. */
body.ea .ea-fg__bilder{ margin-top: 6px; }
body.ea .ea-fg__gitter{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
body.ea .ea-fg__gitter div{ position: relative; padding-top: 100%; border-radius: 8px; overflow: hidden; background: #F5F4F3; }
body.ea .ea-fg__gitter img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* HEISST ea-fg__erlaubnis UND NICHT ea-fg__haken.

   Beim ersten Anlauf hiessen beide "__haken": der runde Bestaetigungs-
   kreis auf der Dankeseite und dieses Kaestchen. Der Kreis ist
   52 x 52 Punkt gross - und weil er in derselben Regel steht wie
   sein Zwilling auf der Formularseite, war das Zustimmungsfeld
   ploetzlich 82 Punkt breit: Der Satz stand als schmale Spalte da,
   der Kleingedruckte lief aus dem Kasten heraus.

     MERKSATZ: Zwei verschiedene Dinge duerfen nicht denselben Namen
     tragen, auch wenn beide "Haken" heissen. Der Name ist die
     Regel - wer ihn doppelt vergibt, vergibt die Groesse gleich mit.

   Gefunden erst im gerenderten Bild, nicht beim Lesen der CSS. */
body.ea .ea-fg__erlaubnis{
    display: flex; gap: 11px; align-items: flex-start;
    margin: 16px 0 4px; padding: 13px 14px;
    border: 1px solid #F0DED4; background: #FFF8F3; border-radius: 10px;
    cursor: pointer;
}
body.ea .ea-fg__erlaubnis input{ flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; }

/* flex:1 und min-width:0 gehoeren BEIDE hierher. Ein Flex-Kind darf
   von sich aus nicht schmaler werden als sein Inhalt; min-width:0
   hebt genau das auf. */
body.ea .ea-fg__erlaubnis span{ flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.5; }
body.ea .ea-fg__erlaubnis small{ display: block; color: var(--ea-muted, #71757B); font-size: 12.5px; margin-top: 4px; }

body.ea .ea-fg__quelle{
    margin: 22px 0 0; font-size: 13px; line-height: 1.55; color: var(--ea-muted, #71757B);
}

/* Die klebende Leiste liegt ueber dem Inhalt. Ohne diesen Abstand
   verdeckt sie beim Herunterscrollen genau den Satz, der erklaert,
   woraus das Profil gebaut wurde - also den, der Vertrauen schafft. */
body.ea .ea-fg__karte > .ea-fg__quelle:last-of-type{ margin-bottom: 8px; }

/* Der Knopf klebt unten und ist damit immer erreichbar - auch fuer
   den, der nur die halbe Seite liest. */
/* DECKEND, nicht rgba(255,255,255,.96).

   Bei 96 % scheint der Text darunter durch - auf Andrejs Bildschirm
   standen „Ort / Straße 1" und „Über uns" mitten im Knopfbereich. Vier
   Prozent Transparenz sieht man nicht als Effekt, sondern als Fehler.
   backdrop-filter half nicht: Safari zeichnet den Hintergrund davor. */
body.ea .ea-fg__leiste{
    position: sticky; bottom: 0; z-index: 5;
    margin: 26px -30px -30px; padding: 14px 30px 18px;
    background: #fff;
    border-top: 1px solid var(--ea-line-2, #EDE8E4);
    border-radius: 0 0 18px 18px;
}
/* Der Satz unter dem Knopf ist die EINWILLIGUNG und kein
   Kleingedrucktes. #A0A4A9 auf Weiss sind 2,6:1 - lesbar nur fuer
   den, der weiss, was dort steht. Eine Zustimmung, die man nicht
   lesen kann, ist keine; deshalb dieselbe Farbe wie jeder andere
   Nebentext der Seite (4,6:1). */
body.ea .ea-fg__einwilligung{
    margin: 10px 0 0; font-size: 12.5px; line-height: 1.5;
    color: var(--ea-muted, #71757B); text-align: center;
}
body.ea .ea-fg__spaeter{
    display: block; text-align: center; margin-top: 10px;
    font-size: 13.5px; color: var(--ea-muted, #71757B); text-decoration: none;
}
body.ea .ea-fg__spaeter:hover{ text-decoration: underline; }

@media (max-width: 575.98px){
    body.ea .ea-ps__karte,
    body.ea .ea-fg__karte{ padding: 22px 18px; border-radius: 14px; }
    body.ea .ea-fg__leiste{ margin: 22px -18px -22px; padding: 12px 18px 16px; border-radius: 0 0 14px 14px; }
    body.ea .ea-fg__was{ flex-basis: 72px; }
    body.ea .ea-fg__frist{ margin: -4px -4px 16px; }
}


/* =================================================================
   TEIL BW - Die Zahlen ganz oben auf /fuer-dienstleister
   Event ABC, 30.08.2026
   =================================================================

   VIERTE FASSUNG. Die drei verworfenen stehen hier, damit sie
   niemand noch einmal baut:

     1. Weisse Karte auf weissem Grund - las sich wie Fliesstext.
          MERKSATZ: Eine Zahl, die aussieht wie Text, wird gelesen
          wie Text - also gar nicht.
     2. Schwarzes Band ueber die volle Breite - sichtbar, aber ein
        Fremdkoerper auf einer Seite, die sonst hell ist.
     3. Kacheln im Logoblau - zu laut neben dem blauen Knopf.

   Jetzt: derselbe warme Grauton, den die Seite fuer ihre Abschnitte
   ohnehin benutzt (--ea-kopf, wie .ea-dl__abs--grau), Zahlen in
   Akzentblau. Ein Flaechenwechsel ohne Farbschock - sichtbar wie
   ein eigener Abschnitt, aber kein Fremdkoerper.

   ES IST EIN EIGENER <section> GANZ OBEN, kein Kasten im
   Aufmacher. Deshalb traegt die Flaeche von allein ueber die volle
   Breite und braucht keinen 100vw-Trick mit negativen Raendern -
   der bricht auf Seiten mit waagerechtem Scrollbalken.
   ================================================================= */

body.ea .ea-dl__sicht{
    background: var(--ea-kopf, #F7F5F3);
    padding: 34px 0 30px;
}

body.ea .ea-dl__sichthut{
    margin: 0 0 18px; font-size: 12px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--ea-muted, #71757B);
}

/* auto-fit statt fester Spaltenzahl: Es sind je nach Datenlage zwei
   oder drei Zahlen - eine feste Aufteilung liesse bei zweien eine
   Luecke stehen. */
body.ea .ea-dl__sichtzahlen{
    display: grid; gap: 24px 48px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

body.ea .ea-dl__sichtzahlen b{
    display: block;
    font-family: var(--ea-serif);
    font-weight: 400;
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1.04;
    letter-spacing: -.02em;
    color: var(--ea-accent, #3F5AD1);

    /* Zifferngleiche Breiten: Sonst tanzen 73.284 und 5.485
       nebeneinander, weil die 1 schmaler ist als die 8. */
    font-variant-numeric: tabular-nums;
}

body.ea .ea-dl__sichtzahlen span{
    display: block; margin-top: 10px;
    font-size: 15.5px; line-height: 1.45;
    color: var(--ea-ink-2, #45474A);
    max-width: 40ch;
}

body.ea .ea-dl__sichtquelle{
    margin: 22px 0 0;
    font-size: 12.5px; line-height: 1.55;
    color: var(--ea-muted, #71757B);
    max-width: 82ch;
}

@media (max-width: 575.98px){
    body.ea .ea-dl__sicht{ padding: 24px 0 22px; }
    body.ea .ea-dl__sichthut{ margin-bottom: 14px; }
    body.ea .ea-dl__sichtzahlen{ grid-template-columns: 1fr; gap: 18px; }
    body.ea .ea-dl__sichtzahlen b{ font-size: clamp(38px, 12vw, 50px); }
    body.ea .ea-dl__sichtzahlen span{ margin-top: 6px; font-size: 15px; max-width: none; }
    body.ea .ea-dl__sichtquelle{ margin-top: 16px; }
}


/* =================================================================
   TEIL BX - Vorschau und Freigabe auf der Profilseite
   Event ABC, 30.08.2026 (ersetzt die Fassung vom 31.08.)
   =================================================================

   Der Anbieter kommt aus der Vorschau-Mail auf SEINE ECHTE Seite und
   gibt sie DORT frei. Die zweite Seite ("Weiter zur Freigabe") ist
   aus dem Ablauf raus.

     MERKSATZ: Die Entscheidung gehoert dorthin, wo geschaut wird.
     Jede weitere Seite ist eine Stelle zum Abspringen.

   Zwei Balken, zwei Aufgaben:

   .ea-vs  laeuft im Text mit und sagt WAS das hier ist. Eine Zeile.
           Er darf die Seite, die begutachtet wird, nicht verdecken -
           deshalb klebt er ausdruecklich NICHT mehr oben.

   .ea-fgl klebt unten am Bildschirmrand und sagt WAS ICH JETZT TUE.
           Die Entscheidung faellt am Ende des Lesens; ein Knopf, zu
           dem man erst wieder hochscrollen muss, wird nicht gedrueckt.

   Beide dunkelblau (#2F45A8), nicht im Logoblau der Flaechen: Sie
   sind Hinweise des Systems, kein Teil der Seite, die begutachtet
   wird. Wer sie mit dem Inhalt verwechselt, haelt sie fuer etwas,
   das der Kunde spaeter auch sieht.
   ================================================================= */

/* ---- Die Zeile oben ---------------------------------------- */
body.ea .ea-vs{ background: #2F45A8; color: #fff; }
body.ea .ea-vs__in{
    max-width: var(--ea-wrap, 1280px);
    margin: 0 auto; padding: 11px clamp(18px, 2.6vw, 32px);
    font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.86);
    box-sizing: border-box;
}
body.ea .ea-vs__in b{ color: #fff; }

/* Dieselbe Zeile, aber ohne Handlung: Der Anbieter sieht seinen
   eigenen Entwurf ohne Freigabeschluessel. Gedeckter, weil hier
   nichts zu tun ist - ein kraeftiger Balken ohne Knopf liest sich
   wie ein Fehler. */
body.ea .ea-vs--still{ background: #4A5578; }

/* ---- Die Leiste unten -------------------------------------- */

/* z-index 1040 liegt ueber der Kopfzeile (1030). Das ist Absicht:
   Die Kopfzeile klebt oben, diese Leiste unten, sie beruehren sich
   nie - und wenn doch etwas anderes hier hereinragt, muss die
   Entscheidung obenauf liegen, nicht darunter. */
body.ea .ea-fgl{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: #2F45A8; color: #fff;
    box-shadow: 0 -8px 28px rgba(30,30,28,.22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.ea .ea-fgl__in{
    max-width: var(--ea-wrap, 1280px);
    margin: 0 auto; padding: 13px clamp(18px, 2.6vw, 32px);
    box-sizing: border-box;

    /* Aufgeklappt („Etwas stimmt nicht?") wird die Leiste hoch. Am
       Handy waere sie sonst laenger als der Bildschirm, und der
       Absendeknopf stuende ausserhalb - unerreichbar, weil eine
       feste Leiste nicht mitscrollt. */
    max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* Damit die Fusszeile nicht unter der Leiste verschwindet. */
body.ea:has(.ea-fgl){ padding-bottom: 156px; }

body.ea .ea-fgl__meldung{
    margin: 0 0 10px; padding: 9px 13px; border-radius: 8px;
    font-size: 14px; line-height: 1.45;
}
body.ea .ea-fgl__meldung--fehler{ background: #FBE2E2; color: #8A1F1F; }
body.ea .ea-fgl__meldung--gut{ background: #E4F4EA; color: #1C5B36; }

body.ea .ea-fgl__tat{
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px 28px; flex-wrap: wrap;
}
body.ea .ea-fgl__links{ flex: 1 1 340px; min-width: 0; }
body.ea .ea-fgl__rechts{ flex: 0 0 auto; text-align: right; max-width: 380px; }

/* Der Haken. Feste Groesse am Kaestchen, sonst zieht flex es in die
   Breite - genau der Fehler, der den Haken auf der Freigabeseite
   einmal 82 Pixel breit gemacht hat. */
body.ea .ea-fgl__haken{
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0; cursor: pointer;
    font-size: 14.5px; line-height: 1.45; color: #fff;
}
body.ea .ea-fgl__haken input[type="checkbox"]{
    flex: 0 0 auto;
    width: 19px; height: 19px; min-width: 19px; max-width: 19px;
    margin: 1px 0 0; padding: 0;
    accent-color: #fff;
    cursor: pointer;
}
body.ea .ea-fgl__klein{
    margin: 6px 0 0 29px;
    font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.72);
}

body.ea .ea-fgl__kn{
    display: inline-block; border: 0; cursor: pointer;
    padding: 12px 30px; border-radius: 999px;
    background: #fff; color: #2F45A8;
    font-size: 16px; font-weight: 600; line-height: 1.2;
    white-space: nowrap;
}
body.ea .ea-fgl__kn:hover{ background: #EEF1FE; color: #2F45A8; }

/* Der Satz, dem zugestimmt wird, steht unter dem Knopf und nicht
   auf einer anderen Seite: Im Streitfall zaehlt, was im Moment des
   Klicks zu lesen war. */
body.ea .ea-fgl__satz{
    margin: 8px 0 0;
    font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.72);
}

/* ---- "Etwas stimmt nicht?" --------------------------------- */
body.ea .ea-fgl__mehr{ margin-top: 10px; border-top: 1px solid rgba(255,255,255,.22); padding-top: 9px; }
body.ea .ea-fgl__mehr > summary{
    cursor: pointer; list-style: none;
    font-size: 14px; color: rgba(255,255,255,.9); text-decoration: underline;
    text-underline-offset: 3px;
}
body.ea .ea-fgl__mehr > summary::-webkit-details-marker{ display: none; }
body.ea .ea-fgl__mehr[open] > summary{ margin-bottom: 10px; }

body.ea .ea-fgl__lbl{
    display: block; margin: 0 0 6px;
    font-size: 13.5px; color: rgba(255,255,255,.82);
}
body.ea .ea-fgl__feld{
    display: block; width: 100%; box-sizing: border-box;
    padding: 10px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px;
    background: rgba(255,255,255,.08); color: #fff;
    font: inherit; font-size: 14.5px; line-height: 1.45;
    resize: vertical;
}
body.ea .ea-fgl__feld::placeholder{ color: rgba(255,255,255,.5); }
body.ea .ea-fgl__feld:focus{ outline: 2px solid #fff; outline-offset: 1px; }

body.ea .ea-fgl__hinzeile{
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-top: 10px;
}
body.ea .ea-fgl__kn2{
    border: 1px solid rgba(255,255,255,.55); cursor: pointer;
    padding: 9px 20px; border-radius: 999px;
    background: transparent; color: #fff;
    font-size: 14.5px; font-weight: 600;
}
body.ea .ea-fgl__kn2:hover{ background: rgba(255,255,255,.12); }
body.ea .ea-fgl__weg{ font-size: 13px; color: rgba(255,255,255,.62); text-decoration: underline; }
body.ea .ea-fgl__weg:hover{ color: #fff; }

/* ---- Nach der Freigabe ------------------------------------- */
body.ea .ea-fgok{ background: #E4F4EA; border-bottom: 1px solid #BFE0CD; }
body.ea .ea-fgok__in{
    max-width: var(--ea-wrap, 1280px);
    margin: 0 auto; padding: 26px clamp(18px, 2.6vw, 32px) 28px;
    box-sizing: border-box;
}
body.ea .ea-fgok__gross{
    margin: 0 0 8px;
    font-family: var(--ea-serif, Georgia, serif);
    font-size: clamp(24px, 3.2vw, 32px); line-height: 1.2; color: #17512F;
}
body.ea .ea-fgok__text{
    margin: 0 0 16px; max-width: 62ch;
    font-size: 15.5px; line-height: 1.6; color: #1E1E1C;
}
body.ea .ea-fgok__kn{
    display: inline-block; padding: 12px 28px; border-radius: 999px;
    background: var(--ea-accent, #3F5AD1); color: #fff;
    font-size: 16px; font-weight: 600; text-decoration: none;
}
body.ea .ea-fgok__kn:hover{ background: #33499F; color: #fff; }

/* ---- Die Freigabeseite (nur noch Abmeldung und alte Links) -- */
body.ea .ea-fg__zurueck{ margin: 0 0 22px; font-size: 14.5px; }
body.ea .ea-fg__zurueck a{ color: var(--ea-accent, #3F5AD1); text-decoration: none; }
body.ea .ea-fg__zurueck a:hover{ text-decoration: underline; }

@media (max-width: 767.98px){
    body.ea:has(.ea-fgl){ padding-bottom: 226px; }
    body.ea .ea-vs__in{ padding: 10px 18px; font-size: 13.5px; }
    body.ea .ea-fgl__in{ padding: 12px 18px 14px; }
    body.ea .ea-fgl__tat{ gap: 14px; }
    body.ea .ea-fgl__links,
    body.ea .ea-fgl__rechts{ flex: 1 1 100%; max-width: none; text-align: left; }
    body.ea .ea-fgl__haken{ font-size: 14px; }
    body.ea .ea-fgl__kn{ display: block; width: 100%; padding: 14px 20px; }
    body.ea .ea-fgl__satz{ margin-top: 8px; }
    body.ea .ea-fgl__hinzeile{ gap: 10px; }
    body.ea .ea-fgl__kn2{ width: 100%; }
    body.ea .ea-fgok__in{ padding: 22px 18px 24px; }
}


/* ================================================================
   TEIL BY  RATGEBER: BREITE WIE DIE SEITEN MIT KARTEN (30.08.2026)
   ================================================================
   (Hiess beim ersten Anhaengen faelschlich TEIL BA. Ich hatte nur
   nach "TEIL A?" gesucht und AZ als letzten gesehen - die Datei
   war da aber schon bei BX. MERKSATZ: Wer die naechste freie Nummer
   sucht, muss nach ALLEN suchen, nicht nach denen, die er erwartet.)
   ================================================================

   Andrej: "mach die Blogseiten breiter wie die Startseite, wo die
   Karten von Dienstleistern sind."

   WARUM DER RATGEBER SCHMAL WAR: Er haengt gar nicht an --ea-wrap.
   Zwei eigene Deckel sitzen darunter (TEIL AH):

       .ea-blog-article__head    max-width: 1040px
       .ea-blog-article__layout  max-width: 1040px
       .ea-blog-prose            width: min(100%, 800px)

   Bei 1920 px Bildschirm stand der Beitrag also in einer 1040 px
   breiten Spalte, linksbuendig in einem 1280 px breiten Rahmen -
   daher der grosse leere Streifen rechts.

   WAS HIER PASSIERT:

   1. --ea-wrap auf 1440 px, dieselbe Zahl wie Startseite,
      Kategorien, Suche und Dienstleistungen.
   2. Uebersicht: vier Karten nebeneinander ab 1280 px statt drei.
   3. Beitragsseite: die beiden Deckel von 1040 auf 1240 px.
   4. Das Inhaltsverzeichnis wandert ab 1200 px nach LINKS und bleibt
      beim Scrollen stehen.

   PUNKT 4 IST KEIN SCHMUCK, SONDERN DER GRUND, WARUM DIE BREITE
   ETWAS BRINGT. Der Fliesstext darf naemlich NICHT einfach
   mitwachsen: 800 px sind bei 17 px Schrift schon rund 95 Zeichen je
   Zeile, und ab etwa 100 Zeichen findet das Auge den Zeilenanfang
   nicht mehr zuverlaessig. Waechst der Text auf 1240 px, wird die
   Seite breiter und schlechter lesbar zugleich.

     MERKSATZ: Eine Textspalte wird nicht breiter, weil Platz da ist.
     Der Platz muss etwas anderes bekommen.

   Deshalb bekommt die gewonnene Breite das Verzeichnis, und der Text
   waechst nur von 800 auf 820 px.

   Unter 1200 px bleibt alles wie bisher: Verzeichnis oben, Text
   darunter. Der Umbruchpunkt liegt bewusst NICHT bei 991.98 px wie
   die Ergebnisliste - eine Seitenspalte plus 820 px Text braucht
   mehr als 992 px, sonst wird der Text dort schmaler statt breiter.
   ================================================================ */

body.ea-p-blog{ --ea-wrap: 1440px; }

/* --- Uebersicht ------------------------------------------------- */
@media (min-width: 1280px){
    body.ea-p-blog .ea-blog-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* --- Beitragsseite ---------------------------------------------- */
body.ea .ea-blog-article__head,
body.ea .ea-blog-article__layout{ max-width: 1240px; }

body.ea .ea-blog-article__head h1{ max-width: 1020px; }
body.ea .ea-blog-article__head .ea-blog-lead{ max-width: 900px; }

/* --- Inhaltsverzeichnis als Seitenspalte ------------------------ */
@media (min-width: 1200px){
    body.ea .ea-blog-article__layout{
        display: grid;
        grid-template-columns: 268px minmax(0, 1fr);
        align-items: start;
        gap: 66px;
    }
    body.ea .ea-blog-toc{
        position: sticky;
        /* Die Kopfzeile ist sticky (Zeile 5952), sonst schoebe sich das
           Verzeichnis beim Scrollen darunter. */
        top: calc(var(--ea-header-h) + 22px);
        width: auto;
        max-height: calc(100vh - var(--ea-header-h) - 60px);
        overflow-y: auto;
    }
    /* Die Linkliste war zweispaltig - das war fuer die volle Breite
       gedacht. In einer 268-px-Spalte brechen dadurch die Woerter mitten
       im Wort um. In der Seitenspalte also einspaltig.

         MERKSATZ: Wer ein Element woanders hinstellt, muss auch pruefen,
         was DARIN auf die alte Breite gerechnet war. */
    body.ea .ea-blog-toc div{ grid-template-columns: 1fr; gap: 9px; }
    body.ea .ea-blog-toc a{ display: block; }

    body.ea .ea-blog-prose{ width: min(100%, 820px); }
}


/* ================================================================
   TEIL BZ  RATGEBER AM HANDY: LESBARKEIT (30.08.2026)
   ================================================================

   Andrej: "mobile etwas anpassen ist nicht so leserlich, vielleicht
   Text etwas kleiner."

   GEMESSEN bei 390 px Fenster, vor dieser Aenderung:

       Textspalte        354 px
       Schriftgroesse   16.5 px
       Zeilenabstand    1.82  (30.03 px)
       Zeichen je Zeile   43
       H2               29 px  = Faktor 1.76 zum Text
       H3               24 px

   Die Zeilenlaenge war also NICHT das Problem - 43 Zeichen liegen im
   guten Bereich. Zwei andere Dinge waren es:

   1. DER ZEILENABSTAND. 1.82 ist fuer eine breite Spalte am Desktop
      richtig und am Handy zu viel: Die Zeilen treiben auseinander,
      der Absatz zerfaellt in Streifen.

   2. DIE UEBERSCHRIFTEN. 29 px gegen 16.5 px ist Faktor 1.76. Auf
      einem schmalen Bildschirm wirkt das wie eine Plakatwand ueber
      einem Brief.

     MERKSATZ: "Zu gross" heisst am Handy meistens nicht die Schrift,
     sondern der Abstand zwischen den Zeilen und der Sprung zur
     Ueberschrift.

   Die Schrift geht trotzdem von 16.5 auf 16 px zurueck - ein kleiner
   Schritt, mehr vertraegt Fliesstext am Handy nicht, ohne muehsam zu
   werden.

   Am Desktop wird NICHTS angefasst: dort sind es 75 Zeichen je Zeile
   und das Mass stimmt.
   ================================================================ */

@media (max-width: 575px){

    body.ea .ea-blog-prose{ font-size: 16px; line-height: 1.66; }
    body.ea .ea-blog-prose li{ line-height: 1.62; }

    /* Der Vorlauf-Absatz bleibt groesser als der Rest, aber nicht mehr
       so viel. */
    body.ea .ea-blog-prose>p:first-child{ font-size: 17.5px; line-height: 1.6; }

    /* Ueberschriften auf Faktor 1.5 beziehungsweise 1.2 zum Text. */
    body.ea .ea-blog-prose h2{ font-size: 24px; line-height: 1.24; margin-top: 38px; }
    body.ea .ea-blog-prose h3{ font-size: 19px; line-height: 1.32; margin-top: 28px; }

    /* Die H1 bleibt unangetastet: Sie steht am Handy bereits mit
       !important auf 30 px - da hat schon jemand nachgestellt. Eine
       Regel dazuzuschreiben, die dagegen verliert, sieht nach Arbeit
       aus und tut nichts.
         MERKSATZ: Toter Code ist schlimmer als kein Code. Er behauptet,
         etwas zu regeln. */
    body.ea .ea-blog-article__head .ea-blog-lead{ font-size: 16.5px; line-height: 1.6; }

    /* Tabellen sind am Handy ohnehin geschoben - kleiner passt mehr in
       den sichtbaren Ausschnitt und spart Wischen. */
    body.ea .ea-blog-tabelle table{ font-size: 14.5px; }
    body.ea .ea-blog-tabelle th,
    body.ea .ea-blog-tabelle td{ padding: 9px 11px; }

    /* Die Hinweiskaesten und der Zitatblock ziehen mit. */
    body.ea .ea-blog-hinweis{ font-size: 15px; line-height: 1.6; }
    body.ea .ea-blog-prose blockquote{ font-size: 15.5px; line-height: 1.62; }
}


/* ================================================================
   TEIL CA  RATGEBER: TABELLEN, HINWEISKAESTEN, FAQ (30.08.2026)
   ================================================================

   EIN VERSAEUMNIS VON MIR, gefunden beim Nachmessen der Handy-
   Lesbarkeit: Die 14 Fotografen-Beitraege benutzen vier Klassen, die
   es im Stylesheet ueberhaupt nicht gab -

       .ea-blog-tabelle        1 bis 3 Tabellen je Beitrag
       .ea-blog-hinweis        "keine Rechtsberatung", "alles Bandbreiten"
       .ea-blog-hinweis--cta   der Kasten mit dem Verweis aufs Profil
       .ea-faq                 der Fragenteil am Ende

   Ich hatte sie beim Schreiben der Texte erfunden und nie CSS dafuer
   geliefert. Ergebnis: Tabellen ohne Linien und ohne Kopfzeile,
   Hinweiskaesten als blosser Absatz, der CTA-Kasten unsichtbar.
   Aufgefallen ist es erst, als die Klassenmenge vor und nach TEIL BZ
   drei neue Namen zeigte - Namen, die dort seit Wochen haetten stehen
   muessen.

     MERKSATZ: Wer im Text eine Klasse vergibt, hat damit ein
     Versprechen ans Stylesheet gegeben. Eine Klasse ohne Regel ist
     kein Gestaltungsmittel, sondern ein Kommentar im HTML.

   Farben und Masse kommen aus den vorhandenen Variablen, damit die
   Kaesten zum uebrigen Ratgeber passen und nicht wie Fremdkoerper
   wirken.
   ================================================================ */

/* --- Tabellen --------------------------------------------------- */

/* Der Rahmen scrollt, die Tabelle nicht: Am Handy passen vier Spalten
   nie, und eine gequetschte Tabelle ist unleserlicher als eine, die
   man schiebt. */
body.ea .ea-blog-tabelle{
    margin: 30px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--blog-line);
    border-radius: 10px;
}
body.ea .ea-blog-tabelle table{
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
    line-height: 1.5;
}
/* Die Beschriftung gehoert nach oben und nach links - mittig sah sie
   aus wie eine verirrte Zwischenueberschrift. */
body.ea .ea-blog-tabelle caption{
    caption-side: top;
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--blog-muted);
    padding: 15px 18px 11px;
}
body.ea .ea-blog-tabelle th{
    text-align: left;
    font-weight: 600;
    color: var(--blog-ink);
    background: var(--blog-warm);
    padding: 11px 18px;
    border-bottom: 1px solid var(--blog-line);
    vertical-align: bottom;
}
body.ea .ea-blog-tabelle td{
    padding: 12px 18px;
    border-bottom: 1px solid var(--blog-line);
    vertical-align: top;
}
body.ea .ea-blog-tabelle tbody tr:last-child td{ border-bottom: 0; }
/* Die erste Spalte traegt die Sache, um die es geht. */
body.ea .ea-blog-tabelle td:first-child{ color: var(--blog-ink); }

/* --- Hinweiskaesten --------------------------------------------- */
body.ea .ea-blog-hinweis{
    background: var(--blog-warm);
    border-left: 3px solid var(--ea-gold, #B08327);
    border-radius: 8px;
    padding: 15px 20px;
    margin: 26px 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ea-ink-2, #45474A);
}
body.ea .ea-blog-hinweis strong{ color: var(--blog-ink); }

/* Der Kasten mit dem Verweis aufs Anbieterprofil - gruen statt gold,
   damit man Hinweis und Angebot auseinanderhaelt. */
body.ea .ea-blog-hinweis--cta{
    background: var(--ea-ok-soft, #E9F3EE);
    border-left-color: var(--ea-ok, #1F6B4E);
    padding: 20px 24px;
    margin: 34px 0;
}
body.ea .ea-blog-hinweis--cta p{ margin: 0; }
body.ea .ea-blog-hinweis--cta p + p{ margin-top: 12px; }
body.ea .ea-blog-hinweis--cta a{
    color: var(--ea-ok, #1F6B4E);
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 1px;
}
body.ea .ea-blog-hinweis--cta a:hover{ opacity: .8; }

/* --- Der Fragenteil am Ende ------------------------------------- */
body.ea .ea-faq{
    margin-top: 58px;
    padding-top: 6px;
    border-top: 1px solid var(--blog-line);
}
/* Die Fragen sind viele und kurz - als volle H3 wuerden sie den
   Schluss des Beitrags erschlagen. */
body.ea .ea-faq h3{
    font-size: 20px;
    line-height: 1.34;
    margin: 30px 0 8px;
}

/* --- Zitat und Schreibmaschinenschrift -------------------------- */
body.ea .ea-blog-prose blockquote{
    margin: 26px 0;
    padding: 2px 0 2px 22px;
    border-left: 3px solid var(--blog-line);
    color: var(--ea-ink-2, #45474A);
}
body.ea .ea-blog-prose blockquote p{ margin: 0 0 10px; }
body.ea .ea-blog-prose blockquote p:last-child{ margin: 0; }
body.ea .ea-blog-prose code{
    background: var(--blog-warm);
    padding: .1em .38em;
    border-radius: 5px;
    font-size: .92em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Am Handy --------------------------------------------------- */
@media (max-width: 575px){
    body.ea .ea-blog-tabelle caption{ padding: 13px 14px 9px; }
    body.ea .ea-blog-tabelle th,
    body.ea .ea-blog-tabelle td{ padding: 9px 14px; }
    body.ea .ea-blog-hinweis{ padding: 13px 16px; font-size: 15px; }
    body.ea .ea-blog-hinweis--cta{ padding: 17px 18px; }
    body.ea .ea-faq h3{ font-size: 17.5px; margin-top: 24px; }
}

/* ==================================================================
   AZ. PAKETKARTEN: WENIGE KARTEN, RICHTIGE BREITE      31.08.2026

   .ea-pkgs hat drei feste Spalten. Bei einer Karte stand die Karte
   links und daneben zweimal nichts - siehe das Profil von Andreas
   Scheibel, drei Leistungen mit je einem Paket.

     MERKSATZ: Ein Raster mit fester Spaltenzahl braucht einen Fall
     fuer "weniger Karten als Spalten". Sonst zeichnet es Luecken,
     die wie ein Ladefehler aussehen.

   Die Namen sind vorher gegen css und templates geprueft (nach dem
   Fall ea-mehr am 31.08.2026): ea-pkgs--1, ea-pkgs--2 und
   ea-pkg__leistung kommen sonst nirgends vor.
   ================================================================== */

/* Eine Karte: nicht ueber die ganze Breite ziehen. Eine Karte mit
   sechs kurzen Zeilen, die 900 Punkt breit ist, liest sich schlechter
   als dieselbe Karte in Lesebreite. */
body.ea .ea-pkgs--1{ grid-template-columns: minmax(0, 360px); }
body.ea .ea-pkgs--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Der Name der Leistung ueber dem Paketnamen. Nur dann da, wenn die
   Liste Pakete verschiedener Leistungen enthaelt - sonst stuende
   ueber jeder Karte dasselbe Wort.

   Klein und grau: Er ordnet ein, er ist nicht die Ueberschrift. Die
   Ueberschrift ist der Paketname darunter. */
body.ea .ea-pkg__leistung{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ea-ink-3, #71757B);
    margin-bottom: -2px;
}

/* Schmale Fenster: Das Raster hat dort ohnehin eine Spalte
   (Zeile 6230, @media max-width 991.98px). DIESE Regeln stehen weiter
   unten in der Datei und wuerden sie sonst wieder ueberschreiben -
   deshalb DERSELBE Haltepunkt, nicht ein eigener.

     MERKSATZ: Wer spaeter in der Datei steht, gewinnt. Eine neue Regel
     mit einem anderen Haltepunkt hebelt die alte auf halber Strecke
     aus - und zwar genau zwischen den beiden Breiten. */
@media (max-width: 991.98px){
    body.ea .ea-pkgs--1,
    body.ea .ea-pkgs--2{ grid-template-columns: 1fr; }
}

/* ==================================================================
   BA. DIE BEZAHLTE LEISTE AUF DER STARTSEITE          31.08.2026

   Die oberste Reihe der Startseite zeigt die Premium-Anbieter, quer
   ueber alle Leistungen. Beschriftet wird sie mit .ea-spon__kopf -
   derselben Klasse wie ueber der Ergebnisliste, damit die
   Kennzeichnung an beiden Stellen gleich aussieht und eine Aenderung
   nicht an einer davon haengen bleibt.

   Hier steht deshalb nur, was diese eine Stelle braucht: ein Hauch
   Absetzung nach unten, damit die erste Leistungsreihe darunter nicht
   wie eine Fortsetzung der bezahlten wirkt.

     MERKSATZ: Eine bezahlte Reihe muss als eigener Block lesbar sein.
     Verschwimmt sie mit dem redaktionellen Teil darunter, faerbt die
     Kennzeichnung auf nichts mehr ab.

   Name vorher gegen css und templates geprueft: ea-rh--spon kommt
   sonst nirgends vor.
   ================================================================== */

body.ea .ea-rh--spon{
    padding-bottom: 26px;
    border-bottom: 1px solid var(--ea-line, #E7E2DE);
    margin-bottom: 6px;
}

/* ==================================================================
   BB. DER KOPF DER KATEGORIESEITE WIE AUF DER STARTSEITE  31.08.2026

   Andrej im Vergleich beider Seiten: Auf der Startseite ist der Kopf
   kompakter - die Ueberschrift kleiner, und zwischen Suchleiste und
   der Zeile darunter steht weniger Luft. Auf der Kategorieseite soll
   es genauso aussehen.

   GEMESSEN, nicht geschaetzt (Stand vorher):

     Ueberschrift   Startseite  h1              24 px  (Zeile 11132)
                    Kategorie   .ea-kopf__t     34 px  (Zeile 17066)

     Luft unter der Suchleiste
                    Startseite  suche 12 + kacheln 0   = 12 px
                    Kategorie   suche 16 + fz     10   = 26 px

   Also: 10 px zu grosse Schrift und 14 px zu viel Luft. Beides wird
   hier auf die Werte der Startseite gezogen.

     MERKSATZ: Zwei Seiten, die denselben Kopf haben sollen, brauchen
     DIESELBEN Zahlen - nicht zwei Gestaltungen, die sich aehneln.
     Sonst laufen sie beim naechsten Nachtrag wieder auseinander.

   NUR padding-top und padding-bottom werden angefasst, nie das
   padding als Ganzes: Die seitlichen Werte stehen als clamp() in den
   alten Regeln und haengen an der Fensterbreite. Wer sie mit einer
   Kurzschreibweise ueberschreibt, nimmt sie lautlos weg.
   ================================================================== */

/* Die Ueberschrift der Kategorieseite ist ein <span>, keine <h1> -
   auf einer Unterseite waere eine zweite h1 mit Werbesatz falsch.
   Aussehen soll sie trotzdem gleich.

   GLEICH HEISST: dieselbe Groesse UND dieselbe Staerke. Andrej hat es
   gesehen, bevor ich es gemessen hatte - die h1 der Startseite steht
   auf font-weight 600 (Zeile 11228, ein Nachtrag), waehrend
   .ea-kopf__t bei 400 geblieben ist. Bei 34 px fiel das kaum auf,
   bei 24 px sofort.

     MERKSATZ: "Sieht gleich aus" ist keine Pruefung. Zwei Regeln sind
     erst gleich, wenn JEDE Eigenschaft nachgesehen ist - Groesse,
     Staerke, Laufweite, Farbe. Eine davon steht fast immer in einem
     spaeteren Nachtrag und nicht in der Regel, die man liest.

   Auch die Laufweite wird angeglichen: -.015em beim span gegen
   -.01em bei der h1. */
body.ea .ea-header--suche .ea-kopf__t{
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: 3px;
}

/* Die Suchleiste ruecke an die Filterzeile heran - dieselben 12 px
   wie zur Kachelzeile der Startseite. */
body.ea .ea-header--filter .ea-kopf__suche{ padding-bottom: 12px; }

/* Und die Filterzeile bringt ihren eigenen Abstand nach oben nicht
   mehr mit. Unten dieselben 18 px, mit denen die Kachelzeile der
   Startseite abschliesst. */
body.ea .ea-kopf__filter .ea-fz{ padding-top: 0; padding-bottom: 18px; }

@media (max-width: 991.98px){
    body.ea .ea-header--suche .ea-kopf__t{ font-size: 20px; }
    body.ea .ea-header--filter .ea-kopf__suche{ padding-bottom: 10px; }
    body.ea .ea-kopf__filter .ea-fz{ padding-top: 0; padding-bottom: 12px; }
}

/* ==================================================================
   BC. DER ERKLAERKASTEN IN DEN WISCHBAREN REIHEN       31.08.2026

   WAS SCHIEFGING: In TEIL BM stand
       body.ea .ea-rh__streifen .ea-geprueft__box,
       body.ea .ea-spon__reihe  .ea-geprueft__box{ display: none; }
   und das war Absicht - diese Reihen haben overflow-y: hidden, ein
   342 Punkt hoher Kasten wird darin abgeschnitten.

   Spaeter kam in TEIL BI dazu:
       body.ea details.ea-geprueft > .ea-geprueft__box{ display: block; }
   Diese Regel ist SPEZIFISCHER (ein Element mehr) und steht weiter
   unten. Sie hat die Ausblendung lautlos wieder aufgehoben - und
   niemand hat es gemerkt, weil zur selben Zeit das Skript auf dem
   Server veraltet war und gar nichts mehr aufklappte. Erst nachdem
   das Skript neu war (LIEFERUNG 57), kam der halb abgeschnittene
   Kasten zum Vorschein.

     MERKSATZ: Eine Regel, die etwas ausblendet, muss gegen JEDE
     spaetere Regel bestehen, die dieselbe Eigenschaft setzt. Sonst
     ist die Ausblendung eine Absicht, die irgendwann verfaellt.

   WAS JETZT GILT:
   1. Die Ausblendung bekommt dieselbe Bauart wie die Regel, die sie
      ueberholt hat - damit gewinnt sie wieder.
   2. Holt das Skript den Kasten aus der Reihe heraus (Klasse is-frei,
      position: fixed per Skript), darf er sichtbar werden. Dann gibt
      es keinen abschneidenden Vorfahren mehr.

   Ohne Skript bleibt es bei 1: unsichtbar. Halb abgeschnitten waere
   schlechter als gar nicht.
   ================================================================== */

body.ea .ea-rh__streifen details.ea-geprueft > .ea-geprueft__box,
body.ea .ea-spon__reihe  details.ea-geprueft > .ea-geprueft__box,
body.ea .ea-lreihe__in   details.ea-geprueft > .ea-geprueft__box{
    display: none;
}

/* Herausgeholt: Ort und position setzt das Skript inline, hier steht
   nur, dass er wieder gezeichnet werden darf - und ueber allem liegt.
   60 ist mehr als der durchsichtige Deckel (29) und mehr als der
   Kasten an seinem gewohnten Platz (31). */
body.ea details.ea-geprueft > .ea-geprueft__box.is-frei{
    display: block;
    z-index: 60;
}


/* ============================================================
   TEIL CA  ORTSUCHE IM PROFIL (31.08.2026)

   Das Ortsfeld war ein Auswahlfeld, das sich nur ueber die
   Postleitzahl fuellte. Jetzt ist es ein Suchfeld, und darunter
   steht die Vorschlagsliste.

   Sie steht IM Fluss der Seite und nicht darueber. Ein
   ausklappendes Menue mit position:absolute muesste sich gegen
   jede Kante und jeden Ueberlauf behaupten, den die Karte um es
   herum hat - genau daran ist der geprueft-Tooltip zweimal
   gescheitert. Eine Liste, die die Zeile darunter ein Stueck
   schiebt, hat dieses Problem nicht. Sie ist ohnehin nur
   Sekunden zu sehen.
   ============================================================ */

body.ea .ea-f__orte{
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    border: 1px solid var(--ea-line, #E7E2DE);
    border-radius: 10px;
    background: #fff;
    overflow-y: auto;
    max-height: 270px;
}
body.ea .ea-f__orte[hidden]{ display: none; }

body.ea .ea-f__orte li + li{ border-top: 1px solid var(--ea-line-2, #F2EEEB); }

body.ea .ea-f__ortk{
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    border: 0;
    background: none;
    padding: 9px 12px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--ea-ink, #1E1E1C);
}
body.ea .ea-f__ortk:hover,
body.ea .ea-f__ortk:focus-visible{ background: var(--ea-line-2, #F2EEEB); }

body.ea .ea-f__ortn{ flex: 1 1 auto; min-width: 0; }

/* Die Postleitzahl steht daneben, nicht im Namen: Sie ist die
   Antwort auf "welches Leipzig", nicht Teil des Ortsnamens. */
body.ea .ea-f__ortz{
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--ea-muted, #71757B);
    font-variant-numeric: tabular-nums;
}

body.ea .ea-f__ortleer{
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--ea-muted, #71757B);
}

/* =================================================================
   TEIL CB - Leistungen als Liste, Schwerpunkte und Anlaesse
   Event ABC, 01.09.2026
   =================================================================

   Ersetzt die Kachelwolke im Dienstleisterbereich. Zwei Gruende,
   beide von Andrej beim Durchspielen gefunden:

   1. Der Katalog mit 73 Kacheln stand IMMER da und drueckte alles
      andere aus dem Blick. Jetzt liegt er hinter
      "Leistung hinzufuegen"; oben steht nur, was man hat.

   2. Ein Tipper auf eine Kachel loeschte eine Leistung, ohne dass
      man es merkte: "Dann sind die Drohnenaufnahmen weg aus den
      Leistungen und man merkt das gar nicht."

      Gespeichert wurde erst beim Absenden - aber der Chip war weg,
      und wer das nicht sieht, drueckt danach ahnungslos auf
      Speichern.

        MERKSATZ: Was verschwindet, merkt niemand. Was
        durchgestrichen dasteht, sieht jeder.

   Die Kacheln selbst (.ea-lst__w) bleiben unveraendert - im
   Katalog, bei den Schwerpunkten, Anlaessen und Sprachen ist es
   dieselbe Handlung und deshalb dasselbe Aussehen.
   ================================================================= */

body.ea .ea-lz__h2{
    font-family: var(--ea-serif);
    font-size: 21px; font-weight: 400; margin: 0 0 4px;
}
body.ea .ea-lz__hin{
    margin: 0 0 12px; font-size: 14.5px; color: var(--ea-muted); max-width: 62ch;
}
body.ea .ea-lz__zahl{
    display: inline-block; min-width: 18px; padding: 2px 9px; margin-left: 5px;
    border-radius: 999px; background: #E7EAFB; color: var(--ea-accent);
    font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700; vertical-align: middle;
}

/* ---------- Die Liste dessen, was man hat ---------- */
body.ea .ea-lz{
    list-style: none; margin: 12px 0 0; padding: 0;
    border: 1px solid var(--ea-line-2); border-radius: 14px;
}
body.ea .ea-lz:empty{ display: none; }
body.ea .ea-lz__z{ border-top: 1px solid var(--ea-line-2); padding: 13px 16px; }
body.ea .ea-lz__z:first-child{ border-top: 0; }

body.ea .ea-lz__kopf{ display: flex; align-items: center; gap: 12px; min-height: 26px; }
body.ea .ea-lz__text{ flex: 1 1 auto; min-width: 0; }
body.ea .ea-lz__name{ font-size: 16px; font-weight: 600; }

body.ea .ea-lz__haupt{
    display: inline-block; margin-left: 9px; padding: 2px 9px; border-radius: 999px;
    background: #F1EFEC; color: var(--ea-muted);
    font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* "Entfernen" ist ein beschrifteter Knopf am Rand und NICHT dieselbe
   Geste wie das Auswaehlen. Genau daran ist die Kachel gescheitert:
   Antippen hiess einmal "waehlen" und einmal "loeschen". */
body.ea .ea-lz__weg{
    flex: 0 0 auto; cursor: pointer;
    border: 1px solid var(--ea-line-2); background: #fff; color: var(--ea-muted);
    font: inherit; font-size: 13.5px; padding: 7px 15px; border-radius: 999px;
}
body.ea .ea-lz__weg:hover{ border-color: #D9B4B0; color: #A8302A; }

/* ---------- Vorgemerkt zum Entfernen: bleibt stehen ---------- */
body.ea .ea-lz__zurueck{
    display: none; flex: 1 1 auto; align-items: center; justify-content: flex-end;
    gap: 12px; font-size: 14px; color: #8A5A12;
}
body.ea .ea-lz__z--weg{ background: #FFF6E5; }
body.ea .ea-lz__z--weg .ea-lz__name{ text-decoration: line-through; color: var(--ea-muted); }
body.ea .ea-lz__z--weg .ea-lz__weg,
body.ea .ea-lz__z--weg .ea-lz__sp,
body.ea .ea-lz__z--weg .ea-lz__spHalter,
body.ea .ea-lz__z--weg .ea-lz__haupt{ display: none; }
body.ea .ea-lz__z--weg .ea-lz__zurueck{ display: flex; }

body.ea .ea-lz__wieder{
    border: 1px solid #E4C88A; background: #fff; color: #8A5A12; cursor: pointer;
    font: inherit; font-size: 13.5px; padding: 7px 15px; border-radius: 999px; white-space: nowrap;
}
body.ea .ea-lz__wieder:hover{ background: #FFFBF2; }

/* ---------- Schwerpunkte in der Zeile ---------- */
body.ea .ea-lz__sp{ margin: 7px 0 0; font-size: 14px; color: var(--ea-ink-2); }
body.ea .ea-lz__sp b{ font-weight: 600; }
body.ea .ea-lz__sp--leer{ color: var(--ea-muted); }
body.ea .ea-lz__aendern{
    border: 0; background: none; padding: 0 0 0 5px; cursor: pointer;
    font: inherit; font-size: 14px; color: var(--ea-accent);
    text-decoration: underline; text-underline-offset: 2px;
}
body.ea .ea-lz__spHalter{ margin-top: 10px; }
body.ea .ea-lz__leer{ margin: 12px 0 0; font-size: 15px; color: var(--ea-muted); }

/* ---------- Der Katalog, zugeklappt ---------- */
body.ea .ea-dazu{
    margin-top: 14px; border: 1px dashed #C9C4BD; border-radius: 14px; background: #FBFAF9;
}
body.ea .ea-dazu[open]{ background: #fff; border-style: solid; border-color: var(--ea-line-2); }
body.ea .ea-dazu > summary{
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 9px;
    padding: 15px 16px; font-size: 16px; font-weight: 600; color: var(--ea-accent);
}
body.ea .ea-dazu > summary::-webkit-details-marker{ display: none; }
body.ea .ea-dazu__plus{
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: #E7EAFB; font-size: 17px; line-height: 1;
}
body.ea .ea-dazu__in{ padding: 0 16px 18px; }

/* Die Bereiche gab es schon (Stufen::BEREICHE) - sie haben bisher
   nur die Reihenfolge bestimmt und waren nie zu sehen. */
body.ea .ea-lst__bereich{
    margin: 18px 0 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ea-muted);
}
body.ea .ea-lst__bereich:first-of-type{ margin-top: 8px; }

/* ---------- Die uebrigen Bloecke ---------- */
body.ea .ea-lz__block{
    margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ea-line-2);
}
body.ea .ea-lz__select{
    font: inherit; font-size: 15px; padding: 10px 12px;
    border: 1px solid #C9C4BD; border-radius: 10px; background: #fff;
    min-width: 280px; max-width: 100%;
}

/* ---------- Speichern, klebt unten ---------- */
body.ea .ea-lz__fuss{
    position: sticky; bottom: 0; z-index: 5;
    margin-top: 30px; padding: 14px 0; background: #fff;
    border-top: 1px solid var(--ea-line-2);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
body.ea .ea-lz__warn{
    font-size: 14.5px; color: #8A5A12;
    background: #FFF6E5; border: 1px solid #F2D49B;
    padding: 7px 13px; border-radius: 999px;
}

/* ---------- Im Profilkopf ---------- */

/* Dieselbe Groesse und Farbe wie die Sprachzeile darueber. Die drei
   Zeilen - Sprachen, Schwerpunkte, Geeignet fuer - sind eine Gruppe
   und sollen auch wie eine aussehen. */
body.ea .ea-phead__zweite{
    margin: 7px 0 0;
    font-size: 14.5px; line-height: 1.5; color: var(--ea-ink-2, #45474A);
}
body.ea .ea-phead__zweite b{ font-weight: 600; }

@media (max-width: 575.98px){
    body.ea .ea-lz__z{ padding: 12px 14px; }

    /* Am Handy zuerst der Name ueber die volle Breite, darunter der
       Knopf - nebeneinander bricht "Hochzeits- & Eventplanung" um
       und der Knopf haengt allein in einer Zeile. */
    body.ea .ea-lz__kopf{ flex-wrap: wrap; gap: 8px; }
    body.ea .ea-lz__text{ flex: 1 1 100%; }
    body.ea .ea-lz__haupt{ margin: 4px 0 0; }
    body.ea .ea-lz__weg{ order: 3; }
    body.ea .ea-lz__zurueck{ flex: 1 1 100%; justify-content: space-between; }
    body.ea .ea-lz__block{ margin-top: 26px; padding-top: 20px; }
    body.ea .ea-lz__select{ min-width: 0; width: 100%; }
    body.ea .ea-lz__fuss{ gap: 10px; }
    body.ea .ea-lz__warn{ font-size: 14px; }
    body.ea .ea-phead__zweite{ font-size: 14px; }
}

/* =================================================================
   ABSTAND ZUM FUSS - 02.09.2026 (Fassung 233)
   =================================================================
   Andrej mit zwei Bildschirmfotos: Die letzte Zeile des Inhalts -
   einmal "Fotograf nach Anlass", einmal die Leistungs-Chips - klebte
   ohne jeden Zwischenraum am dunklen Fuss.

   In der Regel oben (Zeile 6059) stand ausdruecklich margin-top:0.
   Das war fuer Seiten gedacht, deren letzter Block selbst schon
   einen Abstand mitbringt - nur bringen ihn nicht alle mit, und
   dann steht Text auf einer Kante.

     MERKSATZ: Abstand gehoert an EINE Stelle. Ihn bei jedem Block
     einzeln nachzutragen heisst, ihn beim naechsten neuen Block
     wieder zu vergessen.

   NUR DER DUNKLE FUSS. Die schmale Fusszeile im
   Dienstleisterbereich (.ea-footer--schmal) ist durchsichtig und
   steht dicht unter der Arbeitsflaeche - dort waeren 72 Pixel Loch
   und kein Abstand.

   Angrenzende Aussenabstaende fallen zusammen: Bringt der letzte
   Block schon 40 Pixel mit, werden daraus nicht 112, sondern 72.
   Genau deshalb steht der Wert hier und nicht als Innenabstand. */
body.ea .ea-footer:not(.ea-footer--schmal){ margin-top:72px }

@media (max-width:767.98px){
    body.ea .ea-footer:not(.ea-footer--schmal){ margin-top:48px }
}


/* ==================================================================
   BF. PREMIUM AUF DER STARTSEITE SO GROSS WIE AUF DER KATEGORIESEITE
   02.09.2026

   Andrej im Vergleich beider Bilder: Die Premium-Karten auf der
   Startseite sind kleiner als dieselben Karten ueber der
   Ergebnisliste. Nachgemessen stimmte das - und zwar deutlich:

     Fenster 1440 px und breiter
        Startseite   fuenf Karten je 262,4 px
        Kategorie    vier  Karten je 333,5 px      = 71 px schmaler

     Fenster 1000 px
        Startseite   drei  Karten je 305,3 px
        Kategorie    zwei  Karten je 467,0 px

   WARUM: Es sind zwei verschiedene Bauteile. Die Kategorieseite
   nimmt .ea-spon__reihe (zwei Karten bis 1180 px, danach vier), die
   Startseite .ea-rh__streifen mit --ea-n (eins, zwei ab 560, drei ab
   860, vier ab 1200, fuenf ab 1500). Zwei Leitern mit verschiedenen
   Sprossen - deshalb standen dieselben Karten in zwei Groessen da.

   WAS HIER PASSIERT: Nur die EINE Reihe auf der Startseite bekommt
   die Sprossen der Kategorieseite. Sie traegt dafuer schon eine
   eigene Kennung, .ea-rh--spon (main.tpl, Zeile 64) - die uebrigen
   Reihen der Startseite (Fotograf, Trauredner ...) bleiben
   unveraendert bei fuenf. Nachgemessen: vorher wie nachher 262,4 px
   bei 1440 px Fenster.

     MERKSATZ: Nicht die Leiter fuer alle umbauen, wenn nur eine
     Reihe auf eine andere Seite passen soll.

   Die Zwischenraeume muessen mit: Der Streifen rechnet die
   Kartenbreite aus 16 px Luft, die Kategoriereihe aus 14 px. Ohne
   die Anpassung blieben 1,5 px Unterschied je Karte stehen.

   Die kleinere Schrift ab 1180 px ist keine Zutat, sondern gehoert
   zur Groesse: Bei 269 px Kartenbreite bricht der Name mit 16,5 px
   in die Auslassungspunkte. Auf der Kategorieseite steht sie
   deshalb schon (TEIL AW) - hier steht dieselbe.

   GEMESSEN, beide Seiten nebeneinander, nach der Aenderung:

        390 px : 171,0 px beide      1280 px : 293,5 px beide
        700 px : 325,8 px beide      1440 px : 333,5 px beide
       1000 px : 467,0 px beide      1600 px : 333,5 px beide
       1180 px : 269,2 px beide

   Auch Bildhoehe, Eckenrundung und Schriftgroesse sind auf beiden
   Seiten gleich - sonst waere es dieselbe Breite und trotzdem eine
   andere Karte.

   Gewischt wird weiter: grid-auto-flow, overflow-x und das
   Einrasten bleiben unberuehrt. Ab 1180 px sieht man jetzt vier
   statt fuenf Premium-Karten auf einmal, die uebrigen kommen beim
   Wischen.
   ================================================================== */

body.ea .ea-rh--spon .ea-rh__streifen{ --ea-spg: 14px; }

@media (min-width: 768px){
    body.ea .ea-rh--spon .ea-rh__streifen{
        --ea-n: 2;
        gap: var(--ea-spg);
        grid-auto-columns: calc((100% - (var(--ea-n) - 1) * var(--ea-spg)) / var(--ea-n));
    }
}

@media (min-width: 1180px){
    body.ea .ea-rh--spon .ea-rh__streifen{ --ea-n: 4; }

    /* dieselben fuenf Zeilen wie in TEIL AW fuer .ea-spon__reihe.
       --ea-spg heisst dort genauso und meint dasselbe: die Luft
       zwischen zwei Karten. */
    body.ea .ea-rh--spon .ea-rh__streifen .ea-c__n{ font-size: 15.5px; }
    body.ea .ea-rh--spon .ea-rh__streifen .ea-c__k{ font-size: 13.5px; }
    body.ea .ea-rh--spon .ea-rh__streifen .ea-c__z{ font-size: 14px; }
    body.ea .ea-rh--spon .ea-rh__streifen .ea-c__av{ width: 40px; height: 40px; border-width: 2.5px; }
    body.ea .ea-rh--spon .ea-rh__streifen .ea-c__mw{ border-radius: 12px; }
}


/* ==================================================================
   BG. PROFIL-STAERKE IM DIENSTLEISTERBEREICH
   02.09.2026

   Die Seite /profile/staerke und der Balken auf der Uebersicht
   benutzen die Bausteine, die es schon gibt: .ea-b__setup fuer die
   Karte, .ea-b__balken fuer den Balken, .ea-b__schritte fuer die
   Liste. Hier steht nur, was daran anders ist.

   ANDERS IST ZWEIERLEI:

   1. Jede Zeile hat unter dem Namen einen Satz ("Du hast 4 Fotos.
      Ab 8 ..."). In der Veroeffentlichungsliste steht nur der Name,
      deshalb reichte dort ein <b> und ein <span> nebeneinander.

   2. Es gibt VIER Zustaende, nicht zwei:

        (ohne)   offen        - Name schwarz, rechts "oeffnen"
        .teil    angefangen   - rechts bernstein statt gruen
        .fertig  erledigt     - kommt aus TEIL O, gruen
        .kann    freiwillig   - alles gedaempft

      ".kann" ist der wichtige: Das Video bringt Punkte, aber wer
      keines hat, macht nichts falsch. In derselben Farbe wie ein
      fehlendes Foto waere es ein Vorwurf.

        MERKSATZ: Was freiwillig ist, darf nicht aussehen wie was
        Fehlendes.

   Die Vorlage erkennt ".kann" NICHT am Namen des Stuecks, sondern
   daran, dass die Nachtrechnung dafuer keinen Hinweis vergibt - so
   bleibt die Regel in Rangfolge::sorgfaltTeile() und nicht hier.
   ================================================================== */

body.ea .ea-staerke__text{ min-width: 0; }
body.ea .ea-staerke__was{
    margin: 3px 0 0; font-size: 14px; line-height: 1.45;
    color: var(--ea-muted, #75777A);
}

body.ea .ea-b__schritte.ea-staerke__liste li{ align-items: flex-start; gap: 18px; }
body.ea .ea-b__schritte.ea-staerke__liste li span{ flex: 0 0 auto; }

body.ea .ea-b__schritte.ea-staerke__liste li.teil span{ color: #B06A00; }

body.ea .ea-b__schritte.ea-staerke__liste li.kann b{
    color: var(--ea-muted, #75777A); font-weight: 400;
}
body.ea .ea-b__schritte.ea-staerke__liste li.kann span,
body.ea .ea-b__schritte.ea-staerke__liste li.kann span a{
    color: var(--ea-muted, #75777A);
}

/* Der Satz unter der Liste ("Die grauen Zeilen sind freiwillig").
   Die letzte Zeile der Liste bringt schon eine Trennlinie mit, also
   braucht es hier nur Luft - keine zweite Linie. */
body.ea .ea-staerke__grau{ margin: 14px 0 0; }

/* Am Handy untereinander: Name, Satz, Handlung. Nebeneinander blieben
   fuer den Satz keine 200 px, und "Ab 8 Stueck, davon 5 im
   Querformat" braucht mehr. */
@media (max-width: 520px){
    body.ea .ea-b__schritte.ea-staerke__liste li{ flex-direction: column; gap: 4px; }
    body.ea .ea-b__schritte.ea-staerke__liste li span{ margin-left: 0; }
}

/* =================================================================
   TEIL CC - DREI VORSCHLAEGE AUF DER ANTWORTSEITE
   Event ABC, 03.09.2026 (LIEFERUNG 92)
   =================================================================

   Wo: /anfrage/<schluessel>/nein - die Seite, auf der der Kunde
   sagt, dass sich niemand gemeldet hat. Statt eines Knopfes zur
   Startseite stehen dort jetzt bis zu drei Anbieter.

   NEUER PRAEFIX ea-alt__ - vorher gegriffen, kam in dieser Datei
   kein einziges Mal vor. (Die Regel aus LIEFERUNG 51: ein Name
   gehoert einem Ding. `ea-mehr` hat damals "Ueber mich" auf JEDEM
   Profil unsichtbar gemacht.)

   Die Elternkarte .ea-bw__karte--schmal zentriert ihren Text. Eine
   Liste aus Bild, Name und Knopf sieht zentriert falsch aus -
   deshalb setzt die Liste text-align ausdruecklich auf links
   zurueck. Sonst rutscht der Ort unter dem Namen in die Mitte.
   ================================================================= */

body.ea .ea-alt__hut{
    margin: 22px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ea-muted, #75777A);
    text-transform: uppercase;
}

body.ea .ea-alt__liste{
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    text-align: left;          /* siehe Kopf: die Elternkarte zentriert */
}

body.ea .ea-alt__zeile{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #E4E7F2;
}
body.ea .ea-alt__liste li:first-child{ border-top: 0; padding-top: 4px; }

/* Feste Groesse, damit ein hochkantes Bild die Zeile nicht auseinander
   zieht. object-fit schneidet mittig zu - dasselbe wie in der Karte. */
body.ea .ea-alt__bild{
    flex: 0 0 56px;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #F2F4FA;
}
body.ea .ea-alt__bild img{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* min-width: 0 ist noetig, sonst laesst Flex den Namen NICHT kuerzen
   und der Knopf wird aus der Karte gedrueckt. */
body.ea .ea-alt__text{ flex: 1 1 auto; min-width: 0; }

body.ea .ea-alt__name{
    display: block;
    font-weight: 600;
    color: #25304F;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.ea .ea-alt__name:hover{ text-decoration: underline; }

body.ea .ea-alt__ort{
    display: block;
    font-size: 13px;
    color: var(--ea-muted, #75777A);
}

body.ea .ea-alt__kn{ flex: 0 0 auto; }

body.ea .ea-alt__fuss{ margin-top: 18px; }

/* Am Handy hat der Knopf neben Bild und Name keine 90 px mehr. Dann
   lieber unter die Zeile, ueber die ganze Breite. */
@media (max-width: 430px){
    body.ea .ea-alt__zeile{ flex-wrap: wrap; }
    body.ea .ea-alt__kn{
        flex: 1 0 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

/* =================================================================
   TEIL CD - ANMELDEDIALOG OHNE DIE DREI TEXTBLOECKE (03.09.2026)
   =================================================================

   LIEFERUNG 93. Andrej: "Das ist mir zu viel Text." Raus sind der
   blaue Hinweiskasten (ea-anm__nurdl - Klasse jetzt ungenutzt und
   unten entfernt), der Leadsatz ueber der E-Mail-Adresse und der
   Face-ID-Absatz (ea-anm__faceid - dito).

   Jetzt steht die erste Beschriftung ("E-Mail-Adresse") direkt unter
   der Kopfzeile. Ohne diese Regel waeren es nur die 6px von
   .ea-anm__kopf - zu wenig Luft zwischen Ueberschrift und Feld. */
body.ea #ea-anm-login > .ea-anm__lab:first-child{ margin-top: 10px; }

/* =================================================================
   TEIL CE - DIE BUEHNE OBEN IM DIENSTLEISTERPROFIL (06.09.2026)
   =================================================================

   LIEFERUNG 108. Das erste Album steht jetzt ganz oben, an der Stelle
   des alten Titelbilds (.ea-cover). Andrej: "Das helle Bild oben
   gefaellt mir nicht so sehr - die Bilder vom ersten Album sollen
   direkt im Header genauso schoen platziert werden."

   Das Raster selbst ist unveraendert .ea-gal aus TEIL ? - es bekommt
   nur .ea-gal--oben dazu und steht an einer anderen Stelle im
   Dokument. Alles, was hier steht, sind Abstaende und Groessen;
   die Bauart des Rasters und die Faelle mit ein bis vier Fotos
   (data-n) gelten unveraendert weiter.

   DER SLIDER IST NICHT TEIL DIESES TEILS. Er bleibt Fancybox, die
   Verweise sind dieselben. Wer hier eine eigene Lightbox baut, baut
   ein zweites Ding neben ein funktionierendes.
   ================================================================= */

body.ea .ea-buehne{ position: relative; margin-top: 6px; }

/* Hoeher als das Raster weiter unten je war: es ist jetzt das Erste,
   was man sieht. Das grosse Bild links wird dadurch rund 600 x 438 -
   ein Querformat, in dem ein Hochzeitsfoto etwas zeigt. */
body.ea .ea-gal--oben{
    margin: 0;
    grid-template-rows: clamp(150px, 15.5vw, 215px) clamp(150px, 15.5vw, 215px);
}

/* Ab dem sechsten Foto: am Rechner nicht sichtbar. Die Verweise
   bleiben im Quelltext stehen - Fancybox baut daraus seine Reihe, und
   loading="lazy" sorgt dafuer, dass die Bilder dabei nicht geholt
   werden. */
body.ea .ea-gal--oben .ea-gal__weiter{ display: none; }

/* "Alle 60 Fotos anzeigen" - unten rechts IM Raster, wie das Vorbild.
   Der Abstand rechnet den Seitenrand der .ea-wrap mit, sonst klebte
   der Knopf am Fensterrand statt am Bild. */
body.ea .ea-gal__alle{
    position: absolute;
    right: calc(clamp(18px, 2.6vw, 32px) + 16px);
    bottom: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--ea-ink, #1E1E1C);
    border: 1px solid var(--ea-ink, #1E1E1C); border-radius: 9px;
    padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; box-shadow: 0 2px 8px rgba(30, 30, 28, .14);
}
body.ea .ea-gal__alle:hover{ background: var(--ea-surface, #F5F4F3); }
body.ea .ea-gal__alle svg{ width: 14px; height: 14px; flex: 0 0 14px; }

/* Der Zaehler gehoert zur Wischreihe und damit ans Handy. */
body.ea .ea-gal__zaehler{ display: none; }

/* ---------- der Kopf: HAENGT WIEDER IM BILD (LIEFERUNG 113) ----------

   Hier stand bis 112 das Gegenteil: Profilbild klein und rund neben
   dem Namen, beide Spalten sauber unter der Galerie. Der Gedanke war,
   dass ein Ausgleich fuer ein Titelbild ohne Titelbild nichts mehr
   auszugleichen hat.

   Andrej, 06.09.2026: "Das Design davor hat mir schon besser
   gefallen auf dem Desktop. War so rechteckig mit abgerundeten Ecken,
   ein bisschen im Bild oben, und darunter stand der Name. Und dieses
   Anfrageformular war auch ein bisschen auf den Bildern."

   Er hat recht, und der Grund ist ein anderer als der, den ich
   weggerechnet hatte: Das Ueberlappen war nie ein AUSGLEICH fuer den
   Streifen, es war eine VERBINDUNG. Bild und Karte greifen ineinander,
   statt aneinanderzustossen - deshalb liest sich die Seite als ein
   Stueck und nicht als zwei Bloecke uebereinander. Das gilt mit einer
   Galerie genauso wie mit einem Titelbild.

     MERKSATZ: Bevor man einen Ueberstand wegnimmt, weil sein Anlass
     weg ist, muss man wissen, ob er ein Ausgleich war oder eine
     Absicht.

   Deshalb steht hier jetzt NICHTS mehr ausser dem Knopf weiter unten:
   die alten Regeln (margin-top:-54px am Kopf und an der rechten
   Spalte, Profilbild 112 px mit 10 px Ecken und weissem Rand, Name
   darunter) gelten wieder unveraendert. */

@media (min-width: 992px){
    /* Die Anfragekarte ragt 54 px ins Bild - genau dort sass der
       Knopf "Alle 60 Fotos anzeigen" und lag darunter begraben. Er
       rueckt so weit hoch, dass er auf der Oberkante der Karte
       aufsitzt. */
    body.ea .ea-gal__alle{ bottom: 70px; }
}

/* ---------- zwischen 768 und 991: dieselbe Form wie am Rechner ----
   Unterhalb von 992 macht das alte Raster aus dem grossen Bild eine
   Zeile ueber die volle Breite und stellt die vier kleinen darunter.
   Fuer das Raster WEITER UNTEN in der Seite war das richtig; oben
   ergibt es drei ungleich hohe Zeilen und einen Streifen, der die
   halbe Seite frisst.

   Deshalb hier zurueck zur Form von oben: ein grosses Bild links,
   vier kleine rechts - nur niedriger. Ein Wischstapel waere auf einem
   Tablet mit 900 px Breite eine Verschlechterung. */
@media (min-width: 768px) and (max-width: 991.98px){
    body.ea .ea-gal--oben{
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 165px 165px;
    }
    body.ea .ea-gal--oben > a:first-child{
        grid-column: auto; grid-row: span 2;
        border-radius: 10px 0 0 10px !important;
    }
    body.ea .ea-gal--oben > a:nth-child(2),
    body.ea .ea-gal--oben > a:nth-child(4){ border-radius: 0 !important; }
    body.ea .ea-gal--oben > a:nth-child(3){ border-radius: 0 10px 0 0 !important; }
    body.ea .ea-gal--oben > a:nth-child(5){ border-radius: 0 0 10px 0 !important; }
}

/* ================= am Handy: die Fotos zum Wischen =================

   Andrej, 06.09.2026: "Wenn man auf einen Dienstleister klickt, dass
   man dort direkt oben die erste Galerie hat - so, dass man dann
   direkt die Fotos sliden kann."

   Aus demselben Raster wird eine Reihe, in der ein Foto die ganze
   Breite fuellt und einrastet. Antippen oeffnet denselben Slider wie
   am Rechner. */
@media (max-width: 767.98px){

    body.ea .ea-buehne{ padding: 0; max-width: 100%; margin-top: 2px; }

    body.ea .ea-gal--oben{
        display: flex;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.ea .ea-gal--oben::-webkit-scrollbar{ display: none; }

    body.ea .ea-gal--oben > a{
        flex: 0 0 100%;
        scroll-snap-align: center;
        aspect-ratio: 4 / 3.05;
        height: auto;
        border-radius: 0 !important;
        grid-row: auto !important;
        grid-column: auto !important;
    }
    /* Am Handy sind ALLE Fotos in der Reihe - dafuer stehen sie im
       Quelltext. */
    body.ea .ea-gal--oben .ea-gal__weiter{ display: block; }

    body.ea .ea-gal__alle{ display: none; }

    body.ea .ea-gal__zaehler{
        display: block; position: absolute; right: 14px; bottom: 38px;
        background: rgba(0, 0, 0, .62); color: #fff;
        font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 8px;
    }

    /* Das Blatt, das ueber die Fotos ragt - wie beim Vorbild. Es macht
       aus zwei aneinandergesetzten Bloecken einen: die Fotos liegen
       darunter, der Text darauf. */
    body.ea-p-dienstleister .ea-buehne + .ea-wrap{
        position: relative; z-index: 2;
        margin-top: -24px;
        background: #fff;
        border-radius: 22px 22px 0 0;
        padding-top: 4px;
    }

    /* Ohne Titelbild kein Hochziehen, und das Profilbild bleibt am
       Handy ganz weg: Der Name soll das Erste unter den Fotos sein. */
    body.ea .ea-profile--buehne .ea-phead{ margin-top: 18px; }
    body.ea .ea-profile--buehne .ea-phead__bild{ display: none; }
    body.ea .ea-profile--buehne .ea-phead__meta{ padding-top: 0; }

    /* Mittig, wie im Entwurf: Name, Beruf und die beiden Kaestchen
       sitzen auf der Achse der Fotos darueber. GENAU DIESE DREI und
       nichts darunter - Sprachen, Leistungen und Schwerpunkte sind
       Listen, und eine mittig gesetzte Liste liest sich schlecht. */
    body.ea .ea-profile--buehne .ea-pname__z{ justify-content: center; }
    body.ea .ea-profile--buehne .ea-phead__meta > .ea-sub{ text-align: center; }
    body.ea .ea-profile--buehne .ea-badges{ justify-content: center; }
}

/* =================================================================
   TEIL CF - EINE KANTE FUER ALLES AUF DEM PROFIL (06.09.2026)
   =================================================================

   LIEFERUNG 109, gleich nach 108. Andrej, nachdem er 108 hochgeladen
   hatte: "Schau mal oben diese Breadcrumbs. Die sollen dann auch
   ausgerichtet am Bild sein, und diese Teilen und Merken auch am Bild
   ausgerichtet sein."

   Er hat recht, und der Grund steht schon im Nachtrag zu TEIL AT
   weiter oben: Die Leiste mit Brotkrumen, Teilen und Merken wurde
   damals absichtlich 80 px breiter gemacht als die Inhaltsspalte -
   weil das TITELBILD darunter 80 px breiter war. Beides zusammen
   ergab eine gerade Linie.

   Seit LIEFERUNG 108 gibt es das Titelbild nicht mehr; darunter liegt
   die Galerie, und die ist so breit wie der Name, der Text und der
   Anfragekasten. Die 80 px waren damit der einzige Ausreisser auf der
   Seite - drei Anfaenge statt einem.

     MERKSATZ: Ein Ausgleich gehoert dem, wofuer er gemacht wurde.
     Faellt das weg, faellt der Ausgleich mit.

   Deshalb hier: Brotkrumenleiste und (fuer den Fall ohne Fotos) auch
   der alte Streifen bekommen dieselbe Breite wie alles andere. Die
   Regeln stehen absichtlich hier unten und nicht oben im Text von AT -
   dort ist nachzulesen, warum es einmal anders war.

   Der negative Rand an .ea-pakts bleibt: Die SCHRIFT "Merken" soll an
   der Kante stehen, die Klickflaeche darf darueber hinausgehen.
   ================================================================= */

body.ea .ea-pkopf{ max-width: var(--ea-wrap); }

/* Der Rueckfall fuer Anbieter ohne ein einziges Foto zieht mit -
   sonst steht dort wieder ein Streifen 80 px breiter als die Leiste
   darueber. */
body.ea-p-dienstleister .ea-cover{ max-width: var(--ea-wrap); }

/* =================================================================
   TEIL CG - DER PROFILKOPF AM HANDY (06.09.2026)
   =================================================================

   LIEFERUNG 110. Andrej, nachdem 108/109 live waren, mit drei
   Bildern nebeneinander (sein Profil am Handy, Airbnb, mein Entwurf):

     "Auf der mobilen Version brauche ich diese Brotkrumen oben nicht.
      Und dieses Teilenzeichen machen wir oben ins Bild rein - nur
      dann die Icons von uns verwenden, von unserem Design. Es fehlt
      noch das Profilbild, und die Strukturierung Sprache/Leistungen
      gefaellt mir nicht so gut. Bewertungen hat mir hier besser
      gefallen."

   Fuenf Sachen also, alle nur am Handy. Am Rechner aendert sich
   nichts - dort ist Platz, dort stimmt es.

   ZU DEN ZEICHEN: Es bleiben unsere eigenen (.ea-pakt aus TEIL AT),
   sie bekommen hier nur einen weissen Kreis, damit sie auf einem
   Foto lesbar sind. Airbnbs Zeichen zu uebernehmen waere fremdes
   Design in unserer Seite.

   ZUM ZURUECK-PFEIL: Airbnb hat oben links einen. Wir nicht - in
   einer App gibt es keinen anderen Weg zurueck, im Browser schon.
   Ein zweiter Zurueck-Knopf neben dem des Browsers ist einer zu
   viel. Falls doch gewuenscht: hier waere die Stelle.
   ================================================================= */

/* Die Kennzahlenzeile gibt es nur am Handy. */
body.ea .ea-kz{ display: none; }

@media (max-width: 767.98px){

    /* ---------- 1. keine Brotkrumen ----------
       Vier Ebenen ueber zwei Zeilen, bevor das erste Foto kommt -
       am Handy ist das der halbe erste Bildschirm fuer einen Weg,
       den niemand zurueckgeht. */
    body.ea-p-dienstleister .ea-pkopf .ea-crumbs{ display: none; }

    /* ---------- 2. Teilen und Merken liegen IM Bild ----------
       Die Leiste bleibt, wo sie im Quelltext steht, und wird nach
       unten ueber die Fotos gezogen. Kein neues Element, keine
       zweite Stelle, an der dieselben Knoepfe stehen. */
    body.ea-p-dienstleister .ea-pkopf{
        position: relative; z-index: 3;
        min-height: 0; padding-top: 0; padding-bottom: 0;
        margin-bottom: -52px;
        pointer-events: none;
    }
    body.ea-p-dienstleister .ea-pkopf .ea-pakts{
        pointer-events: auto;
        margin: 10px 0 0 auto; gap: 8px;
    }
    body.ea-p-dienstleister .ea-pkopf .ea-pakt{
        width: 36px; height: 36px; padding: 0;
        border-radius: 50%; background: rgba(255,255,255,.94);
        color: #1E1E1C; box-shadow: 0 1px 5px rgba(0,0,0,.25);
        justify-content: center;
    }
    body.ea-p-dienstleister .ea-pkopf .ea-pakt:hover,
    body.ea-p-dienstleister .ea-pkopf .ea-pakt:active{ background: #fff; }
    body.ea-p-dienstleister .ea-pkopf .ea-pakt svg{ width: 18px; height: 18px; flex: 0 0 18px; }

    /* ---------- 3. das Profilbild ist wieder da ----------
       Mittig und auf der Kante des weissen Blattes: halb im Foto,
       halb im Text. Es gehoert zu beidem. */
    body.ea .ea-profile--buehne .ea-phead{ margin-top: 0; }
    body.ea .ea-profile--buehne .ea-phead__meta{ padding-top: 0; }
    body.ea .ea-profile--buehne .ea-phead__bild{
        display: block; position: relative; z-index: 3;
        flex: 0 0 100%;
        margin: -56px 0 6px; text-align: center;
    }
    /* Eckig mit runden Ecken, nicht rund (LIEFERUNG 113). Andrej:
       "auf mobil gefaellt mir das rechteckige Profilbild mit
       abgerundeten Ecken auch besser als das Runde." Es ist damit
       dieselbe Form wie am Rechner - ein Profilbild, nicht zwei. */
    body.ea .ea-profile--buehne .ea-avatar{
        width: 78px; height: 78px; border-radius: 14px;
        border: 3px solid #fff; box-shadow: 0 2px 10px rgba(30,30,28,.18);
        display: inline-block;
    }
    body.ea .ea-profile--buehne .ea-phead{ flex-wrap: wrap; margin-top: 0; }

    /* ---------- 4. drei Zahlen statt zweier Kaestchen ---------- */
    body.ea .ea-profile--buehne .ea-kz{
        display: flex; align-items: stretch; justify-content: center;
        margin: 18px 0 2px;
    }
    body.ea .ea-kz__z{ flex: 1 1 0; min-width: 0; text-align: center; padding: 0 4px; }
    body.ea .ea-kz__z b{ display: block; font-size: 20px; font-weight: 600; line-height: 1.15; }
    body.ea .ea-kz__z em{
        display: block; font-style: normal; font-size: 12px; line-height: 1.25;
        color: var(--ea-muted, #75777A); margin-top: 3px;
    }
    body.ea .ea-kz__s{ flex: 0 0 1px; background: var(--ea-line, #E7E2DE); margin: 2px 0; }

    /* Ab Premium ist die Zahl der Weg zu Google (LIEFERUNG 112). Sie
       muss danach aussehen: unterstrichene Beschriftung und der kleine
       Pfeil, der auf der ganzen Seite "fuehrt hier raus" bedeutet.
       Ohne Premium ist es dieselbe Zahl ohne beides - und ohne <a>. */
    body.ea .ea-kz__z--goo{
        display: block; text-decoration: none; color: inherit;
        -webkit-tap-highlight-color: rgba(63,90,209,.12);
    }
    body.ea .ea-kz__z--goo em{
        text-decoration: underline; text-underline-offset: 2px;
        text-decoration-color: var(--ea-line, #E7E2DE);
    }
    body.ea .ea-kz__z--goo:active em{ color: var(--ea-ink, #1E1E1C); }
    body.ea .ea-kz__weg{
        width: 10px; height: 10px; display: inline-block; vertical-align: -1px;
        margin-left: 1px; opacity: .75;
    }

    /* Die Kaestchen darueber waeren jetzt dieselbe Auskunft ein
       zweites Mal. "Video im Profil" faellt damit auch weg - die
       Filmgalerie steht zwei Bildschirme weiter unten mit
       Ueberschrift, das ist der ehrlichere Hinweis. */
    body.ea .ea-profile--buehne .ea-badges{ display: none; }

    /* ---------- 5. Leistungen und Sprachen ----------
       Der erste Versuch stand hier: kleinere Marken, mittig, und die
       Sprachen per order-Wert dahinter. Er hat das Problem nur
       verkleinert, nicht geloest - sechs Marken brechen auch klein
       noch dreimal um. Die Loesung steht in TEIL CH: Der ganze Block
       ist aus dem Kopf heraus eine Ebene tiefer gewandert und die
       Marken sind am Handy eine Wischreihe. */
}


/* =================================================================
   TEIL CH - SPRACHEN, LEISTUNGEN UND SCHWERPUNKTE ALS EIGENER BLOCK
   (06.09.2026)
   =================================================================

   LIEFERUNG 111. Andrej, mit zwei Ausschnitten nebeneinander:

     "Auf mobil nimmt es viel zu viel Platz weg - sieh Bild 1. Und auf
      Desktop wird Platz verschenkt - Bild 2."

   Beides hatte DIESELBE Ursache: Die drei Angaben standen im Kopf,
   also in derselben Zeile wie das Profilbild links und der
   Sternekasten rechts. Von den rund 830 px der linken Spalte blieben
   ihnen dadurch etwa 430. Die Marken brachen nach zwei um - am
   Rechner mit einer halben leeren Spalte daneben, am Handy zu vier
   Zeilen plus zwei Beschriftungszeilen.

     MERKSATZ: Wer in einer Zeile steht, hat nur die Breite dieser
     Zeile. Ein Block, der die ganze Breite braucht, gehoert nicht in
     den Kopf, sondern darunter.

   Seit LIEFERUNG 111 stehen sie in .ea-pdaten, eine Ebene tiefer -
   volle Breite der linken Spalte. Am Rechner reicht das schon: die
   Marken passen zu viert bis fuenft in eine Zeile.

   Am Handy hilft Breite nicht, dort gibt es keine. Deshalb wird die
   Reihe dort zu einer WISCHREIHE: eine Zeile statt vier, der Rest
   liegt rechts daneben. Dieselbe Bauart wie die Alben weiter unten -
   der Besucher kennt die Geste von dieser Seite schon.
   ================================================================= */

body.ea .ea-pdaten{ margin: 16px 0 26px; }

@media (max-width: 767.98px){

    /* DIESELBE FALLE EINE EBENE HOEHER, und sie kostet genauso viel
       Zeit: .ea-profile ist unterhalb von 992 px ein Raster mit
       grid-template-columns:1fr - und ein Rasterfeld hat, wie ein
       Flex-Kind, min-width:auto. Es schrumpft also NICHT unter
       seinen breitesten Inhalt. Die Wischreihe machte daraus eine
       Spalte von 811 px in einem 390 px breiten Fenster, und die
       ganze Seite liess sich seitwaerts schieben.

       minmax(0, 1fr) sagt: Diese Spalte darf schmaler werden als
       ihr Inhalt. Erst dann greift das overflow-x der Reihe. */
    body.ea .ea-profile--buehne{ grid-template-columns: minmax(0, 1fr); }
    body.ea .ea-profile--buehne > div{ min-width: 0; }

    body.ea .ea-profile--buehne .ea-pdaten{
        display: flex; flex-direction: column;
        margin: 18px 0 4px;
        padding-top: 18px;
        border-top: 1px solid var(--ea-line-2, #F0EDEA);
    }

    /* Was er MACHT zuerst - die Marken. Die Reihenfolge im Quelltext
       ist die vom Rechner (Sprachen zuerst); hier dreht sie sich um,
       ohne dass es das Markup zweimal gibt. */
    body.ea .ea-profile--buehne .ea-chips{
        order: 0;
        flex-wrap: nowrap;

        /* min-width:0 ist hier KEIN Feinschliff, sondern die Zeile,
           ohne die gar nichts geht. Ein Flex-Kind hat von Haus aus
           min-width:auto und schrumpft NICHT unter seinen Inhalt.
           Ohne diese Zeile war die Marken-Reihe 829 px breit, und
           mit ihr die ganze Seite: erst der Block, dann der Kopf,
           dann das Blatt - am Handy laesst sich die Seite dann
           seitwaerts schieben. Gemessen, nicht vermutet:
           scrollWidth 847 bei 390 px Fenster. */
        min-width: 0;

        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        margin: 0 -18px !important;
        padding: 0 18px 2px;
    }
    body.ea .ea-profile--buehne .ea-chips::-webkit-scrollbar{ display: none; }
    body.ea .ea-profile--buehne .ea-chip{
        flex: 0 0 auto;
        font-size: 12.5px; padding: 6px 12px; border-radius: 9px;
    }

    /* Schwerpunkte und Sprachen: zwei leise Zeilen, gleich gesetzt.
       Vorher stand die eine linksbuendig und die andere mittig - zwei
       Angaben derselben Art muessen gleich aussehen, sonst sucht das
       Auge einen Unterschied, den es nicht gibt. */
    body.ea .ea-profile--buehne .ea-phead__zweite{ order: 1; }
    body.ea .ea-profile--buehne .ea-phead__spr{ order: 2; }

    body.ea .ea-profile--buehne .ea-phead__zweite,
    body.ea .ea-profile--buehne .ea-phead__spr{
        display: block; text-align: center;
        margin: 12px 0 0;
        font-size: 13px; line-height: 1.45;
        color: var(--ea-muted, #75777A);
    }
    body.ea .ea-profile--buehne .ea-phead__spr{ margin-top: 5px; }
    body.ea .ea-profile--buehne .ea-phead__spr svg{ display: none; }
    body.ea .ea-profile--buehne .ea-phead__zweite b,
    body.ea .ea-profile--buehne .ea-phead__sprk{
        font-weight: 600; color: var(--ea-ink-2, #45474A);
    }
}

/* =================================================================
   TEIL CI - DAS PROFIL IST SO BREIT WIE DIE STARTSEITE (07.09.2026)
   =================================================================

   LIEFERUNG 114. Andrej: "Hier muss das Bild etwas breiter sein, wie
   auf der Startseite so breit - allgemein das Bild und oben diese
   Leiste mit Brotkrumen und Merken."

   Er hat die Zahl richtig geraten, ohne sie zu kennen: Die Startseite,
   die Kategorien, die Suche und der Ratgeber laufen auf 1440 px
   (TEIL AL bzw. der Nachtrag zum Ratgeber), das Profil lief auf den
   Grundwert 1280. Nebeneinander sieht das Profil dadurch enger aus
   als alles, wovon man kommt - und die Galerie ist der Grund, warum
   man ueberhaupt hier ist.

   NACHTRAG VOM SELBEN TAG - NUR OBEN, NICHT UNTEN.

   Ich hatte zuerst die GANZE Seite auf 1440 gesetzt, damit die eine
   Kante aus TEIL CF erhalten bleibt. Andrej danach: "Nur Header 1440
   Pixel, also Brotkrumen und die Galerie oben. Und unten Profilbild,
   Beschreibungen, Anfrageformular - das soll 1280 bleiben."

   Das ist eine bewusste Entscheidung gegen die durchgehende Kante,
   und sie ist richtig: Fotos wollen Breite, Text nicht. Eine Zeile
   mit 1376 px Textbreite liest sich schlecht - deshalb steht der
   Grundwert 1280 ueberhaupt da ("fuer Text das richtige", TEIL AL).
   Oben ein breites Band aus Bildern, darunter eine ruhigere
   Textspalte: Das ist keine verrutschte Kante, sondern zwei
   Bereiche, die verschiedene Aufgaben haben.

     MERKSATZ: Eine Kante ist ein Mittel, kein Zweck. Wo Bild und
     Text dasselbe wollen, gehoeren sie auf eine Linie; wo nicht,
     nicht.

   Gebaut ist es so, dass es EINE Zahl an EINER Stelle bleibt: Die
   beiden oberen Baender setzen --ea-wrap fuer sich selbst neu. Ihre
   eigene Regel max-width:var(--ea-wrap) liest dann den neuen Wert -
   kein zweiter Wert, der irgendwo danebenlaeuft.

   Das Profilbild haengt jetzt 80 px innerhalb der linken Bildkante
   und die Anfragekarte 80 px innerhalb der rechten. Beide liegen
   damit IM Bild statt an seiner Kante - was das Ineinandergreifen
   aus LIEFERUNG 113 eher staerkt als schwaecht.
   ================================================================= */

body.ea-p-dienstleister .ea-pkopf,
body.ea-p-dienstleister .ea-buehne{ --ea-wrap: 1440px; }

/* Das grosse Bild waechst mit der Breite, die Hoehe stand fest - aus
   einem ruhigen Querformat waere ein Briefschlitz geworden. Die
   Zeilen wachsen deshalb mit: bei 1440 px sind es 248 statt 215, das
   grosse Bild bleibt bei rund 1,35 zu 1. */
body.ea .ea-gal--oben{
    grid-template-rows: clamp(150px, 17.5vw, 248px) clamp(150px, 17.5vw, 248px);
}

/* =================================================================
   TEIL CJ - AM HANDY FAENGT DIE SEITE MIT DEM BILD AN (07.09.2026)
   =================================================================

   LIEFERUNG 116. Andrej: "Oben diesen Header komplett ausblenden,
   sodass das direkt mit dem Bild anfaengt. Und diesen Knopf zurueck
   nach oben nehmen, parallel zu Favoriten- und Teilen-Zeichen, nur
   auf die linke Seite."

   WAS DAS BRINGT: Die Kopfzeile kostet am Handy rund 64 px vom
   ersten Bildschirm - fuer eine Suche, die niemand benutzt, der
   gerade auf ein bestimmtes Profil geklickt hat. Ohne sie faengt die
   Seite mit dem an, weswegen man da ist.

   WAS DAS KOSTET, und das ist kein Detail: Mit der Kopfzeile
   verschwindet am Handy AUCH das Logo und die Suche. Wer von Google
   direkt auf einem Profil landet, hat damit oben keinen Weg mehr zur
   Seite selbst. Deshalb gehoert der Zurueck-Knopf zwingend dazu -
   und deshalb steht in der Lieferung der Vorschlag, die Kopfzeile
   beim Herunterscrollen wieder einzublenden.

     MERKSATZ: Wer eine Leiste ausblendet, muss die Wege daraus
     woanders wieder aufmachen.

   NUR auf dem Dienstleisterprofil und NUR am Handy. Auf allen
   anderen Seiten und am Rechner bleibt die Kopfzeile, wo sie ist.
   ================================================================= */

/* Der Zurueck-Knopf ist eine Handy-Sache: Am Rechner steht die
   Brotkrumenzeile da, die dasselbe leistet und dabei sagt, WOHIN
   sie fuehrt. */
body.ea .ea-pzur{ display: none; }

@media (max-width: 767.98px){

    body.ea-p-dienstleister .ea-header{ display: none; }

    /* Die Leiste mit den Knoepfen liegt schon im Bild (TEIL CG). Sie
       ist jetzt das oberste Element der Seite und braucht deshalb
       oben etwas Luft - auf Geraeten mit Aussparung die des Geraets,
       sonst 10 px. */
    body.ea-p-dienstleister .ea-pkopf{
        padding-top: max(10px, env(safe-area-inset-top));
    }

    body.ea-p-dienstleister .ea-pzur{
        pointer-events: auto;
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 auto;
        width: 36px; height: 36px; padding: 0;
        margin: 10px auto 0 0;
        border: 0; border-radius: 50%;
        background: rgba(255,255,255,.94); color: #1E1E1C;
        box-shadow: 0 1px 5px rgba(0,0,0,.25);
        cursor: pointer;
    }
    body.ea-p-dienstleister .ea-pzur:active{ background: #fff; }
    body.ea-p-dienstleister .ea-pzur svg{ width: 18px; height: 18px; }

    /* Die Brotkrumen sind am Handy ausgeblendet (TEIL CG) - ohne sie
       fehlt das Element, das die beiden Seiten auseinanderschob.
       Jetzt macht das der Rand des Zurueck-Knopfes. */
    body.ea-p-dienstleister .ea-pkopf .ea-pakts{ margin-left: 0; }
}

/* =================================================================
   TEIL CK - DIE GALERIE NIMMT AM HANDY DIE HALBE HOEHE (07.09.2026)
   =================================================================

   LIEFERUNG 117. Andrej: "Die Hälfte, fünfzig Prozent vom Bildschirm
   soll das Bild einnehmen, die Galerie oben, auf dem Mobilen. Bis zur
   Hälfte soll dieses Weisse anfangen."

   Bisher hatte das Foto ein festes Seitenverhaeltnis (4:3,05). Das
   ergibt auf jedem Geraet eine andere Aufteilung: auf einem grossen
   iPhone rund 38 Prozent der Hoehe, auf einem kleinen ueber 45.
   Gemeint ist aber nicht ein Verhaeltnis, sondern ein ANTEIL AM
   BILDSCHIRM - und der wird in Bildschirmanteilen gemessen,
   nicht in Pixeln.

     MERKSATZ: "Die Haelfte vom Bildschirm" ist eine Angabe zur
     HOEHE des Geraets, nicht zur Breite des Bildes. Ein
     Seitenverhaeltnis kann das nicht ausdruecken.

   WELCHE HAELFTE? (nachgebessert 07.09.2026, LIEFERUNG 119)

   Zuerst stand hier svh - die Haelfte des Platzes, der im Browser
   UEBRIG BLEIBT, wenn die Adressleiste ausgefahren ist. Damit war
   das Bild in der App deutlich groesser als im Browser: die App hat
   keine Adressleiste, dort blieb mehr uebrig. Auf einem iPhone mit
   932 px Bildschirm nachgemessen: in der App 448 px hoch, im
   Browser 399 px.

     MERKSATZ: Der Bildschirm ist ueberall gleich gross, der
     Browser-Ausschnitt nicht. Wer "die Haelfte vom Bildschirm"
     meint, darf nicht die Haelfte vom Ausschnitt rechnen.

   Erster Versuch war lvh: die Hoehe OHNE ausgefahrene Adressleiste.
   Das hat den Abstand verkleinert, aber nicht geschlossen -
   nachgemessen blieben 59 Punkte Unterschied. Grund: In iOS-Safari
   ist auch lvh nicht der Bildschirm, sondern nur der Bereich, in
   dem Safari zeichnen laesst; unter seine Leiste laesst es nichts
   laufen. KEIN CSS-Mass gibt den Bildschirm her.

   Deshalb seit LIEFERUNG 120 eine gemessene Zahl: Ein kurzes
   Skript oben in dienstleister.tpl liest screen.height - die kennt
   die App genauso wie der Browser, es ist dieselbe Zahl - und legt
   die Haelfte davon als --ea-bild ab. Die Zeile mit lvh bleibt als
   Rueckfall stehen, falls kein JavaScript laeuft.

   lvh ist eine feste Zahl, es springt beim Scrollen NICHT. Nur beim
   Ankommen ragt das Bild etwas ueber die halbe sichtbare Flaeche
   hinaus - genau so, wie es in der App aussieht. Die vh-Zeile davor
   ist der Rueckfall fuer aeltere Browser; vh rechnet dort ohnehin
   schon ohne Adressleiste.

   Die 24 px extra sind der Ueberstand des weissen Blattes (TEIL CE):
   Das Blatt zieht sich 24 px ueber das Foto. Ohne den Zuschlag
   faenge das Weisse bei 50 Prozent MINUS 24 an - gemeint ist aber,
   dass es GENAU bei der Haelfte anfaengt.
   ================================================================= */

@media (max-width: 767.98px){

    /* Damit "die Haelfte" auch wirklich ab der Oberkante zaehlt: Die
       Knopfleiste liegt jetzt UEBER dem Bild statt davor. Vorher zog
       ein negativer Rand sie darueber, und ein paar Pixel Weiss
       blieben oben stehen. */
    body.ea-p-dienstleister .ea-pkopf{
        position: absolute; top: 0; left: 0; right: 0; z-index: 3;
        margin-bottom: 0;
    }
    body.ea-p-dienstleister .ea-buehne{ margin-top: 0; }

    body.ea .ea-gal--oben > a{
        aspect-ratio: auto;
        height: calc(50vh + 24px);
        height: calc(50lvh + 24px);
        /* LIEFERUNG 120: Wenn das Skript im Kopf der Seite die
           Bildschirmhoehe gemessen hat, gilt sie. Ohne
           JavaScript bleibt es bei der Zeile darueber. */
        height: calc(var(--ea-bild, 50lvh) + 24px);

        /* Quer gehalten waere die Haelfte eines 390 px hohen
           Fensters ein Streifen von 195 px - da ist kein Foto mehr
           zu erkennen. Unter 260 px hoert die Regel deshalb auf. */
        min-height: 260px;
    }
}

/* =================================================================
   TEIL CL - IN DER APP: KEIN ZWEITES ZURUECK (07.09.2026)
   =================================================================

   LIEFERUNG 118. Andrej: "Nur in der PWA, in der App, diesen linken
   Zurueck-Button wegmachen, weil der dann zu viel ist, ueberfluessig -
   weil wir haben hier oben. Und diese Leiste mittig zentrieren."

   Die installierte App hat keine Browserpfeile, deshalb baut
   js/pwa-1.0.js eine eigene kleine Verlaufsleiste unten links
   (.ea-pwa-verlauf). Das war richtig, solange es auf dem Profil
   keinen anderen Weg zurueck gab. Seit LIEFERUNG 116 sitzt oben im
   Bild ein Zurueck-Knopf - und zwei Zurueck auf einem Bildschirm
   sind eins zu viel.

     MERKSATZ: Was man wegen eines Mangels gebaut hat, muss man
     wieder abbauen, sobald der Mangel weg ist. Sonst sammeln sich
     die Kruecken.

   UND ES IST NICHT NUR DER KNOPF. In TEIL AB steht dazu

       .ea-ist-pwa body.ea.ea-hb.ea-p-dienstleister.ea-balken .ea-fix{
           left: 76px; right: 10px; }

   - der Kontaktbalken faengt dort 76 px weiter rechts an, damit die
   Verlaufsleiste links daneben Platz hat. Das ist genau die Luecke,
   die Andrej als "nicht mittig" sieht. Wer nur den Knopf ausblendet,
   laesst die Luecke stehen, und der Balken haengt schief. Deshalb
   dieselbe Auswahl noch einmal, mit derselben Gewichtung - sonst
   gewinnt die alte Zeile.

     Ein Platzhalter gehoert dem, fuer den er freigehalten wurde.
     Faellt der weg, faellt der Platz mit.

   NUR auf dem Dienstleisterprofil - auf allen anderen Seiten der App
   gibt es oben kein Zurueck, dort bleibt die Verlaufsleiste, wo sie
   ist. Der Vorwaertspfeil war auf dieser Seite ohnehin schon
   ausgeblendet.
   ================================================================= */

@media (max-width: 767.98px){

    .ea-ist-pwa body.ea.ea-p-dienstleister .ea-pwa-verlauf{ display: none; }

    /* Dieselbe Auswahl wie in TEIL AB, damit sie sicher gewinnt.
       Die 76 px links waren der Platz fuer den Zurueck-Knopf. Der
       ist weg, also faellt der Platz weg - und die Leiste steht mit
       10 px auf beiden Seiten genau so da wie im Browser.

       NACHGEBESSERT (LIEFERUNG 120): Zuerst hatte ich sie hier
       zusaetzlich mittig und nur so breit wie ihr Inhalt gemacht.
       Andrej: "In der App ist er so zusammengequetscht, gefaellt
       mir nicht" - im Browser mit der breiten Leiste und dem
       breiten Anfragen-Knopf gefaellt es ihm besser.

         MERKSATZ: Mittig ist nicht dasselbe wie gleich. Gleich
         heisst: dieselbe Leiste wie ueberall sonst - und die ist
         breit. Wer Platz zurueckgibt, gibt ihn dem Inhalt, nicht
         dem Rand. */
    .ea-ist-pwa body.ea.ea-hb.ea-p-dienstleister.ea-balken .ea-fix{
        left: 10px;
        right: 10px;
    }
}


/* ==================================================================
   TEIL CM - DER PREIS AM HANDY                       07.09.2026
   ==================================================================

   LIEFERUNG 122. Andrej: "Was mir hier noch fehlt, ist der Preis.
   Wenn man auf Desktop reinkommt, sieht man ja, dass der Preis ab
   soundso viel ist."

   Nicht vergessen, sondern MIT SEINEM BEHAELTER verschwunden: Seit
   TEIL AJ wird am Handy die ganze Anfragekarte ausgeblendet und
   durch die feste Leiste unten ersetzt. Der Preis stand in der
   Karte. Die Leiste hat ihn nie gehabt.

     MERKSATZ: Wer einen Kasten ausblendet, blendet alles aus, was
     darin stand. Beim Ersatz muss man Stueck fuer Stueck
     nachsehen, was der neue Behaelter NICHT mitgebracht hat.

   (Dasselbe war es beim Google-Link in LIEFERUNG 112. Der Vermerk
   in TEIL AJ zaehlt drei Saetze auf, die damals verloren gingen -
   der Preis fehlt in dieser Liste. Er ist jetzt nachgetragen.)

   WARUM UNTER DEM NAMEN UND NICHT IN DER ZAHLENREIHE: Ein Preis ist
   keine Kennzahl. Die drei Zahlen sind Belege - was andere sagen,
   was zu sehen ist. Der Preis ist eine Angabe zum Angebot selbst.
   Erst wer etwas ist, dann was es kostet, dann warum man es
   glauben soll.

   Zwei Alternativen wurden gebaut und verworfen:
     - in der Zahlenreihe: eine der drei Zahlen muesste weichen,
       "ab 1.200 EUR" sprengt als Text die Reihe, und
       "Preis auf Anfrage" passt in keine schmale Spalte.
     - in der Anfragenleiste: der Anfragen-Knopf schrumpfte
       nachgemessen von 194 auf 124 Punkte - genau das
       Zusammengequetschte, das LIEFERUNG 120 weggeraeumt hat.

   AM RECHNER BLEIBT ALLES WIE ES WAR. Dort steht der Preis in der
   Anfragekarte rechts; zweimal derselbe Preis auf einer Seite ist
   einer zu viel.
   ================================================================== */

body.ea .ea-ppreis{ display: none; }

@media (max-width: 767.98px){

    body.ea .ea-ppreis{
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 5px;
        margin: 10px 0 0;
        color: var(--ea-ink);
    }
    body.ea .ea-ppreis span{
        font-size: 14px;
        color: var(--ea-muted);
    }
    body.ea .ea-ppreis b{
        font-size: 22px;
        font-weight: 700;
        line-height: 1.15;
    }

    /* Ohne hinterlegten Preis steht dort ein Satz statt einer Zahl.
       Ein Satz in Zahlengroesse schreit; er darf leiser sein, muss
       aber dastehen - sonst weiss der Besucher nicht, ob der Preis
       fehlt oder ob er ihn uebersehen hat. */
    body.ea .ea-ppreis b.ea-ppreis--frage{
        font-size: 17px;
        font-weight: 600;
        color: var(--ea-ink-2);
    }
}


/* ==================================================================
   TEIL CN - DIE ANZEIGE BEIM FOTO-HOCHLADEN          07.09.2026
   ==================================================================

   LIEFERUNG 124. Andrej: "Wenn man die Fotos hochlaedt, dann ist es
   einfach so ausgegraut. Wir muessen unser Logo zeigen oder
   irgendwie son Preloader, damit demjenigen klar ist: hier passiert
   was."

   Bisher passierte genau zweierlei: Das Ablagefeld wurde auf 60
   Prozent Deckkraft gestellt, und oben erschien kurz eine Meldung.
   Beides zu leise - und das Ausgrauen war sogar mehrdeutig:

     MERKSATZ: Etwas auszugrauen sagt, dass es gerade nicht geht.
     Es sagt NICHT, dass gerade etwas laeuft. Das sind zwei
     verschiedene Aussagen, und der Benutzer braucht die zweite.

   Deshalb steht die Anzeige jetzt IM Ablagefeld - genau dort, wo er
   die Fotos hingelegt hat, und nicht am oberen Bildschirmrand.

   KEIN NEUER STIL: Aufbau, Logo, Ring und Schrift sind die des
   Seitenladers aus js/laden-1.0.js (TEIL AZ). Ein zweiter Stil fuer
   dieselbe Aussage waere eine zweite Marke.

   ZWEI ABSCHNITTE, WEIL ES ZWEI SIND:

     1. Der Ring FUELLT SICH und zaehlt Prozent. Das ist echt
        gemessen (XMLHttpRequest, upload.onprogress zaehlt die
        Bytes, die den Rechner verlassen).
     2. Der Ring DREHT SICH. Ab hier rechnet der Server - er
        verkleinert bis zu 66 Bilder, und wie weit er ist, meldet
        niemand zurueck.

   Eine Prozentzahl, die bei 100 stehen bleibt und sich eine halbe
   Minute nicht ruehrt, sieht aus wie ein Absturz. Lieber ehrlich
   sagen, dass jetzt eine unbestimmte Wartezeit kommt, als eine
   genaue Zahl zu erfinden.
   ================================================================== */

/* Das Feld war ausgegraut - darunter waere auch die neue Anzeige
   blass. Nicht mehr blass, sondern getauscht: Symbol und Text gehen,
   die Anzeige kommt. Die Sperre gegen Klicks bleibt (sonst oeffnet
   ein Klick mitten im Hochladen den Dateidialog). */
body.ea .ea-fo__azone.ea-fo__zone--laeuft{
    opacity: 1;
    cursor: default;
    border-style: solid;
    border-color: var(--ea-accent-soft, #EEF1FE);
    background: #fff;
}
body.ea .ea-fo__azone.ea-fo__zone--laeuft > svg,
body.ea .ea-fo__azone.ea-fo__zone--laeuft > .ea-fo__zt,
body.ea .ea-fo__azone.ea-fo__zone--laeuft > .ea-fo__zu{
    display: none;
}

body.ea .ea-fo__lader{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 4px 0 2px;
    color: var(--ea-ink, #1e1e1c);
}
body.ea .ea-fo__lader-logo{ display: block; }
body.ea .ea-fo__lader-logo img{ display: block; height: 22px; width: auto; }

body.ea .ea-fo__ring{
    position: relative;
    display: block;
    width: 56px; height: 56px;
    margin: 10px 0 9px;
}
body.ea .ea-fo__ring svg{
    width: 56px; height: 56px;
    /* Der Ring faengt oben an, nicht rechts. */
    transform: rotate(-90deg);
}
body.ea .ea-fo__ring circle{
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}
body.ea .ea-fo__ring-b{ stroke: #e4e7f5; }
body.ea .ea-fo__ring-a{
    stroke: var(--ea-accent, #3F5AD1);
    stroke-dasharray: 131.95;          /* 2 * PI * 21 */
    stroke-dashoffset: 131.95;         /* leer, bis das Skript zaehlt */
    transition: stroke-dashoffset .18s linear;
}

/* Die Zahl steht IM Ring. Sie ist die Antwort auf "wie lange noch",
   und die gehoert dorthin, wo man ohnehin hinsieht. */
body.ea .ea-fo__proz{
    position: absolute; inset: 0;
    display: grid; place-items: center;
    white-space: nowrap;
    font-size: 14px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ea-ink, #1e1e1c);
}

body.ea .ea-fo__lader-t{
    font-size: 15px; font-weight: 700;
    line-height: 1.25;
}
body.ea .ea-fo__lader-u{
    margin-top: 3px;
    font-size: 13px;
    color: var(--ea-muted, #75777A);
}

/* ---------- Abschnitt 2: der Server rechnet ---------- */
body.ea .ea-fo__lader--arbeitet .ea-fo__proz{ display: none; }
body.ea .ea-fo__lader--arbeitet .ea-fo__ring svg{
    animation: ea-seitenladen-dreh .75s linear infinite;
    transform-origin: 50% 50%;
}
body.ea .ea-fo__lader--arbeitet .ea-fo__ring-a{
    /* Ein Viertel des Umfangs als wandernder Bogen. */
    stroke-dasharray: 33 99;
    stroke-dashoffset: 0;
    transition: none;
}

/* Wer Bewegung abgestellt hat, bekommt keinen sich drehenden Ring -
   der volle Ring und der Text sagen dasselbe. */
@media (prefers-reduced-motion: reduce){
    body.ea .ea-fo__ring-a{ transition: none; }
    body.ea .ea-fo__lader--arbeitet .ea-fo__ring svg{ animation: none; }
    body.ea .ea-fo__lader--arbeitet .ea-fo__ring-a{ stroke-dasharray: 131.95; }
}

/* ===== TEIL AB - Schalter "Monatliche Übersicht per E-Mail" =====
   LIEFERUNG 129, ausgebessert in 132 (11.09.2026).
   Steht unten auf /profile/zahlen.

   RAHMEN, INNENMASS UND ÜBERSCHRIFT KOMMEN NICHT VON HIER. Der Kasten
   trägt .ea-b__karte und .ea-za__karte wie die drei Karten darüber;
   von dort kommen margin-top: 18px und padding: 22px. In 129 stand
   hier ein eigenes margin-top und gar kein padding - der Kasten hatte
   deshalb als einziger auf der Seite keinen Innenabstand.

     MERKSATZ: .ea-b__karte bringt nur Rahmen, Hintergrund und Radius
     mit. Jede Karte im Dienstleisterbereich setzt ihr Innenmaß selbst
     - am besten, indem sie die Klasse ihrer Nachbarn mitnimmt statt
     deren Zahlen abzuschreiben.

   Präfix ea-zam, vorher gegrept: frei. Hier steht nur noch, was diesen
   Kasten von seinen Nachbarn unterscheidet: der Haken.
   Auswahl-Form body.ea wie die Nachbarregeln, sonst gewinnt bei
   gleicher Eigenschaft die ältere, engere Regel (LIEFERUNG 118). */
body.ea .ea-zam__x{
    margin: 0 0 14px; font-size: 13.5px; line-height: 1.5;
    color: var(--ea-muted, #75777A);
}
body.ea .ea-zam__l{
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 14.5px; line-height: 1.45; cursor: pointer;
}
body.ea .ea-zam__l input{
    margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px;
    accent-color: var(--ea-accent, #3F5AD1);
}
body.ea .ea-zam__m{
    display: block; margin-top: 10px; font-size: 13px;
    color: #2E9E5B; min-height: 1em;
}