/* ================================================================== */
/*                                                                    */
/*          MASTER STYLESHEET - GEBURTSTAGS-EINLADUNG V2.0            */
/*          Steffi & Marko - Gemeinsame Feier 2025                   */
/*          Letzte Änderung: [Aktuelles Datum]                         */
/*          Autor: AI Assistant / Kai P.                             */
/*                                                                    */
/* ================================================================== */

/* ==================================================================
   Inhaltsverzeichnis (Table of Contents)
================================================================== */
/*
    1.  CSS Custom Properties (Variablen)
        1.1 Farben
        1.2 Typografie
        1.3 Layout & Abstände
        1.4 Übergänge & Animationen
        1.5 Rahmen & Schatten

    2.  Globale Resets & Basis-Styling
        2.1 Box-Sizing & Smooth Scrolling
        2.2 Body Grund-Layout
        2.3 Grundlegende Typografie (Absätze, Listen etc.)
        2.4 Link-Styling (Normal, Hover, Focus, Active)
        2.5 Hilfsklassen (Visually Hidden etc.)

    3.  Seitenstruktur & Haupt-Layout
        3.1 Page Wrapper
        3.2 Container Klassen (Standard, Schmal)

    4.  Seitenkopf (Header)
        4.1 Header Grund-Styling
        4.2 Header Inhalt (Titel, Subtitel)

    5.  Hauptinhaltsbereich (Main)
        5.1 Main Grund-Styling

    6.  Inhalts-Sektionen & Karten
        6.1 Section Basis-Styling
        6.2 Section Titel Styling (Dekoriert)
        6.3 Card Basis-Styling (Standard, Highlight, Subtle, Dashed)
        6.4 Card Hover/Focus Effekte
        6.5 Section Inner Wrapper

    7.  Spezifische Sektions-Styles
        7.1 Intro Section (Lead Paragraph)
        7.2 Details Section (Grid Layout)
        7.3 Detail Item (Wann & Wo Blöcke)
        7.4 RSVP Section (Kontaktliste)
        7.5 Gift Section (Geschenke-Hinweis)
        7.6 Placeholder Sections (Dresscode, Timeline)

    8.  Icons (SVG)
        8.1 Generelles Icon Styling
        8.2 Spezifische Icon Styles (Inline, Block)

    9.  Buttons & Links
        9.1 Button Basis-Styling
        9.2 Button Variationen (Secondary, Small)
        9.3 Spezifische Links (Contact, Discreet)

    10. Seitenfuß (Footer)
        10.1 Footer Grund-Styling
        10.2 Footer Inhalt (Signatur, Copyright)
        10.3 Footer Navigation (Back to Top)
        10.4 Footer Divider

    11. Animationen (falls verwendet)
        11.1 Beispiel: FadeIn Animationen

    12. Utility-Klassen (Helfer)
        12.1 Textausrichtung, Hervorhebungen, Abstände

    13. Print Styles (@media print)
        13.1 Optimierungen für den Ausdruck

    14. Responsive Design (@media queries)
        14.1 Breakpoint Large (ca. 1200px)
        14.2 Breakpoint Medium (ca. 992px)
        14.3 Breakpoint Small (ca. 768px)
        14.4 Breakpoint Extra Small (ca. 480px)
*/

