/*
Theme Name: Crazy Pinguins
Author: EFC Crazy Pinguins
Description: Individuelles responsives Theme für den EFC Crazy Pinguins Bremerhaven.
Version: 0.1.0
*/

:root{
    --cp-blue-dark:#06366f;
    --cp-blue:#0d63b8;
    --cp-blue-light:#4d9bdd;
    --cp-red:#e21b23;
    --cp-red-dark:#b80f16;
    --cp-text:#102b4d;
    --cp-content-width:1280px;
    --cp-radius:10px;
    --cp-shadow:0 5px 16px rgba(5,42,80,.18)
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    color:var(--cp-text);
    background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.95),transparent 28%),linear-gradient(135deg,#e8f6ff,#cfe7f8 45%,#edf8ff);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.55
}

a{
    color:var(--cp-blue-dark)
}

a:hover{
    color:var(--cp-red)
}

img{
    max-width:100%;
    height:auto
}


/* =========================================================
   TOPBAR
   ========================================================= */

.cp-topbar{
    background:linear-gradient(180deg,#0a4e91,#062e61);
    color:#fff;
    font-size:14px
}

.cp-topbar-inner{
    max-width:var(--cp-content-width);
    margin:auto;
    min-height:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 18px;
}

.cp-topbar a{
    color:#fff;
    text-decoration:none
}

.cp-top-links{
    display:flex;
    gap:22px
}

.cp-site-name{
    font-style:italic;
    font-weight:700;
}


/* =========================================================
   WICHTIGE MELDUNG / LAUFBAND
   ========================================================= */

.cp-alert{
    flex:1;
    min-width:0;
    margin-left:30px;
    overflow:hidden;
    white-space:nowrap;
}

.cp-alert-track{
    display:inline-flex;
    align-items:center;
    min-width:max-content;
    animation:cp-alert-scroll 18s linear infinite;
}

.cp-alert-label{
    color:#fff;
    font-weight:800;
    margin-right:10px;
}

.cp-alert-label::before{
    content:"●";
    color:var(--cp-red);
    margin-right:7px;
    font-size:11px;
}

.cp-alert-message{
    color:#fff;
    font-weight:600;
}

@keyframes cp-alert-scroll{
    0%{
        transform:translateX(100%);
    }

    100%{
        transform:translateX(-100%);
    }
}


/* =========================================================
   HEADER
   ========================================================= */

.cp-header{
    background:#ddecf8;
    overflow:hidden;
    box-shadow:0 5px 14px rgba(5,42,80,.18);
    position:relative;
    z-index:2
}

.cp-header-inner{
    max-width:var(--cp-content-width);
    margin:auto
}

.cp-header-logo{
    display:block;
    width:100%;
    height:auto
}

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


/* =========================================================
   NAVIGATION
   ========================================================= */

.cp-nav{
    background:linear-gradient(180deg,#116fc4,#063d79);
    border-bottom:3px solid var(--cp-red);
    box-shadow:0 3px 10px rgba(0,0,0,.18)
}

.cp-nav-inner{
    max-width:var(--cp-content-width);
    margin:auto
}

.cp-nav ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap
}

.cp-nav a{
    display:block;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:700;
    font-size:14px;
    padding:15px 22px;
    border-right:1px solid rgba(255,255,255,.14)
}

.cp-nav a:hover,
.cp-nav .current-menu-item>a,
.cp-nav .current_page_item>a{
    background:linear-gradient(180deg,#f22b32,#bd0f16)
}


/* =========================================================
   MAIN
   ========================================================= */

.cp-main{
    max-width:var(--cp-content-width);
    margin:22px auto;
    padding:0 12px
}

.cp-grid{
    display:grid;
    grid-template-columns:243px minmax(0,1fr) 243px;
    gap:18px;
    align-items:start
}

.cp-box{
    background:linear-gradient(145deg,rgba(255,255,255,.93) 0%,rgba(224,241,252,.82) 100%);
    border:1px solid rgba(255,255,255,.98);
    border-radius:12px;
    box-shadow:0 9px 24px rgba(5,42,80,.20),0 1px 2px rgba(5,42,80,.10),inset 0 1px 0 rgba(255,255,255,1);
    overflow:hidden;
    margin-bottom:18px;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    position:relative
}

.cp-box::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2px;
    background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(126,195,239,.72),rgba(255,255,255,.98));
    opacity:.9;
    pointer-events:none
}

