/* ================================================================
   PageForge — Premium Design System v2
   Tonal Surfaces · Glassmorphism · Editorial Typography
   ================================================================ */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Brand Colors — überschrieben via Settings */
    --pf-primary:     #006565;
    --pf-secondary:   #50606f;
    --pf-accent:      #8b4823;
    --pf-text:        #0d1d2a;
    --pf-bg:          #f7f9ff;
    --pf-radius:      12px;

    /* Tonal Surface System — das Herzstück */
    --surface:                 #f7f9ff;
    --surface-bright:          #ffffff;
    --surface-container-low:   #ecf4ff;
    --surface-container:       #e2efff;
    --surface-container-high:  #d9eafc;
    --surface-container-highest: #d4e4f6;

    /* On-Color */
    --on-surface:         #0d1d2a;
    --on-surface-variant: #3e4949;
    --on-primary:         #ffffff;

    /* Typography */
    --pf-font-head: 'Inter', -apple-system, sans-serif;
    --pf-font-body: 'Inter', -apple-system, sans-serif;

    /* Shadows — subtil, nicht aggressiv */
    --shadow-ambient: 0 10px 40px -15px rgba(13,29,42,0.08);
    --shadow-float:   0 20px 60px -15px rgba(13,29,42,0.14);
    --shadow-card:    0 2px 12px rgba(13,29,42,0.06);

    /* Transitions */
    --pf-transition: all .25s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--pf-font-body);
    color: var(--on-surface);
    background: var(--surface);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--pf-primary); text-decoration: none; transition: var(--pf-transition); }

/* ================================================================
   TONAL SURFACE HELPER — Sektionen per Klasse stylen
   Kein Border nötig, nur Hintergrundwechsel = modernes Look
   ================================================================ */

.pf-surface          { background: var(--surface); }
.pf-surface-bright   { background: var(--surface-bright); }
.pf-surface-low      { background: var(--surface-container-low); }
.pf-surface-mid      { background: var(--surface-container); }
.pf-surface-high     { background: var(--surface-container-high); }
.pf-surface-primary  { background: var(--pf-primary); color: var(--on-primary); }

/* Section Padding Skala */
.pf-sec-xs  { padding: 2rem 2rem; }
.pf-sec-sm  { padding: 4rem 2rem; }
.pf-sec-md  { padding: 6rem 2rem; }
.pf-sec-lg  { padding: 8rem 2rem; }
.pf-sec-xl  { padding: 10rem 2rem; }

.pf-container    { max-width: 1200px; margin: 0 auto; }
.pf-container-sm { max-width: 960px;  margin: 0 auto; }
.pf-container-lg { max-width: 1400px; margin: 0 auto; }

/* ================================================================
   GLASSMORPHISM
   ================================================================ */

.pf-glass {
    background: rgba(247,249,255,0.80);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6);
}

.pf-glass-dark {
    background: rgba(13,29,42,0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
}

/* ================================================================
   TYPOGRAPHY — Editorial Scale
   ================================================================ */

.pf-display {
    font-family: var(--pf-font-head);
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--on-surface);
}

.pf-headline-xl {
    font-family: var(--pf-font-head);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--on-surface);
}

.pf-headline-lg {
    font-family: var(--pf-font-head);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--on-surface);
}

.pf-headline-md {
    font-family: var(--pf-font-head);
    font-size: clamp(1.2rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--on-surface);
}

.pf-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--pf-primary);
    display: block;
    margin-bottom: .75rem;
}

.pf-lead {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--pf-secondary);
    line-height: 1.75;
    max-width: 56ch;
}

/* Italic Accent — wie im Referenz-Design */
.pf-italic-accent {
    font-style: italic;
    color: var(--pf-primary);
}

/* ================================================================
   BUTTONS — Premium Style
   ================================================================ */

.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--pf-font-head);
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    transition: var(--pf-transition);
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--pf-radius);
}

