/* ============================================================
   ÜBER UNS — eigenes Layout
   Bewusst NICHT der Aufbau der Leistungsseiten: keine
   Angebotskarte, keine Kästen-in-Kästen, keine FAQ. Eine Seite
   über Menschen führt mit dem Menschen und mit einer Aussage,
   nicht mit einer Merkmalsliste.
   Drei Mittel tragen die Seite:
     1. eine große, ruhige Typo-Hierarchie statt gleichförmiger
        15-px-Absätze,
     2. Haarlinien statt Rahmen — der einzige gerahmte Block
        ist der dunkle Abschnitt,
     3. ein Kontrastmoment in Logo-Blau in der Seitenmitte,
        damit die Seite nicht durchgehend blassblau bleibt.
   Lädt nach style-hell.css + miller-hell.css.
   Keine Filter und keine Verläufe über Fotos.
   ============================================================ */

.uu{background:var(--paper)}

/* Randabstand, der exakt auf der Containerkante sitzt — damit
   volle Breite und Container dieselbe linke Fluchtlinie haben. */
.uu-inset{padding-left:max(clamp(20px,4vw,32px),
  calc((100vw - var(--container))/2 + clamp(20px,4vw,32px)))}

.uu-eyebrow{font-family:"Urbanist",system-ui,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-logo);display:block}
.uu-crumb{font-size:13px;color:var(--ink-soft);margin-bottom:20px}
.uu-crumb a{color:var(--blue-logo)}

/* ---- 01 · Auftakt: Aussage links, Porträt bis zur Kante ----- */
.uu-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(32px,5vw,72px);align-items:center;
  padding-block:clamp(112px,12vw,158px) clamp(48px,6vw,76px)}
/* Keine Breitenbegrenzung auf der Spalte — die Spaltenbreite
   selbst bestimmt den Umbruch, sonst bricht die Headline. */
.uu-hero h1{margin-top:16px;font-size:clamp(36px,4.6vw,64px);line-height:1.06;
  letter-spacing:-.028em;text-wrap:balance}
.uu-hero-copy>p{max-width:44ch;margin-top:clamp(22px,2.6vw,30px);
  font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.72;color:var(--ink-soft)}
.uu-hero-img{height:clamp(400px,50vw,620px);overflow:hidden;
  border-radius:var(--r) 0 0 var(--r)}
.uu-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:none}
.uu-hero-img::after{content:none}

