@font-face {
    font-family: "Geist";
    src: url("../assets/fonts/geist-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader";
    src: url("../assets/fonts/newsreader-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --cream: #f3ead9;
    --cream-soft: #faf6ee;
    --cream-deep: #e8dbc4;
    --paper: #fffdf8;
    --paper-warm: #f8f0e1;
    --ink: #211a14;
    --ink-soft: #4c4036;
    --ink-muted: #62564a;
    --ink-faint: #6c6054;
    --terra: #be4f2d;
    --terra-deep: #913719;
    --terra-soft: #e7b8a6;
    --terra-wash: #f1d8cd;
    --sage: #cdd6bc;
    --rose: #e8c6bc;
    --serif: "Newsreader", Georgia, serif;
    --sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --page-width: 1180px;
    --shadow-sm: 0 8px 30px rgba(52, 37, 24, 0.08);
    --shadow-md: 0 24px 70px rgba(52, 37, 24, 0.14);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 112px;
}

body {
    margin: 0;
    background: var(--cream-soft);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 999;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--terra);
    outline-offset: 4px;
}

.paperhold-page {
    min-width: 0;
    overflow: clip;
    background: var(--cream-soft);
}

.paperhold-nav {
    position: sticky;
    top: 14px;
    z-index: 50;
    width: min(calc(100% - 32px), var(--page-width));
    margin: 14px auto 0;
    padding: 11px 12px 11px 18px;
    border: 1px solid rgba(33, 26, 20, 0.09);
    border-radius: 20px;
    background: rgba(255, 253, 248, 0.88);
    box-shadow: 0 10px 35px rgba(52, 37, 24, 0.08);
    backdrop-filter: blur(18px);
}

.paperhold-logo {
    gap: 11px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.paperhold-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--terra);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.paperhold-mark::before,
.paperhold-mark::after,
.paperhold-mark span {
    background: var(--paper);
}

.paperhold-mark::before {
    top: 30.5%;
    left: 50%;
    width: 66.67%;
    height: 13.89%;
    transform: translateX(-50%);
}

.paperhold-mark::after {
    top: 47.22%;
    left: 50%;
    width: 55.56%;
    height: 33.33%;
    transform: translateX(-50%);
}

.paperhold-mark span {
    top: 58.33%;
    left: 50%;
    width: 22.22%;
    height: 8.33%;
    transform: translateX(-50%);
}

.paperhold-nav-links {
    gap: 28px;
}

.paperhold-nav-links a {
    position: relative;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 500;
}

.paperhold-nav-links a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 1px;
    background: var(--terra);
    transform: scaleX(0);
    transition: transform 160ms ease;
}

.paperhold-nav-links a:hover::after {
    transform: scaleX(1);
}

.paperhold-nav-button {
    padding: 10px 17px;
    border-radius: 13px;
    background: var(--ink);
    color: var(--paper);
    box-shadow: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.paperhold-nav .paperhold-nav-button,
.paperhold-nav .paperhold-nav-button:visited {
    color: var(--paper);
}

.paperhold-nav-button:hover {
    background: var(--terra-deep);
    color: white;
    transform: translateY(-1px);
}

.paperhold-hero {
    position: relative;
    padding: clamp(82px, 10vw, 136px) 24px 88px;
    background:
        radial-gradient(circle at 50% 8%, rgba(231, 184, 166, 0.38), transparent 30%),
        linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%);
}

.paperhold-hero::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 50%;
    width: min(820px, 84vw);
    height: 430px;
    border: 1px solid rgba(190, 79, 45, 0.09);
    border-radius: 50%;
    transform: translateX(-50%) rotate(-4deg);
    pointer-events: none;
}

.paperhold-beta {
    position: relative;
    display: inline-flex;
    gap: 9px;
    padding: 7px 12px 7px 8px;
    border: 1px solid rgba(190, 79, 45, 0.15);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.7);
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.paperhold-beta span {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--terra);
    color: white;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.paperhold-hero h1 {
    position: relative;
    max-width: 980px;
    margin: 30px auto 22px;
    font-size: clamp(62px, 10vw, 122px);
    line-height: 0.86;
    letter-spacing: -0.065em;
}

.paperhold-hero h1 em {
    color: var(--terra);
    font-weight: 400;
}

.paperhold-hero-text {
    position: relative;
    max-width: 650px;
    margin: 0 auto 24px;
    color: var(--ink-soft);
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.55;
}