/* ==================================================================
   1. CSS Custom Properties (Variablen)
================================================================== */
:root {
    /* 1.1 Farben */
    --color-primary-hue: 0; /* Rot */
    --color-primary-saturation: 70%;
    --color-primary-lightness: 50%;
    --color-primary: hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness)); /* #d83a3a */
    --color-primary-dark: hsl(var(--color-primary-hue), var(--color-primary-saturation), calc(var(--color-primary-lightness) - 10%)); /* Dunkleres Rot */
    --color-primary-light: hsl(var(--color-primary-hue), var(--color-primary-saturation), calc(var(--color-primary-lightness) + 15%)); /* Helleres Rot */
    --color-primary-very-light: hsl(var(--color-primary-hue), var(--color-primary-saturation), 95%); /* Sehr helles Rot/Rosa */

    --color-secondary-hue: 0;
    --color-secondary-saturation: 0%;
    --color-secondary-lightness: 30%;
    --color-secondary: hsl(var(--color-secondary-hue), var(--color-secondary-saturation), var(--color-secondary-lightness)); /* #4d4d4d */
    --color-secondary-light: hsl(var(--color-secondary-hue), var(--color-secondary-saturation), 50%); /* Mittleres Grau */
    --color-secondary-very-light: hsl(var(--color-secondary-hue), var(--color-secondary-saturation), 70%); /* Helles Grau */

    --color-text-on-primary: hsl(0, 0%, 100%); /* Weiß */
    --color-text-on-light: hsl(0, 0%, 15%); /* Sehr dunkles Grau / Fast Schwarz */
    --color-text-subtle: hsl(0, 0%, 45%); /* Mittleres Grau für subtilen Text */

    --color-background-body: hsl(0, 0%, 97%); /* Sehr helles Grau für Body */
    --color-background-wrapper: hsl(0, 0%, 100%); /* Weiß für Hauptcontainer */
    --color-background-card: hsl(0, 0%, 100%); /* Weiß für Karten */
    --color-background-card-subtle: hsl(0, 0%, 98%); /* Sehr leicht graue Karte */
    --color-background-footer: hsl(0, 0%, 94%); /* Etwas dunkler für Footer */
    --color-background-highlight: hsl(45, 100%, 90%); /* Gelblicher Highlight-Hintergrund */

    --color-border-light: hsl(0, 0%, 92%); /* Sehr helle Grenze */
    --color-border-medium: hsl(0, 0%, 85%); /* Mittlere Grenze */
    --color-border-dark: hsl(0, 0%, 75%); /* Dunklere Grenze */
    --color-border-dashed: hsl(0, 0%, 75%); /* Farbe für gestrichelte Ränder */

    --color-shadow-light: hsla(0, 0%, 0%, 0.05);
    --color-shadow-medium: hsla(0, 0%, 0%, 0.1);
    --color-shadow-dark: hsla(0, 0%, 0%, 0.15);

    /* 1.2 Typografie */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --font-family-headings: "Georgia", "Times New Roman", Times, serif;
    --font-family-code: "Courier New", Courier, monospace; /* Falls Codebeispiele benötigt werden */

    --font-size-root: 16px; /* Basis für REM Berechnungen */
    --font-size-base: 1rem; /* = 16px */
    --font-size-sm: 0.875rem; /* = 14px */
    --font-size-xs: 0.75rem; /* = 12px */
    --font-size-lg: 1.125rem; /* = 18px */
    --font-size-xl: 1.25rem; /* = 20px */
    --font-size-h1: clamp(2.2rem, 1.8rem + 2vw, 3.2rem); /* Responsive H1 */
    --font-size-h2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem); /* Responsive H2 */
    --font-size-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); /* Responsive H3 */

    --line-height-base: 1.75; /* Großzügiger Zeilenabstand für Lesbarkeit */
    --line-height-headings: 1.3;
    --line-height-condensed: 1.5; /* Kompakterer Zeilenabstand */

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* 1.3 Layout & Abstände */
    --spacing-unit: 1rem; /* Basis-Abstand (16px) */
    --spacing-xs: calc(var(--spacing-unit) * 0.25); /* 4px */
    --spacing-sm: calc(var(--spacing-unit) * 0.5); /* 8px */
    --spacing-md: var(--spacing-unit); /* 16px */
    --spacing-lg: calc(var(--spacing-unit) * 1.5); /* 24px */
    --spacing-xl: calc(var(--spacing-unit) * 2); /* 32px */
    --spacing-xxl: calc(var(--spacing-unit) * 3); /* 48px */

    --container-max-width: 1000px; /* Maximale Breite des Hauptwrappers */
    --container-narrow-max-width: 750px; /* Maximale Breite für schmalere Bereiche */
    --container-padding-inline: var(--spacing-lg); /* Innenabstand für Container */

    /* 1.4 Übergänge & Animationen */
    --transition-duration-fast: 150ms;
    --transition-duration-normal: 300ms;
    --transition-duration-slow: 500ms;
    --transition-timing-function-ease: ease;
    --transition-timing-function-ease-in-out: ease-in-out;
    --transition-timing-function-ease-out: ease-out;
    --transition-base: all var(--transition-duration-normal) var(--transition-timing-function-ease-in-out);

    /* 1.5 Rahmen & Schatten */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    --box-shadow-subtle: 0 2px 5px var(--color-shadow-light);
    --box-shadow-medium: 0 5px 15px var(--color-shadow-medium);
    --box-shadow-large: 0 10px 30px var(--color-shadow-dark);
    --text-shadow-subtle: 1px 1px 2px hsla(0, 0%, 0%, 0.15);
}

/* ==================================================================
   2. Globale Resets & Basis-Styling
================================================================== */

