/* ROOT VARIABLES */
:root {
	--font-sans: Lato, Avenir, Adobe Heiti Std, Segoe UI, Trebuchet MS, sans-serif;
	--font-serif: Georgia, 'Times New Roman', serif;
	--color-brand: #5850ec;
	--color-brand-hover: #6875f5;
	--color-brand-rgb: 88, 80, 236;
	--color-text: #484848;
	--color-heading: #191919;
	--color-light: #fff;
	--color-light-rgb: 255, 255, 255;
	--color-dark: #e0e7ff;
	--color-border: #e0e7ff;
}

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

body {
	font-family: var(--font-sans);
	color: var(--color-text);
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

h2 {
	color: var(--color-brand);
	font-size: 18px;
	font-weight: 600;
	overflow-wrap: break-word;
	margin: 0;
}

/* TEXTSHINE WRAPPER - Light gray outer background */
.textshine-wrapper {
	height: 100vh;
	background-color: rgba(237, 237, 237);
	padding: 24px;
	box-sizing: border-box;
	overflow: hidden;
}

/* TEXTSHINE BASE - Outer container (in gray area) */
.textshine-outer {
	display: flex;
	flex-direction: column;
	max-width: 800px;
	margin: 0 auto;
	gap: 16px;
	height: 100%;
}

/* White content card - contains only the article text */
.textshine-content-card {
	position: relative;
	background-color: var(--color-light);
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.textshine-content-card .content {
	flex: 1;
	overflow-y: auto;
}

/* Loading card variant - keep original styling */
.textshine {
	display: flex;
	flex-direction: column;
	max-width: 800px;
	margin: 0 auto;
	background-color: var(--color-light);
	border-radius: 20px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.content {
	display: block;
	position: relative;
	padding: 24px 30px;
	line-height: 1.8;
	flex: 1;
}

/* Responsive wrapper and content padding */
@media (max-width: 640px) {
	.textshine-wrapper {
		padding: 16px;
	}
	.content {
		padding: 20px 24px;
	}
}

@media (max-width: 480px) {
	.textshine-wrapper {
		padding: 12px;
	}
	.content {
		padding: 16px 20px;
	}
}

/* Article structure */
.artikel {
	display: block;
}

/* HEADER - In outer gray area */
.textshine-outer .header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	flex-shrink: 0;
}

.header-row {
	display: flex;
	align-items: center;
}

.header-row-title {
	gap: 10px;
	padding: 8px 4px;
}

.header-row-actions {
	justify-content: space-between;
	background-color: rgba(220, 220, 220, 0.5);
	border-radius: 30px;
	padding: 6px 6px;
}

.header-icon {
	width: 24px;
	height: 24px;
	color: #666;
	flex-shrink: 0;
}

.header-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-heading);
	margin: 0;
}

/* Green save button */
.btn-save {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: #f5f5f5;
	color: #28a745;
	border: 1px solid #e8e8e8;
	border-radius: 20px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	font-family: var(--font-sans);
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn-save:hover:not(.disabled):not(:disabled) {
	background: #e8e8e8;
}

.btn-save:active:not(.disabled):not(:disabled) {
	background: #ddd;
}

.btn-save.disabled,
.btn-save:disabled {
	background: #f5f5f5;
	color: #999;
	border-color: #e8e8e8;
	cursor: not-allowed;
	opacity: 0.7;
}

.btn-save i {
	font-size: 14px;
	color: #28a745;
}

.btn-save.disabled i,
.btn-save:disabled i {
	color: #999;
}

/* Trash button */
.btn-trash {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #f5f5f5;
	border: 1px solid #e8e8e8;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: #c0392b;
}

.btn-trash:hover {
	background: #e8e8e8;
}

.btn-trash i {
	font-size: 14px;
}

/* FOOTER - In outer gray area */
.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 4px;
	flex-shrink: 0;
}

.footer-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.footer-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	color: #888;
	transition: all 0.2s ease;
}

.footer-icon-btn:hover {
	background: #e8e8e8;
	color: #555;
}

.footer-stats {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #666;
	font-size: 13px;
}

.stat-item {
	white-space: nowrap;
}

.stat-divider {
	color: #ccc;
	font-size: 10px;
}

/* Help button */
.btn-help {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid #e0e0e0;
	border-radius: 16px;
	cursor: pointer;
	font-size: 13px;
	font-family: var(--font-sans);
	color: #666;
	transition: all 0.2s ease;
}

.btn-help:hover {
	background: #f0f0f0;
	color: var(--color-text);
}

.btn-help i {
	font-size: 14px;
	color: #888;
}

