/* =========================================================
   FesiGips GmbH – Stylesheet
   Farben: hier zentral anpassen
   ========================================================= */
:root{
  --brand:#1150a4;        /* Logo-Blau */
  --brand-dark:#0a3470;   /* dunkles Blau für Footer/Bänder */
  --accent:#3a7fd5;       /* helleres Blau für Hover/Akzente */
  --bg:#ffffff;
  --bg-soft:#f1f6fc;      /* helles Blau-Weiss */
  --text:#1c2733;
  --muted:#566577;
  --line:#dbe5f0;
  --radius:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:"Barlow Condensed",sans-serif;font-weight:700;line-height:1.1;letter-spacing:.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px;gap:20px}
.logo img{height:52px;width:auto}
nav ul{list-style:none;display:flex;gap:4px}
nav > ul > li{position:relative}
nav a{display:block;padding:10px 14px;text-decoration:none;font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
nav a:hover{color:var(--accent)}
nav > ul > li > a.active{color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
.sub{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);min-width:250px;display:none;flex-direction:column;box-shadow:0 12px 30px rgba(10,52,112,.1)}
.sub a{text-transform:none;letter-spacing:0;padding:10px 18px;font-size:15px}
nav li:hover .sub,nav li:focus-within .sub{display:flex}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;padding:13px 26px;font-weight:600;border-radius:var(--radius);transition:.2s;border:2px solid var(--brand)}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn.light{background:#fff;color:var(--brand);border-color:#fff}
.btn.light:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.ghost{background:transparent;border-color:#fff;color:#fff}
.btn.ghost:hover{background:#fff;color:var(--brand)}
.nav .btn{padding:10px 18px;font-size:15px;white-space:nowrap}
.burger{display:none;background:none;border:0;font-size:30px;cursor:pointer;color:var(--brand)}

/* ---------- Hero (Startseite) ---------- */
.hero,.page-hero{position:relative;color:#fff;overflow:hidden;
  background:
   linear-gradient(110deg,rgba(10,52,112,.95) 0%,rgba(17,80,164,.82) 50%,rgba(58,127,213,.5) 100%),
   radial-gradient(circle at 70% 40%,#eef3f8 0%,#c4d3e3 60%,#8fa6bf 100%)}
.hero::after,.page-hero::after{content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero{min-height:74vh;display:flex;align-items:center;padding:96px 0}
.hero .wrap,.page-hero .wrap{position:relative;z-index:2;width:100%}
.eyebrow{display:inline-block;font-size:14px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);font-weight:600;margin-bottom:16px}
.hero .eyebrow,.page-hero .eyebrow{color:#a9cdf6}
.hero h1{font-size:clamp(46px,7.5vw,92px);text-transform:uppercase;max-width:820px}
.hero p{font-size:20px;max-width:620px;margin:22px 0 34px;opacity:.93}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.rating{display:inline-flex;align-items:center;gap:10px;margin-top:40px;background:rgba(255,255,255,.12);padding:10px 16px;border-radius:40px;font-size:15px}
.stars{letter-spacing:2px}

/* ---------- Unterseiten-Kopf ---------- */
.page-hero{padding:84px 0 72px}
.page-hero h1{font-size:clamp(42px,6vw,72px);text-transform:uppercase}
.page-hero p{font-size:19px;max-width:640px;margin-top:16px;opacity:.92}
.crumbs{font-size:14px;margin-bottom:18px;opacity:.8}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- Sektionen ---------- */
section{padding:96px 0}
.soft{background:var(--bg-soft)}
.sec-head{margin-bottom:48px;max-width:720px}
.sec-head h2{font-size:clamp(34px,5vw,52px);text-transform:uppercase;color:var(--brand)}
.sec-head h2::after{content:"";display:block;width:64px;height:4px;background:var(--brand);margin-top:16px}
.sec-head p{color:var(--muted);margin-top:18px}
.sec-foot{margin-top:40px}
.link-more{color:var(--brand);font-weight:600;text-decoration:none}
.link-more:hover{color:var(--accent)}

/* Zweispaltiger Text */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.intro h3{font-size:30px;color:var(--brand);margin-bottom:14px}
.intro p{color:var(--muted)}
.welcome{margin-top:56px;padding:34px 40px;background:var(--brand);color:#fff;font-size:20px;border-left:6px solid var(--accent)}
.welcome strong{font-family:"Barlow Condensed";font-size:28px;display:block;margin-top:6px}

/* Karten */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);padding:34px 30px;transition:.25s;position:relative;text-decoration:none;display:block}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,80,164,.12);border-color:transparent}
.card::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--brand);transition:.3s}
.card:hover::before{width:100%}
.icon{width:54px;height:54px;background:var(--bg-soft);display:grid;place-items:center;margin-bottom:20px;color:var(--brand)}
.soft .icon{background:#fff}
.soft .card .icon{background:var(--bg-soft)}
.card h3{font-size:26px;color:var(--brand);margin-bottom:10px}
.card p{color:var(--muted);font-size:16px}

/* Werte */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.value{border-top:3px solid var(--brand);padding-top:20px}
.value h3{font-size:26px;color:var(--brand);margin-bottom:8px}
.value p{color:var(--muted);font-size:16px}

/* Dienstleistungs-Details */
.service{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line)}
.service:last-child{border-bottom:0}
.service:nth-child(even) .service-img{order:2}
.service-img{aspect-ratio:4/3;background:linear-gradient(135deg,#e2ecf7,#a9c1dc);position:relative}
.service-img span{position:absolute;left:16px;bottom:12px;font-size:13px;color:rgba(10,52,112,.5)}
.service-img .num{position:absolute;right:20px;top:10px;font-family:"Barlow Condensed";font-size:96px;font-weight:700;color:rgba(255,255,255,.65);line-height:1}
.service h2{font-size:clamp(32px,4vw,44px);color:var(--brand);text-transform:uppercase;margin-bottom:16px}
.service p{color:var(--muted);margin-bottom:16px}
.checks{list-style:none;display:grid;gap:8px}
.checks li{padding-left:30px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:10px;border-left:3px solid var(--brand);border-bottom:3px solid var(--brand);transform:rotate(-45deg) scale(.8)}

/* Info-Band */
.band{display:grid;grid-template-columns:1.3fr 1fr;background:var(--brand-dark);color:#fff}
.band > div{padding:56px 48px}
.band h3{font-size:34px;text-transform:uppercase;margin-bottom:18px}
.band table{border-collapse:collapse;width:100%;font-size:16px}
.band td{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.band td:last-child{text-align:right}
.band .side{background:var(--brand);display:flex;flex-direction:column;justify-content:center}
.band .side .big{font-family:"Barlow Condensed";font-size:42px;font-weight:700;text-decoration:none}

/* CTA-Streifen */
.cta-strip{background:var(--brand);color:#fff;padding:64px 0}
.cta-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-strip h2{font-size:clamp(30px,4vw,44px);text-transform:uppercase}
.cta-strip p{opacity:.9;margin-top:6px}

/* Referenzen */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ref{text-decoration:none;display:block;background:#fff;overflow:hidden;border:1px solid var(--line)}
.ref .img{aspect-ratio:4/3;position:relative;overflow:hidden}
.ref .img > div{position:absolute;inset:0;transition:transform .5s}
.ref:hover .img > div{transform:scale(1.06)}
.ref .tag{position:absolute;left:16px;top:16px;background:var(--brand);color:#fff;font-size:13px;padding:4px 10px;text-transform:uppercase;letter-spacing:.08em;z-index:2}
.ref .body{padding:22px 24px 26px}
.ref h3{font-size:24px;color:var(--brand)}
.ref p{color:var(--muted);font-size:15px;margin-top:6px}
.ph1{background:linear-gradient(135deg,#dfe9f4,#a9c1dc)}
.ph2{background:linear-gradient(135deg,#d3e2f2,#8eaed2)}
.ph3{background:linear-gradient(135deg,#e8eff7,#b8cbe0)}
.ph-label{position:absolute;inset:auto 0 0 0;padding:10px 16px;font-size:13px;color:rgba(10,52,112,.5);z-index:2}
.ref.placeholder h3{color:var(--muted)}
.ref.placeholder .img > div{background:repeating-linear-gradient(45deg,#f1f6fc 0 14px,#e4edf7 14px 28px)}

/* Rubriken */
.tabs{display:flex;margin-bottom:32px;border-bottom:2px solid var(--line);flex-wrap:wrap}
.tab{background:none;border:0;font:inherit;font-family:"Barlow Condensed";font-size:24px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:12px 26px;cursor:pointer;position:relative}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px}
.tab[aria-selected=true]{color:var(--brand)}
.tab[aria-selected=true]::after{background:var(--brand)}
.tab small{font-family:Inter;font-size:13px;font-weight:600;background:var(--bg-soft);color:var(--brand);padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:middle}
.panel[hidden]{display:none}
.panel-intro{color:var(--muted);margin-bottom:28px;max-width:720px}

/* Team */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:860px}
.person{display:flex;gap:22px;align-items:center;background:#fff;padding:26px;border:1px solid var(--line)}
.avatar{width:96px;height:96px;flex:none;border-radius:50%;background:var(--bg-soft);color:var(--brand);display:grid;place-items:center;border:3px solid var(--brand)}
.person h3{font-size:26px;color:var(--brand)}
.person p{color:var(--muted);font-size:15px}

/* Kontakt */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:48px}
.contact-list{list-style:none;display:grid;gap:18px}
.contact-list li{display:flex;gap:16px;align-items:flex-start}
.contact-list .icon{margin:0;flex:none;width:48px;height:48px}
.contact-list strong{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.contact-list a{text-decoration:none;font-size:19px;font-weight:500}
.contact-list a:hover{color:var(--brand)}
.hours{margin-top:32px;background:var(--bg-soft);padding:24px 26px}
.hours h3{font-size:24px;color:var(--brand);margin-bottom:10px}
.hours table{width:100%;border-collapse:collapse;font-size:16px}
.hours td{padding:6px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right}
form{display:grid;gap:14px;background:var(--bg-soft);padding:34px}
form h3{font-size:28px;color:var(--brand)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input,textarea,select{width:100%;padding:13px 14px;border:1px solid var(--line);background:#fff;font:inherit;font-size:16px;border-radius:var(--radius)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brand);border-color:transparent}
textarea{min-height:140px;resize:vertical}
form button{cursor:pointer;font:inherit;font-weight:600;justify-self:start}
.note{font-size:14px;color:var(--muted)}
.map{margin-top:56px;border:1px solid var(--line);aspect-ratio:21/8;width:100%}
.map iframe{width:100%;height:100%;border:0;display:block}

/* Rechtstexte */
.legal-text{max-width:820px}
.legal-text h2{font-size:30px;color:var(--brand);margin:36px 0 10px}
.legal-text p,.legal-text li{color:var(--muted);margin-bottom:10px}
.legal-text ul{padding-left:20px}
.legal-text .hint{background:var(--bg-soft);border-left:4px solid var(--brand);padding:14px 18px;color:var(--text)}

/* ---------- Footer ---------- */
footer{background:var(--brand-dark);color:rgba(255,255,255,.78);padding:60px 0 28px;font-size:15px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot .flogo img{height:62px;width:auto;margin-bottom:18px}
footer h4{color:#fff;font-size:20px;text-transform:uppercase;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:6px}
footer a{text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:14px}
.legal .links a{margin-left:18px}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  nav a{padding:10px 10px;font-size:14px}
  .nav .btn{display:none}
}
@media (max-width:980px){
  .grid,.refs{grid-template-columns:1fr 1fr}
  .intro,.contact,.band,.service{grid-template-columns:1fr}
  .service:nth-child(even) .service-img{order:0}
  .values{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .burger{display:block}
  header nav{position:absolute;top:88px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);display:none;max-height:calc(100vh - 88px);overflow:auto}
  header nav.open{display:block}
  header nav > ul{flex-direction:column;padding:8px 16px 16px}
  nav a{font-size:16px;padding:12px 8px}
  nav > ul > li > a.active{box-shadow:inset 3px 0 0 var(--brand)}
  .sub{position:static;display:flex;border:0;box-shadow:none;padding-left:14px;min-width:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  section{padding:64px 0}
  .nav{height:76px}
  header nav{top:76px}
  .logo img{height:42px}
  .grid,.refs,.team,form .row,.foot{grid-template-columns:1fr}
  .band > div{padding:40px 20px}
  .welcome{padding:26px 20px}
  form{padding:24px 18px}
  .person{flex-direction:column;text-align:center}
  .tab{font-size:19px;padding:10px 12px;flex:1;text-align:center}
  .map{aspect-ratio:4/3}
  .legal .links a{margin:0 18px 0 0}
}

/* =========================================================
   Projekte / Referenzen mit Fotos
   ========================================================= */
.hero{background:
   linear-gradient(105deg,rgba(10,52,112,.94) 0%,rgba(17,80,164,.84) 45%,rgba(17,80,164,.45) 100%),
   url("../img/projekte/blumenaustrasse/01.jpg") center 60%/cover no-repeat, var(--brand-dark)}

/* Projektkarten */
a.ref{color:inherit;transition:box-shadow .25s,transform .25s}
a.ref:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,80,164,.14)}
a.ref:focus-visible,.g-item:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ref .img{background:var(--bg-soft)}
.ref .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
a.ref:hover .img img{transform:scale(1.05)}
.ref .tag{z-index:2}
.vis{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(10,52,112,.82);color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:2px}
.ref .body{display:flex;flex-direction:column;gap:6px}
.ref .body p{margin-top:0}
.ref .more{font-size:14px;font-weight:600;color:var(--brand);margin-top:6px}
a.ref:hover .more{color:var(--accent)}

/* Dienstleistungen mit Foto */
figure.service-img{margin:0;background:var(--bg-soft);overflow:hidden}
figure.service-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
figure.service-img figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 12px;background:linear-gradient(transparent,rgba(10,52,112,.85));font-size:14px}
figure.service-img figcaption a{color:#fff;text-decoration:none;font-weight:600}
figure.service-img figcaption a:hover{text-decoration:underline}
.service-img.empty{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#f1f6fc 0 14px,#e4edf7 14px 28px)}
.service-img.empty span{position:static;color:var(--muted)}

/* Projekt-Detailseite */
.page-hero .crumbs a:hover{text-decoration:underline}
.proj{padding-top:56px}
.proj-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:start}
.g-item{position:relative;display:block;width:100%;padding:0;border:0;background:var(--bg-soft);cursor:zoom-in;overflow:hidden}
.g-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.g-item:hover img{transform:scale(1.04)}
.g-item.lead{aspect-ratio:4/3}
.proj-text{margin-top:24px;font-size:18px;color:var(--text);max-width:65ch}
.facts{background:var(--bg-soft);padding:28px 30px;border-top:4px solid var(--brand)}
.facts h2{font-size:28px;color:var(--brand);text-transform:uppercase;margin-bottom:12px}
.facts dl{display:grid}
.facts dl > div{padding:12px 0;border-bottom:1px solid var(--line)}
.facts dl > div:last-child{border-bottom:0}
.facts dt{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.facts dd{margin-top:2px;font-weight:500}
.facts dd a{color:var(--brand);font-weight:600}
.facts .checks{margin-top:6px;font-weight:400}
.gal-head{font-size:clamp(28px,4vw,38px);color:var(--brand);text-transform:uppercase;margin:64px 0 20px}
.gal-note{color:var(--muted);margin:-8px 0 20px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gallery .g-item{aspect-ratio:4/3}
.proj-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-top:72px;padding-top:28px;border-top:1px solid var(--line)}
.proj-nav a{text-decoration:none;font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:600;color:var(--brand);line-height:1.2}
.proj-nav a small{display:block;font-family:Inter,sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.proj-nav a:hover{color:var(--accent)}
.proj-nav .next{text-align:right}
.proj-nav .all{font-family:Inter,sans-serif;font-size:15px;border:2px solid var(--brand);padding:10px 18px;border-radius:var(--radius)}
.proj-nav .all:hover{background:var(--brand);color:#fff}

/* Bildvergrösserung */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,22,46,.94);display:flex;align-items:center;justify-content:center;padding:56px 72px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain}
.lightbox figcaption{color:#fff;font-size:15px;text-align:center}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:52px;height:52px;border-radius:50%;font-size:34px;line-height:1;cursor:pointer;display:grid;place-items:center}
.lightbox button:hover{background:rgba(255,255,255,.25)}
.lightbox button:focus-visible{outline:3px solid #fff}
.lb-close{top:14px;right:14px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}

@media (max-width:980px){
  .proj-top{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .proj-nav{grid-template-columns:1fr 1fr}
  .proj-nav .all{grid-column:1/-1;grid-row:2;text-align:center}
  .proj-nav a{font-size:19px}
  .lightbox{padding:64px 8px}
  .lb-prev,.lb-next{top:auto;bottom:10px;transform:none}
  .facts{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.page-hero h1{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;text-wrap:balance}
@media (max-width:640px){.page-hero h1{font-size:clamp(28px,8.4vw,42px)}.page-hero{padding:56px 0 48px}}
/* Lange Wörter und Rasterspalten auf schmalen Bildschirmen */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.grid > *,.refs > *,.service > *,.intro > *,.contact > *,.band > *,.foot > *,.proj-top > *,.proj-nav > *{min-width:0}
@media (max-width:980px){
  .grid,.refs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro,.contact,.band,.service{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .grid,.refs,.team,form .row,.foot{grid-template-columns:minmax(0,1fr)}
  .proj-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service h2{font-size:clamp(26px,7.5vw,32px)}
}
.proj-nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.proj-nav a{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:640px){.proj-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.proj-nav a{font-size:17px}}

/* Über uns: Teamfoto und Profile */
.intro.single{grid-template-columns:minmax(0,1fr);max-width:760px}
.intro.with-photo{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
.intro-text h3 + p{margin-bottom:28px}
.intro-text p:last-child{margin-bottom:0}
.team-photo{margin:0;background:#fff}
.team-photo img{width:100%;height:auto}
.team-photo figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.profiles{display:grid;gap:56px}
.profile{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:48px;align-items:start}
.profile:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.profile:nth-child(even) img{order:2}
.profile img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:#f2f2f2;border-bottom:4px solid var(--brand)}
.profile-text{max-width:68ch}
.profile h3{font-size:clamp(32px,4vw,42px);color:var(--brand);text-transform:uppercase}
.profile .role{font-weight:600;color:var(--brand);margin:6px 0 18px;font-size:16px}
.profile-text p{color:var(--muted);margin-bottom:14px}
.profile blockquote{margin:22px 0 0;padding:18px 22px;background:var(--bg-soft);border-left:4px solid var(--brand);font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:600;color:var(--brand);line-height:1.25}
@media (max-width:980px){
  .intro.with-photo{grid-template-columns:minmax(0,1fr)}
  .profile,.profile:nth-child(even){grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:32px}
  .profile:nth-child(even) img{order:0}
}
@media (max-width:640px){
  .profile,.profile:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .profile img{max-width:260px}
}
.foot .flogo img{margin-bottom:0}
/* Dienstleistungen ohne Fotos */
.service{grid-template-columns:minmax(0,1fr)!important;padding:48px 0}
.service > div{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon head" "text list";column-gap:24px;row-gap:18px;align-items:start}
.service > div > .icon{grid-area:icon;margin:0}
.service > div > h2{grid-area:head;align-self:center;margin:0;hyphens:manual;-webkit-hyphens:manual}
.service > div > p{grid-area:text;grid-column:1 / span 2;max-width:60ch;margin:0}
.service > div > ul{grid-area:list}
@media (min-width:821px){
  .service > div{grid-template-columns:54px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"icon head head" "text text list";column-gap:24px 48px}
  .service > div > p{grid-column:1 / span 2;padding-right:32px}
  .service > div > ul{grid-column:3}
}
@media (max-width:820px){
  .service > div{grid-template-columns:54px minmax(0,1fr);grid-template-areas:"icon head" "text text" "list list"}
  .service > div > p{grid-column:1 / -1}
  .service > div > ul{grid-column:1 / -1}
}
/* Dienstleistungen nur mit Text */
.service > div{grid-template-columns:54px minmax(0,1fr)!important;grid-template-areas:"icon head" "text text"!important}
.service > div > p{grid-column:1 / -1!important;max-width:70ch;padding-right:0!important}
/* Google-Maps-Karte */
.map-box{margin-top:56px;border:1px solid var(--line)}
.map-box .map{margin:0;border:0;aspect-ratio:21/8;background:var(--bg-soft)}
.map-bar{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--bg-soft)}
.map-bar .btn{padding:10px 18px;font-size:15px}
@media (max-width:640px){.map-box .map{aspect-ratio:4/3}}