/* 2.1 Box-Sizing & Smooth Scrolling */
*,
*::before,
*::after {
    box-sizing: border-box; /* Intuitiveres Box-Modell */
    margin: 0; /* Alle Standard-Margins entfernen */
    padding: 0; /* Alle Standard-Paddings entfernen */
    border: 0; /* Standard-Rahmen entfernen */
    font-size: 100%; /* Verhindert unerwartete Vererbung */
    font: inherit; /* Vererbt Schrift-Eigenschaften vom Elternelement */
    vertical-align: baseline; /* Standard-Ausrichtung */
}

/* Bessere Font-Darstellung */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size-root); /* Basis für rem Einheiten setzen */
    scroll-behavior: smooth; /* Sanftes Scrollen für Ankerlinks */
    -webkit-text-size-adjust: 100%; /* Verhindert automatischen Textzoom auf Mobilgeräten */
    scroll-padding-top: var(--spacing-xl); /* Platz beim Anspringen von IDs lassen */
}

/* 2.2 Body Grund-Layout */
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-on-light);
    background-color: var(--color-background-body);
    padding: var(--spacing-lg) var(--spacing-md); /* Außenabstand */
    display: flex; /* Für Zentrierung des Wrappers */
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* Mindestens volle Bildschirmhöhe */
    overflow-x: hidden; /* Horizontalen Overflow verhindern */
}

/* 2.3 Grundlegende Typografie */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-headings);
    margin-bottom: var(--spacing-md); /* Standard-Abstand nach Überschriften */
    color: var(--color-primary); /* Standardfarbe */
    letter-spacing: -0.02em; /* Leichte Unterschneidung für große Schriften */
}

/* Überschriften-Größen definieren */
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); margin-top: var(--spacing-xl); } /* Mehr Abstand vor H2 */
h3 { font-size: var(--font-size-h3); color: var(--color-secondary); margin-top: var(--spacing-lg); } /* H3 etwas dezenter */

p {
    margin-bottom: var(--spacing-md);
    max-width: 75ch; /* Optimale Zeilenlänge für Lesbarkeit */
}
p:last-of-type { /* Kein Abstand nach dem letzten Absatz in einem Container */
    margin-bottom: 0;
}

ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg); /* Einrückung für Listen */
}
ul { list-style-type: disc; }
ol { list-style-type: decimal; }

li {
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-sm); /* Kleiner zusätzlicher Abstand zum Punkt */
}

/* Spezifische Listen ohne Aufzählungszeichen */
.no-bullet,
.no-bullet ul,
.no-bullet ol {
    list-style: none;
    padding-left: 0;
}
.no-bullet li {
    padding-left: 0;
}

blockquote {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: var(--border-width-thick) solid var(--color-primary-light);
    background-color: var(--color-background-card-subtle);
    font-style: italic;
    color: var(--color-text-subtle);
}

address {
    font-style: normal;
    line-height: var(--line-height-condensed);
}

hr {
    border: none; /* Reset */
    border-top: var(--border-width-thin) solid var(--color-border-medium);
    margin: var(--spacing-xl) 0;
    width: 100%;
}

/* Bilder responsiv machen */
img, svg, video, canvas, picture {
    max-width: 100%;
    height: auto;
    display: block; /* Verhindert Leerraum unter Bildern */
}

/* 2.4 Link-Styling */
a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: var(--transition-base);
    transition-property: color, background-color, text-decoration-color, outline-color; /* Spezifische Übergänge */
}
a:hover {
    color: var(--color-primary-dark);
    text-decoration-color: var(--color-primary-dark);
    background-color: hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness), 0.05); /* Leichter Hintergrund bei Hover */
}
/* Wichtig für Tastaturnavigation */
a:focus-visible {
    outline: var(--border-width-medium) solid var(--color-primary);
    outline-offset: 2px;
    background-color: hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness), 0.1);
    border-radius: var(--border-radius-small);
    text-decoration: none; /* Outline ersetzt Unterstreichung bei Fokus */
}
a:active {
    color: var(--color-primary-dark);
    transform: translateY(1px); /* Leichter Klick-Effekt */
}

/* 2.5 Hilfsklassen */
/* Klasse zum visuellen Verstecken, aber für Screenreader zugänglich */
.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* Verhindert Umbruch */
}

/* ==================================================================
   3. Seitenstruktur & Haupt-Layout
================================================================== */

/* 3.1 Page Wrapper */
.page-wrapper {
    width: 100%;
    max-width: var(--container-max-width);
    background-color: var(--color-background-wrapper);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-large);
    overflow: hidden; /* Wichtig bei abgerundeten Ecken mit Hintergrund */
    margin: var(--spacing-xl) 0;
    display: flex;
    flex-direction: column;
    min-height: 80vh; /* Stellt sicher, dass der Wrapper Höhe hat */
}