.pf-btn-sm  { padding: .5rem 1.25rem;  font-size: .85rem; }
.pf-btn-md  { padding: .75rem 1.75rem; font-size: .95rem; }
.pf-btn-lg  { padding: 1rem 2.25rem;   font-size: 1.05rem; }
.pf-btn-xl  { padding: 1.15rem 2.75rem; font-size: 1.1rem; }

/* Primary */
.pf-btn-primary {
    background: var(--pf-primary);
    color: #fff;
    box-shadow: 0 8px 32px -8px rgba(0,101,101,.35);
}
.pf-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px -8px rgba(0,101,101,.45);
    opacity: 1;
}

/* Secondary (Tonal) */
.pf-btn-secondary {
    background: var(--surface-container-low);
    color: var(--pf-secondary);
}
.pf-btn-secondary:hover {
    background: var(--surface-container);
    color: var(--on-surface);
    transform: translateY(-1px);
    opacity: 1;
}

/* Ghost (für dunkle Hintergründe) */
.pf-btn-ghost {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.35);
}
.pf-btn-ghost:hover {
    background: rgba(255,255,255,.25);
    opacity: 1;
}

/* Outline */
.pf-btn-outline {
    background: transparent;
    color: var(--pf-primary);
    border: 2px solid var(--pf-primary);
}
.pf-btn-outline:hover {
    background: var(--pf-primary);
    color: #fff;
    opacity: 1;
}

/* ================================================================
   CARDS — Tonal Elevation Prinzip
   ================================================================ */

.pf-card {
    background: var(--surface-bright);
    border-radius: var(--pf-radius);
    box-shadow: var(--shadow-card);
    transition: var(--pf-transition);
}

.pf-card-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-float);
}

.pf-card-tonal {
    background: var(--surface-container-low);
    border-radius: var(--pf-radius);
    transition: var(--pf-transition);
}

/* Feature Card (Icon Box Premium) */
.pf-feature-card {
    background: var(--surface-bright);
    border-radius: calc(var(--pf-radius) * 1.5);
    padding: 2.5rem;
    box-shadow: var(--shadow-ambient);
    transition: var(--pf-transition);
    position: relative;
    overflow: hidden;
}
.pf-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-float);
}
.pf-feature-card .pf-icon-wrap {
    width: 3.5rem; height: 3.5rem;
    border-radius: .875rem;
    background: var(--surface-container-low);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    transition: var(--pf-transition);
}
.pf-feature-card:hover .pf-icon-wrap {
    background: var(--pf-primary);
    color: #fff;
}

/* Floating Info Card (Overlay-Style) */
.pf-info-card {
    background: var(--surface-bright);
    border-radius: calc(var(--pf-radius) * 1.25);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-float);
    position: absolute;
}

/* Vitality Badge (kleiner Tag/Pill) */
.pf-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 1rem;
    border-radius: 9999px;
    background: var(--surface-bright);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    box-shadow: 0 0 20px rgba(0,101,101,.15);
}
.pf-badge-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pf-primary);
    box-shadow: 0 0 8px rgba(0,101,101,.5);
}

/* ================================================================
   HOVER EFFEKTE
   ================================================================ */

.pf-hover-lift {
    transition: transform .3s ease, box-shadow .3s ease;
}
.pf-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-float);
}

.pf-img-zoom { overflow: hidden; }
.pf-img-zoom img { transition: transform .5s ease; }
.pf-img-zoom:hover img { transform: scale(1.06); }

.pf-img-grayscale img {
    filter: grayscale(1); opacity: .75;
    transition: filter .4s ease, opacity .4s ease;
}
.pf-img-grayscale:hover img { filter: grayscale(0); opacity: 1; }

/* ================================================================
   GRID SYSTEM
   ================================================================ */

.pf-grid { display: grid; gap: 2rem; }
.pf-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pf-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pf-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pf-grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Asymmetric Hero Grids */
.pf-grid-7-5 { grid-template-columns: 7fr 5fr; }
.pf-grid-5-7 { grid-template-columns: 5fr 7fr; }
.pf-grid-6-4 { grid-template-columns: 6fr 4fr; }

