@import "libs/sanitize.css";
@import "libs/highlight.css";
@import "colors.css";
@import "variables.css";
@import "fonts/Fixel/font-fixel.css";
@import "fonts/BootstrapIcons/font-bootstrap-icons.css";
@import "header.css";
@import "footer.css";


:root {
    --font-stack-default: 'FixelVariable', sans-serif;
    --font-stack-headings: 'FixelVariable', sans-serif;

    /* Deine Hauptfarbe */
    --primary-hue: 212;
    --primary-sat: 100%;
    --primary-light: 27%;
    
    /* Berechnete Farben basierend auf der Hauptfarbe */
    --color-primary: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light));
    --color-primary-hover: hsl(var(--primary-hue), var(--primary-sat), 35%); /* Etwas heller */
    --color-primary-active: hsl(var(--primary-hue), var(--primary-sat), 20%); /* Etwas dunkler */
    --color-shadow: hsla(var(--primary-hue), var(--primary-sat), 20%, 0.4);
}

body {
    min-height: 100vh;
    background-color: var(--color-bg-light);
    font-family: var(--font-stack-default);
    font-feature-settings: "ss01" 0;
    -webkit-font-smoothing: antialiased;
    color: var(--color-text);
    font-weight: 400;
    font-variation-settings: "wght" 400;
    hyphens: auto;
}

.with-icon {
    &:before {
        content: var(--icon);
        font-family: bootstrap-icons;
        display: inline-block;
        vertical-align: -.1em;
        margin-right: .33rem;
    }

    &.box {
        --icon: var(--icon-box);
    }

    &.calendar {
        --icon: var(--icon-calendar);
    }

    &.close {
        --icon: var(--icon-x);
    }

    &.external {
        --icon: var(--icon-external);
    }

    &.hamburger {
        --icon: var(--icon-list);
    }

    &.home {
        --icon: var(--icon-house);
    }

    &.hourglass {
        --icon: var(--icon-hourglass-split);
    }

    &.info {
        --icon: var(--icon-info-circle);
    }

    &.embedding {
        --icon: var(--icon-code-slash);
    }
}

#site-content {
    /* display: grid; */
    /* grid-template-rows: 1fr auto; */
    /* grid-template-columns: auto; */
}

#site-main {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;

    overflow-y: scroll;
}



#site-main p {
    text-align: justify;
    word-wrap: break-word;
}

a {
    color: var(--color-link-dark);
}

a:link {
    text-decoration: none;
}

.unstyled-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* COntent */
.content {
    max-width: 55rem;
    /* background-color: var(--color-bg-dark); */
    /* color: white; */
    padding: 0rem 1.5rem;
}

.content-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    > h1 {
        text-align: center;
        font-size: 3rem;
        font-weight: 600;
        font-variation-settings: "wght" 600;
        margin: 1rem 0; 
    }

    > h3 {
        text-align: center;
        max-width: 45rem;
        font-size: 1rem;
        margin: 1rem 0 1rem 0;
    }

    > img {
        position: relative;
        width: 100%;
        height: 15rem;
        object-fit: cover;
        /* box-shadow: 0px 2px 11px 3px hsla(0, 0%, 0%, 0.5); */
    }
}

.frontpage-content {
    max-width: 90rem;
    /* background-color: var(--color-bg-dark); */
    /* color: white; */
    padding: 0rem 1.5rem;
}

.frontpage-content > .areas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 3rem;

    @media (max-width: 1250px) {
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
    }
    
    @media (max-width: 795px) {
        grid-template-columns: 1fr;
    }

    .area {

        h3 {
            font-weight: 700;
            font-variation-settings: "wght" 700;
            margin-bottom: 0.5rem;
        }

        p {
            margin-top: 0;
            line-height: 1.4;
            font-size: 0.9rem;
            font-weight: 400;
            font-variation-settings: "wght" 400;
        }
    }
}

