/* Prionto – Zettel, Tesafilm und Pinnwände für die Startseite.
   Alle Farben kommen aus der Palette in stil.css. */

:root {
  /* Feine Papierfaser, wie bei den Zetteln in der App */
  --papier-rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .22 0 0 0 0 .26 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Bereiche, in denen echte App-Zettel stehen: Schrift und Maße wie in der App */
.app-stil {
  font-family: -apple-system, "SF Pro Text", system-ui, "Nunito", sans-serif;
  color: var(--titel); font-size: 15px; line-height: 1.3;
  -webkit-user-select: none; user-select: none;
}
.app-stil .ziel-karte, .app-stil .prio-karte { cursor: default; }
.app-stil .ziel-karte { animation: none; }
.app-stil .prio-reihe { animation: none; }
.app-stil .kreis { display: grid; }

/* ---------- Tesafilm und Zettel ---------- */
.tesa {
  position: absolute; top: -11px; left: 50%; width: 92px; height: 24px; margin-left: -46px; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  box-shadow: 0 1px 2px rgba(44,53,63,.08), inset 0 0 0 .5px rgba(255,255,255,.6);
  transform: rotate(-3deg);
  /* Gezackte Abrisskanten links und rechts */
  clip-path: polygon(0 6%, 4% 0, 96% 0, 100% 8%, 97% 22%, 100% 38%, 97% 52%, 100% 68%, 97% 82%, 100% 96%, 95% 100%, 5% 100%, 0 94%, 3% 80%, 0 64%, 3% 50%, 0 34%, 3% 20%);
  pointer-events: none;
}
.tesa.links { left: 14%; transform: rotate(-24deg); }
.tesa.rechts { left: auto; right: 4%; margin-left: 0; transform: rotate(22deg); }

.papier-zettel {
  position: relative; padding: 30px 24px 24px; border-radius: 2px;
  background-color: var(--sand); background-image: var(--papier-rauschen);
  box-shadow: 0 1px 1px rgba(44,53,63,.08), 3px 10px 22px rgba(44,53,63,.13);
}
.papier-zettel.mint { background-color: var(--mint); }
.papier-zettel.sand { background-color: var(--sand); }
.papier-zettel.flieder { background-color: var(--flieder); }
.papier-zettel.hellblau { background-color: var(--hellblau); }
.papier-zettel.prio-farbe { background-color: var(--prio); }
.papier-zettel h3 { margin: 0 0 8px; font-size: 22px; font-weight: 900; line-height: 1.2; }
.papier-zettel p { margin: 0; color: var(--text); font-size: 17px; }

/* Beschriftung auf einem Streifen Tesafilm, wie mit Filzstift */
.tesa-label {
  position: absolute; z-index: 3; top: -16px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  padding: 2px 18px 4px; font-family: var(--hand); font-size: 24px; font-weight: 700; color: var(--navy); white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.62));
  box-shadow: 0 1px 3px rgba(44,53,63,.12);
  clip-path: polygon(0 8%, 3% 0, 97% 0, 100% 10%, 98% 30%, 100% 50%, 98% 70%, 100% 92%, 96% 100%, 4% 100%, 0 90%, 2% 70%, 0 50%, 2% 30%);
}
.tesa-label.ocker { color: var(--ocker); }

