/*
Theme Name: Ummenhofer & Partner
Description: Eigenes Theme der Ummenhofer & Partner GmbH. Schlank, ohne Baukasten,
             ohne externe Aufrufe. Schrift und Logo liegen im Theme.
Author: Ummenhofer & Partner GmbH
Version: 1.0
Text Domain: up
*/


  :root{
    --ton:#59403C; --ton-hell:#6E524D; --text:#2b2b2b; --grau:#636b76;
    --linie:#e5e7eb; --flaeche:#F8F5F4;
  }

  /* ── 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}
  .kopf .band{position:relative}
  .kopf img{width:46px;height:46px;display:block;border-radius:3px}
  .logo{font-weight:700;color:var(--ton);font-size:1.15rem;letter-spacing:-.01em;
         line-height:1.25}
  .logo span{font-weight:400;color:var(--grau);font-size:.82rem;display:block;
             letter-spacing:0}
  .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}

  /* ── Menü ────────────────────────────────────────────────────────────
     ⚠ Am Handy eingeklappt. Ohne das steht auf 390 Pixel eine Linkwüste
       über dem Inhalt. Der Schalter ist ein Kontrollkästchen, damit das
       Menü ohne JavaScript funktioniert. */
  .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:.92rem;
             padding:6px 0;display:inline-block}
  .m-liste a:hover,.m-liste a.hier{color:var(--ton);font-weight:600}
  @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}
    .kopf .band{position:relative}
  }

  .bald{color:#6f6963;font-size:.92rem;padding:6px 0;display:inline-block;
        cursor:default}
  .m-liste .bald::after{content:" ·";color:#9a938c}

  .auf{padding:52px 0 40px;background:var(--flaeche);border-bottom:1px solid var(--linie)}
  .auf h1{margin:0 0 6px;font-size:2.35rem;line-height:1.15;color:var(--ton);
          font-weight:700;letter-spacing:-.02em;text-wrap:balance}
  .auf .unter{font-size:1.05rem;color:var(--grau);margin:0 0 26px}
  .these{font-size:1.5rem;font-weight:600;color:var(--text);margin:0 0 12px;
         text-wrap:balance}
  .auf p.lauf{max-width:60ch;font-size:1.02rem;margin:0 0 26px}

  .ruf{display:inline-flex;align-items:center;gap:10px;background:var(--ton);
       color:#fff;text-decoration:none;padding:13px 24px;border-radius:4px;
       font-size:1.05rem;font-weight:600}
  .ruf:hover{background:var(--ton-hell)}
  .ruf-zusatz{display:block;font-size:.86rem;color:var(--grau);margin-top:10px}

  .leist{padding:48px 0}
  .leist h2{font-size:1.5rem;color:var(--ton);margin:0 0 28px;font-weight:600}
  .raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
          gap:26px 40px}
  .karte h3{margin:0 0 5px;font-size:1.08rem;color:var(--text);font-weight:700}
  .karte p{margin:0;color:var(--grau);font-size:.95rem;max-width:44ch}

  /* Einsatzgebiet, bewusst schmal gehalten */
  .gebiet{background:var(--flaeche);border-top:1px solid var(--linie);
          border-bottom:1px solid var(--linie);padding:30px 0}
  .gebiet .band{display:flex;gap:34px;align-items:baseline;flex-wrap:wrap}
  .gebiet h2{margin:0;font-size:1.22rem;color:var(--ton);font-weight:600;
             white-space:nowrap}
  .gebiet p{margin:0;color:var(--grau);font-size:.98rem;max-width:62ch}
  .gebiet b{color:var(--text)}

  .schluss{background:var(--ton);color:#fff;padding:40px 0;text-align:center}
  .schluss h2{margin:0 0 8px;font-size:1.5rem;font-weight:600}
  .schluss p{margin:0 0 20px;opacity:.9}
  .schluss .ruf{background:#fff;color:var(--ton)}
  .schluss .ruf:hover{background:#f0ebe9}
  .schluss .zweitweg{display:block;margin-top:14px;font-size:.88rem;opacity:.9}
  .schluss .zweitweg a{color:#fff;text-decoration:underline;cursor:pointer}

  .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:520px){
    /* ⚠ Auf schmalen Geräten wird der Kopf kleiner statt breiter. Vorher
       liess sich die Seite quer schieben, im Browser gemessen. */
    .kopf-oben{gap:10px}
    .kopf-oben img{width:38px;height:38px}
    .kopf-oben .logo{font-size:.98rem}
    .kopf-oben .logo span{font-size:.72rem}
    .kopf-tel a{font-size:.95rem}
    .kopf-tel span{font-size:.7rem}
  }
  @media (max-width:640px){
    .auf{padding:34px 0 26px}
    .auf h1{font-size:1.78rem}
    .these{font-size:1.2rem}
    .kopf img{width:40px;height:40px}
    .gebiet .band{gap:10px}
  }

.kopf img{height:54px;width:54px;object-fit:contain;display:block}

/* ── Bilderreihe auf den Unterseiten ─────────────────────────────────
   ⚠ Struktur bei m1: .galerie > div > .platz (eine Zwischenebene mehr als
     bei m2). Das Raster wirkt daher auf die direkten <div>-Kinder von
     .galerie, das Bild sitzt in .platz darin. Ohne diese Regeln standen die
     Bilder gross untereinander (11.09.2026). Sie fehlten, weil das alte
     Entwurfs-CSS sie nur mit dem Elementor-Präfix trug, das es jetzt nicht
     mehr gibt. */
.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}
.galerie > div{margin:0}
.platz{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:5px;
  border:1px solid var(--linie);
  background:repeating-linear-gradient(45deg,#efeae8,#efeae8 12px,#e6dfdc 12px,#e6dfdc 24px);
  display:flex;align-items:center;justify-content:center;
  color:#9c8b86;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}
.platz .bu-in{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)}
@media (max-width:720px){ .galerie{grid-template-columns:1fr} }


/* ── Aus dem NARWAL-Theme übernommen (11.09.2026) ───────────────────
   Diese Regeln kamen bei m1 früher aus dem Elementor-Stylesheet und
   fehlten nach dem Wechsel aufs eigene Theme. Struktur ist bei beiden
   Firmen gleich, die Farben kommen aus den CSS-Variablen (hier braun). */
.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)}
.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 .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}
.raster.paar{grid-template-columns:repeat(2,1fr)}
.raster.paar{grid-template-columns:1fr}
.karte p, .tun p, .tun li, .titel .unter{text-align:justify;
    hyphens:auto;
    -webkit-hyphens:auto;
    text-wrap:pretty;}