.news {
    max-width: 50rem;
    padding: 0 0.5rem;

    > h1 {
        padding-left: 1rem;
    }
}

.post-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .post-item {
        background-color: white;
        border: 1px solid black;
        padding: 1rem;
        border-radius: 5px;

        h2 {
            margin-top: 0;
        }
    }
}

.metadata-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.with-icon:before, .metadata:before {
    content: var(--icon);
    font-family: bootstrap-icons;
    display: inline-block;
    vertical-align: -0.1em;
    margin-right: 0.33rem;
}
.with-icon.box, .box.metadata {
    --icon: var(--icon-box);
}
.with-icon.calendar, .calendar.metadata {
    --icon: var(--icon-calendar);
}
.with-icon.close, .close.metadata {
    --icon: var(--icon-x);
}
.with-icon.external, .external.metadata {
    --icon: var(--icon-external);
}
.with-icon.hamburger, .hamburger.metadata {
    --icon: var(--icon-list);
}
.with-icon.home, .home.metadata {
    --icon: var(--icon-house);
}
.with-icon.hourglass, .hourglass.metadata {
    --icon: var(--icon-hourglass-split);
}
.with-icon.info, .info.metadata {
    --icon: var(--icon-info-circle);
}
.with-icon.embedding, .embedding.metadata {
    --icon: var(--icon-code-slash);
}

.with-icon.person-badge, .person-badge.metadata {
    --icon: var(--icon-person-badge);
}

.metadata {
    color: var(--color-mid-gray);
    font-size: 0.8rem;
}

/* tags */
.tag-inactive {
    padding: 0.1rem 0.75rem;
    margin: 0 0.1rem;
    border-radius: 5px;
    background-color: hsl(0, 0%, 40%);
    color: white;
}

.tag {
    padding: 0.1rem 0.75rem;
    margin: 0 0.1rem;
    border-radius: 5px;
}

.tag-red {
    background-color: hsl(0, 50%, 50%);
    color: white;
}

.tag-green {
    background-color: #BA2E09;
    color: white;
}

.tag-blue {
    background-color: hsl(200, 50%, 50%);
    color: white;
}

.tag:hover {
    background-color: var(--color-mid-gray);
}

.tag:link {
    text-decoration: none;
}


.post-item.tool {
    width: 100%;
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    gap: 0.5rem; 
    border: 2px solid transparent;
}


.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px hsl(var(--primary-hue), var(--primary-sat), 85%), 
                0 0 0 5px var(--color-primary);
}

/* --- 1. Primary Button (Solid) --- */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px); /* Leichter Hebe-Effekt */
    box-shadow: 0 10px 15px -3px var(--color-shadow), 
                0 4px 6px -2px var(--color-shadow);
}

.btn-primary:active {
    background-color: var(--color-primary-active);
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Eingedrückt */
}

/* --- 2. Secondary Button (Outline) --- */
.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background-color: hsl(var(--primary-hue), var(--primary-sat), 96%);
    color: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

.btn-outline:active {
    background-color: hsl(var(--primary-hue), var(--primary-sat), 92%);
}

/* --- 3. Ghost Button (Minimal) --- */
.btn-ghost {
    background-color: transparent;
    color: var(--color-primary);
}

.btn-ghost:hover {
    background-color: hsl(var(--primary-hue), var(--primary-sat), 96%);
}

/* Typo */
p {
    line-height: 1.3;

    @media screen and (min-width: 795px) {
        p {
            line-height: 1.3;
        }
    }

    @media screen and (min-width: 1250px) {
        p {
            line-height: 1.3;
        }
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: $font-stack-headings;
  font-weight: 400;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;

}

h1 {
    line-height: 1.05;
    font-size: 2rem;
}

h2 {
    line-height: 1.1;
    font-size: 1.4rem;
}





/* Address related */
.arev {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}

.arev-row {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.flex-nogap {
    display: flex;
    margin: 0;
    padding: 0;
}