.hand-notiz { font-family: var(--hand); font-size: 28px; font-weight: 700; color: var(--ocker); line-height: 1.1; }
.hand-notiz svg { fill: none; stroke: var(--ocker); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hand-notiz.mitte { text-align: center; margin: 40px 0 0; transform: rotate(-2deg); }

/* ---------- Start: Text und Collage ---------- */
.hero { padding: 56px 0 40px; }
.hero .innen.hero-raster { grid-template-columns: 1fr 1fr; gap: 40px; }
.wortmarke { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.wortmarke img { width: 34px; transform: rotate(-4deg); filter: drop-shadow(1px 2px 2px rgba(44,53,63,.25)); }
.wortmarke span { font-weight: 900; font-size: 26px; letter-spacing: -.01em; }
.wortmarke em { font-family: var(--hand); font-style: normal; font-size: 26px; color: var(--text); margin-left: 4px; }
.hero h1 { font-size: clamp(40px, 5.6vw, 66px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 20px; }
.hand-strich { position: relative; white-space: nowrap; color: var(--navy); }
.hand-strich::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .32em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16 C 70 6, 150 4, 296 10 M 30 20 C 110 13, 200 12, 280 16' fill='none' stroke='%23E69A32' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin: left; animation: strichZiehen .9s .5s cubic-bezier(.6,0,.3,1) backwards;
}
@keyframes strichZiehen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero p.text { max-width: 36ch; }
.hero .aktion { margin-bottom: 14px; }
.link-leise { font-weight: 800; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--spur-dunkel); padding-bottom: 2px; }
.link-leise:hover { border-color: var(--ocker); }

.buehnen-platz { position: relative; }
.collage { position: relative; width: 560px; height: 560px; transform-origin: top left; }
.collage-logo { position: absolute; left: 150px; top: 18px; width: 250px; transform: rotate(-4deg); filter: drop-shadow(6px 14px 18px rgba(44,53,63,.22)); }
.collage-logo img { width: 100%; }
.collage-logo .pin { position: absolute; left: 50%; top: 4%; width: 38px; height: 38px; }
.collage-ziel { position: absolute; left: 6px; top: 250px; width: 196px; }
.collage-ziel .ziel-karte { width: 100%; }
.collage-prio { position: absolute; left: 168px; top: 420px; width: 370px; }
.collage-spruch { position: absolute; right: 0; top: 196px; width: 178px; padding: 26px 18px 18px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--text); transform: rotate(4deg); }
.collage-notiz { position: absolute; left: 420px; top: 330px; transform: rotate(-8deg); }
.collage-notiz svg { position: absolute; left: -10px; top: 32px; width: 80px; height: 60px; }
/* Teile der Collage landen nacheinander */
.bewegt .collage > * { opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.3,1.35,.5,1); }
.bewegt .collage.sichtbar > * { opacity: 1; }
.bewegt .collage.sichtbar .collage-ziel { transition-delay: .35s; }
.bewegt .collage.sichtbar .collage-spruch { transition-delay: .55s; }
.bewegt .collage.sichtbar .collage-prio { transition-delay: .8s; }
.bewegt .collage.sichtbar .collage-notiz { transition-delay: 1.3s; }
.bewegt .collage:not(.sichtbar) .collage-ziel { transform: translateY(-40px) rotate(-10deg); }
.bewegt .collage:not(.sichtbar) .collage-spruch { transform: translateY(-40px) rotate(14deg); }
.bewegt .collage:not(.sichtbar) .collage-prio { transform: translateY(30px); }
@media (max-width: 860px) {
  .hero .innen.hero-raster { grid-template-columns: 1fr; }
  .hero-text { text-align: left; }
  .hero .aktion { justify-content: flex-start; }
  .buehnen-platz { order: 0; max-width: 560px; margin: 0 auto; width: 100%; }
}

