/**
 * Base Template Styles - Shared across all templates
 * Diese Datei enthält alle gemeinsamen Styles, die von allen Templates benötigt werden.
 * Layer-Struktur: base.css → template/style.css
 */

/* =============================================================================
   Global Word-Wrap – verhindert horizontalen Overflow bei langen Wörtern/URLs
   (kein overflow-x: hidden auf html/body, sonst brechen die sticky Header)
   ============================================================================= */

body, h1, h2, h3, h4, h5, h6, p, li, a, td, th, blockquote, figcaption, label, button, dt, dd, summary {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

/* Inline-Code und Pre nicht hyphenieren, aber trotzdem umbrechen */
code, pre, kbd, samp {
    overflow-wrap: anywhere;
    hyphens: manual;
}

/* Bilder/Medien nie über den Container hinaus */
img, video, iframe, svg {
    max-width: 100%;
    height: auto;
}

/* =============================================================================
   Mobile Navigation - Gemeinsame Basis
   ============================================================================= */

.nav-menu {
    position: fixed;
    top: 73px;
    right: 0;
    width: 100%;
    height: calc(100vh - 73px);
    overflow-y: auto;
    padding: 0;
    z-index: 40;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.nav-menu.active {
    transform: translateX(0);
}

.nav-menu > li {
    width: 100%;
    display: block;
    text-align: center;
}

.nav-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Komfortables Touch-Target im Mobile-Menü (>= ~44px). */
    padding: 0.85rem 1rem;
    transition: all 0.2s;
}

/* Submenü im Mobile - Basis-Verhalten */
.nav-menu .group ul {
    position: static !important;
    width: 100%;
    padding: 0;
    margin: 0;
    max-height: 0 !important;
    overflow: hidden;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
}

.nav-menu .group.submenu-open ul {
    max-height: 500px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0s;
}

.nav-menu .group ul li {
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: center;
}

/* Submenü-Einträge im Mobile ebenfalls zentrieren (sonst links-bündig
   unter den zentrierten Hauptpunkten – sieht inkonsistent aus). */
.nav-menu .group ul li a {
    justify-content: center;
    text-align: center;
}

/* Chevron Icon für Submenü */
.nav-menu .group > a svg {
    opacity: 0.5;
}

/* CTA im Mobile-Menü: dezenter statt wuchtig.
   Im Desktop-Menü (.nav-menu-desktop) greift diese Regel nicht – dort
   behält der CTA seinen Button-Look. Hier flacher (kein Schatten),
   zentriert und mit etwas Abstand, damit er nicht plump die volle
   Zeilenbreite als schwerer Block füllt. */
.nav-menu .nav-cta {
    display: inline-flex;
    width: auto;
    justify-content: center;
    box-shadow: none !important;
    margin: 0.4rem 0;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

/* CTA im Mobile-Menü behält weiße Schrift. Die generische Regel der
   Templates (.nav-menu > li > a { color: #1f2937 }) hat höhere Spezifität
   als das Tailwind-.text-white und würde die CTA-Schrift sonst dunkel
   färben – schwarz auf dunklem Button, unlesbar. */
.nav-menu > li > a.nav-cta {
    color: #fff;
}

/* CTA-Hover im Mobile-Menü: farbigen Grund erzwingen. Ohne diese Regel
   überschreibt der helle Listen-Hover der Templates (.nav-menu > li > a:hover)
   den Button-Hintergrund – die weiße CTA-Schrift wird dann unlesbar hell.
   Höhere Spezifität (a.nav-cta) sticht die generische Hover-Regel. */
.nav-menu > li > a.nav-cta:hover,
.nav-menu > li > a.nav-cta:active {
    background-color: var(--primary-700, #1d4ed8);
    color: #fff;
    padding-left: 1rem;
}

/* =============================================================================
   Desktop-Submenü (Dropdown) - Gemeinsam
   Breiter und mit prägnanterem Hover. Greift für alle Templates über die
   per :root gesetzten Primary-Variablen (template-helpers.php), bleibt also
   farblich template-korrekt. Nur Desktop (.nav-menu-desktop).
   ============================================================================= */

/* Dropdown-Breite automatisch: mindestens 15rem, sonst so breit wie der
   längste Sub-Eintrag (überschreibt das fixe w-48 aus dem Markup, damit
   längere Bezeichnungen nicht umbrechen) */
.nav-menu-desktop .group > ul {
    min-width: 15rem;
    width: max-content;
}

/* Submenü-Einträge: volle Breite, kantig (kein Eck-Radius – wirkt im
   Dropdown aufgeräumter als gerundete Hover-Flächen) + weicher Übergang */
.nav-menu-desktop .group ul a {
    width: 100%;
    border-radius: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Prägnanter Hover: getönte Primary-Fläche + Textfarbe. Kein Padding-Slide –
   der würde die max-content-Breite des Dropdowns beim Hovern verändern. */
.nav-menu-desktop .group ul a:hover {
    background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.12);
    color: var(--primary-700, #1d4ed8);
}

/* =============================================================================
   Accordion Styles - Gemeinsam
   ============================================================================= */

.accordion-item .accordion-content {
    transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/* =============================================================================
   Kontaktformular - Select Styling (Basis)
   ============================================================================= */

.contact-form select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.25rem 1.25rem !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

/* =============================================================================
   Quill Editor Content Styles - Checklisten
   ============================================================================= */

ol[data-checked="true"],
ol[data-checked="false"],
ul[data-checked="true"],
ul[data-checked="false"] {
    pointer-events: none;
}

ol[data-checked="true"] > li *,
ol[data-checked="false"] > li *,
ul[data-checked="true"] > li *,
ul[data-checked="false"] > li * {
    pointer-events: all;
}

ol[data-checked="true"] > li::before,
ol[data-checked="false"] > li::before,
ul[data-checked="true"] > li::before,
ul[data-checked="false"] > li::before {
    color: #777;
    cursor: pointer;
    pointer-events: all;
}

ul[data-checked="true"],
ul[data-checked="false"] {
    list-style: none;
    padding-left: 0;
}

ul[data-checked="true"] > li,
ul[data-checked="false"] > li {
    padding-left: 1.5em;
    position: relative;
}

ul[data-checked="true"] > li::before,
ul[data-checked="false"] > li::before {
    content: '\2610';
    position: absolute;
    left: 0;
}

ul[data-checked="true"] > li::before {
    content: '\2611';
}

/* =============================================================================
   Prose Content - Absätze und Zeilenumbrüche
   ============================================================================= */

/* Absätze (P) bekommen sichtbaren Abstand */
.prose p,
div[class*="prose"] p {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Erster Absatz ohne oberen Abstand */
.prose > p:first-child,
div[class*="prose"] > p:first-child {
    margin-top: 0;
}

/* Letzter Absatz ohne unteren Abstand */
.prose > p:last-child,
div[class*="prose"] > p:last-child {
    margin-bottom: 0;
}

/* BR ist nur ein Zeilenumbruch, kein Absatz */
.prose br,
div[class*="prose"] br {
    display: block;
    content: "";
    margin: 0;
}

/* Leere Absätze vom Quill-Editor (nur <br> drin) als halben Abstand */
.prose p:empty,
div[class*="prose"] p:empty,
.prose p > br:only-child,
div[class*="prose"] p > br:only-child {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* =============================================================================
   Prose Content - Textausrichtung (Quill-Editor Klassen)
   ============================================================================= */

.ql-align-center {
    text-align: center;
}

.ql-align-right {
    text-align: right;
}

.ql-align-justify {
    text-align: justify;
}

/* =============================================================================
   Prose Content - Standard Listen für Text-Widgets
   ============================================================================= */

.prose ul,
.prose ol,
div[class*="prose"] ul,
div[class*="prose"] ol {
    padding-left: 1.5em !important;
    margin: 1em 0 !important;
}

.prose ul,
div[class*="prose"] ul {
    list-style-type: disc !important;
}

.prose ol,
div[class*="prose"] ol {
    list-style-type: decimal !important;
}

.prose li,
div[class*="prose"] li {
    margin: 0.5em 0 !important;
    display: list-item !important;
}

/* Verschachtelte Listen */
.prose ul ul,
.prose ol ul,
div[class*="prose"] ul ul,
div[class*="prose"] ol ul {
    list-style-type: circle !important;
}

.prose ul ul ul,
.prose ol ul ul,
div[class*="prose"] ul ul ul,
div[class*="prose"] ol ul ul {
    list-style-type: square !important;
}

.prose ol ol,
.prose ul ol,
div[class*="prose"] ol ol,
div[class*="prose"] ul ol {
    list-style-type: lower-alpha !important;
}

.prose ol ol ol,
.prose ul ol ol,
div[class*="prose"] ol ol ol,
div[class*="prose"] ul ol ol {
    list-style-type: lower-roman !important;
}

/* =============================================================================
   Prose Invert - Heller Text auf dunklem Hintergrund
   ============================================================================= */

.prose-invert,
.prose-invert p,
.prose-invert li,
.prose-invert strong,
.prose-invert em,
.prose-invert h1,
.prose-invert h2,
.prose-invert h3,
.prose-invert h4 {
    color: rgba(255, 255, 255, 0.95) !important;
}

.prose-invert strong {
    color: #fff !important;
}

/* =============================================================================
   Utility Classes - Gemeinsame Helfer
   ============================================================================= */

.container {
    max-width: 1200px;
}

/* Bilder - Basis-Styling */
img {
    border-radius: 8px;
}

/* =============================================================================
   Footer - Heading-Abstände global überschreiben
   ============================================================================= */

footer h3 {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
}

/* =============================================================================
   Links - Globales Styling
   ============================================================================= */

/* Standard-Links in Fließtext */
.prose a,
div[class*="prose"] a,
p a,
li a,
td a,
.text-content a {
    color: var(--primary-600, #2563eb);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

.prose a:hover,
div[class*="prose"] a:hover,
p a:hover,
li a:hover,
td a:hover,
.text-content a:hover {
    color: var(--primary-700, #1d4ed8);
    text-decoration: none;
}

/* Links in Navigationen, Buttons und Footer explizit ausschließen */
nav a,
.nav-menu a,
.btn a,
button a,
[role="button"] a {
    color: inherit;
    text-decoration: none;
}

nav a:hover,
.nav-menu a:hover {
    color: inherit;
    text-decoration: none;
}

/* Footer-Links - weiss mit Hover-Underline */
footer a {
    color: inherit !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    font-size: inherit !important;
    font-family: inherit !important;
}

footer a:hover {
    color: inherit !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}