/*
Theme Name: Zahnärzte im Carré
Theme URI: https://www.zahnarzt-echterdingen.de
Description: Child-Theme auf Basis von GeneratePress für die Zahnarztpraxis im Echterdinger Carré. Übernimmt Farbwelt und Typografie der Vorgängerseite, umgesetzt ohne Page Builder.
Author: Praxis Dr. Bilali & Dr. Kühn
Template: generatepress
Version: 1.0.0
Text Domain: zahnarzt-carre
*/

/* ------------------------------------------------------------------
   Schrift, lokal eingebunden (kein Abruf bei Google, DSGVO)
   ------------------------------------------------------------------ */

@font-face {
    font-family: "Open Sans";
    src: url("schriften/open-sans-latin-ext-italic.woff2") format("woff2");
    font-weight: 300 800;
    font-stretch: 100%;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Open Sans";
    src: url("schriften/open-sans-latin-italic.woff2") format("woff2");
    font-weight: 300 800;
    font-stretch: 100%;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    src: url("schriften/open-sans-latin-ext-normal.woff2") format("woff2");
    font-weight: 300 800;
    font-stretch: 100%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Open Sans";
    src: url("schriften/open-sans-latin-normal.woff2") format("woff2");
    font-weight: 300 800;
    font-stretch: 100%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Farbwelt der Praxis
   ------------------------------------------------------------------ */

:root {
    --praxis-tuerkis: #0097ab;
    --praxis-tuerkis-hell: #1abed4;
    --praxis-text: #575757;
    --praxis-text-leise: #999999;
    --praxis-kopf-text: #696969;
    --praxis-menue: #444444;
    --praxis-linie: #e4e8ea;
    --praxis-flaeche: #f5f8f9;
    --praxis-weiss: #ffffff;
}

/* ------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------ */

body {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--praxis-text);
    font-size: 14px;
    line-height: 1.7;
    background-color: var(--praxis-weiss);
}

/* Durchgehend weiße Fläche wie auf der bisherigen Seite, kein
   abgesetzter Inhaltskasten. */
.site-content .content-area,
.site-content .site-main,
.separate-containers .inside-article,
.separate-containers .site-main {
    background-color: var(--praxis-weiss);
    box-shadow: none;
}

/* Gemessen: zwischen türkisem Streifen und Inhalt liegen 60 Bildpunkte. */
.separate-containers .inside-article {
    padding: 32px 0 1rem;
}

/* Überschriften wie auf der bisherigen Seite: türkis, normale Strichstärke,
   Zeilenhöhe 1.7 wie im Fließtext, kein Abstand nach oben, 12px nach unten.
   Die Größen sind auf der Live-Seite gemessen, nicht geschätzt. */
h1, h2, h3, h4, h5, h6 {
    color: var(--praxis-tuerkis);
    font-weight: 400;
    line-height: 1.7;
    margin-top: 0;
    margin-bottom: 12px;
}

h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }

a {
    color: var(--praxis-tuerkis);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

a:hover, a:focus {
    color: var(--praxis-tuerkis-hell);
}

p { margin-bottom: 18px; }

/* GeneratePress vergibt Gutenberg-Blöcken einen eigenen Abstand nach unten
   (1.5em). Im Original stehen unter Absätzen 18 und unter Überschriften
   12 Bildpunkte. Die Auswahl ist bewusst so lang, weil sie die Regel von
   GeneratePress überstimmen muss. */
.site-content .entry-content > [class*="wp-block-"]:not(:last-child) {
    margin-bottom: 18px;
}

.site-content .entry-content > :is(h1, h2, h3, h4, h5, h6)[class]:not(:last-child) {
    margin-bottom: 12px;
}

/* GeneratePress streicht dem letzten Absatz den Abstand nach unten. Im
   Original bleibt er stehen, bei allen anderen Elementen dagegen nicht. */
.site-content .entry-content > p:last-child {
    margin-bottom: 18px;
}

.site-content .entry-content > *:last-child:not(p) {
    margin-bottom: 0;
}

/* Nach Aufzählungen steht im Original kein zusätzlicher Abstand. */
.entry-content ul,
.entry-content ol {
    margin-bottom: 0;
}

/* Aufzählungen stehen im Original enger als der Fließtext. */
.entry-content li { line-height: 18px; }

/* Die Lebenslauf-Tabellen der Arztseiten: 10 Bildpunkte Innenabstand,
   Inhalt mittig in der Zeile, keine Trennlinien. GeneratePress zeichnet
   sonst eine Linie unter jede Zelle, wodurch jede Zeile einen Bildpunkt
   höher wird. */
.entry-content table {
    margin-bottom: 18px;
}

.entry-content table td,
.entry-content table th {
    padding: 10px;
    border: 0;
    vertical-align: middle;
}

/* Das letzte Element einer Spalte gibt seinen Abstand nach unten nicht an
   die Spalte weiter, wie im Original. */
.wp-block-column > *:last-child {
    margin-bottom: 0;
}

img { height: auto; }

/* ------------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------------ */

/* Der Kopfbereich bleibt beim Scrollen oben stehen, wie auf der
   bisherigen Seite. Dort wird er per JavaScript auf "fixed" gesetzt;
   sticky erreicht dasselbe ohne Skript und ohne Sprung im Layout.
   Der türkise Balken darunter scrollt bewusst mit weg. */
/* Über dem Logo stehen im Original 20px Luft, die beim Scrollen
   verschwinden. Deshalb liegt der Abstand als Innenabstand im Kopfbereich
   und der Haftpunkt 20px höher: die leere Fläche wandert dann aus dem Bild,
   der Inhalt sitzt oben bündig. */
.site-header {
    background-color: var(--praxis-weiss);
    padding-top: 20px;
    position: sticky;
    top: -20px;
    z-index: 100;
}

.admin-bar .site-header {
    top: 12px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 26px;
    }
}

/* Logo links, Kontaktdaten rechts oben, Navigation rechts darunter.
   GeneratePress ordnet standardmäßig per Flex, hier braucht es ein
   Raster, weil rechts zwei Zeilen übereinander stehen. */
/* Gemessene Werte der bisherigen Seite: Logo 400x160 mit 25px Abstand nach
   oben, Kontaktblock oben bündig, Navigation 60px hoch ab 130px. */
.site-header .inside-header {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    grid-template-rows: 130px 60px;
    grid-template-areas:
        "logo kontakt"
        "logo navigation";
    align-items: start;
    gap: 0;
    padding: 0;
}

/* GeneratePress rückt Navigation und Kopfbereich zusätzlich ein.
   Im Original sitzt beides bündig an der Containerkante. */
.site-header .inside-header > .main-navigation .inside-navigation {
    padding-left: 0;
    padding-right: 0;
}

.site-header .site-logo {
    grid-area: logo;
    align-self: start;
    margin: 25px 0 0;
}

.site-logo img,
.site-header .header-image {
    max-width: 400px;
    width: 100%;
    height: auto;
}

.site-header .praxis-kontaktzeile {
    grid-area: kontakt;
    justify-self: end;
    align-self: start;
}

.site-header .main-navigation {
    grid-area: navigation;
    justify-self: end;
    align-self: start;
    max-width: 100%;
}

/* Kontaktdaten oben rechts.
   Wie im Original ein zweispaltiges Raster: links die Bezeichnungen
   untereinander, rechts die Werte. Die Öffnungszeiten sind darin noch
   einmal zweispaltig (Wochentag, Zeitspanne). */

.praxis-kontaktzeile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    margin: 0;
    font-size: 11px;
    line-height: 22.5px;
    color: var(--praxis-kopf-text);
    text-transform: uppercase;
}

.praxis-kontaktzeile dt,
.praxis-kontaktzeile dd {
    margin: 0;
}

/* Die Bezeichnungen sind fett, die Werte in normaler Stärke. */
.praxis-kontaktzeile dt {
    font-weight: 700;
}

.praxis-kontaktzeile dd {
    font-weight: 400;
}

.praxis-kontaktzeile__zeiten {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 3px;
}

.praxis-kontaktzeile a {
    color: var(--praxis-kopf-text);
    text-decoration: none;
}