.cp-box-title{
    margin:0;
    padding:13px 16px;
    color:#fff;
    font-size:17px;
    line-height:1.2;
    background:linear-gradient(135deg,#65afe4 0%,#3989c8 42%,#1767aa 100%);
    border-bottom:1px solid rgba(255,255,255,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(5,55,105,.14);
    text-shadow:0 1px 2px rgba(0,35,70,.32);
    position:relative
}

.cp-box-title::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:rgba(255,255,255,.42);
    opacity:.75
}

.cp-box-body{
    padding:16px
}

.cp-menu-list{
    list-style:none;
    margin:0;
    padding:0
}

.cp-menu-list li{
    border-bottom:1px solid rgba(6,54,111,.12)
}

.cp-menu-list li:last-child{
    border-bottom:0
}

.cp-menu-list a{
    display:flex;
    justify-content:space-between;
    padding:10px 4px;
    text-decoration:none;
    font-weight:600
}

.cp-menu-list a::after{
    content:'›';
    font-size:20px;
    line-height:16px
}


/* =========================================================
   BUTTON
   ========================================================= */

.cp-button{
    display:inline-block;
    color:#fff!important;
    background:linear-gradient(180deg,#f22d34,#bd1017);
    border-radius:7px;
    padding:10px 16px;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 2px 6px rgba(120,0,0,.22)
}

.cp-button:hover{
    filter:brightness(1.07);
    color:#fff
}


/* =========================================================
   HERO
   ========================================================= */

.cp-hero{
    background:#fff;
    border-radius:var(--cp-radius);
    overflow:hidden;
    box-shadow:var(--cp-shadow);
    margin-bottom:18px
}

.cp-hero-image{
    aspect-ratio:16/7;
    background:linear-gradient(135deg,#b9d8ee,#eaf7ff);
    overflow:hidden
}

.cp-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover
}

.cp-hero-content{
    padding:20px 22px 24px
}

.cp-meta{
    color:#42698e;
    font-size:13px;
    font-weight:700
}

.cp-hero h1{
    margin:5px 0 8px;
    font-size:clamp(24px,3vw,34px);
    line-height:1.15
}

.cp-hero p{
    font-size:17px;
    margin-top:8px
}


/* =========================================================
   POST LIST
   ========================================================= */

.cp-post-list article{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:15px;
    padding:14px 0;
    border-bottom:1px solid rgba(6,54,111,.14)
}

.cp-post-list article:last-child{
    border-bottom:0
}

.cp-post-thumb{
    width:150px;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:6px;
    overflow:hidden;
}

/* Kategoriebilder vollständig anzeigen */
.cp-post-thumb.cp-category-thumb{
    object-fit:contain;
    border-radius:12px !important;
    -webkit-border-radius:12px !important;
    overflow:hidden !important;
}
.cp-post-thumb.cp-category-thumb{
    object-fit:contain;
}

.cp-post-list h3{
    margin:0 0 3px;
    font-size:18px
}

.cp-post-list p{
    margin:3px 0;
    font-size:14px
}


/* =========================================================
   FOOTER
   ========================================================= */

.cp-footer{
    margin-top:30px;
    border-top:3px solid var(--cp-red);
    background:linear-gradient(rgba(5,47,92,.92),rgba(4,38,76,.96)),#073d75;
    color:#fff
}

.cp-footer-inner{
    max-width:var(--cp-content-width);
    margin:auto;
    padding:28px 18px 18px
}

.cp-footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:28px
}

.cp-footer a{
    color:#fff
}

.cp-footer h3{
    margin-top:0
}

.cp-footer-bottom{
    margin-top:22px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.18);
    text-align:center;
    font-size:13px
}


/* =========================================================
   CONTENT
   ========================================================= */

.entry-content{
    background:rgba(255,255,255,.88);
    padding:24px;
    border-radius:var(--cp-radius);
    box-shadow:var(--cp-shadow)
}

.entry-title{
    font-size:34px;
    line-height:1.2;
    margin-top:0
}

.entry-content{
    font-size:17px;
    line-height:1.65;
    color:#15375d
}

.entry-content img.alignleft{
    float:left;
    margin:4px 22px 14px 0;
    max-width:48%;
    height:auto
}

.entry-content img.alignright{
    float:right;
    margin:4px 0 14px 22px;
    max-width:48%;
    height:auto
}

.entry-content img.aligncenter{
    display:block;
    margin:16px auto;
    max-width:100%;
    height:auto
}

.entry-content::after{
    content:"";
    display:table;
    clear:both
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:800px){

    .entry-content img.alignleft,
    .entry-content img.alignright{
        float:none;
        display:block;
        margin:16px auto;
        max-width:100%
    }
}

@media(max-width:1050px){

    .cp-grid{
        grid-template-columns:230px minmax(0,1fr) 230px;
        gap:12px
    }

    .cp-nav a{
        padding:13px 14px;
        font-size:13px
    }
}

@media(max-width:800px){

    .cp-topbar-inner{
        align-items:flex-start;
        gap:8px;
        flex-direction:column;
        padding:8px 14px
    }

    .cp-alert{
        width:100%;
        margin-left:0;
    }

    .cp-nav ul{
        display:block
    }

    .cp-nav a{
        border-bottom:1px solid rgba(255,255,255,.14)
    }

    .cp-grid{
        grid-template-columns:1fr
    }

    .cp-post-list article{
        grid-template-columns:110px 1fr
    }

    .cp-post-thumb{
        width:110px
    }

    .cp-footer-grid{
        grid-template-columns:1fr 1fr
    }
}

@media(max-width:520px){

    .cp-main{
        margin-top:12px;
        padding:0 8px
    }

    .cp-footer-grid{
        grid-template-columns:1fr
    }

    .cp-post-list article{
        grid-template-columns:1fr
    }

    .cp-post-thumb{
        width:100%
    }

    .cp-hero-content{
        padding:16px
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .cp-alert-track{
        animation:none;
        transform:none;
    }
}