html[data-theme="default"], :root{
--bg-page:246, 247, 249;
--bg-card:255, 255, 255;
--text-main:31, 41, 55;
--text-muted:107, 114, 128;
--accent:37, 99, 235;
--radius:14px;
--shadow:0 8px 24px rgba(0,0,0,0.06);
--accent-contrast:255,255,255;
--primary-color:0, 115, 156;
--secondary-color:156, 0, 128;
--accent-color:156, 0, 24;
--warm-tone:156, 106, 0;
--fresh-tone:102, 156, 0;
--neutral-tone:56,56,56;
--text-cb:255,255,255;
}
/* Farbschema */
html[data-theme="rot"]
{
--primary-color:148,0,100;
--secondary-color:237,6,119;
--accent-color:0,158,219;
--warm-tone:234,200,0;
}
html[data-theme="gelb"]
{
--primary-color:200,33,93;
--secondary-color:42,159,188;
--accent-color:247,147,29;
--warm-tone:254,194,51;
}
html[data-theme="gruen"]
{
--primary-color:0,91,171;
--secondary-color:243,123,125;
--accent-color:179,210,52;
--warm-tone:255,232,94;
}
html[data-theme="tuerkis"]
{
--primary-color:245,143,146;
--secondary-color:146,197,234;
--accent-color:164,218,210;
--warm-tone:255,247,153;
--text-cb:0,0,0;
}
html[data-theme="sonne"]
{
--primary-color:0,107,145;
--secondary-color:239,65,86;
--accent-color:251,176,52;
--warm-tone:255,215,105;
}
html[data-theme="lila"]
{
--primary-color:179,63,151;
--secondary-color:0,136,178;
--accent-color:237,20,90;
--warm-tone:255,212,0;
}
html[data-theme="RKPHG"]
{
--primary-color: 218,111,171; /* Rosa / Pink */
--secondary-color: 244,122,99; /* Koralle / Lachsrot */
--accent-color: 248,158,93; /* Pfirsich / Hellorange */
--warm-tone: 68,199,244; /* Himmelblau / Türkisblau */
--fresh-tone: 255,215,105; /* Goldgelb / Sonnenblumengelb */
}
html[data-theme="KLGAP"]
{
--primary-color: 62,133,198; /* Blau / Kornblumenblau */
--secondary-color: 243,123,125; /* Rosa / Lachsrosa */
--accent-color: 109,192,103; /* Grün / Frisches Grasgrün */
--warm-tone: 246,140,89; /* Orange / Apricot */
--fresh-tone: 255,235,149; /* Hellgelb / Pastellgelb */
}
html[data-theme="TFTZB"]
{
--primary-color: 0,136,178; /* Blau / Türkisblau */
--secondary-color: 178,122,180; /* Lila / Flieder */
--accent-color: 29,183,141; /* Grün / Türkisgrün */
--warm-tone: 244,133,141; /* Rosa / Zartrosa */
--fresh-tone: 255,247,153; /* Hellgelb / Buttergelb */
}
html[data-theme="VGMHH"]
{
--primary-color: 179,63,151; /* Veilchen */
--secondary-color: 239,65,86; /* Granatapfel */
--accent-color: 42,159,188; /* Meeresblau */
--warm-tone: 244,121,50; /* Herbstaprikose */
--fresh-tone: 230,177,34; /* Honig */
}
html[data-theme="RLSKB"]
{
--primary-color: 200,33,93; /* Rosenkelch */
--secondary-color: 0,175,173; /* Lagune */
--accent-color: 189,174,50; /* Senfkorn */
--warm-tone: 247,147,29; /* Kürbis */
--fresh-tone: 255,225,146; /* Butterblume */
}
html[data-theme="KHMFS"]
{
--primary-color: 88,95,170; /* Kornblume */
--secondary-color: 0,158,219; /* Himmel */
--accent-color: 237,26,58; /* Mohn */
--warm-tone: 179,210,52; /* Frühlingsblatt */
--fresh-tone: 254,194,51; /* Sonnenblume */
}
html[data-theme="ROFMG"]
{
--primary-color: 167,9,37; /* Rubin */
--secondary-color: 0,91,171; /* Ozean */
--accent-color: 197,22,141; /* Fliederherz */
--warm-tone: 241,90,34; /* Mandarine */
--fresh-tone: 234,200,0; /* Goldkorn */
--text-cb:255,255,255;
}
html[data-theme="WHRFS"]
{
--primary-color: 121,154,40; /* Wiesengrün */
--secondary-color: 0,158,219; /* Himmel */
--accent-color: 242,124,150; /* Rosé */
--warm-tone: 231,159,198; /* Fliederblüte */
--fresh-tone: 255,212,0; /* Sonnenlicht */
--text-cb:0,0,0;
}
.eins{background-color:rgb(var(--primary-color))}
.zwei{background-color:rgb(var(--secondary-color))}
.drei{background-color:rgb(var(--accent-color))}
.vier{background-color:rgb(var(--warm-tone))}
.fuenf{background-color:rgb(var(--fresh-tone))}
.sechs{background-color:rgb(var(--neutral-tone))}
.farbprofil{display:grid;grid-template-columns:auto repeat(6,15px);gap:5px;width:100px;text-align:left}
.color-box{width:15px;height:15px;text-align:center;color:rgb(var(--text-cb));font-size:0.8em}
*, *::before, *::after{box-sizing:border-box}
body{font-size:16px;margin:0.1em;margin-bottom:40px;background:rgb(var(--bg-page));color:rgb(var(--text-main));font-family:system-ui, sans-serif}
h2{font-size:22px;padding:5px;margin:5px}
main{margin-top:0;padding:.5em;padding-bottom:120px}
@media (max-width:800px){
body{font-size:17px}
h1{font-size:24px}
h2{font-size:20px;padding:5px;margin:5px;border:1px solid #ccc}
h3{font-size:18px}
p, label, input, select, button{font-size:16px}
.smallInfo{font-size:12px}
}
@media (max-width:400px){
body{font-size:16px}
h1{font-size:22px}
h2{font-size:18px;padding:5px;margin:5px}
h3{font-size:16px}}
.medien-wrapper, .profile-wrapper{max-width:97%;margin:0 auto;padding:0.5rem}
.profile-wrapper{max-width:650px}
.profile-form{background:rgb(var(--bg-card));padding:1.5rem;border-radius:var(--radius);border:1px solid rgb(var(--accent));display:grid;gap:1.2rem}
.profile-form label{font-weight:bold;margin-bottom:0.2rem;color:rgb(var(--text-main))}
.profile-form input, .profile-form select, .card input {box-sizing:border-box;width:95%;padding:0.5rem;border-radius:var(--radius);border:1px solid rgb(var(--neutral-tone));background:rgb(var(--bg-page));color:rgb(var(--text-main));margin:1em}
.card input[type="checkbox"]{width:auto}
.profile-form button, button{padding:0.7rem 1.2rem;border:none;background:rgb(var(--primary-color));color:#fff;font-weight:bold;border-radius:var(--radius);cursor:pointer;transition:opacity 0.2s}
.profile-form button:hover, button:hover{opacity:0.85}
.toogle, button.toogle{background:rgb(242,240,230);color:#000;border:2px solid ivory;box-shadow:0 2px 6px rgba(0,0,0,0.5)}
.toogle, button.toogle:hover{background:ivory}
.profile-form a{margin-left:1rem}
.profile-legend{margin-top:2rem;background:rgb(var(--bg-card));border:1px solid rgb(var(--accent));padding:1.5rem;border-radius:var(--radius)}
.profile-legend h3{margin-top:0}
.profile-legend h4{margin-top:1.3rem}
.profile-legend ul{padding-left:1.2rem;margin-top:0.3rem}
.logo{float:left;width:40px;height:auto;padding:1px}
nav{background:#f5f5f5;padding:0.5em;float:left}
nav a, nav b{display:inline-block;padding:0.5em;text-decoration:none;color:#333;font-weight:500}
nav b{font-weight:600}
.nav-toggle{display:none;font-size:1.5em;cursor:pointer}
.nav-menu{display:flex;flex-wrap:wrap;gap:0.5em}
@media (max-width:1200px){
.nav-toggle{display:inline-block}
.nav-menu{display:none;flex-direction:column;gap:0}
.nav-menu.show{display:flex}
nav a, nav b{display:block;padding:0.5em;border-bottom:1px solid #ddd}
}
table{border-collapse:collapse;width:100%;background:white}
th, td{border:1px solid #ddd;padding:0.5em}
th{background:#f0f0f0;text-align:left}
tr.editing{background-color:#fff8c4}
tr.highlight{background-color:#d0f0d0;transition:background-color 1.5s ease}
tr.highlight.fadeout{background-color:transparent}
.arrow-up::before, .arrow-down::before{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;margin-right:0.2em;transition:border-color 0.3s ease}
.arrow-up::before{border-bottom:10px solid #333}
.arrow-down::before{border-top:10px solid #333}
.arrow-up:hover::before{border-bottom-color:#2a9d8f}
.arrow-down:hover::before{border-top-color:#2a9d8f}
.media-table-wrapper{width:99%;overflow-x:auto}
.media-table{border-collapse:collapse;width:100%;max-width:100%}
.media-table th, .media-table td{border:1px solid #ddd;padding:0.5em}
.media-table th{background:#f0f0f0;text-align:left}
@media (max-width:800px){
.media-table-wrapper{max-width:790px;width:99%;overflow-x:auto;margin:0.5em}
.media-table, .media-table thead, .media-table tbody, .media-table th, .media-table td, .media-table tr{display:block;width:99%;max-width:790px}
.media-table thead{display:none}
.media-table tr{margin-bottom:1rem;border:1px solid #ccc;border-radius:6px;padding:0.5rem;background:rgb(var(--bg-card));max-width:97%;margin-left:0.5%}
.media-table td{border:none;position:relative;padding-left:25%;margin-bottom:0.5em;box-sizing:border-box}
.media-table td::before{position:absolute;left:0.5em;width:25%;white-space:nowrap;font-weight:bold;overflow:hidden;text-overflow:ellipsis}
.media-table td:nth-of-type(1)::before{content:"ID"}
.media-table td:nth-of-type(2)::before{content:"Titel"}
.media-table td:nth-of-type(3)::before{content:"Autor*innen"}
.media-table td:nth-of-type(4)::before{content:"Verlag"}
.media-table td:nth-of-type(5)::before{content:"Jahr"}
.media-table td:nth-of-type(6)::before{content:"ISBN/EAN"}
.media-table td:nth-of-type(7)::before{content:"Notizen"}
.media-table td:nth-of-type(8)::before{content:"Bild"}
.media-table td:nth-of-type(9)::before{content:"Einrichtung"}
.media-table td:nth-of-type(10)::before{content:"Kategorie"}
.media-table td:nth-of-type(11)::before{content:"Aktionen"}}
.mobile-top-btn{display:none;text-align:center;margin:0.5rem 0}
.mobile-top-btn a{display:inline-block;padding:0.4em 0.8em;font-size:0.9rem;background:#0066cc;color:#fff;border-radius:4px;text-decoration:none;min-width:120px}
.mobile-top-btn a:hover{background:#004999}
@media (max-width:800px){
tr.topbutton{max-width:97%;max-height:30px;background:none;margin-left:0.5%}
.topbutton td::before{content:none !important}
.mobile-top-btn{display:block}
.desktop-top-btn{display:none}
.topbutton td{text-align:center;padding:0}
.topbutton td .mobile-top-btn a{display:inline-block;width:auto;min-width:120px;max-width:180px;padding:0.4em 0.4em;font-size:0.9rem;background:#0066cc;color:#fff;border-radius:4px;text-decoration:none}
.topbutton td .mobile-top-btn a:hover{background:#004999}}
@media (min-width:801px){
.mobile-top-btn{display:none}
.desktop-top-btn{display:inline-block}
.topbutton{display:none}
}
.media-card{position:relative;max-width:850px;margin:40px auto;padding:30px 40px;background:rgb(var(--bg-card));border:1px solid #ddd;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,0.08)}
.media-title{text-align:center;margin:0 0 25px;font-size:26px}
.media-content{display:grid;grid-template-columns:1fr 240px;gap:30px}
@media (max-width:320px){
.media-content{grid-template-columns:1fr}
}
.media-info dl{display:grid;grid-template-columns:140px auto;row-gap:10px}
.media-info dt{font-weight:700}
.media-info dd{margin:0}
.media-image img{width:100%;max-width:240px;object-fit:contain;border:1px solid #ccc;border-radius:6px;background:#fafafa;padding:4px}
.corner-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#eee;color:#333;text-decoration:none;font-weight:bold;border-radius:50%;border:1px solid #ccc;cursor:pointer;font-size:18px;line-height:1;z-index:5}
.corner-btn:hover{background:#ddd}
.corner-btn.top-left{top:-10px;left:-10px}
.corner-btn.top-right{top:-10px;right:-10px}
.corner-btn.bottom-left{bottom:-10px;left:-10px}
.corner-btn.bottom-right{bottom:-10px;right:-10px}
.media-nav{display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.nav-btn{padding:6px 12px;background:#eee;border:1px solid #ccc;border-radius:4px;text-decoration:none;color:#333;white-space:nowrap}
.nav-btn:hover{background:#ddd}
.nav-btn.prev{position:relative;padding-left:20px}
.nav-btn.prev::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #333}
.nav-btn.next{position:relative;padding-right:20px}
.nav-btn.next::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #333}
#feedback-btn a{color:#fff;text-decoration:none;box-shadow:0 0 20px rgba(var(--neutral-tone),0.4)}
#feedback-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);display:flex;justify-content:center;align-items:center;z-index:99999}
.feedback-box{background:#fff;padding:20px;width:380px;border-radius:6px;box-shadow:0 0 20px rgba(0,0,0,0.4)}
#feedback-form textarea{width:100%;height:120px;margin-bottom:12px}
.feedback-buttons{display:flex;justify-content:flex-end;gap:10px}
.spinner{border:6px solid rgb(var(--fresh-tone));border-top:6px solid #555;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;z-index:9999}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.smallInfo, .small{display:block;font-size:.9em;margin:0.5em 0;text-align:center;color:rgb(var(--accent-color));text-shadow:1px 1px 2px rgba(var(--neutral-tone),0.5)}
.small{color:#333;text-shadow:none;text-align:left}
@media (max-width:600px){
span.smallInfo{font-size:12px}
}
@media (min-width:1600px){
span.smallInfo{font-size:6px !important;line-height:10px}
}
.clr{clear:both}
@media (max-width:480px){
.dashboard-card{padding:15px}
.dashboard .card p.description, .dashboard .card p{font-size:0.85em;color:rgb(var(--text-main))}
.media-content{grid-template-columns:1fr;gap:15px}
.medien-wrapper, .profile-wrapper{padding:0.5rem;margin:0.5rem auto;max-width:95%}
}
.description{color:rgb(var(--text-main))}
.top-grid{display:grid;grid-template-columns:minmax(120px, 1fr) 150px 250px;grid-template-rows:auto auto auto;gap:0.2em;align-items:center;max-width:100%;margin:0 auto;padding:0.1em}
.top-grid .nav{grid-column:1;max-width:none}
.top-grid .feedback{grid-column:2;text-align:center}
.top-grid .feedback a{display:inline-block;padding:0.5rem 1rem;background:rgb(var(--primary-color));color:#fff;border-radius:6px;text-decoration:none;font-weight:bold;width:150px;box-sizing:border-box}
.top-grid .profile{grid-column:3;text-align:right;width:200px}
.top-grid .profile p{margin:0;padding:0}
.info-row{grid-column:1 / -1;background:rgb(var(--bg-card));padding:0.5em;border-radius:6px;border:1px solid rgb(var(--accent));margin-top:0.5em;margin-bottom:0.5em}
@media (max-width:800px){
.top-grid{grid-template-columns:1fr 150px 200px}
.top-grid .nav{grid-column:1;max-width:50px}
.top-grid .feedback{grid-column:2;text-align:center}
.top-grid .profile{grid-column:3;text-align:right}
.info-row{grid-column:1 / -1}
}
footer{position:fixed;bottom:0;left:0;width:100%;background:rgb(var(--bg-card));border-top:1px solid rgb(var(--accent));padding:0.5em;display:grid;grid-template-columns:repeat(3, 1fr);gap:0.5em;font-size:0.9rem;color:rgb(var(--text-main));z-index:1000}
footer a{color:rgb(var(--accent));text-decoration:none;margin-bottom:0.3rem}
footer a:hover{text-decoration:underline}
@media (max-width:600px){
footer{grid-template-columns:1fr;text-align:center;position:relative}
main{padding-bottom:50px;padding-top:0}
}
.filter-row{opacity:0;transition:opacity 0.3s ease;height:0;overflow:hidden}
.filter-row.show{opacity:1;height:auto}
.filter{width:80%}
.filter[data-col="0"]{width:40px}
.filter[data-col="1"]{width:200px}
.filter[data-col="2"]{width:150px}
.filter[data-col="4"]{width:50px}
.filter[data-col="5"]{width:120px}
.filter[data-col="8"]{width:150px}
#resetTable, #toggleFilters{width:30px;height:30px;margin:2px;padding:2px;background:rgb(var(--primary-color));color:#fff;font-weight:700;border-radius:var(--radius);box-shadow:0 0 20px rgba(0,0,0,0.4)}
.arrow-link{display:inline-block;transform:translateX(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:15px solid rgba(var(--primary-color), 0.5);cursor:pointer}
.arrow-link:hover{border-top-color:rgba(var(--primary-color), 0.7)}
h1{margin:0;padding:.25em;padding-top:.1em}
.dashboard{display:flex;flex-wrap:wrap;gap:20px}
.dashboard > .card{flex:1 1 300px}
.dashboard > .card .spacer, .dashboard > .card .card-actions{flex-grow:1}
.card{background:rgb(var(--bg-card));border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;position:relative}
.card::before{content:"";position:absolute;top:0;left:0;height:4px;width:100%;background:rgb(var(--accent));border-radius:var(--radius) var(--radius) 0 0}
.card h2{margin:0 0 4px;font-size:18px}
.card-meta{font-size:13px;color:rgb(var(--text-muted));margin-bottom:16px}
.stat{font-size:22px;font-weight:600;margin:12px 0}
.card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn-primary{background:rgb(var(--accent));color:rgb(var(--accent-contrast));border:none;padding:8px 14px;border-radius:10px;cursor:pointer}
.btn-secondary{background:#efefef;border:1px solid #d1d5db;color:rgb(var(--text-main));padding:8px 14px;border-radius:10px}
.btn-secondary:hover{background:rgb(var(--accent));color:rgb(var(--accent-contrast))}
.card--offers-form{display:flex; gap:20px; align-items:flex-start;}
.card--offers .btn-secondary:hover{background:rgb(var(--accent));color:#000}
.beta-hint{clear:both;margin:0 auto;background:rgba(var(--warm-tone),0.2);border-left:4px solid rgb(var(--warm-tone));padding:10px 14px;font-size:14px;color:#000;width:90%}
.status-message-pos,.status-message-neg{text-align: center;color: #fff;padding: 10px 20px;margin: 15px auto;border-radius: 8px;font-weight: bold;max-width: 500px;box-shadow: 0 2px 6px rgba(var(--shadow), 0.2);position: fixed;top: 20px;left: 50%;transform: translateX(-50%);z-index: 1000;animation: floatFade 4s ease forwards;}
.status-message-pos{background-color: rgb(var(--fresh-tone))}
.status-message-neg{background-color: rgb(var(--accent-color))}
@keyframes floatFade {0% { opacity: 0; transform: translateX(-50%) translateY(-20px); } 10% { opacity: 1; transform: translateX(-50%) translateY(0); } 80% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }}
#delete-save-hint{max-width:200px;color: rgb(var(--accent-color));font-weight:600;text-align:center;animation: floatFade 4s ease forwards;border: 3px solid rgb(var(--primary-color));background-color: rgb(var(--bg-card));padding:5px; border-radius:var(--radius);}
#preview {max-width: 100%;border: 1px solid #ccc;border-radius: 8px}
#preview-hint{display: none;font-size: 0.9em;color: rgb(var(--accent-color));margin-top: 5px}
#preview-wrapper {width: 220px;text-align: center;margin-left: 20px;float: right;display: none}
#preview-wrapper img {max-width: 200px;display: block;margin-bottom: 5px}
#preview-wrapper .preview-hint {font-size: 0.85em;color: rgb(var(--accent-color))}
.card--account{--accent:0, 87, 72}
.card--institution{--accent:37, 99, 235}
.card--offers{--accent:255, 215, 72}
.card--offers .btn-primary{color:rgb(0,0,0)}
.card--searches{--accent:182, 0, 149;margin-bottom:80px}
.card--system{--accent: var(--warm-tone)}
.card h2::before{content:"";display:inline-block;width:1.5em;height:1.5em;background-color:rgb(var(--accent));-webkit-mask-size:contain;mask-size:contain;margin-right:6px;vertical-align:text-bottom}
.card--account h2::before{-webkit-mask:url('data:image/svg+xml;utf8,');mask:url('data:image/svg+xml;utf8,')}
.card--institution h2::before{-webkit-mask:url('data:image/svg+xml;utf8,');mask:url('data:image/svg+xml;utf8,')}
.card--offers h2::before{-webkit-mask:url('data:image/svg+xml;utf8,');mask:url('data:image/svg+xml;utf8,')}
.card--searches h2::before{-webkit-mask:url('data:image/svg+xml;utf8,');mask:url('data:image/svg+xml;utf8,');transform:translateY(2px)}
.card--system h2::before{-webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center;mask:url('data:image/svg+xml;utf8,') no-repeat center}
.show-inst{min-width:300px;width:50%;max-width:400px;margin:0 auto}
.btn-primary{color:rgb(var(--accent-contrast))}
header{background-color:rgb(var(--bg-card));border-bottom:4px solid rgb(var(--primary-color))}
header a, header .nav-menu a{color:rgb(var(--primary-color))}
.top-grid .feedback a{background-color:rgb(var(--accent-color))}
footer{display:grid;grid-template-columns:repeat(3, 1fr);gap:1rem;padding:.5rem;font-size:1em;border-top:4px solid rgb(var(--primary-color));background-color:rgb(var(--bg-card));min-height:30px}
.footer a{color:rgb(var(--primary-color))}
.footer h4{padding:0;margin:0;color:rgb(var(--primary-color))}
.footer-left{text-align:left;padding-left:10px}
.footer-middle{text-align:center}
.footer-right{text-align:right;padding-right:10px}
.footer-links{display:flex;flex-wrap:wrap;gap:1rem}
.footer-links a{white-space:nowrap;color:rgb(var(--primary-color))}
@media (max-width:600px){
.footer{grid-template-columns:1fr}
.footer-column{text-align:center}
}
#feedback-btn{}
label{color:rgb(var(--primary-color))}
/* nur für Export */
.export-checkbox {
display: inline-flex;
align-items: center;
gap: .4rem;
}
.export-checkbox input[type="checkbox"] {
width: auto;
}
#consent-block {
position: fixed;
bottom: 1rem;
right: 3rem;
z-index: 99999;
background: rgb(var(--bg-card));
padding: 1rem 1.5rem;
border-radius: var(--radius);
border:2px solid rgb(var(--warm-tone));
width:300px;
font-size:.9em;
}
#consent-block button {
background: rgb(var(--bg-page));
color: rgb(var(--text-main));
border: 3px solid rgb(var(--fresh-tone));
padding: 1em 0.8em;
border-radius: var(--radius);
cursor: pointer;
font-size:1em;
box-shadow: 5px 5px rgba(var(--shadow), 0.8);
}
.overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 50px;
z-index: 9999;
}
.overlay-content {
position: relative; /* wichtig für Button */
background: #fff;
max-width: 800px;
width: 90%;
padding: 20px;
border-radius: 8px;
overflow-y: auto; /* scrollbar bei langen Inhalten */
max-height: 80%;
box-shadow: 0 0 15px rgba(0,0,0,0.4);
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5em;
background: none;
border: none;
cursor: pointer;
z-index: 10;
color: #333; /* Kontrast zu Hintergrund */
}
.hidden {
display: none;
}