.praxis-kontaktzeile a:hover {
    color: var(--praxis-tuerkis);
}

/* Türkiser Streifen mit Brotkrümel-Navigation */

.praxis-pfadleiste {
    background-color: var(--praxis-tuerkis-hell);
    color: var(--praxis-weiss);
}

.praxis-pfadleiste__innen {
    display: flex;
    align-items: center;
    /* Kein space-between: Zeilenumbrüche im Markup werden in einem
       Flex-Container zu eigenen Elementen und würden den Freiraum
       mitverteilen. Der Pfad wird stattdessen per Automatik-Abstand
       nach rechts geschoben. */
    justify-content: flex-start;
    gap: 0;
    min-height: 92px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Links der Seitenname, rechts der Pfad, beide weiß. */
.praxis-pfadleiste__titel {
    font-size: 24px;
    /* Die alte Seite lädt nur die Schnitte 400/600/700. Ihr
       font-weight:500 wird dort als 400 gerendert. Unsere variable
       Schrift kann 500 wirklich, was kräftiger aussieht. Deshalb 400. */
    font-weight: 400;
    line-height: 1.2;
    color: var(--praxis-weiss);
    display: inline-flex;
    align-items: center;
}

.praxis-pfadleiste__pfad {
    margin-left: auto;
    padding-left: 1rem;
}

/* Rank Math verpackt den Pfad in einen Absatz. Dessen Abstand nach unten
   würde die Leiste auf schmalen Geräten um 18 Bildpunkte höher machen. */
.praxis-pfadleiste__pfad p {
    margin: 0;
}

.praxis-pfadleiste__pfad,
.praxis-pfadleiste a {
    color: var(--praxis-weiss);
    font-size: 12px;
    text-decoration: none;
}

.praxis-pfadleiste a:hover {
    color: var(--praxis-weiss);
    text-decoration: underline;
}



.praxis-pfadleiste .separator {
    padding: 0 .4em;
    opacity: .75;
}

/* ------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------ */

/* Die Menüpunkte sind im Original dunkelgrau, nur der aktuelle Punkt
   ist türkis. Gemessen auf der bisherigen Seite: #444444. */
.main-navigation,
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
    background-color: var(--praxis-weiss);
    color: var(--praxis-menue);
}

.main-navigation .main-nav ul li a {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 60px;
    padding-left: 17px;
    padding-right: 17px;
}

/* Das Original hebt Menüpunkte nur farblich hervor, nie mit einer Fläche.
   GeneratePress legt sonst einen dunklen Balken darunter, deshalb ist die
   Auswahl hier länger als sonst nötig. */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current-menu-parent > a,
.main-navigation .main-nav ul li.menu-item-has-children:hover > a,
.main-navigation .main-nav ul li.menu-item-has-children.sfHover > a {
    background-color: transparent;
    color: var(--praxis-tuerkis);
}

/* Aufklappmenüs: weiße Fläche, 210 breit, oben eine türkise Linie.
   GeneratePress setzt für Untermenüs eigene Farben. Die müssen mit
   gleicher Spezifität überschrieben werden, sonst steht weiße Schrift
   auf weißem Grund. */
.main-navigation ul ul {
    background-color: var(--praxis-weiss);
    border: 0;
    border-top: 3px solid var(--praxis-tuerkis);
    box-shadow: 1px 1px 3px rgb(136, 136, 136);
    width: 210px;
}

/* Zwischen den Einträgen steht eine feine Linie. */
.main-navigation ul ul li {
    border-bottom: 1px solid #eeeeee;
}

.main-navigation .main-nav ul ul li a,
.main-navigation ul ul li a {
    color: var(--praxis-menue);
    background-color: var(--praxis-weiss);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.6;
    padding: 12px 20px;
    white-space: normal;
}

.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li:focus > a,
.main-navigation .main-nav ul ul li.current-menu-item > a {
    color: var(--praxis-tuerkis);
    background-color: var(--praxis-weiss);
}

/* Der kleine Pfeil an Menüpunkten mit Untermenü sitzt im Original
   innerhalb des rechten Abstands und macht den Punkt nicht breiter.
   GeneratePress stellt ihn sonst daneben, dadurch passte die Leiste
   nicht mehr in eine Zeile. */
