@charset "UTF-8";

/* ==========================================================================
   Nesseler Dental - Gestaltung des Kindtemplates
   --------------------------------------------------------------------------
   Aufbau dieser Datei:
     1  Schriften
     2  Farben und Grundmasse
     3  Grundgeruest
     4  Seitenkopf
     5  Navigation
     6  Titelbild
     7  Inhalt und Typografie
     8  Bausteine aus den alten Beitragstexten
     9  Fussbereich
    10  Zeitgemaesse Varianten (modern, weich, karten, rund)
    11  Schmale Bildschirme

   Die Klassen in Abschnitt 8 stammen aus den Beitragstexten der alten
   Website (einklinkerbereich, spaltelinks, accordspalt ...). Sie stehen im
   Inhalt der Beitraege und muessen deshalb hier gestaltet werden - nicht
   loeschen, sonst zerfallen die Seiten.
   ========================================================================== */


/* 1  Schriften =========================================================== */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans/open-sans-v34-latin-regular.woff2') format('woff2'),
         url('../fonts/open-sans/open-sans-v34-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/materialicons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2'),
         url('../fonts/materialicons/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


/* 2  Farben und Grundmasse =============================================== */

:root {
    --nes-gelb: #ffdb01;
    --nes-gelb-satt: rgba(255, 219, 1, 0.9);
    --nes-gelb-matt: rgba(255, 219, 1, 0.7);
    --nes-gelb-hauch: rgba(255, 219, 1, 0.2);
    --nes-text: #333;
    --nes-text-hell: #666;
    --nes-fuss-grund: #333;
    --nes-breite: 940px;
    --nes-schrift: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

    /* Cassiopeia-Variablen auf die Hausfarbe umbiegen */
    --cassiopeia-color-primary: #333;
    --cassiopeia-color-link: #333;
    --link-color: #333;
    --cassiopeia-color-hover: #000;
    --link-hover-color: #000;
    --cassiopeia-font-family-body: var(--nes-schrift);
    --cassiopeia-font-family-headings: var(--nes-schrift);
}


/* 3  Grundgeruest ======================================================== */

body.nes {
    font-family: var(--nes-schrift);
    color: var(--nes-text);
    background: #fff;
    border-top: 3px solid var(--nes-gelb);
    overflow-x: hidden;
}

.nes-innen {
    width: 90%;
    max-width: var(--nes-breite);
    margin-left: auto;
    margin-right: auto;
}

.nes a,
.nes a:hover {
    color: var(--nes-text);
}

/* Sprungmarke: unsichtbar, aber ohne die Seite breiter zu machen */
.nes-sprung {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    background: var(--nes-gelb);
    color: #000;
    z-index: 100;
}

.nes-sprung:focus {
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    left: 0;
    top: 0;
    padding: 10px 18px;
}

/*
 * Cassiopeia legt ueber .site-grid ein benanntes Raster (grid-template-areas)
 * und weist jedem Container einen Bereich zu. Das wird hier vollstaendig
 * abgeraeumt - sonst landen Seitenspalte und Inhalt uebereinander.
 */
.nes .site-grid {
    display: block;
    grid-template-areas: none;
}

.nes .site-grid > .grid-child {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    grid-area: auto;
    grid-column: auto;
    grid-row: auto;
}

/* Ohne Seitenspalte laeuft der Inhalt einfach durch (siehe oben, display:block) */

@media (min-width: 900px) {
    .nes.has-sidebar-left .site-grid,
    .nes.has-sidebar-right .site-grid {
        display: grid;
        grid-template-areas: none;
        gap: 40px;
        align-items: start;
    }

    .nes.has-sidebar-left .site-grid {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .nes.has-sidebar-right .site-grid {
        grid-template-columns: minmax(0, 1fr) 260px;
    }

    .nes.has-sidebar-left .container-sidebar-left,
    .nes.has-sidebar-right .container-component {
        grid-column: 1;
        grid-row: 1;
    }

    .nes.has-sidebar-left .container-component,
    .nes.has-sidebar-right .container-sidebar-right {
        grid-column: 2;
        grid-row: 1;
    }

    /* alles Uebrige nimmt die volle Breite ein */
    .nes.has-sidebar-left .container-top-a,
    .nes.has-sidebar-left .container-top-b,
    .nes.has-sidebar-left .container-bottom-a,
    .nes.has-sidebar-left .container-bottom-b,
    .nes.has-sidebar-right .container-top-a,
    .nes.has-sidebar-right .container-top-b,
    .nes.has-sidebar-right .container-bottom-a,
    .nes.has-sidebar-right .container-bottom-b {
        grid-column: 1 / -1;
    }
}

/* Seitenspalte: Liste der Unterbereiche unter "Aktuelles" */
.nes .container-sidebar-left,
.nes .container-sidebar-right {
    margin-bottom: 30px;
}

.nes .container-sidebar-left .card,
.nes .container-sidebar-right .card {
    background: transparent;
    border: 0;
}

.nes .container-sidebar-left h3,
.nes .container-sidebar-right h3 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nes-text-hell);
    margin: 0 0 10px;
}

