/* Variante E «Ruhig»: feste Schriftordnung.
   1 Schrift: Helvetica (wie in Kaspar Hugglers E-Mail-Signatur; Windows zeigt Arial).
   5 Grössen: XL Leitsatz · L Abschnittstitel · M Zwischentitel/Einleitung · S Text · XS Beschriftung.
   2 Stärken: fein (300) für Titel, normal (400) für Text. Grossbuchstaben nur bei XS-Beschriftungen, eine Laufweite. */
:root {
  --t-xl: clamp(52px, 8vw, 120px);
  --t-l: clamp(34px, 4.2vw, 56px);
  --t-m: clamp(20px, 1.8vw, 24px);
  --t-s: 16px;
  --t-xs: 13px;
  --track: .1em;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body { font: 400 var(--t-s)/1.7 var(--body); }

/* XL: nur der Leitsatz und der Projektname auf der Projektseite */
h1, .p-hero h1 { font: 300 var(--t-xl)/1 var(--display) !important; font-stretch: normal !important; letter-spacing: -.02em !important; text-transform: none !important; }

/* L: Abschnitts- und Seitentitel */
h2, h2[style] { font: 300 var(--t-l)/1.1 var(--display) !important; font-stretch: normal !important; letter-spacing: 0 !important; text-transform: none !important; }

/* M: Zwischentitel, Projektnamen in Kacheln, Einleitungen */
h3, .pcard h3, .p-nav a .ort, .addr .big, .profile .portrait .tag strong, .service h3 { font: 400 var(--t-m)/1.3 var(--display) !important; font-stretch: normal !important; letter-spacing: 0 !important; text-transform: none !important; }
.lead, .intro .lead, .p-text .lead { font: 300 var(--t-m)/1.5 var(--body) !important; letter-spacing: 0 !important; }

/* S: Fliesstext überall gleich */
p, dd, li, .news-card p, .service p, .pcard p, .hero-side p, .band-facts p, .df-col p, .field input, .field textarea, .timeline li span, .prose p { font-family: var(--body) !important; font-size: var(--t-s) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; }

/* XS: alle kleinen Beschriftungen, Menü, Knöpfe – einheitlich in Grossbuchstaben */
.label, .label.teal, .cat, .chip, .chip small, .nav a, .btn, .link-arrow, .field label, .kv dt, .df-h, .df-small, .df-links a, .timeline .y, .lightbox figcaption, .p-hero dt, .pk-small, [style*="font-family:var(--mono)"] {
  font-family: var(--mono) !important; font-size: var(--t-xs) !important; font-weight: 400 !important; letter-spacing: var(--track) !important; text-transform: uppercase !important; font-stretch: normal !important;
}
.timeline .y { color: var(--teal-ink); }
.hero-title .label { margin-bottom: 18px; display: block; }
@media (max-width: 720px) { .nav a { font: 400 var(--t-l)/1.2 var(--display) !important; letter-spacing: 0 !important; text-transform: none !important; } }

/* Startseite: Bild randlos über die ganze Breite, Leitsatz direkt auf dem Bild */
.hero-full { position: relative; height: min(86vh, 920px); min-height: 480px; overflow: hidden; background: #1d2627; color: #fff; }
.hf-media { position: absolute; inset: 0 0 -20% 0; will-change: transform; }
.hf-img { width: 100%; height: 100%; max-width: none; object-fit: cover; animation: hf-zoom 22s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes hf-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hf-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 22, 22, .55), rgba(12, 22, 22, .18) 55%, rgba(12, 22, 22, 0) 80%), linear-gradient(0deg, rgba(12, 22, 22, .5), rgba(12, 22, 22, 0) 55%); }
.hf-inner { position: relative; height: 100%; display: flex; align-items: flex-end; padding-bottom: clamp(28px, 6vw, 84px); }
.hero-full h1.hf-title { font: 300 clamp(58px, 11vw, 184px)/.92 var(--display) !important; letter-spacing: -.035em !important; color: #fff; margin: 0; display: grid; }
.hf-title span { display: block; animation: hf-rise 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--n) * .14s); }
.hf-title span:last-child { color: #3fb3bd; }
@keyframes hf-rise { from { opacity: .001; transform: translateY(40px); } }
.hf-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding-block: clamp(40px, 6vw, 80px) 0; }
.hf-intro .lead { max-width: 46ch; }
@media (max-width: 700px) { .hf-intro { grid-template-columns: 1fr; } .hero-full { height: 78vh; } }

/* Startbild: Projekte-Knopf rechts unten auf dem Foto */
.hf-inner { justify-content: space-between; gap: 24px; }
.hf-cta { flex: none; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; width: 168px; height: 168px; padding: 24px; border-radius: 50%; background: rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .45); color: #fff; text-decoration: none; align-content: center; justify-content: center; transition: background .35s, transform .45s cubic-bezier(.3, 1.5, .5, 1), color .35s; }
.hf-cta-n { font: 300 44px/1 var(--display); grid-row: 1 / 3; }
.hf-cta-t { font: 400 var(--t-xs)/1.35 var(--display) !important; letter-spacing: var(--track); text-transform: uppercase; }
.hf-cta-a { font-size: 18px; transition: transform .35s; }
.hf-cta:hover, .hf-cta:focus-visible { background: #fff; color: #008193; transform: scale(1.06) rotate(-4deg); }
.hf-cta:hover .hf-cta-a { transform: translateX(6px); }
@media (max-width: 700px) { .hf-inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; } .hf-cta { width: 128px; height: 128px; padding: 18px; } .hf-cta-n { font-size: 34px; } }
.hero-full + section { padding-top: clamp(64px, 8vw, 120px); }

