/* ==========================================================================
   airfy.org: Branchenseiten (Übersicht und Betreutes Wohnen)
   Baut auf main.css auf: gleiche Farben, Schriften, Header, Footer.
   Hell = die Häuser und Standorte, dunkel = was Airfy aus der Ferne übernimmt.
   ========================================================================== */

.ind { background: var(--paper); }
.ind-h1 { font: 400 clamp(2.8rem, 1.2rem + 5.4vw, 7.4rem)/.95 var(--serif); letter-spacing: -.016em; text-wrap: balance; }
.ind-h2 { font: 400 clamp(2.3rem, 1.2rem + 3.4vw, 5rem)/.98 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.ind-lead { max-width: 32em; font-size: clamp(1.1rem, 1rem + .45vw, 1.5rem); line-height: 1.45; color: rgba(12, 18, 21, .76); }

/* ---------- Übersicht: Kopf ---------- */
.ind-hero { position: relative; color: var(--ink); padding: calc(var(--hdr) + 12vh) var(--pad) 8vh; overflow: hidden; }
.ind-hero .ind-h1 { position: relative; z-index: 1; max-width: 13.5em; margin-bottom: 2.2rem; }
.ind-hero .ind-lead, .ind-hero .kicker { position: relative; z-index: 1; }
.ind-hero__signal { position: absolute; right: -8vw; top: -6vh; width: clamp(260px, 38vw, 620px); aspect-ratio: 1; pointer-events: none; }
.ind-hero__signal::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(127, 175, 197, .16), transparent 70%); }
.ind-hero__signal i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(76, 124, 146, .55); opacity: 0; }
.ind-hero__signal::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 6px rgba(76, 124, 146, .16); }
html:not(.reduce) .ind-hero__signal i { animation: ind-ring 4.2s cubic-bezier(.2, .6, .3, 1) infinite; }
.ind-hero__signal i:nth-child(2) { animation-delay: 1.4s !important; }
.ind-hero__signal i:nth-child(3) { animation-delay: 2.8s !important; }
html.reduce .ind-hero__signal i { opacity: .25; transform: scale(.6); }
html.reduce .ind-hero__signal i:nth-child(2) { transform: scale(.8); opacity: .18; }
html.reduce .ind-hero__signal i:nth-child(3) { transform: scale(1); opacity: .1; }
@keyframes ind-ring { 0% { transform: scale(.08); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }

/* ---------- Übersicht: Karten ---------- */
.ind-cards { padding: 0 var(--pad) 18vh; color: var(--ink); }
.ind-cards__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); align-items: start; }
.icard:nth-child(2) { margin-top: 9vh; }
.icard:nth-child(3) { margin-top: 18vh; }
.icard > a, .icard > div { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.icard__media { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--paper-2); }
.icard__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease); }
.icard--link a:hover .icard__img { transform: scale(1.12); }
.icard__body { position: relative; display: grid; grid-template-columns: auto 1fr auto; column-gap: 1rem; padding-top: 1.4rem; }
.icard__num { font: 500 .72rem/2.4 var(--mono); color: rgba(12, 18, 21, .55); }
.icard__title { font: 400 clamp(1.9rem, 1.2rem + 1.4vw, 2.7rem)/1 var(--serif); }
.icard__text { grid-column: 2 / -1; margin-top: .9rem; color: rgba(12, 18, 21, .76); max-width: 30em; }
.icard__go { grid-row: 1; grid-column: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; transition: background-color .35s var(--ease), transform .35s var(--ease); }
.icard__go .i { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.icard--link a:hover .icard__go { background: var(--petrol); }
.icard--link a:hover .icard__go .i { transform: translateX(3px); }
.icard--link a:focus-visible { outline: none; }
.icard--link a:focus-visible .icard__media { outline: 2px solid var(--steel); outline-offset: 4px; }

/* ---------- Sie montieren. Wir machen den Rest. ---------- */
.ind-mount { position: relative; background: radial-gradient(90% 80% at 85% 20%, #17303B 0%, #0E1A1F 55%, #0B1215 100%); color: #fff; padding: 18vh var(--pad) 16vh; overflow: hidden; }
.ind-mount__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) 2px minmax(0, 1fr); gap: 3rem clamp(28px, 4vw, 70px); align-items: start; }
.ind-mount__title { font: 400 clamp(2.8rem, 1.2rem + 4.6vw, 6.6rem)/.95 var(--serif); letter-spacing: -.016em; }
.ind-l1, .ind-l2 { display: block; }
.ind-l1 { color: var(--note); }
.ind-l2 { font-style: italic; padding-right: .08em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ind-mount__axis { position: relative; align-self: stretch; min-height: 240px; background: repeating-linear-gradient(to bottom, rgba(230, 240, 245, .18) 0 6px, transparent 6px 12px); border-radius: 2px; }
.ind-mount__fill { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--warm), var(--sky)); transform-origin: top; border-radius: 2px; }
html.js:not(.reduce) .ind-mount__fill { transform: scaleY(0); }
.ind-mount__text { display: grid; gap: 1.4rem; padding-top: .6rem; }
.ind-mount__text p { font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.55; color: rgba(255, 255, 255, .84); max-width: 34em; }
.ind-proof { display: flex; gap: 1.1rem; align-items: flex-start; max-width: 64rem; margin-top: 10vh; padding-top: 2.4rem; border-top: 1px solid var(--line-light); font: 400 clamp(1.45rem, 1rem + 1.2vw, 2.2rem)/1.22 var(--serif); color: #fff; }
.ind-proof__mark { flex: none; width: 12px; height: 12px; margin-top: .45em; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 6px rgba(127, 175, 197, .18); }
.ind-proof--light { color: var(--ink); border-top-color: var(--line-dark); }
.ind-proof--light .ind-proof__mark { background: var(--steel); box-shadow: 0 0 0 6px rgba(76, 124, 146, .15); }

/* ---------- Kontakt ---------- */
.ind-contact { background: var(--ink); color: #fff; padding: 18vh var(--pad) 14vh; position: relative; overflow: hidden; }
.ind-contact::before { content: ''; position: absolute; right: -10vw; top: -20vh; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(76, 124, 146, .28), transparent 70%); pointer-events: none; }
.ind-contact__inner { position: relative; max-width: 58rem; }
.ind-contact__title { font: 400 clamp(2.6rem, 1.2rem + 4.4vw, 6.4rem)/.96 var(--serif); letter-spacing: -.014em; margin-bottom: 2rem; }
.ind-contact__text { font-size: clamp(1.05rem, 1rem + .35vw, 1.35rem); color: rgba(255, 255, 255, .82); max-width: 32em; }
.ind-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.6rem; }
.ind-mail { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font: 500 1.05rem/1 var(--mono); padding: 14px 4px; border-bottom: 1px solid rgba(175, 205, 219, .45); transition: border-color .3s, color .3s; }
.ind-mail:hover { color: var(--ice); border-color: var(--ice); }
.ind-mail .i { width: 20px; height: 20px; color: var(--ice); }
.ind-mail--inline { padding: 0 0 2px; font-size: 1em; display: inline; }
.ind-contact__line { margin-top: 1.6rem; font-size: clamp(1.05rem, 1rem + .35vw, 1.35rem); color: rgba(255, 255, 255, .86); }
.ind-contact__form { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.ind-contact__price { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-light); font: 500 .8rem/1.5 var(--mono); letter-spacing: .03em; color: rgba(255, 255, 255, .72); max-width: 44rem; }
.ind-self { position: relative; margin-top: 10vh; padding: 22px 24px; border-radius: 16px; max-width: 58rem; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-light); color: rgba(255, 255, 255, .84); }
.ind-self__q { font: 400 1.4rem/1.2 var(--serif); color: #fff; margin-right: .3rem; }
.ind-self a { font: 500 1em/1 var(--mono); color: var(--ice); text-underline-offset: 3px; }

/* ---------- Betreutes Wohnen: Kopf ---------- */
.sl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 3rem 5vw; align-items: end; padding: calc(var(--hdr) + 9vh) var(--pad) 12vh; color: var(--ink); min-height: 100svh; }
.sl-hero .kicker a { color: inherit; text-underline-offset: 3px; }
.sl-hero__facts { margin: 0; display: grid; gap: 3.2rem; }
.sl-fact dt { font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(12, 18, 21, .62); margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.sl-fact dt::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warm); }
.sl-fact--out dt::before { background: var(--steel); }
.sl-fact dd { margin: 0; }
.sl-fact--who dd { font-size: clamp(1.15rem, 1rem + .6vw, 1.6rem); line-height: 1.4; max-width: 26em; color: rgba(12, 18, 21, .82); }
.sl-hero__h1 { font-size: clamp(2.7rem, 1.2rem + 4.6vw, 6.6rem); }
.sl-hero__media { position: relative; height: min(78svh, 820px); border-radius: 22px; overflow: hidden; background: var(--paper-2); }
.sl-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

