/* progetto-svizzera.ch · Bausteine der Hauptseite und ihrer Unterseiten (ergänzt ../shared/ps.css) */

/* Hauptmenü */
.nav-links{gap:20px}
.nav-links a.on{color:var(--fg);font-weight:500}
@media (min-width:1041px) and (max-width:1180px){.nav-links{gap:14px}.nav-links a{font-size:14px}}
.mm-list a{display:block;padding:11px 0;border-bottom:1px solid var(--line);font:700 22px/1.2 var(--f-display);letter-spacing:-.02em;text-decoration:none;color:var(--fg)}
.mm-list a.on{color:var(--red)}
.mm-list a.klein{font:500 16px var(--f-body);color:var(--muted)}

/* Kopf der Unterseiten: kleineres Alpen-Bild */
.alp.sm{padding-bottom:clamp(150px,17vw,290px)}
.alp.sm .alps{height:clamp(150px,18vw,300px)}
.alp.sm .hero{padding-top:44px}
.alp.sm .hero h1{font-size:clamp(40px,6.4vw,76px)}

/* Karten, Wege, Teaser */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:-120px;position:relative;z-index:3}
@media (max-width:760px){.paths{grid-template-columns:1fr;margin-top:-80px}}
.path{display:flex;flex-direction:column;gap:10px;min-height:250px;padding:30px;border-radius:28px;text-decoration:none;color:var(--fg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .3s}
.path:hover{transform:translateY(-4px)}
.path.dark{background:linear-gradient(160deg,#1f3554,#0c0c0e 80%);color:#fff;border-color:transparent}
.path .k{font:700 12px var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.path.dark .k{color:#ff8a80}
.path b{font:800 clamp(26px,3vw,34px)/1.1 var(--f-display);letter-spacing:-.03em}
.path p{opacity:.75;font-size:16px}
.path .c{margin-top:auto;font-weight:500;color:var(--red)}
.path.dark .c{color:#fff}
.unit .n{font:800 14px var(--f-display);color:var(--red)}
.unit h3{font-size:22px;margin:10px 0 8px}
.unit p{font-size:15px;color:var(--muted)}
.unit a{display:inline-block;margin-top:14px;font-size:15px;font-weight:500;color:var(--red);text-decoration:none}
a.unit{text-decoration:none;color:var(--fg);transition:transform .3s}
a.unit:hover{transform:translateY(-3px)}
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:36px}
.benefit{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);font:600 17px/1.35 var(--f-display)}
.benefit::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat;margin-top:1px}

/* Text und Bild nebeneinander */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}.split.rev>:first-child{order:0}}
.split img,.bild{width:100%;display:block;border-radius:28px;object-fit:cover}
.bild.frei{border-radius:0;object-fit:contain;background:none}
.text p+p{margin-top:14px}
.text p{color:var(--muted);font-size:17px}
.text .h2{margin-bottom:18px}
.liste{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.liste li{padding-left:28px;position:relative}
.liste li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--red-soft);box-shadow:inset 0 0 0 5px var(--red)}

/* Ablauf mit grosser Karte daneben */
.flow-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:900px){.flow-wrap{grid-template-columns:1fr}.flow-side{display:none}}
.flow-side{position:sticky;top:110px}
.phase{border-radius:28px;padding:30px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);min-height:330px;display:flex;flex-direction:column;gap:12px}
.phase .big{font:800 72px/1 var(--f-display);color:var(--red);letter-spacing:-.05em}
.phase h3{font-size:26px}
.phase .bar{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden;margin-top:auto}
.phase .bar i{display:block;height:100%;background:var(--red);border-radius:8px;width:0;transition:width .5s cubic-bezier(.2,.7,.2,1)}

/* Projektphasen als Zeitleiste */
.phasen{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:10px;margin-top:40px;align-items:stretch}
.phasen .tag{display:flex;align-items:center;font:800 15px var(--f-display);color:var(--red);text-transform:uppercase;letter-spacing:.06em;padding-right:8px}
.niveau{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;text-align:center;position:relative}
.niveau b{display:block;font:800 26px var(--f-display);letter-spacing:-.02em}
.niveau small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.niveau .w{display:inline-block;margin-top:10px;font-size:13px;font-weight:500;color:var(--red)}
.meilensteine{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.meilenstein{border-top:2px solid var(--red);padding-top:12px;font-size:15px}
.meilenstein b{display:block;font:700 16px var(--f-display);margin-bottom:2px}
.meilenstein span{color:var(--muted)}
@media (max-width:860px){.phasen{grid-template-columns:repeat(2,minmax(0,1fr))}.phasen .tag{grid-column:1/-1}.meilensteine{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Modelle */
.model{display:flex;flex-direction:column;gap:12px}
.model .pill{align-self:flex-start}
.model h3{font-size:26px}
.model p{color:var(--muted);font-size:16px}
.model.hl{border:1.5px solid var(--red)}

/* Kennzahlen */
.fact b{display:block;font:800 clamp(38px,4.6vw,56px)/1 var(--f-display);letter-spacing:-.04em;color:var(--red)}
.fact p{font-size:15px;margin-top:8px}
.fact small{display:block;font-size:12px;color:var(--muted);margin-top:8px}

/* Grüezi-Handy */
.phone{width:min(300px,80vw);aspect-ratio:9/19;margin:0 auto;border-radius:44px;background:#0c0c0e;padding:12px;box-shadow:var(--shadow)}
.phone .scr{height:100%;border-radius:34px;background:var(--bg);overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:26px 16px}
.phone .hi{font:800 26px var(--f-display);letter-spacing:-.03em}
.phone .tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.phone .tile b{font-size:14px;font-family:var(--f-display)}
.lvl{display:flex;gap:4px;margin-top:4px}
.lvl i{flex:1;height:6px;border-radius:6px;background:var(--surface-2)}
.lvl i.on{background:var(--red)}
.land{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* Kundenlogos: im Dunkelmodus auf hellen Kacheln */
.logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
@media (max-width:640px){.logos{grid-template-columns:1fr}}
.logos div{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;display:grid;place-items:center}
.logos img{width:100%;max-width:260px;height:auto;display:block}

/* Über uns, Team */
.about img{width:100%;border-radius:28px;display:block;aspect-ratio:1/1;object-fit:cover}

/* FAQ */
.faq-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.faq-tabs button{border:0;border-radius:99px;padding:8px 16px;background:var(--surface-2);color:var(--fg);font:500 14px var(--f-body);cursor:pointer}
.faq-tabs button.on{background:var(--red);color:#fff}
details{border-bottom:1px solid var(--line);padding:18px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;font:700 19px var(--f-display);display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--red);font-size:24px;line-height:1;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p,details li{color:var(--muted);max-width:780px}
details p{margin-top:10px}
details ol{margin:10px 0 0;padding-left:20px;display:grid;gap:8px}

/* Teaser mit Bild */
.teaser{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border-radius:32px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
@media (max-width:860px){.teaser{grid-template-columns:1fr}}
.teaser .t{padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.teaser .img{background-size:cover;background-position:center;min-height:280px}
.teaser.dark{background:#0c0c0e;color:#f5f5f7;border-color:transparent}
.teaser.dark .t p{color:#a3a3ab}

/* Kontakt */
.kontakt-karte{display:grid;gap:6px;font-size:17px}
.kontakt-karte b{font:800 22px var(--f-display)}
.karte{width:100%;aspect-ratio:4/3;border:0;border-radius:28px;background:var(--surface-2)}