/* Footer als digitale Visitenkarte */
.cfoot { background: #262b2c; color: #e6ebea; margin-top: clamp(56px, 8vw, 110px); padding-top: clamp(48px, 6vw, 88px); }
.cf-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 56px); align-items: center; }
.cf-card { position: relative; border-radius: 14px; padding: 30px 28px 26px; color: #fff; background: linear-gradient(160deg, #00a0b4 0%, #008193 45%, #005f6c 100%); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7); display: grid; gap: 24px; transition: transform .25s ease-out; transform-style: preserve-3d; overflow: hidden; }
.cf-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); pointer-events: none; }
.cf-plate { justify-self: start; display: grid; gap: 10px; background: #fff; padding: 16px 18px 12px; border-radius: 6px; transform: translateZ(30px); box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 14px 28px rgba(0, 30, 36, .35); }
.cf-plate .logo-mark { width: 74px; }
.cf-plate .logo-type { height: 10px; }
.cf-person { display: grid; gap: 6px; transform: translateZ(20px); }
.cf-person strong { font: 300 clamp(28px, 2.6vw, 36px)/1.1 var(--display); letter-spacing: -.01em; }
.cf-person span { font-size: 14.5px; opacity: .9; }
.cf-rows { display: grid; gap: 6px; }
.cf-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cf-row:last-child { border-bottom: 0; }
.cf-row small { display: block; font-size: 12px; color: #9fb0af; letter-spacing: .04em; }
.cf-row span:last-child { font-size: 16px; line-height: 1.35; }
.cf-ic { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 129, 147, .22); color: #6fd0d8; transition: background .25s, color .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.cf-ic svg { width: 19px; height: 19px; }
a.cf-row:hover .cf-ic { background: #008193; color: #fff; transform: scale(1.08); }
a.cf-row:hover span:last-child { color: #9fe0e5; }
.cf-side { display: grid; gap: 18px; justify-items: center; }
.cf-qr { display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 12.5px; color: #9fb0af; line-height: 1.4; }
.cf-qr-code { width: 172px; aspect-ratio: 1; max-width: 100%; background: #fff; padding: 12px; border-radius: 12px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.cf-qr-code:hover { transform: scale(1.06) rotate(2deg); }
.cf-qr-code svg { display: block; width: 100%; height: 100%; }
.cf-ig { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 14.5px; }
.cf-ig .ig-logo { width: 34px; height: 34px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.cf-ig:hover .ig-logo { transform: scale(1.1) rotate(-6deg); }
@media (max-width: 980px) { .cf-grid { grid-template-columns: 1fr 1fr; } .cf-side { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 28px; } }
@media (max-width: 620px) { .cf-grid { grid-template-columns: 1fr; } .cf-side { grid-template-columns: 1fr; justify-items: start; } }

/* Feiner und leiser: grosse Titel kleiner, dünn und im Logo-Petrol (Wunsch des Architekten) */
:root { --t-xl: clamp(44px, 6.2vw, 100px); --t-l: clamp(26px, 2.7vw, 38px); }
h1, .p-hero h1 { font: 300 var(--t-l)/1.15 var(--display) !important; letter-spacing: 0 !important; color: var(--teal); }
h2, h2[style] { font-weight: 300 !important; color: var(--teal); }
.page-head { gap: 14px; padding-block: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 36px); }
.hero-full h1.hf-title { font: 300 var(--t-xl)/1 var(--display) !important; letter-spacing: -.02em !important; color: #fff; }
.hf-title span:last-child { color: #7fd3da; }
/* Runder Knopf: Text mittig, Pfeil darunter */
.hf-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; width: 150px; height: 150px; padding: 18px; }
.hf-cta-t { line-height: 1.5 !important; }
.hf-cta:hover .hf-cta-a { transform: translateX(5px); }
@media (max-width: 700px) { .hf-cta { width: 118px; height: 118px; } }
/* Kopfzeile durchscheinender, Inhalt schimmert weich durch */
.topbar { background: color-mix(in srgb, var(--paper) 58%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.topbar.scrolled { border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }

/* Kopfzeile schon beim Start durchscheinend: Startbild liegt dahinter */
.topbar { background: color-mix(in srgb, var(--paper) 45%, transparent); }
.hero-full { margin-top: calc(-1 * var(--tb-h, 76px)); height: calc(min(86vh, 920px) + var(--tb-h, 76px)); }
/* Runder Knopf: beim Darüberfahren nur leicht heller, bleibt durchsichtig */
.hf-cta:hover, .hf-cta:focus-visible { background: rgba(255, 255, 255, .26); color: #fff; border-color: rgba(255, 255, 255, .75); }
.hf-cta-t { font-size: var(--t-s) !important; }
.hf-cta { width: 164px; height: 164px; }
/* Hauptkapitel (Projekte, Büro, Kontakt) klar grösser als Zwischentitel wie «Kaspar Huggler» */
h2, h2[style] { font: 300 var(--t-m)/1.3 var(--display) !important; color: var(--teal); letter-spacing: 0 !important; }
/* Mehr Luft nach den Hauptkapiteln */
.page-head { padding-bottom: clamp(44px, 6vw, 88px); }
.p-hero { padding-bottom: clamp(40px, 5vw, 72px); }
/* Hauptkapitel: Luft zwischen Titel und Inhalt */
.page-head { gap: 16px; }
.page-head h1 { margin-bottom: clamp(18px, 2.6vw, 36px); }
/* Petrol-Band: Spruch wieder sichtbar (weiss auf Petrol) und als grosser feiner Satz */
.band h2, .band h2[style] { font: 300 var(--t-l)/1.15 var(--display) !important; color: #fff !important; }
.band-grid > * { min-width: 0; }
/* Kopfzeile wieder etwas dichter, damit das Logo klar lesbar bleibt */
.topbar { background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
/* Grosse Stufe XL (wie «Planen. Bauen. Wohnen.») für Slogans und die drei Hauptkapitel */
.page-head h1 { font: 300 var(--t-xl)/1 var(--display) !important; letter-spacing: -.02em !important; color: var(--teal); }
.band h2, .band h2[style] { font: 300 var(--t-xl)/1 var(--display) !important; letter-spacing: -.02em !important; color: #fff !important; }
.band-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 800px) { .band-grid { grid-template-columns: 1fr; } }
/* Projektkacheln: Ort klein als Beschriftung, Objektbezeichnung als Titel, ohne Abstand dazwischen */
.pcard { gap: 0; }
.pcard .row { margin-top: 14px; align-items: center; }
.pcard h3 { font: 400 var(--t-xs)/1.4 var(--display) !important; letter-spacing: var(--track) !important; text-transform: uppercase !important; color: var(--teal); }
.pcard p { font: 300 var(--t-m)/1.3 var(--display) !important; color: var(--ink); margin-top: 2px; }
/* Projektkacheln wie die News: ohne Kategorie-Kästchen */
.pcard .cat { display: none; }

/* News: Titel und Text näher zusammen */
.news-card { gap: 0; }
.news-card .meta { margin-top: 18px; }
.news-card h3 { margin-top: 4px; }
.news-card p { margin-top: 6px; }
.news-card .link-arrow { margin-top: 18px; }

/* Leichte, aber auffällige Links: Kreis mit Pfeil, der beim Darüberfahren Petrol wird und kippt */
.news-card .link-arrow { display: inline-flex; align-items: center; gap: 14px; position: relative; padding-bottom: 2px; }
.news-card .link-arrow::after { content: "→"; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent); font-size: 16px; letter-spacing: 0; transition: background .35s, color .35s, border-color .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.news-card:hover .link-arrow::after, .news-card:focus-visible .link-arrow::after { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateX(6px) rotate(-45deg); }
.news-card .link-arrow::before { content: ""; position: absolute; left: 0; bottom: 8px; height: 1px; width: 0; background: currentColor; transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.news-card:hover .link-arrow::before { width: calc(100% - 56px); }
/* Porträt: schmale, leichte Namensleiste ganz unten, frei vom Gesicht */
.profile .portrait .tag { left: 0; right: auto; bottom: 0; display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; background: color-mix(in srgb, #008193 68%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.profile .portrait .tag .label { font-size: 11px !important; opacity: .85; }
.profile .portrait .tag strong { font: 400 var(--t-s)/1.2 var(--display) !important; letter-spacing: 0 !important; }

/* Footer ruhiger: eine Schriftgrösse und Farbe für alles (wie Impressum), Logo grösser, Name kleiner */
.cfoot, .cfoot p, .cfoot span, .cfoot small, .cfoot a { font-size: var(--t-xs) !important; }
.cfoot { --f-col: #c8d1d0; color: var(--f-col); }
.cf-row, .cf-row span:last-child, .cf-qr, .cf-person span, .df-small, .df-links a { color: var(--f-col) !important; letter-spacing: .04em; }
.cf-row small, .cf-qr span { text-transform: uppercase; letter-spacing: var(--track) !important; color: #8c9a99 !important; margin-bottom: 3px; }
.cf-row span:last-child { line-height: 1.5; }
a.cf-row:hover span:last-child { color: #fff !important; }
.cf-plate { padding: 20px 22px 14px; }
.cf-plate .logo-mark { width: 120px; }
.cf-plate .logo-type { height: 15px; }
.cf-person strong { font: 300 var(--t-m)/1.25 var(--display) !important; color: #fff; }
.cf-person span { color: rgba(255, 255, 255, .85) !important; }
/* Rechte Spalte: QR-Code und Instagram sauber untereinander, gleiche Achse */
.cf-side { gap: 16px; justify-items: center; align-content: center; }
.cf-qr { gap: 12px; }
.cf-qr-code { width: 140px; padding: 10px; border-radius: 10px; }
.cf-ig { width: 40px; height: 40px; display: grid; place-items: center; }
.cf-ig .ig-logo { width: 40px; height: 40px; }
@media (max-width: 980px) { .cf-side { grid-template-columns: auto auto; justify-content: start; align-items: end; } }
@media (max-width: 620px) { .cf-side { grid-template-columns: auto auto; } }

/* Fliesstext überall wie bei den Leistungen («Machbarkeitsstudien …»): 16 px, normal, gedämpftes Grau */
p, dd, li, .lead, .intro .lead, .p-text .lead, .page-head .lead, .profile .cv .lead, .timeline li span, .gvb p, .band-facts p, .news-card p, .pcard p, .kv dd, .prose p {
  font: 400 var(--t-s)/1.7 var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mute);
}
.band-facts p { color: rgba(255, 255, 255, .9); }
/* Steckbrief: Jahreszahlen in Fliesstext-Grösse, aber Petrol */
.timeline .y { font: 400 var(--t-s)/1.7 var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--teal) !important; }
/* Projektkacheln: nach dem Ort die Objektbezeichnung als Fliesstext */
.pcard p { margin-top: 2px; }

/* Slogan-Band (C- und D-Mix): Spruch feiner und kleiner, Text und Knopf rechts auf der Grundlinie der letzten Zeile */
.band { --band-fs: clamp(36px, 4.6vw, 72px); }
.band h2, .band h2[style] { font: 200 var(--band-fs)/1.04 var(--display) !important; letter-spacing: -.015em !important; color: #fff !important; margin: 0; }
.band-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: end; }
.band-facts { gap: 16px; margin-bottom: calc(var(--band-fs) * .2); }  /* Unterkante = Grundlinie von «Schlüsselübergabe.» */
/* «Das Büro» rund und durchscheinend wie «Projekte entdecken» */
.band .btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 132px; height: 132px; padding: 16px; margin-top: 10px; border-radius: 50%; text-align: center;
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), background .45s, border-color .45s; }
.band .btn::after { content: "→"; font-size: 16px; letter-spacing: 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.band .btn:hover, .band .btn:focus-visible { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .8); color: #fff; transform: scale(1.05); }
.band .btn:hover::after { transform: translateX(4px); }
@media (max-width: 800px) { .band-facts { margin-bottom: 0; } .band .btn { width: 112px; height: 112px; } }

/* News (C- und D-Mix): Links unten immer auf gleicher Höhe, auch bei kürzerem Text */
.news { align-items: stretch; }
.news-card { display: flex; flex-direction: column; height: 100%; }
.news-card .link-arrow { margin-top: auto; padding-top: 18px; align-self: flex-start; }
/* News-Beschriebe immer genau 3 Zeilen hoch (kürzere bekommen Leerraum, längere werden nach 3 Zeilen gekürzt) */
.news-card p { line-height: 1.7 !important; min-height: calc(3 * 1.7em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* Responsive-Feinschliff (C- und D-Mix) */
/* Text im Slogan-Band nie breiter als die Spalte (auf dem Handy wurde er rechts abgeschnitten) */
.band-facts { min-width: 0; }
.band-facts p { max-width: min(40ch, 100%); }
/* Touch-Geräte: Links gross genug zum Antippen (mind. ca. 44 px hoch) */
@media (pointer: coarse) {
  .df-links a, .lf-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .link-arrow.back { padding-block: 14px; }
  .addr a, .kv a, main p a[href^="tel:"], main p a[href^="mailto:"] { display: inline-block; padding-block: 8px; }
  .lf-contact a { display: inline-block; padding-block: 6px; }
}
@media (pointer: coarse) { .section-head .link-arrow { padding-block: 14px; } }
/* Slogan-Band auf Handy und kleinem Tablet einspaltig: Spruch oben, Text und Knopf darunter */
@media (max-width: 800px) { .band-grid { grid-template-columns: minmax(0, 1fr); } }


/* ===== Footer (C- und D-Mix): hoch, ruhig, alles mittig übereinander ===== */
/* Leichtes Anthrazit, eine Schrift. Alles übereinander zentriert: Logo, Name, die zwei Textblöcke am feinen Strich, QR-Code mit Instagram */
.lfoot { --lf-sq: 104px; background: #3a4142; color: rgba(255, 255, 255, .72); margin-top: clamp(48px, 7vw, 100px); }
.lfoot a { color: #6cc6cf; text-decoration: none; transition: color .25s; }
.lfoot a:hover { color: #fff; }
.lf-stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(28px, 3.6vw, 44px); padding-block: clamp(64px, 8vw, 112px) clamp(48px, 6vw, 80px); }
.lf-logo { display: block; width: var(--lf-sq); }
.lf-logo .logo-mark { width: 100%; }
.lf-name { display: grid; gap: 6px; margin-top: -8px; }
.lf-name strong { font: 300 var(--t-m)/1.3 var(--display); color: rgba(255, 255, 255, .78); }
.lf-name span, .lf-pair p { font: 400 var(--t-s)/1.75 var(--body) !important; color: rgba(255, 255, 255, .72); margin: 0; letter-spacing: 0 !important; text-transform: none !important; }
/* Zwei Blöcke à drei Zeilen: links rechtsbündig, rechts linksbündig, dazwischen ein feiner senkrechter Strich */
.lf-pair { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 680px); }
.lf-pair p { white-space: nowrap; }
.lf-adr { text-align: right; padding-right: clamp(20px, 3vw, 36px); border-right: 1px solid rgba(255, 255, 255, .22); }
.lf-contact { text-align: left; padding-left: clamp(20px, 3vw, 36px); }
.lf-contact span { display: inline-block; min-width: 4.2em; color: rgba(255, 255, 255, .45); }
/* QR-Code (auf weissem Quadrat, damit er sicher scannt) und darunter das Instagram-Logo */
.lf-scan { display: grid; justify-items: center; gap: 18px; }
.lf-qr { width: var(--lf-sq); aspect-ratio: 1; background: #fff; padding: 9px; box-sizing: border-box; }
.lf-qr svg { display: block; width: 100%; height: 100%; }
.lf-ig { display: inline-flex; }
.lf-ig .ig-logo { width: 26px; height: 26px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.lf-ig:hover .ig-logo { transform: scale(1.1); }
/* Unterste Zeile: zentriert, klein */
.lf-small { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 28px; padding-block: 18px 26px; border-top: 1px solid rgba(255, 255, 255, .12); font: 400 var(--t-xs)/1.5 var(--body); color: rgba(255, 255, 255, .5); }
.lf-links { display: flex; gap: 22px; }
@media (max-width: 560px) {
  .lf-pair { grid-template-columns: 1fr; gap: 18px; width: auto; }
  .lf-adr, .lf-contact { text-align: center; padding: 0; border: 0; }
  .lf-contact span { min-width: 0; margin-right: 6px; }
}
/* Raster geht direkt in den Footer über */
main:has(section > .strip-wrap) + #footer .lfoot { margin-top: 0; }
/* QR-Code mit schmalem weissem Rand, Hinweis darüber, Instagram grösser */
.lf-qr { padding: 4px; }
.lf-scan { gap: 14px; }
.lf-scan-t { font: 400 var(--t-xs)/1.4 var(--body); letter-spacing: var(--track); text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.lf-ig { margin-top: 8px; }
.lf-ig .ig-logo { width: 36px; height: 36px; }
/* Logo im Footer als 3D-Plättchen: Tiefe durch Schatten und Lichtkante, neigt sich beim Darüberfahren zur Maus */
.lf-logo { position: relative; transform: perspective(600px) rotateX(8deg) rotateY(-10deg); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .06), 14px 22px 40px -14px rgba(0, 0, 0, .6), 4px 6px 12px -4px rgba(0, 0, 0, .35); }
.lf-logo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .28), transparent 55%); mix-blend-mode: soft-light; }
.lf-logo:hover { box-shadow: 0 2px 0 rgba(255, 255, 255, .08), 18px 30px 50px -14px rgba(0, 0, 0, .65), 4px 8px 14px -4px rgba(0, 0, 0, .35); transition: transform .12s linear, box-shadow .5s; }
/* Logo-Plättchen in Ruhe gerade, Tiefe nur durch Schatten – Bewegung erst beim Darüberfahren */
.lf-logo { transform: none; }
/* Durchsichtiges Logo: Schatten und Lichtreflex folgen der Logoform statt dem Quadrat */
.lf-logo, .lf-logo:hover { box-shadow: none; filter: drop-shadow(12px 18px 22px rgba(0, 0, 0, .45)) drop-shadow(3px 5px 6px rgba(0, 0, 0, .3)); }
.lf-logo::after { -webkit-mask: url("/assets/logo/huggler-logo-transparent.png") left top / 100% auto no-repeat; mask: url("/assets/logo/huggler-logo-transparent.png") left top / 100% auto no-repeat; }
/* Wie auf der bisherigen Website: alle Angaben zentriert untereinander, ohne Trennstrich */
.lf-pair { grid-template-columns: 1fr; gap: 22px; width: auto; }
.lf-adr, .lf-contact { text-align: center; padding: 0; border: 0; }
.lf-contact span { min-width: 0; margin-right: 6px; }

/* Kopfzeile: Hamburger mit drei feinen Strichen in Huggler-Petrol */
.menu-btn span:not(.sr) { height: 1.5px; left: 11px; right: 11px; background: var(--teal); border-radius: 1px; transition: transform .3s, opacity .2s; }
.menu-btn span:nth-child(1) { top: 15px; } .menu-btn span:nth-child(2) { top: 21px; } .menu-btn span:nth-child(3) { top: 27px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: none; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Home-Symbol rechts neben «Kontakt»: fein, in Petrol, führt zur Startseite */
.nav-home { display: inline-flex; align-items: center; color: var(--teal); }
.nav-home::after { display: none; }
.nav-home svg { width: 21px; height: 21px; fill: none; stroke: var(--teal); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.nav-home:hover svg { transform: translateY(-2px); }
.nav-home span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) {
  /* im Handy-Menü als eigene Zeile mit Symbol und Wort */
  .nav-home { gap: 12px; }
  .nav-home span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav-home svg { width: 26px; height: 26px; }
}
/* Home-Symbol optisch genau auf die Mitte der Grossbuchstaben von «Kontakt» */
@media (min-width: 721px) { .nav-home { align-self: center; } .nav-home svg { position: relative; top: -3px; } }


/* ===== Referenz-Objekte (C- und D-Mix): laufendes Bildband mit Pfeilen auf zartem Petrol-Grund ===== */
/* Impressionen: laufen langsam seitwärts, feine runde Pfeile links und rechts zeigen, dass es weitergeht */
.strip-wrap { position: relative; }
.strip-wrap .strip { scroll-snap-type: none; scrollbar-width: none; }
.strip-wrap .strip::-webkit-scrollbar { display: none; }
.strip-nav { position: absolute; top: calc(50% - 7px); z-index: 2; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 16px; cursor: pointer; transition: opacity .35s, transform .45s cubic-bezier(.2, .7, .2, 1), background .35s; }
.strip-nav.prev { left: 14px; }
.strip-nav.next { right: 14px; }
.strip-nav:hover, .strip-nav:focus-visible { background: rgba(255, 255, 255, .3); transform: scale(1.08); }
.strip-wrap.at-start .strip-nav.prev, .strip-wrap.at-end .strip-nav.next { opacity: .25; }
/* Kapitel «Aus dem Büro» abgesetzt: heller Grund mit feinem Planraster wie Millimeterpapier, über die ganze Breite */
section:has(> .strip-wrap) { position: relative; isolation: isolate; padding-block: clamp(64px, 8vw, 112px) !important; }
section:has(> .strip-wrap)::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0;
  background-color: #fbfcfc;
  background-image: linear-gradient(rgba(0, 129, 147, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 129, 147, .07) 1px, transparent 1px),
    linear-gradient(rgba(0, 129, 147, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 129, 147, .035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px;
  border-top: 1px solid rgba(0, 129, 147, .18); border-bottom: 1px solid rgba(0, 129, 147, .18); }
section:has(> .strip-wrap)::before {
  background-image: linear-gradient(rgba(0, 129, 147, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 129, 147, .12) 1px, transparent 1px),
    linear-gradient(rgba(0, 129, 147, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 129, 147, .055) 1px, transparent 1px); border-bottom: 0; }
/* Häuschenpapier: kleine, gleichmässige Häuschen, alle im selben feinen Petrol */
section:has(> .strip-wrap)::before {
  background-image: linear-gradient(rgba(0, 129, 147, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 129, 147, .09) 1px, transparent 1px);
  background-size: 10px 10px; background-position: -1px -1px; }
/* Häuschenpapier: ganz zarter Petrol-Grund, Linien nur noch hauchfein darüber */
section:has(> .strip-wrap)::before { background-color: color-mix(in srgb, #008193 5%, #fbfcfc);
  background-image: linear-gradient(rgba(0, 129, 147, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 129, 147, .05) 1px, transparent 1px); }
/* Referenz-Objekte: nur der zarte Petrol-Grund, ohne Häuschen-Linien */
section:has(> .strip-wrap)::before { background-image: none; }
/* Handy-Menü: «Willkommen» (zur Startseite) etwa zwei Drittel so gross wie die Menüpunkte */
@media (max-width: 720px) {
  .nav a.nav-home { font-size: calc(var(--t-l) * .66) !important; }
  .nav-home svg { width: 20px; height: 20px; }
}
/* Weniger Luft zwischen den Projekten und den Referenz-Objekten (Luft ja, aber nicht so viel) */
.section:has(+ section > .strip-wrap) { padding-bottom: clamp(36px, 4.5vw, 64px); }
section:has(> .strip-wrap) { padding-block: clamp(36px, 4.5vw, 64px) !important; }
/* Handy: alle Menüpunkte gleich gross wie «Willkommen», Kopfzeile etwas höher, Schriftzug grösser */
@media (max-width: 720px) {
  .nav a, .nav a.nav-home { font-size: calc(var(--t-l) * .66) !important; padding-block: 14px; }
  .nav-home svg { width: 18px; height: 18px; }
  .topbar { padding-top: max(19px, env(safe-area-inset-top, 0px)); padding-bottom: 19px; }
  .nav { inset: calc(86px + env(safe-area-inset-top, 0px)) 0 auto 0 !important; }
}
@media (max-width: 560px) { .brand .logo-type { height: 16px; } }
@media (max-width: 360px) { .brand .logo-type { height: 13px; } }
/* Schriftzug in der Kopfzeile: etwas kleiner und genau auf der Höhe der Menütexte rechts */
@media (min-width: 721px) { .brand .logo-type { height: 21px; position: relative; top: -7px; } }
/* Handy-Menü (Dropdown): durchscheinend wie die Kopfzeile, Inhalt schimmert weich durch */
@media (max-width: 720px) {
  .nav { background: color-mix(in srgb, var(--paper) 74%, transparent) !important; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }
}
/* Damit das Menü den Inhalt dahinter weich zeichnen kann, gibt die Kopfzeile ihren eigenen Weichzeichner ab, solange das Menü offen ist */
@media (max-width: 720px) {
  .topbar:has(.nav.open) { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--paper) 92%, transparent); }
}
/* Handy-Menü: «Willkommen» ohne Häuschen und in derselben Farbe wie die anderen Menüpunkte */
@media (max-width: 720px) {
  .nav a.nav-home { color: var(--ink); }
  .nav-home svg { display: none; }
}
/* Handy: Kopfzeile und Menü durchsichtiger. Der Glas-Effekt der Kopfzeile liegt auf einer eigenen Ebene,
   damit auch das Menü darunter weichzeichnen kann (sonst blockieren sich die beiden Weichzeichner) */
@media (max-width: 720px) {
  .topbar, .topbar:has(.nav.open) { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--paper) 60%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
  .nav { background: color-mix(in srgb, var(--paper) 58%, transparent) !important; }
}

/* Startseite (C- und D-Mix): alle Abstände zwischen den Kapiteln einheitlich und knapper,
   so wie zwischen den Projekten und den Referenz-Objekten */
main:has(.hero-full, .hero-d) { --sec-gap: clamp(36px, 4.5vw, 64px); }
main:has(.hero-full, .hero-d) > section { padding-top: var(--sec-gap) !important; padding-bottom: var(--sec-gap) !important; }
main:has(.hero-full, .hero-d) > section.hero-full, main:has(.hero-full, .hero-d) > section.hero-d { padding-bottom: 0 !important; }
main:has(.hero-full) > section.hero-full { padding-top: 0 !important; }
main:has(.hero-full, .hero-d) .band-grid { padding-block: var(--sec-gap); }
main:has(.hero-full, .hero-d) > section.band { padding-block: 0 !important; }

/* ===== Kopfzeile wie der Knopf «Projekte entdecken»: Glas – leicht weiss getönt, stark weichgezeichnet, feine helle Linie =====
   Über dem dunklen Startbild ist die Schrift weiss, über hellem Grund wieder Petrol/dunkel. */
.topbar { background: rgba(255, 255, 255, .14); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, .45); box-shadow: none; transition: border-color .3s, background .3s; }
.topbar:not(.on-hero) { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.topbar.on-hero .nav a { color: #fff; }
.topbar.on-hero .nav a::after { background: #fff; }
.topbar.on-hero .logo-type { filter: brightness(0) invert(1); }
.topbar.on-hero .nav-home svg { stroke: #fff; }
.topbar.on-hero .menu-btn span:not(.sr) { background: #fff; }
@media (max-width: 720px) {
  .topbar::before { background: rgba(255, 255, 255, .14); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
  /* Menü offen: Schrift im Menü immer dunkel (Menü liegt auf hellem Glas) */
  .topbar.on-hero .nav a { color: var(--ink); }
}
/* Runder Knopf im Startbild: Schrift gleich gross, Kreis enger um den Text (weniger Luft) */
.hero-full .hf-cta { width: 138px; height: 138px; padding: 10px; gap: 6px; }
/* «Projekte entdecken» ohne Pfeil, Text genau in der Kreismitte; Kreis auf Tablet und Handy schrittweise kleiner */
.hero-full .hf-cta-a { display: none; }
.hero-full .hf-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; padding: 0; width: 132px; height: 132px; }
.hero-full .hf-cta-t { display: block; margin: 0; }
@media (max-width: 1024px) { .hero-full .hf-cta { width: 124px; height: 124px; } }
@media (max-width: 700px) { .hero-full .hf-cta { width: 108px; height: 108px; } .hero-full .hf-cta-t { font-size: 13.5px !important; } }
/* Startbild: Abdunkelung links und unten etwa halb so stark – Foto wirkt natürlicher, Leitsatz bleibt lesbar */
.hf-shade { background: linear-gradient(90deg, rgba(12, 22, 22, .3), rgba(12, 22, 22, .08) 50%, rgba(12, 22, 22, 0) 75%), linear-gradient(0deg, rgba(12, 22, 22, .28), rgba(12, 22, 22, 0) 45%); }
.hf-title { text-shadow: 0 1px 18px rgba(0, 0, 0, .18); }
/* Kopfzeile über dem Startbild: mehr Weiss im Glas, dafür bleiben Schriftzug und Menü in Huggler-Petrol bzw. dunkel */
.topbar.on-hero { background: rgba(255, 255, 255, .5); border-bottom-color: rgba(255, 255, 255, .6); }
.topbar.on-hero .logo-type { filter: none; }
.topbar.on-hero .nav a { color: var(--ink); }
.topbar.on-hero .nav a::after { background: var(--teal); }
.topbar.on-hero .nav-home svg { stroke: var(--teal); }
.topbar.on-hero .menu-btn span:not(.sr) { background: var(--teal); }
@media (max-width: 720px) { .topbar.on-hero::before { background: rgba(255, 255, 255, .5); } }
/* Linie unter der Kopfzeile: ganz fein in Anthrazit statt weiss */
.topbar, .topbar.on-hero, .topbar:not(.on-hero) { border-bottom: 1px solid rgba(58, 65, 66, .14); }
/* Seitentitel Projekte, Büro, Kontakt (C- und D-Mix): gleich wie «Wohnen» – ganz fein, gross, Petrol */
.page-head h1 { font: 100 clamp(40px, 6.85vw, 122px)/1 var(--display) !important; letter-spacing: -.02em !important; color: var(--teal) !important; }
/* Projektseite: kein Angaben-Block mehr, die Objektbezeichnung steht links direkt unter dem Ort */
.p-hero h1 { grid-column: 1 / -1; margin-bottom: 0; }
.p-sub { grid-column: 1 / -1; margin: -12px 0 0; font: 300 var(--t-m)/1.35 var(--display) !important; color: var(--ink); letter-spacing: 0; }
/* Alle Trennlinien (Leistungen, Werdegang) gleich: ganz fein, in Huggler-Petrol */
:root { --hair: rgba(0, 129, 147, .38); }
.services { border-top: 1px solid var(--hair); }
.service + .service { border-left: 1px solid var(--hair); }
@media (max-width: 760px) { .service + .service { border-left: 0; border-top: 1px solid var(--hair); } }
.timeline { border-top: 1px solid var(--hair); }
.timeline li { border-bottom: 1px solid var(--hair); }
/* Kopfzeile Computer: mehr Luft («flauschig»), Logo grösser. Schriftzug genau auf der Mitte des Logoquadrats,
   Menütexte und Häuschen rechts auf derselben Mittellinie */
@media (min-width: 721px) {
  .topbar { padding-top: 22px; padding-bottom: 22px; }
  .brand .logo-mark { width: 58px; }
  .brand .logo-type { height: 21px; top: -4px; }
  .nav a { position: relative; top: 3px; }
}

/* ===== Überall: kein Schwarz mehr – Text in Anthrazit, alle Linien ganz fein in Huggler-Petrol (wie auf der Büro-Seite) ===== */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --ink: #3a4142; --line: rgba(0, 129, 147, .38); } }
:root[data-theme="light"] { --ink: #3a4142; --line: rgba(0, 129, 147, .38); }
.planlist, .p-hero dl, .p-nav, .kv, .plankopf, .services, .timeline { border-top: 1px solid var(--hair) !important; }
.field input, .field textarea { border-bottom: 1px solid var(--hair) !important; }
.kv dt, .kv dd, .p-nav a, .planlist li, .timeline li { border-color: var(--hair); }
.ph, .p-cover, .gallery button, .pcard .ph, .strip button, .news-card .ph { background-color: #e6ecec; }
/* Kleine Grossbuchstaben-Texte (Menü, Kicker, Links, Beschriftungen) überall 1 pt grösser: 13 → 14 px */
:root { --t-xs: 14px; }
/* Handy-Menü: Menütitel in genau derselben Schrift wie am Computer (klein, Grossbuchstaben, Laufweite) */
@media (max-width: 720px) {
  .nav a, .nav a.nav-home { font: 400 var(--t-xs)/1.4 var(--display) !important; letter-spacing: var(--track) !important; text-transform: uppercase !important; padding-block: 16px; }
}
/* Handy hat kein «Darüberfahren»: Menüpunkte reagieren beim Antippen (Petrol, rücken leicht ein),
   die aktuelle Seite ist in Petrol mit feinem Strich davor markiert */
@media (max-width: 720px) {
  .nav a { transition: color .2s, padding-left .25s cubic-bezier(.2, .7, .2, 1); -webkit-tap-highlight-color: transparent; }
  .nav a:active, .nav a:focus-visible { color: var(--teal) !important; padding-left: 10px; }
  .nav a.active { color: var(--teal) !important; }
  .nav a.active::before { content: ""; display: inline-block; width: 16px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--teal); }
}
/* Touch allgemein: Karten und Bilder geben beim Antippen ein kleines Echo */
@media (hover: none) {
  .pcard, .news-card, .strip button, .gallery button { transition: transform .2s; -webkit-tap-highlight-color: transparent; }
  .pcard:active, .news-card:active, .strip button:active, .gallery button:active { transform: scale(.985); }
  .hf-cta:active, .band .btn:active { transform: scale(.96); }
}
/* Handy-Menü: «Willkommen» zuoberst */
@media (max-width: 720px) { .nav a.nav-home { order: -1; } }
/* Handy-Menü: Trennstriche zwischen den Menüpunkten viel feiner (Haarlinie, zart) */
@media (max-width: 720px) { .nav a { border-bottom: 0.5px solid rgba(0, 129, 147, .22) !important; } .nav { border-bottom: 0.5px solid rgba(0, 129, 147, .22) !important; } }

/* ===== Überall ganz feine Linien (Computer, Tablet, Handy): zartes Petrol; auf scharfen Bildschirmen echte Haarlinien (0,5 px) ===== */
:root { --hair: rgba(0, 129, 147, .24); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --line: rgba(0, 129, 147, .24); } }
:root[data-theme="light"] { --line: rgba(0, 129, 147, .24); }
@media (min-resolution: 2dppx) {
  .services, .timeline, .planlist, .p-hero dl, .p-nav, .kv, .plankopf { border-top-width: .5px !important; }
  .service + .service { border-left-width: .5px !important; border-top-width: .5px !important; }
  .timeline li, .kv dt, .kv dd, .p-nav a, .planlist li, .field input, .field textarea, .nav a, .nav { border-bottom-width: .5px !important; }
  .topbar, .topbar.on-hero, .topbar:not(.on-hero) { border-bottom-width: .5px !important; }
  section:has(> .strip-wrap)::before { border-top-width: .5px; }
  .lf-small { border-top-width: .5px; }
  .news-card .link-arrow::after, .section-head .link-arrow::after, .strip-nav, .hf-cta, .band .btn { border-width: .5px; }
}
/* Verlinkte E-Mail und Telefon im Fliesstext: Petrol, fein unterstrichen */
.gvb p a, .p-text a:not(.btn) { color: var(--teal); text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 3px; }

/* ===== Links überall ohne Unterstreichung: Farbe je nach Hintergrund, beim Darüberfahren sanfter Farbwechsel ===== */
main a:not(.btn):not(.hf-cta), footer a { text-decoration: none !important; }
/* heller Grund: Petrol → beim Darüberfahren Anthrazit */
main p a, main dd a, main li a, .kv a, .gvb p a, .p-text a:not(.btn), .field a, .form-note a, small a { color: var(--teal); transition: color .25s; }
main p a:hover, main dd a:hover, main li a:hover, .kv a:hover, .gvb p a:hover, .p-text a:not(.btn):hover, .field a:hover, small a:hover { color: var(--ink); }
/* dunkler Grund (Footer, Petrol-Band): helles Petrol → beim Darüberfahren Weiss */
.lfoot a, .band a:not(.btn) { color: #6cc6cf; }
.lfoot a:hover, .band a:not(.btn):hover { color: #fff; }
/* Kontakt: Formular-Kasten oben bündig mit «Huggler Architektur GmbH», unten auf der Flucht des Kartenkastens.
   Das Nachrichtenfeld wächst mit, der Knopf steht unten */
.contact { align-items: stretch; }
.contact .form { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.contact .form .field:has(textarea) { flex: 1; display: flex; flex-direction: column; }
.contact .form textarea { flex: 1; min-height: 140px; }

/* ===== Projekt-Galerie C-Mix: «Der Fächer» =====
   Schlanke, gleich grosse Streifen – fünf pro Reihe. Darüberfahren öffnet einen Streifen sanft zum ganzen Bild,
   die Nachbarn rücken zusammen und bleiben farbig. Beim Hineinscrollen wachsen die Streifen von unten. */
.gallery.gf { display: grid; gap: clamp(6px, .8vw, 10px); padding-block: clamp(8px, 2vw, 24px) clamp(40px, 5vw, 72px); }
.gf-row { display: flex; gap: clamp(6px, .8vw, 10px); height: clamp(240px, 30vw, 430px); }
.gf-row button { position: relative; flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; cursor: zoom-in; transition: flex-grow .8s cubic-bezier(.2, .7, .2, 1), clip-path 1s cubic-bezier(.7, 0, .2, 1) var(--d, 0ms); }
.gf-row button img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .gf-row button:hover, .gf-row button:focus-visible { flex-grow: 3.4; }
  .gf-row button:hover img { transform: scale(1.04); }
}
.gf.js-reveal button { clip-path: inset(100% 0 0 0); }
.gf.js-reveal button img { transform: scale(1.15); }
.gf.js-reveal button.in { clip-path: inset(0 0 0 0); }
.gf.js-reveal button.in img { transform: none; }
@media (max-width: 640px) {
  .gallery.gf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gf-row { display: contents; }
  .gf-row button { aspect-ratio: 4 / 3; flex: none; }
}
/* Fächer mit Huggler-Petrol: breiter Sockel über die ganze Breite hinter den Streifen,
   beim Öffnen wächst oben links ein kleines Petrol-Quadrat hinein (Anspielung auf das Logo) */
.gallery.gf { position: relative; isolation: isolate; }
.gallery.gf::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; translate: -50% 0; top: clamp(90px, 12vw, 170px); bottom: 0; background: #008193; }
.gf-row button::after { content: ""; position: absolute; left: 0; top: 0; width: clamp(22px, 2.4vw, 34px); height: clamp(22px, 2.4vw, 34px); background: #008193; transform: scale(0); transform-origin: left top; transition: transform .6s cubic-bezier(.2, .7, .2, 1) .1s; }
@media (hover: hover) { .gf-row button:hover::after, .gf-row button:focus-visible::after { transform: scale(1); } }
/* Abstand nach der Galerie, damit der Sockel unten sauber ausläuft */
.gallery.gf { padding-bottom: clamp(48px, 6vw, 96px); }
.gallery.gf + .p-nav, .gallery.gf ~ .p-nav { margin-top: clamp(32px, 4vw, 56px); }
main { overflow-x: clip; }  /* Petrol-Flächen über die ganze Breite ohne seitliches Scrollen */
/* Kopfzeile: Logo links und Häuschen rechts genau auf der senkrechten Flucht der Inhalte (Titel, Bilder) */
.topbar { padding-left: calc(max(0px, (100% - var(--maxw)) / 2) + max(var(--gutter), env(safe-area-inset-left, 0px))) !important;
  padding-right: calc(max(0px, (100% - var(--maxw)) / 2) + max(var(--gutter), env(safe-area-inset-right, 0px))) !important; }
/* Handy: Hamburger-Striche rechts genau auf der Flucht der Inhalte */
@media (max-width: 720px) { .menu-btn { margin-right: -11px; } }
/* Fächer: Petrol-Sockel etwas transparenter */
.gallery.gf::before { background: rgba(0, 129, 147, .62); }
/* Vorheriges / Nächstes: keine waagrechte Linie mehr; die senkrechte Linie in der Mitte reicht nach oben bis in den Petrol-Sockel */
.p-nav { position: relative; border-top: 0 !important; }
.p-nav a + a { border-left: 0 !important; }
.p-nav::before { content: ""; position: absolute; left: 50%; bottom: 0; top: 0; width: 1px; background: var(--hair); pointer-events: none; }
.gallery.gf ~ .p-nav::before { --up: calc(clamp(32px, 4vw, 56px) + clamp(40px, 5vw, 72px));
  top: calc(-1 * var(--up)); background: linear-gradient(to bottom, rgba(255, 255, 255, .7) 0 calc(var(--up) - clamp(32px, 4vw, 56px)), var(--hair) 0); }
@media (min-resolution: 2dppx) { .p-nav::before { width: .5px; } }
/* Fächer: Petrol-Sockel nochmals halb so stark (25 % Deckkraft) (das Logo-Quadrat bleibt voll in Logofarbe) */
.gallery.gf::before { background: rgba(0, 129, 147, .25); }
/* Handy: nie ein Bild allein auf einer Zeile */
@media (max-width: 640px) {
  .gallery.gf { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gf-row button { grid-column: span var(--s2, 6); }
}
/* Ecke beim Darüberfahren: das durchsichtige h-Logo aus der Kopfzeile statt eines vollen Quadrats (gleiche Grösse) */
.gf-row button::after { background: url("/assets/logo/huggler-logo-transparent.png") left top / 100% auto no-repeat; aspect-ratio: 735 / 734; height: auto; }
/* Footer: Logo und Texte nach oben geschoben, ein Viertel des Logos ragt über die Footer-Kante hinaus (das h bleibt im Footer) */
.lf-stack { padding-top: 0; position: relative; z-index: 2; }
.lf-logo { margin-top: calc(var(--lf-sq) * -.25); }
/* Fächer-Sockel im genau gleichen zarten Petrol-Grund wie die Referenz-Objekte auf der Startseite */
.gallery.gf::before { background: color-mix(in srgb, #008193 5%, #fbfcfc); }
/* auf dem hellen Grund ist die verlängerte Trennlinie durchgehend in feinem Petrol (statt weiss) */
.gallery.gf ~ .p-nav::before { background: var(--hair); }
/* Footer-Logo: die Oberkante des h liegt genau auf der Footer-Kante (h beginnt bei 221 von 735 px Logobreite) */
.lf-logo { margin-top: calc(var(--lf-sq) * -221 / 735); }
/* Fächer-Sockel: etwas kräftiger (15 % Petrol statt 5 %) */
.gallery.gf::before { background: color-mix(in srgb, #008193 15%, #fbfcfc); }
/* Referenz-Objekte im gleichen Grün wie der Galerie-Sockel (15 % Petrol) */
section:has(> .strip-wrap)::before { background-color: color-mix(in srgb, #008193 15%, #fbfcfc); }
/* «Wohnen.» im Startbild im originalen Huggler-Grün */
.hf-title span:last-child { color: #008193; }
/* Seitentitel Projekte / Büro / Kontakt rund 35 % kleiner */
.page-head h1 { font-size: clamp(26px, 4.45vw, 79px) !important; }
/* Footer: drei gleich grosse Symbole aus der Mail-Signatur, je mit Titel darunter */
.lf-icons { display: flex; justify-content: center; gap: clamp(28px, 5vw, 64px); flex-wrap: wrap; }
.lf-icons a { display: grid; justify-items: center; gap: 10px; width: 120px; text-align: center; text-decoration: none !important; color: rgba(255, 255, 255, .85) !important; font: 400 var(--t-xs)/1.3 var(--body); letter-spacing: var(--track); }
.lf-icons img { display: block; width: 48px; height: 48px; border-radius: 10px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.lf-icons a:hover img, .lf-icons a:focus-visible img { transform: translateY(-3px) scale(1.06); }
.lf-icons a:hover, .lf-icons a:focus-visible { color: #fff !important; }
@media (max-width: 480px) { .lf-icons { gap: 12px; } .lf-icons a { width: 96px; } }
/* Visitenkarte als Fenster mit QR-Code */
.lf-card { border: 0; padding: 34px 30px 26px; width: min(320px, calc(100vw - 32px)); box-sizing: border-box; text-align: center; color: var(--ink); background: #fff; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); }
.lf-card::backdrop { background: rgba(20, 26, 27, .6); backdrop-filter: blur(4px); }
.lf-card[open] { display: grid; justify-items: center; gap: 6px; }
.lf-card strong { font: 400 20px/1.2 var(--display); color: var(--teal); }
.lf-card span, .lf-card small { font: 400 var(--t-xs)/1.4 var(--body); color: var(--ink); }
.lf-card small { margin-top: 4px; opacity: .75; }
.lf-card .lf-qr { width: 180px; margin: 14px 0 6px; padding: 0; }
.lf-card-x { position: absolute; right: 8px; top: 6px; width: 40px; height: 40px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; }
/* Footer-Symbole: etwas kleiner, scharf als Vektor, mit dunklem Schatten wie das Logo darüber */
.lf-icons a { gap: 12px; width: 112px; }
.lf-icons img { display: none; }
.lf-icons svg { display: block; width: 38px; height: 38px; filter: drop-shadow(5px 8px 10px rgba(0, 0, 0, .45)) drop-shadow(1px 2px 3px rgba(0, 0, 0, .3)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.lf-icons .ig-logo { width: 38px; height: 38px; }
.lf-icons a:hover svg, .lf-icons a:focus-visible svg { transform: translateY(-3px) scale(1.06); }
@media (max-width: 480px) { .lf-icons a { width: 96px; } }
.lf-icons a { width: auto; min-width: 96px; white-space: nowrap; }
@media (max-width: 480px) { .lf-icons { gap: 14px; } .lf-icons a { min-width: 0; white-space: normal; width: 92px; } }
/* Footer-Symbole: Titel so zurückhaltend wie die Copyright-Zeile, Schatten dezenter */
.lf-icons a { font: 400 14px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: normal; text-transform: none; color: rgba(255, 255, 255, .5) !important; }
.lf-icons a:hover, .lf-icons a:focus-visible { color: rgba(255, 255, 255, .8) !important; }
.lf-icons svg { filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, .28)) drop-shadow(1px 1px 2px rgba(0, 0, 0, .18)); }
/* Referenz-Objekte und Galerie-Sockel: «Sichtbeton», ein kühles Steingrau mit einem Hauch Huggler-Petrol (statt Mint) */
section:has(> .strip-wrap)::before { background-color: #ecefee; }
.gallery.gf::before { background: #ecefee; }
/* Vorheriges / Nächstes: ohne Mittelstrich, Knopf wie «Mehr zum Projekt» bei den News, Ortschaft im Huggler-Grün */
.p-nav::before, .gallery.gf ~ .p-nav::before { display: none; }
.p-nav a + a { border-left: 0 !important; }
.p-nav a { display: grid; gap: 6px; }
.p-nav a + a { justify-items: end; }
.p-nav .ort { color: #008193 !important; }
.p-nav .link-arrow { display: inline-flex; align-items: center; gap: 14px; position: relative; padding-bottom: 2px; color: var(--teal-ink); }
.p-nav .link-arrow::after { content: "→"; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent); font-size: 16px; letter-spacing: 0; transition: background .35s, color .35s, border-color .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.p-nav .pn-prev { flex-direction: row-reverse; }
.p-nav .pn-prev::after { content: "←"; }
.p-nav a:hover .link-arrow::after, .p-nav a:focus-visible .link-arrow::after { background: var(--teal); border-color: var(--teal); color: #fff; }
.p-nav a:hover .pn-next::after, .p-nav a:focus-visible .pn-next::after { transform: translateX(6px) rotate(-45deg); }
.p-nav a:hover .pn-prev::after, .p-nav a:focus-visible .pn-prev::after { transform: translateX(-6px) rotate(45deg); }
.p-nav .link-arrow::before { content: ""; position: absolute; bottom: 8px; height: 1px; width: 0; background: currentColor; transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.p-nav .pn-next::before { left: 0; }
.p-nav .pn-prev::before { right: 0; }
.p-nav a:hover .link-arrow::before { width: calc(100% - 56px); }
@media (min-resolution: 2dppx) { .p-nav .link-arrow::after { border-width: .5px; } }
.p-nav a { justify-items: start; }
.p-nav a + a { justify-items: end; }
/* Büro: Titel Planen / Bauen / Fokus in der gleichen ruhigen Farbe wie der Text darunter */
.service h3 { color: #5b6a69 !important; }
/* Projektseite: Titel und Text nur bis etwa zwei Drittel der Inhaltsbreite */
.p-sub, .p-text .lead { max-width: 66%; }
@media (max-width: 800px) { .p-sub, .p-text .lead { max-width: none; } }
/* Projekt-Links (z. B. Verkaufsdokumentation) wie «Mehr zum Projekt» bei den News */
.p-text .links { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.p-text a.p-link { display: inline-flex; align-items: center; gap: 14px; position: relative; padding-bottom: 2px; color: var(--teal-ink) !important; text-decoration: none !important; }
.p-text a.p-link::after { content: "→"; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent); font-size: 16px; letter-spacing: 0; transition: background .35s, color .35s, border-color .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.p-text a.p-link:hover::after, .p-text a.p-link:focus-visible::after { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateX(6px) rotate(-45deg); }
.p-text a.p-link::before { content: ""; position: absolute; left: 0; bottom: 8px; height: 1px; width: 0; background: currentColor; transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.p-text a.p-link:hover::before { width: calc(100% - 56px); }
@media (min-resolution: 2dppx) { .p-text a.p-link::after { border-width: .5px; } }
@media (max-width: 480px) { .p-text a.p-link { white-space: normal; } }
.p-text .lead, .p-text .links { grid-column: 1 / 9 !important; max-width: none; }
@media (max-width: 800px) { .p-text .lead, .p-text .links { grid-column: 1 / -1 !important; } }
/* Projekttext direkt unter dem Titel und über die ganze Inhaltsbreite */
.p-hero:has(+ .p-text) { padding-bottom: 0 !important; }
.p-text { padding-top: clamp(14px, 1.6vw, 22px) !important; }
.p-text .lead, .p-text .links { grid-column: 1 / -1 !important; }
/* Pfeil-Kreise bleiben immer rund, auch wenn der Text daneben auf dem Handy umbricht */
.p-text a.p-link::after, .p-nav .link-arrow::after, .news-card .link-arrow::after, .section-head .link-arrow::after { flex: 0 0 42px; width: 42px; height: 42px; aspect-ratio: 1; box-sizing: border-box; }
/* Bildansicht zum Durchblättern auf dem Handy: Bild etwas kleiner und immer ganz sichtbar (iPhone/Safari) */
.lightbox figure { min-width: 0; width: 100%; }
@media (max-width: 600px) {
  .lightbox figure { padding-inline: 16px; box-sizing: border-box; }
  .lightbox img { width: 100%; height: auto; max-width: 100%; max-height: 68vh; max-height: 68svh; object-fit: contain; }
}
/* Vorheriges / Nächstes auf dem Handy: beide Hälften bleiben in ihrer Spalte, Knopf und Ort kompakter */
.p-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.p-nav a { min-width: 0; }
.p-nav .ort { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .p-nav a { padding-block: 20px; }
  .p-nav .link-arrow { gap: 8px; font-size: 12px; letter-spacing: .08em; }
  .p-nav .link-arrow::after { flex: 0 0 36px; width: 36px; height: 36px; font-size: 14px; }
  .p-nav a:hover .link-arrow::before { width: calc(100% - 44px); }
  .p-nav a .ort { font-size: 20px !important; }
}
/* Vorheriges / Nächstes: nur noch Pfeil-Kreis und darunter die Ortschaft */
.p-nav .link-arrow { font-size: 0 !important; letter-spacing: 0; gap: 0; }
.p-nav .link-arrow::after { font-size: 16px; }
.p-nav .link-arrow::before { display: none; }
.p-nav a { gap: 10px; }
/* Footer-Symbole auf dem Handy: immer drei gleich breite Spalten nebeneinander, auf sehr schmalen Handys sauber untereinander */
@media (max-width: 600px) {
  .lf-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 360px; margin-inline: auto; }
  .lf-icons a { width: auto; min-width: 0; white-space: normal; font-size: 12px !important; line-height: 1.3; gap: 9px; }
  .lf-icons svg, .lf-icons .ig-logo { width: 34px; height: 34px; }
}
@media (max-width: 330px) {
  .lf-icons { grid-template-columns: 1fr; gap: 18px; }
}
/* Datenschutz: Zwischentitel ruhig, mit Abstand */
.prose h3 { margin: 1.8em 0 .35em; color: #008193 !important; font-size: var(--t-s, 18px) !important; }
.prose h3:first-child { margin-top: 0; }