/* 3.2 Container Klassen */
.container, .container-narrow {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-inline);
    padding-right: var(--container-padding-inline);
}
.container { max-width: calc(var(--container-max-width) - (var(--container-padding-inline) * 2)); }
.container-narrow { max-width: calc(var(--container-narrow-max-width) - (var(--container-padding-inline) * 2)); }


/* ==================================================================
   4. Seitenkopf (Header)
================================================================== */

/* 4.1 Header Grund-Styling */
.page-header {
    --header-padding-block: var(--spacing-xxl); /* Eigene Variable für Header-Padding */
    padding: var(--header-padding-block) var(--container-padding-inline);
    background-color: var(--color-primary); /* Fallback-Farbe */
    background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-text-on-primary);
    text-align: center;
    position: relative; /* Für mögliche Dekorationen */
    overflow: hidden;
}

/* 4.2 Header Inhalt */
.page-header .header-content {
    position: relative; /* Hebt Inhalt über eventuelle Deko-Elemente */
    z-index: 1;
}
.page-header .header-title {
    color: inherit; /* Erbt Farbe vom Header */
    margin-bottom: var(--spacing-sm);
    text-shadow: var(--text-shadow-subtle);
}
.page-header .header-subtitle {
    color: inherit;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
    opacity: 0.9;
    margin-bottom: var(--spacing-md);
    font-family: var(--font-family-base); /* Evtl. andere Schrift für Subtitel */
}
.page-header .header-occasion {
    color: inherit;
    font-size: var(--font-size-lg);
    font-style: italic;
    opacity: 0.85;
    margin-top: var(--spacing-sm);
}

/* ==================================================================
   5. Hauptinhaltsbereich (Main)
================================================================== */

/* 5.1 Main Grund-Styling */
.main-content {
    padding: var(--spacing-xxl) var(--container-padding-inline);
    flex-grow: 1; /* Nimmt verfügbaren Platz zwischen Header und Footer ein */
}
/* Entfernt Fokus-Outline, wenn :focus-visible unterstützt wird (verhindert Outline bei Maus-Klick) */
.main-content:focus { outline: none; }
.main-content:focus-visible {
    outline: var(--border-width-medium) solid var(--color-primary);
    outline-offset: var(--spacing-sm);
}

/* ==================================================================
   6. Inhalts-Sektionen & Karten
================================================================== */

/* 6.1 Section Basis-Styling */
.content-section {
    margin-bottom: var(--spacing-xxl);
    position: relative; /* Kontext für absolute Elemente */
}
.content-section:last-child {
    margin-bottom: 0;
}

/* 6.2 Section Titel Styling (Dekoriert) */
.section-title {
    position: relative;
    margin-bottom: var(--spacing-xl); /* Mehr Abstand nach dem Titel */
}
.title-decorated > span {
    position: relative;
    z-index: 1;
    background-color: var(--color-background-wrapper); /* Hintergrund für den Text */
    padding-right: var(--spacing-md); /* Platz rechts vom Text */
}
/* Dekorative Linie hinter dem Titel */
.title-decorated::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: var(--color-border-medium);
    z-index: 0;
}

/* 6.3 Card Basis-Styling */
.card {
    background-color: var(--color-background-card);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-medium);
    border: var(--border-width-thin) solid var(--color-border-light);
    box-shadow: var(--box-shadow-subtle);
    transition: var(--transition-base);
    transition-property: transform, box-shadow, border-color;
    overflow: hidden; /* Sicherstellen, dass innere Elemente Ecken nicht überlappen */
}
/* Variationen */
.card-highlight {
    border-left: var(--border-width-thick) solid var(--color-primary);
    background-color: hsla(var(--color-primary-hue), var(--color-primary-saturation), 95%, 0.5); /* Sehr heller Primärfarb-Ton */
}
.card-subtle {
    background-color: var(--color-background-card-subtle);
    border-color: var(--color-border-light);
    box-shadow: none; /* Weniger prominent */
}
.card-dashed {
    border-style: dashed;
    border-color: var(--color-border-dashed);
    background-color: transparent;
    box-shadow: none;
}

/* 6.4 Card Hover/Focus Effekte */
.card:hover {
   transform: translateY(-5px) scale(1.01);
   box-shadow: var(--box-shadow-medium);
   border-color: var(--color-border-medium); /* Rahmenfarbe leicht ändern */
}
/* Fokus-Styling für Karten, falls sie fokussierbar gemacht werden */
.card:focus-visible {
    outline: var(--border-width-medium) solid var(--color-primary);
    outline-offset: var(--spacing-sm);
    box-shadow: var(--box-shadow-medium);
    transform: translateY(-3px) scale(1.005); /* Leichter Fokus-Effekt */
}

