/* ==========================================================================
   educis Connect — Aussehen der Filmszenen.
   Bausteine und Einheit (--u) kommen aus film.css.
   ========================================================================== */

/* ---------- 1 · Das Durcheinander ---------- */
.noise { position: relative; width: calc(86 * var(--u)); height: calc(28 * var(--u)); }
.note {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: calc(1 * var(--u));
  width: calc(24 * var(--u));
  padding: calc(1.2 * var(--u)) calc(1.4 * var(--u));
  border-radius: calc(1.3 * var(--u));
  border: 1px solid var(--f-line);
  background: #1b1634;
  box-shadow: 0 calc(1.6 * var(--u)) calc(3.4 * var(--u)) calc(-1.4 * var(--u)) rgb(0 0 0 / 0.8);
}
.note .f-ico { margin-top: calc(0.2 * var(--u)); color: var(--f-accent-2); }
.note span { display: grid; gap: calc(0.2 * var(--u)); min-width: 0; }
.note strong { font-size: calc(1.45 * var(--u)); font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note small { font-size: calc(1.15 * var(--u)); color: var(--f-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note--0 { left: 2%; top: 4%; }
.note--1 { left: 36%; top: -4%; }
.note--2 { right: 2%; top: 8%; background: #f4ecd4; border-color: #e3d4a8; color: #3a2f12; }
.note--2 .f-ico { color: #8a6d1b; }
.note--2 small { color: #6b5a2c; font-style: italic; }
.note--3 { left: 9%; top: 56%; }
.note--4 { left: 40%; top: 62%; }
.note--5 { right: 5%; top: 58%; background: #3a2a05; border-color: rgb(251 191 36 / 0.5); }
.note--5 .f-ico { color: #fde047; }
.noise__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  transform: translate(-50%, -50%);
}
.noise__mark img { width: 100%; height: 100%; border-radius: 24%; box-shadow: 0 0 calc(6 * var(--u)) rgb(139 92 246 / 0.9); }
.noise__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--f-accent-2); opacity: 0; }

/* ---------- 2 · Messenger ---------- */
/* "Datenschutzkonform." ist ein langes Wort: etwas kleiner, damit es in die Spalte passt. */
.f-h--long { font-size: calc(4.1 * var(--u)); }
/* Das Telefon rückt etwas nach links: rechts daneben stehen die Siegel. */
.msg { width: calc(21 * var(--u)); aspect-ratio: 9 / 16.6; margin-right: calc(15 * var(--u)); }
.msg .dev__screen {
  grid-template-rows: auto 1fr;
  background: linear-gradient(180deg, #1a1433, #0f0c1e);
}
.msg__head {
  display: grid;
  gap: calc(0.7 * var(--u));
  padding: calc(2.4 * var(--u)) calc(1.2 * var(--u)) calc(1 * var(--u));
  border-bottom: 1px solid var(--f-line);
  background: rgb(255 255 255 / 0.04);
}
.msg__head strong { font-size: calc(1.5 * var(--u)); }
.msg__head div { display: flex; gap: calc(0.4 * var(--u)); }
.msg__head em, .sick__when em {
  padding: calc(0.3 * var(--u)) calc(0.75 * var(--u));
  border-radius: 99px;
  background: rgb(255 255 255 / 0.08);
  font-size: calc(0.92 * var(--u));
  font-style: normal;
  color: var(--f-muted);
}
.msg__head em.is-act, .sick__when em.is-act { background: var(--f-accent); color: #fff; }
.msg__list { display: flex; flex-direction: column; gap: calc(0.8 * var(--u)); padding: calc(1.2 * var(--u)); }
.bub {
  text-align: left;
  max-width: 86%;
  margin: 0;
  padding: calc(0.8 * var(--u)) calc(1 * var(--u));
  border-radius: calc(1.2 * var(--u));
  font-size: calc(1.14 * var(--u));
  line-height: 1.3;
}
.bub small { display: block; margin-bottom: calc(0.15 * var(--u)); font-size: calc(0.86 * var(--u)); color: var(--f-accent-2); font-weight: 600; }
.bub--in { align-self: flex-start; background: rgb(255 255 255 / 0.1); border-bottom-left-radius: calc(0.3 * var(--u)); transform-origin: 0 100%; }
.bub--out { align-self: flex-end; background: linear-gradient(140deg, #8b5cf6, #6d28d9); border-bottom-right-radius: calc(0.3 * var(--u)); transform-origin: 100% 100%; }
.msg__read {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: calc(0.3 * var(--u));
  font-size: calc(0.9 * var(--u));
  color: #a7f3d0;
}
.msg__read .f-ico { width: calc(1.1 * var(--u)); height: calc(1.1 * var(--u)); }
.seal { position: absolute; font-size: calc(1.3 * var(--u)); background: #1b1634; }
.seal.f-chip--ok { background: #0f2a22; }
/* Die Siegel stehen neben dem Telefon, nicht darauf. */
.seal--0 { left: calc(50% + 4.6 * var(--u)); top: 18%; }
.seal--1 { left: calc(50% + 6.2 * var(--u)); top: 45%; }
.seal--2 { left: calc(50% + 4.6 * var(--u)); bottom: 20%; }

/* ---------- 3 · Mehr als Nachrichten ---------- */
.feats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(1.6 * var(--u));
  width: calc(86 * var(--u));
  perspective: calc(120 * var(--u));
}
.feat {
  display: grid;
  align-content: start;
  gap: calc(1.2 * var(--u));
  min-height: calc(17.5 * var(--u));
  padding: calc(1.5 * var(--u));
  text-align: left;
  background: #17132b;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.feat__h { display: flex; align-items: center; gap: calc(0.8 * var(--u)); font-size: calc(1.5 * var(--u)); }
.feat__h .f-ico { color: var(--f-accent-2); }
.feat__tag { justify-self: start; font-size: calc(1.05 * var(--u)); padding: calc(0.4 * var(--u)) calc(0.9 * var(--u)); }
.tt { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(0.45 * var(--u)); }
.tt i { height: calc(2.3 * var(--u)); border-radius: calc(0.5 * var(--u)); background: rgb(139 92 246 / 0.3); }
.tt i:nth-child(3n) { background: rgb(96 165 250 / 0.3); }
.tt i:nth-child(4n) { background: rgb(52 211 153 / 0.26); }
.tt i.is-sub { background: #fbbf24; box-shadow: 0 0 calc(1.6 * var(--u)) rgb(251 191 36 / 0.8); }
.hw, .kb { display: grid; gap: calc(0.9 * var(--u)); margin: 0; padding: 0; list-style: none; }
.hw li { display: flex; align-items: center; gap: calc(0.8 * var(--u)); font-size: calc(1.15 * var(--u)); color: var(--f-text); }
.hw i {
  position: relative;
  width: calc(1.6 * var(--u));
  height: calc(1.6 * var(--u));
  flex: none;
  border-radius: calc(0.45 * var(--u));
  border: calc(0.16 * var(--u)) solid var(--f-line-strong);
}
.hw i::after {
  content: "";
  position: absolute;
  left: 26%;
  top: 8%;
  width: 34%;
  height: 62%;
  border: solid #0b0915;
  border-width: 0 calc(0.24 * var(--u)) calc(0.24 * var(--u)) 0;
  transform: rotate(45deg) scale(var(--tick, 0));
}
.kb li { display: flex; align-items: center; gap: calc(0.8 * var(--u)); font-size: calc(1.15 * var(--u)); min-height: calc(2 * var(--u)); }
.kb b {
  display: grid;
  place-items: center;
  width: calc(2 * var(--u));
  height: calc(2 * var(--u));
  flex: none;
  border-radius: calc(0.5 * var(--u));
  background: rgb(255 255 255 / 0.09);
  font-size: calc(1 * var(--u));
  color: var(--f-muted);
}
.days { display: flex; justify-content: space-between; }
.days span { display: grid; justify-items: center; gap: calc(0.5 * var(--u)); font-family: var(--mono); font-size: calc(0.95 * var(--u)); color: var(--f-muted); }
.days i { width: calc(2.3 * var(--u)); height: calc(2.3 * var(--u)); border-radius: 50%; background: rgb(52 211 153 / 0.3); border: 1px solid rgb(52 211 153 / 0.5); }
.days .is-off i { background: rgb(251 191 36 / 0.3); border-color: #fbbf24; }

/* ---------- 4 · Krankmeldung ---------- */
.nomore { display: flex; gap: calc(1 * var(--u)); margin-top: calc(0.4 * var(--u)); }
.nomore span {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(4.4 * var(--u));
  height: calc(4.4 * var(--u));
  border-radius: 50%;
  border: 1px solid var(--f-line);
  background: rgb(255 255 255 / 0.05);
  color: var(--f-muted);
}
.nomore span::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: calc(0.34 * var(--u));
  border-radius: 99px;
  background: var(--f-bad);
  transform: rotate(-42deg) scaleX(var(--cut, 1));
}
.sick {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(1.2 * var(--u));
  width: calc(49 * var(--u));
}
.sick__phone { width: calc(16 * var(--u)); aspect-ratio: 9 / 16; }
.sick__phone .dev__screen {
  align-content: center;
  justify-items: center;
  gap: calc(1.2 * var(--u));
  padding: calc(2 * var(--u)) calc(1.2 * var(--u));
  background: linear-gradient(180deg, #1a1433, #0f0c1e);
}
.sick__phone small { font-size: calc(1.05 * var(--u)); color: var(--f-muted); }
.sick__btn {
  position: relative;
  width: 100%;
  place-items: center;
  padding: calc(1.3 * var(--u)) 0;
  border-radius: calc(1.2 * var(--u));
  background: linear-gradient(140deg, #8b5cf6, #6d28d9);
  font-size: calc(1.35 * var(--u));
  font-weight: 650;
  box-shadow: 0 calc(0.8 * var(--u)) calc(2 * var(--u)) rgb(109 40 217 / 0.6);
}
.sick__btn span { display: inline-flex; align-items: center; gap: calc(0.4 * var(--u)); }
.sick__btn .f-ico { width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); }
.sick__tap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  margin: calc(-2 * var(--u)) 0 0 calc(-2 * var(--u));
  border-radius: 50%;
  background: rgb(255 255 255 / 0.5);
  opacity: 0;
}
.sick__when { display: flex; gap: calc(0.5 * var(--u)); }
.sick__wire { display: flex; align-items: center; gap: calc(0.7 * var(--u)); }
.sick__wire i { width: calc(0.8 * var(--u)); height: calc(0.8 * var(--u)); border-radius: 50%; background: var(--f-accent-2); opacity: 0.25; }
.sick__book { display: grid; gap: calc(0.8 * var(--u)); width: calc(25 * var(--u)); padding: calc(1.4 * var(--u)); background: #17132b; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sick__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.8 * var(--u));
  padding: calc(0.7 * var(--u)) calc(0.9 * var(--u));
  border-radius: calc(0.9 * var(--u));
  background: rgb(255 255 255 / 0.04);
  border: 1px solid transparent;
  font-size: calc(1.25 * var(--u));
}
.sick__row .f-chip { font-size: calc(1 * var(--u)); padding: calc(0.3 * var(--u)) calc(0.8 * var(--u)); font-style: normal; }
.sick__row .swap { justify-items: end; }

/* ---------- 5 · Alles verknüpft ---------- */
.net { position: relative; width: calc(78 * var(--u)); height: calc(27 * var(--u)); }
.net__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net__lines line {
  stroke: rgb(196 181 253 / 0.55);
  stroke-width: 0.45;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.net__node {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: calc(0.6 * var(--u));
  transform: translate(-50%, 0);
  font-size: calc(1.3 * var(--u));
  font-weight: 550;
  white-space: nowrap;
}
.net__node .f-ico {
  box-sizing: content-box;
  width: calc(2.2 * var(--u));
  height: calc(2.2 * var(--u));
  padding: calc(1.3 * var(--u));
  border-radius: 50%;
  border: 1px solid var(--f-line-strong);
  background: #1d1838;
  color: var(--f-accent-2);
}
.net__core {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: linear-gradient(140deg, #a78bfa, #6d28d9);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 calc(5 * var(--u)) rgb(139 92 246 / 0.85);
}
.net__core .f-ico { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); color: #fff; }
.net__pulse {
  position: absolute;
  left: 50%;
  top: 66%;
  width: calc(1.1 * var(--u));
  height: calc(1.1 * var(--u));
  margin: calc(-0.55 * var(--u)) 0 0 calc(-0.55 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 calc(1.6 * var(--u)) #c4b5fd;
  opacity: 0;
}

/* ---------- Hochformat ---------- */
@container (max-aspect-ratio: 1/1) {
  .f-h--long { font-size: calc(4.5 * var(--u)); }
  .noise { width: calc(46 * var(--u)); height: calc(36 * var(--u)); }
  .note { width: calc(22 * var(--u)); padding: calc(1 * var(--u)) calc(1.1 * var(--u)); }
  .note--0 { left: 0; top: 0; }
  .note--1 { left: auto; right: 0; top: 14%; }
  .note--2 { left: 2%; right: auto; top: 30%; }
  .note--3 { left: auto; right: 2%; top: 46%; }
  .note--4 { left: 0; top: 62%; }
  .note--5 { right: 0; top: 78%; }
  .msg { width: calc(16.5 * var(--u)); margin-right: 0; }
  .msg .bub { font-size: calc(0.95 * var(--u)); padding: calc(0.6 * var(--u)) calc(0.8 * var(--u)); }
  .msg__head { padding-top: calc(1.9 * var(--u)); }
  .seal { font-size: calc(1.05 * var(--u)); padding: calc(0.45 * var(--u)) calc(0.9 * var(--u)); }
  .seal--0 { left: 0; top: 6%; }
  .seal--1 { left: auto; right: 0; top: 44%; }
  .seal--2 { left: 0; bottom: 8%; }
  .feats { grid-template-columns: repeat(2, 1fr); width: calc(45.6 * var(--u)); gap: calc(1.2 * var(--u)); }
  .feat { min-height: calc(18.5 * var(--u)); padding: calc(1.2 * var(--u)); gap: calc(1 * var(--u)); }
  .sick { width: calc(45.6 * var(--u)); gap: calc(0.7 * var(--u)); }
  .sick__phone { width: calc(15 * var(--u)); }
  .sick__book { width: calc(24 * var(--u)); padding: calc(1.1 * var(--u)); }
  .sick__wire { flex-direction: row; gap: calc(0.4 * var(--u)); }
  .nomore { justify-content: center; }
  .net { width: calc(45.6 * var(--u)); height: calc(30 * var(--u)); }
  .net__node { font-size: calc(1.1 * var(--u)); }
  .net__node .f-ico { padding: calc(1 * var(--u)); width: calc(2 * var(--u)); height: calc(2 * var(--u)); }
  .net__core { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
}