/*
Theme Name: NARWAL
Description: Eigenes Theme der NARWAL GmbH. Schlank, ohne Baukasten, ohne externe Aufrufe.
             Schrift und Logo liegen im Theme, nichts wird von fremden Servern geladen.
Author: NARWAL GmbH
Version: 1.0
Text Domain: narwal
*/


  :root{
    --ton:#1F3A5F; --ton-hell:#2E5484; --text:#2b2b2b; --grau:#636b76;
    --linie:#e5e7eb; --flaeche:#F4F6F8;
  }

  /* ── Schrift ─────────────────────────────────────────────────────────
     🚫 KEINE Google Fonts, KEIN externer Aufruf. Carlito ist eine freie
        Schrift (SIL Open Font License) mit denselben Maßen wie Calibri und
        steht hier direkt im Dokument.

     Hintergrund: Das Landgericht München hat 2022 einen Betreiber verurteilt,
     weil beim Laden einer Google-Schrift die IP des Besuchers in die USA ging.
     Seither gibt es Massenabmahnungen. Wer nichts von außen lädt, ist außen vor
     (Roy 08.09.2026: „hatte da schon Spaß mit möchtegern Abmahnern").

     ⚠ Auf die gebrauchten Zeichen eingedampft, 640 KB je Schnitt wurden 19 KB. */
  @font-face{font-family:"UP Sans";font-style:normal;font-weight:400;
    font-display:swap;
    src:url(assets/carlito-400.woff2) format("woff2")}
  @font-face{font-family:"UP Sans";font-style:normal;font-weight:700;
    font-display:swap;
    src:url(assets/carlito-700.woff2) format("woff2")}
  *{box-sizing:border-box}
  body{margin:0;font-family:"UP Sans",Calibri,"Segoe UI",system-ui,sans-serif;
       color:var(--text);line-height:1.6;background:#fff}
  .band{max-width:1120px;margin:0 auto;padding:0 24px}

  /* ⚠ Zwei Zeilen im Kopf: oben Logo und Telefon auf einer Höhe, darunter
     das Menü. Vorher stand das Telefon in derselben Zeile wie das Menü und
     brach dort um (Roy 08.09.2026). */
  /* ── Barrierefreiheit ────────────────────────────────────────────────
     Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28.06.2025 und
     verweist auf WCAG 2.1 Stufe AA. Kleinstunternehmen sind ausgenommen,
     aber diese drei Punkte kosten nichts und sind schlicht gutes Handwerk. */

  /* 🚫 Der Fokusrahmen wird NICHT abgeschaltet. Wer mit der Tastatur
     bedient, sieht sonst nicht, wo er steht. Einer der häufigsten
     Verstöße überhaupt. */
  a:focus-visible,button:focus-visible,input:focus-visible,
  textarea:focus-visible,label:focus-visible,summary:focus-visible{
    outline:3px solid var(--ton);outline-offset:2px;border-radius:2px}

  /* Sprungmarke: die erste Tabulatortaste führt zum Inhalt, nicht durch
     acht Menüpunkte. */
  .sprung{position:absolute;left:-9999px;top:0;background:var(--ton);color:#fff;
          padding:12px 20px;z-index:100;text-decoration:none;font-weight:600}
  .sprung:focus{left:8px;top:8px}

  .fuss{padding:26px 0;font-size:.85rem;color:var(--grau);
        border-top:1px solid var(--linie);background:var(--flaeche)}
  .fuss-links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:12px}
  .fuss-links a{color:var(--ton);text-decoration:none;font-weight:600;
                padding:6px 0;display:inline-block;min-height:32px}
  .fuss-links a:hover{text-decoration:underline}
  .fuss-adresse{margin:0 0 10px;line-height:1.7}
  .fuss-adresse a{color:var(--ton)}
  .fuss-hinweis{margin:0;font-size:.78rem;color:#6f6963}

  .kopf{border-bottom:1px solid var(--linie);padding:12px 0}
  .kopf-oben{display:flex;align-items:center;gap:16px;margin-bottom:10px}
  /* Der Firmenname darf schrumpfen, das Telefon nicht. Sonst schiebt der
     Name das Telefon am Handy aus dem Bild. */
  .kopf-oben .logo{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .kopf-tel{margin-left:auto;text-align:right;font-size:.9rem;line-height:1.35;
            white-space:nowrap}
  /* ⚠ Kein Flex mehr. Der Kopf hat zwei Zeilen: oben Logo und Telefon,
     darunter das Menü. Als Flex-Container bekam die obere Zeile nur die
     Breite ihres Inhalts, und das Telefon rutschte nicht an den Rand. */
  .kopf .band{position:relative}
  /* ⚠ Das Logo von NARWAL ist breit (266×76), nicht quadratisch wie im
     Muster von m1. Feste Breite UND Höhe quetschen es zusammen
     (Roy 10.09.2026). Deshalb nur die Höhe setzen, die Breite folgt. */
  .kopf img.logo-bild{height:52px;width:auto;max-width:110px;display:block;
                      object-fit:contain}
  .logo{font-weight:700;color:var(--ton);font-size:1.28rem;line-height:1.25}
  .logo span{font-weight:400;color:var(--grau);font-size:.86rem;display:block}
  .kopf-tel a{color:var(--ton);font-weight:700;text-decoration:none;font-size:1.05rem}
  .kopf-tel span{display:block;color:var(--grau);font-size:.78rem}

  .menue{margin-left:auto}
  .m-schalter{display:none}
  .m-knopf{display:none;cursor:pointer;padding:9px 12px;border:1px solid var(--linie);
           border-radius:5px;font-size:1.2rem;line-height:1;color:var(--ton);
           min-height:44px;min-width:44px;align-items:center;justify-content:center}
  .m-liste{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
  .m-liste a{color:var(--grau);text-decoration:none;font-size:1rem;
             padding:6px 0;display:inline-block}
  .m-liste a:hover,.m-liste a.hier{color:var(--ton);font-weight:600}

  /* Menüpunkte, die es noch nicht gibt. Sichtbar, damit man den Umfang sieht,
     aber ohne Verweis, damit niemand ins Leere klickt. */
  .bald{color:#6f6963;font-size:.92rem;padding:6px 0;display:inline-block;
        cursor:default}
  .m-liste .bald::after{content:" ·";color:#9a938c}

  .titel{padding:40px 0 28px;background:var(--flaeche);
         border-bottom:1px solid var(--linie)}
  .titel h1{margin:0 0 8px;font-size:1.75rem;color:var(--ton);font-weight:700;
            letter-spacing:-.02em;text-wrap:balance}
  .titel p{margin:0;font-size:1.12rem;max-width:60ch;color:var(--text)}
  .krume{font-size:.82rem;color:var(--grau);margin:0 0 12px}
  .krume a{color:var(--grau)}

  .punkte{padding:40px 0 10px}
  .punkte ul{list-style:none;padding:0;margin:0;display:grid;
             grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 40px}
  .punkte li{padding-left:26px;position:relative}
  .punkte li::before{content:"";position:absolute;left:0;top:.55em;width:11px;
                     height:11px;border-radius:2px;background:var(--ton)}
  .punkte b{display:block;font-size:1.04rem;margin-bottom:2px}
  .punkte span{color:var(--grau);font-size:.95rem}

  .bilder{padding:26px 0 40px}
  .bilder h2{font-size:1.25rem;color:var(--ton);margin:0 0 14px;font-weight:600}
  .galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
           gap:14px}
  .platz{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#efeae8,
          #efeae8 12px,#e6dfdc 12px,#e6dfdc 24px);border:1px solid var(--linie);
         border-radius:5px;display:flex;align-items:center;justify-content:center;
         color:#9c8b86;font-size:.85rem;text-align:center;padding:14px}
  /* ── Bild im Kasten ──────────────────────────────────────────────────
     Der Kasten gibt das Format vor, nicht das Bild. Es füllt ihn ganz aus und
     wird dabei beschnitten. Damit bleibt das Raster ruhig, egal ob ein Foto
     hochkant, quer, 4:3 oder 16:9 ist.
     Welcher Ausschnitt bleibt, entscheidet der Bildmittelpunkt
     (`object-position`), den Roy im Editor zurechtzieht. Nicht der Zufall.
     🚫 Nie verzerren. Lieber ein Ausschnitt als ein in die Breite gezogenes
        Gebäude. */
  .platz{position:relative;overflow:hidden}
  .platz img{position:absolute;inset:0;width:100%;height:100%;
             object-fit:cover;display:block}
  .platz:has(img){background:none;border-color:transparent;padding:0}
  /* Die Beschreibung liegt auf dem Bild. Der dunkle Verlauf hält sie auch auf
     einem hellen Foto lesbar: weiss auf 72 Prozent Schwarz sind 7,6:1, die
     Stufe AA verlangt 4,5:1. */
  .platz .bu-in{position:absolute;left:0;right:0;bottom:0;z-index:1;
                padding:26px 12px 10px;text-align:left;font-weight:400;
                font-size:.82rem;line-height:1.45;color:#fff;
                background:linear-gradient(to top,rgba(0,0,0,.72),
                           rgba(0,0,0,.72) 62%,rgba(0,0,0,0));
                text-shadow:0 1px 2px rgba(0,0,0,.55)}
  .bilder .bu{font-size:.82rem;color:var(--grau);margin-top:8px}

  .tun{background:var(--flaeche);border-top:1px solid var(--linie);
       border-bottom:1px solid var(--linie);padding:34px 0}
  /* ⚠ Für die Überschriften IN den Karten gab es keine Regel, sie liefen
     auf den Browser-Standard von 24 px. Vier davon nebeneinander haben den
     Kopf erschlagen. Roy 10.09.2026: der Kopf ginge so unter. In einer
     Karte ist das eine Zwischenüberschrift, keine Hauptsache. */
  /* ⚠ Für `.raster` und `.karte` gab es keine Regeln, die Klassen standen
     nur im HTML. Dadurch klebten Text und Überschrift zusammen und zwischen
     den Karten fehlte der Abstand. Roy hat das am 10.09.2026 mit <br> von Hand
     nachgebaut, was am Handy die Anordnung zerlegt hätte. Jetzt macht es CSS:
     enger Abstand von der Überschrift zum Text, deutlicher Abstand zur
     nächsten Karte. */
  /* ⚠ Drei Spalten, so wie Roy es geprüft hat. Eine Messung in Chromium sah
     hier Löcher im Blocksatz, das war ein Messfehler: dem Prüfbrowser fehlen
     die deutschen Trennmuster, deshalb trennt er nicht und dehnt stattdessen.
     Roy hat es am 10.09.2026 in Firefox angesehen, dort wird sauber getrennt
     und der Satz steht ruhig. 🚫 Typografie NICHT in Chromium beurteilen. */
  /* Zwei Raster-Varianten, je nach Inhalt zu wählen (Roy 10.09.2026):
       .raster        die kleine: so viele Spalten wie passen, ab 280 px.
                      Gut für kurze Stichpunkte und ungerade Anzahlen.
       .raster.paar   zwei mal zwei. Gibt bei VIER Karten ein geschlossenes
                      Rechteck statt „drei oben, eine allein unten", und der
                      breitere Satz liest sich ruhiger.
     Am Handy ist beides einspaltig. */
  .raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
          gap:26px 40px}
  .raster.paar{grid-template-columns:repeat(2,1fr)}
  @media (max-width:720px){
    .raster.paar{grid-template-columns:1fr}
  }
  .karte{max-width:62ch}

  /* Blocksatz mit Silbentrennung. Roy 10.09.2026: „damit die Enden nicht zu
     krass gefranst aussehen, notfalls muss man ein Wort trennen damit der Satz
     in der Zeile nicht zu stark gedehnt wird."

     ⚠ Blocksatz OHNE Silbentrennung reisst Löcher in den Satz. Erst beides
     zusammen ergibt einen ruhigen Rand. `hyphens:auto` braucht die
     Sprachangabe im html-Element, die steht oben als lang="de".

     🚫 Am Handy bleibt es linksbündig. In einer schmalen Spalte passen zu
     wenige Wörter in die Zeile, dort wird jede Lücke sofort zum Loch. */
  .karte p, .tun p, .tun li, .titel .unter{
    text-align:justify;
    hyphens:auto;
    -webkit-hyphens:auto;
    text-wrap:pretty;
  }

  .karte p{margin:0}
  .karte p + p{margin-top:8px}

  /* Überschriften in den Karten sind verlinkt, sollen aber nicht wie ein
     klassischer Link aussehen. Roy 10.09.2026: „ohne Unterstreichung und die
     Farbe behalten." Erst beim Zeigen darauf kommt ein dezenter Hinweis, damit
     erkennbar bleibt, dass es weitergeht. */
  .karte h2 a{color:inherit;text-decoration:none}
  .karte h2 a:hover,
  .karte h2 a:focus-visible{text-decoration:underline;text-underline-offset:3px}
  .karte:hover h2 a{color:var(--ton-hell)}

  .karte h2{font-size:1.08rem;color:var(--ton);margin:0 0 6px;font-weight:600;
            line-height:1.3}
  .tun h2{font-size:1.25rem;color:var(--ton);margin:0 0 12px;font-weight:600}
  /* Aufzählungen bündig mit dem Fließtext. Roy 10.09.2026: „dass die
     Punkte in der gleichen Linie mit dem normalen Text liegen."
  
     Der Browser rückt Listen um 40 px ein und setzt den Punkt davor.
     Hier steht der Punkt genau auf der Textkante, und die Folgezeilen
     hängen darunter eingerückt, damit der Satz seine Kante behält. */
  .liste{margin:0;padding-left:0;max-width:62ch;list-style:none}
  /* ⚠ Mit `text-indent` sass der KASTEN auf der Textkante, das Zeichen selbst
     hing links davor. Roy 10.09.2026: „Die Listenzeichen liegen jetzt leider
     links von der sonstigen Schrift." Deshalb eigene Zeichen im Textfluss:
     sie stehen exakt auf der Kante, Folgezeilen hängen darunter eingerückt. */
  .liste li{margin-bottom:8px;padding-left:1.25em;position:relative}
  /* ⚠ Der Aufzählungspunkt wird GEZEICHNET, nicht als Zeichen gesetzt. Die
     Schrift ist auf die gebrauchten Zeichen eingedampft und enthält U+2022
     nicht (133 Zeichen, geprüft am 10.09.2026). Der Browser griff dafür zu
     einem Ersatzzeichen, das wie ein Fähnchen aussah. Ein Kreis aus CSS ist
     von der Schrift unabhängig und wird ausserdem nicht mit vorgelesen. */
  .liste li::before{content:"";position:absolute;left:.15em;top:.62em;
    width:6px;height:6px;border-radius:50%;background:var(--ton)}
  .liste.zahlen{counter-reset:schritt}
  .liste.zahlen li{padding-left:1.9em;counter-increment:schritt}
  .liste.zahlen li::before{content:counter(schritt) ".";font-weight:600}
  /* ⚠ Diese Regel ist spezifischer als `.liste` und hat der nummerierten
     Liste 20 px Einzug zurückgegeben. Deshalb hier ausdrücklich ohne. */
  .tun ol{margin:0;padding-left:0;max-width:62ch}
  .tun .liste{padding-left:0}
  .tun li{margin-bottom:7px}

  .schluss{background:var(--ton);color:#fff;padding:36px 0;text-align:center}
  .schluss h2{margin:0 0 8px;font-size:1.35rem;font-weight:600}
  .schluss p{margin:0 0 18px;opacity:.9}
  .ruf{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ton);
       text-decoration:none;padding:13px 24px;border-radius:4px;font-size:1.05rem;
       font-weight:600}
  .zweitweg{display:block;margin-top:14px;font-size:.88rem;opacity:.9}
  .zweitweg a{color:#fff;text-decoration:underline}
  /* Die Pflichtverweise wandern in den blauen Block. Roy 10.09.2026: „dann
     wird der Fuß nicht so ein Brocken." Unterstrichen, weil hier Link-Optik
     ausdrücklich gewünscht ist (siehe Doku §9a). */
  .rechtliches{display:block;margin-top:18px;padding-top:14px;
               border-top:1px solid rgba(255,255,255,.25);
               font-size:.82rem;opacity:.85}
  .rechtliches a{color:#fff;text-decoration:underline;text-underline-offset:2px}

  /* ⚠ Link-Optik nur an zwei Stellen: im Fußteil und im Kontaktformular.
     Roy 10.09.2026: „im Fuß und beim Kontaktformular eine Unterstreichung für
     die Optik, aber sonst keine Link-Optik." Überall sonst behalten Verweise
     Farbe und Gewicht des Textes und zeigen sich erst beim Draufzeigen. */
  .fuss a{color:var(--ton);text-decoration:underline;text-underline-offset:2px}
  .fuss a:hover,.fuss a:focus-visible{color:var(--ton-hell)}
  .fuss{padding:22px 0;font-size:.82rem;color:var(--grau);text-align:center;
        border-top:1px solid var(--linie)}
  .hinweis{background:#fffbeb;border-bottom:1px solid #fde68a;color:#92400e;
           padding:9px 16px;font-size:.82rem;text-align:center}

  @media (max-width:860px){
    .menue{margin-left:0}
    .m-knopf{display:inline-flex}
    .m-liste{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
             border-bottom:1px solid var(--linie);flex-direction:column;gap:0;
             padding:6px 24px 14px;box-shadow:0 8px 20px rgba(0,0,0,.08);z-index:20}
    .m-schalter:checked ~ .m-liste{display:flex}
    .m-liste a{padding:13px 0;border-bottom:1px solid #f3f4f6;font-size:1rem;
               min-height:44px}
  }
  @media (max-width:520px){
      /* Schmale Spalte: Blocksatz würde hier Löcher reissen. */
      .karte p, .tun p, .tun li, .titel .unter{text-align:left}
    /* ⚠ Auf schmalen Geräten wird der Kopf kleiner statt breiter. Vorher
       liess sich die Seite quer schieben, im Browser gemessen. */
    .kopf-oben{gap:10px}
    /* Auch hier nur die Höhe, sonst quetscht es das breite Logo.
       Dieselbe Gewichtung wie oben, sonst greift die Regel nicht. */
    .kopf .kopf-oben img.logo-bild{height:40px;width:auto;max-width:80px}
    .kopf-oben .logo{font-size:1.08rem}
    .kopf-oben .logo span{font-size:.72rem}
    .kopf-tel a{font-size:.95rem}
    .kopf-tel span{font-size:.7rem}
  }
  @media (max-width:640px){
    .titel{padding:28px 0 22px}
    .titel h1{font-size:1.6rem}
  }


/* ── Kontaktformular ───────────────────────────────────────────────
   ⚠ Diese Regeln standen nur im Entwurf der Kontaktseite. Ohne sie stehen
     die Felder unformatiert nebeneinander und die Spam-Falle .honig wird
     sichtbar (Roy 10.09.2026: "schaut leider grauenhaft aus"). */
.formular h2{font-size:1.25rem;color:var(--ton);margin:0 0 16px;font-weight:600}
.formular form{max-width:560px}
.feld{margin-bottom:16px}
.feld label{display:block;font-weight:600;margin-bottom:4px;font-size:.95rem}
.feld input,.feld textarea,.feld select{width:100%;box-sizing:border-box;font-size:16px;
    padding:11px 12px;border:1px solid #b8b0ad;border-radius:4px;
    font-family:inherit;background:#fff;min-height:48px}
.feld textarea,.feld select{width:100%;box-sizing:border-box;font-size:16px;
    padding:11px 12px;border:1px solid #b8b0ad;border-radius:4px;
    font-family:inherit;background:#fff;min-height:48px}
.hilfe{display:block;font-size:.83rem;color:var(--grau);margin-top:3px}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pflicht{font-size:.82rem;color:var(--grau);margin:10px 0 0}
.ruf-gross{display:inline-flex;align-items:center;gap:10px;background:var(--ton);
    color:#fff;text-decoration:none;padding:15px 28px;border-radius:4px;
    font-size:1.25rem;font-weight:700;border:none;cursor:pointer;
    font-family:inherit;min-height:52px}
.ruf-gross:hover{background:var(--ton-hell)}

/* ── Kontaktseite: Aufbau ────────────────────────────────────────────
   Der Entwurf löste diese Stellen über Attribute direkt im HTML. Damit
   waren sie nicht pflegbar und fehlten, sobald der Inhalt in WordPress lag. */
.formular{padding:34px 0 40px;background:#fff}
.formular .vorspann{max-width:62ch;margin:0 0 22px}
.formular form{max-width:560px}
.feld select{appearance:auto}

.kontaktdaten{background:var(--flaeche);border-top:1px solid var(--linie);
              border-bottom:1px solid var(--linie);padding:30px 0}
.kontaktzeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
              gap:26px 40px;align-items:start}
.kontaktzeile b{display:block;margin-bottom:4px}
.tel-gross{color:var(--ton);font-weight:700;font-size:1.15rem;text-decoration:none}
.tel-gross:hover,.tel-gross:focus-visible{text-decoration:underline;text-underline-offset:3px}
.anschrift{line-height:1.7}

.dsgvo{max-width:62ch;font-size:.86rem;color:var(--grau);margin:4px 0 18px}
.dsgvo a{color:var(--ton)}

/* Rahmen um Auswahl und Textfeld dunkel genug für den Kontrastwert 3:1 */
.feld input,.feld textarea,.feld select{border-color:#767676}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--ton)}

/* ── Rückmeldung nach dem Absenden ───────────────────────────────────
   Steht an der Stelle des Formulars beziehungsweise darüber. Farbe allein
   trägt die Aussage nicht, der Text sagt es ebenso (WCAG 1.4.1). */
.meldung{max-width:62ch;padding:14px 16px;border-radius:5px;margin:0 0 22px;
         border:1px solid;line-height:1.6}
.meldung.gut{background:#eef6ee;border-color:#2f6d3a;color:#1e4a26}
.meldung.schlecht{background:#fdf0ef;border-color:#9c2b23;color:#7a231d}
.meldung a{color:inherit;font-weight:600}

/* ── Mietgeräte ──────────────────────────────────────────────────────
   Zweispaltig: links die technischen Daten, rechts Bild und Preis.
   Auf dem Handy untereinander. */
.geraeteblock{border-top:1px solid var(--linie)}
.geraet{padding:22px 0;border-bottom:1px solid var(--linie)}
.geraet:last-child{border-bottom:none}
.geraet h3{font-size:1.08rem;color:var(--ton);margin:0 0 10px;font-weight:600;line-height:1.3}
.geraet-inhalt{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px 34px;align-items:start}
@media (max-width:820px){ .geraet-inhalt{grid-template-columns:1fr} }

.geraet-daten{font-size:.94rem}
.geraet-daten ul{margin:0;padding-left:1.1em}
.geraet-daten ul ul{margin:2px 0 6px}
.geraet-daten li{margin-bottom:2px}
.geraet-daten p{margin:0 0 8px}

.geraet-bild{margin:0 0 12px}
.geraet-bild img{width:100%;height:auto;display:block;border-radius:4px;border:1px solid var(--linie)}

.geraet-preis{background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;
              padding:12px 14px;font-size:.9rem;line-height:1.55}
.geraet-preis b{display:block;color:var(--ton);margin-bottom:5px}
.geraet-preis span{display:block}

/* Nicht verfügbare Geräte bleiben sichtbar, werden aber zurückgenommen.
   Die Aussage trägt der Text, nicht die Farbe allein (WCAG 1.4.1). */
.geraet.belegt h3{color:var(--grau)}
.hinweis-belegt{display:inline-block;background:#fdf0ef;border:1px solid #9c2b23;color:#7a231d;
                border-radius:4px;padding:3px 9px;font-size:.82rem;margin:0 0 10px}

/* Tabellen, die im Editor angelegt werden. Der Kern-Baustein bringt
   ohne das Standard-Stylesheet keine eigenen Linien mit. */
.geraet-daten table,.tun table{border-collapse:collapse;width:100%;margin:0 0 10px;font-size:.92rem}
.geraet-daten th,.geraet-daten td,.tun th,.tun td{
  border:1px solid var(--linie);padding:6px 9px;text-align:left;vertical-align:top}
.geraet-daten th,.tun th{background:var(--flaeche);font-weight:600;color:var(--ton)}
.tabellenrolle{overflow-x:auto}
/* Der Nettobetrag steht als eigene, zurückgenommene Zeile unter dem
   Bruttopreis. Eingeschoben zerriss er die Preisangabe. */
.geraet-preis .netto{display:block;color:var(--grau);font-size:.84em;margin:-2px 0 6px}
.geraet-preis .preis-fuss{display:block;margin-top:8px;padding-top:7px;
  border-top:1px solid var(--linie);font-size:.8rem;color:var(--grau);line-height:1.45}

/* ── Bildband über dem Inhalt ────────────────────────────────────────
   Feste Höhe, Bild füllt sie mittig aus. So bleibt der Bildausschnitt
   auf jedem Gerät ruhig, statt bei schmalen Fenstern zu einem Streifen
   zu schrumpfen. */
.bildband{width:100%;overflow:hidden;background:var(--flaeche);
          border-bottom:1px solid var(--linie)}
.bildband img{display:block;width:100%;height:clamp(180px,26vw,340px);
              object-fit:cover;object-position:center 42%}

/* ── Bilderreihe auf den Unterseiten ─────────────────────────────────
   Drei Plätze nebeneinander, auf schmalen Geräten untereinander.
   Analog zur Seite der Ummenhofer & Partner GmbH (Roy 10.09.2026).

   ⚠ Solange kein Bild eingesetzt ist, zeigt der Platz ein gestreiftes Feld
     mit Hinweistext. So sieht man beim Pflegen sofort, wo noch etwas fehlt,
     statt dass die Reihe einfach verschwindet. */
.bilder{padding:26px 0 34px;border-top:1px solid var(--linie)}
.bilder h2{font-size:1.25rem;color:var(--ton);margin:0 0 14px;font-weight:600}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}

.platz{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:5px;
  border:1px solid var(--linie);
  background:repeating-linear-gradient(45deg,#eef1f4,#eef1f4 12px,#e3e8ee 12px,#e3e8ee 24px);
  display:flex;align-items:center;justify-content:center;
  color:#7b8794;font-size:.85rem;text-align:center;padding:14px}
.platz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.platz:has(img){background:none;border-color:transparent;padding:0}

/* Bildunterschrift liegt im Bild, mit Verlauf darunter für den Kontrast. */
.platz figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;
  padding:26px 12px 10px;text-align:left;font-size:.83rem;line-height:1.4;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.45) 55%,transparent)}

/* Der Block-Editor bringt ohne sein Standard-Stylesheet keine eigenen Linien
   mit. Diese Regeln fangen den Fall ab, dass eine Galerie eingefügt wird. */
.wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;margin:0 0 14px;padding:0;list-style:none}
.wp-block-gallery figure{margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:5px}
.wp-block-gallery img{width:100%;height:100%;object-fit:cover;display:block}