/* Responsive Header/Footer */
@media (max-width: 640px) {
	.textshine-outer .header {
		gap: 10px;
	}

	.footer {
		flex-wrap: wrap;
		gap: 10px;
		padding: 6px 4px;
	}

	.footer-stats {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {
	.header-title {
		font-size: 16px;
	}

	.btn-save {
		padding: 6px 12px;
		font-size: 13px;
	}

	.footer-stats {
		font-size: 12px;
	}
}

/* NGEN TAGS */
.webtitel {
	width: 100%;
	color: var(--color-heading);
	font-family: var(--font-sans);
	font-size: 35px;
	font-weight: 600;
}

.vorspann, .webvorspann, .cmsvorspann {
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 25px;
	line-height: 41px;
	margin: 0;
}

.text, .webtext, .cmstext {
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: 19px;
	line-height: 1.8;
	text-align: left;
	display: block;
	margin: 1em 0;
}

/* Inline tags */
.autor, .hinweis {
	display: block;
	margin-top: 1em;
	font-size: 14px;
	font-style: italic;
}

/* CHANGE/EDITING ACTIONS */
.textshine-content-card .replacement {
	position: relative;
	display: inline;
	padding: 0;
	transition: background-color 0.2s ease;
	cursor: pointer;
}

.textshine-content-card .replacement:hover {
	opacity: 0.8;
}

/* Replacement parts */
.replacement .deletion-part,
.replacement .insertion-part {
	display: inline;
}

/* Deletion part - RED: shows original text to be replaced */
.replacement .deletion-part {
	color: #c0392b;
	background-color: #fce4e4;
	border-radius: 3px;
	padding: 2px 6px;
}

/* Insertion part - GREEN: shows replacement text */
.replacement .insertion-part {
	color: #27ae60;
	background-color: #e4f9e4;
	border-radius: 3px;
	padding: 2px 6px;
	margin-left: 4px;
}

.replacementPreview {
	color: #27ae60;
	background-color: #e4f9e4;
}

/* ACCEPTED STATE: Original greyed out with strikethrough, replacement stays green */
.replacement[state="accepted"] .deletion-part {
	color: #999;
	background-color: #f0f0f0;
	text-decoration: line-through rgba(153, 153, 153, 0.8) 2px;
}

.replacement[state="accepted"] .insertion-part {
	color: #27ae60;
	background-color: #e4f9e4;
}

/* DISCARDED STATE: Original stays visible, replacement greyed out with strikethrough */
.replacement[state="discarded"] .deletion-part {
	color: #c0392b;
	background-color: #fce4e4;
}

.replacement[state="discarded"] .insertion-part {
	color: #999;
	background-color: #f0f0f0;
	text-decoration: line-through rgba(153, 153, 153, 0.8) 2px;
}

/* Standalone insertion/deletion accepted/discarded states */
.insertion[state="accepted"] {
	color: #27ae60;
	background-color: #e4f9e4;
}

.insertion[state="discarded"] {
	color: #999;
	background-color: #f0f0f0;
	text-decoration: line-through rgba(153, 153, 153, 0.8) 2px;
}

.deletion[state="accepted"] {
	color: #999;
	background-color: #f0f0f0;
	text-decoration: line-through rgba(153, 153, 153, 0.8) 2px;
}

.deletion[state="discarded"] {
	color: #999;
	background-color: #f0f0f0;
	text-decoration: line-through rgba(153, 153, 153, 0.8) 2px;
}

.replacement .fa-arrow-right {
	pointer-events: none;
	padding: 0 4px;
	color: #666;
	font-size: 0.85em;
}

/* Standalone deletion and insertion */
.deletion,
.insertion,
.replacementPreview,
.insertionPreview,
.deletionPreview {
	display: inline;
	padding: 2px 6px;
	border-radius: 3px;
	align-items: center;
}

.deletion, .insertion {
	position: relative;
	transition: background-color 0.2s ease;
}

/* Custom cursors */
.deletion, .replacement .deletion-part {
	cursor: image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAYCAYAAADkgu3FAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALmSURBVHgBxZRdaFJhGIC/o0ku3NSBF1EXjkY3QcjAapDhGOwnJuuiXaxuYvcbOEZGV7uroGI3o5tiF9UgBoGM3Y2BF7NuUqRBlqQb2FTM/z9E5O19Tx45ns4xXYu98PJ953w/z/f+MnYCwqGqOtkIAHbUW6gGmTUD6j1Us9L5nnQ6/ZjGBlQJYqkXi1DxfsQpRMQX0pz+CWvZbNYod4eRVqPR6PN2sHw+f7/w3g0/JhyQf7PehAmQzLMVfq0a+AyJRGJcERSLxeDg4GBFCba2tmatVCqH6acrUlgTkn+9DoVC4Stu71cEWSwWiEQigmVnZGC6hYWFm1KYGIJWf5uamroyODh4WhFkMBjAbDaLYVLLuL6+vv7FxcUWmNgSh8NxzWQy6cTnZLNsf3+fjYyMsFqt5kQ3PsJfWtEhyOVyGZvNdshxHHAtT2BMo9HonE5nIZlMFmlvW4saG6SWNd0oDTxZIhMzM1OQP0AysB45CFoYKpfLMRmYoWOQGEbZiLX2oOL90BKTsbGxG/Pz8w5xzGrfw5TB1q5AEpiPCpbqhCCTk5N84MUJQgVLo9vtvtw1SID5fD7Y2trybG5uPpmenr4qZBce5fR6vdHlco1vbGy4RkdHbY219iC1Ws2P9J3JZECQer0O2FrA6/W+MhqNeiZJfdRenU5nIsjy8rKqLYhevre3BwMDAzwMDwCm/Bd00+2ZmZkJ0rm5uevsd43JiWKvbIKEzhCPx6PYbppWUWtCd93Fb6r2U6jqv13YFkQXejyed1ar1YEFWxgaGuJhS0tLgBn3Ced69o/Cg3Z3d9dxfpEuDAaDL3Z2dngQ+h3C4TAlwp2GNUcWfSAQeInjBVQNqmp2dvZSqVRK2O120Gq1sLq6SonhZwpduVMhv/c2RkF6tre3H/r9fgiFQlCtVkuYbW/x/1l2xPgoCV12LpVKBSluw8PDEw2IhnUpnbyKLj2PWkP9iVplCl35OETFjtlV/01+AZg0j5n+QJO5AAAAAElFTkSuQmCC) 1x) 3 2, pointer;
}

