/* =====================================================================
   hamburggerüstbau.de — THEME "Handwerk mit Haltung"
   Eigenständiger, editorialer Look — bewusst ANDERS als rohrgeruestbau /
   geruestbau-hamburg (kein bildlastiger Klon): text- & typo-stark,
   helle Tribute-Hero, Engagement-Karten, blau/gelbe Akzente.
   Lädt NACH style.css (Basis) und überschreibt gezielt.
   Hausfarben Rohrgerüstbau Pronin: Blau #004898 · Gelb #F8D000.
   ===================================================================== */

/* Kopfzeile: gelber Akzentstrich + eigene Wortmarke (klar unterscheidbar) */
body.hh header.top{border-top:4px solid var(--gelb)}
body.hh .brand b{font-size:1.05rem;letter-spacing:.04em}
body.hh .brand .wm-sub{color:var(--blau);font-weight:700}

/* Gelbe Unterstreichung als wiederkehrende Akzent-Signatur */
.uline{display:inline;background:linear-gradient(transparent 62%,rgba(248,208,0,.55) 62%)}
.sec-head h2 .uline{padding:0 .05em}

/* ---------- Editorial-Hero (hell, Text + gerahmtes Foto) ---------- */
.hero-edit{background:
   radial-gradient(120% 90% at 90% -10%,rgba(248,208,0,.12),transparent 60%),
   var(--papier);
  padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,80px);border-bottom:1px solid var(--linie)}
.hero-edit .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero-edit h1{font-size:clamp(2.4rem,6vw,4.6rem);max-width:13ch}
.hero-edit h1 em{font-style:normal;color:var(--blau)}
.hero-edit .lead{max-width:46ch}
.hero-edit .kicker{font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;color:var(--blau);margin-bottom:1rem}
.hero-edit .photo{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--schatten);
  border:6px solid #fff;rotate:1.4deg}
.hero-edit .photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.hero-edit .photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;
  font-size:.85rem;background:linear-gradient(0deg,rgba(0,30,66,.85),transparent)}
@media(max-width:820px){.hero-edit .grid{grid-template-columns:1fr}.hero-edit .photo{rotate:0deg;max-width:420px;margin:6px auto 0}}

/* ---------- Engagement-Karten (Ehrenamt) ---------- */
.engage{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
.eng-card{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--blau);
  border-radius:14px;padding:26px 24px;box-shadow:var(--schatten)}
.eng-card .ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:rgba(0,72,152,.08);color:var(--blau);font-size:1.4rem;margin-bottom:14px}
.eng-card h3{font-size:1.25rem;margin-bottom:.3rem}
.eng-card p{color:var(--grau);margin:0;font-size:.98rem}
.eng-card a{font-weight:700}
@media(max-width:780px){.engage{grid-template-columns:1fr}}

/* ---------- Großes Haltungs-Statement ---------- */
.haltung blockquote{font-family:var(--serif);font-size:clamp(1.7rem,4.2vw,2.8rem);line-height:1.22;
  max-width:24ch;margin:0 auto;text-align:center}
.haltung blockquote em{font-style:normal;color:var(--gelb)}
.haltung cite{display:block;text-align:center;margin-top:1rem;font-style:normal;font-size:.88rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* ---------- Foto + Text (Werdegang) ---------- */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,48px);align-items:start}
.split .photo{border-radius:16px;overflow:hidden;box-shadow:var(--schatten);border:5px solid #fff}
.split .photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
@media(max-width:820px){.split{grid-template-columns:1fr}.split .photo{max-width:380px}}

/* ---------- Partner-Karte (Rohrgerüstbau Pronin) ---------- */
.partner{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.partner .pc{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:30px;box-shadow:var(--schatten)}
.partner .pc.lead-pc{background:linear-gradient(135deg,#003b80,#00264f);color:#fff}
.partner .pc.lead-pc h3,.partner .pc.lead-pc p{color:#fff}
.partner .pc .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gelb);background:rgba(248,208,0,.14);border-radius:999px;padding:5px 12px;margin-bottom:12px}
.partner .pc.plain .tag{color:var(--blau);background:rgba(0,72,152,.08)}
@media(max-width:780px){.partner{grid-template-columns:1fr}}

/* Leistungs-Teaser (SEO-Querverlinkung) */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc a{display:block;background:#fff;border:1.5px solid var(--blau);border-radius:12px;padding:18px 20px;
  color:var(--blau);font-weight:700;text-decoration:none;transition:background .2s,color .2s}
.svc a:hover{background:var(--blau);color:#fff}
.svc a span{display:block;font-weight:500;color:var(--grau);font-size:.9rem;margin-top:4px}
.svc a:hover span{color:rgba(255,255,255,.85)}
@media(max-width:780px){.svc{grid-template-columns:1fr}}

/* ---------- Praktikums-Rondell (prominenter, klickbarer Call-to-Action) ---------- */
#praktikums-rondell .pr-cta{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:center;
  text-decoration:none;color:inherit;background:#fff;border:2px solid var(--blau);border-radius:22px;
  padding:clamp(22px,4vw,44px);box-shadow:var(--schatten);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
#praktikums-rondell .pr-cta:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,72,152,.22);background:#fbfcff}
#praktikums-rondell .pr-logo{width:clamp(150px,20vw,240px);height:auto;display:block}
#praktikums-rondell .pr-text .kicker{font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--blau);margin:0 0 .3rem}
#praktikums-rondell .pr-text h2{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.08;margin:.1rem 0 .5rem}
#praktikums-rondell .pr-text .lead{font-size:clamp(1.12rem,2.3vw,1.45rem);font-weight:600;max-width:54ch;margin:0 0 1.1rem}
#praktikums-rondell .pr-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--blau);color:#fff;
  font-weight:800;font-size:clamp(1rem,2vw,1.2rem);padding:14px 26px;border-radius:12px}
#praktikums-rondell .pr-cta:hover .pr-btn{background:#003b80}
@media(max-width:780px){#praktikums-rondell .pr-cta{grid-template-columns:1fr;text-align:center;justify-items:center}}