.nes .container-sidebar-left ul.mod-menu,
.nes .container-sidebar-right ul.mod-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nes .container-sidebar-left ul.mod-menu > li > a,
.nes .container-sidebar-right ul.mod-menu > li > a {
    display: block;
    padding: 11px 16px;
    text-decoration: none;
    border-radius: 10px;
    line-height: 1.35;
}

.nes .container-sidebar-left ul.mod-menu > li > a:hover,
.nes .container-sidebar-left ul.mod-menu > li.current > a,
.nes .container-sidebar-left ul.mod-menu > li.active > a {
    background: var(--nes-gelb-hauch);
}


/* 4  Seitenkopf ========================================================== */

.nes-kopf {
    padding: 18px 0 12px;
}

.nes-kopf-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nes-marke img {
    max-width: 450px;
    width: 100%;
    height: auto;
    display: block;
}

.nes-marke .marke-text {
    font-size: 30px;
    font-weight: 400;
}

.nes-kopfdaten {
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
}

.nes-kopfdaten p {
    margin: 0 0 2px;
}

.nes-kopfdaten .material-icons {
    font-size: 16px;
    margin-right: 5px;
    position: relative;
    top: 3px;
}

.nes-kopfdaten .kopf-telefon,
.nes-kopfdaten #phone {
    font-size: 20px;
    color: var(--nes-gelb);
}

.nes-kopfdaten .kopf-telefon a {
    color: var(--nes-gelb);
    text-decoration: none;
}

.nes-kopfdaten .kopf-facebook,
.nes-kopfdaten #fb {
    font-size: 14px;
    font-weight: 700;
}

.nes-kopfdaten .kopf-facebook a {
    color: #385898;
    text-decoration: none;
}


/* 5  Navigation ========================================================== */

.nes-navigation {
    margin-bottom: 0;
}

.nes-navigation-innen {
    position: relative;
}

/*
 * flex-direction ausdruecklich setzen: Cassiopeia stellt .mod-menu von Haus
 * aus senkrecht (fuer Menues in Seitenspalten). Ohne diese Zeile stehen die
 * Hauptmenuepunkte untereinander statt nebeneinander.
 */
.nes-navigation ul.mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * font-size/line-height auf 0: zwischen <li> und <a> stehen im Joomla-Markup
 * Zeilenumbrueche. Die erzeugen sonst eine zusaetzliche Textzeile und machen
 * die Leiste rund 22 px hoeher als im Original.
 */
.nes-navigation ul.mod-menu > li {
    flex: 1 1 0;
    position: relative;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
}

.nes-navigation ul.mod-menu > li > a,
.nes-navigation ul.mod-menu > li > span.mod-menu__heading {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #444;
    font-size: 15px;
    line-height: 20px;
    text-transform: uppercase;
    padding: 15px 6px;
    font-weight: 300;
    transition: background 0.3s ease, color 0.3s ease;
    background: var(--nes-gelb-matt);
}

/* Wie frueher: die Punkte wechseln sich in der Deckkraft ab */
.nes-navigation ul.mod-menu > li:nth-child(odd) > a,
.nes-navigation ul.mod-menu > li:nth-child(odd) > span.mod-menu__heading {
    background: var(--nes-gelb-satt);
}

.nes-navigation ul.mod-menu > li > a:hover,
.nes-navigation ul.mod-menu > li > a:focus,
.nes-navigation ul.mod-menu > li.current > a,
.nes-navigation ul.mod-menu > li.active > a {
    background: var(--nes-gelb-hauch);
    color: #a08a00;
}

/* Untermenue */
.nes-navigation ul.mod-menu__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--nes-gelb);
    border-top: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    display: none;
    z-index: 30;
}

.nes-navigation ul.mod-menu > li:hover > ul.mod-menu__sub,
.nes-navigation ul.mod-menu > li:focus-within > ul.mod-menu__sub {
    display: block;
}

.nes-navigation ul.mod-menu__sub > li > a {
    display: block;
    padding: 11px 16px;
    font-size: 14px;
    text-decoration: none;
    color: #444;
}

.nes-navigation ul.mod-menu__sub > li > a:hover,
.nes-navigation ul.mod-menu__sub > li.current > a {
    background: var(--nes-gelb-hauch);
}

.nes-navigation-schalter {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--nes-gelb);
    border: 0;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
}

.nes-balken {
    display: block;
    width: 22px;
    height: 2px;
    background: #333;
    margin: 4px 0;
}

