.ifs-mockup { width: 100%; margin-inline: auto; }
.ifs-mockup--app { max-width: 620px; }
@media (min-width: 1024px) {
  .ifs-mockup--app { width: 108%; max-width: 620px; margin-inline: -4%; justify-self: center; }
}
.ifs-mockup--held { width: 108%; max-width: none; margin-inline: -4%; margin-top: -6%; }
@media (min-width: 1024px) {
  .ifs-mockup--held { width: 116%; margin-inline: -8%; margin-top: -9%; }
}

.ifs-akte { display: grid; gap: clamp(2rem, 5vw, 3rem); overflow-anchor: none; }
.ifs-buehne { position: relative; isolation: isolate; width: 100%; max-width: 500px; margin-inline: auto; padding: 0 clamp(.9rem, 2.5vw, 1.5rem) clamp(.9rem, 2.5vw, 1.5rem) 0; }
.ifs-buehne::before {
  content: ""; position: absolute; z-index: -1; inset: clamp(2.5rem, 7vw, 4rem) 0 0 clamp(2.5rem, 7vw, 4rem);
  border-radius: var(--radius-l); background: var(--gradient-diag); box-shadow: var(--shadow-l);
}
.ifs-liste { display: grid; gap: .75rem; }
.ifs-liste__fenster { grid-column: 1 / -1; padding-block: .5rem .75rem; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .ifs-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ifs-liste > .ifs-funktion { grid-template-columns: minmax(0, 1fr); }
  .ifs-liste .ifs-funktion__icon { grid-row: auto; margin-bottom: .45rem; }
}
@media (min-width: 1024px) {
  .ifs-akte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .ifs-buehne { grid-column: 2; grid-row: 1; max-width: none; position: sticky; top: calc(var(--header-h) + var(--header-gap) * 2 + 1.5rem); }
  .ifs-liste { grid-column: 1; grid-row: 1; }
  .ifs-fenster .ifs-zeile { padding: .7rem .8rem; }
  .ifs-fenster .ifs-mini { width: 36px; height: 36px; }
  .ifs-fenster .ifs-zeilen { gap: .6rem; }
  .ifs-fenster .ifs-feld__wert { min-height: 40px; }
  .ifs-fenster .ifs-felder { gap: .85rem .9rem; margin-top: 1.1rem; }
  .ifs-fenster .ifs-chip { padding: .25rem .7rem; }
}

