/* boxen.css — Thalassa-Ergaenzung zum Konzept (12.09.2026)

   Arpads Regel: Jeder Text, auch auf Unterseiten, steht in einer dekorierten
   Box. Ein Abschnitt, eine Box. Boxen gleich gross; passt der Text nicht,
   klappt die Box per Klick an Ort und Stelle auf.

   Nichts hier ist erfunden: .boxen = .moment-grid, .box = .moment-card
   (Masse, Rand, Radius 28, Grund) aus bauteile.css, woertlich uebernommen.
   Neu sind nur: das Aufklappen (Zeilenbegrenzung + Knopf), das Foto in der
   Form der Konzept-Sphaere, und drei Grundfarben aus der Konzeptpalette.
   Dekor: .moment-art und .moment-tag aus bauteile.css im Markup verwenden.
   Ausnahme von der Boxregel: die Rechtstexte (rechtstext.css). */

.boxen { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }

.box {
  position: relative; grid-column: span 6; display: flex; flex-direction: column;
  min-height: 330px; overflow: hidden; padding: 34px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
}
.box--drittel { grid-column: span 4; }
.box--voll    { grid-column: span 12; }

/* Grundfarben — nur Konzeptpalette */
.box--mist { background: var(--mist); }
.box--pale { background: var(--emerald-pale); }
.box--ink  { background: var(--ink); color: var(--white); border-color: var(--ink-3); }
.box--ink h3, .box--ink .box__text { color: var(--white); }
.box--ink .moment-tag { color: var(--emerald-pale); background: var(--ink-3); }

/* PUNKTRASTER IN JEDEM DUNKLEN KASTEN (22.09.2026). Auftrag: ueberall,
   wo ein Kaestchen schwarzen Grund hat, dasselbe Punktraster wie im
   Uebersetzungsblock der Preisseite. GEMESSEN am selben Tag ueber alle
   Seiten beider Sprachen: dunkle Kaestchen sind `.box--ink` und die
   empfohlene Preiskarte `.price-card--featured`. Die Tafeln `.pa-panel`
   (privacy-advantage.css) und `.acc-item` (rechtstext.css) tragen schon
   ein eigenes Raster und bleiben, wie sie sind; ebenso das Tor der
   Studentenansicht (#studentGate, preise.css).

   EINE EIGENE EBENE, KEIN WEITERES HINTERGRUNDBILD. bauteile.css laedt
   nach dieser Datei und setzt `.price-card--featured { background:
   var(--ink) }` als Kurzform -- die loeschte jedes background-image von
   hier. Ausserdem kann nur eine Ebene zur Ecke hin auslaufen (mask).
   `isolation` haelt sie hinter dem Inhalt und vor dem Grund;
   `border-radius: inherit`, weil die Preiskarte nicht abschneidet (ihre
   Plakette ragt ueber den Rand). */
.box--ink, .price-card.price-card--featured { isolation: isolate; }
.box--ink::before, .price-card.price-card--featured::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background-image: radial-gradient(circle, rgba(167, 243, 208, .24) 1.1px, transparent 1.45px);
  background-position: 9px 9px; background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(130% 110% at 100% 0%, #000 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .25) 100%);
  mask-image: radial-gradient(130% 110% at 100% 0%, #000 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .25) 100%);
}
@media print { .box--ink::before, .price-card.price-card--featured::before { display: none; } }
/* Der Ghost-Knopf ist im Ruhezustand zu 7 % weiss (bauteile.css) -- durch
   ihn schimmerte das Raster. #182b27 ist genau diese Mischung auf --ink,
   nur deckend; der Hover ist schon deckend und bleibt, wie er ist. */
.box--ink .btn--ghost:not(:hover) { background-color: #182b27; }

/* Ueberschrift und Text: Masse von .moment-card h3 / p */
.box h3 { max-width: 480px; margin: 58px 0 14px; font-size: clamp(28px, 3vw, 41px);
  line-height: 1.07; letter-spacing: -.03em; text-wrap: balance; }
.box--klein h3 { margin-top: 26px; font-size: clamp(20px, 2.5vw, 29px); }
.box__text { max-width: 500px; margin: 0 0 24px; font-size: 16px; line-height: 1.55; }

/* Kein Wort und kein Satz wird mitten gebrochen — in beiden Sprachen */
.box h3, .box__text { overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* Zeilenbegrenzung; boxen.js haengt den Knopf nur an, wenn wirklich etwas fehlt */
.box__text[data-mehr] { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--box-zeilen, 5); overflow: hidden; }
.box.is-offen .box__text[data-mehr] { display: block; -webkit-line-clamp: unset; overflow: visible; }

.box__mehr { margin-top: auto; align-self: flex-start; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 800; font-size: 15px; color: var(--emerald-dark); cursor: pointer; }
.box--ink .box__mehr { color: #48dcae; }
.box__mehr:focus-visible { outline: 2px solid var(--emerald-dark); outline-offset: 3px; }

/* Foto in der Form der Konzept-Sphaere (.moment-art: -42/-44, 170 px, Kreis) */
.box__bild { position: absolute; right: -42px; top: -44px; width: 170px; height: 170px;
  border-radius: 50%; object-fit: cover; border: 1px solid rgba(16,185,129,.25); }
.box--bildbreit .box__bild { position: static; width: 100%; height: 180px; margin: -34px -34px 22px;
  width: calc(100% + 68px); border-radius: 0; border: 0; }

@media (max-width: 900px) {
  .box, .box--drittel { grid-column: span 12; }
  .box { min-height: 0; padding: 26px; }
  .box h3 { margin-top: 44px; }
  .box--bildbreit .box__bild { margin: -26px -26px 18px; width: calc(100% + 52px); }
}
/* OHNE JAVASCRIPT IST DER TEXT SONST WEG. Die Zeilenbegrenzung ist CSS, der
   Knopf ist JavaScript: faellt boxen.js aus (Skript geblockt, Fehler davor,
   Ausdruck), bleibt die Begrenzung und der Weg zum Rest fehlt. S2 hat es am
   12.09.2026 auf der Preisseite gemessen: 318 von 339 px Rechtstext waren
   unerreichbar. Deshalb hier, fuer jede Seite mit Boxen: kein Skript, keine
   Begrenzung. Dasselbe im Ausdruck - Papier hat keinen Knopf. */
@media (scripting: none) {
  .box__text[data-mehr] { display: block; -webkit-line-clamp: unset; overflow: visible; }
}
@media print {
  .box__text[data-mehr] { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .box__mehr { display: none; }
  .box { min-height: 0; break-inside: avoid; }
}

@media (prefers-reduced-motion: no-preference) {
  .box { transition: transform .2s ease, box-shadow .2s ease; }
  .box:hover { box-shadow: var(--shadow-md); }
}