.nes-navigation-schalter .nes-balken + .nes-balken {
    margin-top: -2px;
}


/* 6  Titelbild =========================================================== */

/*
 * Klassisch: das Titelbild sass frueher im Inhaltsrahmen, nicht ueber die
 * ganze Fensterbreite. Modern laeuft es randlos durch (Abschnitt 10).
 */
.nes-titelbild {
    position: relative;
    width: 90%;
    max-width: var(--nes-breite);
    margin: 0 auto 50px;
}

.nes-titelbild img {
    width: 100%;
    height: auto;
    display: block;
}

.nes-titelbild h3 {
    position: absolute;
    right: 6%;
    bottom: 12%;
    margin: 0;
    max-width: 500px;
    text-align: right;
    font-size: 50px;
    font-weight: 300;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.nes-titelbild p {
    margin: 0;
}


/* 7  Inhalt und Typografie =============================================== */

.nes-inhalt {
    position: relative;
    padding-bottom: 40px;
    /* Sicherheitsnetz: die Zierbilder duerfen nie eine Querleiste erzeugen */
    overflow-x: hidden;
}

/*
 * Zierbilder wie auf der alten Website: zwei schmale Streifen (je 88x512),
 * die aussen buendig am Inhaltsrahmen kleben, und ein breiter Streifen
 * (526x94) mittig darunter. Sie haengen am gedachten Rahmen, nicht am
 * Fensterrand - sonst wandern sie auf grossen Bildschirmen nach aussen.
 */
.nes-zier {
    display: block;
    position: absolute;
    top: 40px;
    width: 88px;
    height: 512px;
    background-repeat: no-repeat;
    background-position: left top;
    pointer-events: none;
    z-index: 0;
}

.nes-zier-links {
    left: calc(50% - (var(--nes-breite) / 2) - 88px);
    background-image: url('../../../../../images/bg_content-li.jpg');
}

.nes-zier-rechts {
    left: calc(50% + (var(--nes-breite) / 2));
    background-image: url('../../../../../images/bg_content.jpg');
}

.nes-zier-unten {
    position: static;
    width: 526px;
    max-width: 100%;
    height: 94px;
    margin: 40px auto 0;
    background-image: url('../../../../../images/bg_content-un.jpg');
    background-position: center bottom;
}

.nes-inhalt .site-grid {
    position: relative;
    z-index: 1;
}

.nes main {
    line-height: 1.6;
}

.nes .page-header h1,
.nes .page-header h2,
.nes .com-content-article__title {
    text-align: center;
    font-size: 49px;
    line-height: 1.2;
    font-weight: 400;
    color: #000;
    margin: 30px 0 0;
}

.nes .page-header {
    border: 0;
    margin-bottom: 10px;
}

.nes main h2 {
    text-align: center;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--nes-gelb);
    margin-top: 5px;
}

.nes main h3 {
    font-size: 24px;
    font-weight: 400;
}

.nes main h4 {
    font-size: 21px;
    line-height: 30px;
    font-weight: 400;
}

.nes main h5 {
    color: var(--nes-gelb);
    font-weight: 400;
    font-size: 33px;
    line-height: 44px;
    margin: 2px 0 0;
}

.nes main hr {
    width: 90%;
    max-width: 300px;
    border: 0;
    border-top: 1px solid var(--nes-gelb);
    opacity: 1;
    margin: 0 auto 70px;
}

.nes main img {
    max-width: 100%;
    height: auto;
}

.nes main li {
    line-height: 2;
}

.nes .com-content-category-blog__item {
    margin-bottom: 50px;
}

.nes .com-content-category-blog__item .page-header h2 {
    font-size: 35px;
    color: var(--nes-gelb);
    text-align: left;
    margin-top: 0;
}

.nes .com-content-category-blog__item .page-header h2 a {
    color: var(--nes-gelb);
    text-decoration: none;
}

.nes .article-info,
.nes .com-content-article__info {
    font-size: 13px;
    color: var(--nes-text-hell);
    margin-bottom: 14px;
}

.nes .mod-breadcrumbs__wrapper {
    font-size: 13px;
}

.nes .mod-breadcrumbs {
    padding-left: 0;
}


/* 8  Bausteine aus den alten Beitragstexten ============================== */

#einklinkerbereich {
    display: flow-root;
}

#einklinkerbereich > div {
    width: 46%;
    float: left;
    padding: 2%;
    text-align: center;
    min-height: 520px;
}

#einklinkerbereich > div img {
    width: 100%;
    max-width: 350px;
    margin: auto;
}

#einklinkerbereich > div h4 {
    text-align: center;
}

#einklinkerbereich > div p {
    text-align: left;
}

.einklinker1 {
    background: rgba(0, 0, 0, 0.10);
}

