/*
Theme Name: RangHoch
Theme URI: https://ranghoch.de
Author: Julien Bartmann
Author URI: https://ranghoch.de
Description: Custom WordPress Theme fuer RangHoch
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: proprietary
License URI: https://ranghoch.de/lizenz
Text Domain: ranghoch
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =============================================================================
   CSS Custom Properties (Design-Tokens)
   ============================================================================= */

:root {
    /* Farben */
    --rh-color-primary:    #1a1a2e;
    --rh-color-secondary:  #d44e12;
    --rh-color-accent:     #f05e1c;
    --rh-color-bg:         #ffffff;
    --rh-color-text:       #1a1a2e;

    /* Abgeleitete Farben */
    --rh-color-bg-alt:     #f8f9fa;
    --rh-color-border:     #e2e8f0;
    --rh-color-text-muted: #64748b;

    /* Typografie */
    --rh-font-heading: 'Sora', system-ui, sans-serif;
    --rh-font-body:    'DM Sans', 'Inter', system-ui, sans-serif;

    /* Schriftgroessen (fluid) */
    --rh-fs-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --rh-fs-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --rh-fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --rh-fs-md:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    --rh-fs-lg:   clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --rh-fs-xl:   clamp(2rem, 1.5rem + 2vw, 3rem);
    --rh-fs-xxl:  clamp(2.5rem, 1.8rem + 3vw, 4rem);

    /* Abstande */
    --rh-space-xs:  0.25rem;
    --rh-space-sm:  0.5rem;
    --rh-space-md:  1rem;
    --rh-space-lg:  2rem;
    --rh-space-xl:  4rem;
    --rh-space-xxl: 6rem;
    --rh-space-3xl: 8rem;

    /* Schriftgroessen (ergaenzend) */
    --rh-fs-2xl:  clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);

    /* Layout */
    --rh-max-width:     1200px;
    --rh-content-width: 740px;
    --rh-sidebar-width: 320px;
    --rh-gap:           var(--rh-space-lg);

    /* Rundungen */
    --rh-radius-sm: 4px;
    --rh-radius-md: 8px;
    --rh-radius-lg: 16px;
    --rh-radius-full: 9999px;

    /* Schatten */
    --rh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --rh-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --rh-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* Uebergaenge */
    --rh-transition: 0.25s ease;
}

/* Dark Mode Tokens
   ============================================================================= */

[data-theme="dark"] {
    --rh-color-bg:         #0d0d0d;
    --rh-color-bg-alt:     #1a1a1a;
    --rh-color-text:       #f0f0f0;
    --rh-color-text-muted: #94a3b8;
    --rh-color-border:     #2a2a2a;
    --rh-color-primary:    #f05e1c;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --rh-color-bg:         #0d0d0d;
        --rh-color-bg-alt:     #1a1a1a;
        --rh-color-text:       #f0f0f0;
        --rh-color-text-muted: #94a3b8;
        --rh-color-border:     #2a2a2a;
        --rh-color-primary:    #f05e1c;
    }
}

/* Dark Mode: Logo-Switching */
.rh-logo--dark { display: none; }

html[data-theme="dark"] .rh-logo--light { display: none; }
html[data-theme="dark"] .rh-logo--dark  { display: block; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .rh-logo--light { display: none; }
    html:not([data-theme="light"]) .rh-logo--dark  { display: block; }
}

/* Dark Mode: Toggle-Button */
.rh-dark-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid var(--rh-color-border);
    border-radius: var(--rh-radius-full);
    cursor: pointer;
    color: var(--rh-color-text-muted);
    transition: color var(--rh-transition), border-color var(--rh-transition);
    flex-shrink: 0;
}

.rh-dark-toggle:hover {
    color: var(--rh-color-accent);
    border-color: var(--rh-color-accent);
}

.rh-icon-sun { display: none; }

html[data-theme="dark"] .rh-icon-moon { display: none; }
html[data-theme="dark"] .rh-icon-sun  { display: block; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .rh-icon-moon { display: none; }
    html:not([data-theme="light"]) .rh-icon-sun  { display: block; }
}

/* =============================================================================
   Reset / Box-Sizing
   ============================================================================= */

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

/* =============================================================================
   Basis-Typografie
   ============================================================================= */

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--rh-font-body);
    font-size: var(--rh-fs-base);
    line-height: 1.7;
    color: var(--rh-color-text);
    background-color: var(--rh-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rh-font-heading);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: var(--rh-space-md);
}

