/* V4.15.0: ein gemeinsamer Farbverlauf und ruhigere, natürliche Textumbrüche. */
h1, h2, h3, .eyebrow, .section-status, .status-dot {
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
h1, h2, h3 { text-wrap: balance; }
.headline-phrase { display: inline; }
.frei .section-copy { max-width: 58rem; }
.frei h2 { max-width: 24ch; line-height: 1.13; }
.frei h2 .headline-phrase { display: block; }
.privacy-copy h2 { max-width: 22ch; line-height: 1.13; }
.privacy-copy h2 .headline-phrase { display: block; }
.subpage-hero h1, .hero-copy h1 { line-height: 1.12; }
.reality-grid b { line-height: 1.25; text-wrap: balance; }
.reality-grid p strong { font-weight: 700; color: inherit; }
.hero-copy .release-note {
  margin-top: 1.35rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--v3-teal-bright, #26bfc3);
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,.065);
  color: rgba(237,248,246,.88);
  font-size: 1rem;
  line-height: 1.6;
}
.hero-copy .release-note b { display: block; margin-bottom: .2rem; color: #fff; }
.widgets-status { line-height: 1.6; }
.day-visual { align-self: center; }
.day-layout-wide .day-visual img { height: auto; max-height: none; aspect-ratio: 4 / 3; }
@media (min-width: 64rem) {
  .day-layout-wide { grid-template-columns: minmax(17rem,.72fr) minmax(0,1.6fr); }
}

/* Die acht Außenkacheln bilden EINE Maske über EINER animierten Farbfläche.
   Kein eigener Farbverlauf und kein Zeitversatz pro Kachel. */
.studio-mark, .studio-field-mark {
  --studio-grid-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='white'%3E%3Crect x='0' y='0' width='28' height='28' rx='7'/%3E%3Crect x='36' y='0' width='28' height='28' rx='7'/%3E%3Crect x='72' y='0' width='28' height='28' rx='7'/%3E%3Crect x='0' y='36' width='28' height='28' rx='7'/%3E%3Crect x='72' y='36' width='28' height='28' rx='7'/%3E%3Crect x='0' y='72' width='28' height='28' rx='7'/%3E%3Crect x='36' y='72' width='28' height='28' rx='7'/%3E%3Crect x='72' y='72' width='28' height='28' rx='7'/%3E%3C/g%3E%3C/svg%3E");
  aspect-ratio: 1;
  gap: 8%;
}
.studio-mark { width: 5.6rem; }
.studio-mark::before, .studio-field-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, #52d8c3 5%, #60b9dc 27%, #8b87dc 48%, #db95c8 69%, #edcf83 91%);
  background-size: 230% 230%;
  -webkit-mask: var(--studio-grid-mask) center / 100% 100% no-repeat;
  mask: var(--studio-grid-mask) center / 100% 100% no-repeat;
  opacity: .8;
  animation: studio-gemeinsamer-verlauf 13s ease-in-out infinite alternate;
}
.studio-field-mark::before { opacity: .65; }
.studio-mark i:not(.studio-center),
.studio-field-mark i:not(.studio-field-center),
.studio-context.visible .studio-mark i:not(.studio-center),
.studio-context.visible .studio-field-mark i:not(.studio-field-center) {
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 0;
  scale: 1;
  animation: none;
}
.studio-mark .studio-center { position: relative; z-index: 1; font-size: 1rem; }
@keyframes studio-gemeinsamer-verlauf {
  from { background-position: 0% 15%; }
  to { background-position: 100% 85%; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-mark::before, .studio-field-mark::before { animation: none; background-position: 45% 50%; }
}
@media (max-width: 40rem) {
  .hero-copy .release-note { font-size: .9375rem; padding: .85rem 1rem; }
  .section-status { line-height: 1.5; }
  .frei h2, .privacy-copy h2 { font-size: clamp(1.8rem, 8.2vw, 2.3rem); }
  .day-visual { padding: .55rem; }
  .day-layout-wide .day-visual img { border-radius: 12px; }
}

/* V4.19.0: von den drei Modellen zur ausführlichen Modellseite. */
.home .model-more { margin-top: 2rem; text-align: center; }
.home .model-more .cta { gap: .65rem; max-width: 100%; font-size: .9375rem; line-height: 1.4; padding: .95rem 1.25rem; }
.home .model-more .cta span:first-child { min-width: 0; }
.home .model-more .cta span[aria-hidden] { flex: 0 0 auto; }
.home .model-more .pricing-status { margin: 1rem auto 0; max-width: 62ch; text-align: center; }

/* Widgets ergänzen Pro; die bisherige Ablage-Funktion bleibt ebenfalls sichtbar. */
.home .pricing .tier-pro .tier-features .tier-feature { display: grid; }

/* V4.28: konkrete Funktionen statt künstlicher Tageszeiten. */
.day-showcase .day-heading {max-width:46rem;margin-bottom:1.8rem;}
.day-showcase .day-heading h2 {margin:.5rem 0 1rem;}
.day-showcase .day-heading p {max-width:40rem;color:var(--text-leise,#526260);line-height:1.65;}
.day-showcase .day-tabs {grid-template-columns:repeat(4,1fr);gap:.5rem;margin:0 0 1.8rem;max-width:55rem;}
.day-showcase .day-tabs button {text-align:center;padding:1rem .6rem;border-radius:14px;}
.day-showcase .day-tabs b {font-size:.98rem;}
.day-showcase .day-scene {display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(1.6rem,3.5vw,3.5rem);align-items:center;}
.day-showcase .day-description {padding:0;background:none;box-shadow:none;min-height:0;}
.day-showcase .day-description h3 {font-size:clamp(1.7rem,2.8vw,2.65rem);line-height:1.12;letter-spacing:-.025em;margin:1rem 0;}
.day-showcase .day-description p {font-size:1rem;line-height:1.7;margin:0 0 1.4rem;}
.day-tier {display:inline-block;color:#136863;background:#e3f1ec;border-radius:999px;padding:.45rem .8rem;font-size:.76rem;font-weight:700;}
[data-scene="plan"] .day-tier {color:#765021;background:#f7edda;}
.day-more {font-weight:700;font-size:.9rem;text-decoration:none;display:inline-flex;gap:.6rem;align-items:center;}
.day-showcase .day-visual {padding:0;border-radius:0;background:none;box-shadow:none;margin:0;min-width:0;}
.day-zoom {display:block;position:relative;width:100%;border:0;padding:5px;border-radius:20px;background:#26312f;box-shadow:0 20px 45px #123d3420;cursor:zoom-in;}
.day-zoom picture {display:block;overflow:hidden;border-radius:15px;}
.day-showcase .day-visual img {display:block;width:100%;height:auto;max-height:none;aspect-ratio:4/3;object-fit:contain;border-radius:0;background:#f4f4f6;}
.day-zoom-label {position:absolute;right:.8rem;bottom:.8rem;background:#fffef4ee;color:#153c38;border:1px solid #d4dfda;padding:.45rem .65rem;border-radius:9px;font-size:.72rem;font-weight:650;}
.day-showcase .day-visual figcaption {text-align:center;font-size:.72rem;line-height:1.5;margin-top:1rem;color:#536661;}
.day-lightbox {width:max-content;max-width:96vw;max-height:96dvh;padding:1rem;border:1px solid #d1ded8;border-radius:18px;background:#f5f8f4;}
.day-lightbox::backdrop {background:#071c19df;}
.day-lightbox form {display:flex;justify-content:flex-end;margin-bottom:.7rem;}
.day-lightbox button {border:1px solid #c2d5cc;border-radius:9px;padding:.6rem 1rem;background:white;cursor:pointer;font:inherit;}
.day-lightbox img {display:block;width:auto;height:auto;max-width:calc(96vw - 2rem);max-height:calc(96dvh - 9rem);object-fit:contain;border-radius:8px;margin:auto;}
.day-lightbox p {font-size:.8rem;text-align:center;max-width:70rem;}
@media(max-width:800px) {
 .day-showcase .day-scene {grid-template-columns:1fr;gap:1.6rem;}
 .day-showcase .day-description {max-width:42rem;min-height:12rem;}
 .day-showcase .day-description h3 {font-size:1.8rem;margin:.7rem 0;}
}
@media(max-width:600px) {
 .day-showcase .day-tabs {grid-template-columns:repeat(2,1fr);gap:.4rem;margin-bottom:1.5rem;}
 .day-showcase .day-tabs button {padding:.8rem .5rem;}
 .day-showcase .day-description {min-height:16rem;}
 .day-showcase .day-visual {min-height:35rem;display:flex;flex-direction:column;justify-content:center;align-items:center;}
 .day-showcase .day-zoom {width:auto;max-width:100%;padding:3px;border-radius:22px;}
 .day-showcase .day-zoom picture {border-radius:19px;}
 .day-showcase .day-visual img {width:auto;max-width:100%;height:31rem;aspect-ratio:auto;}
 .day-showcase [data-scene="stunde"] .day-visual img {height:auto;width:100%;aspect-ratio:4/3;}
 .day-showcase [data-scene="stunde"] .day-zoom {border-radius:12px;}
 .day-showcase [data-scene="stunde"] .day-zoom picture {border-radius:9px;}
}
.day-showcase {padding-block:clamp(3rem,5vw,5rem);}
.day-showcase .day-heading {max-width:64rem;}
.day-showcase .day-heading h2 {font-family:var(--schrift-display);font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.14;letter-spacing:-.018em;}
.day-showcase .day-tabs button {min-height:3.4rem;align-content:center;}
@media(max-width:600px) {
 .day-showcase [data-scene="stunde"] .day-visual {min-height:0;}
}