/*
Theme Name:   DesignBurg
Theme URI:    https://webdesignhamburg.net
Description:  Child Theme für GeneratePress – DesignBurg / WebdesignHamburg.net. Boutique-Auftritt mit großen Flächen und großer Schrift, ohne Page-Builder, SEO- und KI-optimiert.
Author:       DesignBurg
Author URI:   https://webdesignhamburg.net
Template:     generatepress
Version:      2.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  designburg
Tags:         lightweight, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   DesignBurg – Design-Tokens

   Haltung: große Flächen, große Schrift, wenig Dekoration. Der Auftritt
   trägt sich über zwei Dinge – eine Didone-Display-Schrift in sehr
   großem Grad und ganzflächige Farbfelder. Rahmen, Schatten und Karten
   sind bewusst fast vollständig verschwunden.

   Eigene Anpassungen bitte in /assets/css/custom.css schreiben.
   ========================================================================== */

:root {
    /* Markenfarben aus dem DesignBurg-Logo */
    --db-brand-blue:   #1A729C;
    --db-brand-orange: #F7931E;
    --db-ink:          #12161A;

    /* Flächen. „signal" ist die große Farbfläche, die den Auftritt trägt:
       ein tiefes Tintenblau, nicht das Logo-Orange. Orange ist zu laut
       für ganze Flächen und bleibt deshalb kleiner Akzent. */
    --db-signal:       #101B22;
    --db-signal-ink:   #F4F2ED;
    --db-bg:           #FAF9F6;
    --db-bg-alt:       #EFEDE7;
    --db-bg-deep:      var(--db-ink);
    --db-text:         #12161A;
    --db-text-muted:   #63696E;
    --db-line:         #DFDCD4;
    --db-line-strong:  #B4B0A6;

    --db-accent:       #12617F;
    --db-accent-hover: #0C4A62;
    --db-accent-soft:  #E8EEF1;

    /* Auf dunklen Flächen */
    --db-on-deep:       #F4F2ED;
    --db-on-deep-muted: #9AA1A8;
    --db-on-deep-line:  rgba(255, 255, 255, .16);

    /* Schriften – selbst gehostet (assets/css/fonts.css), kein CDN. */
    --db-font:         Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --db-font-display: "Bricolage Grotesque", Inter, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

    /* Ein Breitenmaß für alles */
    --db-container: 1440px;
    --db-gutter:    clamp(1.25rem, 4vw, 4rem);
    --db-space:     clamp(4rem, 9vw, 9rem);
    --db-measure:   62ch;

    /* Kanten bleiben scharf; nur Pills sind rund. */
    --db-radius:    0px;
    --db-radius-sm: 0px;

    --db-shadow:    none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-db-theme="light"]) {
        --db-bg:           #12161A;
        --db-bg-alt:       #1A1F25;
        --db-bg-deep:      #0B0E11;
        --db-text:         #F4F2ED;
        --db-text-muted:   #9AA1A8;
        --db-line:         #262C32;
        --db-line-strong:  #3E464E;
        --db-accent:       #7FC0DC;
        --db-accent-hover: #A5D5EA;
        --db-accent-soft:  #17303C;
    }
}

:root[data-db-theme="dark"] {
    --db-bg:           #12161A;
    --db-bg-alt:       #1A1F25;
    --db-bg-deep:      #0B0E11;
    --db-text:         #F4F2ED;
    --db-text-muted:   #9AA1A8;
    --db-line:         #262C32;
    --db-line-strong:  #3E464E;
    --db-accent:       #7FC0DC;
    --db-accent-hover: #A5D5EA;
    --db-accent-soft:  #17303C;
}

html {
    /* clip statt hidden: erzeugt keinen Scroll-Container und lässt
       position: sticky im Header intakt. */
    overflow-x: clip;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

[id] {
    scroll-margin-top: calc(var(--db-header-h, 5rem) + 1.5rem);
}

body {
    background-color: var(--db-bg);
    color: var(--db-text);
    font-family: var(--db-font);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.db-display {
    font-family: var(--db-font-display);
    font-weight: 600;
    font-optical-sizing: auto;
    letter-spacing: -.03em;
    line-height: .95;
    color: var(--db-text);
    text-wrap: balance;
}

/* Sehr groß: die Headline ist das Gestaltungsmittel, nicht ein Bild. */
h1 { font-size: clamp(3rem, 8.5vw, 8.5rem); }
h2 { font-size: clamp(2.4rem, 6vw, 5rem); }

/* Ab hier wird es klein – dort trägt die Grotesk, nicht die Didone. */
h3 {
    font-family: var(--db-font);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -.005em;
}

h4 {
    font-family: var(--db-font);
    font-weight: 600;
    font-size: 1rem;
}

a {
    color: inherit;
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
    color: var(--db-accent);
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* GeneratePress' „Artikel-Karte" neutralisieren. */
.separate-containers .site-main { margin-block: 0; }

.separate-containers .inside-article,
.separate-containers .page-header {
    padding-block: 0;
    background-color: transparent;
}

.db-section { padding-block: var(--db-space); }
.db-measure { max-width: var(--db-measure); }

hr.db-divider {
    border: 0;
    border-top: 1px solid var(--db-line);
    margin: 0;
}