/* ================================================================
   SCROLL ANIMATIONEN
   ================================================================ */

[data-pf-animate] {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.25,.46,.45,.94),
                transform .7s cubic-bezier(.25,.46,.45,.94);
}
[data-pf-animate="fade-up"]    { transform: translateY(32px); }
[data-pf-animate="fade-down"]  { transform: translateY(-32px); }
[data-pf-animate="fade-left"]  { transform: translateX(32px); }
[data-pf-animate="fade-right"] { transform: translateX(-32px); }
[data-pf-animate="zoom-in"]    { transform: scale(.93); }
[data-pf-animate].pf-animated  { opacity: 1; transform: none; }

[data-pf-delay="100"] { transition-delay: .1s; }
[data-pf-delay="200"] { transition-delay: .2s; }
[data-pf-delay="300"] { transition-delay: .3s; }
[data-pf-delay="400"] { transition-delay: .4s; }
[data-pf-delay="500"] { transition-delay: .5s; }

/* ================================================================
   HEADER — Glassmorphism (wird in app.blade.php gesetzt)
   ================================================================ */

.site-header {
    transition: box-shadow .3s ease, background .3s ease;
}
.site-header.pf-scrolled {
    box-shadow: 0 8px 32px -8px rgba(13,29,42,0.1);
}

/* ================================================================
   NAVIGATION — Modern Flat + Mega Menu
   ================================================================ */

.pf-nav-link {
    font-weight: 600;
    font-size: .9rem;
    color: var(--pf-secondary);
    padding: .4rem .6rem;
    border-radius: 6px;
    transition: var(--pf-transition);
    position: relative;
}
.pf-nav-link:hover, .pf-nav-link.active {
    color: var(--pf-primary);
    opacity: 1;
}
.pf-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%;
    transform: translateX(-50%);
    width: 70%; height: 2px;
    background: var(--pf-primary);
    border-radius: 2px;
}

/* Mega Menu Panel */
.pf-mega {
    position: absolute;
    top: calc(100% + .75rem);
    left: 50%; transform: translateX(-50%);
    background: var(--surface-bright);
    border-radius: calc(var(--pf-radius) * 1.5);
    box-shadow: var(--shadow-float);
    padding: 2rem;
    min-width: 640px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 200;
    border: 1px solid rgba(13,29,42,.06);
}
.pf-mega-trigger:hover .pf-mega,
.pf-mega-trigger:focus-within .pf-mega {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.pf-mega-grid {
    display: grid;
    gap: .5rem;
}
.pf-mega-grid-2 { grid-template-columns: 1fr 1fr; }
.pf-mega-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.pf-mega-item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .875rem;
    border-radius: .75rem;
    transition: var(--pf-transition);
    text-decoration: none;
    color: var(--on-surface);
}
.pf-mega-item:hover {
    background: var(--surface-container-low);
    opacity: 1;
}
.pf-mega-item-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: .625rem;
    background: var(--surface-container-low);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: var(--pf-transition);
}
.pf-mega-item:hover .pf-mega-item-icon {
    background: var(--pf-primary);
    color: #fff;
}
.pf-mega-item-title {
    font-weight: 700;
    font-size: .88rem;
    color: var(--on-surface);
    display: block;
    margin-bottom: .2rem;
}
.pf-mega-item-desc {
    font-size: .78rem;
    color: var(--pf-secondary);
    line-height: 1.45;
}