/* 6.5 Section Inner Wrapper */
.section-inner {
    /* Zusätzlicher Wrapper innerhalb von Sections/Cards für komplexere Layouts oder Padding-Kontrolle */
    position: relative;
}

/* ==================================================================
   7. Spezifische Sektions-Styles
================================================================== */

/* 7.1 Intro Section */
.intro-section .lead-paragraph {
    font-size: var(--font-size-lg);
    color: var(--color-secondary); /* Etwas dunklerer Lead-Text */
    margin-bottom: var(--spacing-lg);
}

/* 7.2 Details Section */
.grid-layout-details {
    display: grid;
    /* Mindestens 280px breit, maximal 1fr (gleiche Breite) */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--spacing-xl); /* Größerer Abstand */
}

/* 7.3 Detail Item (Wann & Wo Blöcke) */
.detail-item {
    display: flex;
    flex-direction: column; /* Standard: Icon oben */
    align-items: center; /* Standard: Zentriert */
    text-align: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--color-background-card-subtle);
    border-radius: var(--border-radius-small);
    border: 1px solid var(--color-border-light);
    /* Optional: Leichte Animation beim Erscheinen */
    /* animation: fadeInUp 0.5s ease-out backwards; */
}
.detail-icon-wrapper {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm); /* Abstand nach dem Icon */
}
.detail-text-content {
    /* Container für den Text */
}
.detail-item .detail-title {
    /* H3 in Detail Items */
    font-size: var(--font-size-xl);
    color: var(--color-text-on-light); /* Dunklerer Titel hier */
    margin-bottom: var(--spacing-sm);
}
.detail-item p {
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base); /* Normale Größe für Details */
}
.detail-item .highlight { /* Highlights in Detail Items */
    font-weight: var(--font-weight-semibold);
}
.detail-item .subtle-info {
    margin-top: var(--spacing-sm);
}

/* Bei breiteren Screens nebeneinander */
@media (min-width: 600px) {
    .detail-item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: var(--spacing-lg);
    }
    .detail-icon-wrapper {
        margin-bottom: 0;
        margin-top: var(--spacing-xs); /* Leichte Anpassung oben */
        flex-shrink: 0; /* Icon schrumpft nicht */
    }
}

/* 7.4 RSVP Section */
.rsvp-section .contact-list {
    margin-top: var(--spacing-lg);
}
.rsvp-section .contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg); /* Größere Schrift für Kontakte */
}
.rsvp-section .contact-item strong {
    font-weight: var(--font-weight-medium);
    min-width: 70px; /* Feste Breite für Namen */
    display: inline-block;
}
.rsvp-section .contact-method {
    margin-left: auto; /* Schiebt Methode nach rechts */
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
}
.rsvp-section .rsvp-thanks {
    margin-top: var(--spacing-xl);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-align: center;
}

/* 7.5 Gift Section */
.gift-section {
    text-align: center; /* Geschenk-Hinweis zentrieren */
}
.gift-icon-wrapper {
    color: var(--color-primary-light);
    margin-bottom: var(--spacing-md);
}
.gift-section .icon-gift {
    width: 64px;
    height: 64px;
    display: inline-block;
}

/* 7.6 Placeholder Sections */
.dresscode-section, .timeline-section {
    /* Styling für optionale Sektionen */
}
.timeline-list li {
    margin-bottom: var(--spacing-md);
}
.timeline-list strong {
    display: inline-block;
    width: 100px; /* Feste Breite für Zeitangaben */
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* ==================================================================
   8. Icons (SVG)
================================================================== */

/* 8.1 Generelles Icon Styling */
.icon {
    display: inline-block; /* Standardmäßig Inline */
    width: 1em; /* Breite relativ zur Schriftgröße */
    height: 1em; /* Höhe relativ zur Schriftgröße */
    vertical-align: -0.125em; /* Vertikale Ausrichtung anpassen */
    fill: currentColor; /* Farbe vom Elternelement erben */
    flex-shrink: 0; /* Verhindert Schrumpfen in Flex-Containern */
}

/* 8.2 Spezifische Icon Styles */
/* Icons in Detail-Blöcken (größer) */
.detail-icon-wrapper .icon {
    width: 48px;
    height: 48px;
    display: block; /* Als Blockelement für Layout */
}
/* Inline Icons im Text (kleiner) */
.icon-inline {
    width: 1.2em; /* Etwas größer als die Schrift */
    height: 1.2em;
    margin-right: var(--spacing-xs);
}
/* Icons in Buttons */
.button-icon .icon {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.2em; /* Feinabstimmung */
}

/* ==================================================================
   9. Buttons & Links
================================================================== */

/* 9.1 Button Basis-Styling */
.button {
    display: inline-block; /* Wie Block, aber im Textfluss */
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-condensed);
    text-align: center;
    text-decoration: none; /* Keine Unterstreichung für Buttons */
    color: var(--color-text-on-primary);
    background-color: var(--color-primary);
    border: var(--border-width-thin) solid var(--color-primary);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: var(--transition-base);
    transition-property: background-color, border-color, color, transform, box-shadow;
    -webkit-appearance: none; /* iOS Styling entfernen */
    -moz-appearance: none;
    appearance: none;
}
.button:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-on-primary);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-subtle);
}
.button:focus-visible {
    outline: var(--border-width-medium) solid var(--color-primary-dark);
    outline-offset: 2px;
    text-decoration: none;
    box-shadow: 0 0 0 4px hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness), 0.3);
}
.button:active {
    transform: translateY(0px);
    background-color: var(--color-primary-dark);
    box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.1);
}