.einklinker2 {
    background: rgba(0, 0, 0, 0.04);
}

.einklinker3 {
    background: rgba(0, 0, 0, 0.07);
}

.spaltelinks {
    width: 65%;
    float: left;
}

.spalterechts {
    width: 30%;
    float: right;
}

.accordspalt {
    width: 46%;
    float: left;
    padding: 2%;
}

.leistungsauflistung {
    list-style: circle;
    max-width: 40%;
    float: left;
    padding-left: 20px;
}

.patientenarbeit > div {
    width: 31%;
    float: left;
    margin: 1%;
}

.patientenarbeit > div img {
    width: 100%;
    height: 217px;
    object-fit: cover;
}

.patientenarbeit > div p {
    font-size: 12px;
    font-style: oblique;
}

.service {
    width: 46%;
    float: left;
    text-align: justify;
}

.service2 {
    width: 46%;
    float: right;
    padding: 2%;
    text-align: justify;
}

.floatbild {
    float: left;
    margin-right: 20px;
    margin-top: 15px;
    max-width: 150px;
}

.nes main .small {
    font-size: 85%;
}

/* Reste des alten Kontaktformulars, das schon frueher abgeschaltet war */
.nes .g-recaptcha:empty {
    display: none;
}

/*
 * Karte mit Einwilligung. Der Google-Maps-Rahmen wird erst auf Klick geladen,
 * vorher geht nichts an Google. Erzeugt von tools/bereinige.php, geschaltet
 * vom kleinen Skript am Ende der index.php.
 */
.nes-karte {
    background: var(--nes-flaeche, #f2f2ef);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: var(--nes-rund-gross, 14px);
    padding: 28px;
    text-align: center;
}

.nes-karte-titel {
    margin-top: 0;
    font-size: 17px;
}

.nes-karte-hinweis {
    max-width: 44rem;
    margin: 0 auto 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nes-text-hell);
}

.nes-karte-schalter {
    background: var(--nes-gelb);
    color: #222;
    border: 0;
    border-radius: var(--nes-rund, 8px);
    padding: 13px 26px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.nes-karte-schalter:hover,
.nes-karte-schalter:focus {
    background: #e6c500;
}

.variante-rund .nes-karte-schalter,
.variante-weich .nes-karte-schalter {
    border-radius: 999px;
}

.nes-karte-alternativ {
    margin: 14px 0 0;
    font-size: 14px;
}

.nes-karte iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: var(--nes-rund, 8px);
}

/* Ist die Karte geladen, verschwindet die Box um sie herum */
.nes-karte.ist-geladen {
    background: transparent;
    border: 0;
    padding: 0;
}


/* --- Karriereseite ------------------------------------------------------ */
/*
 * Bausteine der aus dem Web-Archiv geretteten Karriereseite. Die Klassen
 * stehen im Beitragstext, deshalb gehoeren die Regeln hierher.
 */

.kar-knopfzeile {
    text-align: center;
    margin: 30px 0 12px;
}

/* Steht unter der Schaltflaeche, solange kein Bewerbungsformular da ist */
.kar-knopf-hinweis {
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nes-text-hell);
    max-width: 34rem;
    margin: 0 auto 30px;
}

.kar-knopf {
    display: inline-block;
    background: var(--nes-gelb);
    color: #222 !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    padding: 16px 34px;
    border-radius: var(--nes-rund, 8px);
    transition: background 0.25s ease;
}

.kar-knopf:hover,
.kar-knopf:focus {
    background: #e6c500;
    color: #000 !important;
}

.variante-rund .kar-knopf,
.variante-weich .kar-knopf {
    border-radius: 999px;
}

.kar-galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 26px 0 34px;
}

.kar-galerie figure {
    margin: 0;
}

.nes .kar-galerie img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.kar-profile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.kar-profil {
    background: var(--nes-flaeche, #f5f5f2);
    border-radius: var(--nes-rund-gross, 14px);
    padding: 24px 28px;
}

.kar-profil h4 {
    margin-top: 0;
}

.kar-stimmen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin: 24px 0 36px;
}

.kar-stimme {
    margin: 0;
    background: var(--nes-flaeche, #f5f5f2);
    border-radius: var(--nes-rund-gross, 14px);
    padding: 26px;
    text-align: center;
}

/*
 * Zwei Klassen im Selektor, damit diese Regel die Variantenregel
 * ".variante-rund main img" ueberstimmt - sonst bekommen die Portraets deren
 * 26 Pixel Rundung statt eines Kreises.
 */
.nes .kar-stimme img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 999px;
    margin: 0 auto 14px;
    display: block;
    box-shadow: none;
}

.kar-stimme blockquote {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.65;
    text-align: left;
}

.kar-stimme blockquote p {
    margin: 0;
}

