/* =========================================================
   AM:PLIFIED Identity Refresh 2026
   Zweck: neue AMoell/AMbrosia/AM:plified Identität,
   ohne Joomla-Struktur, Menüpunkte oder Beitragslogik zu verändern.
   ========================================================= */

:root {
    --am-bg: #050609;
    --am-bg-soft: #090b12;
    --am-panel: rgba(11, 13, 20, 0.84);
    --am-panel-strong: rgba(12, 14, 22, 0.96);
    --am-line: rgba(184, 151, 255, 0.18);
    --am-line-soft: rgba(255, 255, 255, 0.08);
    --am-text: #f3f0ff;
    --am-muted: rgba(243, 240, 255, 0.66);
    --am-dim: rgba(243, 240, 255, 0.45);
    --am-violet: #b57cff;
    --am-violet-soft: rgba(181, 124, 255, 0.16);
    --am-blue: #6ecbff;
    --am-max: 1480px;
    --am-pad-x: clamp(22px, 5vw, 86px);
    --am-radius: 0;
    --am-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

html { background: var(--am-bg); }

body {
    background:
        radial-gradient(circle at 72% 12%, rgba(181,124,255,0.20), transparent 34rem),
        radial-gradient(circle at 18% 34%, rgba(110,203,255,0.08), transparent 28rem),
        linear-gradient(180deg, #050609 0%, #080910 42%, #050609 100%);
    color: var(--am-text);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.01em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 70%);
}

body > * { position: relative; z-index: 1; }

a { color: var(--am-text); text-decoration: none; transition: color .18s ease, border-color .18s ease, opacity .18s ease; }
a:hover, a:focus { color: var(--am-violet); text-decoration: none; }

img { border-radius: var(--am-radius); }

/* Header / Navigation bleibt funktional, wird aber auf die neue Identität gehoben */
#wrapper2 {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(5, 6, 9, 0.88) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--am-line-soft);
    box-shadow: 0 1px 0 rgba(181,124,255,0.10);
}

#wrapper2 > .inner {
    width: min(var(--am-max), 100%);
    min-height: 86px;
    margin: 0 auto;
    padding: 0 var(--am-pad-x) !important;
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 72px);
    box-sizing: border-box;
}

.amplified-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 220px;
}

.amplified-brand img {
    display: block;
    width: clamp(190px, 18vw, 310px);
    height: auto;
    filter: drop-shadow(0 0 16px rgba(181,124,255,0.10));
}

#block2 { flex: 1 1 auto; }
#block2 > .inner { display: flex; justify-content: flex-end; }

#block2 ul.menu,
#block2 ul.nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(8px, 1.6vw, 28px);
    flex-wrap: wrap;
}

#block2 ul.menu > li,
#block2 ul.nav > li { float: none !important; display: block; }

#block2 ul.menu > li > a,
#block2 ul.menu > li > span.separator,
#block2 ul.nav > li > a,
#block2 ul.nav > li > span.separator {
    margin: 0 !important;
    padding: 10px 0 12px !important;
    color: rgba(255,255,255,0.82) !important;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    font-size: 0.78rem;
    line-height: 1;
    border-bottom: 1px solid transparent;
}

#block2 ul.menu > li.active > a,
#block2 ul.nav > li.active > a,
#block2 ul.menu > li > a:hover,
#block2 ul.nav > li > a:hover {
    color: var(--am-violet) !important;
    border-bottom-color: var(--am-violet);
}

#block2 ul.menu li ul,
#block2 ul.nav li ul,
#block2 li div.floatCK,
#block2 li div.floatck {
    background: var(--am-panel-strong) !important;
    border: 1px solid var(--am-line) !important;
    box-shadow: var(--am-shadow) !important;
}

#block2 ul.menu li li a,
#block2 ul.nav li li a { color: var(--am-text) !important; }
#block2 ul.menu li li:hover > a,
#block2 ul.nav li li:hover > a { background: var(--am-violet-soft) !important; }

/* Layout-Rahmen */
#wrapper > .inner,
#adv_top > .inner,
#adv_bottom > .inner,
#search > .inner,
#footer > .inner {
    width: min(var(--am-max), 100%);
    margin: 0 auto;
    padding-left: var(--am-pad-x) !important;
    padding-right: var(--am-pad-x) !important;
    box-sizing: border-box;
}

#wrapper > .inner { padding-top: clamp(44px, 6vw, 96px) !important; padding-bottom: clamp(54px, 7vw, 110px) !important; }
#adv_top, #adv_bottom { background: transparent !important; border-top: 1px solid var(--am-line-soft); border-bottom: 1px solid var(--am-line-soft); }
#adv_top > .inner, #adv_bottom > .inner { padding-top: 28px !important; padding-bottom: 28px !important; }

#maincontent > .inner {
    max-width: 1260px;
    margin: 0 auto;
}

/* Home / Kategorieblog: vorhandene Beiträge bleiben Joomla-Beiträge */
.com-content-category-blog,
.blog {
    color: var(--am-text);
}

.page-header h1,
.com-content-category-blog h1,
.blog h1,
.item-page h1,
.item-page h2[itemprop="headline"] {
    color: var(--am-text);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: clamp(0.10em, 0.55vw, 0.24em);
    line-height: 1.18;
    margin: 0 0 28px;
}

.com-content-category-blog .page-header,
.blog .page-header {
    border-bottom: 1px solid var(--am-line);
    margin-bottom: 34px;
}

