/* ===========================================================================
   DORADOO - ANBIETERPROFIL
   ---------------------------------------------------------------------------
   Gilt fuer die oeffentlichen Profilseiten der Anbieter.
   Eingegrenzt ueber zwei Bedingungen der Regel selbst:
     - Theme:      doradoo
     - Inhaltstyp: profiles_content
   Ueber den Pfad ginge es nicht - die Adressen sind freie Aliase
   (z. B. /03.08.-Oeffentliches-profil) ohne gemeinsamen Anfang.

   AUFBAU DER SEITE (gemessen am 26.08.2026, Handy 390 px, Seite 9325 px hoch):
     .main-container   > .static-content   Kopfbereich: Name, Bewertung, Bild
     .second-container > .ui-tabs          Reiter: Startseite | Ueber uns |
                                           Impressum | Bewertungen

   AUFBAU DIESER DATEI - dieselbe Nummerierung in allen drei Teilen,
   damit man zusammengehoerende Regeln schnell findet:
     TEIL A  gilt ueberall
     TEIL B  Handy+Tablet (max-width: 600px)
     TEIL C  nur Desktop  (min-width: 601px)
   Innerhalb jedes Teils:
     1 KOPFBEREICH   2 REITER   3 INHALT   4 BEWERTUNGEN

   UMBRUCH BEI 600 PX - wie im Theme selbst.
   Versuch vom 27.08.2026, die mobile Ansicht bis 1239 px laufen zu lassen,
   wieder zurueckgenommen: das Theme hat seine mobilen Regeln alle in
   @media (max-width: 600px). Oberhalb davon melden sich die Desktop-Regeln
   zurueck - die Profilzeile wird mit top:-130px ueber das Titelbild
   gezogen, die erste Gitterzeile wird 170 statt 62 px hoch. Der Umbau
   waere also nicht ein Zahlenwechsel, sondern ein Nachbauen der mobilen
   Grundlage fuer 600-1239 px. Gehoert ins Theme, nicht in den Injektor.
   Der Kopfbereich allein ist nachgezogen - siehe 'Doradoo - Startseite'.

   SPAETER INS THEME: 1:1 nach /themes/doradoo/css/doradoo-adjusments.css.
   Achtung beim Umzug: Injector-CSS laedt NACH dem Theme, im Theme selbst
   laedt es frueher - Regeln, die hier ohne !important gewinnen, koennen
   dort verlieren.
   ========================================================================= */


/* ===========================================================================
   TEIL A  -  GILT UEBERALL
   ========================================================================= */

/* --- A1 KOPFBEREICH ------------------------------------------------------
   .main-container > .static-content  */


/* --- A2 REITER -----------------------------------------------------------
   .second-container > .ui-tabs (jQuery UI)  */


/* --- A3 INHALT -----------------------------------------------------------
   Inhalt der Reiter 'Startseite', 'Ueber uns', 'Impressum'  */


/* --- A4 BEWERTUNGEN ------------------------------------------------------ */


/* ===========================================================================
   TEIL B0  -  MOBILE GRUNDLAGE FUER TABLET  (601 bis 1239 px)
   ---------------------------------------------------------------------------
   ACHTUNG: eine KOPIE aus dem Theme, keine eigene Gestaltung.

   Das Theme baut seine mobile Anordnung nicht in einem Block, sondern ueber
   eine Treppe: 600, 750, 768, 800, 850, 890, 900, 1000, 1024, 1076, 1230 px.
   Bei 600 px greifen sie alle gleichzeitig - das ergibt die Handy-Ansicht.
   Bei 1024 px greift davon nichts mehr unter 1024, also faellt die Seite auf
   die Desktop-Anordnung zurueck: Profilzeile mit top:-130px ueber dem
   Titelbild, Profilbild 170 px, Knoepfe untereinander. Unser Teil B setzt
   aber die mobile Anordnung voraus; fehlt sie, entsteht eine Mischung aus
   beidem (am 27.08.2026 kurz live gewesen und zurueckgenommen).

   Hier stehen darum die 95 Regeln, die das Theme zwischen 600 und 1230 px
   fuer den Profilbereich setzt, gebuendelt fuer 601-1239 px. Reihenfolge:
   breite Stufe zuerst, schmale zuletzt - so gewinnt die schmalere Regel,
   genau wie im Theme. Die !important sind absichtlich ENTFERNT: dieser
   Block ist nur die Grundlage, gestalten soll Teil B.

   Gelesen am 27.08.2026 aus main.css, doradoo-adjusments.css, responsive.css.
   WIRD AM THEME GEARBEITET, MUSS DIESER BLOCK NACHGEZOGEN WERDEN. Besser:
   er faellt ersatzlos weg, sobald das Theme seine mobile Anordnung selbst
   bis 1239 px anbietet.
   ========================================================================= */