.paperhold-hero > a[href*="apps.apple.com"] {
    position: relative;
    display: inline-flex !important;
    margin-top: 8px;
    border-radius: 12px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.paperhold-hero > a[href*="apps.apple.com"]:hover {
    box-shadow: 0 12px 28px rgba(33, 26, 20, 0.16);
    transform: translateY(-2px);
}

.paperhold-hero > a[href*="apps.apple.com"] img {
    width: 170px !important;
    height: auto !important;
}

.paperhold-hero-demo {
    position: relative;
    grid-template-columns: minmax(0, 0.9fr) 100px minmax(0, 1.1fr);
    gap: 32px;
    max-width: var(--page-width);
    margin-top: 82px;
    padding: clamp(28px, 5vw, 58px);
    border: 1px solid rgba(33, 26, 20, 0.08);
    border-radius: 36px;
    background: rgba(255, 253, 248, 0.62);
    box-shadow: var(--shadow-sm);
}

.paperhold-paper {
    width: min(100%, 430px);
    justify-self: end;
    padding: 38px 34px;
    border: 1px solid rgba(33, 26, 20, 0.08);
    border-radius: 7px 7px 18px 7px;
    background: var(--paper);
    box-shadow: 0 20px 55px rgba(52, 37, 24, 0.12);
    transform: rotate(-1.5deg);
}

.paperhold-paper h3 {
    margin: 32px 0 3px;
    font-size: 22px;
}

.paperhold-paper-company {
    color: var(--ink);
    font-size: 15px;
}

.paperhold-paper-line {
    background: #e7dfd2;
}

.paperhold-arrow {
    gap: 12px;
    color: var(--terra-deep);
}

.paperhold-arrow span {
    max-width: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-transform: uppercase;
}

.paperhold-arrow div {
    width: 68px;
    height: 1px;
    background: var(--terra);
}

.paperhold-arrow div::after {
    border-left-color: var(--terra);
}

.paperhold-result-card {
    width: min(100%, 480px);
    justify-self: start;
    padding: 32px;
    border: 1px solid rgba(190, 79, 45, 0.12);
    border-radius: 26px;
    background: var(--paper);
    box-shadow: 0 26px 75px rgba(52, 37, 24, 0.16);
    transform: rotate(1deg);
}

.paperhold-result-icon {
    background: var(--terra-wash);
    color: var(--terra-deep);
}

.paperhold-status {
    border-radius: 999px;
    background: #f7e6df;
    color: var(--terra-deep);
}

.paperhold-result-grid {
    gap: 12px;
}

.paperhold-result-grid > div {
    padding: 15px;
    border-radius: 14px;
    background: var(--cream-soft);
}

.paperhold-reminder {
    border-radius: 14px;
    background: var(--ink);
    color: var(--paper);
}

.paperhold-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    max-width: 850px;
    margin: 34px auto 0;
    padding: 0;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 500;
    list-style: none;
}

.paperhold-trust-strip li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.paperhold-trust-strip li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--terra);
    box-shadow: 0 0 0 4px var(--terra-wash);
}

.paperhold-quote {
    margin-top: 28px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 20px;
    font-style: italic;
}

.paperhold-section,
.paperhold-app-section,
.paperhold-waitlist {
    padding: clamp(82px, 10vw, 132px) 24px;
}

.paperhold-section > *,
.paperhold-app-section > * {
    max-width: var(--page-width);
    margin-right: auto;
    margin-left: auto;
}

#funktion {
    background: var(--paper);
}

.paperhold-section-head {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 90px;
    align-items: end;
}