/* ---------- Das Problem: Liste gegen Zettel ---------- */
.problem { padding-top: 40px; }
.vergleich { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; gap: 12px; max-width: 980px; margin: 0 auto; }
.vergleich figure { position: relative; margin: 0; }
.block {
  padding: 40px 30px 26px 56px; border-radius: 2px; transform: rotate(-2deg);
  background-color: var(--papier); background-image: var(--papier-rauschen),
    linear-gradient(90deg, transparent 40px, rgba(229,72,77,.28) 40px 41.5px, transparent 41.5px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(68,84,110,.16) 31px 32px);
  box-shadow: 0 1px 1px rgba(44,53,63,.08), 4px 14px 28px rgba(44,53,63,.14);
}
.kritzel-liste { margin: 0; padding: 0 0 0 18px; font-family: var(--hand); font-size: 25px; line-height: 32px; color: var(--navy); }
.kritzel-liste li:nth-child(odd) { transform: translateX(4px) rotate(-.6deg); }
.kritzel-liste li:nth-child(3n) { transform: translateX(-3px) rotate(.5deg); }
.kritzel-liste .durch { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--grau); }
.kritzel-liste .klein { font-size: 18px; color: var(--grau-hell); }
.vergleich figcaption { margin-top: 18px; font-size: 17px; color: var(--text); text-align: center; }
.block figcaption { font-family: var(--hand); font-size: 24px; color: var(--grau-dunkel); transform: rotate(-1deg); }
.pfeil-gross { width: 120px; height: 60px; fill: none; stroke: var(--ocker); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ein-zettel { padding: 30px 0 0; }
.ein-zettel .app-stil { max-width: 400px; margin: 0 auto; transform: scale(1.12); transform-origin: center top; }
.ein-zettel figcaption { margin-top: 40px; }
.ein-zettel figcaption b { color: var(--titel); }
@media (max-width: 860px) {
  .vergleich { grid-template-columns: 1fr; gap: 26px; }
  .pfeil-gross { transform: rotate(90deg); margin: 0 auto; }
  .ein-zettel .app-stil { transform: none; }
}

/* ---------- So geht's: drei Zettel ---------- */
.schritt-zettel { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; padding-top: 18px; }
.schritt-weg { position: absolute; left: 0; right: 0; top: -10px; width: 100%; height: 120px; fill: none; stroke: var(--grau-hell); stroke-width: 2.5; stroke-dasharray: 2 10; stroke-linecap: round; z-index: 0; }
.schritt-zettel .papier-zettel { z-index: 1; }
.schritt-zettel .papier-zettel:nth-of-type(1) { transform: rotate(-1.6deg); }
.schritt-zettel .papier-zettel:nth-of-type(2) { transform: rotate(1.2deg); margin-top: 26px; }
.schritt-zettel .papier-zettel:nth-of-type(3) { transform: rotate(-.8deg); }
.hand-zahl { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 12px; border-radius: 50%; border: 2px solid var(--navy); font-family: var(--hand); font-size: 32px; font-weight: 700; color: var(--navy); transform: rotate(-6deg); }
.papier-zettel.prio-farbe .hand-zahl { border-color: var(--ocker); color: var(--ocker); }
@media (max-width: 860px) {
  .schritt-zettel { grid-template-columns: 1fr; gap: 40px; }
  .schritt-zettel .papier-zettel:nth-of-type(2) { margin-top: 0; }
  .schritt-weg { display: none; }
}

/* ---------- Dein Leben auf einer Pinnwand ---------- */
.leben { padding-bottom: 40px; }
.lebens-wand {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 34px; max-width: 900px; margin: 0 auto;
  padding: 70px 42px 46px; border-radius: 6px;
  background-color: var(--papier-tief); background-image: var(--papier-rauschen);
  box-shadow: inset 0 0 0 1px var(--spur), inset 0 2px 14px rgba(44,53,63,.06);
}
.bereich { position: relative; }
.bereich .tesa-label { top: -50px; font-size: 22px; }
.bereich .ziel-karte { width: 100%; min-height: 182px; }
.bewegt .lebens-wand .bereich { opacity: 0; transform: translateY(-36px) rotate(-6deg); transition: opacity .5s ease var(--d), transform .8s cubic-bezier(.3,1.35,.5,1) var(--d); }
.bewegt .lebens-wand.sichtbar .bereich { opacity: 1; transform: none; }
@media (max-width: 860px) { .lebens-wand { grid-template-columns: 1fr 1fr; padding: 54px 18px 30px; gap: 54px 16px; } }
@media (max-width: 520px) { .lebens-wand { grid-template-columns: 1fr; max-width: 260px; } }

/* ---------- Design als Moodboard ---------- */
.moodboard { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px 30px; align-items: center; max-width: 1000px; margin: 0 auto; }
.moodboard figure { margin: 0; text-align: center; }
.moodboard figcaption { margin-top: 14px; font-family: var(--hand); font-size: 23px; line-height: 1.1; color: var(--text); }
.mb-papier { grid-column: span 2; }
.papier-probe { height: 190px; border-radius: 3px; background-color: var(--grund); background-image: var(--papier-rauschen); box-shadow: inset 0 0 0 1px var(--spur), 3px 10px 22px rgba(44,53,63,.12); transform: rotate(-1.5deg); }
.mb-farben { grid-column: span 4; }
.farb-zettel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.farb-zettel .papier-zettel { padding: 64px 10px 14px; font-family: var(--hand); font-size: 24px; font-weight: 700; color: var(--navy); }
.farb-zettel .papier-zettel:nth-child(odd) { transform: rotate(-2deg); }
.farb-zettel .papier-zettel:nth-child(even) { transform: rotate(1.6deg) translateY(8px); }
.mb-messing, .mb-tesa, .mb-symbole { grid-column: span 2; }
.messing-gross {
  display: block; width: 96px; height: 96px; margin: 20px auto 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(74,52,18,.3) 100%), var(--messing);
  box-shadow: inset 0 0 0 3px rgba(122,90,38,.45), 8px 12px 12px rgba(42,30,12,.3);
}
.tesa-probe { display: flex; align-items: center; gap: 12px; padding: 30px 18px 22px; text-align: left; font-family: -apple-system, system-ui, sans-serif; font-size: 16px; font-weight: 600; transform: rotate(-1deg); }
.kreis-probe { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--grau); }
.symbol-reihe { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.symbol-reihe .praege { width: 52px; height: 52px; }
.mb-zitat { grid-column: 1 / -1; margin-top: 10px; }
.mb-zitat blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3.4vw, 38px); color: var(--titel); }
@media (max-width: 860px) {
  .moodboard { grid-template-columns: 1fr 1fr; }
  .mb-papier, .mb-farben, .mb-zitat { grid-column: 1 / -1; }
  .mb-messing, .mb-tesa, .mb-symbole { grid-column: span 1; }
  .mb-symbole { grid-column: 1 / -1; }
  .farb-zettel { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Fragen als Zettel ---------- */
.fragen-wand { display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px 34px; max-width: 900px; margin: 0 auto; }
.fragen-wand .papier-zettel:nth-child(1) { transform: rotate(-1.4deg); }
.fragen-wand .papier-zettel:nth-child(2) { transform: rotate(1.1deg); }
.fragen-wand .papier-zettel:nth-child(3) { transform: rotate(.8deg); }
.fragen-wand .papier-zettel:nth-child(4) { transform: rotate(-1deg); }
@media (max-width: 760px) { .fragen-wand { grid-template-columns: 1fr; } }

/* ---------- Abschluss als großer Zettel ---------- */
.schluss-zettel { max-width: 640px; margin: 0 auto; padding: 54px 34px 44px; text-align: center; background-color: var(--prio); transform: rotate(-.8deg); }
.schluss-zettel img { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 20px; box-shadow: var(--schatten); }
.schluss-zettel h2 { font-size: clamp(30px, 4.2vw, 44px); margin: 0 0 10px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.schluss-zettel p { color: var(--text); margin: 0 0 26px; }

@media (prefers-reduced-motion: reduce) {
  .hand-strich::after { animation: none; }
}

/* Zettel-Gruppen erscheinen nacheinander und behalten dabei ihre Drehung */
.bewegt .schritt-zettel > .papier-zettel, .bewegt .fragen-wand > .papier-zettel,
.bewegt [data-gruppe] > * { opacity: 0; translate: 0 -30px; transition: opacity .6s ease, translate .8s cubic-bezier(.3,1.35,.5,1); }
.bewegt .schritt-zettel.sichtbar > .papier-zettel, .bewegt .fragen-wand.sichtbar > .papier-zettel,
.bewegt [data-gruppe].sichtbar > * { opacity: 1; translate: 0 0; }
.bewegt .sichtbar > :nth-child(2) { transition-delay: .15s; }
.bewegt .sichtbar > :nth-child(3) { transition-delay: .3s; }
.bewegt .sichtbar > :nth-child(4) { transition-delay: .45s; }
.bewegt .sichtbar > :nth-child(5) { transition-delay: .6s; }
.papier-probe { display: flex; flex-direction: column; justify-content: center; padding: 22px 26px; text-align: left; }
.papier-probe .seiten-titel { display: block; margin: 0 0 6px; }
.papier-probe .seiten-spruch { display: block; margin: 0; color: var(--titel); }

/* Die Collage hat feste Maße und wird nur verkleinert angezeigt: sie darf die Spalte nicht verbreitern */
.hero-raster > * { min-width: 0; }
.buehnen-platz { overflow: hidden; padding-top: 4px; }
@media (max-width: 860px) {
  .hero p.text { margin-left: 0; }
  .wortmarke em { flex-basis: 100%; margin: -6px 0 0 46px; font-size: 22px; }
}