.ifs-funktion {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: .3rem 1rem;
  padding: 1.1rem 1.25rem 1.15rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, .75); border-radius: var(--radius);
  background: rgba(255, 255, 255, .45);
}
.ifs-funktion::before {
  content: ""; position: absolute; left: -1px; top: 1rem; bottom: 1rem; width: 4px;
  border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--primary), var(--accent));
  scale: 1 0;
}
.ifs-funktion.ist-aktiv { border-color: var(--white); background: var(--white); box-shadow: var(--shadow); }
.ifs-funktion.ist-aktiv::before { scale: 1; }
.ifs-funktion__icon {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; grid-row: 1 / span 2; width: 48px; height: 48px;
  border-radius: 13px; background: var(--white); color: var(--primary); box-shadow: var(--shadow-s);
}
.ifs-funktion__icon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gradient-diag); opacity: 0; }
.ifs-funktion__icon .icon { width: 21px; height: 21px; }
.ifs-funktion.ist-aktiv .ifs-funktion__icon { color: var(--white); box-shadow: 0 10px 20px -10px rgba(0, 73, 148, .7); }
.ifs-funktion.ist-aktiv .ifs-funktion__icon::before { opacity: 1; }
.ifs-funktion h3 { align-self: center; font-size: 1.125rem; }
.ifs-funktion p { color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.ifs-funktion__knopf { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ifs-funktion__knopf::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.ifs-funktion__knopf:focus-visible { outline: none; }
.ifs-funktion__knopf:focus-visible::after { outline: 3px solid var(--primary); outline-offset: 3px; }
html:not(.js) .ifs-funktion__knopf { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .ifs-funktion:not(.ist-aktiv):hover { background: rgba(255, 255, 255, .8); }
}

.ifs-fenster {
  --aktiv: 0; --abstand: .3rem; --rand: clamp(.9rem, 2.6vw, 1.35rem);
  position: relative; overflow: hidden;
  border-radius: 20px; background: var(--white);
  box-shadow: var(--shadow-l), 0 0 0 1px rgba(0, 38, 80, .05);
  color: var(--primary); font-size: clamp(.6875rem, .64rem + .15vw, .75rem); font-weight: 600; line-height: 1.4;
}
.ifs-fenster .icon { width: 14px; height: 14px; }
.ifs-fenster__leiste { display: flex; align-items: center; gap: .8rem; padding: .65rem var(--rand); border-bottom: 1px solid var(--line); background: var(--bg); }
.ifs-fenster__punkte { display: flex; gap: 5px; }
.ifs-fenster__punkte > span { width: 9px; height: 9px; border-radius: 50%; background: #cfd9ea; }
.ifs-fenster__titel { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.ifs-fenster__suche {
  display: flex; align-items: center; gap: .45rem; width: 32%; min-width: 4.5rem; margin-left: auto; padding: .35rem .6rem;
  border: 1px solid var(--line); border-radius: 99px; background: var(--white); color: #6b7280;
}
.ifs-fenster__suche .icon { width: 11px; height: 11px; }
.ifs-fenster__suche .ifs-balken { flex: 1; }
.ifs-fenster__kopf { display: flex; align-items: center; gap: .8rem; padding: 1rem var(--rand) .9rem; }
.ifs-avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--tile-2), #bfd2ee); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--tile-2);
}
.ifs-fenster__aktionen { display: flex; gap: .35rem; }
.ifs-fenster__aktionen > span { width: 26px; height: 26px; border-radius: 8px; background: var(--tile-hell); }
.ifs-fenster__aktionen > span + span { background: var(--accent-50); }

.ifs-tabs {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--abstand);
  margin: 0 var(--rand); padding: 4px; border-radius: 14px; background: var(--tile-hell);
}
.ifs-tabs__marker {
  position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px - 5 * var(--abstand)) / 6);
  border-radius: 10px; background: var(--gradient-diag); box-shadow: 0 8px 16px -8px rgba(0, 73, 148, .75);
  translate: calc(var(--aktiv) * (100% + var(--abstand))) 0;
}
.ifs-tab { position: relative; display: grid; place-items: center; height: clamp(32px, 7vw, 38px); color: var(--primary); }
.ifs-tab .icon { width: 15px; height: 15px; }
.ifs-tab.ist-aktiv { color: var(--white); }

.ifs-panels { display: grid; padding: var(--rand); }
.ifs-panel { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; }
.ifs-panel.ist-aktiv { visibility: visible; opacity: 1; }

.ifs-balken { display: block; width: var(--w, 100%); height: 8px; border-radius: 99px; background: var(--tile-2); }
.ifs-balken--dunkel { background: #b8cbe7; }
.ifs-balken--label { height: 6px; background: #d3deef; }
.ifs-balken--klein { height: 6px; background: var(--line); }
.ifs-text { display: grid; flex: 1; gap: 7px; min-width: 0; }
.ifs-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ifs-chip {
  display: inline-flex; align-items: center; gap: .3rem; flex: none; padding: .2rem .6rem;
  border: 1px solid var(--line); border-radius: 99px; background: var(--white); color: var(--primary); white-space: nowrap;
}
.ifs-chip .icon { width: 10px; height: 10px; }
.ifs-chip--aktiv { border-color: transparent; background: var(--gradient); color: var(--white); }
.ifs-zeilen { display: grid; gap: .5rem; }
.ifs-zeile { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .55rem .65rem; border-radius: 12px; background: var(--tile-hell); }
.ifs-mini { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--white); box-shadow: var(--shadow-s); }
.ifs-mini .icon { width: 13px; height: 13px; }

.ifs-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .75rem; margin-top: .95rem; }
.ifs-feld { display: grid; gap: .4rem; }
.ifs-feld--breit { grid-column: 1 / -1; }
.ifs-feld__wert { display: grid; align-content: center; gap: 7px; min-height: 34px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; }
.ifs-verknuepft { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; padding: .45rem; border: 1px dashed #c9d6ea; border-radius: 12px; }
.ifs-verknuepft .ifs-mini { width: auto; height: 32px; background: var(--tile-hell); box-shadow: none; }

.ifs-badge {
  display: inline-flex; align-items: center; gap: .3rem; flex: none; padding: .2rem .55rem .2rem .22rem;
  border-radius: 99px; background: var(--white); box-shadow: var(--shadow-s); white-space: nowrap;
}
.ifs-badge__haken { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--white); }
.ifs-fenster .ifs-badge__haken .icon { width: 9px; height: 9px; }

