.pap-oeffentlich,
.pap-oeffentlich *,
.pap-oeffentlich *::before,
.pap-oeffentlich *::after{
  box-sizing:border-box;
}

.pap-oeffentlich *{
  margin:0;
  padding:0;
}

.pap-oeffentlich{
  --font-system:inherit;
  --font-display:"Oswald", sans-serif;
  --font-mono:"Roboto Mono", monospace;

  --bg:var(--pap-dunkel-hintergrund);
  --bg-card:var(--pap-dunkel-flaeche);
  --bg-raised:var(--pap-dunkel-flaeche-betont);
  --bg-sub:var(--pap-dunkel-eingabe);

  --text:var(--pap-dunkel-text);
  --text-muted:var(--pap-dunkel-text-zart);
  --text-faint:color-mix(
    in srgb,
    var(--pap-dunkel-text-zart) 72%,
    transparent
  );

  --line:var(--pap-dunkel-border);
  --petrol:var(--pap-petrol);
  --petrol-bright:color-mix(
    in srgb,
    var(--pap-petrol) 72%,
    var(--pap-dunkel-text)
  );

  --action:var(--pap-akzent-petrol);
  --action-bright:var(--pap-akzent-petrol-hover);
  --orange:var(--pap-akzent);
  --orange-bright:var(--pap-akzent-hover);

  overflow:hidden;
  border:1px solid color-mix(
    in srgb,
    var(--pap-border) 50%,
    transparent
  );
  border-radius:var(--pap-radius-16);

  background:var(--bg);
  color:var(--text);
  font-family:var(--font-system);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.pap-oeffentlich ::selection{background:var(--action);color:#0b1218;}

.pap-oeffentlich a{color:inherit;text-decoration:none;}

.pap-oeffentlich .mono{font-family:var(--font-mono);}

.pap-oeffentlich .eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--petrol-bright);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  margin-bottom:1.4rem;
}
.pap-oeffentlich .eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--petrol-bright);
  display:inline-block;
}

.pap-oeffentlich :focus-visible{
  outline:2px solid var(--action-bright);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- BUTTONS ---------- */
.pap-oeffentlich .btn{
  font-family:var(--font-system);
  font-weight:600;
  font-size:0.9rem;
  padding:0.7rem 1.4rem;
  border-radius:5px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-block;
  transition:transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.pap-oeffentlich .btn-action{
  background:var(--action);
  color:#f6f4ef;
}
.pap-oeffentlich .btn-action:hover{background:var(--action-bright);transform:translateY(-1px);}
.pap-oeffentlich .btn-orange{
  background:var(--orange);
  color:#171008;
}
.pap-oeffentlich .btn-orange:hover{background:var(--orange-bright);transform:translateY(-1px);}
.pap-oeffentlich .btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--line);
}
.pap-oeffentlich .btn-ghost:hover{border-color:var(--petrol-bright);color:var(--petrol-bright);}

/* ---------- HERO ---------- */
.pap-oeffentlich .hero{
  position:relative;
  padding:clamp(3.5rem,10vw,7rem) clamp(1.25rem,5vw,4rem) clamp(4rem,8vw,6rem);
  overflow:hidden;
}
.pap-oeffentlich .fret-bg{
  position:absolute;inset:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0, transparent 38px,
    var(--line) 38px, var(--line) 39px
  );
  mask-image: linear-gradient(to bottom, black, transparent 75%);
  opacity:0.45;
}
.pap-oeffentlich .hero-inner{
  position:relative;
  max-width:900px;
}
.pap-oeffentlich .hero h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.3rem,6.2vw,4.1rem);
  line-height:1.1;
  letter-spacing:-0.01em;
  max-width:15ch;
  color: var(--pap-dunkel-text);
}
.pap-oeffentlich .hero h1 em{
  font-style:normal;
  font-weight:700;
  color:var(--action-bright);
}
.pap-oeffentlich .hero p.sub{
  margin-top:1.6rem;
  font-size:clamp(1.02rem,2vw,1.2rem);
  color:var(--text-muted);
  max-width:50ch;
}
.pap-oeffentlich .hero-form{
  margin-top:2.4rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
}
.pap-oeffentlich .hero-form input{
  font-family:var(--font-system);
  font-size:1rem;
  color:var(--text);
  background:var(--bg-sub);
  border:1px solid var(--line);
  border-radius:5px;
  padding:0.85rem 1.1rem;
  min-width:260px;
  flex:1;
}
.pap-oeffentlich .hero-form input::placeholder{color:var(--text-faint);}
.pap-oeffentlich .hero-form input:focus{outline:none;border-color:var(--action-bright);}
.pap-oeffentlich .hero-form .pap-oeffentlich .btn{font-size:1rem;padding:0.85rem 1.7rem;flex-shrink:0;}
.pap-oeffentlich .hero-login-hint{
  margin-top:1rem;
  font-size:0.85rem;
  color:var(--text-faint);
}
.pap-oeffentlich .hero-login-hint a{color:var(--text-muted);border-bottom:1px solid var(--line);}
.pap-oeffentlich .hero-login-hint a:hover{color:var(--text);border-bottom-color:var(--petrol-bright);}
.pap-oeffentlich .form-success{
  margin-top:2.4rem;
  font-size:0.98rem;
  color:var(--action-bright);
  display:none;
}
.pap-oeffentlich .form-success.is-visible{display:block;}