/* ---------- Betreutes Wohnen: Vorteile ---------- */
.sl-benefits { padding: 16vh var(--pad); color: var(--ink); }
.sl-benefits .ind-h2 { max-width: 12em; margin-bottom: 8vh; }
.sl-benefits__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.sl-ben { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 1.2rem; padding: clamp(22px, 2.4vw, 34px); border-radius: 22px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--line-dark); }
.sl-ben__art { position: relative; grid-column: 1 / -1; height: clamp(130px, 13vw, 180px); margin-bottom: 1.8rem; border-radius: 14px; background: #0F1A1F; overflow: hidden; }
.sl-ben__num { font: 500 .72rem/1.9 var(--mono); color: rgba(12, 18, 21, .55); }
.sl-ben__text { font: 400 clamp(1.35rem, 1rem + .9vw, 1.9rem)/1.18 var(--serif); }

/* Bildzeichen */
.vig { position: absolute; left: 0; top: 14px; width: 100%; height: calc(100% - 28px); overflow: visible; }
.vig__lane { fill: rgba(175, 205, 219, .08); stroke: rgba(175, 205, 219, .22); stroke-width: 1; }
.vig__lane.is-own { fill: rgba(240, 199, 154, .16); stroke: rgba(240, 199, 154, .7); }
.vig__sep { stroke: rgba(175, 205, 219, .4); stroke-width: 1; stroke-dasharray: 3 5; }
.vig__dot { fill: var(--sky); opacity: .85; }
.vig__dot.is-own { fill: var(--warm-2); }
html:not(.reduce) .vig__dot { animation: vig-flow var(--t) linear infinite; animation-delay: calc(var(--d) * -1); }
html.reduce .vig__dot { transform: translateX(calc(var(--x) * 1px)); }
@keyframes vig-flow { from { transform: translateX(18px); } to { transform: translateX(202px); } }
.vig__ring, .vig__shaft { fill: none; stroke: var(--sky); stroke-width: 3; stroke-linecap: round; transition: stroke .6s var(--ease), opacity .6s var(--ease); }
.vig__led { fill: var(--ok); }
html:not(.reduce) .vig__key:not(.is-off) .vig__led { animation: blink 1.8s ease-in-out infinite; }
.vig__strike { stroke: var(--alert); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 52; stroke-dashoffset: 52; transition: stroke-dashoffset .7s var(--ease) .35s; }
.is-in .vig__key.is-off .vig__ring, .is-in .vig__key.is-off .vig__shaft { stroke: rgba(175, 205, 219, .3); }
.is-in .vig__key.is-off .vig__led { fill: var(--alert); }
.is-in .vig__strike { stroke-dashoffset: 0; }
.vig__track { fill: rgba(175, 205, 219, .1); }
.vig__win { fill: rgba(240, 199, 154, .2); stroke: var(--warm-2); stroke-width: 1.5; }
.vig__tick { stroke: rgba(175, 205, 219, .35); stroke-width: 1; }
.vig__src { fill: var(--sky); }
.vig__drop { fill: none; stroke: var(--sky); stroke-width: 2.5; stroke-dasharray: 4 5; }
.vig__arrowhead { fill: none; stroke: var(--sky); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vig__ok { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .6s var(--ease) 1s; }
html:not(.reduce) .vig--window .vig__drop, html:not(.reduce) .vig--window .vig__arrowhead { opacity: 0; transform: translateY(-14px); transition: opacity .5s var(--ease) .2s, transform .8s var(--ease) .2s; }
.is-in .vig--window .vig__drop, .is-in .vig--window .vig__arrowhead { opacity: 1 !important; transform: none !important; }
.is-in .vig__ok { stroke-dashoffset: 0; }
.vig__screen { fill: rgba(245, 247, 248, .95); }
.vig__row { fill: #DCE4E8; }
.vig__st { fill: var(--ok); }
.vig__st.is-down, .vig__ap.is-down { fill: var(--alert); }
html:not(.reduce) .vig__st.is-down, html:not(.reduce) .vig__ap.is-down { animation: blink 1.4s ease-in-out infinite; }
.vig__house { fill: rgba(175, 205, 219, .1); stroke: rgba(175, 205, 219, .55); stroke-width: 1.5; stroke-linejoin: round; }
.vig__link { fill: none; stroke: rgba(175, 205, 219, .55); stroke-width: 1.5; stroke-dasharray: 3 5; }
.vig__half--you { fill: var(--warm); }
.vig__half--airfy { fill: var(--sky); }

/* ---------- Betreutes Wohnen: alle Häuser ---------- */
.sl-glance { padding: 16vh var(--pad); color: var(--ink); background: #E3EAED; }
.sl-glance__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem 5vw; align-items: center; }
.sl-glance__text { display: grid; gap: 1.4rem; }
.sl-glance__text .ind-h2 { margin-bottom: .8rem; }
.sl-glance__text p { font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); color: rgba(12, 18, 21, .8); max-width: 30em; }
.sl-glance__art { border-radius: 24px; background: #0F1A1F; padding: clamp(18px, 3vw, 40px); }
.houses { width: 100%; height: auto; overflow: visible; }
.houses__console rect:first-child { fill: #F5F7F8; }
.houses__bar { fill: #C9D6DC; }
.houses__path { fill: none; stroke: rgba(175, 205, 219, .22); stroke-width: 1.5; }
.houses__path.is-hot { stroke: rgba(127, 175, 197, .75); }
.houses__pulse { fill: var(--ice); opacity: 0; }
.houses__shape { fill: #17252C; stroke: rgba(175, 205, 219, .5); stroke-width: 1.5; stroke-linejoin: round; transition: fill .5s var(--ease), stroke .5s var(--ease); }
.houses__win { fill: rgba(175, 205, 219, .25); transition: fill .5s var(--ease); }
.houses__house.is-on .houses__shape { fill: #1F3A46; stroke: var(--ice); }
.houses__house.is-on .houses__win { fill: var(--warm-2); }

/* ---------- Betreutes Wohnen: Senioren-Coliving ---------- */
.sl-coliving { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem 5vw; align-items: center; padding: 16vh var(--pad); color: var(--ink); scroll-margin-top: var(--hdr); }
.sl-coliving__media { border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-2); }
.sl-coliving__img { width: 100%; height: 100%; object-fit: cover; }
.sl-coliving__text { display: grid; gap: 1.4rem; }
.sl-coliving__text .ind-h2 { margin-bottom: .6rem; }
.sl-coliving__text p { font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); color: rgba(12, 18, 21, .8); max-width: 30em; }
.sl-coliving__closing { margin-top: 1rem; font: 400 clamp(1.7rem, 1rem + 1.6vw, 2.6rem)/1.05 var(--serif) !important; font-style: italic !important; color: var(--petrol) !important; }

/* ---------- Startzustände nur mit JS und Bewegung ---------- */
html.js:not(.reduce) [data-reveal] { opacity: 0; }

/* ---------- Responsiv ---------- */
@media (max-width: 900px) {
  .ind-hero { padding-top: calc(var(--hdr) + 8vh); }
  .ind-hero__signal { top: calc(var(--hdr) - 2vh); right: -18vw; width: 70vw; opacity: .6; }
  .ind-cards__list { grid-template-columns: 1fr; gap: 3rem; }
  .icard:nth-child(2), .icard:nth-child(3) { margin-top: 0; }
  .icard__media { aspect-ratio: 4 / 3; }
  .ind-mount__grid { grid-template-columns: 2px minmax(0, 1fr); }
  .ind-mount__title { grid-column: 1 / -1; }
  .ind-mount__axis { min-height: 0; }
  .sl-hero { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--hdr) + 5vh); }
  .sl-hero__media { order: -1; height: 30svh; min-height: 200px; }
  .sl-hero__facts { gap: 2.2rem; }
  .sl-benefits__list { grid-template-columns: 1fr; }
  .sl-glance__grid, .sl-coliving { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .icard__body { grid-template-columns: auto 1fr auto; }
  .icard__text { grid-column: 1 / -1; }
  .ind-contact__actions { flex-direction: column; align-items: flex-start; }
  .ind-mail { font-size: .95rem; }
  .ind-self__q { display: block; margin-bottom: .4rem; }
}