/* ============================================================
   erklaersmirfritz.de — Main Stylesheet
   Palette:
     --black:   #e3e3e3  (page background)
     --surface: #dedede  (card/surface)
     --border:  #cacaca
     --text:    #1a1a1a
     --muted:   #666666
     --red:     #DD0000
     --gold:    #c89e00  (darkened for legibility on light bg)
   ============================================================ */

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

:root {
    --black:   #e3e3e3;
    --surface: #dedede;
    --border:  #cacaca;
    --text:    #1a1a1a;
    --muted:   #666666;
    --red:     #DD0000;
    --gold:    #c89e00;
    --font:    Tahoma, Verdana, Geneva, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--black);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* ---- SKIP LINK ---- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 1rem;
    background: var(--red);
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    z-index: 9999;
}
.skip-link:focus { left: 1rem; }

/* ---- SITE HEADER ---- */
.site-header {
    background: var(--black);
    padding: 2.5rem 1rem 1.5rem;
    text-align: center;
}

.site-logo {
    display: inline-block;
    max-width: min(860px, 92vw);
    width: 100%;
}

.site-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- GERMAN RULE DIVIDER ---- */
/* The single editorial device: a 3-stripe rule used once at the hero boundary */
.de-rule {
    display: flex;
    height: 4px;
    width: 100%;
}
.de-rule span {
    flex: 1;
    display: block;
}
.de-rule .stripe-black { background: #1a1a1a; } /* intentionally dark - design element */
.de-rule .stripe-red   { background: var(--red); }
.de-rule .stripe-gold  { background: var(--gold); }

/* ---- HERO ---- */
.hero {
    background: var(--black);
    padding: 4rem 1.5rem 4.5rem;
    text-align: center;
    max-width: 1420px;
    margin: 0 auto;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--red);
    font-weight: bold;
    margin-bottom: 1.25rem;
}

.hero-headline {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.hero-headline em {
    font-style: normal;
    color: var(--gold);
}

.hero-sub {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 1420px;
    margin: 0 auto 2.25rem;
    line-height: 1.7;
}

.hero-cta {
    display: inline-block;
    background: var(--red);
    color: #fff;
    text-decoration: none;
    padding: 0.85rem 2.25rem;
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: background 0.15s ease;
}
.hero-cta:hover,
.hero-cta:focus {
    background: #bb0000;
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---- SECTIONS (shared) ---- */
.section {
    padding: 5rem 1.5rem;
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--red);
    font-weight: bold;
    margin-bottom: 0.6rem;
}

.section-title {
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.section-intro {
    font-size: 0.95rem;
    color: var(--muted);
    max-width: 1420px;
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.section--alt {
    background: var(--surface);
}

/* ---- ISSUE BOXES ---- */
.issues-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* Each issue card */
.issue-card {
    background: var(--black);
    border: 1px solid var(--border);
    border-top: 3px solid var(--red);
    padding: 1.5rem 1.5rem 1.75rem;
    flex: 1 1 280px;
    min-width: 0;
    transition: border-color 0.15s ease;
}

.issue-card:hover {
    border-color: var(--gold);
    border-top-color: var(--red);
}

.issue-card-number {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--red);
    font-weight: bold;
    margin-bottom: 0.6rem;
}

.issue-card-title {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.issue-card-body {
    font-size: 0.88rem;
    color: #444444;
    line-height: 1.7;
}

/* ---- TESTIMONIALS DISPLAY ---- */
.testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 3.5rem;
}

.testimonial-card {
    background: var(--black);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    padding: 1.25rem 1.5rem;
    flex: 1 1 300px;
    min-width: 0;
}

.testimonial-card blockquote {
    font-size: 0.9rem;
    color: #333333;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 0.85rem;
}

.testimonial-meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.testimonial-meta strong {
    color: var(--text);
    font-style: normal;
}

.testimonial-date {
    font-size: 0.72rem;
    color: var(--muted);
    text-align: right;
    margin-bottom: 0.6rem;
    letter-spacing: 0.04em;
}

/* ---- SUBMISSION FORM ---- */
.form-section-title {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.submission-form {
    max-width: 620px;
}

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.1rem;
    flex: 1 1 240px;
}

.form-group.full {
    flex: 1 1 100%;
}

.form-group label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 0.35rem;
    font-weight: bold;
}

.form-group label .required {
    color: var(--red);
    margin-left: 2px;
}

.form-group input,
.form-group textarea {
    background: var(--black);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    padding: 0.65rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--red);
}

.form-group textarea {
    min-height: 110px;
}

/* Honeypot */
.form-honeypot {
    display: none !important;
    visibility: hidden;
}

.form-note {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.form-submit-btn {
    background: var(--red);
    color: #fff;
    border: none;
    padding: 0.85rem 2rem;
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.15s ease;
}

.form-submit-btn:hover,
.form-submit-btn:focus {
    background: #bb0000;
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.form-submit-btn:disabled {
    background: #aaaaaa;
    cursor: not-allowed;
}

.form-feedback {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    display: none;
}

.form-feedback.success {
    background: #e6f4e6;
    border: 1px solid #5a9e5a;
    color: #2a6a2a;
}

.form-feedback.error {
    background: #fae6e6;
    border: 1px solid var(--red);
    color: #aa0000;
}

/* ---- FOOTER ---- */
.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 2rem 1.5rem;
    text-align: center;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copy {
    font-size: 0.78rem;
    color: #555;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.15s;
}

.footer-links a:hover { color: var(--red); }

/* ---- EMPTY STATE (when no testimonials approved yet) ---- */
.testimonials-empty {
    color: #444;
    font-size: 0.9rem;
    font-style: italic;
    padding: 1.5rem 0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
    .section { padding: 3.5rem 1rem; }
    .hero     { padding: 2.5rem 1rem 3rem; }
    .form-row { flex-direction: column; }
    .form-group { flex: 1 1 100%; }
    .footer-inner { flex-direction: column; align-items: center; text-align: center; }
    .issue-card { flex: 1 1 100%; }
    .testimonial-card { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}