/* ===================================================================
   Über uns
   Reihenfolge: Auftakt, Team, Geschichte, Philosophie, Abschluss.
   Jeder Abschnitt hat denselben Kopf (Titel links, Einleitung rechts),
   dadurch bekommt die Seite einen ruhigen, gleichmäßigen Takt.
   Kernstück ist der Zeitstrahl: die Linie ist am Anfang NICHT da.
   Ein Punkt läuft beim Scrollen nach unten und zieht die Linie hinter
   sich her; erst wenn er ein Jahr erreicht, erscheinen dort Punkt und
   Inhalt.
   =================================================================== */
.ub__wrap{width:100%;max-width:1510px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}

/* Seit 30.07.2026 gibt es .ub FUENFMAL je Seite, einmal pro Abschnitts-Widget
   (Auftakt, Team, Geschichte, Philosophie, Abschluss). Der untere
   Innenabstand darf deshalb NICHT hier stehen, sonst hat die Seite ihn fuenfmal
   und bekommt vier ueberzaehlige Luecken. Er sitzt in .ub--schluss und damit
   nur am letzten Abschnitt. Der Takt zwischen den Abschnitten kommt weiterhin
   allein aus .ub__sec (Innenabstand oben/unten plus Trennlinie oben). */
.ub{--ink:#111013;--txt:#141414;--mut:#636368;--line:rgba(20,20,20,.14);--green:#4CA139;
  --ease:cubic-bezier(.23,1,.32,1);
  width:100%;max-width:none;margin:0;padding:0;color:var(--txt);
  font-family:inherit;-webkit-font-smoothing:antialiased}
.ub--schluss{padding-bottom:clamp(24px,3vw,48px)}
.ub :where(*){box-sizing:border-box}
.ub :where(p,h2,h3,dl,dd,dt,figure,figcaption,ul,li,a){margin:0;padding:0}

.ub .ub__kicker{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--mut);font-weight:600}
.ub .ub__kdot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:0 0 10px}
.ub .ub__kicker::after{content:"";height:1px;width:46px;flex:0 0 46px;margin-left:4px;background:rgba(20,20,20,.30)}
.ub .ub__h{margin-top:24px;font-size:clamp(32px,3.5vw,50px);line-height:1.06;letter-spacing:-.03em;
  color:var(--ink);font-weight:700;max-width:16ch}
.ub .ub__p{font-size:19px;line-height:1.66;color:var(--txt);font-weight:400}
.ub .ub__p + .ub__p{margin-top:20px}
.ub .ub__p b{color:var(--ink);font-weight:600}

.ub__sec{padding:clamp(64px,7vw,116px) 0;border-top:1px solid var(--line)}
.ub__sec[id]{scroll-margin-top:120px}
.ub__open{padding:clamp(48px,5vw,84px) 0}

/* Gemeinsamer Abschnittskopf: Titel links, Einleitung rechts.
   Ersetzt den alten Zweispalten-Textblock (CSS columns), der die Absätze
   an unvorhersehbaren Stellen umgebrochen hat.
   align-items MUSS start sein: mit end sass der Titel unten am Raster und
   klebte damit fast am folgenden Bild. */
.ub__sechead{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,96px);align-items:start;
  padding-bottom:clamp(40px,4.5vw,72px)}
.ub__sechead .ub__lead{max-width:60ch}

/* --- Auftakt --------------------------------------------------------- */
.ub .ub__welcome{margin-top:26px;font-family:'Inter Tight',sans-serif;font-size:clamp(28px,3vw,44px);
  line-height:1.16;letter-spacing:-.03em;color:var(--ink);font-weight:600;max-width:24ch}