/* strings visual */
.pap-oeffentlich .strings{
  position:relative;
  margin-top:clamp(3rem,7vw,4.5rem);
  width:100%;
  max-width:760px;
}
.pap-oeffentlich .strings svg{width:100%;height:auto;display:block;}
.pap-oeffentlich .strings line{
  stroke:var(--text-faint);
  stroke-linecap:round;
  transform-box:fill-box;
  transform-origin:center;
}
.pap-oeffentlich .strings line.s1{stroke-width:3.4;stroke:var(--petrol-bright);}
.pap-oeffentlich .strings line.s2{stroke-width:2.8;stroke:var(--petrol-bright);}
.pap-oeffentlich .strings line.s3{stroke-width:2.3;}
.pap-oeffentlich .strings line.s4{stroke-width:1.9;}
.pap-oeffentlich .strings line.s5{stroke-width:1.5;}
.pap-oeffentlich .strings line.s6{stroke-width:1.1;}

@media (prefers-reduced-motion:no-preference){
  .pap-oeffentlich .strings line.s1{animation:settleBig 2.3s cubic-bezier(.2,.7,.2,1) 1;}
  .pap-oeffentlich .strings line.s2{animation:settleBig 2.0s cubic-bezier(.2,.7,.2,1) 1;}
  .pap-oeffentlich .strings line.s3{animation:settleMid 1.7s cubic-bezier(.2,.7,.2,1) 1;}
  .pap-oeffentlich .strings line.s4{animation:settleMid 1.5s cubic-bezier(.2,.7,.2,1) 1;}
  .pap-oeffentlich .strings line.s5{animation:settleSmall 1.3s cubic-bezier(.2,.7,.2,1) 1;}
  .pap-oeffentlich .strings line.s6{animation:settleSmall 1.05s cubic-bezier(.2,.7,.2,1) 1;}
}
@keyframes settleBig{
  0%{transform:translateY(0);}
  8%{transform:translateY(-16px);}
  20%{transform:translateY(11px);}
  32%{transform:translateY(-7px);}
  46%{transform:translateY(4px);}
  62%{transform:translateY(-2px);}
  100%{transform:translateY(0);}
}
@keyframes settleMid{
  0%{transform:translateY(0);}
  8%{transform:translateY(-10px);}
  22%{transform:translateY(7px);}
  38%{transform:translateY(-4px);}
  56%{transform:translateY(2px);}
  100%{transform:translateY(0);}
}
@keyframes settleSmall{
  0%{transform:translateY(0);}
  9%{transform:translateY(-5px);}
  26%{transform:translateY(3px);}
  50%{transform:translateY(-1px);}
  100%{transform:translateY(0);}
}

/* ---------- shared section rhythm ---------- */
.pap-oeffentlich section.block{
  padding:clamp(4rem,9vw,6.5rem) clamp(1.25rem,5vw,4rem);
  border-top:1px solid var(--line);
}
.pap-oeffentlich .block-head{max-width:640px;}
.pap-oeffentlich .block-head h2{
  font-family:var(--font-system);
  font-weight:700;
  font-size:clamp(1.7rem,4vw,2.5rem);
  letter-spacing:-0.01em;
  color: var(--pap-dunkel-text);
}

.pap-oeffentlich .reveal{opacity:0;transform:translateY(18px);transition:opacity 0.7s ease, transform 0.7s ease;}
.pap-oeffentlich .reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .pap-oeffentlich .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- STROPHE I ---------- */
.pap-oeffentlich .notes-grid{
  margin-top:2.8rem;
  display:grid;
  gap:1.6rem;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:860px){.pap-oeffentlich .notes-grid{grid-template-columns:1fr;}}