/* Featured Box im Mega Menu */
.pf-mega-featured {
    background: linear-gradient(135deg, var(--pf-primary), color-mix(in srgb, var(--pf-primary) 70%, #000));
    border-radius: .875rem;
    padding: 1.5rem;
    color: #fff;
}
.pf-mega-featured-title {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: .5rem;
}
.pf-mega-featured-text {
    font-size: .82rem;
    opacity: .85;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* ================================================================
   FOOTER — Modern 4-Spalten
   ================================================================ */

.pf-footer {
    background: var(--surface-container-low);
    padding: 5rem 2rem 2rem;
}
.pf-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}
.pf-footer-brand-name {
    font-family: var(--pf-font-head);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--pf-primary);
    margin-bottom: .75rem;
}
.pf-footer-tagline {
    font-size: .9rem;
    color: var(--pf-secondary);
    line-height: 1.65;
    max-width: 28ch;
}
.pf-footer-col-title {
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pf-primary);
    margin-bottom: 1.25rem;
}
.pf-footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.pf-footer-links a {
    font-size: .9rem;
    color: var(--pf-secondary);
    transition: var(--pf-transition);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.pf-footer-links a:hover {
    color: var(--pf-primary);
    transform: translateX(3px);
    opacity: 1;
}
.pf-footer-bottom {
    max-width: 1200px;
    margin: 3rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(13,29,42,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .85rem;
    color: var(--pf-secondary);
}

/* ================================================================
   RICH TEXT CONTENT
   ================================================================ */

.pf-rich-text h1,.pf-rich-text h2,.pf-rich-text h3,.pf-rich-text h4 {
    font-weight: 700; margin: 1.75rem 0 .75rem; line-height: 1.25;
    color: var(--on-surface);
}
.pf-rich-text h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.pf-rich-text h3 { font-size: clamp(1.15rem, 2.5vw, 1.45rem); }
.pf-rich-text p  { margin-bottom: 1.1rem; color: var(--pf-secondary); }
.pf-rich-text ul,.pf-rich-text ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.pf-rich-text li { margin-bottom: .5rem; }
.pf-rich-text a  { color: var(--pf-primary); text-decoration: underline; }
.pf-rich-text strong { font-weight: 700; color: var(--on-surface); }
.pf-rich-text blockquote {
    border-left: 3px solid var(--pf-primary);
    padding: 1rem 1.5rem; margin: 1.75rem 0;
    background: var(--surface-container-low);
    border-radius: 0 var(--pf-radius) var(--pf-radius) 0;
    font-style: italic;
}

/* ================================================================
   SCROLL TO TOP
   ================================================================ */

#pf-scroll-top {
    position: fixed; bottom: 2rem; right: 2rem;
    width: 2.75rem; height: 2.75rem;
    background: var(--pf-primary); color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s;
    box-shadow: var(--shadow-float);
    z-index: 999;
}
#pf-scroll-top.visible { opacity: 1; pointer-events: all; }
#pf-scroll-top:hover { transform: translateY(-3px); }

/* Progress Bar */
#pf-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: var(--pf-primary);
    transform-origin: left; transform: scaleX(0);
    transition: transform .1s linear; z-index: 9999;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
    .pf-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .pf-grid-7-5, .pf-grid-5-7, .pf-grid-6-4 { grid-template-columns: 1fr; }
    .pf-footer-grid { grid-template-columns: 1fr 1fr; }
    .pf-mega { min-width: 480px; }
}

@media (max-width: 768px) {
    .pf-grid-2, .pf-grid-3, .pf-grid-4 { grid-template-columns: 1fr; }
    .pf-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .pf-mega { min-width: 90vw; left: 5vw; transform: none; }
    .pf-mega-grid-2, .pf-mega-grid-3 { grid-template-columns: 1fr; }
    .pf-sec-lg  { padding: 4rem 1.25rem; }
    .pf-sec-xl  { padding: 5rem 1.25rem; }
    .pf-display { font-size: clamp(2rem, 9vw, 3rem); }
}

/* ================================================================
   UTILITY
   ================================================================ */

.pf-text-center { text-align: center; }
.pf-text-muted  { color: var(--pf-secondary); }
.pf-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ================================================================
   UNIVERSELLE WIDGET-WRAPPER UTILITIES
   ================================================================ */

/* Responsive Sichtbarkeit */
@media (max-width: 768px)  { .pf-hide-mobile { display: none !important; } }
@media (max-width: 1024px) { .pf-hide-tablet { display: none !important; } }

/* Widget-Wrapper Basis */
.pf-widget-wrap { position: relative; }