.main-navigation .main-nav ul li a {
    position: relative;
}

.main-navigation .main-nav ul li a > .dropdown-menu-toggle {
    position: absolute;
    right: 1px;
    top: 0;
    padding: 0;
}

/* GeneratePress nimmt Punkten mit Untermenü den rechten Abstand, weil
   dort sonst der Pfeil stünde. Der Abstand wird zurückgegeben. */
.main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 17px;
}

/* Der Sprachumschalter hat im Original denselben Abstand wie die
   übrigen Menüpunkte. */
.main-navigation .main-nav ul li.lang-item a {
    padding-left: 17px;
    padding-right: 17px;
}

/* ------------------------------------------------------------------
   Startseiten-Hero (Ersatz für den früheren Slider)
   ------------------------------------------------------------------ */

.hero-praxis {
    position: relative;
    margin-bottom: 0;
    background-color: var(--praxis-flaeche);
    overflow: hidden;
    /* Der frühere Slider war 1100 auf 500 Bildpunkte groß. Wird der
       Platz schmaler, wuchs er verhältnismäßig höher: gemessen 295 auf
       154, 385 auf 201, 673 auf 351. Das entspricht 1100 zu 574, nach
       oben begrenzt auf die ursprünglichen 500. */
    /* Die Breite steht fest, sonst würde die Höhenbegrenzung das Bild
       am Schreibtisch schmaler machen statt es oben zu beschneiden. */
    width: 100%;
    aspect-ratio: 1100 / 574;
    max-height: 500px;
}

.hero-praxis__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.hero-praxis__bild.ist-sichtbar {
    opacity: 1;
}

.hero-praxis__text {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 4vw, 2.5rem);
    transform: translateX(-50%);
    width: min(92%, 46rem);
    text-align: center;
    color: var(--praxis-weiss);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}

.hero-praxis__text h2,
.hero-praxis__text h3 {
    color: var(--praxis-weiss);
    margin: 0 0 .3em;
}

.hero-praxis__text p:last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hero-praxis__bild {
        transition: none;
    }
}

/* ------------------------------------------------------------------
   Team
   ------------------------------------------------------------------ */

.team-mitglied {
    text-align: center;
    margin-bottom: 2rem;
}

.team-mitglied img {
    border-radius: 3px;
    width: 100%;
    max-width: 260px;
}

.team-mitglied h3 {
    font-size: 1.05rem;
    margin: .9em 0 .15em;
}

.team-mitglied .team-funktion {
    color: var(--praxis-text-leise);
    font-size: .92rem;
    margin: 0;
}

/* Mehrspaltige Seiten laufen unter 768 Bildpunkten untereinander.
   Der frühere Seitenbaukasten brach an derselben Stelle um. */