.pap-oeffentlich .note{
  background:var(--bg-card);
  border:1px dashed var(--line);
  border-radius:2px;
  padding:1.6rem 1.5rem;
  font-size:0.98rem;
  color:var(--text-muted);
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.pap-oeffentlich .note:hover{border-color:var(--petrol-bright);transform:translateY(-2px);}
.pap-oeffentlich .note:nth-child(1){transform:rotate(-1.4deg);}
.pap-oeffentlich .note:nth-child(2){transform:rotate(0.9deg);}
.pap-oeffentlich .note:nth-child(3){transform:rotate(-0.6deg);}
.pap-oeffentlich .note:hover:nth-child(1){transform:rotate(-1.4deg) translateY(-2px);}
.pap-oeffentlich .note:hover:nth-child(2){transform:rotate(0.9deg) translateY(-2px);}
.pap-oeffentlich .note:hover:nth-child(3){transform:rotate(-0.6deg) translateY(-2px);}
.pap-oeffentlich .strophe-close{
  margin-top:3.4rem;
  text-align:center;
  font-family:var(--font-system);
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.2rem,3vw,1.7rem);
  color:var(--text);
}

/* ---------- REFRAIN ---------- */
.pap-oeffentlich .feature-grid{
  margin-top:2.8rem;
  display:grid;
  gap:1.4rem;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:940px){.pap-oeffentlich .feature-grid{grid-template-columns:1fr;}}
.pap-oeffentlich .feature{
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2rem 1.7rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.pap-oeffentlich .feature:hover{border-color:var(--petrol-bright);transform:translateY(-3px);}
.pap-oeffentlich .feature-top{display:flex;align-items:flex-start;justify-content:space-between;}
.pap-oeffentlich .feature-icon{
  width:34px;height:34px;
  color:var(--petrol-bright);
}
.pap-oeffentlich .preview-badge{
  font-size:0.62rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-faint);
  border:1px dashed var(--line);
  border-radius:14px;
  padding:0.2rem 0.55rem;
}
.pap-oeffentlich .feature-label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.14em;
  color:var(--text-faint);
}
.pap-oeffentlich .feature h3{
  font-family:var(--font-system);
  font-weight:600;
  font-size:1.28rem;
}
.pap-oeffentlich .feature p{color:var(--text-muted);font-size:0.95rem;}

/* mini mockups inside feature cards */
.pap-oeffentlich .mini-plan{
  background:var(--bg-sub);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0.7rem 0.85rem;
  display:flex;flex-direction:column;gap:0.45rem;
}
.pap-oeffentlich .mini-plan-row{
  display:flex;align-items:center;gap:0.55rem;
  font-family:var(--font-mono);
  font-size:0.74rem;color:var(--text-muted);
}
.pap-oeffentlich .mini-plan-row .grip{color:var(--text-faint);}
.pap-oeffentlich .mini-plan-row .dur{margin-left:auto;color:var(--text-faint);}
.pap-oeffentlich .mini-plan-row.add{color:var(--orange-bright);}

.pap-oeffentlich .mini-filter{
  background:var(--bg-sub);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0.7rem 0.85rem;
  display:flex;flex-direction:column;gap:0.6rem;
}
.pap-oeffentlich .mini-search{
  font-family:var(--font-mono);
  font-size:0.74rem;color:var(--text-faint);
  border:1px solid var(--line);border-radius:4px;
  padding:0.35rem 0.6rem;
}
.pap-oeffentlich .chip-row{display:flex;gap:0.4rem;flex-wrap:wrap;}
.pap-oeffentlich .chip{
  font-family:var(--font-mono);
  font-size:0.68rem;color:var(--text-muted);
  border:1px solid var(--line);
  border-radius:14px;padding:0.25rem 0.65rem;
}
.pap-oeffentlich .chip.active{background:var(--petrol);color:var(--text);border-color:var(--petrol);}

.pap-oeffentlich .mini-session{
  background:var(--bg-sub);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0.7rem 0.85rem;
  display:flex;flex-direction:column;gap:0.55rem;
}
.pap-oeffentlich .mini-session-top{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);
  font-size:0.9rem;color:var(--action-bright);
}
.pap-oeffentlich .mini-bpm{
  font-size:0.68rem;color:var(--text-faint);
  border:1px solid var(--line);border-radius:14px;
  padding:0.18rem 0.55rem;
}
.pap-oeffentlich .mini-rating{font-size:0.85rem;letter-spacing:0.1em;color:var(--orange-bright);}

/* ---------- BRIDGE / VERLAUF ---------- */
.pap-oeffentlich .bridge-grid{
  margin-top:2.6rem;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3rem;
  align-items:center;
}

.bridge-text.reveal.is-visible h2 {
    color: var(--pap-dunkel-text);
}

@media(max-width:860px){.pap-oeffentlich .bridge-grid{grid-template-columns:1fr;}}
.pap-oeffentlich .bridge-text p{color:var(--text-muted);font-size:1.02rem;margin-top:1rem;max-width:46ch;}
.pap-oeffentlich .streak{
  margin-top:1.6rem;
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--action-bright);
}