.kar-stimme blockquote p::before {
    content: '„';
}

.kar-stimme blockquote p::after {
    content: '“';
}

.kar-stimme figcaption {
    font-size: 14px;
    line-height: 1.45;
}

.kar-breitbild {
    width: 100%;
    height: auto;
}

.kar-hochbild {
    display: block;
    max-width: 380px;
    margin: 26px auto;
    height: auto;
}

.kar-anschrift {
    text-align: center;
    line-height: 1.7;
}


/* 9  Fussbereich ========================================================= */

.nes-fuss {
    background: var(--nes-fuss-grund);
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    padding: 30px 0;
    margin-top: 40px;
}

.nes-fuss a {
    color: #fff;
    text-decoration: none;
}

.nes-fuss a:hover {
    color: var(--nes-gelb);
    text-decoration: underline;
}

.nes-fuss .material-icons {
    color: var(--nes-gelb);
    font-size: 50px;
}

.nes-fuss h1,
.nes-fuss h2,
.nes-fuss h3 {
    color: #fff;
    font-size: 15px;
    margin: 0 0 10px;
}

.fussspalten {
    display: flow-root;
}

.spalte {
    width: 25%;
    float: left;
    padding-right: 15px;
}

.fuss-schluss {
    clear: both;
    opacity: 0.5;
    padding-top: 24px;
}

.nes-fuss ul.mod-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.nes-nach-oben {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--nes-gelb);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 40;
}


/* 10  Zeitgemaesse Varianten ============================================= */
/*
   Vier Stile teilen sich eine gemeinsame Grundlage und unterscheiden sich
   danach in Rundung, Flaeche und Weissraum:

     modern   aufgeraeumt, leicht gerundet
     weich    stark gerundete Bilder, weiche Schatten, viel Luft
     karten   Inhalt auf Karten, heller Hintergrund
     rund     sehr weiche Formen, Portraetbilder rund, Schaltflaechen als Pillen

   Die Klasse steht am <body> und kommt aus dem Templateparameter "variante".
*/

.variante-modern,
.variante-weich,
.variante-karten,
.variante-rund {
    --nes-breite: 1140px;
    --nes-fuss-grund: #23241f;
    --nes-rund: 10px;
    --nes-rund-gross: 14px;
    --nes-schatten: none;
    --nes-flaeche: #f5f5f2;
}

.variante-modern .nes-kopf,
.variante-weich .nes-kopf,
.variante-karten .nes-kopf,
.variante-rund .nes-kopf {
    padding: 26px 0 18px;
}

.variante-modern .nes-marke img,
.variante-weich .nes-marke img,
.variante-karten .nes-marke img,
.variante-rund .nes-marke img {
    max-width: 380px;
}

