/** radio buttons ***/

html, body {
    margin: 0px;
    padding: 0px;
}

.form-radio-container {
    margin-top: 16px;
    margin-bottom: 16px;
}

.radio-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.form-radio-box {
    margin-right: 30px;
    display: flex;
    align-items: center;
}

.startup-content b.tagline {
    display: block;
    margin-bottom: 15px;
}

table.table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ccc;
}

table.table th,
table.table td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #ccc;
}

table.table th {
    font-weight: 600;
    color: #222;
    background-color: #f0f0f0;
}

table.table tr:hover {
    background-color: #f8f8f8;
}


.form-radio {
    margin-top: 8px;
    margin-bottom: 8px;
    width: 21px;
    height: 21px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
    -webkit-user-select: none;
    display: inline-block;
    line-height: 18px;
    border: 1.6px solid black;
    background: #f3f3f3;
}

.company-detail-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;

}

.form-radio-box label {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    margin-left: 8px;
    font-weight: normal;
}

.form-radio-dot {
    display: none;
}

.form-radio.selected .form-radio-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background: white;
    margin-left: 6.5px;
    margin-top: 6.5px;
}

.form-radio.selected {
    background: #4682e2;
    border-color: #4682e2;
}

/*******************************************/

body {

    font-family: sans-serif;
}



