/* ======= CSS RESET & NORMALIZATION ======= */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,
canvas,details,embed,figure,figcaption,footer,
header,hgroup,menu,nav,output,ruby,section,summary,
time,mark,audio,video {
    margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block;
}
body {
    line-height:1.5;
    background:#F9FBE7;
    color:#22223B;
    font-family:'Open Sans',Arial,sans-serif;
    min-height:100vh;
    font-size:16px;
    letter-spacing:0.01em;
    -webkit-font-smoothing:antialiased;
}
*,*:before,*:after { box-sizing:border-box; }
ul,ol,dl { margin-bottom:16px; }
section { margin-bottom:60px; }
img { max-width:100%; display:block; height:auto; }
a { color:#00ACC1; text-decoration:none; transition:color 0.2s; }
a:hover, a:focus { color:#1A237E; }
button, input[type="button"], input[type="submit"] {
    font-family:'Montserrat','Open Sans',Arial,sans-serif; font-weight:600; cursor:pointer;
}
.container {
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    flex-direction:column;
    gap:0;
}
.content-wrapper {
    width:100%;
    padding:40px 20px;
    background:rgba(255,255,255,0.93);
    border-radius:24px;
    box-shadow:0 6px 28px 0 rgba(0,60,120,0.07);
    margin-bottom:24px;
    position:relative;
}

/* ======= BRAND TYPOGRAPHY ======= */
h1,h2,h3,h4,h5,h6 {
    font-family:'Montserrat',Arial,sans-serif;
    font-weight:800;
    line-height:1.15;
    color:#1A237E;
}
h1 { font-size:2.2rem; margin-bottom:20px; letter-spacing:0.01em; }
h2 { font-size:1.65rem; margin-bottom:16px; }
h3 { font-size:1.25rem; margin-bottom:12px; color:#00ACC1; }
h4, h5, h6 { font-size:1rem; }
p, li, ul, ol, dl, dd, dt, blockquote, cite {
    font-family:'Open Sans',Arial,sans-serif;
    font-size:1rem;
    color:#2a2c3b;
    line-height:1.675;
    margin-bottom:14px;
}
dt {
    font-family:'Montserrat',Arial,sans-serif;
    font-weight:700;
    color:#1A237E;
    padding-top:10px;
}
dd { margin-left:20px; color:#003342; }
blockquote {
    font-family:'Montserrat',Arial,sans-serif;
    font-size:1.1rem;
    font-weight:500;
    color:#333950;
    padding-left:20px;
    border-left:5px solid #00ACC1;
    margin-bottom:8px;
    background:rgba(0,172,193,0.045);
}
cite { display:block; font-style:italic; color:#1A237E; font-family:'Montserrat',Arial,sans-serif; margin-top:2px; }
strong { color:#1A237E; font-weight:700; }

/* ============ GENERAL LAYOUTS ============ */
.section {
    margin-bottom:60px;
    padding:40px 20px;
}
.card-container {
    display:flex;
    flex-wrap:wrap;
    gap:24px;
}
.card {
    margin-bottom:20px;
    position:relative;
    background:#fff;
    border-radius:16px;
    box-shadow:0 3px 16px 0 rgba(0,60,120,0.11);
    transition:box-shadow 0.18s, transform 0.18s;
}
.card:hover {
    box-shadow:0 8px 36px 0 rgba(26,35,126,0.19);
    transform:translateY(-3px) scale(1.02);
    z-index:2;
}
.content-grid {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:space-between;
}
.text-image-section {
    display:flex;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}
.testimonial-card {
    display:flex;
    align-items:center;
    gap:20px;
    padding:20px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 8px 36px 0 rgba(26,35,126,0.15);
    margin-bottom:24px;
    min-width:0;
    transition:box-shadow 0.15s, transform 0.18s;
}
.testimonial-card:hover { box-shadow:0 16px 64px 0 rgba(26,35,126,0.21); transform:translateY(-2px) scale(1.015); }
.feature-item {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
    margin-bottom:20px;
}

/* ====== INDEX & LANDING FEATURES ====== */
.features-grid {
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    justify-content:space-between;
}
.features-grid > div {
    background:linear-gradient(120deg,#F9FBE7 70%,#c1eaff 100%);
    border-radius:18px;
    box-shadow:0 4px 14px 0 rgba(0,60,120,0.09);
    padding:26px 18px;
    flex:1 1 260px;
    min-width:260px;
    max-width:calc(33% - 32px);
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:box-shadow 0.15s, background 0.18s;
    margin-bottom:0;
}
.features-grid img {
    width:54px; height:54px; margin-bottom:16px;
    filter:drop-shadow(0 2px 12px #e2f7fd);
}
.features-grid h3 { font-size:1.18rem; margin-bottom:9px; color:#1A237E; }
.features-grid p { font-size:0.97rem; color:#22223B; text-align:center; }
.features-grid > div:hover {
    box-shadow:0 12px 36px 0 rgba(26,35,126,0.13);
    background:linear-gradient(135deg,#fbe7ff 70%,#c1eaff 100%);
    z-index:1;
}

/* ============ BUTTONS ============ */
.btn-primary {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#1A237E;
    color:#ffffff;
    font-family:'Montserrat',Arial,sans-serif;
    font-weight:700;
    font-size:1.06rem;
    padding:14px 26px;
    border:none;
    border-radius:28px;
    box-shadow:0 3px 12px rgba(26,35,126,0.08);
    outline:none;
    transition:background 0.18s, color 0.18s,box-shadow 0.17s,transform 0.14s;
    text-decoration:none;
    margin-top:14px;
    position:relative;
    cursor:pointer;
    letter-spacing:0.02em;
}
.btn-primary:hover, .btn-primary:focus {
    background:#00ACC1;
    color:#1A237E;
    box-shadow:0 8px 36px 0 rgba(0,172,193,0.16);
    transform:translateY(-1px) scale(1.02);
}

/* ===== ALERT STYLES ====== */
.alert {
    background:#fff6ee;
    color:#af4f12;
    border-left:8px solid #ffb216;
    padding:22px 30px;
    border-radius:18px;
    box-shadow:0 4px 20px 0 rgba(172,88,0,0.08);
    margin-bottom:24px;
}
.alert h2 { margin-bottom:8px; color:#af4f12; }

/* ============= HEADER & NAVIGATION ============= */
header {
    background:#1A237E;
    color:#fff;
    box-shadow:0 3px 18px 0 rgba(26,35,126,0.09);
    padding:0 0 0 0;
    position:relative;
    z-index:51;
}
header .container {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    min-height:82px;
    gap:0;
}
header a {
    color:#fff;
    font-family:'Montserrat',Arial,sans-serif;
    margin-right:20px;
    font-weight:600;
    font-size:1rem;
    transition:color 0.19s;
}
header nav {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
}
header nav a:last-child { margin-right:0; }
header .btn-primary {
    background:#fff;
    color:#1A237E;
    margin-left:30px;
    margin-top:0;
    font-size:1rem;
    padding:12px 16px;
    box-shadow:0 3px 18px 0 rgba(26,35,126,0.11);
}
header .btn-primary:hover, header .btn-primary:focus {
    background:#00ACC1;
    color:#fff;
}
header img[alt="WLAN Kompass"] {
    height:42px;
    margin-right:34px;
    filter:drop-shadow(0 2px 20px #2af0e84a);
}

/* ======= MOBILE NAVIGATION ======= */
.mobile-menu-toggle {
    display:none;
    background:transparent;
    border:none;
    color:#fff;
    font-size:2.2rem;
    line-height:1;
    padding:8px 12px;
    z-index:102;
    cursor:pointer;
    border-radius:10px;
    margin-left:18px;
}
.mobile-menu {
    display:none;
    position:fixed;
    top:0; left:0; width:100vw; height:100vh;
    background:rgba(26,35,126,0.97);
    z-index:1500;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    box-shadow:0 2px 32px 0 rgba(20,32,90,0.19);
    transform:translateX(100%);
    transition:transform 0.37s cubic-bezier(.5,1.7,.51,.84);
}
.mobile-menu.active {
    display:flex;
    transform:translateX(0);
}
.mobile-menu-close {
    background:transparent;
    color:#fff;
    font-size:2.2rem;
    border:none;
    align-self:flex-end;
    margin:28px 34px 0 0;
    cursor:pointer;
    outline:none;
}
.mobile-nav {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    margin:50px auto;
    width:80vw;
}
.mobile-nav a {
    color:#fff;
    font-family:'Montserrat',Arial,sans-serif;
    font-size:1.2rem;
    font-weight:700;
    padding:12px 0 10px 0;
    text-align:left;
    width:100%;
    border-radius:6px;
    transition:background 0.16s;
}
.mobile-nav a:active, .mobile-nav a:focus, .mobile-nav a:hover {
    background:rgba(0,172,193,0.18);
    color:#F9FBE7;
}

/* ====== FOOTER ====== */
footer {
    background:#1A237E;
    color:#fff;
    padding:38px 0 0 0;
    font-size:1rem;
}
footer .container {
    flex-direction:column;
    gap:0;
}
footer .content-wrapper {
    background:none;
    border-radius:0;
    box-shadow:none;
    padding:0 20px;
    margin-bottom:0;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:32px;
}
footer nav {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:18px;
    margin-top:0;
}
footer nav a {
    color:#fff;
    font-family:'Montserrat',Arial,sans-serif;
    font-size:1rem;
    font-weight:600;
    opacity:.89;
    transition:color 0.18s, opacity 0.15s;
    margin-right:0;
}
footer nav a:hover,footer nav a:focus { color:#00ACC1; opacity:1; }
footer .brand-info {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:0;
}
footer .brand-info img {
    height:38px;
    margin-bottom:12px;
}
footer .brand-info p { color:#F9FBE7; font-size:1rem; margin-bottom:0; }
footer .footer-contact {
    display:flex;
    flex-direction:column;
    gap:7px;
    color:#f1f1f8;
}
footer .footer-contact a { color:#00ACC1; }
footer p { color:#fff; font-size:1rem; margin-bottom:9px; }
footer img[alt^="Adresse"],footer img[alt^="Telefon"],footer img[alt^="E-Mail"],footer img[alt^="Öffnungszeiten"]{
    width:20px; height:20px; margin-right:7px; vertical-align:middle;
}

/* ============ COOKIE CONSENT ============ */
.cookie-banner {
    position:fixed;
    bottom:0; left:0; width:100vw;
    background:#fff;
    box-shadow:0 -6px 32px 0 rgba(26,35,126,0.07);
    border-top:5px solid #1A237E;
    z-index:5001;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:24px 28px 24px 22px;
    font-size:1rem;
    font-family:'Open Sans',Arial,sans-serif;
    opacity:1;
    transition:transform 0.32s cubic-bezier(.5,1.8,.52,.85),opacity 0.22s;
}
.cookie-banner.hide {
    opacity:0; pointer-events:none;
    transform:translateY(100%);
}
.cookie-banner__text{
    color:#1A237E; font-size:1rem; margin-right:18px;
    font-family:'Open Sans',Arial,sans-serif;
}
.cookie-banner__actions {
    display:flex;
    flex-direction:row;
    gap:15px;
    align-items:center;
}
.cookie-btn {
    background:#1A237E;
    color:#FFF;
    border:none;
    border-radius:16px;
    font-family:'Montserrat',Arial,sans-serif;
    font-size:1rem;
    font-weight:600;
    padding:9px 18px;
    margin:0;
    cursor:pointer;
    box-shadow:0 2px 8px 0 rgba(26,35,126,0.08);
    transition:background 0.19s,color 0.15s,transform 0.14s;
    outline:none;
}
.cookie-btn:hover, .cookie-btn:focus {
    background:#00ACC1; color:#fff; transform:translateY(-2px) scale(1.04);
}
.cookie-btn.cookie-settings { background:#00ACC1; color:#fff; }
.cookie-btn.cookie-settings:hover, .cookie-btn.cookie-settings:focus { background:#1A237E; color:#FFF; }

/* ===== COOKIE MODAL ===== */
.cookie-modal {
    display:none;
    position:fixed;
    top:0; left:0; width:100vw; height:100vh;
    z-index:5200;
    background:rgba(26,35,126,0.68);
    justify-content:center;
    align-items:center;
    transition:opacity 0.21s;
}
.cookie-modal.active {
    display:flex;
}
.cookie-modal__box {
    background:#fff;
    border-radius:28px;
    box-shadow:0 12px 54px rgba(26,35,126,0.22);
    max-width:97vw;
    width:360px;
    padding:38px 28px 26px 28px;
    display:flex;
    flex-direction:column;
    gap:18px;
    align-items:flex-start;
    animation:cookie-modal-pop 0.37s cubic-bezier(.62,.04,.34,1.48);
}
@keyframes cookie-modal-pop {
    from { transform:scale(0.88) translateY(38px); opacity:0; }
    to   { transform:scale(1) translateY(0); opacity:1; }
}
.cookie-modal__header { font-family:'Montserrat',Arial,sans-serif; font-size:1.25rem; color:#1A237E; font-weight:700;
    margin-bottom:6px; }
.cookie-modal__close {
    background:none; border:none;
    color:#00ACC1; font-size:1.5rem; position:absolute; top:18px; right:22px; cursor:pointer; z-index:12;
}
.cookie-category {
    display:flex; align-items:center; gap:18px;
    margin-bottom:14px;
}
.cookie-category label {
    font-family:'Open Sans',Arial,sans-serif;
    font-size:1rem; color:#003342; font-weight:600;
}
.toggle-switch {
    position:relative; width:42px; height:22px;
}
.toggle-switch input {
    opacity:0;
    width:0; height:0;
}
.toggle-slider {
    position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
    background:#e4e7f2; border-radius:13px;
    transition:.21s;
}
.toggle-slider:before {
    position:absolute; content:""; left:3px; top:3px; width:16px; height:16px;
    background:#1A237E; border-radius:50%; transition:.22s;
}
.toggle-switch input:checked + .toggle-slider { background:#00ACC1; }
.toggle-switch input:checked + .toggle-slider:before { background:#FFF; transform:translateX(20px); }
.cookie-modal__footer {
    display:flex; gap:12px; width:100%; margin-top:18px;
    justify-content:flex-end;
}

/* =========== TABLES, LISTS & FORMS =========== */
ul, ol {
    padding-left:22px;
    margin-bottom:16px;
}
li {
    margin-bottom:8px; color:#22223B;
}
dt { font-size:1.07rem; }
dd { margin-bottom:12px; }
form input, form textarea {
    display:block; width:100%; padding:10px 10px; border-radius:8px; border:1.5px solid #cfd8dc; margin-bottom:18px; font-size:1rem;
}
form input:focus,form textarea:focus {
    border-color:#00ACC1; outline:none;
}
form label { font-family:'Montserrat',Arial,sans-serif; color:#1A237E; font-weight:600; margin-bottom:5px; }

/* ====== MISC HELPERS ====== */
.hide { display:none!important; visibility:hidden!important; }

/* ====== MEDIA QUERIES RESPONSIVE ====== */
@media (max-width: 1200px) {
    .features-grid > div { max-width:calc(50% - 24px); }
    footer .content-wrapper { gap:20px; }
}
@media (max-width: 900px) {
    .features-grid > div { max-width:100%; min-width:180px; }
    .content-wrapper { padding:32px 8px; }
}
@media (max-width: 768px) {
    .container { padding:0 10px; }
    .content-wrapper { padding:24px 6px; }
    .features-grid { gap:18px; }
    .features-grid > div { padding:16px 10px; }
    .section { padding:24px 6px; }
    header nav { display:none; }
    .mobile-menu-toggle { display:inline-block; }
    header .container { min-height:64px; flex-direction:row; }
    header img[alt="WLAN Kompass"] { height:32px; margin-right:18px; }
    footer .content-wrapper { flex-direction:column; gap:16px; align-items:flex-start; }
}
@media (max-width: 600px) {
    h1 { font-size:1.38rem; }
    h2 { font-size:1.1rem; }
    .features-grid { flex-direction:column; gap:15px; }
    .features-grid > div {
        min-width:120px; max-width:100%;
    }
    .testimonial-card { flex-direction:column; gap:12px; padding:14px; }
    .section { margin-bottom:36px; padding:14px 1px; }
    .card-container, .content-grid { gap:15px; }
    .text-image-section { flex-direction:column; gap:16px; }
}

/* ====== MICRO-INTERACTIONS ===== */
.card, .features-grid > div, .testimonial-card, .btn-primary, .cookie-btn {
    transition:box-shadow 0.19s, transform 0.16s, background 0.15s, color 0.15s;
}

/* ==== DECORATIVE ELEMENTS (Artistic Touch) ==== */
.section:nth-child(odd) .content-wrapper {
    background:linear-gradient(135deg,#f9fbe7 87%,#b5dcfa 100%);
}
.section:nth-child(even) .content-wrapper {
    background:linear-gradient(120deg,#fff 87%,#d8fff5 100%);
}
.features-grid > div::after {
    content:'';
    display:block;
    position:absolute;
    right:-22px; top:-18px;
    width:54px; height:54px;
    background:rgba(0,172,193,0.07);
    border-radius:50%;
    z-index:1;
    pointer-events:none;
}
.features-grid > div:hover::after {
    background:rgba(26,35,126, 0.09);
    transition:background 0.2s;
}

/* ===== ARTISTIC FONTS FOR ARTISTIC FEEL ===== */
h1,h2,h3,h4,h5,.btn-primary,.cookie-btn {
    font-family:'Montserrat',Arial,sans-serif;
    letter-spacing:0.02em;
}

/* ========== ACCESSIBILITY & CONTRAST ========= */
.testimonial-card, .features-grid > div, .card, .alert {
    color:#22223B;
    background:#fff;
}
.testimonial-card blockquote,
.testimonial-card cite {
    color:#1A237E;
    font-weight:600;
}

/* ====== Z-Index Management ====== */
header, .mobile-menu, .cookie-banner, .cookie-modal { z-index:1000; }
.mobile-menu { z-index:1500; }
.cookie-modal { z-index:5200; }

/* ======= END OF STYLE.CSS ======= */