/* Navigation: durchgehende gelbe Leiste, aktiver Punkt unterstrichen */
.variante-modern .nes-navigation,
.variante-weich .nes-navigation,
.variante-karten .nes-navigation,
.variante-rund .nes-navigation {
    background: var(--nes-gelb);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.variante-modern .nes-navigation ul.mod-menu > li > a,
.variante-modern .nes-navigation ul.mod-menu > li > span.mod-menu__heading,
.variante-weich .nes-navigation ul.mod-menu > li > a,
.variante-weich .nes-navigation ul.mod-menu > li > span.mod-menu__heading,
.variante-karten .nes-navigation ul.mod-menu > li > a,
.variante-karten .nes-navigation ul.mod-menu > li > span.mod-menu__heading,
.variante-rund .nes-navigation ul.mod-menu > li > a,
.variante-rund .nes-navigation ul.mod-menu > li > span.mod-menu__heading {
    background: transparent;
    color: #2b2b2b;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 18px 8px;
    border-bottom: 3px solid transparent;
}

.variante-modern .nes-navigation ul.mod-menu > li:nth-child(odd) > a,
.variante-weich .nes-navigation ul.mod-menu > li:nth-child(odd) > a,
.variante-karten .nes-navigation ul.mod-menu > li:nth-child(odd) > a,
.variante-rund .nes-navigation ul.mod-menu > li:nth-child(odd) > a {
    background: transparent;
}

.variante-modern .nes-navigation ul.mod-menu > li > a:hover,
.variante-modern .nes-navigation ul.mod-menu > li.current > a,
.variante-modern .nes-navigation ul.mod-menu > li.active > a,
.variante-weich .nes-navigation ul.mod-menu > li > a:hover,
.variante-weich .nes-navigation ul.mod-menu > li.current > a,
.variante-weich .nes-navigation ul.mod-menu > li.active > a,
.variante-karten .nes-navigation ul.mod-menu > li > a:hover,
.variante-karten .nes-navigation ul.mod-menu > li.current > a,
.variante-karten .nes-navigation ul.mod-menu > li.active > a,
.variante-rund .nes-navigation ul.mod-menu > li > a:hover,
.variante-rund .nes-navigation ul.mod-menu > li.current > a,
.variante-rund .nes-navigation ul.mod-menu > li.active > a {
    background: rgba(0, 0, 0, 0.07);
    color: #000;
    border-bottom-color: #2b2b2b;
}

/* Titelbild randlos */
.variante-modern .nes-titelbild,
.variante-weich .nes-titelbild,
.variante-karten .nes-titelbild,
.variante-rund .nes-titelbild {
    width: 100%;
    max-width: none;
    margin: 0 0 56px;
    max-height: 62vh;
    overflow: hidden;
}

.variante-modern .nes-titelbild img,
.variante-weich .nes-titelbild img,
.variante-karten .nes-titelbild img,
.variante-rund .nes-titelbild img {
    object-fit: cover;
    height: 100%;
    max-height: 62vh;
}

.variante-modern .nes-titelbild h3,
.variante-weich .nes-titelbild h3,
.variante-karten .nes-titelbild h3,
.variante-rund .nes-titelbild h3 {
    font-size: 42px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Typografie */
.variante-modern .page-header h1,
.variante-modern .com-content-article__title,
.variante-weich .page-header h1,
.variante-weich .com-content-article__title,
.variante-karten .page-header h1,
.variante-karten .com-content-article__title,
.variante-rund .page-header h1,
.variante-rund .com-content-article__title {
    font-size: 38px;
    margin-top: 10px;
    letter-spacing: -0.01em;
}

.variante-modern main h2,
.variante-weich main h2,
.variante-karten main h2,
.variante-rund main h2 {
    font-size: 26px;
    color: #2b2b2b;
}

.variante-modern main h5,
.variante-weich main h5,
.variante-karten main h5,
.variante-rund main h5 {
    font-size: 26px;
    line-height: 34px;
    color: #2b2b2b;
}

.variante-modern main hr,
.variante-weich main hr,
.variante-karten main hr,
.variante-rund main hr {
    max-width: 120px;
    border-top-width: 3px;
    margin-bottom: 44px;
}

/* Bilder im Inhalt: gerundet, je nach Variante staerker */
.variante-modern main img,
.variante-weich main img,
.variante-karten main img,
.variante-rund main img {
    border-radius: var(--nes-rund);
    box-shadow: var(--nes-schatten);
}

/*
 * Logos bleiben eckig. Im Inhalt sind alle Fotos JPG und alle Logos PNG -
 * daher diese einfache Unterscheidung. Kommt spaeter ein Logo als JPG dazu,
 * bekommt es im Beitrag die Klasse "kein-rand".
 */
.variante-modern main img[src$=".png"],
.variante-weich main img[src$=".png"],
.variante-karten main img[src$=".png"],
.variante-rund main img[src$=".png"],
.nes main img.kein-rand {
    border-radius: 0;
    box-shadow: none;
}

/* Einklinker-Boxen als Raster */
.variante-modern #einklinkerbereich,
.variante-weich #einklinkerbereich,
.variante-karten #einklinkerbereich,
.variante-rund #einklinkerbereich {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.variante-modern #einklinkerbereich > div,
.variante-weich #einklinkerbereich > div,
.variante-karten #einklinkerbereich > div,
.variante-rund #einklinkerbereich > div {
    width: auto;
    float: none;
    min-height: 0;
    padding: 26px;
    background: var(--nes-flaeche);
    border-radius: var(--nes-rund-gross);
    text-align: left;
}

.variante-modern #einklinkerbereich > div img,
.variante-weich #einklinkerbereich > div img,
.variante-karten #einklinkerbereich > div img,
.variante-rund #einklinkerbereich > div img {
    margin-bottom: 14px;
}

.variante-modern #einklinkerbereich > div h4,
.variante-weich #einklinkerbereich > div h4,
.variante-karten #einklinkerbereich > div h4,
.variante-rund #einklinkerbereich > div h4 {
    text-align: left;
    font-size: 19px;
    line-height: 1.4;
}

.variante-modern .einklinker1,
.variante-modern .einklinker2,
.variante-modern .einklinker3,
.variante-weich .einklinker1,
.variante-weich .einklinker2,
.variante-weich .einklinker3,
.variante-karten .einklinker1,
.variante-karten .einklinker2,
.variante-karten .einklinker3,
.variante-rund .einklinker1,
.variante-rund .einklinker2,
.variante-rund .einklinker3 {
    background: var(--nes-flaeche);
}

.variante-modern .nes-zier,
.variante-weich .nes-zier,
.variante-karten .nes-zier,
.variante-rund .nes-zier {
    opacity: 0.5;
}