h1 { font-size: var(--rh-fs-xxl); }
h2 { font-size: var(--rh-fs-xl); }
h3 { font-size: var(--rh-fs-lg); }
h4 { font-size: var(--rh-fs-md); }
h5 { font-size: var(--rh-fs-base); }
h6 { font-size: var(--rh-fs-sm); }

p { margin-bottom: var(--rh-space-md); }

a {
    color: var(--rh-color-primary);
    text-decoration: none;
    transition: color var(--rh-transition);
}

a:hover, a:focus {
    color: var(--rh-color-secondary);
    text-decoration: underline;
}

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

/* =============================================================================
   Layout-Container
   ============================================================================= */

.rh-container {
    width: 100%;
    max-width: var(--rh-max-width);
    margin-inline: auto;
    padding-inline: var(--rh-space-md);
}

.rh-container--narrow { max-width: var(--rh-content-width); }
.rh-container--wide   { max-width: 1400px; }

/* =============================================================================
   Header
   ============================================================================= */

.rh-site-header {
    background-color: transparent;
    border-bottom: 1px solid transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.rh-site-header.rh-site-header--scrolled {
    background-color: var(--rh-color-bg);
    border-bottom-color: var(--rh-color-border);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

/* Auf hellen Seiten (nicht front-page, nicht hero-page) immer solid */
body:not(.home):not(.rh-hero-page) .rh-site-header {
    background-color: var(--rh-color-bg);
    border-bottom-color: var(--rh-color-border);
}

/* Header-Abstand damit Inhalt nicht hinter fixem Header steckt */
.rh-site-main { padding-top: 72px; }
:is(body.home, body.rh-hero-page) .rh-site-main { padding-top: 0; }

/* Header-CTA Button */
.rh-header-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: var(--rh-color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: var(--rh-radius-md);
    text-decoration: none;
    transition: background var(--rh-transition), transform var(--rh-transition);
    white-space: nowrap;
}

.rh-header-cta:hover {
    background: var(--rh-color-secondary);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Transparent über dunklem Hero → immer dunkles Logo (weiß/orange), egal welcher Mode */
:is(body.home, body.rh-hero-page) .rh-site-header:not(.rh-site-header--scrolled) .rh-logo--light { display: none !important; }
:is(body.home, body.rh-hero-page) .rh-site-header:not(.rh-site-header--scrolled) .rh-logo--dark  { display: block !important; }

/* Nav-Links + Dark-Toggle weiß über dem Hero */
:is(body.home, body.rh-hero-page) .rh-site-header:not(.rh-site-header--scrolled) .rh-main-nav a,
:is(body.home, body.rh-hero-page) .rh-site-header:not(.rh-site-header--scrolled) .rh-site-title a {
    color: rgba(255,255,255,0.85);
}

:is(body.home, body.rh-hero-page) .rh-site-header:not(.rh-site-header--scrolled) .rh-main-nav a:hover {
    color: #fff;
}

:is(body.home, body.rh-hero-page) .rh-site-header:not(.rh-site-header--scrolled) .rh-dark-toggle {
    color: rgba(255,255,255,0.6);
    border-color: rgba(255,255,255,0.2);
}

.rh-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--rh-space-md);
}

.rh-site-branding {
    display: flex;
    align-items: center;
    gap: var(--rh-space-sm);
}

.rh-site-branding img { height: 56px; width: auto; }

.rh-site-title {
    font-size: var(--rh-fs-lg);
    margin: 0;
}

.rh-site-title a {
    color: var(--rh-color-text);
    text-decoration: none;
}

/* =============================================================================
   Navigation
   ============================================================================= */

.rh-main-nav ul {
    display: flex;
    list-style: none;
    gap: var(--rh-space-lg);
}

.rh-main-nav a {
    color: var(--rh-color-text);
    font-weight: 500;
    padding: var(--rh-space-xs) 0;
}

.rh-main-nav a:hover,
.rh-main-nav .current-menu-item > a {
    color: var(--rh-color-primary);
    text-decoration: none;
}

.rh-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--rh-space-sm);
    color: var(--rh-color-text);
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
}

.rh-menu-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform var(--rh-transition), opacity var(--rh-transition);
}

/* Hamburger → X wenn offen */
.rh-menu-toggle[aria-expanded="true"] .rh-menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.rh-menu-toggle[aria-expanded="true"] .rh-menu-toggle__bar:nth-child(2) {
    opacity: 0;
}
.rh-menu-toggle[aria-expanded="true"] .rh-menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Hamburger weiß über transparentem Hero */
:is(body.home, body.rh-hero-page) .rh-site-header:not(.rh-site-header--scrolled) .rh-menu-toggle {
    color: rgba(255, 255, 255, 0.85);
}