.insertion, .replacement .insertion-part {
	cursor: image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAYCAYAAADkgu3FAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKlSURBVHgBxZVfaFJRHMfPmplTE0ewsTGYIylZL8JCJgw2KGrBGJIIPUSMQCHovUefKwZJUA++lMESIoYgUr1YihCIIYTJBv4XRPyLOjFJTr/f1SvqvM60sR/8+J1zz7m/z/19z59LyBnYBPhkK45slFIZ+A5GrjlT2Wz2KUTRqDBIriz9rhQ8SS80aaFYLE73mzeNo7FY7MUoMBby6NMTeuv9PRoqRGg6nb7NCUomkzQSiZigL+yEtSTZB3di0kGQL+GvtFwuH8CQlBOkVCppOBw+Vlmj0TB9hgSvfG8ZWVgYF0Sj0azI5fILnCCpVEoXFxexqk7YZC6Xe7Z/4GCSPf/+moXt9INotdrrCwsLU4RD/jYIPxRhWFlLRrFer7+GSd79/NCGVepHtBeyvb3NQjitC4Quk8naMorF4pmtrS11qVQ6ZGF3Pz48BoH3BkL6gtjKUEasTCQSzW5ubnbBWIhOp1s5qZKBoF4ZsTKEpVKpbzg/n8/7TlqToUGdMrbWbJbP5ysgolRXhq1kIIjH41GBQMC4QqGgiUQC18wE86Tz8/N41s6TfzzcXSCQiInYLxRwJ3dbqzIBGcHaoKWlJRoKhejy8jIDMxqNmPgXtG+Aq0hTsqtkiB3GCVKpVDQej+M9lbBYLAxIIpHQaDRKbTbbfejzSfOWH/mmZ0Aok9vt3ltdXb1Tr9eL6+vrDMxgMOCYD+eRMY0BuVyuN9C+DH7R7/fvOp3O9qYIBoPU4XA8gD6PjGESr9e7C1HWSjShVqvl1Wo1tbGxwayd2WymlUrlEMYukTEMk+N2nex4JrBarY8DgQCFA0prtdqR3W5/KRQK58iYf+Jew2RzmUzmh8fj2VtbW7sJ/RkygnTDfBUmxQr+gOfB66R5mE/FzpH/LNWp2V/qgixlVZDSuQAAAABJRU5ErkJggg==) 1x, url(data:image/png;base64,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) 2x) 3 2, pointer;
}

.deletion:hover, .insertion:hover {
	opacity: 0.8;
}

.insertion, .insertionPreview {
	color: #27ae60;
	background-color: #e4f9e4;
}

.deletion, .deletionPreview {
	color: #c0392b;
	background-color: #fce4e4;
}