/* Fussbereich */
.variante-modern .nes-fuss,
.variante-weich .nes-fuss,
.variante-karten .nes-fuss,
.variante-rund .nes-fuss {
    padding: 46px 0 30px;
}

.variante-modern .nes-fuss .material-icons,
.variante-weich .nes-fuss .material-icons,
.variante-karten .nes-fuss .material-icons,
.variante-rund .nes-fuss .material-icons {
    font-size: 34px;
}

.variante-modern .fussspalten,
.variante-weich .fussspalten,
.variante-karten .fussspalten,
.variante-rund .fussspalten {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.variante-modern .spalte,
.variante-weich .spalte,
.variante-karten .spalte,
.variante-rund .spalte {
    width: auto;
    float: none;
    padding-right: 0;
}


/* --- „weich": stark gerundete Bilder, weiche Schatten, viel Luft --------- */

.variante-weich {
    --nes-rund: 20px;
    --nes-rund-gross: 24px;
    --nes-schatten: 0 10px 30px rgba(0, 0, 0, 0.10);
    --nes-flaeche: #f7f6f2;
}

.variante-weich .nes-titelbild {
    width: 92%;
    max-width: 1320px;
    margin: 8px auto 64px;
    border-radius: 28px;
}

.variante-weich .nes-titelbild img {
    border-radius: 28px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}

.variante-weich .nes-navigation {
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: none;
}

.variante-weich .nes-navigation ul.mod-menu > li > a {
    border-bottom-width: 3px;
}

.variante-weich .nes-navigation ul.mod-menu > li > a:hover,
.variante-weich .nes-navigation ul.mod-menu > li.current > a,
.variante-weich .nes-navigation ul.mod-menu > li.active > a {
    background: transparent;
    border-bottom-color: var(--nes-gelb);
    color: #000;
}

.variante-weich main {
    line-height: 1.75;
}

.variante-weich #einklinkerbereich {
    gap: 36px;
}

.variante-weich #einklinkerbereich > div {
    padding: 30px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.variante-weich .spaltelinks img,
.variante-weich .patientenarbeit img,
.variante-weich .floatbild {
    border-radius: 20px;
}

.variante-weich .nes-fuss {
    border-radius: 32px 32px 0 0;
}

.variante-weich .nes-nach-oben {
    border-radius: 50%;
}


/* --- „karten": Inhalt auf einer Karte, heller Grund --------------------- */

.variante-karten {
    --nes-rund: 14px;
    --nes-rund-gross: 18px;
    --nes-schatten: none;
    --nes-flaeche: #f2f2ee;
}

.variante-karten .nes-kopf,
.variante-karten .nes-inhalt {
    background: #f0efe9;
}

.variante-karten .nes-inhalt .nes-innen {
    background: #fff;
    border-radius: 22px;
    padding: 34px 44px 44px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
    margin-top: -46px;
    position: relative;
    z-index: 2;
}

.variante-karten .nes-titelbild {
    margin-bottom: 0;
}

.variante-karten .nes-zier {
    display: none;
}

.variante-karten .com-content-category-blog__item {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 24px 26px;
    margin-bottom: 26px;
}

.variante-karten #einklinkerbereich > div {
    border: 1px solid #ececec;
    background: #fff;
}


/* --- „rund": sehr weiche Formen, Portraetbilder rund -------------------- */

.variante-rund {
    --nes-rund: 26px;
    --nes-rund-gross: 30px;
    --nes-schatten: 0 8px 26px rgba(0, 0, 0, 0.10);
    --nes-flaeche: #f7f5ef;
}

.variante-rund .nes-titelbild {
    width: 94%;
    max-width: 1360px;
    margin: 10px auto 70px;
    border-radius: 40px;
}

.variante-rund .nes-titelbild img {
    border-radius: 40px;
}

.variante-rund .nes-navigation {
    background: transparent;
    box-shadow: none;
}

.variante-rund .nes-navigation ul.mod-menu {
    gap: 6px;
    padding: 6px;
    background: var(--nes-flaeche);
    border-radius: 999px;
}

.variante-rund .nes-navigation ul.mod-menu > li > a {
    border-radius: 999px;
    border-bottom: 0;
    padding: 13px 8px;
}

.variante-rund .nes-navigation ul.mod-menu > li > a:hover,
.variante-rund .nes-navigation ul.mod-menu > li.current > a,
.variante-rund .nes-navigation ul.mod-menu > li.active > a {
    background: var(--nes-gelb);
    border-bottom: 0;
}

.variante-rund .nes-navigation ul.mod-menu__sub {
    border-radius: 18px;
    border: 0;
    overflow: hidden;
    top: calc(100% + 6px);
}