/* =============================================================================
   Content-Bereich
   ============================================================================= */

.rh-site-main { padding-bottom: var(--rh-space-xl); }

.rh-content-area {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rh-gap);
}

.rh-content-area--with-sidebar {
    grid-template-columns: 1fr var(--rh-sidebar-width);
}

/* =============================================================================
   Beitragskarten
   ============================================================================= */

.rh-card {
    background-color: var(--rh-color-bg);
    border: 1px solid var(--rh-color-border);
    border-radius: var(--rh-radius-md);
    overflow: hidden;
    transition: box-shadow var(--rh-transition), transform var(--rh-transition);
}

.rh-card:hover {
    box-shadow: var(--rh-shadow-md);
    transform: translateY(-2px);
}

.rh-card__image { aspect-ratio: 16 / 10; overflow: hidden; }

.rh-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--rh-transition);
}

.rh-card:hover .rh-card__image img { transform: scale(1.03); }

.rh-card__body { padding: var(--rh-space-lg); }

.rh-card__title {
    font-size: var(--rh-fs-md);
    margin-bottom: var(--rh-space-sm);
}

.rh-card__excerpt {
    color: var(--rh-color-text-muted);
    font-size: var(--rh-fs-sm);
}

.rh-card__meta {
    font-size: var(--rh-fs-xs);
    color: var(--rh-color-text-muted);
    margin-top: var(--rh-space-md);
}

/* =============================================================================
   Beitragsraster
   ============================================================================= */

.rh-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--rh-gap);
}

/* =============================================================================
   Einzelner Beitrag
   ============================================================================= */

.rh-single-post {
    max-width: var(--rh-content-width);
    margin-inline: auto;
}

.rh-single-post__header {
    margin-bottom: var(--rh-space-xl);
    text-align: center;
}

.rh-single-post__content { line-height: 1.8; }
.rh-single-post__content p { margin-bottom: var(--rh-space-lg); }
.rh-single-post__content h2 { margin-top: var(--rh-space-xl); }
.rh-single-post__content h3 { margin-top: var(--rh-space-lg); }

.rh-single-post__content blockquote {
    border-left: 4px solid var(--rh-color-primary);
    padding: var(--rh-space-md) var(--rh-space-lg);
    margin: var(--rh-space-lg) 0;
    background: var(--rh-color-bg-alt);
    border-radius: 0 var(--rh-radius-sm) var(--rh-radius-sm) 0;
    font-style: italic;
}

.rh-single-post__content ul,
.rh-single-post__content ol {
    margin: var(--rh-space-md) 0 var(--rh-space-lg) var(--rh-space-lg);
}

.rh-single-post__content li { margin-bottom: var(--rh-space-sm); }

/* =============================================================================
   Breadcrumbs
   ============================================================================= */

.rh-breadcrumbs {
    padding: var(--rh-space-md) 0;
    font-size: var(--rh-fs-sm);
}

.rh-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: var(--rh-space-xs);
}

.rh-breadcrumbs__item::after {
    content: '/';
    margin-left: var(--rh-space-xs);
    color: var(--rh-color-text-muted);
}

.rh-breadcrumbs__item:last-child::after { content: none; }
.rh-breadcrumbs__item--current { color: var(--rh-color-text-muted); }

/* =============================================================================
   Footer
   ============================================================================= */

.rh-site-footer {
    background-color: var(--rh-color-bg-alt);
    border-top: 1px solid var(--rh-color-border);
    padding-block: var(--rh-space-xl);
    margin-top: var(--rh-space-xxl);
}

.rh-footer-widgets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rh-gap);
    margin-bottom: var(--rh-space-xl);
}

.rh-site-footer__bottom {
    text-align: center;
    padding-top: var(--rh-space-lg);
    border-top: 1px solid var(--rh-color-border);
    font-size: var(--rh-fs-xs);
    color: var(--rh-color-text-muted);
}

.rh-footer-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: var(--rh-space-lg);
    margin-top: var(--rh-space-md);
}

.rh-footer-nav a {
    color: var(--rh-color-text-muted);
    font-size: var(--rh-fs-sm);
}

.rh-footer-nav a:hover { color: var(--rh-color-primary); }

/* =============================================================================
   Pagination
   ============================================================================= */

.rh-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--rh-space-sm);
    margin-top: var(--rh-space-xl);
}