.ifs-check {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border: 2px solid #b8c7de; border-radius: 6px; background: var(--white); color: var(--white);
}
.ifs-zeile--fertig .ifs-check { border-color: transparent; }
.ifs-zeile--fertig .ifs-check::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 6px; background: var(--gradient-diag); }
.ifs-fenster .ifs-check .icon { width: 10px; height: 10px; }
.ifs-zeile--fertig .ifs-text { opacity: .5; }
.ifs-zeile--wichtig { background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-s); }
.ifs-symbol { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--white); }
.ifs-symbol--flagge { background: #fdecea; color: var(--rot); }
.ifs-zeile--wichtig .ifs-symbol--glocke { background: var(--accent-50); }
.ifs-fenster .ifs-symbol .icon { width: 12px; height: 12px; }
.ifs-fortschritt { display: block; height: 6px; margin-top: 1rem; overflow: hidden; border-radius: 99px; background: var(--tile-2); }
.ifs-fortschritt > span { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--gradient); transform-origin: left; }

.ifs-ablage { display: flex; align-items: center; gap: .6rem; padding: .15rem .2rem .35rem; }
.ifs-ablage .ifs-balken--klein { margin-left: auto; }

.ifs-woche { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: .35rem; }
.ifs-woche__tag { padding-bottom: .45rem; color: #6b7280; text-align: center; }
.ifs-woche__tag--heute { color: var(--primary); font-weight: 700; }
.ifs-woche__raster {
  --zeile: 31px;
  grid-column: 1 / -1; display: grid; grid-template-columns: inherit; grid-template-rows: repeat(6, var(--zeile)); gap: 4px .35rem;
  padding-top: 4px;
  background: repeating-linear-gradient(180deg, transparent 0 2px, var(--line) 2px 3px, transparent 3px calc(var(--zeile) + 4px));
}
.ifs-termin {
  grid-column: var(--tag); grid-row: var(--von) / span var(--dauer);
  display: grid; align-content: start; gap: 6px; min-width: 0; padding: .45rem .45rem;
  border-left: 3px solid var(--accent); border-radius: 8px; background: var(--tile-2); transform-origin: top;
}
.ifs-termin .ifs-balken { height: 6px; }
.ifs-termin .ifs-balken--dunkel { background: #a9c0e3; }
.ifs-termin--akte { border-left-color: transparent; background: var(--gradient-diag); color: var(--white); box-shadow: 0 10px 20px -10px rgba(0, 73, 148, .7); }
.ifs-termin--akte .ifs-balken { background: rgba(255, 255, 255, .55); }
.ifs-termin--team { background: var(--accent-50); }
.ifs-fenster .ifs-termin .icon { width: 11px; height: 11px; }

.ifs-chat { display: grid; gap: .5rem; }
.ifs-blase { display: grid; gap: 7px; width: 66%; padding: .65rem .8rem; border-radius: 14px 14px 14px 4px; background: var(--tile-hell); }
.ifs-blase--ich { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--gradient); }
.ifs-blase--ich .ifs-balken { background: rgba(255, 255, 255, .6); }
.ifs-blase--kurz { width: 44%; }
.ifs-tippt { display: flex; gap: 4px; justify-self: start; padding: .7rem .8rem; border-radius: 14px 14px 14px 4px; background: var(--tile-hell); }
.ifs-tippt > span { width: 6px; height: 6px; border-radius: 50%; background: #93a9cc; }
.ifs-eingabe { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; padding: .3rem .3rem .3rem .85rem; border: 1px solid var(--line); border-radius: 99px; }
.ifs-eingabe .ifs-balken { flex: none; }
.ifs-senden { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; background: var(--gradient-diag); color: var(--white); }
.ifs-fenster .ifs-senden .icon { width: 12px; height: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .js .ifs-liste > [data-reveal] {
    transition: opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s),
      background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .ifs-funktion::before { transition: scale .4s var(--ease); }
  .ifs-funktion__icon { transition: color .3s var(--ease), box-shadow .3s var(--ease), rotate .35s var(--ease), scale .35s var(--ease); }
  .ifs-funktion__icon::before { transition: opacity .3s var(--ease); }
  .ifs-funktion.ist-aktiv .ifs-funktion__icon { rotate: -6deg; scale: 1.06; }
  .ifs-tabs__marker { transition: translate .45s var(--ease); }
  .ifs-tab { transition: color .3s var(--ease); }
  .ifs-panel { translate: 0 8px; transition: opacity .3s var(--ease), translate .35s var(--ease), visibility 0s linear .35s; }
  .ifs-panel.ist-aktiv { translate: none; transition-delay: 0s; }

  .js .ifs-buehne[data-reveal]:not(.is-visible) { translate: 0 40px; }
  .js .ifs-buehne.is-visible::before { animation: ifs-flaeche 1s var(--ease) .15s both; }
  .js .ifs-buehne.is-visible .ifs-tab { animation: ifs-pop .45s var(--ease) calc(.4s + var(--i) * 70ms) both; }
  .js .ifs-buehne.is-visible .ifs-tabs__marker { animation: ifs-pop .45s var(--ease) .4s both; }

  .ifs-fenster { --start: .85s; }
  .ifs-fenster.ist-benutzt { --start: .1s; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-rein { animation: ifs-rein .5s var(--ease) calc(var(--start) + var(--i) * 80ms) both; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-pop { animation: ifs-pop .45s var(--ease) calc(var(--start) + var(--i) * 80ms) both; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-blase--ich { animation-name: ifs-rein-rechts; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-badge { animation: ifs-badge .45s var(--ease) calc(var(--start) + .4s + var(--i) * 140ms) both; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-klingeln .icon { animation: ifs-klingeln .7s ease-in-out calc(var(--start) + .3s) 2; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-zeile--fertig .ifs-check::before { animation: ifs-pop .35s var(--ease) calc(var(--start) + .45s + var(--i) * .3s) both; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-zeile--fertig .ifs-check .icon { animation: ifs-haken .35s var(--ease) calc(var(--start) + .55s + var(--i) * .3s) both; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-zeile--fertig .ifs-check { animation: ifs-haken-rand .35s var(--ease) calc(var(--start) + .45s + var(--i) * .3s) both; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-zeile--fertig .ifs-text { animation: ifs-erledigt .4s var(--ease) calc(var(--start) + .6s + var(--i) * .3s) both; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-glocke { transform-origin: 50% 10%; animation: ifs-glocke .9s ease-in-out calc(var(--start) + 1.1s) 1; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-fortschritt > span { animation: ifs-fortschritt 1s var(--ease) calc(var(--start) + .5s) both; }
  .js .ifs-buehne.is-visible .ist-aktiv .ifs-tippt > span { animation: ifs-tippen .9s ease-in-out calc(var(--start) + .8s + var(--n) * .15s) 3; }
}
@keyframes ifs-flaeche { from { opacity: 0; scale: .9; } }
@keyframes ifs-pop { from { opacity: 0; scale: .6; } 70% { opacity: 1; scale: 1.06; } }
@keyframes ifs-rein { from { opacity: 0; translate: -14px 0; } }
@keyframes ifs-rein-rechts { from { opacity: 0; translate: 14px 0; } }
@keyframes ifs-badge { from { opacity: 0; translate: 16px 0; scale: .85; } }
@keyframes ifs-klingeln { 15%, 45%, 75% { rotate: -14deg; } 30%, 60%, 90% { rotate: 14deg; } }
@keyframes ifs-haken { from { scale: 0; rotate: -30deg; } }
@keyframes ifs-haken-rand { from { border-color: #b8c7de; } }
@keyframes ifs-erledigt { from { opacity: 1; } }
@keyframes ifs-glocke { 20% { rotate: 16deg; } 40% { rotate: -12deg; } 60% { rotate: 8deg; } 80% { rotate: -4deg; } }
@keyframes ifs-fortschritt { from { scale: 0 1; } }
@keyframes ifs-tippen { 30% { translate: 0 -4px; background: var(--accent); } 60% { translate: none; } }