@media screen and (min-width: 601px) and (max-width: 1239px) {

  /* aus @media (max-width: 1076px) */
  .container-provider .item-provider .contact-provider {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* aus @media (max-width: 1076px) */
  .container-provider .item-provider .sections {
    width: 100%;
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
  }

  /* aus @media (max-width: 850px) */
  .advantages .item .title {
    text-align: center;
  }

  /* aus @media (max-width: 850px) */
  .advantages .item .desc {
    text-align: center;
  }

  /* aus @media (max-width: 800px) */
  .main-container .contact-information .first-line {
    flex-direction: column;
  }

  /* aus @media (max-width: 800px) */
  .text-content .items .item {
    flex-direction: column;
  }

  /* aus @media (max-width: 800px) */
  .marketplace.provider .container-provider .item-provider {
    flex-direction: column;
    align-items: center;
  }

  /* aus @media (max-width: 800px) */
  .states .state-box .item-state {
    width: 100%;
  }

  /* aus @media (max-width: 750px) */
  #details-page .product .carousel #carousel-img-overlay {
    aspect-ratio: 4 / 3;
  }

  /* aus @media (max-width: 750px) */
  .main-container .logo-name-verify .name {
    padding-top: 0;
  }

  /* aus @media (max-width: 750px) */
  .main-container .absolute-elements {
    height: 150px;
  }

  /* aus @media (max-width: 750px) */
  .main-container .absolute-elements .green-button {
    margin-right: 0;
  }

  /* aus @media (max-width: 750px) */
  .main-container .logo-name-verify {
    flex-direction: column;
    align-items: center;
    /* position: relative;
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    */
  }

  /* aus @media (max-width: 750px) */
  .main-container .absolute-elements {
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
  }

  /* aus @media (max-width: 750px) */
  .advantages .items .item {
    padding-left: 0;
    padding: 20px;
    box-sizing: border-box;
  }

  /* aus @media (max-width: 600px) */
  .item-cat {
    max-width: 65px;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel .owl-item .item-cat-image {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel .owl-item .item-cat-image.alle {
    background: #8ba3f2;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel .owl-item .item-cat-image.shop {
    background: #a3d49b;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel .owl-item .item-cat-image.anzeige {
    background: #f7b274;
  }

  /* aus @media (max-width: 600px) */
  #details-page .main-container .absolute-elements .green-button.follow-button, .main-container .absolute-elements .green-button {
    max-width: 195px;
    width: 100%;
    box-sizing: border-box;
  }

  /* aus @media (max-width: 600px) */
  .item-cat img {
    max-width: 50px;
    height: 50px;
  }

  /* aus @media (max-width: 600px) */
  .item-cat a {
    justify-content: start;
    padding: 0;
  }

  /* aus @media (max-width: 600px) */
  .item-cat a, .item-cat {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    display: flex;
  }

  /* aus @media (max-width: 600px) */
  .item-cat .title {
    font-size: 14px;
    text-align: center;
    padding: 0;
  }

  /* aus @media (max-width: 600px) */
  .adv.adv-mobile .item .image .counter {
    z-index: 2;
    position: absolute;
    background: #444444;
    color: #fff;
    border-radius: 4px;
    padding: 4px;
    left: 10px;
    top: 15px;
    font-size: 10px;
  }

  /* aus @media (max-width: 600px) */
  .adv.adv-mobile .item .image .pin {
    z-index: 1;
  }

  /* aus @media (max-width: 600px) */
  .adv.adv-mobile .items .item {
    margin-bottom: 20px;
    overflow: hidden;
  }

  /* aus @media (max-width: 600px) */
  #details-page .product .carousel .owl-carousel .owl-item img {
    height: 225px;
    border-radius: 0;
  }

  /* aus @media (max-width: 600px) */
  .items-list .item .bottom-section .logo-button {
    max-width: max-content;
  }

  /* aus @media (max-width: 600px) */
  #tabs-1 .items-list .owl-nav .owl-prev {
    margin-left: 5px;
  }

  /* aus @media (max-width: 600px) */
  #tabs-1 .items-list .owl-nav .owl-next {
    margin-right: 5px;
  }

  /* aus @media (max-width: 600px) */
  .contact-information .first-line .category {
    gap: 5px;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-img img {
    width: 110px;
    height: 110px;
  }

  /* aus @media (max-width: 600px) */
  .main-container .absolute-elements .green-button {
    font-size: 12px;
    width: 155px;
    right: 10px;
  }

  /* aus @media (max-width: 600px) */
  .main-container .absolute-elements {
    height: auto;
  }

  /* aus @media (max-width: 600px) */
  .shield-icon {
    padding: 0;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-name-verify .starrating {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-name-verify {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-name-verify .starrating {
    flex: 100%;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-name-verify .logo {
    flex: 100%;
  }

  /* aus @media (max-width: 600px) */
  .main-container .absolute-elements .green-button a, .main-container .absolute-elements .green-button input {
    font-size: 14px;
  }

  /* aus @media (max-width: 600px) */
  .item-cat .title {
    max-width: 90px;
  }

  /* aus @media (max-width: 600px) */
  #details-page .second-container #tabs .tab-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* aus @media (max-width: 600px) */
  #details-page .tab-content .products {
    padding-left: 0;
    padding-right: 0;
  }

  /* aus @media (max-width: 600px) */
  .second-container:has(#tabs) {
    margin-top: 60px;
  }

  /* aus @media (max-width: 600px) */
  .main-container .contact-information {
    margin-top: 10px;
  }

  /* aus @media (max-width: 600px) */
  .contact-information .first-line .category:has(a) {
    height: 260px;
    justify-content: space-between;
  }

  /* aus @media (max-width: 600px) */
  .contact-information .first-line .category {
    gap: 10px;
    margin-bottom: 10px;
  }

  /* aus @media (max-width: 600px) */
  .adv .items .item {
    max-width: 100%;
  }

  /* aus @media (max-width: 600px) */
  #details-page .information {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* aus @media (max-width: 600px) */
  .main-container .contact-information .first-line {
    display: block;
  }

  /* aus @media (max-width: 600px) */
  .main-container .contact-information {
    height: 310px;
  }

  /* aus @media (max-width: 600px) */
  .contact-information .first-line .category {
    max-width: 300px;
    width: 100%;
  }

  /* aus @media (max-width: 600px) */
  .contact-information .first-line .category .information {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
  }

  /* aus @media (max-width: 600px) */
  .main-container .contact-information {
    gap: 0;
  }

  /* aus @media (max-width: 600px) */
  .main-container .absolute-elements .green-button {
    padding: 0 10px;
    width: max-content;
  }

  /* aus @media (max-width: 600px) */
  #details-page {
    padding-top: 0;
    margin-top: -2px;
  }

  /* aus @media (max-width: 600px) */
  .item-cat .title {
    font-size: 11px;
    text-align: center;
    padding: 0;
    font-family: "Montserrat";
    word-wrap: break-word;
    word-break: break-word;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel .owl-item .item-cat-image {
    width: 40px;
    height: 40px;
  }

  /* aus @media (max-width: 600px) */
  .container-follow-html.mobile .item-notification > a, .container-follow-html.mobile .item-notification > div {
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 10px;
    gap: 5px;
  }

  /* aus @media (max-width: 600px) */
  #details-page .product .carousel #carousel-img-overlay {
    height: 225px;
    border-radius: 0;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel:not(.owl-loaded) .item-cat {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 15.38%;
    width: 15.38%;
    max-width: 15.38%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel:not(.owl-loaded) .item-cat a {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel:not(.owl-loaded) .item-cat-image {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    padding: 4px;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel:not(.owl-loaded) .item-cat-image.shop {
    background: #a3d49b;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel:not(.owl-loaded) .item-cat-image.anzeige {
    background: #f7b274;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel:not(.owl-loaded) .item-cat-image.alle {
    background: #8ba3f2;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel:not(.owl-loaded) .item-cat img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel:not(.owl-loaded) .item-cat .title {
    font-size: 11px;
    text-align: center;
    padding: 0;
    margin: 0;
    font-family: "Montserrat";
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    max-width: 90px;
  }

  /* aus @media (max-width: 600px) */
  header .owl-carousel.categories-mobile-view.mobile-view:not(.owl-loaded) .item-cat {
    visibility: visible;
  }

  /* aus @media (max-width: 600px) */
  #details-page .description .information {
    display: block;
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
    max-height: 100%;
    overflow: unset;
    text-overflow: unset;
  }

  /* aus @media (max-width: 600px) */
  .contact-information .first-line .category {
    gap: 0;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-img {
    position: absolute;
    top: -100px;
    left: 10px;
  }

  /* aus @media (max-width: 600px) */
  #details-page .product .carousel .owl-carousel .owl-item img {
    object-fit: cover;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-name-verify {
    align-items: start;
    padding-top: 65px;
    position: relative;
    margin: 0;
    gap: 10px;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-name-verify .name {
    text-align: start;
    font-size: 18px;
    margin: 0;
  }

  /* aus @media (max-width: 600px) */
  .main-container .absolute-elements {
    align-items: start;
  }

  /* aus @media (max-width: 600px) */
  .contact-information .first-line .category:has(a) {
    flex-direction: column;
    position: absolute;
    gap: 5px;
    right: 20px;
    max-width: max-content;
    top: 10px;
  }

  /* aus @media (max-width: 600px) */
  #details-page .information {
    font-size: 12px;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-name-verify {
    align-items: center;
  }

  /* aus @media (max-width: 600px) */
  .container-provider .item-provider .contact-provider {
    flex-direction: column;
  }

  /* aus @media (max-width: 600px) */
  #details-page section {
    top: unset;
  }

  /* aus @media (max-width: 600px) */
  .main-container {
    max-height: 100%;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-name-verify {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* aus @media (max-width: 600px) */
  .main-container .absolute-elements .green-button {
    order: 1;
  }

  /* aus @media (max-width: 600px) */
  .main-container .absolute-elements .green-button {
    position: relative;
    right: unset;
    left: unset;
  }

  /* aus @media (max-width: 600px) */
  .main-container .absolute-elements {
    align-items: start;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-img {
    order: -1;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-img {
    position: absolute;
    top: -95px;
    left: 0px;
  }

  /* aus @media (max-width: 600px) */
  .main-container .absolute-elements {
    padding-bottom: 40px;
  }

  /* aus @media (max-width: 600px) */
  .shield-icon {
    margin-top: -7px;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-name-verify {
    padding-top: 40px;
  }

  /* aus @media (max-width: 600px) */
  .main-container .absolute-elements {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* aus @media (max-width: 600px) */
  .main-container .logo-name-verify {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

}


/* ===========================================================================
   TEIL B  -  NUR HANDY
   ========================================================================= */
@media screen and (max-width: 1239px) {

  /* --- B1 KOPFBEREICH --- */

  /* Kategorie-Karussell im Anbieterprofil ausblenden.
     Auf der Startseite ist es der Einstieg ins Sortiment. Im Profil eines
     Anbieters lenkt es vom Anbieter weg und schiebt das Titelbild um 74 px
     nach unten. Es bleibt im Markup stehen, wird nur nicht angezeigt -
     damit ist der Schritt jederzeit umkehrbar. */
  header .owl-carousel.categories-mobile-view {
    display: none !important;
  }

  /* Auch die Suchleiste im Profil ausblenden. Der Header besteht dort nur
     noch aus dem Streifen mit Logo und Hamburger, das Titelbild haengt
     direkt daran. Gesucht wird auf Profilseiten ueber das Menue.
     Die Leiste bleibt im Markup - nur nicht sichtbar. */
  header #headerform {
    display: none !important;
  }

  /* Der Innenabstand oben im Kopfbereich war auf Logo-Streifen PLUS
     Suchleiste gerechnet. Ohne die Leiste bleibt nur der gelbe Streifen
     stehen, dessen Hoehe der .container-header::before vorgibt (64 px). */
  body header .container .container-header {
    padding-top: 62px !important;
    padding-bottom: 0 !important;
  }

  /* Hamburger nachziehen. Er ist 'position: fixed' OHNE 'top' und haengt
     deshalb an seiner Position im normalen Fluss - er stand hinter der
     Suchleiste. Ohne sie rutscht er um 25 px nach oben und sitzt teilweise
     ausserhalb des Bildes (Oberkante bei -5 px).
     WICHTIG: Der Versatz gehoert an das Zeichen (i), NICHT an
     .header-menu-dropdown. Ein transform auf diesem Element macht es zum
     Bezugsrahmen fuer alles, was darin 'position: fixed' ist - die
     Menuekarte sass dann nicht mehr am Bildschirmrand, sondern 8 px
     eingerueckt und 8 px zu breit. Das Zeichen ist ein Geschwister der
     Karte, dort stoert der Versatz nicht.
     Die Startseiten-Regel setzt hier 20 px; 45 px bringen den Hamburger
     auf genau die Hoehe des Logos (Oberkante 20 px).
     MERKPOSTEN: Aendert sich die Hoehe des gelben Streifens oder kommt die
     Suchleiste zurueck, muss diese Zahl mitgezogen werden. */
  body header .container .container-header .header-menu-dropdown i {
    transform: translateY(45px) !important;
  }

  /* Titelbild direkt an den Header haengen.
     Der Abstand unter dem Header und der Zwischenraum im .container waren
     auf das Karussell gerechnet. Ohne es bliebe sonst eine Luecke.
     'body' davor, weil die Regel 'Doradoo - Startseite' dieselben Werte
     setzt und alphabetisch NACH dieser Datei geladen wird - bei gleicher
     Spezifitaet wuerde sie sonst gewinnen. */
  body header {
    padding-bottom: 0 !important;
  }

  body header .container {
    gap: 0 !important;
  }


  /* ---- Titelbild kuerzer ----
     254 px sind auf dem Handy fast der halbe Schirm. 150 px zeigen das Bild
     immer noch, lassen aber Platz fuer das Profil selbst. */
  .static-content .background-img { height: 220px !important; }   /* 29.08.2026: von 150 auf 180 px, ein Fuenftel mehr */
  .static-content .background-img img {
    height: 100% !important; width: 100% !important;   /* 29.08.2026: 150 -> 100%, folgt der Hoehe des Rahmens */
    object-fit: cover !important; object-position: center !important;
    display: block !important;
  }

  /* ---- Profilzeile: Bild neben Name, Bewertung, Branche ----
     Das Theme legt das Logo absolut ins Titelbild hinein (140x120) und
     haelt darunter mit padding-top: 40px Platz frei. Beides faellt weg:
     Das Bild steht jetzt im Fluss, links neben dem Text.
     Umgesetzt als Raster, damit Name und Schild nebeneinander bleiben und
     das Bild ueber alle drei Zeilen reicht. */
  .static-content .absolute-elements .logo-name-verify {
    display: grid !important;
    grid-template-columns: 62px 1fr auto !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    align-items: center !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .static-content .logo-name-verify .logo-img {
    position: static !important;
    grid-area: 1 / 1 / 4 / 2 !important;
    width: 62px !important; height: 62px !important;
    max-width: 62px !important; min-width: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 1px solid #ececee !important;
  }

  .static-content .logo-name-verify .logo-img img {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    object-fit: cover !important;
    display: block !important;
  }

  .static-content .logo-name-verify h1.name {
    grid-area: 1 / 2 / 2 / 3 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    /* Lange Firmennamen nach zwei Zeilen abschneiden, sonst schiebt der
       Name die ganze Seite nach unten. */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .static-content .logo-name-verify .shield-icon {
    grid-area: 1 / 3 / 2 / 4 !important;
    margin: 0 !important;
    width: auto !important; height: auto !important;
  }

  .static-content .logo-name-verify .starrating {
    grid-area: 2 / 2 / 3 / 4 !important;
    width: auto !important;
  }

  /* Branche - vom Skript aus den Kontaktangaben hierher geholt */
  .static-content .logo-name-verify .dd-branche {
    grid-area: 3 / 2 / 4 / 4 !important;
    font-size: 11.5px !important;
    color: #6d6d6d !important;
  }

  /* ---- Verifiziert-Schild kleiner ----
     Das Theme liefert es mit 32 px. Neben dem Namen, dessen Zeile nur
     20 px hoch ist, wirkte es wie ein eigener Knopf. Auf Namenshoehe
     gebracht ist es das, was es sein soll: ein Abzeichen. */
  .static-content .logo-name-verify .shield-icon,
  .static-content .logo-name-verify .shield-icon img {
    width: 20px !important;
    height: 20px !important;
  }

  /* ---- Profilbild sauber rund ----
     Das Theme legt den gelben Rand nicht auf die Huelle, sondern auf das
     Bild selbst: 3 px #F8C647, dazu ein Schatten, und gerechnet wird mit
     content-box. Aus 62 px wurden dadurch 68 px, die der runde Ausschnitt
     schief abgeschnitten hat - daher der gelbe Streifen auf einer Seite
     und die sichtbare Kante. Rand und Schatten weg, dann sitzt das Bild
     genau im Kreis. */
  .static-content .logo-name-verify .logo-img {
    border: 0 !important;
  }
  .static-content .logo-name-verify .logo-img img {
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* ---- Plus vor 'Folgen' ----
     Das Plus wird gezeichnet, nicht geschrieben: es ist kein Wort und
     muss darum auch nicht uebersetzt werden. Der Knopf ist ohnehin flex
     mit 7 px Abstand, das Zeichen wird einfach das erste Element. */
  .static-content .absolute-elements .green-button.follow-button > a::before {
    content: "+" !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  /* ---- Die beiden Knoepfe nebeneinander ----
     Das Theme stellt sie untereinander, je 195 px breit - die rechte
     Bildschirmhaelfte blieb leer. Der Block ist ohnehin flex, er muss nur
     umbrechen duerfen: Profilzeile ueber die volle Breite, darunter die
     zwei Knoepfe zu gleichen Teilen. */
  .static-content .absolute-elements {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    column-gap: 10px !important;
    row-gap: 22px !important;
    align-items: stretch !important;
    padding: 14px 16px 16px !important;
  }

  .static-content .absolute-elements .logo-name-verify { flex: 0 0 100% !important; }

  .static-content .absolute-elements .green-button {
    flex: 1 1 0 !important;
    /* Das Theme schiebt die Knoepfe mit top: 25px nach unten - im alten
       Layout noetig, hier ragten sie dadurch aus ihrem Block heraus und
       ueberlappten die Kontaktzeile. */
    top: 0 !important;
    position: relative !important;
    width: auto !important; max-width: none !important;
    height: 46px !important;
    margin: 0 !important; padding: 0 !important;
  }

  /* Reihenfolge festlegen: Profilzeile zuoberst, darunter Folgen links und
     Nachricht rechts. Im Markup steht 'Folgen' hinter 'Nachricht', und ohne
     ausdrueckliche Angabe rutschte es beim Umbrechen sogar ueber die
     Profilzeile. */
  .static-content .absolute-elements .logo-name-verify { order: 0 !important; }
  .static-content .absolute-elements .green-button.follow-button { order: 1 !important; }

  /* Das Theme schiebt beide Knoepfe mit top: 25px nach unten, 'Folgen'
     zusaetzlich ueber '#details-page .main-container ... .follow-button' mit
     !important. Eine Klassenregel verliert dagegen - deshalb hier mit
     derselben ID und einer Klasse mehr. Ohne das ragten die Knoepfe aus
     ihrem Block heraus und lagen auf der Kontaktzeile. */
  #details-page .main-container .absolute-elements .green-button,
  #details-page .main-container .absolute-elements .green-button.follow-button {
    top: 0 !important;
    margin-top: 0 !important;
  }
  .static-content .absolute-elements .green-button:not(.follow-button) { order: 2 !important; }

  .static-content .absolute-elements .green-button > form,
  .static-content .absolute-elements .green-button > a {
    width: 100% !important; height: 46px !important;
    border-radius: 10px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 7px !important;
    font-size: 14px !important; font-weight: 600 !important;
    margin: 0 !important;
  }

  /* ---- Breitenverhaeltnis der beiden Knoepfe ----
     'Folgen' ist ein kurzes Wort, 'Nachricht senden' ein langes. Bei
     gleicher Breite stiess der lange Text genau an die rechte Kante:
     das Theme-Formular hat links 15 px Innenabstand und rechts keinen,
     15 + 22 (Umschlag) + 7 + 130 (Text) ergab exakt die 174 px Knopf.
     Darum teilen wir die Zeile nicht halbe-halbe, sondern rund 40 zu 60.
     Die Zahlen sind Verhaeltniswerte, keine Pixel - so stimmt es auch
     auf schmaleren Geraeten. */
  .static-content .absolute-elements .green-button.follow-button {
    flex-grow: 140 !important;
  }
  .static-content .absolute-elements .green-button:not(.follow-button) {
    flex-grow: 208 !important;
  }

  /* Rechts denselben Innenabstand wie links, damit das Wort nicht klebt. */
  .static-content .absolute-elements .green-button:not(.follow-button) > form {
    padding-right: 15px !important;
  }

  /* 'Nachricht' gefuellt - das ist die wichtigere Handlung. */
  .static-content .absolute-elements .green-button:not(.follow-button) > form {
    background: #F8C647 !important;
    color: #2b2b2b !important;
  }

  /* 'Folgen' nur umrandet. */
  .static-content .absolute-elements .green-button.follow-button > a {
    border: 1.5px solid #d9d9dc !important;
    background: #fff !important;
    color: #2b2b2b !important;
  }

  /* ---- Kartenschatten weg ----
     Das Theme legt auf .absolute-elements einen Schatten
     (0 1px 5px rgba(0,0,0,.2)). Die Kontaktzeile haengt direkt
     darunter, darum lag der Schatten auf ihrer Oberkante.
     Auf dem Handy geht die Karte ohnehin von Rand zu Rand,
     sichtbar war nur die untere Kante - also ganz weg. */
  #details-page .main-container .absolute-elements,
  .static-content .absolute-elements {
    box-shadow: none !important;
  }

  /* ---- Kontaktangaben hinter einer Zeile ----
     Fuenf Zeilen a 40 px plus die sozialen Netzwerke ergaben 330 px, an
     denen jeder vorbeiscrollen musste. Zugeklappt sind es 46 px.
     Die Zeile selbst setzt das Skript ein (.dd-kontaktzeile). */
  .dd-kontaktzeile {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 16px !important;
    padding: 13px !important;
    background: #f1f1f0 !important;   /* 29.08.2026: Variante C, grau gefuellt.
       Vorher transparent mit 1px #ececee - auf Weiss praktisch unsichtbar. */
    border: 1px solid #e2e2e4 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    color: #2b2b2b !important;
    cursor: pointer !important;
  }
  .dd-kontaktzeile .dd-pfeil { color: #5a5a5a !important; font-size: 15px !important; }
  .dd-offen .dd-kontaktzeile {
    border-radius: 10px 10px 0 0 !important;
    border-bottom: 0 !important;
  }

  /* Zugeklappt: der Block ist weg. 'display' und nicht 'height', damit
     nichts an Platz uebrig bleibt. */
  .static-content .contact-information { display: none !important; }
  .dd-offen .static-content .contact-information,
  .static-content.dd-offen .contact-information {
    display: block !important;
    margin: 0 16px !important;
    padding: 4px 13px 12px !important;
    border: 1px solid #ececee !important;
    border-top: 0 !important;
    border-radius: 0 0 10px 10px !important;
    width: auto !important;
  }

  .static-content .contact-information .first-line {
    display: block !important;
    width: auto !important;
    margin: 0 !important; padding: 0 !important;
  }

  /* Eine Angabe pro Zeile: Kreis links, Text rechts. */
  .static-content .contact-information .category {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    position: static !important;
  }

  .static-content .contact-information .category .icon {
    width: 34px !important; height: 34px !important;
    flex: 0 0 34px !important;
    margin: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }

  .static-content .contact-information .category .information {
    width: auto !important;
    font-size: 12.5px !important;
    margin: 0 !important;
    word-break: break-word !important;
  }

  /* Die sozialen Netzwerke sind eine .category ohne .information, aber mit
     fuenf .icon darin. Im Theme stehen sie als Spalte am rechten Rand und
     schweben dort ohne Bezug. Hier eine Reihe unter einer Trennlinie. */
  .static-content .contact-information .category:has(> .icon + .icon) {
    gap: 9px !important;
    border-top: 1px solid #f0f0f2 !important;
    margin-top: 5px !important;
    padding-top: 9px !important;
  }

  /* --- B2 REITER --- */


  /* ---- Reiterleiste: wischbare Zeile statt sieben Balken ----
     Untereinander gestapelt waren es 391 px. Als eine Zeile sind es 60. */
  .second-container .ui-tabs > ul {
    display: flex !important;
    /* Ohne diese Zeile bleibt die Richtung auf column und die Reiter stehen
       weiter untereinander - das Theme setzt sie so. */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    list-style: none !important;
    background: #fff !important;
    border-top: 1px solid #ececee !important;
    border-bottom: 1px solid #ececee !important;
    /* Bleibt beim Scrollen oben stehen. Braucht das overflow-x: clip
       weiter unten, sonst wirkt es nicht. */
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
  }
  .second-container .ui-tabs > ul::-webkit-scrollbar { display: none !important; }

  .second-container .ui-tabs > ul > li {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #f4f4f6 !important;
    list-style: none !important;
    float: none !important;
  }

  .second-container .ui-tabs > ul > li > a {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 0 15px !important;
    font-size: 12.5px !important;
    color: #5a5a5a !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .second-container .ui-tabs > ul > li.ui-tabs-active { background: #F8C647 !important; }
  .second-container .ui-tabs > ul > li.ui-tabs-active > a { color: #2b2b2b !important; font-weight: 700 !important; }

  /* Anzahl hinter dem Namen - das Skript haengt sie als data-zahl an. */
  .second-container .ui-tabs > ul > li > a[data-zahl]::after {
    content: attr(data-zahl) !important;
    margin-left: 6px !important;
    font-size: 11px !important;
    opacity: .75 !important;
  }

  /* ---- Nur der gewaehlte Bereich ist offen ----
     Das Theme laesst alle sieben gleichzeitig stehen (9197 px). Die
     Markierung wandert schon richtig mit - sie muss nur wirken.
     Gemessen: Inserate 4327, Bewertungen 3624, Blog 3062 px. */
  .second-container .ui-tabs:has(> ul > li:nth-child(1).ui-tabs-active) > div[id^="tabs-"]:not(#tabs-1) { display: none !important; }
  .second-container .ui-tabs:has(> ul > li:nth-child(2).ui-tabs-active) > div[id^="tabs-"]:not(#tabs-2) { display: none !important; }
  .second-container .ui-tabs:has(> ul > li:nth-child(3).ui-tabs-active) > div[id^="tabs-"]:not(#tabs-3) { display: none !important; }
  .second-container .ui-tabs:has(> ul > li:nth-child(4).ui-tabs-active) > div[id^="tabs-"]:not(#tabs-4) { display: none !important; }
  .second-container .ui-tabs:has(> ul > li:nth-child(5).ui-tabs-active) > div[id^="tabs-"]:not(#tabs-5) { display: none !important; }
  .second-container .ui-tabs:has(> ul > li:nth-child(6).ui-tabs-active) > div[id^="tabs-"]:not(#tabs-6) { display: none !important; }
  .second-container .ui-tabs:has(> ul > li:nth-child(7).ui-tabs-active) > div[id^="tabs-"]:not(#tabs-7) { display: none !important; }

  /* ---- Damit 'sticky' ueberhaupt greift ----
     Das Theme setzt auf body ein overflow-x: hidden. Damit wird der body
     zum eigenen Scrollbereich und alles Klebende klebt an ihm statt am
     Bildschirm - gemessen sass die Leiste nach 2500 px bei -1572.
     'clip' schneidet genauso ab, macht aber keinen Scrollbereich. */
  body { overflow-x: clip !important; }

  /* --- B3 INHALT --- */


  /* ---- Inhalt ueber die volle Breite ----
     Das Theme laesst dem Inhalt 344 statt 390 px und der Inseratsliste
     nochmals weniger - die Karten waren 285 px breit auf einem 390er
     Schirm. Hier bekommt alles denselben Rand von 16 px. */
  /* Der Bereich bringt aus dem Theme 20 px Rand mit, die Reiter-Huelle
     nochmals 3 px - zusammen blieben dem Inhalt 344 statt 390 px. Hier alles
     auf null, den Rand macht der Inhalt selbst mit 16 px. */
  /* '#details-page section' setzt den Rand mit einer ID und !important -
     eine Klassenregel verliert dagegen, deshalb hier ebenfalls ueber die ID. */
  #details-page .second-container,
  #details-page section.second-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 14px 0 40px !important;
  }
  .second-container .ui-tabs { padding: 0 !important; border: 0 !important; }
  .second-container .ui-tabs > div[id^="tabs-"] {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .second-container div[id^="tabs-"] > .tab-content,
  .second-container div[id^="tabs-"] > div {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 16px !important;
  }

  .second-container .tab-content > .title {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 0 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .second-container section.products,
  .second-container section.products .items-list {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---- Inserate: zwei nebeneinander (Voreinstellung) ---- */
  .second-container .items-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }

  .second-container .items-list .item {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    border: 1px solid #ececee !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    display: block !important;
  }

  .second-container .items-list .item .image {
    width: auto !important; max-width: none !important;
    height: 100px !important;
    margin: 0 !important;
    position: relative !important;
    display: block !important;
  }

  .second-container .items-list .item .image img {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ---- Lesezeichen oben rechts ----
     Wird bewusst NICHT angefasst. Das Theme macht daraus einen dunklen
     Kreis (40 px, #333) mit weissem Zeichen. Hier stand vorher ein
     weisser Kreis von 26 px - darauf war das weisse Herz unsichtbar.
     Es soll ueberall auf der Seite gleich aussehen, also Finger weg. */

  .second-container .items-list .item .description {
    width: auto !important; height: auto !important;
    padding: 0 !important; margin: 0 !important;
    display: block !important;
  }

  .second-container .items-list .item .content-section { width: auto !important; padding: 0 !important; margin: 0 !important; }

  .second-container .items-list .item .title-category {
    width: auto !important; height: auto !important;
    padding: 7px 8px 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    /* Zwei Zeilen, dann abschneiden - sonst werden die Karten
       unterschiedlich hoch und das Raster franst aus. */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .second-container .items-list .item .bottom-section {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    width: auto !important; height: auto !important;
    padding: 3px 8px 8px !important;
    margin: 0 !important;
  }

  .second-container .items-list .item .price {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    width: auto !important; height: auto !important;
    padding: 0 !important; margin: 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }
  .second-container .items-list .item .price .currency,
  .second-container .items-list .item .price .amount {
    width: auto !important; height: auto !important;
    font-size: 12.5px !important; font-weight: 700 !important;
    margin: 0 !important; padding: 0 !important;
  }

  /* Bei zwei Spalten weggelassen: Shop-Knopf und die Zeile mit Ort,
     Merken und Datum. Bei rund 167 px Kartenbreite passt beides nicht
     mehr lesbar hin - und der Shop-Knopf ist im Anbieterprofil ohnehin
     ueberfluessig, man ist ja schon beim Anbieter. */
  .second-container .items-list .item .logo-button,
  .second-container .items-list .item .info-node { display: none !important; }

  /* ---- Einspaltig: alles, was die Karte hergibt ----
     Umgeschaltet ueber die Klasse .dd-eins, die das Skript auf die Liste
     setzt. Bild groesser, Shop-Zeile und die Zeile mit Ort, Merken und
     Datum kommen zurueck. */
  .second-container .items-list.dd-eins { grid-template-columns: 1fr !important; gap: 10px !important; }
  .second-container .items-list.dd-eins .item .image { height: 150px !important; }
  .second-container .items-list.dd-eins .item .title-category { font-size: 12.5px !important; padding: 9px 11px 0 !important; }
  .second-container .items-list.dd-eins .item .bottom-section { padding: 7px 11px 4px !important; }
  .second-container .items-list.dd-eins .item .price,
  .second-container .items-list.dd-eins .item .price .currency,
  .second-container .items-list.dd-eins .item .price .amount { font-size: 15px !important; }

  .second-container .items-list.dd-eins .item .logo-button {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important; height: auto !important;
    padding: 0 11px !important; margin: 0 !important;
  }
  .second-container .items-list.dd-eins .item .logo-button .profile-img {
    width: 26px !important; height: 26px !important; flex: 0 0 26px !important;
    border-radius: 50% !important; overflow: hidden !important; margin: 0 !important;
  }
  .second-container .items-list.dd-eins .item .logo-button .profile-img img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }

  .second-container .items-list.dd-eins .item .info-node {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    width: auto !important; height: auto !important;
    padding: 0 11px 10px !important; margin: 0 !important;
    font-size: 10.5px !important;
    color: #8a8a8a !important;
  }

  /* ---- Umschalter ein-/zweispaltig ----
     Zwei Felder rechts neben der Ueberschrift. Das Skript setzt ihn ein
     und merkt sich die Wahl im Browser. */
  .dd-kopfzeile {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px 11px !important;
  }
  .dd-kopfzeile .dd-titel { font-size: 13px !important; font-weight: 700 !important; color: #2b2b2b !important; }
  .dd-kopfzeile .dd-titel .dd-anzahl { font-weight: 400 !important; font-size: 11px !important; color: #8a8a8a !important; margin-left: 6px !important; }

  .dd-umschalter { display: flex !important; border: 1px solid #e2e2e5 !important; border-radius: 9px !important; overflow: hidden !important; }
  .dd-umschalter button {
    width: 40px !important; height: 34px !important;
    background: #fff !important; border: 0 !important; padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important;
  }
  .dd-umschalter button + button { border-left: 1px solid #e2e2e5 !important; }
  .dd-umschalter button.dd-an { background: #F8C647 !important; }
  .dd-umschalter i { display: block !important; background: #6a6a6a !important; }
  .dd-umschalter button.dd-an i { background: #2b2b2b !important; }
  .dd-umschalter .dd-i1 { display: flex !important; flex-direction: column !important; gap: 3px !important; }
  .dd-umschalter .dd-i1 i { width: 15px !important; height: 3px !important; border-radius: 1px !important; }
  .dd-umschalter .dd-i2 { display: grid !important; grid-template-columns: 6px 6px !important; gap: 2.5px !important; }
  .dd-umschalter .dd-i2 i { width: 6px !important; height: 6px !important; border-radius: 1.5px !important; }

  /* Wenn der Umschalter da ist, braucht die Ueberschrift des Themes
     keinen eigenen Platz mehr. */
  .dd-hat-umschalter .tab-content > .title { display: none !important; }

  /* ---- Mitlaufende Leiste ----
     Erscheint erst, wenn das Profil nach oben aus dem Bild scrollt.
     Kleines Bild, Name, beide Knoepfe - darunter klebt die Navigation. */
  .dd-mini {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    /* Ueber dem Logo: das Theme haelt es mit position fixed und z-index 9999
       dauerhaft am oberen Rand. Ohne diese Zahl schwebte es ueber der Leiste.
       Mit 10001 deckt die weisse Leiste es sauber zu. */
    z-index: 10001 !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px 4px !important;
    box-shadow: 0 2px 9px rgba(0,0,0,.10) !important;
    transform: translateY(-100%) !important;
    transition: transform .18s ease !important;
  }
  .dd-zeig-mini .dd-mini { transform: translateY(0) !important; }
  .dd-mini .dd-mini-bild { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; border-radius: 50% !important; overflow: hidden !important; background: #dfe3e6 !important; }
  .dd-mini .dd-mini-bild img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .dd-mini .dd-mini-name { flex: 1 !important; min-width: 0 !important; font-size: 12.5px !important; font-weight: 700 !important; color: #2b2b2b !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .dd-mini .dd-mini-akt { display: flex !important; gap: 7px !important; flex: 0 0 auto !important; }
  .dd-mini .dd-mini-akt a { height: 30px !important; padding: 0 11px !important; border-radius: 9px !important; display: flex !important; align-items: center !important; font-size: 11.5px !important; font-weight: 600 !important; text-decoration: none !important; }
  .dd-mini .dd-mini-akt .dd-mini-folgen { border: 1.5px solid #e0e0e3 !important; color: #2b2b2b !important; background: #fff !important; }
  .dd-mini .dd-mini-akt .dd-mini-nachricht { background: #F8C647 !important; color: #2b2b2b !important; }

  /* Solange die Leiste steht, rutscht die klebende Navigation darunter. */
  .dd-zeig-mini .second-container .ui-tabs > ul { top: 43px !important; z-index: 10000 !important; }

  /* --- B4 BEWERTUNGEN --- */

}


/* ===========================================================================
   TEIL B2  -  BREITE BAENDIGEN AB TABLET  (601 bis 1239 px)
   ---------------------------------------------------------------------------
   Teil B0 und Teil B ergeben zusammen die Handy-Anordnung auf jeder Breite.
   Ohne Deckel zoege sie sich aber ueber 1200 px auseinander: 'Folgen' waere
   465 px breit, die Kontaktzeile eine Textzeile ueber die halbe Wand.
   860 px ist die Breite, bei der eine Zeile noch angenehm zu lesen ist.
   ========================================================================= */
@media screen and (min-width: 601px) and (max-width: 1239px) {

  /* ---- Drei Reste der Desktop-Anordnung ----
     Diese drei setzt das Theme oberhalb von 1230 px oder ganz ohne
     Medienabfrage, Teil B0 konnte sie darum nicht mitbringen:

     1. .static-content bekommt eine feste Hoehe (bei 1024 px waren es
        885 px, obwohl der Inhalt nur 422 px hoch ist) - das war die
        grosse Luecke unter der Kontaktzeile.
     2. .logo-name-verify wird mit top:-130px in das Titelbild hinein
        gezogen. Auf dem Handy steht die Zeile unter dem Bild.
     3. Unser eigener Versatz des Burgers (translateY 45px) ist auf die
        hohe Handy-Kopfzeile abgestimmt. Ab Tablet ist die Kopfzeile
        einreihig, dort gehoert er auf null. */
  #details-page .main-container .static-content {
    height: auto !important;
    min-height: 0 !important;
  }
  #details-page .static-content .logo-name-verify {
    top: 0 !important;
  }
  header .container .container-header .header-menu-dropdown i {
    transform: none !important;
  }

  /* ---- Kopfzeile: unsere Handy-Werte gelten hier nicht ----
     Teil B schiebt .container-header um 62 px nach unten, passend zur
     hohen Handy-Kopfzeile. Ab Tablet ist die Kopfzeile einreihig und
     ueber den ganzen Bereich 601-1239 px konstant 125 px hoch (gemessen
     bei 601, 700, 768, 900, 1024 und 1239 px). Also Versatz auf null.
     Der Abstand unter der festen Kopfzeile: das Theme reserviert in main
     229 px fuer seinen hohen Desktop-Kopf - das war die grosse Luecke
     ueber dem Titelbild. main beginnt hier ohnehin schon bei 116 px,
     es fehlen also nur noch 10 px bis unter die 125 px hohe Kopfzeile.
     html body davor, weil Teil B mit 'body header ...' arbeitet. */
  html body header .container .container-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html body main {
    padding-top: 10px !important;
  }

  #details-page .main-container .static-content,
  #details-page .second-container,
  #details-page section.second-container {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Das Titelbild waechst mit - 150 px auf 860 px Breite waeren ein Streifen.
     Erst ab 768 px: dazwischen liegen quer gehaltene Handys, denen 220 px
     Titelbild zu viel von der Bildschirmhoehe wegnehmen wuerden. */
  @media screen and (min-width: 768px) {
    .static-content .background-img,
    .static-content .background-img img { height: 264px !important; }   /* 29.08.2026: von 220 auf 264 px, gleiches Verhaeltnis */
  }

  /* Feste zwei Spalten ergaeben auf 860 px Karten von 425 px. Stattdessen
     nimmt das Raster so viele Karten, wie nebeneinander Platz haben. Die
     Mindestbreiten sind die, die auf dem Handy herauskommen: klein 170 px,
     gross 330 px. */
  .second-container .items-list {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  }
  .second-container .items-list.dd-eins {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
  }

  /* Die mitlaufende Leiste haelt sich an denselben Deckel wie der Inhalt. */
  .dd-mini {
    padding-left: max(12px, calc((100vw - 860px) / 2)) !important;
    padding-right: max(12px, calc((100vw - 860px) / 2)) !important;
  }

}


/* ===========================================================================
   TEIL C  -  NUR DESKTOP
   ========================================================================= */
@media screen and (min-width: 1240px) {

  /* --- C1 KOPFBEREICH --- */


  /* --- C2 REITER --- */


  /* --- C3 INHALT --- */


  /* --- C4 BEWERTUNGEN --- */

}


/* =====================================================================
   Umschalter der beiden Listenansichten - Aussehen an die Startseite
   angeglichen (Stand 29.08.2026). Vorher: gelb gefuellter aktiver Knopf,
   duenner Rahmen, Liste links / Raster rechts. Jetzt wie im Abschnitt
   "Neue Anzeigen" der Startseite: graue Pille, aktiver Knopf weiss mit
   Schatten, Raster links / Liste rechts.
   Die Reihenfolge wird ueber flex-order gedreht - das Skript
   "Doradoo - Anbieterprofil (JS)" bleibt unangetastet.
   ===================================================================== */
@media screen and (max-width: 1239px) {
  .dd-umschalter { background: #f1f1f0 !important; border: 0 !important; border-radius: 9px !important; padding: 3px !important; gap: 2px !important; overflow: visible !important; }
  .dd-umschalter button { width: 34px !important; height: 30px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; }
  .dd-umschalter button.dd-an { background: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,.18) !important; }
  .dd-umschalter button i { background: #9a9a9a !important; }
  .dd-umschalter button.dd-an i { background: #222 !important; }
  /* Reihenfolge drehen: Raster links, Liste rechts - wie auf der Startseite */
  .dd-umschalter button:nth-child(1) { order: 2 !important; }
  .dd-umschalter button:nth-child(2) { order: 1 !important; }
}

/* =====================================================================
   Karten im Raster - Aussehen an die Startseite angeglichen (29.08.2026).
   Vorher: Bild fest 100 px hoch, Titel einzeilig 11 px, Preis mit Waehrung
   und Betrag untereinander (33 px hoch). Jetzt wie im Abschnitt
   "Neue Anzeigen": quadratisches Bild, Titel zweizeilig 12,5 px, Preis
   einzeilig fett. Gilt nur fuer das Raster - .dd-eins ist die
   einspaltige Ansicht und bleibt unveraendert.
   ===================================================================== */
@media screen and (max-width: 1239px) {
  .items-list:not(.dd-eins) .item .image { height: auto !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; }
  .items-list:not(.dd-eins) .item .image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
  .items-list:not(.dd-eins) .item .description { padding: 8px 10px 10px !important; gap: 6px !important; }
  .items-list:not(.dd-eins) .item .title-category { padding: 0 !important; }
  .items-list:not(.dd-eins) .item .title-category > a { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; text-overflow: clip !important; font-size: 12.5px !important; line-height: 1.3 !important; min-height: 33px !important; }
  .items-list:not(.dd-eins) .item .bottom-section { padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  /* Waehrung und Betrag nebeneinander statt uebereinander */
  .items-list:not(.dd-eins) .item .price { font-size: 14px !important; font-weight: 800 !important; flex-direction: row !important; align-items: baseline !important; gap: 4px !important; height: auto !important; }
  .items-list:not(.dd-eins) .item .price .currency,
  .items-list:not(.dd-eins) .item .price .amount { height: auto !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.2 !important; }
}

/* =====================================================================
   Einspaltige Ansicht (.dd-eins): Bild auf 272 px, wie die Listenansicht
   der Startseite. Das Theme setzt die Hoehe ueber einen Selektor mit
   #details-page - deshalb braucht auch diese Regel die ID, sonst gewinnt
   das Theme trotz !important.
   ===================================================================== */
@media screen and (max-width: 1239px) {
  #details-page .items-list.dd-eins .item .image { height: 272px !important; overflow: hidden !important; }
  #details-page .items-list.dd-eins .item .image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
}

/* =====================================================================
   Zwei Korrekturen vom 29.08.2026
   ===================================================================== */
@media screen and (max-width: 1239px) {

  /* --- Briefsymbol im Knopf "Nachricht senden" ---
     Das Eingabefeld .submit-button ist ein Block und fuellt den Rest des
     Knopfes aus; sein Text wird darin zentriert. Dadurch stand der Brief
     ganz links und der Text mit Abstand daneben. Mit width:auto schrumpft
     das Feld auf seine Textbreite, und Brief plus Text stehen als Gruppe
     in der Mitte (vorher 15 px links / 15 px rechts bei 7 px Innenabstand,
     jetzt 27 / 27 bei 8 px). */
  .absolute-elements .green-button > form { padding: 0 12px !important; justify-content: center !important; align-items: center !important; gap: 8px !important; }
  .absolute-elements .green-button .submit-button { width: auto !important; flex: 0 0 auto !important; }
  .absolute-elements .green-button .envelope { flex: 0 0 auto !important; }
  /* Abgemeldet liefert das Theme statt des Formulars einen einfachen Link:
     .green-button > .envelope + a. Dort klebte der Brief ganz am linken Rand,
     weil der Anker den Rest ausfuellt. Gleiche Behandlung wie beim Formular. */
  .absolute-elements .green-button:not(.follow-button) { justify-content: center !important; align-items: center !important; gap: 8px !important; padding: 0 12px !important; }
  .absolute-elements .green-button:not(.follow-button) > a { flex: 0 0 auto !important; width: auto !important; }

  /* --- Karte unter "Ueber uns" ---
     Das Theme gibt der Karte 800 px Hoehe. Auf dem Handy sind das fast
     zwei Bildschirme fuer eine Standortangabe. 260 px zeigen den Ort
     mit genug Umgebung. */
  /* Der Kartenrahmen allein genuegt nicht: Google Maps legt darin ein DIV an,
     dem das Theme ueber einen #details-page-Selektor 800 px gibt. Es stand
     deshalb unten aus dem verkleinerten Rahmen heraus. */
  #details-page .map, .map { height: 260px !important; min-height: 0 !important; overflow: hidden !important; }
  #details-page .map > div, .map > div { height: 100% !important; width: 100% !important; min-height: 0 !important; }
}