.paginator>div {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.paginator a,
.paginator a:hover,
.paginator a:active,
.paginator a:visited {
    min-width: 30px;
    height: 30px;
    text-align: center;
    background: #cfcfcf;
    border: 1px solid #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

.paginator a:active {}

.paginator a.current-page {
    background: rgb(0 162 237);
    color: white;
    border: 1px solid rgb(0 133 194);
}

body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
}

@font-face {
    font-family: 'Kenac SemiBold';
    src: url('/fonts/Kenac SemiBold.otf') format('opentype');
}

footer {
    background-color: rgb(29, 29, 29);
    padding-top: 42px;
    padding-bottom: 42px;
    text-align: left;
    padding-left: 64px;
    padding-right: 64px;
    color: white;
}

.app .form-button,
.app a.form-button {
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    background: green;
    display: inline-block;
    border-radius: 30px;
    font-size: 24px;
    background: linear-gradient(90deg, #00d281, #00d2ce);
    margin-top: 11px;
    margin-bottom: 11px;
    border: none;
    color: white;
}

.app .form-button.form-button-small {
    padding: 3px;
    padding-left: 20px;
    padding-right: 20px;
}

.button-container {
    display: flex;
    gap: 20px;
}

.startup-filter .dropdown-form-element {
    color: rgb(0 86 164);
}

.startup-filter .dropdown-placeholder {
    color: gray;
}

.startup-filter .default-option {
    color: #3b3a3a;
}

.app .form-radio.selected {
    border-color: #00d281;
}

.app .form-radio.selected .form-radio-dot {
    background: linear-gradient(90deg, #00d281, #00d2ce);
}

.form-button:active {
    position: relative;
    left: 2px;
    top: 2px;
}

.app .form-button:hover,
.app a.form-button:hover {
    background: linear-gradient(90deg, #00c177, #00b5b2);

}

footer a:link,
footer a:visited {
    color: white;
}

footer img.logo {
    width: 110px;
    margin-bottom: 11px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr;
    gap: 64px;
}

h1,
h2,
h3 {
    font-family: 'Kenac SemiBold', sans-serif;
}

h2 {
    font-size: 35px;
}

h4 {
    font-weight: 500;
    font-size: 27px;
    margin-bottom: 11px;
    margin-top: 11px;
}

h4:first-child {
    margin-top: 0px;
}

main {
    padding: 64px;
}


@font-face {
    font-family: 'Fact';
    src: local('Fact Regular'), local('Fact-Regular'),
        url('/fonts/Fact-Regular.woff2') format('woff2'),
        url('/fonts/Fact-Regular.woff') format('woff'),
        url('/fonts/Fact-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fact';
    src: local('Fact Medium'), local('Fact-Medium'),
        url('/fonts/Fact-Medium.woff2') format('woff2'),
        url('/fonts/Fact-Medium.woff') format('woff'),
        url('/fonts/Fact-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Fact';
    src: local('Fact Bold'), local('Fact-Bold'),
        url('/fonts/Fact-Bold.woff2') format('woff2'),
        url('/fonts/Fact-Bold.woff') format('woff'),
        url('/fonts/Fact-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

body .app {
    font-family: 'Fact';
    font-size: 19px;
}

.image {
    border: 1px solid #555;
    width: 100%;
}




#header {
    position: static !important;
}

.app {
    width: 100%;
    max-width: 1290px;
    margin: 64px;
    margin-left: auto;
    margin-top: 0px;
    cursor: default;
    margin-right: auto;
    box-shadow: 0px 0px 36px #2d323a;
    margin-top: 40px;
}

.teaser-text {
    font-size: 20px;
}

div.teaser-button {
    font-size: 25px;
    font-weight: bold;
    background: #ca0d5b;
    padding-left: 32px;
    padding-right: 32px;
}

nav.website-navigation a {
    color: black;
    font-weight: normal;
    letter-spacing: 0.5px;
    line-height: 25px;
    font-size: 21px;
    font-weight: 500;
    margin-left: 0px;
    padding-left: 0px;
    margin-right: 26px;
    padding-right: 0px;
    flex-grow: 1; 
}

nav.website-navigation a.active {
    font-weight: bold;
    text-decoration: underline;
}

nav.website-navigation {
    font-weight: bold;
    padding: 15px;
    color: white;
    max-width: 1200px;
    background-position: 25px center;
    padding-left: 32px;
    background-size: 72px;
    border-radius: 8px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-left: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    align-self: center;
    padding-top: 0px;
}

header h1 a {
    color: black;
    font-weight: bold;
}

header nav.admin a {
    text-decoration: none;
}

button,
a {
    cursor: pointer;
}

ul.checkmarks {
    list-style-type: none;
    margin-left: 0px;
    font-size: 21px;
    padding-left: 0px;
}


th,
b {
    font-weight: 600;
}

ul.checkmarks li:before {
    content: '✓';
    margin-right: 16px;
}

button.teaser {
    background: none;
    border: none;
    font-size: 28px;
    color: #4682e2;
    border-radius: 8px;
    padding: 0px;
    margin-top: 32px;
    margin-bottom: 32px;
    text-decoration: underline;
}

nav.admin {
    font-weight: normal;
    position: absolute;
    right: 16px;
    top: 16px;
}

nav.admin a {
    font-weight: normal;
}

nav a:first-child {
    margin-left: 0px;
    padding-left: 0px;
}



h1,
h2,
h3,
p {
    margin-top: 12px;
    margin-bottom: 12px;
}

h1 {
    font-size: 46px;
    margin-top: -8px;
}

@media (max-width:850px) {
    h1 {
        font-size: 35px;
    }

    h2 {
        font-size: 28px;
    }
}

@media (max-width:550px) {
    h1 {
        font-size: 25px;
    }

    h2 {
        font-size: 22px;
    }
}


header h1 {
    display: inline-block;
    margin-top: 0px;
}

::-webkit-contacts-auto-fill-button,
::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.app table.table {
    border-collapse: collapse;
    width: 100%;
}

.app table.table th,
.app table.table td {
    text-align: left;
    border: 1px solid white;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
}


nav a {
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    cursor: pointer;
    color: black;
}

.modal-window {
    display: block;
}

h3 {
    font-size: 24px;
    margin-bottom: 4px;
}

h3:first-child {
    margin-top: 0px;
}

a,
a:visited {
    color: #0d5782;
    text-decoration: none;
    /*font-weight: bold;*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}


body {
    --default-padding: 32px;
    --default-margin: 32px;
    --primary-branding-color: #4682e2;
    background: white;
    font-family: sans-serif;
    background: #474f5a;
}

.breadcrumbs {
    margin-bottom: 10px;
}

header,
main {
    margin-top: 16px;
}

header {
    margin-top: 0px;
    background-color: #fff;
    padding: 24px;
    padding-left: 64px;
    padding-right: 64px;
    position: relative;
    display: flex;
    gap: 42px;
    background: white;
    justify-items: center;
    border-bottom: 1px solid #cfcfcf;
    justify-content: space-between;
}

header .logocontainer, footer .logocontainer {
    color: white;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex: 0 0 auto; 
}

footer .logocontainer {
    margin-bottom: 24px;
}

main {
    margin-top: 0px;
    background: white;
}

ul li {
    margin-top: 8px;
    margin-bottom: 8px;
}

ul {
    padding-left: 18px;
}

.paginator {
    margin-top: 42px;
}

.app .paginator a,
.app .paginator a:hover,
.app .paginator a:active,
.app .paginator a:visited {
    background: rgb(42 62 81);
    color: white;
    border: 3px solid rgb(42 62 81);
    font-size: 24px;
    min-width: 46px;
    height: 46px;
    border-radius: 15px;
}

.app .paginator a.current-page {
    background: rgb(42 62 81);
    color: white;
    border: 3px solid rgb(30, 133, 230);
}

@media only screen and (max-width: 1024px) {
    .app {
        margin-left: 0px;
        margin-right: 0px;
    }

    main {
        margin-left: 0px;
        margin-right: 0px;
    }

    nav.admin {
        position: static;
    }

    header {
        position: static;
    }

    nav.website-navigation {
        position: static;
    }

    .app .paginator a,
    .app .paginator a:hover,
    .app .paginator a:active,
    .app .paginator a:visited {
        font-size: 18px;
        min-width: 30px;
        height: 30px;
    }
}


@media only screen and (max-width: 850px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .footer-content div:first-child {
        grid-column: span 2;
    }

    nav.website-navigation {
        display: grid;
        gap: 16px;
    }

    nav.website-navigation a {
        padding-left: 0px;
    }

}

@media only screen and (max-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-content div:first-child {
        grid-column: 1;
    }

    .app .paginator a,
    .app .paginator a:hover,
    .app .paginator a:active,
    .app .paginator a:visited {
        font-size: 16px;
        min-width: 30px;
        height: 30px;
    }

    .app .paginator>div {
        gap: 8px
    }
}

/***** COMPANY DETAIL *************
********************************
********************************/

.company-detail .website-screenshot {
    width: 100%;
    border: 1px solid gray;
}

.text-teaser {
    font-size: 23px;
    font-weight: 500;
}

.website-container {
    margin-left: -64px;
    margin-right: -64px;
    padding: 64px;
    color: white;
    margin-bottom: -64px;
    margin-top: -64px;
    background: linear-gradient(0deg, #577188, #3d5163);
}

.find-a-co-founder-container {
    margin-bottom: 64px;
}

.social-icons {
    display: flex;
    gap: 21px;
    margin-top: 21px;
    margin-bottom: 21px;
}

.social-icons img {
    width: 60px;
    height: 60px;
}

.company-description h2 {
    margin-top: 42px;
}

.website-container a,
.website-container a:visited {
    color: white;
}

.company-facts {
    display: flex;
    gap: 21px;
    font-size: 20px;
    flex-direction: column;
    margin-top: 0px;
    margin-bottom: 0px;
}

.company-facts>div {
    flex-grow: 1;
}

.company-facts>div>span {
    text-decoration: underline;
}
.company-facts b {
    display: block;
    font-size: 25px;
    font-weight: 500;
}

.startup-header {
    column-gap: 0px;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    background: #2a3e51;
}

.startup-header-content {
    padding: 42px;

    background: #2a3e51;
    color: white;


}

.startup-header .logobox { /* */
    padding: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 84px);
    width: calc(100% - 84px);
    background-color: white;
    height: 275px;
    min-height: calc(100% - 84px);
}

.startup-header .logobox .logo { /*   */
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/**** STARTUP LIST ****/

.startups {
    padding: 42px;
    background-color: #577188;
    padding-left: 64px;
    padding-right: 64px;
    background: linear-gradient(0deg, #577188, #3d5163);
    background-attachment: fixed;
    margin: -64px;
}

.startups .itemlist-container {
    position: absolute;
}

.startups label {
    color: white;
}



.startups h1 {
    color: white;
    text-shadow: 0px 0px 5px #334d64;
}

.startup-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 42px;
    margin-top: 29px;
}

.website-list {
    grid-template-columns: 1fr 1fr;
}

.screenshot-block {
    display:grid;grid-template-columns:6fr 2fr;gap:64px;
}

@media (max-width:1100px) {
    .startup-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:850px) {
    .startup-list {
        grid-template-columns: 1fr;
    }

    .startup-header {
        grid-template-columns: 1fr;
    }
    .screenshot-block {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    
}

.startup {
    background: white;
    display: grid;

    column-gap: 0px;
    grid-template-columns: 1fr 1fr;
    border-radius: 10px;
    overflow: hidden;
    flex-direction: column;
    display: flex;
    background: #2a3e51;
}
.logocontainer img {
    width: 250px;
}
.logobox { /*.startup */

    padding: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 84px);
    width: calc(100% - 84px);
    background-color: white;
    height: 275px;
    cursor: pointer;
    /* oder die gew\u00fcnschte H\u00f6he */
}

.logo-collection {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    display: grid;
    border-radius: 18px;
    overflow: hidden;
    background-color: white;
}
.logo-collection .logobox {
    height: 120px;
}
.startup .logobox.show-website {
    padding: 0px;
    width: 100%;
    height: auto;
}

.logobox img {
    max-width: 100%;
    max-height: 191px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.website-list .logobox img {
    max-height: 100%;
}

.logobox img.svg {
    /* Zusätzliche Regel speziell für SVGs */
    width: 100%;
    height: auto;
}

.startup .startup-content {
    padding: 42px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #2a3e51;
    color: white;
    display: flex;
    flex-direction: column;

}

.startup-content a,
.startup-content a:link,
.startup-content a:visited {
    color: #54c0ff;
}

.startup-content h3 {
    font-size: 24px;
    cursor: pointer;
    color: white;

}

/********************************/


.user-icon {
    flex: 0 0 auto; 
    display: flex;
    align-items: center;
}

.user-icon img {
    width: 42px;
    height: 42px;
}

.popover {
    position: absolute;
    right: 20px;
    top: 100px;
    border: 1px solid #818080;
    background-color: white;
    padding: 25px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 100;
    width: 380px;
    border-radius: 12px;
    display:none;
}

.popover .login-buttons {
    display: flex;
    gap: 25px;
}

.popover .form-button, .popover  a.form-button {
    margin-right: 0px;
}

.login-buttons a.login-btn {
    background: linear-gradient(180deg, #868f8b, #646666);
}

.login-buttons a.register-btn {
    background: linear-gradient(0deg, #00d281, #00d2ce);
}

.popover:before, .popover:after {
    content: '';
    position: absolute;
    top: -10px; /* Positionierung über dem Popover */
    right: 53px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.popover:before {
    border-bottom: 10px solid #818080; /* Farbe des Rands */
    top: -11px; /* Etwas höher positionieren, um den Rand sichtbar zu machen */
}

.popover:after {
    border-bottom: 10px solid white; /* Farbe des Hintergrunds */
}




.menu-icon {
    display: none;
}

@media screen and (max-width: 1150px) {
    nav.website-navigation {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

/* Styles für Bildschirme kleiner als 800px */
@media screen and (max-width: 800px) {
    header {
        display: grid;
        grid-template-columns: 1fr 40px;
    }

    .logobox {
        display: flex;
        align-items: center;
    }

    nav.website-navigation {
        display: none;
    }

    .user-icon {
        display: none;
    }

    .popover {
        position: static;
        flex-direction: column;
        box-shadow: none;
        border: none;
        padding: 0px;
        width: auto;
    }

    .popover .login-buttons {
        display: flex;
        flex-direction: column;
        gap: 0px;
        text-align: center;
    }

    .popover::before,
    .popover::after {
        content: none; /* Entfernt die ::before und ::after Pseudo-Elemente */
    }

    .menu-icon {
        display: flex;
        align-items: center;
        flex: 0 0 auto; 
    }

    .menu-icon img {
        height: 42px;
    }

    .website-container {
        padding-left: 20px;
        padding-right: 20px;
        margin-left: -20px;
        margin-right: -20px;
    }

    .menu-expanded {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: white; /* Oder eine andere passende Farbe */
        z-index: 10; /* Stellen Sie sicher, dass es über anderen Elementen liegt */
    }

    .menu-expanded .popover {
        display: flex;
    }

    .menu-expanded nav.website-navigation { 
        display: flex;
        flex-direction: column;
    }

    .menu-expanded {
        position: fixed;
        left: 0px;
        top: 0px;
    }

    .menu-expanded .menu-icon {
        position: absolute;
        top: 29px;
        right: 19px;
    }
}



.startups h2 {
    color: white;
}

.startup-filter {
    display: flex;
    align-items: center;
    column-gap: 15px;
    flex-wrap: wrap;
    row-gap: 0px;
    margin-top: 8px;
}

.startup-filter > div {
    display: flex;
    align-items: center;
    column-gap: 15px;
    flex-wrap: wrap;
}

.startup-filter .form-radio-container {
    display: flex;
    align-items: center;
    margin: 0px;
}

.startup-filter .radio-items {
    margin-top: 0px;
}

.two-column-form .parameters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
}

.two-column-form .parameter-type-referenced_row {
    grid-column: 1 / span 2;
}

@media (max-width: 800px) {
    .two-column-form .parameters {
        grid-template-columns: 1fr 1fr;
    }
    .two-column-form .parameter-type-referenced_row {
        grid-column: 1;
    }
}
.news-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 64px;
    position: relative;
    padding-top: 32px;
}

.news p, .news h3 {
    color: black;
}

.news {
    position: relative;
 
}

/* Vertikale gestrichelte Linie zwischen News (Desktop) */
.news:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -15px;
    width: 1px;
    height: 100%;
    border-right: 1px dashed #5c5c5c;
}

/* Bild und Text-Styling */
.news img {
    width: 100%;
}

.news .tagline {
    margin-top: 10px;
    color: rgb(0 86 164);
}

.news h3 {
    margin-top: 10px;
}

.news .author-date {
    color: #474f5a;
    font-size: 15px;
}

/* --- Mobile Version --- */
@media (max-width: 768px) {
    .news-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .news {
        padding: 0;
    }

    /* Statt vertikaler Linie eine horizontale Linie */
    .news:not(:last-child)::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #ccc;
    }
}




.news-detail-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.news-detail-main {
    min-width: 0;
}

.news-detail-header {
    max-width: 800px;
    margin: 0 auto 20px;
}

.news-detail-meta {
    margin-bottom: 20px;
}

.news-detail-meta .tagline {
    color: rgb(0 86 164);
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-detail-meta h1 {
    margin-bottom: 10px;
    line-height: 110%;
}

.news-detail-meta .author-date {
    color: #474f5a;
    font-size: 15px;
}

.news-detail-container {
    max-width: 800px;
    margin: 0 auto;
}

.news-detail-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.news-detail-content {
    line-height: 1.8;
    color: black;
}

.news-detail-content p {
    margin-bottom: 24px;
    text-align: justify;
}

.news-detail-content h2 {
    margin-top: 48px;
    margin-bottom: 20px;
    font-size: 1.75em;
    line-height: 1.3;
}

.news-detail-content h3 {
    margin-top: 36px;
    margin-bottom: 16px;
    font-size: 1.4em;
    line-height: 1.4;
}

.news-detail-content blockquote {
    margin: 32px 0;
    padding-left: 24px;
    border-left: 3px solid rgb(0 86 164);
    font-style: italic;
    color: #474f5a;
}

.news-detail-content img {
    max-width: 100%;
    height: auto;
    margin: 32px 0;
}

.news-detail-content ul,
.news-detail-content ol {
    margin-bottom: 24px;
    padding-left: 24px;
}

.news-detail-content li {
    margin-bottom: 8px;
}

/* Sidebar */
.news-detail-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
}

.news-detail-sidebar h3 {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
    color: black;
}

.sidebar-news-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sidebar-news-item {
    display: block;
    text-decoration: none;
    transition: transform 0.2s;
}

.sidebar-news-item:hover {
    transform: translateX(4px);
}

.sidebar-news-item img {
    width: 100%;
    height: auto;
    margin-bottom: 12px;
}

.sidebar-news-text .tagline {
    color: rgb(0 86 164);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.sidebar-news-text h4 {
    color: black;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.4;
}

.sidebar-news-text .author-date {
    color: #474f5a;
    font-size: 13px;
}

@media (max-width: 1024px) {
    .news-detail-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    
    .news-detail-sidebar {
        position: static;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .sidebar-news-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .news-detail-layout {
        padding: 0 20px;
    }
    
    .news-detail-image {
        margin-bottom: 24px;
    }
    
    .news-detail-content p {
        text-align: left;
    }
    
    .news-detail-content h2 {
        margin-top: 32px;
        font-size: 1.5em;
    }
    
    .news-detail-content h3 {
        margin-top: 24px;
        font-size: 1.25em;
    }
}

.startup-filter .dropdown-form-element-container .dropdown-form-element {
  border-radius: 80px !important;
    background-color: #7a9dbc;
    border: none;
    padding: 4px;
    padding-left: 12px;
    padding-right: 12px;
}

.startup-filter .dropdown-form-element-container .dropdown-form-element .dropdown-down {
    display: none;
}
main {
    position: relative;
}
.company-navigator {
    background-color: #252a30;
    position: relative;
    top: -64px;
    left: -64px;
    width: 100%;
    padding: 12px;
    padding-left: 64px;
    padding-right: 64px;
    display: flex;
    column-gap: 15px;
    overflow: scroll;
    white-space: nowrap;
}

@media (min-width:1000px) {
    .calendar-entry-title h2 {
        margin-top: -10px;
    }

     .company-navigator { 
        overflow: visible;
     }
}

@media (max-width: 1000px) {
       .company-navigator {
        top: -64px;
        background-color: #252a30;
        position: relative;
        width: calc(100vw);
        padding: 0px;
        display: flex;
        column-gap: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        box-sizing: border-box;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-left: -12px;
        margin-right: -24px;
        left: 0px;
    }

}

.company-navigator a {
    color: white;
    padding: 4px;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #3f4750;
    border-radius: 30px;
}

.company-navigator a.active {
    background: #1e75ca;
}

.button-box {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.banner.leaderboard {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.desktop-text {
    display: inline;
}
.mobile-text {
    display: none;
}


.website-list .logobox img {
    width: 100%;
}
@media (max-width:800px) {
    .banner.leaderboard {
        display: none;
    }
    header {
        padding-left: 20px;
        padding-right: 20px;
    }
    main {
        padding-left: 20px;
        padding-right: 20px;
    }
    footer {
        padding-left: 20px;
        padding-right: 20px;
    }
    .startups {
        padding-left: 20px;
        padding-right: 20px;
        margin-left: -20px;
        margin-right: -20px;
    }
    .experts {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width:480px) {
    .map-stat-startups {
        flex-direction: column;
    }
    .company-navigator {
        padding-left: 20px;
        padding-right: 20px;
    }
    .desktop-text {
        display: none;
    }
    .mobile-text {
        display: inline;
    }

    .logobox img {
        width: 80%;
    }
    body .app {
        font-size: 16px;
    }
    .startup-content p .tagline { 
        font-size: 16px;
        display: block;
        margin-bottom: 10px;
    }

    .startup .startup-content {
        padding: 20px;
    }
    .startup .logobox {
        height: 100px;
        width: calc(100% - 40px);
        padding: 20px;
    }
    .startups {
        padding-left: 20px;
        padding-right: 20px;
        margin-left: -20px;
        margin-right: -20px;
    }

    body .experts {
        grid-template-columns: 1fr;
    }

}




/* Bank Offers Grid */
.bank-offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.bank-offer-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow 0.3s ease;
    background: #2a3e51;s
}

.bank-offer-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bank-offer-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bank-offer-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #add3ff;
}

.offer-type-badge {
    display: inline-block;
    background: #007bff;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    width: fit-content;
}

.offer-description {
    color: white;
    line-height: 1.6;
    margin: 0;
}

.offer-section {
    border-top: 1px solid #add3ff;
    padding-top: 12px;
}

.offer-section strong {
    display: block;
    margin-bottom: 8px;
    color: #add3ff;
}

.offer-section p {
    margin: 0;
    color: white;
    line-height: 1.6;
}

.offer-link-button {
    display: inline-block;
    background: #007bff;
    color: white !important;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    margin-top: auto;
    transition: background 0.3s ease;
}

.offer-link-button:hover {
    background: #0056b3;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .bank-offers-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .bank-offer-card {
        padding: 16px;
    }
}



/****************** COWORKNG *************/

.coworking-locations-section {

    margin: 32px 0;
}

.coworking-locations-section h2 {
    color: #fff;
    margin-bottom: 24px;
    font-size: 24px;
}

.coworking-location-card {
    background: #2a3e51;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.coworking-location-card:last-child {
    margin-bottom: 0;
}

.location-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.location-name {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.location-address {
    color: #b8c5d6;
    font-size: 14px;
    margin: 0;
}

.location-link {
    background: #4a90e2;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    transition: background 0.3s;
}

.location-link:hover {
    background: #357abd;
}

.location-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.location-detail-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 6px;
}

.location-detail-label {
    color: #8fa3b8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.location-detail-value {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.location-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.pricing-item {
    background: rgba(74, 144, 226, 0.15);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(74, 144, 226, 0.3);
}

.pricing-label {
    color: #8fa3b8;
    font-size: 20px;
    margin-bottom: 4px;
}

.pricing-value {
    color: #add3ff;
    font-size: 18px;
    font-weight: 600;
}

.location-features {
    margin-top: 20px;
}

.location-features h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 12px;
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.feature-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    padding: 8px 12px;
    border-radius: 6px;
    color: #e0e7f0;
    font-size: 14px;
    transition: background 0.3s;
}

.feature-badge:hover {
    background: rgba(255, 255, 255, 0.12);
}

.feature-icon {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.no-locations-message {
    background: rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: 8px;
    color: #b8c5d6;
    text-align: center;
}

@media (max-width: 768px) {
    .location-header {
        flex-direction: column;
    }
    
    .location-details {
        grid-template-columns: 1fr;
    }
    
    .location-pricing {
        grid-template-columns: 1fr;
    }
}


.founder-documents {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/*********** Gründer sucht Gründer ****************/

/* Co-Founder */
.co-founder-section { margin: 24px 0; }
.co-founder-milestones { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.milestone-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.milestone-emoji { font-size: 3rem; }
.milestone-open .milestone-emoji { filter: grayscale(100%); opacity: 0.4; }
.milestone-label { font-size: 80%; }
.co-founder-block { margin-bottom: 16px; }
.co-founder-block h3 { margin-bottom: 4px; }

/* Team */
.company-team { margin: 24px 0; }
.team-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.team-member { display: flex;  gap: 12px; flex-direction: column; }
.team-member-photo { width: 156px; height: 156px; border-radius: 15px; object-fit: cover; }
.team-member-info { display: flex; flex-direction: column; gap: 2px; }

/************** Find Co-Founder Listing *******************/

/* Co-founder listing */
.co-founder-listing {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 1.5rem;
}

.co-founder-entry {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
}

.co-founder-entry-logo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: white;
}

.co-founder-entry-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.co-founder-entry-body {
    flex: 1;
    min-width: 0;
}

.co-founder-entry-name {
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    text-decoration: underline;
}

.co-founder-entry-desc {
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.co-founder-entry-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Avatars */
.co-founder-avatars {
    display: flex;
    gap: 20px;
}

.co-founder-avatar {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80%;
    font-weight: 500;
    flex-shrink: 0;
    background-color: #252a30;
}

.co-founder-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.co-founder-avatars:last-child .co-founder-avatar {
    margin-right: 0;
}

.co-founder-badge {
    font-size: 80%;
    padding: 8px 20px;
    border-radius: 20px;
    margin-left: 8px;
    background-color: #252a30;
}

a.co-founder-entry {
    background: #2a3e51;
    border-radius: 20px;
}

.title-with-image {
    display:flex;align-items:center; justify-content:space-between;
    position: relative;
    top: 8px;
}

.title-with-image img {
    width: 380px;
}

@media (max-width: 600px) {
    .title-with-image {
        align-items: flex-start;
        flex-direction: column;
        top: 0px;
    }
}


@media (max-width: 550px) {
    .title-with-image img {
        width: 240px;
    }
}