@media (max-width: 767px) {
    .wp-block-columns {
        flex-wrap: wrap !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ------------------------------------------------------------------
   Inhaltsbereich
   ------------------------------------------------------------------ */

.entry-content > *:first-child { margin-top: 0; }

.wp-block-image figcaption {
    color: var(--praxis-text-leise);
    font-size: .9rem;
}

/* Der Seitenname steht in der türkisen Leiste, im Inhalt wäre er doppelt. */
.page .entry-header .entry-title,
.page-header-content .entry-title {
    display: none;
}

/* ------------------------------------------------------------------
   Teamseite
   ------------------------------------------------------------------ */

/* Aufbau und Maße wie auf der bisherigen Seite: Bild über die volle
   Spaltenbreite, darunter Name und Funktion. */
/* Der Bildkasten ist im Original zwei Bildpunkte höher als das Bild. */
.team_image {
    line-height: 0;
}

.team_image img {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin-bottom: 2px;
    border: 1px solid var(--praxis-linie);
}

/* Im Original bleibt unter der Funktionsbezeichnung eine leere Zeile. */
.team_info {
    min-height: 15px;
}

/* Zwischenraum zwischen den Spalten wie im Original. Die Breite ergibt
   sich von selbst: zwei Ärzte je 535, drei Mitarbeiterinnen je 347. */
.entry-content .team-zeile {
    gap: 30px;
}

/* Reihen mit weniger als drei Personen behalten die Spaltenbreite der
   vollen Reihe, statt sich auf die ganze Breite zu ziehen. */
.entry-content .team-zeile--mittig > .wp-block-column,
.entry-content .team-zeile--links > .wp-block-column {
    flex: 0 0 calc((100% - 60px) / 3);
}

.team_member_name {
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    color: #444444;
}

.team_member_position {
    font-size: 11px;
    font-weight: 600;
    line-height: 30px;
    color: var(--praxis-tuerkis);
}

.team_info {
    font-size: 13px;
    line-height: 15px;
}

.team-lebenslauf {
    margin-top: 9px;
}

/* Abstände zwischen den Reihen, gemessen auf der bisherigen Seite.
   Die lange Auswahl ist nötig, um die Blockabstände zu überstimmen. */
.site-content .entry-content > .team-zeile:not(:last-child) {
    margin-bottom: 103px;
}

.site-content .entry-content > .team-zeile--aerzte:not(:last-child) {
    margin-bottom: 70px;
}

.site-content .entry-content > .team-zeile:last-child {
    margin-bottom: 102px;
}

/* Die erste Reihe der Mitarbeiterinnen steht mittig, die letzte linksbündig. */
.team-zeile--mittig {
    justify-content: center;
}

.team-zeile--links .wp-block-column:last-child:not(:only-child) {
    margin-right: auto;
}

/* ------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------ */

/* Gemessene Werte der bisherigen Seite: Felder 44 Bildpunkte hoch,
   Schriftgröße 13, hellgrauer Grund, kein sichtbarer Rahmen. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    height: 44px;
    padding: 12px;
    background-color: #f7f7f7;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: inherit;
    font-size: 13px;
    color: var(--praxis-text);
}

.wpcf7 textarea {
    height: 206px;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
    outline: 2px solid var(--praxis-tuerkis);
    outline-offset: 1px;
    border-color: var(--praxis-tuerkis);
}

.wpcf7 input[type="submit"] {
    width: auto;
    height: 37px;
    background-color: var(--praxis-tuerkis);
    color: var(--praxis-weiss);
    border: 0;
    border-radius: 2px;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
    background-color: var(--praxis-tuerkis-hell);
}

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

.site-footer .footer-widgets {
    background-color: #f5f5f5;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Im Original ist die gesamte Fußzeile in hellem Grau gehalten,
   Überschriften unterscheiden sich nur durch die Schriftstärke. */
.site-footer .footer-widgets,
.site-footer .footer-widgets p,
.site-footer .footer-widgets li,
.site-footer .footer-widgets .textwidget {
    color: var(--praxis-text-leise);
    font-size: 14px;
    line-height: 1.7;
}

.site-footer .footer-widgets h1,
.site-footer .footer-widgets h2,
.site-footer .footer-widgets h3,
.site-footer .footer-widgets h4,
.site-footer .footer-widgets .widget-title,
.site-footer .footer-widgets strong,
.site-footer .footer-widgets b {
    color: var(--praxis-text-leise);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    margin: 0 0 .2em;
    text-transform: none;
}

.site-footer .footer-widgets a {
    color: var(--praxis-tuerkis);
}

.site-footer .footer-widgets a:hover {
    color: var(--praxis-tuerkis-hell);
}

/* Rückruf-Formular: Eingabefeld und Knopf sind im Original beide
   215 auf 44 Bildpunkte groß. */
.site-footer .wpcf7 input[type="submit"] {
    width: 215px;
    height: 44px;
    padding: 0 1rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.site-footer .wpcf7 input[type="tel"],
.site-footer .wpcf7 input[type="text"] {
    width: 215px;
    height: 44px;
    padding: 0 .8rem;
    background-color: var(--praxis-weiss);
    font-size: 13px;
    color: var(--praxis-text);
}

/* ------------------------------------------------------------------
   Sprachumschalter (Polylang)
   ------------------------------------------------------------------ */

.pll-parent-menu-item img,
.lang-item img {
    vertical-align: baseline;
}

/* ------------------------------------------------------------------
   Startseiten-Eintrag als Haus-Symbol
   ------------------------------------------------------------------ */

/* Das Haus-Symbol ist im Original 10 Bildpunkte breit. */
.main-navigation .menu-item-home > a .menue-haus {
    width: 10px;
    height: 10px;
    vertical-align: -1px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------
   Gleiche Breite für Kopf, Inhalt und Fußzeile
   ------------------------------------------------------------------ */

/* GeneratePress gibt dem Inhaltsbereich einen zusätzlichen
   Innenabstand, wodurch er schmaler wird als Kopf- und Fußbereich.
   Auf schmalen Geräten bleibt ein Rand erhalten. */
.one-container .site-content,
.site-content {
    padding-left: 0;
    padding-right: 0;
    /* Gemessen: über und unter dem Inhalt stehen je 60 Bildpunkte. */
    padding-top: 60px;
    padding-bottom: 60px;
}

/* GeneratePress rückt den Inhalt zusätzlich vom (hier ausgeblendeten)
   Seitentitel ab. Der Abstand steckt bereits im Innenabstand oben. */
.site-content .entry-content {
    margin-top: 0;
}

/* Die zehn Seiten, die früher mit dem Seitenbaukasten gebaut waren, hatten
   über und unter dem Inhalt zusätzlichen Freiraum. Er stammt aus den Zeilen
   des Baukastens und gehört zum gewohnten Bild, deshalb ist er hier je
   Seite nachgebildet. Die Werte sind auf der bisherigen Seite gemessen.
   Inhalt geht dabei keiner verloren: Wer den Leerraum nicht mehr möchte,
   kann diesen Block ersatzlos streichen, die Seiten werden dann kürzer. */

/* Startseite deutsch und englisch */
.page-id-18 .site-content {
    padding-bottom: 117px;
}

.page-id-862 .site-content {
    padding-bottom: 110px;
}

/* Kontaktseiten */
.page-id-139 .site-content {
    padding-top: 130px;
    padding-bottom: 295px;
}

.page-id-879 .site-content {
    padding-top: 130px;
    padding-bottom: 282px;
}

/* Arztseiten */
.page-id-48 .site-content {
    padding-bottom: 128px;
}

.page-id-50 .site-content {
    padding-bottom: 143px;
}

/* Bildergalerien: dort standen die beiden Reihen 140 Bildpunkte auseinander. */
.page-id-310 .site-content,
.page-id-872 .site-content {
    padding-top: 130px;
    padding-bottom: 130px;
}

.page-id-310 .entry-content > .wp-block-columns:not(:last-child),
.page-id-872 .entry-content > .wp-block-columns:not(:last-child) {
    margin-bottom: 140px;
}

/* Oberhalb von 1150 Bildpunkten trägt der 1100 breite Bereich den
   Abstand, die Fußzeile braucht dort keinen eigenen Rand. */
.site-footer .footer-widgets {
    padding-left: 0;
    padding-right: 0;
}

/* Unterhalb von 1150 Bildpunkten nutzt die alte Seite die volle Breite
   und hält 40 Bildpunkte Abstand zum Rand. Darüber steht der Inhalt in
   einem 1100 breiten, mittigen Bereich ohne Randabstand. */
@media (max-width: 1150px) {
    .site.grid-container {
        max-width: none;
    }

    .one-container .site-content,
    .site-content {
        padding-left: 40px;
        padding-right: 40px;
    }

    .praxis-pfadleiste__innen {
        max-width: none;
        padding-left: 40px;
        padding-right: 40px;
    }

    .site-footer .footer-widgets {
        padding-left: 40px;
        padding-right: 40px;
    }

    .site-footer .footer-widgets-container {
        max-width: none;
    }
}

/* Die alte Seite stellt die Fußzeile schon ab 980 Bildpunkten vierspaltig,
   GeneratePress erst ab 1025. Betrifft vor allem Tablets im Querformat. */
@media (min-width: 980px) and (max-width: 1024px) {
    .site-footer .inside-footer-widgets > div {
        float: left;
        width: 25%;
        margin-bottom: 0;
    }

    .site-footer .inside-footer-widgets > div:nth-child(odd) {
        clear: none;
    }
}

/* Stehen die vier Blöcke untereinander, lag zwischen ihnen bisher
   ein Abstand von 50 Bildpunkten. */
@media (max-width: 767px) {
    .site-footer .inside-footer-widgets > div {
        margin-bottom: 50px;
    }

    .site-footer .inside-footer-widgets > div:last-child {
        margin-bottom: 0;
    }
}

/* ------------------------------------------------------------------
   Schmale Geräte

   Die alte Seite wechselt bei 979 Bildpunkten Fensterbreite auf die
   Handy-Ansicht. Gemessene Werte dort bei 390 Bildpunkten:
   Kopfbereich 159 hoch (20 Luft plus 139), Logo 347,5 breit bündig am
   linken Rand, Menüsymbol 24x28 auf halber Höhe, 40 vom rechten Rand,
   Kontaktzeile ausgeblendet, Kopfbereich scrollt mit (nicht haftend).
   ------------------------------------------------------------------ */

@media (max-width: 979px) {
    /* Auf schmalen Geräten läuft der Kopfbereich mit nach oben weg.
       Sonst bliebe von 844 Bildpunkten Höhe zu wenig für den Inhalt. */
    .site-header {
        position: static;
        top: auto;
    }

    .site-header .inside-header {
        display: block;
        position: relative;
        max-width: none;
        height: 139px;
        padding: 0;
    }

    /* Telefon und Öffnungszeiten stehen hier nicht im Kopf. Sie
       wiederholen sich in der Fußzeile, so war es auch bisher. */
    .site-header .praxis-kontaktzeile {
        display: none;
    }

    .site-header .site-logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 347.5px;
        max-width: 100%;
        margin: 0;
    }

    .site-logo img,
    .site-header .header-image {
        max-width: 100%;
    }

    .site-header .main-navigation {
        position: static;
        max-width: none;
    }

    .main-navigation .inside-navigation {
        padding: 0;
    }

    /* Menüsymbol: drei Striche, 24 breit, 2 stark, 8 Abstand.
       Das entspricht dem Symbol der alten Seite (Font Awesome, 28px). */
    .main-navigation .menu-toggle {
        position: absolute;
        top: 56px;
        right: 40px;
        z-index: 600;
        width: 24px;
        height: 28px;
        min-height: 0;
        margin: 0;
        padding: 0;
        background-color: transparent;
        line-height: 0;
    }

    .main-navigation .menu-toggle .mobile-menu {
        display: none;
    }

    .main-navigation .menu-toggle::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 0;
        width: 24px;
        height: 2px;
        background-color: var(--praxis-menue);
        box-shadow:
            0 8px 0 var(--praxis-menue),
            0 16px 0 var(--praxis-menue);
    }

    /* Bei geöffnetem Menü wird aus den Strichen ein Kreuz. Anders als
       früher bleibt das Symbol bedienbar und schließt das Menü wieder.
       Es rückt dabei in den freien Rand oben im Menü, damit es keinen
       Menüpunkt überdeckt, und bleibt beim Blättern stehen. */
    .main-navigation.toggled .menu-toggle {
        position: fixed;
        top: 18px;
        right: 20px;
    }

    .main-navigation.toggled .menu-toggle::before {
        top: 13px;
        box-shadow: none;
        transform: rotate(45deg);
    }

    .main-navigation.toggled .menu-toggle::after {
        content: "";
        position: absolute;
        top: 13px;
        left: 0;
        width: 24px;
        height: 2px;
        background-color: var(--praxis-menue);
        transform: rotate(-45deg);
    }

    /* Das Menü fährt von rechts ein, weiß, 80 Prozent breit.
       Die alte Seite tat das mit einem eigenen Zusatzprogramm. */
    .main-navigation .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 80%;
        z-index: 500;
        padding-top: 60px;
        background-color: var(--praxis-weiss);
        box-shadow: -1px 0 3px rgba(0, 0, 0, .2);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .4s ease;
    }

    .main-navigation.toggled .main-nav {
        transform: translateX(0);
    }

    .main-navigation .main-nav ul {
        width: auto;
    }

    .main-navigation .main-nav ul li {
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }

    .main-navigation .main-nav ul li a,
    .main-navigation .main-nav ul ul li a,
    .main-navigation ul ul li a {
        display: block;
        padding: 10px 10px 10px 20px;
        background-color: transparent;
        color: rgba(0, 0, 0, .6);
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
        text-transform: none;
        white-space: normal;
    }

    .main-navigation .main-nav ul li:hover > a,
    .main-navigation .main-nav ul li.current-menu-item > a {
        background-color: transparent;
        color: var(--praxis-tuerkis);
    }

    /* Untermenüs klappen an Ort und Stelle auf, eingerückt. */
    .main-navigation ul ul {
        position: static;
        width: auto;
        border: 0;
        box-shadow: none;
        background-color: var(--praxis-flaeche);
    }

    .main-navigation .main-nav ul ul li a,
    .main-navigation ul ul li a {
        padding-left: 34px;
    }

    /* Die Schaltfläche zum Aufklappen braucht eine Fläche zum Antippen. */
    .main-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 50px;
    }

    .main-navigation .main-nav ul li a > .dropdown-menu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 46px;
        padding: 0;
        line-height: 46px;
        text-align: center;
    }

    /* Türkiser Streifen: Seitenname und Pfad stehen untereinander.
       Gemessen: 30 Luft oben, Name 24/31,2 mit 31 Abstand darunter,
       Pfad 20 nach oben gezogen, 25 Abstand darunter. */
    .praxis-pfadleiste__innen {
        display: block;
        max-width: none;
        min-height: 0;
        padding: 30px 40px 0;
    }

    .praxis-pfadleiste__titel {
        display: block;
        padding-bottom: 31px;
        line-height: 1.3;
    }

    .praxis-pfadleiste__pfad {
        display: block;
        margin: -20px 0 0;
        padding: 0 0 25px;
        /* 23,4 statt 23: so ist die Leiste genauso hoch wie bisher (121). */
        line-height: 23.4px;
    }

    /* Im Rückruf-Formular der Fußzeile nutzen Feld und Knopf hier die
       volle Spaltenbreite, nicht die 215 Bildpunkte vom Schreibtisch. */
    .site-footer .wpcf7 input[type="tel"],
    .site-footer .wpcf7 input[type="text"],
    .site-footer .wpcf7 input[type="submit"] {
        width: 100%;
    }

    /* Angemeldete Redakteure haben oben die WordPress-Leiste. Das Menü
       beginnt darunter, damit das Kreuz zum Schließen erreichbar bleibt.
       Für Besucher ändert sich dadurch nichts. */
    .admin-bar .main-navigation .main-nav {
        top: 32px;
    }

    .admin-bar .main-navigation.toggled .menu-toggle {
        top: 50px;
    }
}