/* 9.2 Button Variationen */
.button-secondary {
    color: var(--color-primary);
    background-color: var(--color-background-wrapper);
    border-color: var(--color-primary);
}
.button-secondary:hover {
    color: var(--color-text-on-primary);
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}
.button-small {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-small);
}

/* 9.3 Spezifische Links */
/* Kontakt-Links */
.contact-link {
    font-weight: var(--font-weight-normal);
}
/* Dezente Links (z.B. Back-to-Top) */
.link-discreet {
    color: var(--color-text-subtle);
    text-decoration: none;
}
.link-discreet:hover, .link-discreet:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    background-color: transparent; /* Kein Hintergrund für diese Links */
}

/* ==================================================================
   10. Seitenfuß (Footer)
================================================================== */

/* 10.1 Footer Grund-Styling */
.page-footer {
    background-color: var(--color-background-footer);
    color: var(--color-text-subtle);
    padding: var(--spacing-xl) var(--container-padding-inline);
    margin-top: auto; /* Footer nach unten drücken */
    border-top: var(--border-width-thin) solid var(--color-border-medium);
    text-align: center;
    font-size: var(--font-size-sm);
}

/* 10.2 Footer Inhalt */
.page-footer .footer-content {
    /* Verwendet .container-narrow für Breite */
}
.page-footer p {
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-condensed);
    max-width: none; /* Zeilenlängenbegrenzung im Footer aufheben */
}
.page-footer .footer-greeting {
    font-size: var(--font-size-lg);
    color: var(--color-text-on-light);
}
.page-footer .footer-signature {
    font-style: italic;
    margin-top: var(--spacing-md);
}
.page-footer .footer-names strong {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-on-light);
}
.page-footer .footer-wedding-hint {
    margin-top: var(--spacing-md);
    font-style: italic;
}
.page-footer .footer-copyright {
    margin-top: var(--spacing-lg);
    color: var(--color-secondary-light);
}
.page-footer .footer-copyright small {
    font-size: var(--font-size-xs);
}
.page-footer .footer-tech-note {
    margin-top: var(--spacing-lg);
    font-style: italic;
    color: var(--color-secondary-light);
    font-size: var(--font-size-xs);
}

/* 10.3 Footer Navigation */
.footer-nav {
    margin: var(--spacing-md) 0;
}
.back-to-top-link {
    /* Styling bereits durch .link-discreet */
}
.back-to-top-link span {
    display: inline-block;
    transition: transform var(--transition-duration-fast) var(--transition-timing-function-ease);
}
.back-to-top-link:hover span {
    transform: translateY(-2px);
}

/* 10.4 Footer Divider */
.footer-divider {
    margin: var(--spacing-lg) auto;
    width: 60px;
}
.styled-divider { /* Aufwändigerer Divider */
    height: 4px;
    background-image: linear-gradient(to right, transparent, var(--color-primary-light), transparent);
    border: none;
    width: 100px;
}

/* ==================================================================
   11. Animationen (Beispiel)
================================================================== */
/* Einfache Fade-In Animationen für Header-Elemente */
.animation-fadeInDown { animation: fadeInDown 0.8s var(--transition-timing-function-ease-out) both; }
.animation-fadeInUp { animation: fadeInUp 0.8s var(--transition-timing-function-ease-out) both; }
.animation-delay-1 { animation-delay: 0.2s; }

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==================================================================
   12. Utility-Klassen (Helfer)