.paperhold-eyebrow {
    color: var(--terra-deep);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.paperhold-section-head h2,
.paperhold-features-section > h2,
.paperhold-app-head h2,
.paperhold-faq-head h2,
.paperhold-waitlist h2 {
    margin-top: 15px;
    font-size: clamp(46px, 6.5vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.paperhold-section-head > p {
    max-width: 460px;
    margin-bottom: 8px;
    color: var(--ink-soft);
    font-size: 18px;
}

.paperhold-steps {
    gap: 18px;
    margin-top: 58px;
}

.paperhold-steps article {
    min-height: 270px;
    padding: 30px;
    border: 1px solid rgba(33, 26, 20, 0.08);
    border-radius: 24px;
    background: var(--cream-soft);
    box-shadow: none;
    transition: border-color 180ms ease, transform 180ms ease;
}

.paperhold-steps article:hover {
    border-color: rgba(190, 79, 45, 0.28);
    transform: translateY(-4px);
}

.paperhold-steps article > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: var(--ink);
    color: var(--paper);
    font-size: 12px;
}

.paperhold-steps h3 {
    margin-top: 42px;
    font-size: 27px;
}

.paperhold-steps p {
    color: var(--ink-soft);
}

.paperhold-features-section {
    background: var(--cream-soft);
}

.paperhold-features {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    margin-top: 58px;
}

.paperhold-features article {
    min-height: 250px;
    padding: 34px;
    border: 1px solid rgba(33, 26, 20, 0.07);
    border-radius: 28px;
    background: var(--paper);
    box-shadow: none;
}

.paperhold-features article:nth-child(1) {
    grid-column: 1 / 8 !important;
    grid-row: 1 / 3;
    min-height: 520px;
    background: var(--ink);
    color: var(--paper);
}

.paperhold-features article:nth-child(2) {
    grid-column: 8 / 13 !important;
    grid-row: 1;
    background: var(--sage);
}

.paperhold-features article:nth-child(3) {
    grid-column: 8 / 13;
    grid-row: 2;
}

.paperhold-features article:nth-child(4) {
    grid-column: 1 / 5;
    grid-row: 3;
}

.paperhold-features article:nth-child(5) {
    grid-column: 5 / 9;
    grid-row: 3;
    background: var(--rose);
}

.paperhold-features article:nth-child(6) {
    grid-column: 9 / 13;
    grid-row: 3;
}

.paperhold-features article:nth-child(1) h3,
.paperhold-features article:nth-child(1) p {
    color: var(--paper);
}

.paperhold-features article:nth-child(1) h3 {
    max-width: 560px;
    margin-top: 70px;
    font-size: clamp(42px, 5vw, 64px);
}

.paperhold-features article > span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.paperhold-features h3 {
    font-size: 29px;
}

.paperhold-overdue {
    display: inline-flex;
    margin-top: 28px;
    border: 1px solid rgba(255, 253, 248, 0.18);
    background: rgba(255, 253, 248, 0.08);
    color: var(--paper);
}

.paperhold-app-section {
    background: var(--ink);
    color: var(--paper);
}

.paperhold-app-head {
    max-width: 760px;
    text-align: center;
}

.paperhold-app-head .paperhold-eyebrow {
    color: var(--terra-soft);
}

.paperhold-app-head h2,
.paperhold-app-head p {
    color: var(--paper);
}

.paperhold-app-head p {
    max-width: 560px;
    margin: 18px auto 0;
    color: rgba(255, 253, 248, 0.68);
    font-size: 18px;
    text-align: center;
}

.paperhold-phones {
    gap: 28px;
    margin-top: 70px;
}

.paperhold-phone-wrap {
    color: rgba(255, 253, 248, 0.72);
}

.paperhold-phone-wrap.left,
.paperhold-phone-wrap.right {
    transform: translateY(28px) scale(0.92);
}

.paperhold-phone-wrap.center {
    z-index: 2;
}

.paperhold-phone {
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 42px;
    background: #090806;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

.paperhold-phone img {
    border-radius: 33px;
}

.paperhold-phone-wrap > p {
    margin-top: 22px;
    color: #f0e6d9;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.paperhold-swipe-hint {
    display: none;
}

.paperhold-faq {
    background: var(--paper);
}

.paperhold-faq-head {
    margin-bottom: 48px;
    text-align: center;
}

.paperhold-faq details {
    max-width: 880px;
    margin: 12px auto;
    padding: 0 24px;
    border: 1px solid rgba(33, 26, 20, 0.1);
    border-radius: 18px;
    background: var(--cream-soft);
    transition: border-color 160ms ease, background 160ms ease;
}

.paperhold-faq details[open] {
    border-color: rgba(190, 79, 45, 0.22);
    background: var(--paper);
}

.paperhold-faq summary {
    position: relative;
    padding: 21px 42px 21px 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.paperhold-faq summary::-webkit-details-marker {
    display: none;
}

.paperhold-faq summary::after {
    content: "+";
    position: absolute;
    top: 15px;
    right: 0;
    color: var(--terra);
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 400;
}

.paperhold-faq details[open] summary::after {
    content: "−";
}

.paperhold-faq details > p {
    max-width: 760px;
    margin: -2px 0 22px;
    color: var(--ink-soft);
}

.paperhold-waitlist {
    position: relative;
    overflow: hidden;
    background: var(--terra-deep);
    color: white;
    text-align: center;
}

.paperhold-waitlist::before,
.paperhold-waitlist::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.paperhold-waitlist::before {
    top: -210px;
    left: -130px;
}

.paperhold-waitlist::after {
    right: -140px;
    bottom: -260px;
}

.paperhold-waitlist > * {
    position: relative;
    z-index: 1;
}

.paperhold-waitlist .paperhold-eyebrow {
    color: var(--terra-soft);
}

.paperhold-waitlist h2 {
    max-width: 780px;
    margin-right: auto;
    margin-left: auto;
    color: white;
}

.paperhold-waitlist > p {
    max-width: 620px;
    margin: 20px auto 38px;
    color: #fff7ef;
    font-size: 18px;
}

.paperhold-waitlist > p a {
    display: inline;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: white;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.paperhold-waitlist iframe {
    display: block;
    width: min(100%, 600px);
    margin-right: auto;
    margin-left: auto;
    border: 0;
    border-radius: 24px;
    background: white;
    box-shadow: 0 30px 80px rgba(46, 16, 7, 0.28);
}

.paperhold-footer {
    max-width: none;
    padding: 62px max(24px, calc((100vw - var(--page-width)) / 2));
    border-top: 0;
    background: #17120f;
    color: rgba(255, 253, 248, 0.7);
}

.paperhold-footer .paperhold-logo {
    color: var(--paper);
}

.paperhold-footer > div:first-child > p {
    max-width: 390px;
    color: #d8cec3;
}

.paperhold-footer-links {
    gap: 70px;
}

.paperhold-footer-links strong {
    color: var(--paper);
}

.paperhold-footer a {
    color: #e4d9ce;
}

.paperhold-footer a:hover {
    color: white;
}

/* Keep the imported legal and support layouts typographically aligned. */
.paperhold-legal-page,
.ph-page {
    --sans: "Geist", system-ui, sans-serif !important;
    --serif: "Newsreader", Georgia, serif !important;
}

/* Explicit contrast safeguards for imported and dark-surface components. */
.paperhold-paper,
.paperhold-paper-small,
.paperhold-result-head small,
.paperhold-result-grid small {
    color: var(--ink-muted);
}

.paperhold-app-section .paperhold-app-head p,
.paperhold-app-section .paperhold-phone-wrap > p {
    color: #f0e6d9;
}

.paperhold-features article:nth-child(1) > span {
    color: #f2c9b9 !important;
}

.paperhold-features article:nth-child(1) p,
.paperhold-reminder {
    color: #fffdf8;
}

.paperhold-footer-links strong,
.paperhold-footer .paperhold-logo {
    color: #fffdf8;
}

.ph-page .ph-eyebrow,
.ph-page .ph-main > a,
.ph-page .ph-main p > a {
    color: #913719 !important;
}

.ph-page .ph-lead,
.ph-page .ph-note,
.ph-page .ph-footer-in,
.ph-page .ph-footer-in a {
    color: #4c4036 !important;
}

.ph-page .ph-contact,
.ph-page .ph-contact p,
.ph-page .ph-contact strong,
.ph-page .ph-contact a {
    color: #ffffff !important;
}

.paperhold-legal-date,
.layout aside.toc a::before {
    color: var(--ink-muted) !important;
}

.paperhold-legal-date {
    margin-top: 48px !important;
    font-size: 14px !important;
}

.layout aside.toc .label,
.layout .eyebrow {
    color: var(--terra-deep) !important;
}

.paperhold-legal-footer,
footer.bottom {
    color: #ded4c9 !important;
}

.paperhold-legal-footer a,
footer.bottom a {
    color: #fffdf8 !important;
}

/* Zwei-Klick-Lösung für Drittanbieter-Einbettungen (Brevo-Newsletter) */
.paperhold-consent-embed {
    max-width: 540px;
    margin: 24px auto 0;
    padding: 28px 24px;
    background: var(--paper-warm);
    border: 1px solid rgba(42, 34, 26, .12);
    border-radius: 18px;
    text-align: left;
}

.paperhold-consent-embed.is-loaded {
    padding: 0;
    background: none;
    border: none;
}

.paperhold-consent-text {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.paperhold-consent-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border: none;
    border-radius: 999px;
    background: var(--terra);
    color: #fffdf8;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.paperhold-consent-button:hover {
    background: var(--terra-deep);
}

.paperhold-consent-button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.paperhold-newsletter-frame {
    width: 100%;
    max-width: 540px;
    border: none;
    border-radius: 18px;
}