.ub .ub__welcome em{font-style:normal;color:var(--mut)}
.ub .ub__split{margin-top:clamp(20px,2vw,28px);display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(44px,5vw,96px);align-items:center}
.ub .ub__splittext .ub__p{margin-top:24px;max-width:52ch}
.ub__hero{position:relative;width:100%;max-width:480px;margin-left:auto;aspect-ratio:3/4;overflow:hidden;background:#ecedeb}
.ub .ub__heroimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
/* Bildunterschrift auf dem Bild: scharfkantig wie das Bild selbst,
   mit Abstand zum Rand statt am Rand klebend. */
.ub .ub__herocapbox{position:absolute;left:clamp(18px,2.2vw,26px);bottom:clamp(18px,2.2vw,26px);
  max-width:calc(100% - clamp(36px,4.4vw,52px));padding:15px 21px;
  background:rgba(14,18,14,.46);border:1px solid rgba(255,255,255,.24);border-radius:0;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 14px 38px rgba(0,0,0,.24)}
.ub .ub__capname{color:#fff;font-size:21px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.ub .ub__caprole{margin-top:5px;color:rgba(255,255,255,.88);font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600}

/* --- Team ------------------------------------------------------------ */
/* Grosszuegiger Abstand ueber dem Bild: Titel und Einleitung duerfen nie
   am Bild kleben. Der Abstand kommt zur Haelfte aus dem Kopf-Padding. */
.ub .ub__teamimg{margin-top:clamp(24px,2.6vw,40px);position:relative;width:100%;aspect-ratio:16/9;
  overflow:hidden;background:#ecedeb}
.ub .ub__teamimgi{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;
  transform:scale(1.05);transition:transform 1.2s var(--ease)}
.ub .ub__teamcap{margin-top:18px;font-size:15.5px;line-height:1.5;color:var(--mut);text-align:right}

/* Team-Kacheln.
   Der Kunde hat fuer jede Person eine gestaltete Karte gezeichnet:
   Bleistift-Portraet auf Papierstruktur, daneben Name, Funktion, ein
   kurzer Text und der Lieblingsbereich, unten eine Wiesenzeichnung.

   In der Kachel steht nur das freigestellte Portraet, alles Geschriebene
   kommt als echter Text daneben. Grund: auf der Karte ist der Text Teil
   des Bildes - am Handy waere er unlesbar klein, nicht markierbar, fuer
   Suchmaschinen unsichtbar und im Elementor nicht aenderbar. Die ganze
   Karte gibt es trotzdem: ein Klick auf das Portraet oeffnet sie in der
   Lightbox (siehe data-lb-gross in aqua-lightbox.js). */
/* KEIN eigener Abstand zum Abschnittskopf - der kommt allein aus dessen
   padding-bottom, genau wie beim Zeitstrahl der Firmenhistorie (.ub__time).
   Gemessen am 03.08.2026 bei 1920px: vorher Kopf-Padding 72px PLUS eigener
   Rand 96px = 168px Luft ueber den Kacheln, waehrend die Firmenhistorie direkt
   darunter mit 72px auskam. Marcel: "den Abstand hier kleiner machen, du siehst
   doch dass der viel zu gross ist". Jetzt sind beide Abschnitte bei 72px. */
.ub .ub__mates{margin-top:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(30px,3.2vw,52px) clamp(20px,2.2vw,34px)}
.ub__mate{display:flex;flex-direction:column}
/* Bilder bleiben scharfkantig - Projektregel. Der Papierton als Unterlage,
   damit vor dem Laden kein weisses Loch klafft. */
/* 2:3 statt 4:5 (30.07.2026). Bei 4:5 war vom Portraet fast nur der Kopf zu
   sehen - Marcel: "warum sind die Portraetbilder einfach alles nur Koepfe".
   Die Ursache war nicht das Format, sondern mein Ausschnitt: aus der Karte des
   Kunden hatte ich nur 38% der Hoehe genommen und damit bei der Brust
   abgeschnitten. Die neuen Ausschnitte (team-*-v2.webp) zeigen Kopf, Schultern
   und Oberkoerper und sind 2:3 hoch. Das Format hier muss dazu passen, sonst
   schneidet object-fit:cover den Oberkoerper wieder weg.
   Wer die Bilder tauscht: 2:3 beibehalten oder beides gemeinsam aendern. */
/* ------------------------------------------------------------
   Gestaltung der Teamkacheln - neu am 30.07.2026
   ------------------------------------------------------------
   Marcel: "der Team-Abschnitt sieht komplett scheisse aus". Das Raster mit
   vier Spalten bleibt, geaendert wird die GESTALTUNG der einzelnen Kachel.

   Was vorher billig aussah und warum:
   1. Das Portraet lag ohne Rahmen auf Weiss. Die sieben Karten des Kunden
      haben leicht unterschiedliche Papiertoene (gemessen 225 bis 236) -
      nebeneinander sah die Reihe deshalb fleckig aus.
   2. Unter dem Namen stand ein 26px langer gruener Strich. Ein Strich, der
      nichts trennt und nichts verbindet, ist Dekoration.
   3. Der Lieblingsbereich war eine hellgruene Pille mit runden Ecken - eine
      andere Formensprache als das scharfkantige Foto darueber, und blasses
      Gruen auf Weiss wirkt ausgewaschen.
   4. Bild, Name, Funktion, Text und Zusatz standen als fuenf lose Bloecke
      untereinander. Nichts hielt sie als Karte zusammen.

   Was jetzt gilt:
   - Das Portraet sitzt in einer getoenten Passepartout-Flaeche mit Haarlinie
     und Innenabstand, wie ein aufgezogener Druck. Der einheitliche Ton
     schluckt die Unterschiede der Papiertoene.
   - ~~Die Kachel hat oben eine Haarlinie, weitere trennen Kopf, Text und
     Zusatz.~~ AUFGEHOBEN am 03.08.2026, siehe unten: alle vier Linien raus.
   - Der Zusatz sitzt als ruhige Fusszeile am Kachelboden, ohne Flaeche und
     ohne Rundung.
   - Gruen bleibt der Marken-Akzent und kommt nur am Punkt des Abschnittskopfs
     vor (Projektregel Marcel 18.07.2026: Gruen nur fuer Knoepfe und Akzente).
     Deshalb hier KEIN gruener Strich und KEINE gruene Flaeche mehr. */

/* 03.08.2026: die drei Haarlinien in der Kachel sind raus - hier oben, ueber
   dem Text und ueber dem Lieblingsbereich, dazu die Linie zwischen den Zeilen
   am Handy. Marcel: "mach einfach nur die scheiss Trennlinien weg".
   Die Abstaende bleiben unveraendert: padding und margin standen frueher NEBEN
   der Linie und halten den Takt der Kachel jetzt allein. Sonst ist an dieser
   Gestaltung nichts geaendert - ein Umbau auf eine gemeinsame Flaeche mit
   Namenskasten im Bild wurde am selben Tag verworfen ("sieht noch haesslicher
   aus als vorher"). Wer hier wieder eine Linie einbaut, macht genau den
   Schritt rueckgaengig, der gewuenscht war. */
.ub__mate{padding-top:22px}

/* Passepartout: getoente Flaeche, Haarlinie, Portraet eingerueckt.
   Der Ton #eeece7 ist GENAU der Papierton, auf dem die Portraets seit dem
   30.07.2026 zusammengesetzt sind (Fassung v10). Beides gleich zu halten ist
   Absicht: so liest sich Rahmen und Bild als eine Papierflaeche, und der
   10px-Innenabstand faellt nicht als hellerer Ring auf.
   Format 3:4 statt vorher 2:3 - Marcel am 30.07.: "mach allgmein das bild
   format bisschen kleiner". Die Bilder sind 840x1120 und passen dazu genau. */
.ub .ub__matefig{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;
  background:#eeece7;border:1px solid rgba(20,20,20,.10);padding:10px}
.ub .ub__mateimg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);
  max-width:none;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}

.ub .ub__matename{margin:20px 0 0;font-size:clamp(20px,1.5vw,23px);line-height:1.14;
  letter-spacing:-.025em;font-weight:600;color:var(--ink)}
.ub .ub__materole{margin:8px 0 0;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);font-weight:600}
/* "Maschinenbau-HTL," ragte bei 768px 3px aus der Spalte (gemessen). */
.ub .ub__matetext{margin:16px 0 0;padding-top:16px;
  font-size:15.5px;line-height:1.64;color:var(--mut);hyphens:auto;overflow-wrap:break-word}

/* Fusszeile der Kachel. margin-top:auto schiebt sie an den Boden, damit die
   Zeile in einer Reihe auf einer Linie liegt - sonst sieht es nach Fehler aus.
   Die Kacheln sind durch das Raster ohnehin gleich hoch. */
.ub .ub__matelieb{margin:18px 0 0;padding-top:14px;
  font-size:13.5px;line-height:1.5;color:var(--ink)}
/* 11px war unter der Lesbarkeitsgrenze (gemessen 10.08.2026). 12px
   liest sich in Versalien deutlich besser und aendert das Bild nicht. */
.ub .ub__mateliebl{display:block;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);font-weight:600;margin-bottom:5px}
.ub__mate .ub__matelieb{margin-top:auto}
.ub .ub__matetext{padding-bottom:4px}
.ub .ub__mateliebl{color:var(--mut)}

