/* piotrowski.online, eigene Regeln zusätzlich zu den kopierten Divi-Stylesheets. Byggve, 30.10.2026.
   Nur, was die alte Seite per JavaScript tat oder was durch den Neubau neu ist (Mail-Knopf, Adresskarte,
   Bewertungs-Seitenleiste, Lightbox). Keine Gestaltungsänderungen. */

/* Sprunglink für Tastatur und Vorleseprogramme */
.skip-link.screen-reader-text { position: absolute; left: -9999px; top: 0; padding: 8px 16px; background: #546884; color: #fff; z-index: 100000; }
.skip-link.screen-reader-text:focus { left: 8px; top: 8px; }

/* Sanftes Scrollen wie et_smooth_scroll (das TOC-Stylesheet setzt auto, hier wieder smooth) */
html.js { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.js { scroll-behavior: auto; } }

/* Untermenü: sichtbar beim Überfahren, auch ohne JavaScript */
.et_pb_menu .nav li ul { visibility: hidden; opacity: 0; transition: all .2s ease-in-out; }
.et_pb_menu .nav li:hover > ul, .et_pb_menu .nav li.et-hover > ul, .et_pb_menu .nav li.et-show-dropdown > ul { visibility: visible; opacity: 1; }

/* Menü auf kleinen Bildschirmen: zu, bis der Knopf es öffnet */
.et_mobile_menu { display: none; }
/* Das Symbol bleibt beim offenen Menü der Burger, wie im Original. */

/* Einblend-Animationen (Divi fade). Erst mit JavaScript werden Elemente ausgeblendet, sonst bleiben sie sichtbar. */
html.et-animation-bereit [data-animation-style]:not(.et_is_animating):not(.et_had_animation) { opacity: 0; }
html.et-animation-bereit .et_is_animating.et-animiert-fade { animation-name: byggveFade; animation-fill-mode: both; }
@keyframes byggveFade { from { opacity: var(--et-start-opacity, 0); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.et-animation-bereit [data-animation-style] { opacity: 1 !important; animation: none !important; } }

/* Knopf nach oben */
.et_pb_scroll_top.et-pb-icon { opacity: 0; }
.et_pb_scroll_top.et-visible { opacity: 1; }

/* Inhaltsverzeichnis der Blogbeiträge: zugeklappt, Symbole, Sticky in der Spalte */
.pac_dtoc_main_container .pac_dtoc_closed_icon { display: none; }
.pac_dtoc_main_container.byggve-toc-zu .pac_dtoc_body_area { display: none; }
.pac_dtoc_main_container.byggve-toc-zu .pac_dtoc_opened_icon { display: none; }
.pac_dtoc_main_container.byggve-toc-zu .pac_dtoc_closed_icon { display: block; }
/* Die Unterlisten stehen seit dem 31.10.2026 im Eintrag darüber statt als Geschwister in der Liste (gültiges HTML, Codex-Befund,
   scripts/texte-anpassen.mjs). Zwei Regeln des Plugins greifen dadurch auf die Unterpunkte eines markierten Eintrags über
   (li.active div a: Farbe, li.active a:after: Strich). Die beiden Regeln hier stellen für die Unterpunkte den Zustand
   ohne Markierung wieder her, Farbe #000000 wie in der Plugin-Einstellung (.pac_divi_table_of_contents_0_tb_body li div a).
   Beim Überfahren gelten weiter die Hover-Regeln des Plugins. */
.pac_divi_table_of_contents_0_tb_body li.active li:not(.active) div:not(:hover), .pac_divi_table_of_contents_0_tb_body li.active li:not(.active) div span:not(:hover) + a { color: #000000 !important; }
.divi_table_of_contents li.active li:not(.active) span:not(:hover) + a:after { width: 0; }
/* Ein Divi-Stylesheet gibt jedem li margin-left 5px. Die Unterliste stand vorher neben dem Eintrag, jetzt darin, und rückte
   dadurch 5 px weiter ein und wurde 5 px breiter. Ausgleich auf beiden Seiten, gemessen gleich wie vorher. */
.divi_table_of_contents li > ul { margin-left: -5px; margin-right: 5px; }
/* Die Einträge ab Ebene 3 blendet das Plugin aus (ul.pac_dtoc_heading_level_3>li display none). Ihre leere Liste steht jetzt im
   Eintrag der Ebene 2, der eine Flex-Zeile ist, und würde dort 20 px Breite nehmen. Sie entfällt deshalb ganz. */
.pac_divi_table_of_contents_0_tb_body li > ul.pac_dtoc_heading_level_3, .pac_divi_table_of_contents_0_tb_body li > ul.pac_dtoc_heading_level_4, .pac_divi_table_of_contents_0_tb_body li > ul.pac_dtoc_heading_level_5, .pac_divi_table_of_contents_0_tb_body li > ul.pac_dtoc_heading_level_6 { display: none; }
@media (min-width: 981px) {
  .et_pb_row_0_tb_body { display: flex; align-items: stretch; }
  .et_pb_row_0_tb_body > .et_pb_column { float: none; }
  .et_pb_row_0_tb_body:after { display: none; }
  .pac_divi_table_of_contents.et_pb_sticky_module { position: sticky; top: 0; }
}

/* Blog-Karussell der Startseiten als Leiste mit CSS Scroll Snap (31.10.2026). Kein Skript misst eine Breite: drei Beiträge
   ab 981 px, zwei ab 768 px, darunter einer, 15 px Abstand wie bei Swiper. Wischen und Trackpad gehen nativ, die
   Pfeiltasten scrollen die fokussierte Leiste, die Rasterung springt auf den nächsten Beitrag. Ziehen mit der Maus macht
   seite.js (Punkt 7) über die Scrollposition. Die Scrollleiste ist ausgeblendet wie bei Swiper. */
.swiper-container { position: relative; overflow: hidden; z-index: 1; margin: 0 auto; list-style: none; padding: 0; }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; box-sizing: content-box; }
.swiper-slide { position: relative; width: 100%; height: 100%; }
.dipl_blog_slider .swiper-wrapper { display: flex; gap: 15px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.dipl_blog_slider .swiper-wrapper::-webkit-scrollbar { display: none; }
.dipl_blog_slider .swiper-slide { flex: 0 0 calc((100% - 30px) / 3); width: auto; margin: 0; scroll-snap-align: start; }
@media (max-width: 980px) { .dipl_blog_slider .swiper-slide { flex-basis: calc((100% - 15px) / 2); } }
@media (max-width: 767px) { .dipl_blog_slider .swiper-slide { flex-basis: 100%; } }
.dipl_blog_slider .swiper-wrapper.byggve-zieht { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.dipl_blog_slider .swiper-wrapper:focus-visible { outline: 2px solid #056183; outline-offset: 3px; }

/* Sichtbarer Fokusrahmen bei Tastaturbedienung (Codex-Befund, 31.10.2026). Das Divi-Stylesheet setzt :focus{outline:0}
   für alle Elemente. :focus-visible zeigt den Rahmen nur, wenn der Fokus per Tastatur kommt, nicht nach einem Mausklick.
   Linkfarbe der Seite, 2 px, mit Abstand, dazu ein weißer Ring direkt am Element, damit der Rahmen auch auf dunklen
   Flächen (Knöpfe, Fußzeile, Lightbox) sichtbar bleibt. Gilt für Links, Knöpfe, Menüeinträge, Formularfelder und die
   eigenen Bedienelemente (Mail-Knopf, Kopierknopf, Bewertungsetikett und -leiste, Lightbox, FAQ, Inhaltsverzeichnis,
   Menü auf dem Telefon, Knopf nach oben, Karussell). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible,
.rpi .rpi-x:focus-visible, .rpi a:focus-visible, .byggve-lightbox-x:focus-visible, .mobile_nav:focus-visible, .et_pb_scroll_top:focus-visible {
  outline: 2px solid #056183 !important; outline-offset: 3px !important; box-shadow: 0 0 0 2px #fff !important;
}
.skip-link.screen-reader-text:focus-visible { outline-offset: 0 !important; }
@media (prefers-reduced-motion: no-preference) { a:focus-visible, button:focus-visible { transition: none; } }

/* Überschriften, die wegen der Regel "eine h1 je Seite" die Ebene gewechselt haben, behalten ihr Aussehen */
#page-container h1.byggve-war-h2 { font-size: 26px; font-weight: bold !important; }
#page-container .et_pb_column_1_3 h1.byggve-war-h2, #page-container .et_pb_column_2_5 h1.byggve-war-h2 { font-size: 23px; }
#page-container h2.byggve-war-h1 { font-size: 30px; font-weight: bolder !important; padding: 0 0 10px !important; margin: 0 !important; } /* Divi gibt h2 in Blogbeiträgen 40 px Innenabstand, die frühere h1 hatte 0 und 10 px */
#page-container .et_pb_column_1_3 h2.byggve-war-h1, #page-container .et_pb_column_2_5 h2.byggve-war-h1 { font-size: 26px; }

/* Einleitungszeilen der Startseiten (/, /en/, /en/home/), die vor der h1 standen und deshalb keine Überschriften mehr sind
   (Codex-Befund Überschriftenfolge, 31.10.2026). Sie sind jetzt Absätze mit dem gemessenen Aussehen der alten h2, h5 und h6
   (Poppins war nie geladen, der Browser nahm wie im Original Helvetica oder Arial, seit 31.10.2026 steht es deshalb nicht mehr in der Liste, Regel R160). !important, weil Divi Absätze in
   Textmodulen selbst mit Innenabstand und Zeilenhöhe belegt. */
#page-container p.byggve-war-h2, #page-container p.byggve-war-h5, #page-container p.byggve-war-h6 { font-family: Helvetica, Arial, Lucida, sans-serif !important; line-height: 1em !important; text-transform: uppercase !important; letter-spacing: normal !important; margin: 0 !important; padding: 0 0 10px !important; }
#page-container p.byggve-war-h2 { font-size: 26px !important; font-weight: 700 !important; color: #546884 !important; }
#page-container .et_pb_column_1_3 p.byggve-war-h2, #page-container .et_pb_column_1_4 p.byggve-war-h2, #page-container .et_pb_column_1_5 p.byggve-war-h2, #page-container .et_pb_column_1_6 p.byggve-war-h2, #page-container .et_pb_column_2_5 p.byggve-war-h2 { font-size: 23px !important; }
#page-container p.byggve-war-h5 { font-size: 42px !important; font-weight: 700 !important; color: #546884 !important; }
#page-container p.byggve-war-h6 { font-size: 21px !important; font-weight: 500 !important; color: #585857 !important; }

/* Mail-Knopf mit Adresse und Kopierknopf, an der Stelle des alten Kontaktformulars */
.byggve-mail { padding-top: 10px; }
.byggve-mail .et_pb_button_module_wrapper { margin-bottom: 14px; }
.byggve-mail-adresse { font-size: 14px; line-height: 1.7em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } /* Kopierknopf neben der Adresse, bei schmaler Spalte bündig darunter (Alex, 31.10.2026) */
.byggve-mail-adresse a { word-break: break-all; }
.byggve-kopieren { margin: 0; padding: 4px 10px; font: inherit; font-size: 13px; line-height: 1.4; color: #546884; background: #fff; border: 1px solid #546884; border-radius: 3px; cursor: pointer; }
.byggve-kopieren:hover, .byggve-kopieren.ist-kopiert { background: #546884; color: #fff; }

/* Adresskarte statt Google-Karte auf der Kontaktseite: Kartenbild (2560 x 1200, angezeigt mit halber Größe, Ausschnitt rund
   20 km von Berlin), darüber unten links ein Kasten mit Name, Anschrift und Knöpfen, Quellenangabe unten rechts im Bild.
   Links und unten bleibt ein schmaler Streifen Karte sichtbar, damit der Kasten als Kasten wirkt (Wunsch Alex, 31.10.2026).
   Die Markierung liegt im Bild bei etwa x 800 von 1280, deshalb verdeckt der Kasten links sie nicht. */
.byggve-karte { position: relative; margin: 0 auto 24px; }
.byggve-karte-bild { display: block; width: 100%; height: 600px; object-fit: cover; object-position: center; } /* volle Breite und 600 px hoch wie die alte Google-Einbettung */
.byggve-karte-kasten { position: absolute; left: 32px; bottom: 32px; width: 340px; box-sizing: border-box; padding: 28px 28px 24px; background: #fff; border: 1px solid #dcdad4; border-radius: 4px; box-shadow: 0 4px 20px rgba(0,0,0,0.16); text-align: left; }
#page-container .byggve-karte-kasten p { margin: 0 0 6px; padding-bottom: 0; }
.byggve-karte-name { font-weight: 700; }
.byggve-karte-knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
.byggve-karte-knoepfe .byggve-karte-knopf { margin: 0 !important; text-align: left; }
.byggve-karte-quelle, #page-container .byggve-karte p.byggve-karte-quelle { position: absolute; right: 0; bottom: 0; margin: 0; padding: 2px 8px; background: rgba(255,255,255,0.8); font-size: 11px !important; line-height: 1.5 !important; color: #555 !important; }
@media (max-width: 980px) { .byggve-karte-bild { height: 480px; object-position: 60% center; } }
@media (max-width: 767px) {
  /* Auf dem Telefon liegt der Kasten unten über dem Bild, die Markierung bleibt durch den verschobenen Ausschnitt darüber sichtbar */
  .byggve-karte-bild { height: 580px; object-position: 62% center; }
  .byggve-karte-kasten { bottom: 64px; left: 16px; right: 16px; width: auto; padding: 20px; } /* unter dem Kasten bleibt ein Streifen Karte über der Quellenangabe */
  .byggve-karte-knoepfe { flex-direction: row; flex-wrap: wrap; gap: 10px 12px; }
}

/* Hauptüberschrift, die aussieht wie der fette Name darüber im Original (Codex-Befund, Alex 31.10.2026): auf Über mich
   der Name über dem Text, auf Kontakt der Name im Kasten über der Karte. Divi setzt h1 sonst groß und in Versalien. */
/* !important, weil die Divi-Stylesheets h1 in den Textmodulen selbst mit !important setzen */
#page-container h1.byggve-h1-schlicht { font-family: 'Open Sans', Arial, sans-serif !important; font-size: 20px !important; line-height: 1.5 !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: normal !important; color: #52563a !important; margin: 0 0 6px !important; padding: 0 !important; }
#page-container .byggve-karte-kasten h1.byggve-h1-schlicht { font-size: 18px !important; }

/* Blogliste als CSS-Grid statt Spaltenverteilung per Skript (31.10.2026). Vorher verteilte seite.js die Beiträge nach einem
   ::before-Inhalt auf schwebende Spalten, in Safari lag der letzte Beitrag dadurch über der Fußzeile. Spaltenbreiten,
   Abstände und Grenzen wie die Divi-Regeln für .column.size-1of3/-1of2/-1of1 im Abschnitt mit et_pb_gutters2:
   ab 981 px drei Spalten (31,333 %, Abstand 3 %), ab 768 px zwei (47,25 %, 5,5 %), darunter eine. Reihenfolge von
   links nach rechts, Zeile für Zeile. Der Abstand nach unten ist wie bei Divi ein Anteil der Kartenbreite, der letzte 30 px. */
.et_pb_blog_grid .et_pb_salvattore_content.byggve-raster { display: grid; grid-template-columns: repeat(3, 31.333%); column-gap: 3%; align-items: start; }
.et_pb_blog_grid .byggve-raster > article.et_pb_post { width: auto !important; margin: 0 0 9.574% !important; float: none !important; opacity: 1 !important; }
@media (min-width: 768px) and (max-width: 980px) {
  .et_pb_blog_grid .et_pb_salvattore_content.byggve-raster { grid-template-columns: repeat(2, 47.25%); column-gap: 5.5%; }
  .et_pb_blog_grid .byggve-raster > article.et_pb_post { margin-bottom: 16.21% !important; }
}
@media (max-width: 767px) {
  .et_pb_blog_grid .et_pb_salvattore_content.byggve-raster { grid-template-columns: 100%; column-gap: 0; }
  .et_pb_blog_grid .byggve-raster > article.et_pb_post { margin-bottom: 11.5% !important; }
}
.et_pb_blog_grid .byggve-raster > article.et_pb_post:last-child { margin-bottom: 30px !important; }
/* Das Blog-Modul trägt aus den Divi-Einstellungen max-height: 1000px. Chrome und Firefox ließen die Spalte trotzdem mit dem
   überstehenden Inhalt wachsen, Safari nicht, dort rückte die Fußzeile in die Liste (Befund Alex, 31.10.2026). */
.et_pb_blog_grid_wrapper { max-height: none !important; }

/* Titel der Karten in Bloglisten und Beitragsleisten: Silbentrennung nach der Sprache der Seite, damit ein langes Wort in
   Versalien nicht über die Karte ragt und kein Satzzeichen allein in einer Zeile steht (Befund Alex in Firefox,
   31.10.2026). Getrennt werden nur lange Wörter. */
.et_pb_blog_grid .entry-title, .dipl_blog_slider_post_title { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }

/* Impressum und Datenschutz: ruhige Überschriften, wie die alte Datenschutzerklärung, nur noch zurückhaltender
   (Alex, 31.10.2026). Der Rahmen .byggve-rechtstext kommt aus scripts/rechtstexte_einbauen.py. */
#page-container .byggve-rechtstext h1 { font-size: 24px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: 0.02em !important; margin: 0 0 18px !important; padding: 0 !important; }
#page-container .byggve-rechtstext h2 { font-size: 15px !important; line-height: 1.4 !important; font-weight: 600 !important; letter-spacing: 0.04em !important; margin: 26px 0 6px !important; padding: 0 !important; }
#page-container .byggve-rechtstext h3 { font-size: 14px !important; line-height: 1.4 !important; font-weight: 400 !important; letter-spacing: 0.04em !important; margin: 18px 0 4px !important; padding: 0 !important; }
#page-container .byggve-rechtstext p, #page-container .byggve-rechtstext li { font-size: 15px; }

/* Name in der Kopfzeile als Link zur Startseite, sieht aus wie vorher */
.byggve-name-link, .byggve-name-link:hover { color: inherit !important; text-decoration: none !important; }

/* Lightbox */
.byggve-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.85); cursor: zoom-out; }
.byggve-lightbox img { max-width: 94vw; max-height: 94vh; box-shadow: 0 0 30px rgba(0,0,0,.5); }
.byggve-lightbox-x { position: absolute; top: 10px; right: 16px; font-size: 40px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }

/* Bewertungs-Seitenleiste: Ergänzungen zum Plugin-Stylesheet. Das Plugin setzt Öffnen und Schließen per JavaScript. */
.byggve-rpi-sb { transform: translateX(var(--sb-x)); visibility: var(--visible); transition: transform .3s ease-in-out, visibility 0s .3s; z-index: 2147483000; }
.byggve-rpi-sb.rpi-open { transition: transform .3s ease-in-out, visibility 0s 0s; }
.byggve-rpi-sb .rpi-text { white-space: pre-line; }
.byggve-rpi-hinweis { margin: 16px 12px; font-size: 13px; line-height: 1.5; color: #555; }
/* Zeichen im Kopf der Bewertungsleiste: gelbes Zeichen aus dem Logo (public/bilder/lr-zeichen-gelb-192.png, aus
   Color-logo-no-background-1.png ausgeschnitten), ganz sichtbar und flach statt im Kreis mit Schatten (Alex, 31.10.2026) */
.byggve-rpi-sb .rpi-img-wrap::before { display: none; }
.byggve-rpi-sb .rpi-img { object-fit: contain; object-position: center; border-radius: 0; }
.byggve-rpi-anzahl { display: block; margin-top: 2px; font-size: 13px; color: #555; } /* Zahl der Bewertungen unter den Sternen */
.byggve-rpi-namenshinweis { flex-basis: 100%; margin: 10px 0 4px; font-size: 13px; line-height: 1.5; color: #555; text-align: left; } /* Hinweis zum Namen Ralph unter den Sternen */
.rpi a.byggve-rpi-tag { display: block; text-decoration: none; }
.byggve-rpi-overlay { background: transparent; } /* im Original dunkelt die Seitenleiste die Seite nicht ab */
.rpi a.byggve-rpi-tag .rpi-tag-cnt { color: #333; }
/* Text klein unter den Sternen, in der Schrift der Seite (Alex, 31.10.2026) */
.rpi a.byggve-rpi-tag .rpi-tag-cnt { flex-direction: column; row-gap: 2px; padding: 8px 16px 7px; border-radius: 20px; }
.rpi .byggve-rpi-zeile { display: flex; align-items: center; gap: 4px; }
.rpi .byggve-rpi-etikett { margin: 0; text-align: center; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: 0.02em; color: #056183; opacity: 0.75; }
.rpi .byggve-rpi-etikett::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23056183' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4'/%3E%3Cpath d='M10 2h4v4M14 2 7.5 8.5'/%3E%3C/svg%3E") no-repeat center / contain; } /* übliches Link-Symbol, Kasten mit Pfeil, als Bild aus data:, das erlaubt die CSP */
/* Linkfarbe der Seite (#056183), fett mit 75 % Deckkraft (Alex, 31.10.2026), mit Link-Symbol vorn als Link erkennbar */
.rpi a.byggve-rpi-tag:hover .byggve-rpi-etikett, .rpi a.byggve-rpi-tag:focus-visible .byggve-rpi-etikett { text-decoration: underline; }
#page-container ~ .rpi a, .byggve-rpi a { color: inherit; }
/* Knopf für die Übersetzung deutscher Bewertungen auf englischen Seiten, klein in der Linkfarbe der Seitenleiste wie der
   Kopierknopf. !important, weil das Plugin-Stylesheet alle Knöpfe in .rpi mit all:revert!important zurücksetzt. */
.rpi button.byggve-rpi-uebersetzen { display: inline-block !important; margin: 8px 0 0 !important; padding: 3px 9px !important; font-family: 'Open Sans', Arial, sans-serif !important; font-size: 12px !important; line-height: 1.4 !important; color: #056183 !important; background: #fff !important; border: 1px solid #056183 !important; border-radius: 3px !important; }
.rpi button.byggve-rpi-uebersetzen:hover { background: #056183 !important; color: #fff !important; }
.rpi button.byggve-rpi-uebersetzen[hidden] { display: none !important; }
.byggve-rpi-vermerk { display: block; margin-bottom: 4px; font-size: 12px; font-style: italic; color: #555; }

/* Fehlerseite (404), deutsch und darunter englisch (Text Alex, 31.10.2026). Über dem Text die Bleistiftzeichnung von Frida
   (hochkant 900 x 950), linksbündig wie der Text, 260 px breit, auf dem Telefon 200 px. */
.byggve-404 { padding: 58px 0 40px; }
.byggve-404-en { margin-top: 48px; }
#page-container .byggve-404-links { list-style: disc; margin: 0; padding: 0 0 23px 1.2em; line-height: 1.8em; }
#page-container .byggve-404-bild { display: block; margin: 0 0 28px; }
#page-container .byggve-404-bild img { display: block; width: 260px; max-width: 100%; height: auto; }
@media (max-width: 767px) { #page-container .byggve-404-bild img { width: 200px; } }

/* Menüpunkt mit Untermenü als button statt Link ohne Ziel (Regel R110, 31.10.2026). Die Divi-Regeln für den Link
   gelten über scripts/css-buendeln.mjs auch für ihn. Hier nur die Grundwerte des Browsers für button zurücksetzen,
   mit :where ohne Gewichtung, damit jede Divi-Regel davor Vorrang behält. */
:where(button.byggve-menue-knopf) { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; word-spacing: inherit; text-transform: inherit; text-align: inherit; text-indent: inherit; text-shadow: inherit; display: inline; cursor: pointer; }
/* Ein button mit display:block füllt die Zeile nicht von selbst wie ein Link. In der Kopie des Menüs für das Telefon steht
   der Menüpunkt als Block über die ganze Breite, deshalb hier die volle Breite (box-sizing border-box wie bei Divi). */
.et_mobile_menu button.byggve-menue-knopf { width: 100%; }

/* Name oben links: Divi gibt dem Textmodul auf Tablet und Telefon width 100 % und dazu margin-left 30 bzw. 20 px. Es ragt
   dadurch 30 bzw. 20 px über den rechten Rand, die ganze Seite ließ sich seitlich schieben, auch auf der alten Seite. Mit
   automatischer Breite endet es am Rand, der Name steht an derselben Stelle (31.10.2026). */
@media (max-width: 980px) { #page-container .et_pb_text_0_tb_header { width: auto !important; } }