.rh-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: var(--rh-space-xs) var(--rh-space-sm);
    border: 1px solid var(--rh-color-border);
    border-radius: var(--rh-radius-sm);
    font-size: var(--rh-fs-sm);
    transition: all var(--rh-transition);
}

.rh-pagination .page-numbers:hover {
    background-color: var(--rh-color-primary);
    color: var(--rh-color-bg);
    border-color: var(--rh-color-primary);
    text-decoration: none;
}

.rh-pagination .page-numbers.current {
    background-color: var(--rh-color-primary);
    color: var(--rh-color-bg);
    border-color: var(--rh-color-primary);
}

/* =============================================================================
   Hilfklassen
   ============================================================================= */

.rh-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;
}

.rh-text-center { text-align: center; }
.rh-text-left   { text-align: left; }
.rh-text-right  { text-align: right; }

/* =============================================================================
   Responsive Breakpoints
   ============================================================================= */

/* Tablet (max 1024px) */
@media (max-width: 64em) {
    .rh-content-area--with-sidebar { grid-template-columns: 1fr; }
    .rh-footer-widgets { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (max 768px) */
@media (max-width: 48em) {
    /* Header wird 2-zeilig (~116px) — mehr Abstand für Seiteninhalte */
    .rh-site-main { padding-top: 120px; }
    :is(body.home, body.rh-hero-page) .rh-site-main { padding-top: 0; }

    /* Header: Logo-Zeile oben, Nav-Zeile darunter */
    .rh-site-header__inner {
        flex-wrap: wrap;
        padding-block: var(--rh-space-sm);
        gap: 0;
    }

    /* Logo kleiner auf Mobile */
    .rh-site-branding img {
        height: 40px;
    }

    /* CTA-Button kompakter */
    .rh-header-cta {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }

    /* Hamburger komplett ausblenden — Nav immer sichtbar */
    .rh-menu-toggle { display: none !important; }

    /* Nav: volle Breite, zweite Zeile, horizontal scrollbar */
    .rh-main-nav {
        display: block !important;
        width: 100%;
        order: 3;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-top: var(--rh-space-xs);
        border-top: 1px solid var(--rh-color-border);
        padding-top: var(--rh-space-xs);
    }
    .rh-main-nav::-webkit-scrollbar { display: none; }

    .rh-main-nav ul {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
        white-space: nowrap;
        justify-content: flex-start;
    }

    .rh-main-nav a {
        display: inline-block;
        padding: 6px var(--rh-space-md);
        font-size: var(--rh-fs-sm);
        border-bottom: none;
        white-space: nowrap;
    }

    /* Auf Home: Nav-Zeile mit leichtem Dark-Overlay lesbar halten */
    :is(body.home, body.rh-hero-page) .rh-site-header:not(.rh-site-header--scrolled) .rh-main-nav {
        border-top-color: rgba(255, 255, 255, 0.15);
    }

    .rh-post-grid { grid-template-columns: 1fr; }
    .rh-footer-widgets { grid-template-columns: 1fr; }
    .rh-footer-nav ul { flex-direction: column; align-items: center; gap: var(--rh-space-sm); }
}

/* Kleine Mobilgeraete (max 480px) */
@media (max-width: 30em) {
    :root {
        --rh-space-xl: 2rem;
        --rh-space-xxl: 3rem;
    }
    .rh-container { padding-inline: var(--rh-space-sm); }
}


/* =============================================================================
   Fix 5: Abschluss-CTA /shk/
   ============================================================================= */
.rh-shk-abschluss {
    background: var(--rh-color-surface-alt);
    padding: var(--rh-space-3xl) 0;
    text-align: center;
}

.rh-shk-abschluss__inner {
    max-width: 600px;
}

.rh-shk-abschluss__ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rh-space-md);
    margin-top: var(--rh-space-xl);
}

.rh-shk-abschluss__tel {
    font-size: var(--rh-fs-sm);
    color: var(--rh-color-text-muted);
    margin: 0;
}

.rh-shk-abschluss__tel a {
    color: var(--rh-color-text-muted);
    text-decoration: underline;
}

/* =============================================================================
   Fix 6: Rechner-CTA in Preise-Sektion
   ============================================================================= */
.rh-preise__rechner-cta {
    text-align: center;
    margin-top: var(--rh-space-xl);
    padding-top: var(--rh-space-lg);
    border-top: 1px solid var(--rh-color-border);
}

.rh-preise__rechner-cta p {
    color: var(--rh-color-text-muted);
    margin-bottom: var(--rh-space-md);
}