/* Eingang der Portraets: sie werden von unten nach oben aufgedeckt, statt
   nur einzublenden - wie ein Blatt, das aus der Mappe gezogen wird. Bewusst
   ANDERS als der Rest der Seite: die Abschnittskoepfe blenden ein, der
   Zeitstrahl zeichnet sich, die Portraets werden aufgedeckt. Drei Abschnitte,
   drei Bewegungen - sonst wirkt die ganze Seite wie ein einziger Effekt.
   Der Versatz zwischen den Kacheln kommt aus dem Reveal-Skript weiter unten,
   dadurch kommen die Personen nacheinander herein statt alle auf einmal. */
.ub.rv-on .ub__mate .ub__matefig{clip-path:inset(0 0 100% 0)}
.ub.rv-on .ub__mate.rv-in .ub__matefig{clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ease) 60ms}

@media(hover:hover) and (pointer:fine){
  /* Spezifitaet absichtlich hoch genug, damit der Zeigen-Zustand die
     Eingangsregel oben schlaegt - sonst bliebe das Bild nach dem Eingang
     auf seinem Startwert stehen. */
  .ub.rv-on .ub__mate .ub__matefig:hover .ub__mateimg,
  .ub .ub__matefig:hover .ub__mateimg{transform:scale(1.05)}
}

/* ===================================================================
   ZEITSTRAHL
   Alles, was am Anfang unsichtbar ist, hängt an der Klasse .rv-on,
   die ausschliesslich das Skript setzt. Ohne JS ist der ganze
   Abschnitt fertig sichtbar: Linie voll, Punkte grün, Bilder offen.
   Es gibt KEINE graue Grundlinie: vor dem laufenden Punkt ist nichts.
   =================================================================== */
/* Abstand kommt bereits aus dem padding-bottom des Abschnittskopfs.
   Zusaetzlicher Rand hier wuerde die erste Station nur weiter nach unten
   schieben - sie soll aber frueh im Bild sein. */
.ub__time{margin-top:0;position:relative}