/* Kennzahlenband: nur Haarlinien, kein Kasten */
.uu-facts{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.uu-facts div{padding:clamp(22px,2.6vw,30px) 0;padding-right:24px}
.uu-facts div+div{border-left:1px solid var(--line);padding-left:clamp(22px,3vw,40px)}
.uu-facts b{display:block;font-family:"Urbanist",system-ui,sans-serif;font-weight:600;
  font-size:clamp(30px,3.6vw,46px);line-height:1;color:var(--navy);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.uu-facts span{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}

/* ---- 02 · Text: schmale Spalte, ruhiger Satz --------------- */
.uu-story{padding-block:clamp(56px,7vw,96px)}
/* Drei Spalten: Marke, Fließtext auf Lesebreite, Zitat.
   Das Zitat steht rechts, damit neben dem Satzspiegel keine
   tote Fläche bleibt — und weil es dort gelesen wird. */
.uu-story-grid{display:grid;
  grid-template-columns:minmax(0,150px) minmax(0,54ch) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.uu-story-lbl{font-family:"Urbanist",system-ui,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding-top:9px}
.uu-story-body{max-width:62ch}
.uu-story-body p{font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.85;color:var(--ink-soft)}
.uu-story-body p+p{margin-top:20px}
.uu-story-body strong{color:var(--ink);font-weight:600}

/* Zitat: der einzige Satz auf der Seite in Erzählgröße */
.uu-quote{position:sticky;top:124px;padding-top:22px;
  border-top:2px solid var(--blue-logo)}
.uu-quote blockquote{margin:0;font-family:"Urbanist",system-ui,sans-serif;font-weight:500;
  font-size:clamp(21px,2.1vw,29px);line-height:1.3;letter-spacing:-.018em;
  color:var(--navy)}
.uu-quote{margin:0}
.uu-quote figcaption{margin-top:16px}
.uu-quote cite{font-style:normal;font-size:13.5px;color:var(--ink-soft)}

/* ---- 03 · Kontrastmoment in Logo-Blau ---------------------- */
.uu-dark{background:var(--navy);color:var(--white);
  padding-block:clamp(56px,7vw,96px)}
.uu-dark h2{font-size:clamp(25px,3vw,38px);line-height:1.2;letter-spacing:-.018em;
  max-width:22ch}
.uu-dark-lead{margin-top:16px;max-width:52ch;font-size:16px;line-height:1.72;
  color:rgba(255,255,255,.8)}
.uu-princ{margin-top:clamp(34px,4.4vw,54px);border-top:1px solid rgba(255,255,255,.22)}
.uu-princ li{display:grid;grid-template-columns:64px minmax(0,26ch) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:baseline;
  padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid rgba(255,255,255,.22)}
.uu-princ .no{font-family:"Urbanist",system-ui,sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.1em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.uu-princ h3{font-size:clamp(17px,1.75vw,21px);line-height:1.28;letter-spacing:-.01em}
.uu-princ p{font-size:16px;line-height:1.72;color:rgba(255,255,255,.78);max-width:64ch}

/* ---- 04 · Arbeitsweise: Spalten ohne Kästen ---------------- */
.uu-work{padding-block:clamp(56px,7vw,96px)}
.uu-work>.container>h2{font-size:clamp(25px,3vw,38px);line-height:1.2;letter-spacing:-.018em;
  max-width:20ch}
.uu-steps{margin-top:clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(28px,4vw,56px);list-style:none;padding:0}
.uu-steps li{padding:22px 0 26px;border-top:1px solid var(--line)}
.uu-steps .no{display:block;font-family:"Urbanist",system-ui,sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:.12em;color:var(--blue-logo);margin-bottom:12px;
  font-variant-numeric:tabular-nums}
.uu-steps h3{font-size:17px;line-height:1.3}
.uu-steps p{margin-top:9px;font-size:14.5px;line-height:1.7;color:var(--ink-soft);max-width:34ch}

/* ---- 05 · Projekt: Bilder groß, Beschriftung darunter ------ */
.uu-proj{padding-bottom:clamp(56px,7vw,96px)}
.uu-proj-head{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:baseline;
  justify-content:space-between;padding-bottom:clamp(22px,2.6vw,30px);
  border-bottom:1px solid var(--line)}
.uu-proj-head h2{font-size:clamp(25px,3vw,38px);line-height:1.2;letter-spacing:-.018em;
  max-width:22ch}
.uu-proj-head p{font-size:14.5px;line-height:1.7;color:var(--ink-soft);max-width:40ch}
.uu-pair{margin-top:clamp(26px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,26px)}
.uu-pair figure{margin:0}
.uu-pair .shot{border-radius:var(--r);overflow:hidden;aspect-ratio:5/4}
.uu-pair img{width:100%;height:100%;object-fit:cover;filter:none}
.uu-pair .shot::after{content:none}
.uu-pair figcaption{margin-top:12px;display:flex;gap:12px;align-items:baseline;
  font-size:13px;color:var(--ink-soft)}
.uu-pair figcaption b{font-family:"Urbanist",system-ui,sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-logo)}
.uu-proj-facts{margin-top:clamp(26px,3vw,36px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--line)}
.uu-proj-facts b{display:block;font-family:"Urbanist",system-ui,sans-serif;font-weight:600;
  font-size:clamp(20px,2.2vw,26px);line-height:1.05;color:var(--navy);
  font-variant-numeric:tabular-nums}
.uu-proj-facts span{display:block;margin-top:7px;font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* ---- 06 · Weiter zu den Leistungen ------------------------- */
.uu-next{padding-bottom:clamp(56px,7vw,96px)}
.uu-next h2{font-size:clamp(21px,2.3vw,26px);margin-bottom:clamp(18px,2.2vw,24px)}
.uu-next-list{border-top:1px solid var(--line)}
.uu-next-list a{display:grid;grid-template-columns:minmax(0,22ch) minmax(0,1fr) 22px;
  gap:clamp(20px,3vw,40px);align-items:baseline;padding:20px 0;
  border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease)}
.uu-next-list a:hover{padding-left:10px}
.uu-next-list b{font-size:17px;line-height:1.3;color:var(--ink)}
.uu-next-list span{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.uu-next-list svg{width:16px;height:16px;color:var(--blue-logo);align-self:center;
  transition:transform .3s var(--ease)}
.uu-next-list a:hover svg{transform:translateX(4px)}

/* ---- Mobil ------------------------------------------------- */
@media(max-width:900px){
  .uu-inset{padding-left:clamp(20px,4vw,32px);padding-right:clamp(20px,4vw,32px)}
  .uu-hero{grid-template-columns:1fr;gap:28px;
    padding-block:clamp(96px,22vw,116px) clamp(36px,6vw,48px)}
  .uu-hero-copy{max-width:none}
  .uu-hero h1{font-size:clamp(31px,8.4vw,42px)}
  .uu-hero-copy>p{max-width:none;font-size:16px}
  .uu-hero-img{height:auto;aspect-ratio:4/3;border-radius:var(--r)}
  .uu-hero-img img{object-position:center 25%}

  .uu-facts{grid-template-columns:1fr}
  .uu-facts div{padding:18px 0}
  .uu-facts div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .uu-facts b{font-size:30px}

  .uu-story-grid{grid-template-columns:1fr;gap:14px}
  .uu-story-lbl{padding-top:0}
  .uu-story-body{max-width:none}
  .uu-story-body p{font-size:16px;line-height:1.8}
  .uu-quote{position:static;margin-top:30px;padding-top:20px}
  .uu-quote blockquote{font-size:clamp(21px,6.2vw,27px)}

  .uu-dark h2{font-size:clamp(22px,6.4vw,28px)}
  .uu-princ li{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .uu-princ .no{margin-bottom:2px}

  .uu-work>.container>h2,.uu-proj-head h2{font-size:clamp(22px,6.4vw,28px)}
  .uu-steps{grid-template-columns:1fr;gap:0}
  .uu-steps p{max-width:none}

  .uu-pair{grid-template-columns:1fr;gap:22px}
  .uu-proj-facts{grid-template-columns:1fr 1fr;gap:18px}

  .uu-next-list a{grid-template-columns:1fr 20px;gap:6px 14px;padding:18px 0}
  .uu-next-list span{grid-column:1/2}
  .uu-next-list svg{grid-row:1/3;grid-column:2/3}
}