/* ALLGEMEIN */
:root{
    --color-accent:#009ee0;
    --color-yellow:#ffcc00;
    --color-red:#bb0a0a;
    --color-green:#a6c679;
    --color-lightgreen:#d4e6b5;
    --color-startbox:#0079aa;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,body{
	width:100%;
	height:100%;
    hyphens: auto;
}

body {
	border:0;
	margin:0;
	padding:0;
	font-family: 'Roboto', sans-serif;
	font-size:1rem;
	line-height:1.5;
	color:#3c3c3c;
	background-color:#ffffff;
}

#container {
	display: flex;
	flex-direction:row;
	height: 100vh;
	overflow:hidden;
}
.container-login {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/* LOGIN START */
.login-header {
    background: #fff;
    color: white;
    padding: 40px;
    text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 80px;
}
.login-header img {
	height: 75px; 
}
.login-main {
    flex: 1;
	position: relative;
    background-image:URL('../images/login-bg.jpg');
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
    padding:20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.login-box {
	background: rgba(255,255,255,0.8);
	padding: 40px;
	box-sizing:border-box;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	width: 530px;
	text-align: left;
}
.login-box-headline{
	font-size:2rem;
	margin-bottom:30px;
}
.login-box-text{
	margin-bottom:30px;
}
.login-box-subline{
	font-size:1.2rem;
	margin-top:30px;
}
.login-box-button-group {	
	display: flex;
	gap: 30px;
	margin-top:30px;	
}
.login-box-button{
	flex: 1;
}
.login-main-impressum {
	position: absolute;
	bottom: 20px;
	right: 20px;
}
.login-main-impressum a{
	color:#fff !important;
}
/* LOGIN ENDE */



/* SEITENLEISTE MENU */
.sidebar {
	width: 200px;
	flex-shrink: 0;
	background: #efefef;
	color: white;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100vh;
	min-height: 100vh;
	overflow: visible;   /* flyout-submenus dürfen seitlich überlappen */
}
.sidebar-logo{
	width:100%;
	margin:0 auto;	
	padding: 20px;
}
.sidebar-logo img{
	width:100%;
}
.sidebar-menutab{
	width:100%;
	color:#363636;
	padding: 10px 0 10px 20px;
	display: flex;
	cursor: pointer;
	transition: background 0.2s;
	position: relative;
}
.sidebar-menutab:hover {
	background-color: #e1e1e1;
}
.sidebar-menutab.active{
	background-color:#fbfbfb;
}
.sidebar-menutab-arrow{
	margin-left: auto; /* schiebt den Pfeil ganz nach rechts */
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
	margin-right: 15px;
	align-self: center;
}
.sidebar-menutab-line{
	border-top:1px solid #bfbfbf;
	margin-left:20px;
	margin-top:10px;
	width:80%;
	height:10px;
}

/* Profilbereich oben */
.sidebar-profile {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 10px;
	margin-top: auto;
}

.sidebar-profile-pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
	background-color:#ababab;
	overflow:hidden;
}
.sidebar-profile-pic img{
	width:100%;
	height:100%;
}

.sidebar-profile-text {
    display: flex;
    flex-direction: column;
	font-size:0.8rem;
	line-height:1.3;
    color: #363636;
}

/* Logout-Bereich unten */
.sidebar-logout {
    background-color: #111;
    color: white;
    padding: 10px 0 10px 20px;
    cursor: pointer;
}

.sidebar-logout:hover {
    background-color: #af4949;
}

/* --- Gruppen-Menü mit Flyout-Submenü --- */
.sidebar-group {
    position: relative;
}
.sidebar-group-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.sidebar-group-head {
    cursor: pointer;
    user-select: none;
}
/* Pfeil-Chevron im Gruppen-Header (zeigt nach rechts) */
.sidebar-group-chevron {
    margin-left: auto;
    margin-right: 14px;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    flex-shrink: 0;
    align-self: center;
    transition: transform 0.15s;
}
.sidebar-group:hover .sidebar-group-chevron {
    transform: rotate(45deg);  /* zeigt nach unten wenn geöffnet */
}
/* Hover-Stil des Gruppen-Headers bleibt erhalten, solange die Maus
   irgendwo innerhalb der Gruppe ist (inkl. flyout-Submenü) */
.sidebar-group:hover .sidebar-group-head {
    background-color: #e1e1e1;
}

/* Flyout-Submenü: erscheint rechts neben dem Gruppen-Header */
.sidebar-sublist {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 185px;
    background: #f8f8f8;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.18);
    border-radius: 0 6px 6px 0;
    border-left: 3px solid var(--color-accent);
    z-index: 200;
    padding: 4px 0;
}
.sidebar-group:hover .sidebar-sublist {
    display: block;
}
.sidebar-sublist a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.sidebar-sub-item {
    padding: 9px 14px 9px 12px;
    color: #363636;
    cursor: pointer;
    font-size: 0.88rem;
    transition: background 0.15s;
}
.sidebar-sub-item:hover {
    background: #ebebeb;
}
.sidebar-sub-item.active {
    background: #fff;
    font-weight: 600;
    color: var(--color-accent);
}

/* ================================================================
   HAUPTBEREICH — Layout
   #container
     .sidebar          (links, 200px, flex-shrink:0)
     #main-wrapper     (rechts, flex:1, flex-column)
       #topbar         (Kontextleiste, nur auf bestimmten Seiten)
       #main           (flex-row, flex:1)
         #main-content (scrollbarer Inhalt, flex:1)
         #sidepanel    (optional, z.B. bei Artikel / Druckeditor)
   ================================================================ */

#main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* kein overflow:hidden — sonst wird das KW-Dropdown abgeschnitten */
}

/* --- Topbar (Kontextleiste) --- */
#topbar {
    flex-shrink: 0;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    background: #fff;
    border-bottom: 2px solid var(--color-accent);
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: visible;   /* muss visible sein, damit KW-Dropdown nicht abgeschnitten wird */
    position: relative;
    z-index: 100;
}
.topbar-section {
    font-weight: 700;
    color: var(--color-accent);
    font-size: 1.1rem;
    min-width: 90px;
}
.topbar-sep {
    color: #ccc;
    margin: 0 2px;
}
.topbar-kw {
    font-weight: 600;
    color: #222;
}
.topbar-date {
    color: #888;
}
.topbar-badge {
    margin-left: auto;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.topbar-badge-open  { background: #d4e6b5; color: #2a5e0a; }
.topbar-badge-druck { background: #fff3cc; color: #7a5500; }
.topbar-badge-pub   { background: #c8e8f5; color: #005580; }

/* --- KW-Gruppe mit Hover-Dropdown --- */
.topbar-kw-group {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;   /* nimmt volle Topbar-Höhe = kein Hover-Gap zum Dropdown */
    gap: 6px;
    padding: 0 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}
.topbar-kw-group:hover {
    background: #f0f8ff;
}
.topbar-kw-arrow {
    font-size: 0.7rem;
    color: #aaa;
    margin-left: -2px;
}
/* Dropdown */
.topbar-kw-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 295px;
    background: #fff;
    border: 1px solid #dde6ed;
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    z-index: 400;
    padding: 4px 0;
}
.topbar-kw-group:hover .topbar-kw-dropdown {
    display: block;
}
.topbar-kw-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    text-decoration: none;
    color: #333;
    font-size: 0.84rem;
    transition: background 0.12s;
}
.topbar-kw-item:hover {
    background: #f4f8fb;
}
.topbar-kw-item.current {
    background: #e6f4ff;
    font-weight: 600;
}
.kwi-kw   { font-weight: 500; min-width: 96px; }
.kwi-date { color: #999; flex: 1; }
.kwi-dots { display: flex; gap: 3px; flex-shrink: 0; }
.kw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.kw-dot-art { background: var(--color-accent); }
.kw-dot-anz { background: var(--color-yellow); }
.topbar-kw-sep {
    border-top: 1px solid #eee;
    margin: 4px 0;
}
.topbar-kw-all {
    display: block;
    padding: 7px 14px;
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
    transition: background 0.12s;
}
.topbar-kw-all:hover {
    background: #f4f8fb;
}

/* --- Notdienste Live-Vorschau (Sidepanel) --- */
.nd-preview-outer {
    padding: 10px;
    background: #ebebeb;
    border-radius: 4px;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}
#nd-preview {
    background-color: #bfbfbf;
    padding: 6px 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 10pt;
    line-height: 1.4;
}
#nd-preview h2 {
    color: #000;
    font-size: 14pt;
    border-bottom: 1px solid #000;
    padding-bottom: 4px;
    margin: 0 0 10px 0;
}
#nd-preview h3 {
    border-bottom: 1px solid #000;
    padding-bottom: 4px;
    margin: 0.9em 0 4px 0;
    font-size: 12.5pt;
    font-weight: 700;
}
#nd-preview p {
    margin: 0.35em 0;
    border-bottom: 1px solid #000;
}
#nd-preview .notdienste-icon {
    width: 38px;
    height: auto;
    vertical-align: middle;
}

/* --- Archiv-Seite --- */
.archiv-intro {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 24px;
}
.archiv-year-block {
    margin-bottom: 28px;
}
.archiv-year {
    font-size: 1.3rem;
    color: var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 4px;
    margin-bottom: 10px;
}
.archiv-kw-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.archiv-kw-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.83rem;
    background: #fafafa;
    transition: all 0.13s;
    min-width: 112px;
}
.archiv-kw-item:hover {
    background: #e6f4ff;
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.archiv-kw-item.has-content {
    background: #f0f7fd;
    border-color: #b8d8ef;
}
.archiv-kw-item.is-future {
    border-style: dashed;
    color: #555;
}
.archiv-kw-item.is-current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,158,224,0.35);
}
.archiv-kw-item.is-current:hover {
    background: #007ab8;
    border-color: #007ab8;
    color: #fff;
}
.archiv-kw-item.is-current .archiv-kw-date,
.archiv-kw-item.is-current .archiv-kw-nr {
    color: #fff;
}
.archiv-kw-nr   { font-weight: 600; }
.archiv-kw-date { color: #999; }
.archiv-kw-dots { display: flex; gap: 3px; margin-left: auto; }
.archiv-legend {
    margin-top: 28px;
    padding: 10px 14px;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.archiv-legend-future {
    color: #aaa;
    font-size: 0.75rem;
}

/* --- Rechnungsadresse Formular-Layout --- */
.re-name-row {
    display: flex;
    gap: 14px;
    margin-top: 0;
}
.re-name-col {
    flex: 1;
    min-width: 0;
}
.re-plz-col {
    width: 100px;
    flex-shrink: 0;
}
.re-ort-col {
    flex: 1;
    min-width: 0;
}
.re-name-col .textfeld,
.re-plz-col  .textfeld,
.re-ort-col  .textfeld {
    width: 100%;
    box-sizing: border-box;
}
.form-hint {
    color: #888;
    font-size: 0.85rem;
    margin: 0 0 12px 0;
}

/* --- Main-Bereich (Content + optionaler Sidepanel) --- */
#main {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
}

#main-content {
	flex: 1;
	display: flex;
    position: relative;
	flex-direction: column;
	background: #fff;
	padding: 40px;
	overflow-y: auto;
	min-height: 0;   /* kein 100vh mehr — flex-scroll funktioniert sonst nicht */
}
#main-content[data-bereich="anzeigeneditor"],
#main-content[data-bereich="composer"] {
    padding: 0;
}
#main-content[data-bereich="chat"] {
    overflow: hidden;
}