/*
 * Kreisrund nur dort, wo es traegt: die Teamaufnahme und die kleinen Bilder
 * neben dem Text. Die Arbeitsfotos unter .patientenarbeit bleiben rechteckig
 * mit kraeftiger Rundung - als Kreis waeren sie liegende Ellipsen, weil ihr
 * Rahmen nicht quadratisch ist, und die Ecken der Arbeiten wuerden wegfallen.
 */
.variante-rund .spaltelinks img {
    border-radius: 999px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    max-width: 420px;
}

.variante-rund .patientenarbeit img {
    border-radius: 26px;
}

.variante-rund .floatbild {
    border-radius: 999px;
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.variante-rund #einklinkerbereich {
    gap: 34px;
}

.variante-rund #einklinkerbereich > div {
    padding: 32px;
    background: #fff;
    box-shadow: var(--nes-schatten);
}

.variante-rund .nes-fuss {
    border-radius: 40px 40px 0 0;
}

.variante-rund .container-sidebar-left ul.mod-menu > li > a,
.variante-weich .container-sidebar-left ul.mod-menu > li > a {
    border-radius: 999px;
}

.variante-rund .container-sidebar-left,
.variante-weich .container-sidebar-left {
    background: var(--nes-flaeche);
    border-radius: 24px;
    padding: 20px 14px;
}


/* 11  Schmale Bildschirme ================================================ */

@media (max-width: 1140px) {
    .nes-zier {
        display: none;
    }

    .spaltelinks {
        width: 58%;
    }

    .spalterechts {
        width: 38%;
    }
}

@media (max-width: 900px) {
    .nes-kopf-zeile {
        justify-content: center;
        text-align: center;
    }

    .nes-kopfdaten {
        text-align: center;
    }

    .nes-navigation-schalter {
        display: flex;
    }

    .nes-menue {
        display: none;
    }

    .nes-menue.ist-offen {
        display: block;
    }

    .nes-navigation ul.mod-menu {
        display: block;
        flex-direction: column;
        background: #fffbe0;
    }

    .nes-navigation ul.mod-menu > li > a,
    .nes-navigation ul.mod-menu > li > span.mod-menu__heading,
    .nes-navigation ul.mod-menu > li:nth-child(odd) > a {
        background: transparent;
        text-align: left;
        font-size: 17px;
        padding: 14px 18px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .nes-navigation ul.mod-menu__sub {
        position: static;
        display: block;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .nes-navigation ul.mod-menu__sub > li > a {
        padding-left: 38px;
    }

    .nes-titelbild h3,
    .variante-modern .nes-titelbild h3 {
        position: static;
        max-width: none;
        text-align: center;
        font-size: 26px;
        color: #333;
        text-shadow: none;
        padding: 16px 0 0;
    }

    .nes .page-header h1,
    .nes .page-header h2,
    .nes .com-content-article__title {
        font-size: 34px;
    }

    /*
     * Raster aufloesen - gilt fuer alle Varianten, nicht nur fuer eine.
     * (Frueher stand hier ".variante-modern #einklinkerbereich"; dadurch
     * blieben die spaeter dazugekommenen Stile zweispaltig und die Seite
     * bekam auf dem Handy eine Querleiste.)
     */
    .nes #einklinkerbereich,
    .nes .fussspalten {
        display: block;
        grid-template-columns: 1fr;
    }

    #einklinkerbereich > div {
        width: 100%;
        float: none;
        max-width: 520px;
        margin: 0 auto 24px;
        min-height: 0;
    }

    .spaltelinks,
    .spalterechts,
    .accordspalt,
    .service,
    .service2,
    .leistungsauflistung,
    .patientenarbeit > div,
    .spalte {
        width: 100%;
        max-width: 100%;
        float: none;
        padding: 0;
        margin: 0 0 18px;
        text-align: left;
    }

    /* Karten-Variante: auf schmalen Bildschirmen weniger Innenabstand */
    .variante-karten .nes-inhalt .nes-innen {
        padding: 22px 18px 28px;
        border-radius: 16px;
        margin-top: -24px;
    }

    .variante-rund .spaltelinks img,
    .variante-rund .patientenarbeit img {
        max-width: 260px;
        margin: 0 auto;
        display: block;
    }

    .floatbild {
        float: none;
        margin: 0 0 14px;
        max-width: 100%;
    }

    /* Karriereseite: alle Raster einspaltig */
    .nes .kar-galerie,
    .nes .kar-profile,
    .nes .kar-stimmen {
        display: block;
    }

    .kar-galerie figure,
    .kar-profil,
    .kar-stimme {
        margin-bottom: 18px;
    }

    .kar-galerie img {
        height: auto;
    }
}

@media (max-width: 530px) {
    .nes .page-header h1,
    .nes .page-header h2,
    .nes .com-content-article__title {
        font-size: 28px;
    }

    .nes main h2 {
        font-size: 22px;
    }

    .patientenarbeit > div img {
        height: auto;
    }
}