.pap-oeffentlich .chart-card{
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.8rem 1.6rem 1.3rem;
}
.pap-oeffentlich .chart-bars{
  display:flex;
  align-items:flex-end;
  gap:0.7rem;
  height:140px;
}
.pap-oeffentlich .chart-bar{
  flex:1;
  background:linear-gradient(to top, var(--petrol), var(--petrol-bright));
  border-radius:3px 3px 0 0;
  position:relative;
}
.pap-oeffentlich .chart-bar.low{background:linear-gradient(to top,#1c2a33,#2a3c47);}
.pap-oeffentlich .chart-labels{
  display:flex;gap:0.7rem;margin-top:0.7rem;
}
.pap-oeffentlich .chart-labels span{
  flex:1;text-align:center;
  font-family:var(--font-mono);
  font-size:0.68rem;color:var(--text-faint);
}

.pap-oeffentlich .recent-list{
  margin-top:2.4rem;
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}
.pap-oeffentlich .recent-row{
  display:grid;
  grid-template-columns:5.5rem 1fr auto auto;
  align-items:center;
  gap:1rem;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0.9rem 1.1rem;
  transition:border-color 0.2s ease;
}
.pap-oeffentlich .recent-row:hover{border-color:var(--petrol-bright);}
@media(max-width:640px){
  .pap-oeffentlich .recent-row{grid-template-columns:1fr;gap:0.35rem;}
}
.pap-oeffentlich .recent-date{font-family:var(--font-mono);font-size:0.76rem;color:var(--text-faint);}
.pap-oeffentlich .recent-title{font-size:0.95rem;color:var(--text);}
.pap-oeffentlich .recent-next{font-size:0.82rem;color:var(--text-muted);}
.pap-oeffentlich .recent-rating{font-size:0.82rem;color:var(--orange-bright);white-space:nowrap;}
.pap-oeffentlich .example-tag{
  margin-top:2.4rem;
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:var(--text-faint);
}

/* ---------- OUTRO ---------- */
.pap-oeffentlich .outro{
  text-align:center;
  padding-bottom:clamp(4.5rem,9vw,6.5rem);
}
.pap-oeffentlich .outro h2{
  font-family:var(--font-system);
  font-weight:700;
  font-size:clamp(1.8rem,5vw,2.7rem);
  max-width:18ch;
  margin:0 auto;
  color: var(--pap-dunkel-text);
}
.pap-oeffentlich .outro-sub{
  margin:1.1rem auto 0;
  max-width:46ch;
  color:var(--text-muted);
  font-size:1.02rem;
}
.pap-oeffentlich .outro-form{
  justify-content:center;
  max-width:480px;
  margin:2rem auto 0;
}
.pap-oeffentlich .outro .pap-oeffentlich .form-success{text-align:center;}
.pap-oeffentlich .outro .pap-oeffentlich .hero-login-hint{text-align:center;margin-top:1.2rem;}
.pap-oeffentlich .tuning{
  margin-top:2.8rem;
  color:var(--text-faint);
  font-size:0.78rem;
  letter-spacing:0.25em;
}


/* ---------- MAILPOET ---------- */
.pap-oeffentlich .pap-mailpoet-form{
  width:100%;
}

.pap-oeffentlich .pap-mailpoet-form .mailpoet_form{
  width:100%;
}

.pap-oeffentlich .pap-mailpoet-form .mailpoet_paragraph{
  margin:0;
}

.pap-oeffentlich .pap-mailpoet-form input[type="email"]{
  width:100%;
  min-width:260px;
  padding:0.85rem 1.1rem;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--bg-sub);
  color:var(--text);
  font:inherit;
}

.pap-oeffentlich .pap-mailpoet-form input[type="email"]::placeholder{
  color:var(--text-faint);
}

.pap-oeffentlich .pap-mailpoet-form input[type="email"]:focus{
  border-color:var(--action-bright);
  outline:none;
}

.pap-oeffentlich .pap-mailpoet-form input[type="submit"],
.pap-oeffentlich .pap-mailpoet-form button[type="submit"]{
  padding:0.85rem 1.7rem;
  border:1px solid transparent;
  border-radius:5px;
  background:var(--action);
  color:var(--text);
  font:inherit;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.pap-oeffentlich .pap-mailpoet-form input[type="submit"]:hover,
.pap-oeffentlich .pap-mailpoet-form button[type="submit"]:hover{
  background:var(--action-bright);
  transform:translateY(-1px);
}

@media (max-width:600px){
  .pap-oeffentlich{
    border:0;
    border-radius:0;
  }
}