/* optionaler rechter Bereich */
#sidepanel {
	width: 370px;
	flex-shrink: 0;
	background: #fff;
	padding: 20px;
	box-shadow: 0 0px 20px rgba(0,0,0,0.2);
	overflow-y: auto;
}

/* Alter #status innerhalb von Seiten-Inhalten (sticky innerhalb #main-content) */
#status {
    position: sticky;
    top: -40px;
    background-color: #fff;
    z-index: 10;
}

/* DASHBOARD */
.dashboard-next-anzeiger{
	display: flex;
	gap: 40px;
	background-color:#f9f9f9;
	padding:20px;
}
.dashboard-next-anzeiger-item{
	flex: 1;
	justify-content: center;
	align-items: center;
}
.dashboard-next-anzeiger-progessbg{
	display: flex;
	width:100%;
	background-color:#dfdfdf;
	height:20px;
}
.dashboard-next-anzeiger-progess{
	width:50%;
	background-color:#a6c679;
	height:20px;
}
.dashboard-next-anzeiger-infotext{
	font-size:0.7rem;
}
.dashboard-next-anzeiger-text{
	font-size:1.7rem;
}

.dashboard-container {
	display: flex;  
	flex-wrap: wrap;
	gap: 60px;
	margin-top:40px;
}

.dashboard-column {
	width:100%;
}

.dashboard-column-left,
.dashboard-column-center {
  flex: 1;
}

.dashboard-column-right {
  flex: 0.7;
}

.dashboard-column-article{
	display: flex;
	gap: 20px;
	margin-bottom:30px;
}
.dashboard-column-article-content{
	font-size:1.3rem;
	flex-direction: column;
}
.dashboard-column-article-content img{
	width:100%;
}
.dashboard-column-article-content-headline{
	font-weight:600;
}
.dashboard-column-article-content-infos{
	font-size:0.6rem;
	line-height:1.1rem;		
}
.dashboard-column-article-content-text{
	font-size:0.9em;
	line-height:1.1rem;
	height:75px;
}
.dashboard-column-article-content-text-werbung{
	font-size:0.9em;
	line-height:1.1rem;
	height:46px;
}

/* ── DASHBOARD NEU ──────────────────────────────────────── */