/* Die Linie. Oberkante und Höhe setzt das Skript exakt auf den ersten
   und den letzten Punkt - sie beginnt also nicht davor und läuft nicht
   darüber hinaus. Gezeichnet wird nur über scaleY, nie über height. */
.ub__rail{position:absolute;left:50%;top:0;width:2px;height:100%;background:var(--green);
  transform:translateX(-1px) scaleY(1);transform-origin:50% 0;
  will-change:transform;pointer-events:none;z-index:1}
.ub.rv-on .ub__rail{transform:translateX(-1px) scaleY(0)}

/* Der laufende Punkt an der Spitze der Linie. Er steht immer genau auf der
   zuletzt erreichten Station, also auf Hoehe der Jahreszahl.
   Kein Leuchten (Wunsch Marcel): gruener Punkt mit weisser Aussparung und
   einem zweiten, ruhigen gruenen Ring als "hier stehen wir gerade". */
.ub__head{position:absolute;left:50%;top:0;display:none;width:13px;height:13px;margin-top:-6.5px;
  border-radius:50%;background:var(--green);opacity:0;pointer-events:none;z-index:4;
  box-shadow:0 0 0 4px #fff,0 0 0 7px rgba(76,161,57,.38);
  transform:translate3d(-50%,0,0);will-change:transform,opacity;
  transition:opacity .3s var(--ease)}
.ub.rv-on .ub__head{display:block}

/* Mitlaufende Jahresanzeige, nur wo im Mittelspalt wirklich Platz ist. */
.ub__yflag{position:absolute;left:50%;top:0;display:none;margin-left:17px;margin-top:-13px;z-index:4;
  padding:5px 10px;background:rgba(255,255,255,.95);
  border:1px solid rgba(20,20,20,.10);box-shadow:0 8px 20px rgba(16,24,16,.10);
  opacity:0;pointer-events:none;transform:translate3d(0,0,0);will-change:transform,opacity;
  transition:opacity .3s var(--ease)}
.ub .ub__yflagt{display:block;font-size:12px;line-height:1;letter-spacing:.06em;font-weight:700;
  color:var(--ink);white-space:nowrap;transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
@media(min-width:1200px){.ub.rv-on .ub__yflag{display:block}}

.ub__ev{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,96px);padding:clamp(26px,2.8vw,40px) 0}
.ub__ev--l .ub__evin{grid-column:1;text-align:right;padding-right:clamp(34px,3.4vw,60px);justify-items:end}
.ub__ev--r .ub__evin{grid-column:2;padding-left:clamp(34px,3.4vw,60px)}
.ub__evin{display:grid}

/* Der Punkt einer Station. Kein grauer Ring im Voraus: solange die Linie
   die Station nicht erreicht hat, ist hier NICHTS zu sehen.
   --dot setzt das Skript exakt auf die Mitte der Jahreszahl. */
.ub__ev::after{content:"";position:absolute;left:50%;top:var(--dot,40px);z-index:2;
  width:13px;height:13px;border-radius:50%;background:var(--green);opacity:1;
  box-shadow:0 0 0 4px #fff;
  transform:translate(-50%,-50%) scale(1)}