/* ACTION BUTTONS - Hidden per new design */
.textshineActionHover {
	display: none;
}

.textshineAction {
	display: none;
}

.crossedOutReplacement {
	text-decoration: none;
	pointer-events: none;
}

.crossedOutDeletion {
	text-decoration: line-through rgba(192, 57, 43, 0.7) 2px;
	pointer-events: none;
}

/* Action button icons */
.textshineAction .fa-xmark,
.textshineAction .fa-check {
	font-size: 16px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.textshineAction .fa-xmark, .textshineChanges .fa-xmark {
	color: #dc3545;
	background-color: #fff;
}

.textshineAction .fa-xmark:hover {
	color: #fff;
	background-color: #dc3545;
}

.textshineAction .fa-check, .textshineChanges .fa-check {
	color: #28a745;
	background-color: #fff;
}

.textshineAction .fa-check:hover {
	color: #fff;
	background-color: #28a745;
}

/* CORRECTED CHANGES */
.corr, .corrPreview {
	display: inline;
	color: #27ae60;
	background-color: #e4f9e4;
	padding: 2px 6px;
	border-radius: 3px;
	position: relative;
	align-items: center;
}

.corr {
	cursor: pointer;
	transition: all 0.2s ease;
}

.corr:hover {
	filter: brightness(0.95);
}

/* Discarded/rejected correction - greyed out */
.corr[data-discarded="true"] {
	color: #999;
	background-color: #f0f0f0;
}

.corr[data-discarded="true"]:hover {
	filter: brightness(0.95);
}

/* Loading screen - centered on gray background */
.textshine-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 50px;
}

.loading-logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.loading-logo-icon {
	width: 48px;
	height: auto;
}

.loading-logo-text {
	font-size: 28px;
	font-weight: 600;
	color: var(--color-brand);
}

/* LOADING ANIMATIONS */
.loading-animation-wrapper {
	overflow: hidden;
	display: flex;
	justify-content: center;
	padding: 15px;
}

.textshineLoading {
	display: flex;
	flex-direction: column;
	gap: 25px;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	width: fit-content;
}

.textshineLoading .loadingStart {
	position: relative;
}

.textshineLoading .loadingStart .fa-feather-pointed {
	left: 245px;
	animation: crossingOutFeather 5s linear infinite;
}

.textshineLoading .loadingEnd {
	position: relative;
}

.textshineLoading .loadingEnd .fa-feather-pointed {
	animation: writeCorrection 5s linear infinite;
}

.textshineLoading .loadText {
	background-color: rgb(237, 237, 237);
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	animation: blendOutPlaceholder 5s linear infinite;
}

.textshineLoading .crossed {
	height: 3px;
	width: 100%;
	max-width: 247px;
	background-color: var(--color-brand);
	position: absolute;
	top: 25px;
	animation: crossingOutLine 5s linear infinite;
}

.textshineLoading .fa-feather-pointed {
	opacity: 0;
	color: var(--color-brand);
	position: absolute;
	left: -5px;
	top: -3px;
	z-index: 1;
}

@keyframes crossingOutLine {
	0% { max-width: 0 }
	30% { max-width: 247px }
}

@keyframes crossingOutFeather {
	0% { left: -2px; opacity: 1 }
	30% { left: 245px }
	34% { opacity: 1 }
	35% { opacity: 0 }
}

@keyframes blendOutPlaceholder {
	0% { left: 0 }
	45% { left: 0 }
	80% { left: 260px }
	100% { left: 260px }
}

@keyframes writeCorrection {
	44% { opacity: 0 }
	45% { transform: translate(3px, -10px); opacity: 1 }
	50% { transform: translate(40px, 0); opacity: 1 }
	55% { transform: translate(77px, -10px); opacity: 1 }
	60% { transform: translate(114px, 0); opacity: 1 }
	65% { transform: translate(151px, 10px); opacity: 1 }
	70% { transform: translate(188px, 0); opacity: 1 }
	75% { transform: translate(225px, -10px); opacity: 1 }
	80% { transform: translate(263px, 7px); opacity: 1 }
	100% { transform: translate(263px, 7px); opacity: 1 }
}

/* SPINNER */
.spinnerOverlay {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	background-color: rgba(var(--color-light-rgb), 0.8);
}

#spinner-content {
	position: fixed;
}

.spinner {
	border: 10px solid var(--color-dark);
	border-top: 10px solid var(--color-brand);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
	position: absolute;
	top: min(calc(50% - 25px), 200px);
	left: calc(50% - 25px);
	transform: translate(-50%, -50%);
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.hidden {
	display: none;
}