/* --- Zeitleiste ----------------------------------------- */
.db-timeline-section {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 20px 10px;
    margin-bottom: 24px;
}
.db-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 12px;
}
.db-timeline-header-left  { text-align: left; }
.db-timeline-header-right { text-align: right; }
.db-timeline-header-center { flex: 1; text-align: center; }
.db-tl-label-small { font-size: 0.9rem; color: #888; text-transform: uppercase; letter-spacing: .04em; }
.db-tl-label-date  { font-size: 1.1rem; font-weight: 600; color: #333; }

/* KW-Boxen links und rechts im Timeline-Header */
.db-tl-kw-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 6px 4px;
    border-radius: 6px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.db-tl-kw-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 2px;
}
.db-tl-kw-num {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
}
.db-tl-kw-past { background: #ebebeb; color: #bbb; }
.db-tl-kw-next { background: var(--color-accent); color: #fff; }

.db-tl-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}
.db-tl-badge-open     { background: #e8f6e8; color: #2a7a1e; }
.db-tl-badge-deadline { background: #fff0e0; color: #c05000; }

/* Bar */
.db-timeline-bar-wrap {
    position: relative;
    height: 18px;
    background: #e0e0e0;
    border-radius: 9px;
    overflow: visible;
    margin-bottom: 6px;
}
.db-timeline-fill {
    position: absolute;
    top: 0;
    height: 18px;
    border-radius: 9px;
    pointer-events: none;
}
.db-tl-green  { background: var(--color-green); }
.db-tl-orange { background: #e87722; }

/* Redaktionsschluss-Marker (senkrechte Linie + Dreieck) */
.db-timeline-marker-schluss {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 26px;
    background: #e87722;
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 2;
    cursor: default;
}
.db-timeline-marker-schluss.past { background: #bb0a0a; }

/* Jetzt-Marker (Dreieck unten) */
.db-timeline-marker-now {
    position: absolute;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid var(--color-accent);
    transform: translateX(-50%);
    z-index: 3;
    cursor: default;
}

/* Label "Redaktionsschluss" ÜBER dem Balken */
.db-timeline-superlabels {
    position: relative;
    height: 20px;
    margin-bottom: 3px;
}
.db-tls-schluss-top {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e87722;
    white-space: nowrap;
    bottom: 0;
}
.db-tls-schluss-top.past { color: #bb0a0a; }

/* Sub-Labels unterhalb der Bar */
.db-timeline-sublabels {
    position: relative;
    height: 18px;
    margin-top: 8px;
    font-size: 0.82rem;
    color: #aaa;
}
.db-tls-left    { position: absolute; left: 0; }
.db-tls-right   { position: absolute; right: 0; }
.db-tls-schluss {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    color: #aaa;
    font-weight: 400;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* --- 3-Spalten Layout ----------------------------------- */
.db-columns {
    display: flex;
    gap: 20px;
    align-items: stretch;   /* alle Kästen gleich hoch */
}
.db-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px;
    min-width: 0;
}
.db-col-right { flex: 0.85; }

.db-col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 8px;
}
.db-col-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-accent);
}
.db-col-head-link {
    font-size: 0.85rem;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.db-col-head-link:hover { text-decoration: underline; }

.db-more-hint {
    font-size: 0.85rem;
    color: #999;
    text-align: center;
    padding: 6px 0 2px;
}

.db-col-hint {
    font-size: 0.9rem;
    color: #c05000;
    margin-bottom: 8px;
    font-weight: 600;
}
.db-empty-hint {
    font-size: 0.9rem;
    color: #2a7a1e;
    padding: 12px 0;
}
.db-check { font-size: 1.1rem; }

/* Artikel/Anzeigen-Einträge */
.db-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    transition: background .12s;
}
.db-item:hover { background: #f5f9ff; border-radius: 4px; }
.db-item-thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 3px;
    background: #f0f0f0;
}
.db-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.db-item-main { flex: 1; min-width: 0; }
.db-item-title {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #222;
}
.db-item-meta { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
.db-item-cat, .db-item-author {
    font-size: 0.9rem;
    background: #f0f0f0;
    color: #555;
    padding: 1px 7px;
    border-radius: 10px;
}
.db-item-author { background: #e8f0ff; color: #3a5aad; }
.db-badge-color { background: #fff0e0 !important; color: #c05000 !important; }
.db-badge-sw    { background: #eeeeee !important; color: #555 !important; }

.db-item-status {
    font-size: 0.9rem;
    color: #fff;
    padding: 3px 9px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
}

.db-col-link {
    display: block;
    margin-top: auto;
    padding-top: 10px;
    font-size: 0.9rem;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}
.db-col-link:hover { text-decoration: underline; }
/* .db-col-link-stats — nicht mehr genutzt (Link jetzt im Spalten-Header) */

/* --- Statistik-Raster (rechte Spalte) ------------------- */
.db-stat-grid { display: flex; flex-direction: column; gap: 2px; }
.db-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.9rem;
}
.db-stat-label { color: #666; flex-shrink: 0; padding-right: 8px; }
.db-stat-label a { color: inherit; text-decoration: none; border-bottom: 1px dotted #aaa; }
.db-stat-label a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.db-stat-value { text-align: right; min-width: 0; }
.db-stat-num   { font-size: 1.2rem; font-weight: 700; color: #222; line-height: 1; }
.db-stat-icon  { font-size: 1rem; font-weight: 700; }
.db-stat-sub   { display: inline-block; font-size: 0.9rem; color: #888; margin-left: 4px; }
.db-stat-title-hint { font-size: 0.9rem; color: #999; margin-top: 2px; }
.db-stat-ok    { color: #2a7a1e !important; }
.db-stat-warn  { color: #c05000 !important; }
.db-stat-error { color: #bb0a0a !important; }
.db-stat-jk-bar-wrap { width: 100%; height: 6px; background: #e0e0e0; border-radius: 3px; margin: 4px 0 2px; }
.db-stat-jk-bar-fill { height: 6px; border-radius: 3px; background: #2a7a1e; transition: width 0.3s; }
.db-stat-jk-bar-fill.db-stat-warn  { background: #c05000; }
.db-stat-jk-bar-fill.db-stat-error { background: #bb0a0a; }

/* --- Statistik-Seite (statistik.php) -------------------- */
.page-sub-title { font-weight: 400; color: #888; font-size: 0.85em; }

.stat-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}
@media (max-width: 900px) {
    .stat-charts-grid { grid-template-columns: 1fr; }
    .db-columns { flex-direction: column; }
}

.stat-chart-box {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px;
}
.stat-chart-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #555;
    margin-bottom: 10px;
}
.stat-chart-box canvas { max-height: 200px; }

.stat-table-title { margin: 0 0 10px; font-size: 1rem; }
.stat-table-wrap  { overflow-x: auto; }
.stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.stat-table th {
    background: var(--color-accent);
    color: #fff;
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 5;
}
.stat-table td {
    padding: 7px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.stat-table tr:hover td { background: #f5f9ff; }
.stat-td-num { text-align: center; }
.stat-total-sub { color: #aaa; font-size: 0.9em; }
.stat-badge-color {
    display: inline-block;
    background: #fff0e0; color: #c05000;
    padding: 2px 8px; border-radius: 10px;
    font-size: 0.9rem; font-weight: 700;
}
.stat-badge-sw {
    display: inline-block;
    background: #eee; color: #555;
    padding: 2px 8px; border-radius: 10px;
    font-size: 0.9rem; font-weight: 700;
}
.stat-table a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
.stat-table a:hover { text-decoration: underline; }

/* Submenu */

.submenu {
	display: flex;  
	gap: 60px;
	background-color:#f6f6f6;
	padding:15px;
	border-radius:15px;
	margin-bottom:20px;
}

.submenu-item{
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight:600;
}
.submenu-item-text{
    cursor:pointer;
	border-bottom:2px solid transparent;
}
.submenu-item.active .submenu-item-text{
	border-bottom:2px solid #373737;
}

.meldung-new{
	display: flex; 
	flex:1;	
	gap: 60px;
	overflow:auto;
	align-self: center;
	justify-content: center;
	align-items: center;
}
.meldung-new-content{
	/* flex: 0.8;	
    min-width:600px; */
}
.meldung-new-arrow{
	flex: 0.1;
	display: flex;
	justify-content: center;
	align-items: center;
    cursor: pointer;
}
.meldung-new-arrow._back .meldung-arrow{
    transform: rotate(135deg);
	margin-left:32px;
}
.meldung-arrow-btn{
	width: 80px;
    height: 80px;
    border-radius: 50%;
	overflow:hidden;
	background-color:#d6d6d6;
	opacity:0.5;
}
.meldung-arrow{
	margin-left:24px;
	margin-top:26px;
    width: 25px;
    height: 25px;
    border-right: 4px solid currentColor;
    border-bottom: 4px solid currentColor;
    transform: rotate(-45deg);
	align-self: center;
}
.meldung-new-two-content {
	display: flex;  
	flex-wrap: wrap;
	gap: 60px;
	margin-top:40px;
}
.meldung-new-two-content-box {
  flex: 1;
}
.box-digital{
    padding:10px;
    background-color:#ebf1f3;
}
.meldung-bildupload{
	width:100%;
	border-radius:10px;
	border:1px solid grey;
	height:240px;
	background-image:URL('../images/icon-bildupload2.png');
	background-repeat:no-repeat;
	background-position:center;
    background-size:contain;
    position: relative;
    cursor:pointer;
}
.meldung-bildupload:hover{
    box-shadow:0 0 6px rgba(0,0,0,0.5);
}
.meldung-bildupload.dragover{
    border-color:var(--color-yellow);
    box-shadow:0 0 12px rgba(255,204,0,0.5);
    background-color:#f9f9f0;
}
.meldung-bildupload._loading::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:48px;
    height:48px;
    background-image:url('../images/loading.gif');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    z-index:5;
}
.meldung-bild-item{
    display: inline-block;
    width: 200px;
    margin: 5px;
    position: relative;
    text-align: center;
}
.meldung-bild-item-img{
    width: 100%;
    aspect-ratio:calc(4 / 3);
    object-fit: cover;
    /* border-radius: 8px; */
}
.meldung-bild-item-loeschen{
    position:absolute;
    top:0;
    right:0px;
    cursor: pointer;
}

.meldung-termine-headline{
    font-size:1.2rem;
    font-weight:600;
    margin-bottom:10px;
}
.meldung-termin-block{
    margin-bottom:1em;
    /* padding-bottom:1em; */
    /* border-bottom:1px solid #666666; */
}
.meldung-termin-top{
    /* font-size:1.2rem; */
    font-weight:600;
    /* margin-bottom:10px; */
}
.meldung-termin-eintrag{
    /* margin-bottom:0.4em; */
}
.meldung-termin-eintrag:last-child{
    /* margin-bottom:10px; */
}
.meldung-termin-time{
    display:inline-block;
    vertical-align:top;
    width:5.0rem;
    margin-right:0.5rem;
}
.meldung-termin-description{
    display:inline-block;
    vertical-align:top;
    width:calc(100% - 6rem);
}
.meldung-termin-eintrag + .meldung-termin-top{
    margin-top:10px;
}

.uploadinput{
    opacity:0;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    cursor:pointer;
    display:none;
}

.preview-box {
  display: inline-block;
  width: 80px;
  margin: 5px;
  position: relative;
  text-align: center;
}

.preview-box img {
  width: 100%;
  max-height: 100px;
  object-fit: cover;
  border-radius: 8px;
}
.progress {
    width: 100%;
    height: 6px;
    background: #eee;
    margin-top: 4px;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: #4caf50;
    transition: width 0.2s;
}

.meldung-container, .anzeigen-container{
    display: flex;
    flex-flow: column nowrap;
    gap: 0px;
    transition: transform 0.5s ease-in-out;
    width:100%;
    align-items:center;
}
.anzeigen-container{
    /* align-items:flex-start; */
}
.anzeigen-box-headline{
    border-bottom:1px solid #d0d0d0;
    /* margin-top:50px; */
    background-color:#eeeeee;
    padding:10px;
    position:sticky;
    top:-40px;
    z-index:9;
    margin-left:-40px;
    width:calc(100% + 80px);
    padding:10px 40px;
}
.meldung-box, .anzeigen-box{
    /* flex: 0 0 100%;
    display:flex; */
    flex-direction:column;
    justify-content: center;
    width:100%;
    max-width:600px;
    margin-bottom:50px
}
.schlagworte-container{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height:190px;
    overflow-y:auto;
    border:1px solid #d0d0d0;
    padding:10px;
    border-radius:10px;
}

.overflow-container{
    overflow:hidden;
    width:100%;
    height: 100%;
}

.meldung-previews{
    display: flex;
    flex-direction: column;
    gap: 10px;
    height:100%;
    hyphens:auto;
    overflow-wrap: break-word;
    word-break: normal;
}
.meldung-preview-short{
    flex:0 1 0%;
}
.meldung-preview{
    flex:1 1 75%;
    overflow-y:auto;
}
.meldung-preview-headline{
    font-size:1rem;
    background-color:var(--color-accent);
    color:#ffffff;
    padding:5px;
}
.meldung-preview-headline._arrow::after{
    content:'';
    float:right;
    width: 10px;
    height: 10px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-135deg);
    margin-top:8px;
    margin-right:5px;
    transition:transform 0.3s, margin 0.3s;
    transform-origin:50% 50%;
}
.meldung-preview-headline._closed._arrow::after{
    transform: rotate(45deg);
    margin-top:5px;
}
.meldung-tabs{
    display: flex;
    gap:10px;
    margin-top:10px;
    margin-bottom:10px;
}
.meldung-tab{
    padding:5px 10px;
    border:1px solid #d0d0d0;
    border-radius:10px;
    cursor:pointer;
}
.meldung-tab.active{
    background-color:var(--color-accent);
    color:#ffffff;
    border-color:var(--color-accent);
}
.meldung-tab-content-container{
    /* min-width:500px;
    min-width:615px;
    min-height:600px; */
}
.meldung-tab-content{
    display:none;
}
.meldung-tab-content.active{
    display:block;
}

.meldung-termine{
    overflow-y:auto;
    max-height:60vh;
}
.meldung-termine-tag{
    margin:20px 0;
    border-top:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
    padding:20px 0;
}
.meldung-termine-eintraege{
    display: flex;
    flex-direction: column;
    gap:15px;
    /* background-color:#f9f9f9; */
    padding:10px 15px;
    margin-top:5px;
    margin-left:30px;
}
.meldung-termine-eintrag{
    position:relative;
}
.meldung-termine-eintrag::before{
    content:'-';
    display:block;
    font-size:2rem;
    position:absolute;
    left:-20px;
    top:20px;
}
.meldung-termine-head{
    background-color:#dddddd;
}
.meldung-termine-table{
    border:1px solid #888888;
    overflow:visible;
    width:100%;
}
.meldung-termine-table tbody{
    border-top:2px solid #000000;
}
.meldung-termine-table td{
    padding:4px;
    border:1px solid #888888;
}
.meldung-termine-table input{
    width:100%;
    font-size:inherit;
}
.meldung-termine-body td:first-child{
    width:160px;
}


.no-input{
    background:transparent;
    padding:3px;
    margin:0;
    border:0;
    border-radius:0;
    appearance: none;
}
.template{
    display:none;
}

/* Anzeigen */
.anzeige-type-boxes{
    display: flex;
    gap: 30px;
    justify-content: center;
}
.anzeige-type-box{
    display:flex;
    flex-flow:column nowrap;
    gap:15px;
    position:relative;
    padding:20px;
    border:1px solid #d0d0d0;
    border-radius:10px;
    width:250px;
    transition:box-shadow 0.3s;
}
.anzeigen-preview-klein{
    padding:20px;
    border:1px solid #000000;
}
.anzeigen-preview-klein-headline{
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:10px;
    text-align:center;
    line-height:1.2;
}
.anzeigen-preview-klein-text{
    font-size:1.0rem;
    font-weight:400;
    text-align:center;
    line-height:1.25;
}
.anzeigen-preview-klein-text p:last-child{
    margin-bottom:0;
}
.anzeige-type-box:hover{
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.anzeige-type-box a{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
.anzeigen-previews{
    display: flex;
    flex-direction: column;
    gap: 10px;
    height:100%;
}
.anzeigen-preview{
    flex:1 1 75%;
    overflow-y:auto;
    scrollbar-width: none; 
}
.anzeigen-preview::-webkit-scrollbar {
    display: none;
}
.anzeigen-preview img{
    width:100%;
    height:auto;
    overflow-y:auto;
}
.anzeigen-price{
    flex:1 1 28%;
    margin-top:auto;
    overflow-y:auto;
}
.anzeigen-table{
    margin:0 auto;
}
.table.anzeigen-table td{
    padding-top:10px;
    padding-bottom:10px;
}
.anzeigen-table tr._active td{
    background-color:#ffffaa !important;
    font-weight:700;
}

/* Übersicht */

.kategorie-headline {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 10px;
    background-color: #e6f1fb;
    margin-top: 30px;
    border-left: 15px solid #93a1c4;
    padding-left: 20px;
}

.kategorie-item._level1 .kategorie-headline{
    padding-left: 10px;
    background-color: #f7f6e9;
	border:0;
}
.kategorie-item._level2 .kategorie-headline{
    background-color:#cccccc;
}
.benutzer-bubble{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:36px;
    height:36px;
    border-radius:50%;
    font-size:1.2rem;
    font-weight:700;
    color:#ffffff;
    /* text-shadow: 0 1px 3px #ffffff; */
}

.kategorie-icon{
    height:30px;
    width:auto;
    margin-right:10px;
    vertical-align:middle;
}

.kategorie-v-item{
    font-size: 1.3rem;
    font-weight: 700;
    padding: 5px;
    background-color: #e6f1fb;
    margin-top: 15px;
    border-left: 15px solid #93a1c4;
    padding-left: 10px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}

.meldung-item{
    display: flex;
    flex-flow: row nowrap;
    gap:30px;
    padding:10px;
    border-bottom:1px solid #bcbcbc;
	padding-left:40px;
	padding-left:0px;
    justify-content: space-between;
}
.meldung-item-header{
    flex:0 0 25%;
}
.meldung-item-body{
    flex:0 0 50%;
    flex:0 1 40%;
    flex:0 1 20%;
}
.meldung-item-header-buttons{
    display:flex;
    gap:10px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 0 1 auto;
}
.meldung-item-buttons{
    flex:0 0 25%;
    text-align:right;
}
.meldung-leer{
    padding:5px;
    font-style:italic;
	opacity:0.5;
}
.meldung-item-icon{
    height: 30px;
    width: auto;
    margin-left: auto;
    vertical-align: middle;
}

.legend-status{
    display:flex;
    gap:10px;
    flex-flow:row wrap;
    justify-content: flex-start;
}
.legend-status-item{
    flex:0 1 210px;
    white-space: nowrap;
}

/* Printer */
.printer-headline {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 5px;
    background-color: #e6f1fb;
    margin-top: 15px;
    border-left: 15px solid #93a1c4;
    padding-left: 10px;
    display:flex;
    flex-flow:row nowrap;
    justify-content:flex-start;
}

.printer-item{
    display: flex;
    flex-direction: row nowrap;
    gap:15px;
    padding:5px;
    border-bottom:1px solid #bcbcbc;
	padding-left:20px;
}
.printer-item-header{
    flex:0 0 50%;
}
.printer-item-buttons{
    flex:0 0 50%;
    text-align:right;
}
.printer-filler{
    display:none;
    position:fixed;
    top:100px;
    bottom:100px;
    left:20%;
    right:20%;
    padding:20px;
    background-color:#ffffff;
    box-shadow:0 0 12px rgba(0,0,0,0.3);
    overflow-y:auto;
}
.printer-filler-item{
    display: flex;
    flex-direction: row nowrap;
    gap:15px;
    padding:5px;
    border-bottom:1px solid #bcbcbc;
    padding-left:20px;
    cursor:pointer;
}
.printer-filler-item:hover{
    background-color:#fff8bb;
}
.printer-filler-image{
    height: 30px;
    transition:0.5s;
    pointer-events:none;
    transform-origin:left;
}
.printer-filler-item:hover .printer-filler-image{
    transform:scale(4);
}
.printer-filler-close{
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
}

/* Artikel Sidepanel Preview */
.printframe{
    width:100%;
    height:100vh;
    overflow:auto;
    border:0;
}
.previewframe{
	width:370px;
	height:100vh;
	margin-left:-20px;
	margin-top:-20px;
	overflow:auto;
	border:0;
}
.meldung-item-kommentar{
    display:inline-block;
    background-color:var(--color-yellow);
    color:#000000;
    font-weight:600;
    width: 28px;
    height:28px;
    line-height:28px;
    border-radius:50%;
    text-align:center;
    cursor:pointer;
    margin-left:10px;
    font-size:1.6rem;
    vertical-align:middle;
}

.meldung-item-kommentar {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.meldung-item-kommentar::before {
    content: attr(data-text);
    position: absolute;
    bottom: 120%;            /* position above element */
    right: 0;
    left: auto;
    transform: none;
    background: #ffffff;
    color: #000000;
    font-weight:400;
    padding: 10px 14px;
    border-radius: 6px;
    border:1px solid #cccccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: normal;
    width: max-content;
    max-width: 350px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 10;
    white-space: pre-line;
    font-size:1rem;
    line-height:1.3;
    text-align:left;
}
/* Show tooltip on hover */
.meldung-item-kommentar:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Artikel preview */
figure{
    margin:0;
    padding:0;
    display:inline-block;
}
figcaption{
    color:#777777;
    margin-top:5px;
    text-align:left;
}
figcaption .artikel-bild-text{
    font-style:italic;
    font-size:0.9rem;
    margin:0;
}
figcaption .artikel-bild-copy{
    margin:0;
    font-style:normal;
    font-size:0.7rem;
    text-align:right;
}

.artikel-box{
	width:100%;
	border-top:1px solid grey;
	border-bottom:1px solid grey;
	box-sizing:border-box;
	padding-top:30px;
	width:100%;
	padding-bottom:30px;
	margin-bottom:15px;
}
.artikel-box-content{
	margin:0 auto;
}
.artikel-box-kategorie{
	font-size:0.8rem;
	color:#007194;
	margin-bottom:10px;
}
.artikel-box-headline{
	font-size:1.3rem;
	color:#707070;
	font-weight:600;
}
.artikel-details-text h3{
    font-size:1.15rem;
    color:#707070;
    font-weight:600;
    margin: 1rem 0;
}
.artikel-details-text img{
    max-width:100%;
    height:auto;
}
.artikel-box-teasertext{
	width:100%;
	margin-bottom:20px;
	color:#595959;
}
.artikel-box-bild{
	width:100%;
	/* aspect-ratio:2; */
	margin-bottom:10px;
    text-align:center;
}
.artikel-box-bild img{
    max-width:100%;
    object-fit: cover;
}
.artikel-box-footer{
	width:100%;
	height:30px;
}
.artikel-box-footer-left{
	float:left;
	font-size:0.9rem;
	padding-top:5px;
	color:#595959;
}
.artikel-box-footer-left-image{
	float:left;
	width:30px;
}
.artikel-box-footer-right{
	float:right;
	width:30px;
}
.artikel-box-footer-left-image img{
	width:100%;
}
.artikel-box-footer-right img{
	width:100%;
}

/* Artikel-Detailseite */
.artikel-details{
	margin:0 auto;
	line-height:1.4;
}
.artikel-details-topbar{
	float:left;
	width:100%;
	margin-bottom:15px;
}
.artikel-details-footerbar{
	float:left;
	width:100%;
	height:100px;
	margin-top:15px;
	margin-bottom:40px;
}
.artikel-details-bild{
	width:100%;
	margin-bottom:10px;
    text-align:center;
}

.artikel-details-bild img{
    max-width:100%;
    height:auto;
}

.artikel-details-bilder{
    margin-top:20px;
    padding-top:20px;
    position:relative;
    display:none;
    aspect-ratio: 4 / 3;
    background-size:cover;
    background-position:center;
}
.artikel-details-bilder-counter{
    position:absolute;
    bottom:0;
    right:0;
    font-size:0.8rem;
    color:#999999;
    background-color:#f0f0f0;
    padding:5px 10px;
    border-radius:10px;
}
.artikel-view-box{
    padding:20px;
    background-color:#ffffff;
    box-shadow:0 0 12px rgba(0,0,0,0.2);
    border:1px solid #cccccc;
    max-width:600px;
}

/* Anzeige */
.anzeige-box{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding:20px;
    border:1px solid #d0d0d0;
    border-radius:10px;
    position:relative;
}
.anzeige-kw{
    padding:3px;
}
.anzeige-kw.current{
    background-color:var(--color-accent);
    color:#ffffff;
    padding:3px;
    border-radius:3px;
}
.anzeige-preview{
    flex:0 0 70px;
}
.anzeige-preview img{
    width:70px;
    height:auto;
    border:1px solid #000000;
    background-color:#ffffff;
}
.anzeige-preview:hover img{
    box-shadow:0 0 6px rgba(0,0,0,0.5);
    transform:scale(5);
    pointer-events:none;
    border:0;
}
.anzeigen-list{
    width:300px;
    height:90vh;
    overflow-y:auto;
}
.anzeigen-list-item{
    border:1px solid #000000;
    margin-bottom:20px;
}
.anzeigen-list-item img{
    width:200px;
    height:auto;
}
.anzeigen-pages{
    max-height:90vh;
    overflow-y:auto;
}

.anzeigen-page{
    height:100%;
    aspect-ratio:0.707;
    border:1px solid #000;
    display:inline-block;
    vertical-align:top;
    margin:0 0%;
    box-sizing:border-box;
    overflow:auto;
    border:1px solid #000000;
    padding:20px;
}
.anzeigen-page-column{
    width:48%;
    height:100%;
    display:inline-block;
    vertical-align:top;
    margin-right:2%;
    box-sizing:border-box;
    background-color:#eeeeee;
}


/* kalender */
.kalender-menu{
    display: flex;  
    gap: 10px;
    margin-bottom:30px;
}
.kalender-menu-item{
    padding:10px 20px;
    border:1px solid #d0d0d0;
    border-radius:10px;
}
.kalender-menu-item.active{
    background-color: var(--color-accent);
}
.kalender-menu-item.active a{
    color:#ffffff;
}
.kalender{
    /*max-width:1000px;*/
	width:100%;
    border-radius:12px;
    overflow:hidden;
    box-shadow: 0 0 12px rgba(0,0,0,0.1);
    position:relative;
}
.kalender-header{
    color:#ffffff;
    text-align:center;
    font-weight:600;
    text-align: center;
}
.kalender-header .kalender-cell{
    background-color:var(--color-accent) !important;
}
.kalender-row{
    display: flex;
    flex-flow:row nowrap;
    border-bottom:1px solid #d0d0d0;
    justify-content: space-evenly;
}
.kalender-cell{
    flex: 1;
    padding:10px;
    border-right:1px solid #d0d0d0;
    text-align:right;
    min-height:50px;
    transition:box-shadow 0.3s;
    position:relative;
}
.kalender-row:not(.kalender-header) .kalender-cell:hover{
    outline:var(--color-yellow) 3px solid;
    background-color:#e0e0e0;
    cursor:pointer;
    box-shadow:0 0 10px rgba(0,0,0,0.3);
    z-index:4;
}
.kalender-cell:first-child{
    flex-basis:50px;
    flex-grow:0;
    border-right:1px solid #000000;
}
.kalender-cell:first-child{
    text-align:center;
    background-color:#eeeeee;
}
.kalender-header .kalender-cell:first-child{
    background-color:var(--color-accent);
}
.kalender-cell-weeknumber{
    font-size:0.8rem;
    color:#999999;
}
.kalender-row:nth-child(even) .kalender-cell:nth-child(even){
    background-color:#f9f9f9;
}
.kalender-row:nth-child(odd) .kalender-cell:nth-child(even){
    background-color:#f0f0f0;
}
.kalender-row:nth-child(odd) .kalender-cell:nth-child(odd){
    background-color:#f9f9f9;
}
.kalender-row:nth-child(even) .kalender-cell:nth-child(odd){
    background-color:#f0f0f0;
}

.kalender-row:nth-child(even) .kalender-cell._odd-month:nth-child(even){
    background-color:#f9f9ff;
}
.kalender-row:nth-child(odd) .kalender-cell._odd-month:nth-child(even){
    background-color:#f0f0ff;
}
.kalender-row:nth-child(odd) .kalender-cell._odd-month:nth-child(odd){
    background-color:#f9f9ff;
}
.kalender-row:nth-child(even) .kalender-cell._odd-month:nth-child(odd){
    background-color:#f0f0ff;
}

.kalender-cell-outside{
    color:#999999 !important;
    background-color:#cccccc !important;
}
.kalender-cell-today{
    outline:var(--color-accent) 2px solid;
    font-weight:600;
    z-index:3;
}

.kalender-legende{
    margin-bottom:20px;
}
.kalender-legende img{
    height:24px;
    margin-right:10px;
}

.kalender-popup{
    display:none;
    position:absolute;
    background-color:#ffffff;
    box-shadow:0 0 12px rgba(0,0,0,0.2);
    border-radius:10px;
    padding:20px;
	padding-right:55px;
    /*padding-top:30px;*/
    /* width:300px; */
    z-index:6;
    display:flex;
    flex-direction:row nowrap;
    gap:20px;
}
.kalender-popup-close {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 1.7rem;
    cursor: pointer;
    background-color: var(--color-red);
    width: 30px;
    height: 30px;
    text-align: center;
    color: #fff;
    line-height: 1.1em;
}
.kalender-popup-item{
    opacity:0.4;
    transition: opacity 0.3s;
    cursor:pointer;
}
.kalender-popup-item:hover{
    opacity:1;
}
.kalender-popup-item img{
    height:40px;
    width:auto;
}
.kalender-cell._type1, .kalender-cell._type2, .kalender-cell._type3{
    background-position:bottom left;
    background-size:40px;
    background-repeat:no-repeat;
}
.kalender-cell._type1{
    background-color:#d9e8b9 !important;
    background-image:url('../images/icon-amtsblatt.png');
	background-position-x:10px;
	background-position-y:10px;
}
.kalender-cell._type2{
    background-color:#a8c3e2 !important;
    background-image:url('../images/icon-redaktionsschluss.png');
	background-position-x:10px;
	background-position-y:10px;
}
.kalender-cell._type3{
    background-color:#e4d5a5 !important;
    background-image:url('../images/icon-feiertag.png');
	background-position-x:10px;
	background-position-y:10px;
}

.kalender-auto{
    border-radius:12px;
    border:1px solid #cccccc;
    margin-bottom:10px;
	display:flex;
	width:100%;
	align-items:center;
}
.kalender-auto-entry{
	flex:auto;
	padding:10px;
}
.kalender-auto-firstentry{
	flex:auto;
	padding:20px;
	background-color:var(--color-accent);
	color:#ffffff;
	border-top-left-radius:12px;
	border-bottom-left-radius:12px;
}
.kalender-auto select, .kalender-auto input{
    width:auto;
}
.kalender_clear{
    margin-left:auto;
}

/* Table */


table, .table{
	border-collapse:collapse;
	/* min-width:500px; */
	border-radius:8px;
	border:1px solid rgba(0,0,0,0.2);
	overflow:hidden;
    /* margin:2px; */
	box-shadow:0 0 6px rgba(0,0,0,0.2);
}
.table th, .table td{
	padding:15px;
	border:1px solid rgba(122,122,122,0.3);
}
.table th{
	color:#ffffff;
	background-color:var(--color-accent);
	font-weight:400;
}
.table td{
	background-color:#ffffff;
}

table td{
	vertical-align:top;
}
.table._fixed{
	table-layout: fixed;
	width:100%;
}
.table tr.highlighted td{
    background-color:#ffffaa !important;
}
/* Drag and Drop */
.draggable .drag-box{
    transition:0.1s;
}
.draggable.above .drag-box{
	background-image:url('../images/move_above.png');
	background-position:top left;
	background-repeat:no-repeat;
}
.draggable.below .drag-box{
	background-image:url('../images/move_below.png');
	background-position:bottom left;
	background-repeat:no-repeat;
}
.draggable.inside .drag-box{
	background-image:url('../images/move_inside.png');
	background-position:center left;
	background-repeat:no-repeat;
}
.drag-icon{
    cursor: move;
}
/*#tooltip{
    position:absolute;
    background-color:#ffffff;
    color:#000000;
    padding:15px;
    border-radius:8px;
    font-size:1rem;
    pointer-events:none;
    z-index:1000;
    display:none;
}*/

/* Chat */
#chat{
	display:flex;
	flex-direction:column;
	height:100%;
	/* max-width:800px; */
	width:100%;
	vertical-align:top;
}
.chat-messages{
	flex-grow:1;
	overflow-y:auto;
}
.chat-messages:after{
	display:block;
	content:'';
	clear:both;
}
.chat-input{
	border-top:1px solid #cccccc;
	flex-shrink:0;
	padding-top:10px;
}
.chat-text{
	width:500px;
	height:100px;
}
.chat-item{
	width:90%;
	border:1px solid #cccccc;
	background-color:#eeeeee;
	float:left;
	border-radius:8px;
	padding:10px;
	margin-bottom:10px;
}
.chat-item._own{
	width:90%;
	border:1px solid #cccccc;
	background-color:#e3eaed;
	float:right;
}
.chat-item._new{
	width:90%;
	border:2px solid #1b71a6;
}
.chat-name{
	font-style:italic;
	font-size:1rem;
	float:left;
}
.chat-date{
	font-size:0.8rem;
	float:right;
}
.chat-message{
	clear:both;
	padding-top:5px;
}
.chat-send{
	vertical-align: bottom;
}
.blob{
	display:inline-block;
	background-color:#7eb536;
	border-radius:50%;
	width:20px;
	height:20px;
	line-height:20px;
	text-align:center;
	color:#ffffff;
	font-size:0.8rem;
	font-weight:700;
	box-shadow:0 0 6px rgba(0,0,0,0.1);
}
.blob._topright{
	position:absolute;
	top:0;
	right:0;
}
.chat-left{
	display:inline-block;
	vertical-align:top;
	width:calc(50% - 0px);
	margin-right:50px;
    flex:1;
    min-height:0;
}
.chat-right{
	display:inline-block;
	vertical-align:top;
	width:calc(49% - 50px);
}
.chat-info{
	border-left:1px solid #cccccc;
	padding-left:30px;
	padding-top:15px;
}
.chat-info a{
	text-decoration:underline;
}
.chat-info img{
	max-width:100%;
}
.chat-tabs{
	border-bottom:1px solid #cccccc;
	margin-bottom:10px;
}
.chat-tab{
	padding:8px 16px;
	background-color:#8ca3ad;
	color:#ffffff;
	display:inline-block;
	margin-right:1px;
	cursor:pointer;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
.chat-tab.active{
	background-color:#1b71a6;
}
.chat-tabcontents{
	
}
.chat-tabcontent{
	width:100%;
	box-sizing:border-box;
}
.chat-newsletter iframe{
	border:1px solid #cccccc;
}
/* Chat Ende */

/* Title */

.title-container{
    width:800px;
    height:auto;
    aspect-ratio:1000 / 1414;
    background-image:url('../images/titelseite_farbig.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    position:relative;
    border:10px solid #cccccc;
    float:left;
}
.title-quickbox{
    position:absolute;
    top:951px;
    border:1px solid black;
    width:337px;
    height:112px;
    border-bottom-right-radius: 40px;
}
.title-quickbox._box1{
    left:37px;
    background-color:var(--color-startbox);
}
.title-quickbox._box2{
    left:388px;
    background-color:var(--color-startbox);
}
.title-quickbox-image{
    height:100%;
    background-color:#ffffff;
    aspect-ratio:1;
    background-image:url('../images/icon-bildupload2.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
}
.title-quickbox._sw{
    background-color:#000000;
}
.title-source{
    position:absolute;
    top: 1081px;
    left: 37px;
    font-size:0.8rem;
    color:#777777;
    width:700px;
}
.title-quickbox-textarea{
    font-family: 'Roboto', sans-serif;
    width:200px;
    height:80px;
    font-size:12px;
    position:absolute;
    top:16px;
    left:122px;
    background:rgba(0,0,0,0.2);
    color:#ffffff;
}
.title-imageupload{
    position:absolute;
    opacity:0;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
/* Move to editor.css? */
.title-root .m-print-menu{
    position:sticky;
    top:50%;
}
.title-root .m-print-list{
    position:sticky;
    top:50%;
}
.title-root .m-print-preview{
    width:100%;
    position:absolute;
    top:260px;
    height:680px;
    border:2px dashed gray;
}
.title-root .m-print-background{
    width:100%;
    height:100%;
    box-shadow:none;
}
.title-container._sw{
    background-image:url('../images/titelseite_sw.png');
}

/* Title end */


#loading{
	display:none;
	position:absolute;
	width:24px;
	height:24px;
	z-index:10000;
}
.spinner{
	transform-origin:50% 50%;
	animation: spinner 1.5s infinite linear;
}
.spinner-mini{
	width:20px;
	height:20px;
	vertical-align:middle;
}
.spinner-white{
	filter:brightness(200%);
}
#saving{
	background-color:rgba(0,0,0,0.5);
	position:fixed;
	height:100%;
	width:100%;
	top:0;
	left:0;
	bottom:0;
	right:0;
	text-align:center;
	display:none;
	z-index:1001;
}
.saving-content{
	display:inline-block;
	vertical-align:middle;
	font-size:24px;
	font-weight:100;
	color:#ffffff;
}
.saving-content small{
	font-size:12px;
}
#saving:after{
	content:'';
	display:inline-block;
	height:100%;
	vertical-align:middle;
	width:1px;
}

label.check-opacity:has(input[type="checkbox"]){
    opacity:0.7;
    padding:4px;
    display:inline-block;
    margin-bottom:2px;
}
label.check-opacity:has(input[type="checkbox"]:checked){
    opacity:1;
    background-color:var(--color-lightgreen);
    border-radius:4px;
}

/* Flex */
.flex{
    display:flex;
    flex-wrap:nowrap;
    gap:20px;
}
.flex-column{
    display:flex;
    flex-direction:column;
    gap:20px;
}

hr{
	height:1px;
    width:100%;
	border:0;
	background-color:#aaaaaa;
    min-height:1px;
}

.left{ 
	float:left; 
}
.right{ 
	float:right; 
}
.clear{
	clear:both;
}

.textfeld{
	width:100%;
	padding:10px;
	border-radius:10px;
	box-sizing:border-box;
	border:1px solid #afafaf;
	/* margin-top:10px; */
	font-size:1rem;
	color:#3c3c3c;
	font-family: 'Roboto', sans-serif;
}

.textarea{
	width:100%;
	padding:10px;
	border-radius:10px;
	box-sizing:border-box;
	border:1px solid #afafaf;
	margin-top:10px;
	font-size:1rem;
	color:#3c3c3c;
	height:300px;
	font-family: 'Roboto', sans-serif;
}
input[type="checkbox"]._large{
    transform:scale(1.5);
}
.infobox{
    background-color:#2626da;
    border-radius:10px;
    padding:15px;
    color:#ffffff;
    font-weight:700;
    margin-bottom:15px;
}

.button{
    display:inline-block;
	border-radius:10px;
	border:0px;
	background-color:#009ee0;
	color:#ffffff;
	font-family: 'Roboto', sans-serif;
	font-size:1rem;
	text-align:center;
	cursor:pointer;
	transition:0.3s;
	padding:8px 15px;
    line-height: 1.5;
}
.button:hover{
	background-color:#44c0f4;
}
.button-transparent{	
	border:0px;
	background:transparent;
	color:#7b7b7b;
	font-family: 'Roboto', sans-serif;
	font-size:1rem;
	text-align:center;
	cursor:pointer;
	transition:0.3s;
	padding:15px;
}
.button._red{
    background-color:var(--color-red);
}
.button._small{
    padding:3px 8px;
}
.status{
    display:inline-block;
    padding:5px 10px;
    border-radius:0 20px 20px 20px;
    font-size:1rem;
    color:#000000;
    font-weight:600;
    text-align:center;
    align-self:center;
}
.button.status{
    padding:10px 20px;
	border-radius:10px;
}
#overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:none;
    z-index:10000;
    pointer-events:none;
    justify-content: center;
    align-items: center;
}
#overlay-window{
    background-color:#ffffff;
    border-radius:10px;
    padding:20px;
    box-shadow:0 0 12px rgba(0,0,0,0.3);
    max-width:90vw;
    max-height:90vh;
    overflow-y:auto;
    height:auto;
    margin:auto;
    pointer-events:auto;
    position:relative;
}
#overlay-content{

}
#overlay-close{
    position:absolute;
    top:10px;
    right:10px;
    font-size:1.5rem;
    color:#777777;
    cursor:pointer;
}

h1.overflow{
    overflow-x:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:100%;
    flex: 1 0 auto;
}

h1{
	font-family: 'Roboto', sans-serif;
	font-size:2.3rem;
	padding:0px;
	margin:0px;
	border:0px;
	color:#000000;
	font-weight:300;
	margin-bottom:30px;
	margin-bottom:25px;
}

h2{
	font-family: 'Roboto', sans-serif;
	font-size:1.5rem;
	padding:0px;
	margin:0px;
	border:0px;
	color:#4b4b4b;
	font-weight:600;
	margin-bottom:20px;
}

h3{
	font-family: 'Roboto', sans-serif;
	font-size:1.6rem;
	padding:0px;
	margin:0px;
	border:0px;
	font-weight:400;
}

h4{
	font-family: 'Roboto', sans-serif;
	font-size:1.4rem;
	padding:0px;
	margin:0px;
	border:0px;
	font-weight:400;
}


.bold{
	font-weight:600;
}
.italic{
	font-style:italic; 
}

a {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color:#8bb8d1;
}

a:hover {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color:#595959;
}

a:active {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color:#595959;
}

img{
	border: 0px;
}

textarea {
  resize: none;
}

.error{
    font-weight:700;
    color:var(--color-red);
}

/* =============================================================
   ANZEIGEN EDITOR v2
   Band-basierter Layout-Editor (Full-Bands + Columns-Bands)
   ============================================================= */

.ae-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* -- Toolbar -------------------------------------------------- */
.ae-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    gap: 12px;
}
.ae-toolbar-left, .ae-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ae-toolbar-label { font-weight: 600; white-space: nowrap; }
.ae-toolbar-check { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #555; cursor: pointer; white-space: nowrap; user-select: none; }
#ae-kalender-select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9rem;
}

/* -- Workspace ------------------------------------------------ */
.ae-workspace { display: flex; flex: 1; overflow: hidden; gap: 0; }

/* -- Linke Anzeigenliste -------------------------------------- */
.ae-adlist {
    width: 220px; min-width: 180px; flex-shrink: 0;
    overflow-y: auto; background: #f9f9f9;
    border-right: 1px solid #ddd; padding: 8px 0;
}
.ae-adlist-section { padding: 0 0 8px 0; }
.ae-adlist-section + .ae-adlist-section {
    border-top: 1px solid #e0e0e0; margin-top: 4px; padding-top: 4px;
}
.ae-adlist-section-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: #666; padding: 6px 10px 4px;
}
.ae-section-toggle {
    cursor: pointer; display: flex; align-items: center; gap: 4px;
    user-select: none;
}
.ae-section-toggle:hover { color: #333; }
.ae-section-chevron { font-size: 0.85rem; line-height: 1; margin-left: auto; }
.ae-adlist-count { font-weight: 400; color: #999; margin-left: 2px; }
.ae-adlist-hint {
    font-size: 0.72rem; color: #999; padding: 2px 10px 6px;
    font-style: italic; line-height: 1.4;
}
.ae-adlist-empty { font-size: 0.8rem; color: #999; padding: 4px 10px; }

.ae-list-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 10px; cursor: grab;
    border-bottom: 1px solid #eee; transition: background 0.15s; user-select: none;
}
.ae-list-item:hover { background: #eef7fc; }
.ae-list-item.ae-list-dragging { opacity: 0.4; cursor: grabbing; }
.ae-list-item.ae-list-placed   { opacity: 0.35; cursor: not-allowed; background: #f0f0f0; }
.ae-list-filler { background: #fffbe6; }
.ae-list-filler:hover { background: #fff8cc; }
.ae-list-special { background: #f0f4ff; }
.ae-list-special:hover { background: #e4eaff; }
.ae-list-thumb-special {
    font-size: 1.4rem; background: #dce6ff;
    border-color: #b0c0ee;
}

.ae-list-thumb {
    width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid #ddd; overflow: hidden; background: #fff;
    display: flex; align-items: center; justify-content: center;
}
.ae-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ae-list-thumb-placeholder { color: #ccc; font-size: 1.2rem; }
.ae-list-info { flex: 1; min-width: 0; }
.ae-list-name {
    font-size: 0.8rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.ae-list-meta { font-size: 0.72rem; color: #777; }

.ae-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 0.7rem; font-weight: 600; line-height: 1.4; }
.ae-badge-color { background: #fde8e8; color: #c0392b; }
.ae-badge-sw    { background: #e8e8e8; color: #555; }

/* -- Rechte Seiten-Vorschau ----------------------------------- */
.ae-pages {
    flex: 1; overflow: auto; padding: 20px;
    background: #e0e0e0;
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 24px;
}
.ae-pages-loading { color: #999; font-style: italic; padding: 20px; }

.ae-page { display: flex; flex-direction: column; gap: 0; }

.ae-page-header {
    display: flex; align-items: center; gap: 8px;
    background: var(--color-accent); color: #fff;
    padding: 5px 10px; border-radius: 3px 3px 0 0;
    font-size: 0.82rem; flex-wrap: wrap;
}
.ae-page-props { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.ae-page-props label { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.ae-prop-sep { color: rgba(255,255,255,0.4); }
.ae-side-label { font-size: 11px; color: rgba(255,255,255,0.6); font-style: italic; }

.ae-del-page {
    background: rgba(0,0,0,0.2); color: #fff; border: none;
    border-radius: 3px; width: 22px; height: 22px; line-height: 1;
    cursor: pointer; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.ae-del-page:hover { background: rgba(0,0,0,0.45); }

.ae-page-stats {
    font-size: 0.78rem; color: #555;
    padding: 3px 8px; background: #f0f0f0;
    border: 1px solid #ddd; border-radius: 0 0 3px 3px;
}
.ae-overflow { color: var(--color-red) !important; }

/* -- A4 Canvas ------------------------------------------------ */
.ae-canvas {
    position: relative; background: #fff;
    box-shadow: 2px 3px 14px rgba(0,0,0,0.28);
    overflow: hidden;
}

/* Inhaltsbereich (position:absolute innerhalb Canvas) */
.ae-ct {
    position: absolute;
    /* Randlinien als visuelle Hilfe */
    box-shadow: inset 0 0 0 1px rgba(0,100,200,0.07);
}

/* -- Platzierte Items (position:absolute in .ae-ct) ----------- */
.ae-pi {
    position: absolute;
    background: #e8f4fb;
    overflow: hidden;
    cursor: grab;
    box-sizing: border-box;
    border: 1px solid rgba(0,80,180,0.18);
    transition: box-shadow 0.1s;
    z-index: 5;
}
.ae-pi-color { border-color: rgba(192,57,43,0.4) !important; }

.ae-pi.ae-pi-drag { opacity: 0.45; cursor: grabbing; }
.ae-pi.ae-pi-over { box-shadow: 0 0 0 2px var(--color-accent); }

/* -- Spezialelement-Band (Rätselbereich etc.) ----------------- */
.ae-pi-special {
    background: #eeeeff;
    border: 1.5px dashed #7080cc;
    cursor: default;
}
.ae-pi-special:hover { box-shadow: 0 0 0 2px #7080cc; }
.ae-pi-special-inner {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
}
.ae-pi-special-icon { font-size: 1.4rem; line-height: 1; }
.ae-pi-special-label {
    font-size: 9px; font-weight: 700; color: #444;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.ae-pi-special-meta { font-size: 8px; color: #777; }

/* -- Sudoku-Auswahl-Button im platzierten Band --------------- */
.ae-spi-row {
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 0 8px; box-sizing: border-box;
}
.ae-spi-thumb {
    width: 48px; height: 48px; flex-shrink: 0;
    object-fit: cover; border: 1px solid #bbb; border-radius: 2px;
}
.ae-spi-thumb-ph {
    display: flex; align-items: center; justify-content: center;
    background: #dce6ff; font-size: 1.4rem;
}
.ae-spi-info { flex: 1; min-width: 0; text-align: left; }
.ae-spi-grade { font-size: 8px; text-transform: uppercase; color: #888; letter-spacing: 0.04em; }
.ae-spi-title { font-size: 9px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-spi-btn {
    margin-top: 5px; padding: 3px 8px;
    font-size: 9px; font-weight: 600;
    background: var(--color-accent); color: #fff;
    border: none; border-radius: 3px; cursor: pointer;
    white-space: nowrap;
}
.ae-spi-btn:hover { background: #007ab8; }
.ae-spi-pick { background: #e04020; }
.ae-spi-pick:hover { background: #c0300e; }

/* -- Sudoku-Picker Modal ------------------------------------- */
.ae-sudoku-modal { position: fixed; inset: 0; z-index: 9000; }
.ae-sdm-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.45);
}
.ae-sdm-dialog {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff; border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    width: min(700px, 95vw); max-height: 80vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.ae-sdm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--color-accent); color: #fff;
    font-weight: 700; font-size: 0.95rem; flex-shrink: 0;
}
.ae-sdm-close {
    background: none; border: none; color: #fff;
    font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.ae-sdm-close:hover { color: #ffd; }
.ae-sdm-tabs {
    display: flex; gap: 2px; padding: 8px 10px 0;
    border-bottom: 1px solid #ddd; flex-shrink: 0;
}
.ae-sdm-tab {
    padding: 5px 14px; font-size: 0.82rem; font-weight: 600;
    background: #f0f0f0; border: 1px solid #ccc;
    border-bottom: none; border-radius: 4px 4px 0 0;
    cursor: pointer; color: #555;
}
.ae-sdm-tab.active {
    background: #fff; color: var(--color-accent);
    border-color: #ddd; border-bottom-color: #fff;
    margin-bottom: -1px;
}
.ae-sdm-tab:hover:not(.active) { background: #e8e8e8; }
.ae-sdm-grid {
    flex: 1; overflow-y: auto; padding: 10px;
    display: flex; flex-wrap: wrap; gap: 8px;
    align-content: flex-start;
}
.ae-sdm-item {
    width: 90px; cursor: pointer;
    border: 2px solid #ddd; border-radius: 5px;
    overflow: hidden; text-align: center;
    background: #fafafa; transition: border-color 0.12s, box-shadow 0.12s;
}
.ae-sdm-item:hover { border-color: var(--color-accent); box-shadow: 0 2px 8px rgba(0,158,224,0.2); }
.ae-sdm-item-active { border-color: #009ee0 !important; background: #e8f6ff !important; }
.ae-sdm-item-current { border-style: dashed; }
.ae-sdm-item img, .ae-sdm-ph {
    width: 90px; height: 90px; object-fit: cover; display: block;
}
.ae-sdm-ph { display: flex; align-items: center; justify-content: center; font-size: 2rem; background: #eef; }
.ae-sdm-num { font-size: 0.68rem; color: #555; padding: 2px 3px; display: block; line-height: 1.2; }
.ae-sdm-empty { color: #999; font-style: italic; padding: 20px; }

/* Platzhalter wenn kein Bild */
.ae-pi-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: #888; text-align: center; padding: 4px;
    background: repeating-linear-gradient(45deg,#f0f0f0,#f0f0f0 5px,#e8e8e8 5px,#e8e8e8 10px);
}

/* Overlay: sichtbar bei Hover */
.ae-ov {
    position: absolute; top: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.62); color: #fff;
    font-size: 8px; padding: 2px 4px; line-height: 1.3;
    display: none; z-index: 10; pointer-events: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ae-pi:hover .ae-ov { display: block; }

/* Entfernen-Button */
.ae-rm {
    position: absolute; top: 1px; right: 1px;
    width: 14px; height: 14px; line-height: 14px;
    background: rgba(180,0,0,0.75); color: #fff; border: none;
    border-radius: 2px; font-size: 11px; cursor: pointer;
    display: none; z-index: 12; padding: 0; text-align: center;
}
.ae-pi:hover .ae-rm { display: block; }
.ae-rm:hover { background: rgba(180,0,0,1); }

/* Füller Höhen-Input */
.ae-fh-wrap {
    position: absolute; bottom: 2px; left: 2px;
    display: none; align-items: center; gap: 2px; z-index: 12;
}
.ae-pi:hover .ae-fh-wrap { display: flex; }
.ae-fh {
    width: 44px; height: 15px; font-size: 9px;
    padding: 0 2px; border: 1px solid #aaa;
    background: rgba(255,255,255,0.92); border-radius: 2px;
}
.ae-fh-lbl { font-size: 8px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

/* ============================================================
   Sudoku-Übersicht (sudoku.php)
   ============================================================ */
.sdk-filter-bar {
    display: flex; flex-wrap: wrap; gap: 16px;
    padding: 10px 16px; background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}
.sdk-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sdk-filter-group label { font-size: 0.8rem; font-weight: 600; color: #666; }
.sdk-filter-btn {
    padding: 3px 10px; font-size: 0.8rem; border-radius: 12px;
    border: 1px solid #ccc; background: #fff; color: #555;
    text-decoration: none; white-space: nowrap;
}
.sdk-filter-btn:hover { background: #eef7fc; border-color: var(--color-accent); color: var(--color-accent); }
.sdk-filter-btn.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.sdk-grade-section { padding: 0 16px 16px; }
.sdk-grade-header {
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: #666;
    padding: 12px 0 8px; border-bottom: 2px solid #e0e0e0; margin-bottom: 10px;
}
.sdk-grid {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.sdk-card {
    width: 110px; border-radius: 6px; overflow: hidden;
    border: 2px solid #ddd; background: #fff;
    transition: border-color 0.15s; font-size: 0.75rem;
}
.sdk-card-free  { border-color: #b8dfb0; }
.sdk-card-used  { border-color: #ddd; opacity: 0.7; }
.sdk-card:hover { border-color: var(--color-accent); opacity: 1; }

.sdk-thumb {
    width: 110px; height: 110px; overflow: hidden;
    cursor: pointer; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.sdk-thumb img { width: 110px; height: 110px; object-fit: cover; display: block; }
.sdk-thumb-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.65); color: #fff;
    font-size: 0.68rem; text-align: center; padding: 3px;
    opacity: 0; transition: opacity 0.15s;
}
.sdk-thumb:hover .sdk-thumb-overlay { opacity: 1; }
.sdk-no-img { background: #eef; font-size: 2.5rem; }

.sdk-card-info { padding: 5px 6px; }
.sdk-card-title {
    font-weight: 600; font-size: 0.72rem; color: #333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 3px;
}
.sdk-card-free-badge {
    font-size: 0.68rem; color: var(--color-green); font-weight: 600;
}
.sdk-card-used-badge {
    font-size: 0.68rem; color: #999;
}
.sdk-btn-free {
    font-size: 0.7rem; padding: 2px 7px;
    background: #f5f5f5; border: 1px solid #ccc;
    border-radius: 3px; cursor: pointer; color: #555;
}
.sdk-btn-free:hover { background: #ffecec; border-color: #e00; color: #c00; }

/* -- Drop-Zonen ----------------------------------------------- */

/* Band-Drop-Zone (zwischen Bändern, full width) */
.ae-bdz {
    position: absolute; left: 0; z-index: 1;
    pointer-events: none;
    transition: background 0.1s, outline 0.1s;
}
body.ae-dragging .ae-bdz {
    pointer-events: auto;
    background: rgba(0,158,224,0.06);
}
.ae-bdz.ae-dz-over,
body.ae-dragging .ae-bdz:hover {
    background: rgba(0,158,224,0.22) !important;
    outline: 2px dashed var(--color-accent);
    outline-offset: -1px;
}

/* Spalten-Drop-Zone (leerer Platz in Spalte) */
.ae-cdz {
    position: absolute; z-index: 1;
    pointer-events: none;
    border: 2px dashed transparent;
    box-sizing: border-box;
    transition: background 0.1s, border-color 0.1s;
}
body.ae-dragging .ae-cdz {
    pointer-events: auto;
    border-color: rgba(0,158,224,0.3);
    background: rgba(0,158,224,0.05);
}
.ae-cdz.ae-dz-over,
body.ae-dragging .ae-cdz:hover {
    border-color: var(--color-accent) !important;
    background: rgba(0,158,224,0.18) !important;
}

/* Companion-Drop-Zone (1-sp. Slot neben 3-sp. Item) */
.ae-comp-dz {
    background: rgba(255,200,0,0.05);
    border: 2px dashed rgba(200,150,0,0.3);
}
body.ae-dragging .ae-comp-dz { border-color: rgba(200,150,0,0.55); }
.ae-comp-dz.ae-dz-over { border-color: var(--color-yellow) !important; background: rgba(255,200,0,0.15) !important; }

/* -- Lückenfüller-spezifisch ---------------------------------- */
/* object-fit: cover so dass das Bild den Slot füllt ohne Verzerrung */
.ae-pi-filler img { object-fit: cover !important; }

/* Spalten-Switcher (2/3/4-sp.) am oberen Rand des Füllers */
.ae-sp-switch {
    position: absolute;
    top: 2px; left: 2px;
    display: flex;
    gap: 2px;
    z-index: 12;
}
.ae-sp-btn {
    font-size: 9px;
    line-height: 1;
    padding: 2px 5px;
    border: 1px solid rgba(255,255,255,0.45);
    background: rgba(0,0,0,0.48);
    color: #fff;
    cursor: pointer;
    border-radius: 2px;
    white-space: nowrap;
    transition: background 0.1s;
}
.ae-sp-btn:hover  { background: rgba(0,0,0,0.72); }
.ae-sp-btn.ae-sp-active { background: var(--color-accent); border-color: var(--color-accent); }

/* ⇄ Seite-tauschen-Button für 3-spaltige Bänder */
.ae-swap3 {
    position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.4);
    border-radius: 3px; font-size: 11px; line-height: 1; padding: 2px 5px;
    cursor: pointer; display: none; z-index: 13; white-space: nowrap;
}
.ae-pi:hover .ae-swap3 { display: block; }
.ae-swap3:hover { background: rgba(0,100,200,0.85); }

/* Resize-Handle am unteren Rand des Füllers */
.ae-rh {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 9px;
    cursor: ns-resize;
    background: rgba(0,0,0,0.13);
    z-index: 15;
    transition: background 0.12s;
}
.ae-rh::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 28px; height: 2px;
    background: rgba(255,255,255,0.65);
    border-radius: 2px;
}
.ae-rh:hover { background: rgba(0,158,224,0.5); }

body.ae-resizing,
body.ae-resizing * { cursor: ns-resize !important; user-select: none !important; }

/* -- Seiten-Drag-and-Drop ------------------------------------ */
.ae-page-grip {
    cursor: grab;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.55;
    padding: 0 4px 0 2px;
    user-select: none;
    flex-shrink: 0;
}
.ae-page-grip:hover { opacity: 1; }
.ae-page-header.ae-page-dragging {
    opacity: 0.5;
    outline: 2px dashed rgba(255,255,255,0.6);
}
.ae-page-header.ae-page-over {
    outline: 3px solid var(--color-yellow);
    background: #007ab8;
}

/* -- Thumbnail-Zoom bei Hover über Listen-Item --------------- */
#ae-thumb-preview {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    padding: 4px;
    pointer-events: none;
}
#ae-thumb-preview img {
    display: block;
    width: 200px;
    height: auto;
    max-height: 300px;
    object-fit: contain;
}

/* =============================================================
   ANZEIGEN EDITOR v2 END
   ============================================================= */

/* =============================================================
   SEITEN-COMPOSER
   ============================================================= */

.cp-composer {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
    font-size: 13px;
}

/* --- Toolbar (reuses ae-toolbar) --- */

/* --- Status bar --- */
.cp-status {
    min-height: 28px;
    padding: 4px 16px;
    font-size: 12px;
    color: #555;
    background: #f0f7fb;
    border-bottom: 1px solid #d0e8f5;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cp-status.cp-status-ok   { color: #2a7a1e; background: #e8f5e3; }
.cp-status.cp-status-err  { color: #bb0a0a; background: #fdf0f0; }

/* --- Workspace --- */
.cp-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
}

/* --- Source panels (left two columns) --- */
.cp-source-panel {
    width: 220px;
    min-width: 160px;
    border-right: 1px solid #d4e6f0;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}
.cp-panel-title {
    padding: 8px 12px;
    font-weight: 700;
    font-size: 12px;
    background: #e8f3fb;
    border-bottom: 1px solid #cce0f0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.cp-page-count {
    font-weight: 400;
    color: #888;
    font-size: 11px;
}
.cp-clear-btn {
    margin-left: auto;
    padding: 2px 8px !important;
    font-size: 11px !important;
}

.cp-thumb-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- Final panel (right, flex) --- */
.cp-final-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}
.cp-final-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}
.cp-drop-hint {
    width: 100%;
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 40px 0;
    pointer-events: none;
}

/* --- Thumbnail items --- */
.cp-thumb-item {
    background: #fff;
    border: 2px solid #d0e4f0;
    border-radius: 3px;
    cursor: grab;
    user-select: none;
    text-align: center;
    overflow: hidden;
    transition: border-color 0.12s, box-shadow 0.12s;
    position: relative;
}
.cp-thumb-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0,158,224,0.18);
}
.cp-thumb-item.cp-dragging {
    opacity: 0.45;
}
.cp-thumb-item img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}
.cp-thumb-label {
    font-size: 10px;
    color: #666;
    padding: 2px 4px;
    background: rgba(0,0,0,0.04);
}

/* Source palette: items are stacked vertically, small */
.cp-thumb-list .cp-thumb-item {
    width: 100%;
}
.cp-thumb-list .cp-thumb-item img {
    height: 80px;
    object-fit: contain;
    background: #f0f4f8;
}

/* Final list: items are larger tiles */
.cp-final-list .cp-thumb-item {
    width: 110px;
}
.cp-final-list .cp-thumb-item img {
    height: 140px;
    object-fit: contain;
    background: #f0f4f8;
}
.cp-final-list .cp-thumb-item .cp-thumb-label {
    font-size: 11px;
    padding: 3px 4px;
}
/* Remove button on final items */
.cp-final-list .cp-thumb-item .cp-remove-btn {
    position: absolute;
    top: 2px; right: 2px;
    width: 18px; height: 18px;
    background: rgba(180,0,0,0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    display: none;
    z-index: 5;
    padding: 0;
}
.cp-final-list .cp-thumb-item:hover .cp-remove-btn { display: block; }

/* Große Seitennummer auf Quell-Thumbnails (B) */
.cp-source-nr {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -60%);
    font-size: 28px;
    font-weight: 900;
    color: rgba(0,0,0,0.18);
    pointer-events: none;
    z-index: 3;
    line-height: 1;
    user-select: none;
}
/* Bereits gesetzte Quell-Items grau (A) */
.cp-thumb-list .cp-thumb-item.cp-placed {
    opacity: 0.42;
    border-color: #bbb;
}
.cp-thumb-list .cp-thumb-item.cp-placed .cp-source-nr {
    color: rgba(0,0,0,0.10);
}
.cp-thumb-list .cp-thumb-item.cp-placed .cp-thumb-label {
    background: rgba(0,0,0,0.08);
    color: #aaa;
}

/* Source badge (Quell-Label oben links in Finale-Liste) */
.cp-thumb-item .cp-source-badge {
    position: absolute;
    top: 2px; left: 2px;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
    color: #fff;
    font-weight: 700;
    line-height: 14px;
    z-index: 4;
}
.cp-final-list .cp-thumb-item[data-source="editorial"] .cp-source-badge { background: rgba(0,158,224,0.85); }
.cp-final-list .cp-thumb-item[data-source="anzeigen"]  .cp-source-badge { background: rgba(224,122,0,0.85); }

/* Finale Seitenzahl — immer sichtbar (B) */
.cp-final-pagenr {
    position: absolute;
    bottom: 18px; right: 3px;
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    background: rgba(0,0,0,0.62);
    border-radius: 3px;
    padding: 0 4px;
    line-height: 18px;
    z-index: 4;
}
/* Anzeigen-Seite: kein Aufdruck-Hinweis */
.cp-no-print {
    font-size: 9px;
    vertical-align: super;
    opacity: 0.8;
    margin-left: 1px;
}

/* Drop-over highlight */
.cp-final-list.cp-drop-over {
    background: #e8f5ff;
    outline: 2px dashed var(--color-accent);
    outline-offset: -4px;
}

/* Drop position indicator — vertical line before/after target item */
.cp-final-list .cp-thumb-item.cp-drop-before {
    box-shadow: -3px 0 0 0 var(--color-accent);
}
.cp-final-list .cp-thumb-item.cp-drop-after {
    box-shadow: 3px 0 0 0 var(--color-accent);
}

/* Download bar */
.cp-download-bar {
    padding: 8px 12px;
    border-top: 1px solid #d0e8f5;
    background: #f0f7fb;
    flex-shrink: 0;
}

/* --- Overlay / Spinner --- */
.cp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-overlay-box {
    background: #fff;
    border-radius: 8px;
    padding: 32px 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    min-width: 220px;
}
.cp-spinner {
    width: 40px; height: 40px;
    border: 4px solid #d0e8f5;
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: cp-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }
#cp-overlay-msg {
    font-size: 13px;
    color: #444;
}

/* -- PDF-Fertig-Overlay --------------------------------------- */
.cp-pdf-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-pdf-box {
    background: #fff;
    border-radius: 20px;
    padding: 52px 60px 44px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    max-width: 460px;
    width: 90%;
    position: relative;
    animation: cpPdfPop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cpPdfPop {
    from { transform: scale(0.55); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.cp-pdf-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 16px;
}
.cp-pdf-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: #222;
}
.cp-pdf-sub {
    color: #777;
    margin: 0 0 32px;
    font-size: 0.95rem;
    line-height: 1.5;
}
.cp-pdf-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.cp-pdf-buttons .button {
    min-width: 170px;
}
.cp-pdf-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1rem;
    color: #bbb;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.cp-pdf-close:hover {
    color: #555;
    background: #f0f0f0;
}

/* =============================================================
   SEITEN-COMPOSER END
   ============================================================= */

/* =============================================================
   ZEICHENLIMIT — Artikel-Editor Counter + Jahreskontingent
   ============================================================= */

/* Live-Counter unter dem TinyMCE-Editor */
#artikel-char-counter {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 500;
    background: #f0f4f8;
    color: #555;
    transition: background 0.2s, color 0.2s;
}
#artikel-char-counter._warn {
    background: #fff4cc;
    color: #8a5d00;
}
#artikel-char-counter._error {
    background: #fde8e8;
    color: #bb0a0a;
    font-weight: 700;
}

/* Jahreskontingent-Box in der Artikelübersicht (Vereine) */
.jahres-kontingent {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #f0f4f8;
    border-left: 4px solid var(--color-accent);
}
.jahres-kontingent._warn  { background: #fff8e6; border-left-color: #e87722; }
.jahres-kontingent._error { background: #fde8e8; border-left-color: var(--color-red); }

.jk-title {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #555;
    margin-bottom: 6px;
}
.jk-bar-wrap {
    height: 8px;
    background: #dde4ed;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.jk-bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 2px;
}
.jahres-kontingent._warn  .jk-bar-fill { background: #e87722; }
.jahres-kontingent._error .jk-bar-fill { background: var(--color-red); }

.jk-text {
    font-size: 0.92rem;
    color: #444;
}
.jk-percent { color: #888; }

.jk-hinweis {
    margin-top: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}
.jk-hinweis._warn  { color: #8a5d00; }
.jk-hinweis._error { color: var(--color-red); }

/* ================================================================
   Kleinanzeigen — Veröffentlichungs-Checkboxen
   ================================================================ */

.klein-pub-label {
    display: block;
    margin: 6px 0;
    cursor: pointer;
    font-size: 0.95rem;
    user-select: none;
}
.klein-pub-label input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}
.klein-pub-label._chiffre {
    margin-left: 28px;
    font-size: 0.9rem;
    color: #555;
}

.klein-pub-preis {
    display: inline-block;
    margin-left: 6px;
    font-weight: 700;
    color: var(--color-red);
    font-size: 0.85rem;
}
.klein-pub-preis._free {
    color: #2a7a1e;
    font-weight: 400;
}

.klein-pub-total {
    margin-top: 10px;
    padding: 8px 12px;
    background: #f0f4f8;
    border-radius: 4px;
    font-size: 0.95rem;
    min-height: 0;
}
.klein-pub-total:empty { display: none; }

/* ================================================================
   Adressbuch — Auswahl in Anzeigen-Formular
   ================================================================ */

.adressbuch-auswahl {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #f5f8fb;
    border: 1px solid #dde5ee;
    border-radius: 6px;
}
.adressbuch-radio-label {
    display: block;
    padding: 5px 4px;
    cursor: pointer;
    font-size: 0.93rem;
    border-bottom: 1px solid #eef1f5;
}
.adressbuch-radio-label:last-child { border-bottom: none; }
.adressbuch-radio-label input[type="radio"] {
    margin-right: 8px;
    vertical-align: middle;
}

/* Adressbuch — Eintrag-Karte im Account */
.adressbuch-eintrag { margin-bottom: 10px; }

.adressbuch-bez {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.78rem;
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
    margin-right: 6px;
    vertical-align: middle;
}

/* Sekundärer Button */
.button._secondary {
    background: #e0e7ef;
    color: #334;
    border: 1px solid #ccd5e0;
}
.button._secondary:hover { background: #cdd8e8; }

/* Danger-Button (Löschen) */
.button._danger {
    background: #fde8e8;
    color: var(--color-red);
    border: 1px solid #f5c0c0;
}
.button._danger:hover { background: #f5c0c0; }

/* Artikel-Seiten-Header (Buttons-Leiste) */
.artikel-page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 16px;
}
.artikel-page-header .spacer { flex: 1; }

/* ============================================================
   DATEIÜBERSICHT
   ============================================================ */

/* Badge neben dem Button-Text */
.datei-btn-count {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 600;
    background: rgba(0,0,0,0.12);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Drop-Zone am Button */
.datei-dropzone { display: inline-block; }
.datei-dropzone.dragover > button {
    outline: 2px dashed var(--color-yellow);
    outline-offset: 2px;
    background: #fffbe6;
}

/* Drop-Area im Overlay */
#datei-drop-area {
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 14px 20px;
    text-align: center;
    color: #999;
    font-size: 0.9em;
    margin-bottom: 18px;
    transition: border-color 0.15s, background 0.15s;
    cursor: default;
}
#datei-drop-area.dragover {
    border-color: var(--color-yellow);
    background: #fffbe6;
    color: #666;
}

/* Tabelle */
#datei-list {
    width: 100%;
}
.datei-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid #f0f0f0;
    justify-content:space-between;
}
.datei-row:last-child { border-bottom: none; }

/* Extension-Badge */
.datei-ext {
    flex-shrink: 0;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #e8e8e8;
    color: #555;
    border-radius: 3px;
    padding: 2px 5px;
    min-width: 36px;
    text-align: center;
}

/* Dateiname */
.datei-name {
    flex: 1;
    max-width: 300px;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Status-Badge */
.datei-status {
    flex-shrink: 0;
    font-size: 0.78em;
    font-weight: 600;
    border-radius: 10px;
    padding: 2px 10px;
    white-space: nowrap;
}
.datei-status._normal { background: #e8e8e8; color: #666; }
.datei-status._arbeit { background: var(--color-yellow); color: #5a4000; }
.datei-status._fertig { background: var(--color-lightgreen); color: #2a5a0a; }

/* Benutzer-Info */
.datei-user {
    flex-shrink: 0;
    width: 200px;
    font-size: 0.78em;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* Aktions-Buttons */
.datei-actions {
    flex-shrink: 0;
    width: 180px;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}
.datei-actions .button._small { font-size: 0.76em; padding: 3px 8px; }

/* Overlay-Titel */
#datei-overlay-inner h2 {
    margin: 0 0 16px 0;
    font-size: 1.1em;
    color: #333;
}