================================================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.emphasis-text {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.highlight {
    /* Stärkere Hervorhebung im Text */
    background-color: var(--color-background-highlight);
    padding: 0.1em 0.4em;
    border-radius: var(--border-radius-small);
    color: var(--color-text-on-light);
    font-weight: var(--font-weight-semibold);
    display: inline-block; /* Verhindert seltsames Wrapping */
}

.subtle {
    /* Weniger wichtige Informationen */
    color: var(--color-text-subtle);
    font-size: var(--font-size-sm);
}
.subtle-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
    font-style: italic;
}

/* Beispiel für Abstands-Helfer */
.mt-1 { margin-top: var(--spacing-sm); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mb-2 { margin-bottom: var(--spacing-md); }
/* ... mehr bei Bedarf ... */

/* ==================================================================
   13. Print Styles (@media print)
================================================================== */
@media print {
    /* Anpassungen für den Druck */
    :root {
        /* Farben auf Schwarz/Weiß reduzieren */
        --color-primary: #000000;
        --color-primary-dark: #000000;
        --color-primary-light: #cccccc;
        --color-secondary: #333333;
        --color-text-on-primary: #000000;
        --color-text-on-light: #000000;
        --color-text-subtle: #555555;
        --color-background-body: #ffffff;
        --color-background-wrapper: #ffffff;
        --color-background-card: #ffffff;
        --color-background-card-subtle: #f8f8f8;
        --color-background-footer: #f0f0f0;
        --color-border-light: #dddddd;
        --color-border-medium: #aaaaaa;
        --color-border-dark: #888888;
        --color-shadow-light: transparent;
        --color-shadow-medium: transparent;
        --color-shadow-dark: transparent;
        --font-family-base: "Times New Roman", Times, serif; /* Serif für Druck */
        --font-size-root: 12pt; /* Punkt-Größe für Druck */
        --font-size-base: 1em;
        --line-height-base: 1.4;
    }

    body {
        padding: 1cm; /* Druckränder */
        background-color: var(--color-background-body) !important; /* Wichtig, um Browser-Standard zu überschreiben */
        color: var(--color-text-on-light) !important;
    }

    .page-wrapper {
        box-shadow: none !important;
        border: var(--border-width-thin) solid var(--color-border-medium);
        border-radius: 0 !important;
        margin: 0;
    }

    /* Unnötige Elemente ausblenden */
    .page-header, .page-footer .footer-nav, .footer-tech-note, .map-link-wrapper, .animation-fadeInDown, .animation-fadeInUp {
        display: none !important;
    }

    /* Header/Footer neu gestalten für Druck */
    .page-header {
        background: none !important;
        color: var(--color-text-on-light) !important;
        text-align: left;
        padding: 0 0 var(--spacing-lg) 0;
        border-bottom: var(--border-width-medium) solid var(--color-border-dark);
        text-shadow: none !important;
    }
    .page-footer {
        background: none !important;
        color: var(--color-text-subtle) !important;
        padding: var(--spacing-lg) 0 0 0;
        border-top: var(--border-width-thin) solid var(--color-border-medium);
        margin-top: var(--spacing-xl);
    }
    .footer-divider { display: none; }

    main { padding: var(--spacing-lg) 0; }

    /* Karten ohne Schatten und mit klaren Rändern */
    .card {
        box-shadow: none !important;
        border: var(--border-width-thin) solid var(--color-border-medium) !important;
        padding: var(--spacing-md) !important;
        margin-bottom: var(--spacing-lg) !important;
        border-radius: 0 !important;
        break-inside: avoid; /* Verhindert Umbruch innerhalb einer Karte */
    }
    .card-highlight, .card-subtle, .card-dashed {
        background-color: var(--color-background-card-subtle) !important;
        border-left: var(--border-width-thick) solid var(--color-border-dark) !important;
    }

    /* Links im Druck kenntlich machen */
    a {
        color: var(--color-text-on-light) !important;
        text-decoration: underline !important;
    }
    a[href^="http"]::after,
    a[href^="mailto"]::after {
        content: " (" attr(href) ")"; /* URL/Mail nach dem Link anzeigen */
        font-size: 90%;
        color: var(--color-text-subtle);
    }
    a[href^="#"] { display: none; } /* Interne Links ausblenden */

    h1, h2, h3 { color: var(--color-text-on-light) !important; }
    h2, h3 { page-break-after: avoid; } /* Verhindert Umbruch direkt nach Überschrift */

    .highlight {
        background-color: transparent !important;
        border: 1px dotted var(--color-border-dark);
        padding: 0.05em 0.1em;
    }
} /* Ende @media print */

/* ==================================================================
   14. Responsive Design (@media queries)
   Mobile First Ansatz (Standard = Mobile, Anpassungen für größere Screens)
   wird hier *nicht* strikt verfolgt, da wir von Desktop kamen.
   Stattdessen: Anpassungen für kleinere Screens.
================================================================== */

/* 14.1 Breakpoint Large (ca. 1200px) - Große Desktops */
@media (min-width: 1200px) {
    :root {
        /* Evtl. Schrift etwas vergrößern auf sehr großen Screens */
        /* --font-size-root: 17px; */
    }
    .page-wrapper {
         /* Evtl. noch größere Rundung / Schatten */
         /* --border-radius-large: 24px; */
    }
}

/* 14.2 Breakpoint Medium (ca. 992px) - Tablets & kleine Laptops */
@media (max-width: 991.98px) {
    :root {
        --font-size-root: 15px; /* Schrift leicht verkleinern */
        --spacing-xxl: calc(var(--spacing-unit) * 2.5); /* Größte Abstände reduzieren */
    }
    .page-wrapper {
        max-width: 95%; /* Mehr Breite nutzen */
        margin: var(--spacing-lg) 0;
    }
    .main-content {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    .page-header {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    .content-section {
        margin-bottom: var(--spacing-xl);
    }
    .card {
        padding: var(--spacing-lg);
    }
}

/* 14.3 Breakpoint Small (ca. 768px) - Große Smartphones, kleine Tablets */
@media (max-width: 767.98px) {
    :root {
        --font-size-root: 14px; /* Schrift weiter verkleinern */
        --line-height-base: 1.65; /* Zeilenabstand leicht reduzieren */
        --spacing-xl: calc(var(--spacing-unit) * 1.8);
        --spacing-lg: calc(var(--spacing-unit) * 1.2);
        --border-radius-large: 12px;
        --border-radius-medium: 6px;
    }
    body {
        padding: var(--spacing-md) var(--spacing-sm);
    }
    .page-wrapper {
        border-radius: var(--border-radius-medium);
        margin: var(--spacing-md) 0;
    }
    .main-content {
        padding: var(--spacing-lg);
    }
    .card {
        padding: var(--spacing-md);
    }
    .grid-layout-details {
        grid-template-columns: 1fr; /* Nur noch eine Spalte */
        gap: var(--spacing-lg);
    }
    /* Detail Items wieder untereinander zentriert */
    .detail-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-md);
    }
    .detail-icon-wrapper {
        margin-top: 0;
        margin-bottom: var(--spacing-sm);
    }
    /* RSVP Kontakte untereinander */
    .rsvp-section .contact-item {
        flex-direction: column;
        align-items: flex-start; /* Links ausrichten */
        gap: var(--spacing-xs);
    }
    .rsvp-section .contact-method {
        margin-left: 0; /* Nicht mehr nach rechts schieben */
        padding-left: calc(1.2em + var(--spacing-sm)); /* Einrücken unter das Icon */
    }
    .page-footer {
         padding: var(--spacing-lg) var(--spacing-md);
    }
    /* Hover-Effekte auf Touch ggf. weniger relevant, aber wir lassen sie für Hybrid-Geräte */
    .card:hover {
        /* transform: none; */ /* Optional: Hover-Effekt auf Touch deaktivieren */
        /* box-shadow: var(--box-shadow-subtle); */
    }
}

/* 14.4 Breakpoint Extra Small (ca. 480px) - Kleine Smartphones */
@media (max-width: 479.98px) {
    :root {
        /* Minimale Anpassungen für sehr kleine Screens */
        --container-padding-inline: var(--spacing-md); /* Noch weniger Innenabstand */
    }
    body {
        padding: var(--spacing-sm) 0; /* Kein Außenabstand mehr */
    }
    .page-wrapper {
        border-radius: 0; /* Keine Rundung */
        margin: 0;
        box-shadow: none;
    }
    .main-content {
        padding: var(--spacing-md) var(--container-padding-inline);
    }
    .card {
        padding: var(--spacing-md);
        margin-left: calc(-1 * var(--container-padding-inline)); /* Karte bis zum Rand */
        margin-right: calc(-1 * var(--container-padding-inline));
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    .page-header {
        padding: var(--spacing-lg) var(--container-padding-inline);
        border-radius: 0;
    }
     .page-footer {
         padding: var(--spacing-md) var(--container-padding-inline);
         border-radius: 0;
    }
    /* Titel zentrieren, falls im Detail-Item linksbündig */
    .detail-item {
        align-items: center;
        text-align: center;
    }
    .detail-text-content {
         width: 100%; /* Volle Breite für Text */
    }
}

/* Ende des Stylesheets */