.blog-items,
.items-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.blog-item,
.items-row .item,
.mod-articlesnews__item,
.newsflash-item {
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
    border: 1px solid var(--am-line-soft);
    box-shadow: 0 14px 48px rgba(0,0,0,0.28);
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.blog-item:hover,
.items-row .item:hover,
.mod-articlesnews__item:hover {
    transform: translateY(-3px);
    border-color: var(--am-line);
    background: linear-gradient(180deg, rgba(181,124,255,0.09), rgba(255,255,255,0.018));
}

.blog-item .item-content,
.items-row .item .item-content,
.mod-articlesnews__item,
.newsflash-item { padding: 20px 22px 24px; }

.item-image,
.newsflash-image { margin: 0; }
.item-image img,
.newsflash-image img,
.blog-item img,
.items-row .item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: saturate(.78) contrast(1.08) brightness(.88);
}

.blog-item h2,
.blog-item h3,
.items-row .item h2,
.items-row .item h3,
.newsflash-title {
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    color: var(--am-text);
}

.blog-item h2 a,
.blog-item h3 a,
.items-row .item h2 a,
.items-row .item h3 a,
.newsflash-title a { color: var(--am-text); }

.article-info,
.article-info dd,
.article-info dt,
.createdby,
.published,
.category-name,
.hits {
    color: var(--am-dim) !important;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.readmore .btn,
.btn,
a.btn,
button.btn,
.pagenavigation a {
    background: transparent !important;
    color: var(--am-violet) !important;
    border: 1px solid var(--am-line) !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
    padding: 10px 16px !important;
    box-shadow: none !important;
}

.readmore .btn:hover,
.btn:hover,
a.btn:hover,
button.btn:hover,
.pagenavigation a:hover {
    color: #fff !important;
    border-color: var(--am-violet) !important;
    background: var(--am-violet-soft) !important;
}

/* Artikelansicht: vorhandener Aufbau bleibt, nur visuelle Fassung */
.item-page,
.com-content-article {
    max-width: 1180px;
    margin: 0 auto;
}

.item-page .page-header { border-bottom: 1px solid var(--am-line); margin-bottom: 28px; }
.item-page p { color: rgba(243,240,255,0.78); font-size: 1.02rem; line-height: 1.86; margin: 0 0 1.05em; padding: 0; }
.item-page strong, .item-page b { color: var(--am-text); }
.item-page iframe { max-width: 100%; border: 1px solid var(--am-line-soft); box-shadow: var(--am-shadow); }
.item-page .item-image { margin-bottom: 26px; }
.item-page .item-image img { box-shadow: var(--am-shadow); border: 1px solid var(--am-line-soft); }

.tags .badge,
.tags a,
.com-tags-tag__category .badge {
    background: transparent !important;
    border: 1px solid var(--am-line) !important;
    color: var(--am-violet) !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
}

/* Suche/Formulare */
input[type="text"], input[type="search"], input[type="email"], textarea, select,
.form-control {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--am-line-soft) !important;
    color: var(--am-text) !important;
    border-radius: 0 !important;
}
input::placeholder, textarea::placeholder { color: var(--am-dim) !important; }

/* Footer */
#footer {
    background: rgba(5, 6, 9, 0.98) !important;
    border-top: 1px solid var(--am-line-soft);
    color: var(--am-dim);
}
#footer > .inner { padding-top: 34px !important; padding-bottom: 34px !important; }
#footer a { color: var(--am-muted); }
#footer a:hover { color: var(--am-violet); }

/* Kleine Utility-Klassen für optionale Custom-HTML-Module */
.am-hero {
    min-height: clamp(420px, 48vw, 720px);
    display: grid;
    align-items: center;
    padding: clamp(80px, 9vw, 150px) var(--am-pad-x);
    border-bottom: 1px solid var(--am-line-soft);
    background:
        linear-gradient(90deg, rgba(5,6,9,.96), rgba(5,6,9,.72) 44%, rgba(5,6,9,.30)),
        radial-gradient(circle at 75% 48%, rgba(181,124,255,.24), transparent 30rem),
        linear-gradient(135deg, #06070b, #0d1018);
}
.am-hero__inner { width: min(var(--am-max), 100%); margin: 0 auto; }
.am-kicker { color: var(--am-violet); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; margin-bottom: 22px; }
.am-hero h1 { max-width: 760px; color: var(--am-text); font-size: clamp(2.4rem, 6vw, 5.8rem); font-weight: 300; line-height: .98; letter-spacing: .18em; text-transform: uppercase; }
.am-hero p { max-width: 520px; color: var(--am-muted); font-size: 1rem; margin-top: 22px; }
.am-link { display: inline-flex; gap: 14px; align-items: center; margin-top: 28px; color: var(--am-violet); text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; border: 1px solid var(--am-line); padding: 12px 18px; }

@media (max-width: 1100px) {
    #wrapper2 > .inner { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 18px !important; padding-bottom: 18px !important; }
    #block2 > .inner, #block2 ul.menu, #block2 ul.nav { justify-content: flex-start; }
    .blog-items, .items-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    body { font-size: 15px; }
    .amplified-brand { min-width: 0; }
    .amplified-brand img { width: 210px; }
    #block2 ul.menu, #block2 ul.nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px 18px; }
    .blog-items, .items-row { grid-template-columns: 1fr; }
    .page-header h1, .item-page h1, .item-page h2[itemprop="headline"] { font-size: clamp(1.7rem, 8vw, 2.6rem); }
    .am-hero { min-height: 460px; }
    .am-hero h1 { letter-spacing: .10em; }
}