/* Die letzte Station bekommt einen zweiten, ruhigen Ring statt eines Scheins. */
.ub__ev--now::after{box-shadow:0 0 0 4px #fff,0 0 0 6px var(--green)}
.ub.rv-on .ub__ev::after{opacity:0;transform:translate(-50%,-50%) scale(.3);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .28s var(--ease)}
.ub.rv-on .ub__ev.is-lit::after{opacity:1;transform:translate(-50%,-50%) scale(1)}

.ub .ub__year{font-family:'Inter Tight',sans-serif;font-size:clamp(30px,3vw,44px);line-height:1;
  letter-spacing:-.03em;color:var(--ink);font-weight:700}
.ub .ub__evt{margin-top:12px;font-size:19px;line-height:1.25;font-weight:600;color:var(--ink)}
.ub .ub__evd{margin-top:8px;font-size:16.5px;line-height:1.6;color:var(--mut);max-width:42ch}
.ub__ev--l .ub__evd,.ub__ev--l .ub__evt,.ub__ev--l .ub__year{justify-self:end}

/* Teamfoto direkt bei der Jahreszahl */
/* Die lange Selektorkette ist noetig, nicht Zierde.
   Gemessen am 30.07.2026: die Zeitstrahl-Bilder hatten margin-top 0 - bei
   390px UND bei 1440px. Der Abstand hat also nie gewirkt, der
   Beschreibungstext klebte am Foto (sichtbar blieben 3 bis 6px Zeilenluft).

   Ursache ist nicht der Grundreset dieser Datei, sondern eine Regel von
   Elementor in custom-frontend.min.css:
     .elementor .elementor-widget:not(.elementor-widget-text-editor)
     :not(.elementor-widget-theme-post-content) figure {margin:0}
   Das sind vier Klassenteile plus ein Element, also Spezifitaet (0,4,1). Damit
   schlaegt sie .ub__evfig (0,1,0), .ub .ub__evfig (0,2,0) und auch
   .ub .ub__ev .ub__evin .ub__evfig (0,4,0) - letzteres nur knapp, wegen des
   einen Elementteils. Erst fuenf Klassenteile (0,5,0) gewinnen.
   Im Browser nachgewiesen: alle Regeln durchgezaehlt, die auf das Element
   passen und einen Rand setzen - bootstrap (figure), agntix-core (*),
   custom-frontend (Elementor) und diese Datei.
   Der Wert 22px ist der urspruenglich vorgesehene, er wird hier nur endlich
   wirksam - am Handy wie am Rechner. */
.ub .ub__sec .ub__ev .ub__evin .ub__evfig{margin-top:22px;width:100%;max-width:460px}
.ub__ev--l .ub__evfig{justify-self:end}
.ub__evframe{display:block;position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#ecedeb}
.ub__evpar{position:absolute;left:0;right:0;top:-6%;bottom:-6%;will-change:transform}
.ub .ub__evimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;
  transform:scale(1);transition:transform 1.15s var(--ease)}

/* Eingangsbewegung: Inhalte kommen von ihrer Seite, sobald der laufende
   Punkt bei ihnen angekommen ist. */
.ub.rv-on .ub__ev .ub__year,
.ub.rv-on .ub__ev .ub__evt,
.ub.rv-on .ub__ev .ub__evd,
.ub.rv-on .ub__ev .ub__evfig{opacity:0;
  transition:opacity .55s var(--ease),transform .75s var(--ease),filter .45s var(--ease)}
.ub.rv-on .ub__ev--l .ub__year,
.ub.rv-on .ub__ev--l .ub__evt,
.ub.rv-on .ub__ev--l .ub__evd{transform:translate3d(-34px,8px,0);filter:blur(5px)}
.ub.rv-on .ub__ev--r .ub__year,
.ub.rv-on .ub__ev--r .ub__evt,
.ub.rv-on .ub__ev--r .ub__evd{transform:translate3d(34px,8px,0);filter:blur(5px)}
.ub.rv-on .ub__ev--l .ub__evfig{transform:translate3d(-26px,12px,0)}
.ub.rv-on .ub__ev--r .ub__evfig{transform:translate3d(26px,12px,0)}
.ub.rv-on .ub__ev.is-in .ub__year,
.ub.rv-on .ub__ev.is-in .ub__evt,
.ub.rv-on .ub__ev.is-in .ub__evd,
.ub.rv-on .ub__ev.is-in .ub__evfig{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
.ub.rv-on .ub__ev.is-in .ub__evt{transition-delay:55ms}
.ub.rv-on .ub__ev.is-in .ub__evd{transition-delay:110ms}
.ub.rv-on .ub__ev.is-in .ub__evfig{transition-delay:165ms}

/* Bild-Reveal: von unten aufgezogen, dazu Skalierung beruhigen */
.ub.rv-on .ub__evframe{clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease);transition-delay:165ms}
.ub.rv-on .ub__ev.is-in .ub__evframe{clip-path:inset(0 0 0 0)}
.ub.rv-on .ub__evimg{transform:scale(1.06)}
.ub.rv-on .ub__ev.is-in .ub__evimg{transform:scale(1)}
@media(hover:hover) and (pointer:fine){
  .ub .ub__evfig:hover .ub__evimg,
  .ub.rv-on .ub__ev.is-in .ub__evfig:hover .ub__evimg{transform:scale(1.035);transition-duration:.7s}
  .ub .ub__teamimg:hover .ub__teamimgi{transform:scale(1.09)}
}

/* Sofort-Anzeige ohne Animation (Ankersprung, schnelles Scrollen, bfcache) */
.ub .ub-noanim,.ub .ub-noanim *,
.ub .ub-noanim::before,.ub .ub-noanim::after,
.ub .ub-noanim *::before,.ub .ub-noanim *::after{transition:none!important;animation:none!important}

/* --- Philosophie ------------------------------------------------------ */
.ub .ub__phil{margin-top:clamp(24px,2.6vw,40px);display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(40px,5vw,88px);align-items:start}
.ub__philimg{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#ecedeb}
.ub .ub__philimgi{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.2s var(--ease)}
@media(hover:hover) and (pointer:fine){.ub .ub__philimg:hover .ub__philimgi{transform:scale(1.09)}}
.ub__big{border-top:1px solid var(--line)}
.ub__bigrow{display:grid;grid-template-columns:clamp(40px,4vw,68px) minmax(0,1fr);
  gap:clamp(16px,2vw,32px);padding:clamp(24px,2.6vw,34px) 0;border-bottom:1px solid var(--line)}
.ub .ub__bignum{font-family:'Inter Tight',sans-serif;font-size:15px;line-height:1.5;font-weight:700;
  letter-spacing:.08em;color:var(--green)}
.ub .ub__bigt{font-family:'Inter Tight',sans-serif;font-size:clamp(23px,2.2vw,32px);line-height:1.14;
  letter-spacing:-.025em;color:var(--ink);font-weight:600}
.ub .ub__bigd{margin-top:9px;font-size:16.5px;line-height:1.6;color:var(--mut);max-width:52ch}
.ub__bigrow:last-child{border-bottom:0}

/* --- Abschluss -------------------------------------------------------- */
.ub__cta{border-top:1px solid var(--line);padding:clamp(72px,8vw,124px) 0;text-align:center}
.ub__cta .ub__kicker{justify-content:center}
.ub .ub__cta .ub__h{margin-inline:auto;max-width:18ch}
.ub .ub__ctalead{margin:24px auto 0;max-width:62ch;font-size:19px;line-height:1.62;color:var(--txt)}
.ub__ctabtns{margin-top:38px;display:flex;justify-content:center}
.ub .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.ub .tp-btn-black.btn-green-light-bg .tp-btn-black-circle{background-color:#4CA139}
.ub .tp-btn-black.btn-green-light-bg .tp-btn-black-text{color:#fff}
.ub .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg{color:#fff}

/* Bilder öffnet die globale Lightbox des Plugins (data-aqua-lb) */
.ub .aqua-lb-on{cursor:zoom-in}

@media(max-width:1080px){
  .ub__sechead{grid-template-columns:1fr;gap:28px;align-items:start}
  .ub .ub__h{max-width:22ch}
}
@media(max-width:980px){
  .ub .ub__split{grid-template-columns:1fr;gap:32px}
  .ub__hero{max-width:none;margin-left:0;aspect-ratio:4/5}
  .ub .ub__h{max-width:none}
  .ub .ub__phil{grid-template-columns:1fr;gap:32px}
  .ub__philimg{aspect-ratio:4/3}
  /* Drei Spalten bleiben bis 980px gut lesbar. */
  .ub .ub__mates{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ub .ub__teamcap{text-align:left}
  .ub__rail,.ub__head{left:7px}
  .ub__ev{grid-template-columns:1fr;gap:0;padding-left:40px}
  .ub__ev--l .ub__evin,.ub__ev--r .ub__evin{grid-column:1;text-align:left;padding:0;justify-items:start}
  .ub__ev--l .ub__evd,.ub__ev--l .ub__evt,.ub__ev--l .ub__year,.ub__ev--l .ub__evfig{justify-self:start}
  .ub__ev::after{left:7px}
  .ub__head{width:11px;height:11px;margin-top:-5.5px;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(76,161,57,.38)}
  .ub__ev::after{box-shadow:0 0 0 3px #fff}
  .ub__ev--now::after{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--green)}
  .ub__evfig{max-width:none}
  .ub.rv-on .ub__ev--l .ub__year,.ub.rv-on .ub__ev--r .ub__year,
  .ub.rv-on .ub__ev--l .ub__evt,.ub.rv-on .ub__ev--r .ub__evt,
  .ub.rv-on .ub__ev--l .ub__evd,.ub.rv-on .ub__ev--r .ub__evd{transform:translate3d(-22px,10px,0)}
  .ub.rv-on .ub__ev--l .ub__evfig,.ub.rv-on .ub__ev--r .ub__evfig{transform:translate3d(-18px,12px,0)}
}

/* --- Fade-in der übrigen Abschnitte ------------------------------------ */
.ub.rv-on [data-rv]{opacity:0;transform:translate3d(0,24px,0)}
.ub.rv-on [data-rv].rv-in{opacity:1;transform:translate3d(0,0,0);
  transition:opacity .7s var(--ease),transform .8s var(--ease)}

/* Unter 640px werden aus den Kacheln wieder Zeilen: Portraet links,
   Text rechts. Zwei Spalten waeren am Handy nur 170px breit - der
   Fliesstext braeche dann alle drei Woerter um. Das ist dasselbe
   Zeilenmuster, das dieser Abschnitt vorher schon hatte. */
@media(max-width:640px){
  .ub .ub__mates{grid-template-columns:1fr;gap:0;margin-top:0}
  /* Jedes Feld bekommt seinen Platz ausdruecklich zugewiesen. Ohne das
     fuellt der Browser die Zellen der Reihe nach - Funktion und Text
     landen dann uebereinander in verschiedenen Spalten. */
  /* Ohne Trennlinie (03.08.2026) halten die 26px oben und unten die Zeilen
     auseinander - zusammen 52px zwischen zwei Personen. */
  .ub__mate{display:grid;grid-template-columns:124px minmax(0,1fr);
    column-gap:20px;padding:26px 0;
    align-items:start;align-content:start}
  .ub .ub__matefig{grid-column:1;grid-row:1 / span 4}
  .ub .ub__matename{grid-column:2;grid-row:1;margin-top:0}
  .ub .ub__materole{grid-column:2;grid-row:2;margin-top:9px}
  .ub .ub__matetext{grid-column:2;grid-row:3;font-size:15px;margin-top:12px;padding-bottom:0}
  /* Rest aus der alten Gestaltung: hier stand padding:8px 12px, weil der
     Lieblingsbereich frueher eine gruene Pille war. Die Pille ist am
     30.07.2026 entfallen, das Padding blieb stehen - dadurch war die Zeile am
     Handy um 12px eingerueckt, waehrend Name, Funktion und Text buendig
     standen. Jetzt gilt wieder padding-top:14px aus der Grundregel, also die
     gleiche Haarlinie mit gleichem Abstand wie am Rechner. */
  .ub__mate .ub__matelieb{grid-column:2;grid-row:4;margin-top:14px;font-size:13.5px}
}
@media(max-width:430px){
  /* Bei 390px blieben fuer den Text sonst nur gut 200px - der Fliesstext
     braeche dann alle vier Woerter um. Deshalb hier das Portraet nach oben
     und der Text darunter ueber die volle Breite. */
  .ub__mate{grid-template-columns:minmax(0,1fr);row-gap:0;padding:30px 0}
  .ub .ub__matefig{grid-column:1;grid-row:1;width:min(58%,190px)}
  .ub .ub__matename{grid-column:1;grid-row:2;margin-top:17px}
  .ub .ub__materole{grid-column:1;grid-row:3}
  .ub .ub__matetext{grid-column:1;grid-row:4}
  .ub__mate .ub__matelieb{grid-column:1;grid-row:5}
}

@media(prefers-reduced-motion:reduce){
  .ub.rv-on [data-rv],
  .ub.rv-on .ub__ev .ub__year,.ub.rv-on .ub__ev .ub__evt,
  .ub.rv-on .ub__ev .ub__evd,.ub.rv-on .ub__ev .ub__evfig{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .ub.rv-on .ub__evframe{clip-path:none!important;transition:none!important}
  .ub.rv-on .ub__evimg,.ub .ub__teamimgi,.ub .ub__philimgi,.ub .ub__mateimg{transform:none!important;transition:none!important}
  .ub.rv-on .ub__mate .ub__matefig{clip-path:none!important;transition:none!important}
  .ub.rv-on .ub__evpar{transform:none!important}
  .ub.rv-on .ub__ev::after{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important;transition:none!important}
  .ub.rv-on .ub__rail{transform:translateX(-1px) scaleY(1)!important}
  .ub__head,.ub__yflag{display:none!important}
}

/* 02.08.2026, Wunsch Edith: "Text kleiner - nicht als Ueberschrift".
   Der Satz "Seit 2013 planen und bauen wir Gaerten..." wirkte durch
   clamp(28px,3vw,44px) und Gewicht 700 wie eine zweite Ueberschrift neben
   "Willkommen bei uns". Er ist jetzt Fliesstext in der Groesse der uebrigen
   Einleitungen: kleiner, leichter, mit ruhigerer Zeilenfuehrung.
   Der hervorgehobene zweite Halbsatz (em) bleibt als Abstufung erhalten. */
.ub .ub__welcome{font-size:clamp(18px,1.5vw,22px);font-weight:500;line-height:1.55;
  letter-spacing:0;max-width:52ch}

/* ===================================================================
   AKTUELLES (aqua_ub_aktuell, neu 03.08.2026 - Schalter seit 24.08.2026)

   Vorher drei gleich aussehende Pillen (Alle Beitraege / Instagram /
   Facebook) im Stil des Projektfilters auf /projekte/. Der Projektfilter
   hat viele gleichrangige Werte - dort ist die Pillenreihe richtig. Hier
   sind es nach dem Wegfall der Social Wall genau ZWEI, die sich gegenseitig
   ausschliessen. Dafuer ist der Schalter die richtige Form: ein Rahmen, ein
   wandernder Reiter, und man sieht auf einen Blick, dass es zwei Zustaende
   desselben Dings sind und nicht zwei Knoepfe nebeneinander.

   Der Reiter faehrt, er blinkt nicht um: ease-out-quint ueber 420 ms, damit
   die Bewegung die Blickfuehrung uebernimmt. Die Feed-Inhalte selbst stylen
   weiterhin die Smash-Balloon-Plugins.
   =================================================================== */
/* Marcel, 24.08.2026: "nicht schwarz sondern in unserem gruen, und nicht so
   breit". Von 432 auf 330 px und der Reiter auf das Marken-Gruen - dasselbe
   #4CA139 wie jeder Knopf der Seite. */
.ub__socfilter{position:relative;display:inline-flex;align-items:stretch;
  width:min(100%,330px);padding:4px;gap:0;
  background:#f1f2ef;border:1px solid rgba(20,20,20,.10);border-radius:999px;
  margin-bottom:clamp(28px,3vw,44px)}

/* Der wandernde Reiter. Er liegt hinter den Knoepfen (z-index 0 gegen 1) und
   ist genau halb so breit wie der Innenraum, deshalb deckt translateX(100%)
   exakt die zweite Haelfte ab.
   Schatten in der Gruenfamilie statt neutralem Grau: ein grauer Schatten
   unter einer gesaettigten Flaeche wirkt schmutzig. */
.ub__socthumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;
  width:calc(50% - 4px);border-radius:999px;background:var(--green);
  box-shadow:0 1px 2px rgba(30,72,20,.22),0 6px 16px rgba(30,72,20,.20);
  transition:transform .42s cubic-bezier(.22,1,.36,1)}
.ub__socfilter[data-aktiv="facebook"] .ub__socthumb{transform:translateX(100%)}

.ub__soctab{position:relative;z-index:1;flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  font-family:inherit;font-size:15px;font-weight:500;line-height:1;
  padding:11px 12px;border-radius:999px;color:var(--mut);
  transition:color .26s ease}
.ub__soctab:hover{color:var(--ink)}
.ub__soctab.on,.ub__soctab.on:hover{color:#fff}
.ub__soctab:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.ub__socicon{flex:0 0 auto;width:17px;height:17px;
  transition:transform .42s cubic-bezier(.22,1,.36,1)}
.ub__soctab.on .ub__socicon{transform:scale(1.09)}
.ub__soclabel{white-space:nowrap}

/* Bleibt nur ein Kanal uebrig, ist nichts mehr zu schalten: dann kein
   Rahmen und kein Reiter, sondern eine ruhige Zeile. */
.ub__socfilter--einzeln{background:none;border:0;padding:0;width:auto}
.ub__socfilter--einzeln .ub__soctab{padding-left:0;color:var(--ink)}

.ub__socpanel{display:none}
.ub__socpanel.on{display:block;animation:ub-socein .34s cubic-bezier(.22,1,.36,1) both}
@keyframes ub-socein{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media(max-width:420px){
  .ub__socfilter{width:100%}
  .ub__soctab{padding:12px 10px;font-size:14.5px;gap:7px}
}

/* Ohne Bewegung: gleiche Zustaende, nur ohne Fahrt und ohne Einblenden. */
@media(prefers-reduced-motion:reduce){
  .ub__socthumb,.ub__socicon,.ub__soctab{transition:none}
  .ub__socpanel.on{animation:none}
}

/* -------------------------------------------------------------------
   INSTAGRAM: der Schleier beim Ueberfahren
   Marcel, 24.08.2026: "nicht so schwarz beim hover, nur ganz leicht dunkel".

   Das Instagram-Feed-Plugin schreibt die Farbe als INLINE-Stil an jede
   Kachel: style="background: rgba(5,5,5,0.85)". Inline schlaegt jedes
   Stylesheet - deshalb ist !important hier kein Nachlaessigkeitszeichen,
   sondern das einzige Mittel, das von aussen greift. (Sauberer waere die
   Plugin-Einstellung unter Instagram Feed -> Anpassen; die liegt aber im
   Backend und nicht bei uns im Git, also stuende sie in keinem Deploy.)

   Warum nicht einfach flach aufhellen: auf dem Schleier stehen Bildtext,
   Herz und Sprechblase in WEISS. Bei 30 % Deckung verschwinden sie auf
   hellen Fotos - und genau die sind es hier, Rasen und Hortensien in der
   Sonne. Deshalb ein Verlauf: in der Mitte fast klar, oben und unten
   gerade so viel Tiefe, dass die weisse Schrift steht. Dazu ein knapper
   Schattenwurf an der Schrift selbst.
   ------------------------------------------------------------------- */
.ub #sb_instagram .sbi_photo_wrap .sbi_link{
  background:linear-gradient(to bottom,
    rgba(10,14,9,.52) 0%, rgba(10,14,9,.16) 26%,
    rgba(10,14,9,.16) 60%, rgba(10,14,9,.58) 100%) !important}
.ub #sb_instagram .sbi_photo_wrap .sbi_link .sbi_caption,
.ub #sb_instagram .sbi_photo_wrap .sbi_link .sbi_meta,
.ub #sb_instagram .sbi_photo_wrap .sbi_link .sbi_hover_bottom{
  text-shadow:0 1px 3px rgba(0,0,0,.72)}
.ub #sb_instagram .sbi_photo_wrap .sbi_link svg{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

/* Die Social Wall stellt sich am Handy auf DREI Spalten (sbsw-mobcol-3,
   Plugin-Einstellung) - bei 350px Innenbreite sind das 117px-Tuermchen mit
   68px Seitenabstand, der Text bricht buchstabenweise um (03.08.2026 im
   390px-Screenshot gesehen). Die Kacheln stehen absolut, Breite und Lage
   kommen als Inline-Stil aus dem Masonry-Skript - !important schlaegt
   Inline-Stil, position:static macht left/top wirkungslos. Unter 640px
   eine Spalte, bis 1024px zwei; darueber rendert das Plugin seine vier
   Spalten unveraendert selbst. Instagram- und Facebook-Tab sind nicht
   betroffen, die stellen sich am Handy von selbst auf eine Spalte. */
@media(max-width:1024px){
  .ub .ub__socpanel .sb-wall-items-wrap{display:grid!important;grid-template-columns:1fr 1fr;
    gap:26px;height:auto!important}
  .ub .ub__socpanel .sbsw-item{position:static!important;width:auto!important;
    left:auto!important;top:auto!important;padding-left:0!important;padding-right:0!important;
    margin-bottom:0!important}
  .ub .ub__socpanel .sb-wall{padding-bottom:0!important}
}
@media(max-width:640px){
  .ub .ub__socpanel .sb-wall-items-wrap{grid-template-columns:1fr}
}