.karte p + p{margin-top:8px}
.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}
.liste{margin:0;padding-left:0;max-width:62ch;list-style:none}
.liste li{margin-bottom:8px;padding-left:1.25em;position:relative}
.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}
.tun ol{margin:0;padding-left:0;max-width:62ch}
.tun .liste{padding-left:0}
.tun li{margin-bottom:7px}
.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}
.karte p, .tun p, .tun li, .titel .unter{text-align:left}
.titel{padding:28px 0 22px}
.titel h1{font-size:1.6rem}
.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)}
.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}
.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}
.anschrift{line-height:1.7}
.dsgvo{max-width:62ch;font-size:.86rem;color:var(--grau);margin:4px 0 18px}
.dsgvo a{color:var(--ton)}
.feld input,.feld textarea,.feld select{border-color:#767676}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--ton)}
.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}
.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)}
.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}

/* ── Restklassen, die es nur bei m1 gibt ─────────────────────────────── */
/* .nr = Telefonnummer im Anruf-Button .ruf */
.ruf .nr,.nr{font-weight:700}
/* .rechtstext = Container für Impressum und Datenschutz, Lesebreite und Abstände wie .tun */
.rechtstext{padding:26px 0 34px}
.rechtstext .band{max-width:820px}
.rechtstext h5{font-size:1.05rem;color:var(--ton);margin:18px 0 6px;font-weight:600}
.rechtstext p{margin:0 0 10px;max-width:70ch}
.rechtstext a{color:var(--ton)}