/* Unter 782 Bildpunkten ist die WordPress-Leiste 46 statt 32 hoch. */
@media screen and (max-width: 782px) {
    .admin-bar .main-navigation .main-nav {
        top: 46px;
    }

    .admin-bar .main-navigation.toggled .menu-toggle {
        top: 64px;
    }
}

/* ------------------------------------------------------------------
   Tablets im Hochformat (genau 768 Bildpunkte)

   Die alte Seite stellt Spalten ab 768 nebeneinander. WordPress bricht
   Blockspalten erst unter 782 um, GeneratePress die Fußzeile unter 769.
   Beides wird hier auf den bisherigen Umbruchpunkt zurückgestellt.
   ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: nowrap !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 0 !important;
        flex-grow: 1;
    }

    /* Kurze Reihen der Teamseite behalten ihre Drittelbreite. */
    .entry-content .team-zeile--mittig > .wp-block-column,
    .entry-content .team-zeile--links > .wp-block-column {
        flex: 0 0 calc((100% - 60px) / 3) !important;
    }
}

@media (min-width: 768px) and (max-width: 768px) {
    .site-footer .inside-footer-widgets > div {
        float: left;
        width: 50%;
    }

    .site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets {
        margin-left: -40px;
    }

    .site-footer .footer-widgets .footer-widgets-container .inner-padding {
        padding-left: 40px;
    }
}