/* Theme Name: Flash dh child description: >- A child theme of the Twenty Fifteen default WordPress theme Author: John Doe Template: flash Version: 1.0.0 */ /* @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap'); */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Merriweather:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@1,600&display=swap'); /* Globale Farbvariable */ :root { --primary-fire-color: #ffcc33; /* Gelb */ --secondary-fire-color: #ff6633; /* Orange */ --tertiary-fire-color: #cc0000; /* Rot */ } .legal-link { text-decoration: underline; text-decoration-color: #999; /* dezentes Grau */ text-underline-offset: 2px; /* etwas Abstand */ text-decoration-thickness: 1px; /* dünn */ color: inherit; /* keine Textfarbe ändern */ } .softbutton { min-width: 100px; text-align: center; cursor: pointer; padding: 1em 0.25em; } .softbutton-wrapper { display: flex; gap: 1em; justify-content: center; padding: 1em !important; } /* Der Sticky-Container, der transformiert */ .sticky-wrapper { position: fixed; bottom: 1rem; right: 1rem; width: 7.5em; /* Endzustand – ca. 7em bis 10em breit */ transition: all 0.5s ease; z-index: 1000; } /* Expanded-Zustand: Vollbild-Overlay */ .sticky-wrapper.expanded { top: 0; left: 0; bottom: 0; right: 0; width: 100vw; height: 100vh; } .highlight-fast { background-color: #fff; color: #333; font-weight: bold !important; white-space: nowrap; padding: 0px 6px; border-radius: 4px; } .highlight-error { background-color: var(--error-color); color: #333; font-weight: bold !important; white-space: nowrap; padding: 0px 6px; border-radius: 4px; } /* Finaler Inhalt: Ihre bestehenden Styles für Navigation; hier exemplarisch */ .navigation-preview-container { width: 100%; height: 100%; overflow-y: auto; /* ... weitere Ihre Styles ... */ } /* Das Overlay, das den initialen Vollbild-Inhalt abdeckt */ .navigation-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); color: ##333; font-weight: bold; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.5s ease; z-index: 2; /* bleibt über dem Inhalt */ } /* Overlay-Button */ .overlay-button { margin-top: 1rem; padding: 0.5rem 1rem; cursor: pointer; } .navigation-title { padding: 0 0 0.5em 0; } .navigation-preview-container { max-height: 100vh; overflow-y: auto; } .navigation-number { font-size: 2em; font-weight: bold; } .navigation-preview-nav { background: rgba(0, 0, 0, 0.6); border-radius: 6px; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; align-items: center; position: relative; } .navigation-preview-arrow { font-size: 3rem; background: var(--secondary-color); color: #fff; padding: 0.25em 0; border-radius: 9px; text-align: center; display: inline-block; text-transform: uppercase; transition: transform 0.3s ease; border: 1px solid var(--primary-color); width: 100%; } .scroll-hint-text { font-size: 0.9rem; color: white; margin-bottom: 0.3em; font-weight: bold; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes arrow-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--bounce-distance, 10px)); } } .animate-arrow { color: white !important; animation: arrow-bounce 2s infinite; } .blink { animation: blink 0.75s infinite; } .navigation-preview-item { background: white; aspect-ratio: 1 / 1; /*1.414; /* A4-Verhältnis */ min-width: 7em; padding: 0.25em; text-align: center; cursor: pointer; border: 5px solid transparent; font-size: 12px; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; } .navigation-preview-item.active { border-color: var(--secondary-color); } .highlighted { outline: 4px solid var(--secondary-color); } #doc_manager_editor_preview span { display: inline-block; } .extra-info { margin-top: 1em; background: var(--background-color); padding: 0.5em; color: #333; text-align: center; line-height: 1.5em; box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1), inset 0 5px 8px -5px } .helpdesk-phone { background-color: #333; color: #fff; text-align: center; padding: 0.5em; } .p1min, .p2min { background-color: var(--error-color); color: #000; padding: 1px 12px 1px 12px; border-radius: 3px; text-align: center; display: inline-block; width: 5em; } .download_free { background-color: var(--primary-color); color: var(--background-color); } .editor_caption { margin: 2em 0 1em 0.5em; text-align: left; display: flex; align-items: center; justify-content: space-between; } .close-text-editor { display: flex; align-items: center; justify-content: center; margin-left: auto; background: var(--text-color); color: var(--background-color); border-radius: 6px; width: 1em; height: 1em; font-size: 1.5em; cursor: pointer; } .frage { margin: 1em 0.5em 1em 0.5em; line-height: 1.5em; color: var(--secondary-color); font-weight: bold; } #fragen-container p { margin: 0.5em; } .frage_robot { max-width: 10em; height: auto; } .preview_coach ul { font-weight: bold; } .preview_coach ol { font-weight: normal; } .preview_coach ol, .preview_coach ul { padding: 1em 1em 0 1em; } .preview_coach li { padding: 0.5em 0 0 0; } .bold-underline { font-weight: bold; text-decoration: underline; text-decoration-thickness: 3px; /* Dicke des Unterstrichs */ text-underline-offset: 2px; /* Abstand zwischen Text und Linie */ } .underline { text-decoration: underline; text-decoration-thickness: 1px; /* Dicke des Unterstrichs */ text-underline-offset: 2px; /* Abstand zwischen Text und Linie */ } .fetch_status_flex-container { display: flex; justify-content: center; gap: 20px; padding: 10px; } .fetch_status_status-item { width: 120px; text-align: center; border: 1px solid #ccc; padding: 10px; border-radius: 8px; background: #f9f9f9; } .fetch_status_icon { font-size: 50px; margin-bottom: 10px; } .fetch_status_name { font-weight: bold; margin-bottom: 5px; } .fetch_status_duration { font-size: 16px; color: #555; } /* Inline Flame Icon mit echtem Feuer-Farbverlauf und Höhen-Animation */ .inline-flame { display: inline-block; font-size: 2em; /* Icon-Größe */ background: linear-gradient(0deg, var(--tertiary-fire-color), var(--secondary-fire-color), var(--primary-fire-color)); -webkit-background-clip: text; /* Hintergrund auf Text clippen */ -webkit-text-fill-color: transparent; /* Text transparent für Verlauf */ animation: flameGradient 1s infinite alternate ease-in-out, flameHeight 1s infinite ease-in-out; transform-origin: bottom center; /* Unten fixiert skalieren */ vertical-align: bottom; /* Im Textfluss ausrichten */ } /* Animation für den changierenden Farbverlauf */ @keyframes flameGradient { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } /* Höhen-Animation (Skalierung in der Y-Achse) */ @keyframes flameHeight { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.85); /* Auf 80% der Höhe skalieren */ } 100% { transform: scaleY(1); } } .triangle-badge-small::after { content: '\f005'; font-family: FontAwesome; position: absolute; top: 3px; right: 3px; color: white; font-size: 12px; z-index: 2; pointer-events: none; } .triangle-badge-small::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 30px solid var(--secondary-color); border-left: 30px solid transparent; z-index: 1; } .round-image { max-width: 15em; /* Größe anpassen */ max-height: 15em; /* Größe anpassen */ border-radius: 50%; /* Rundes Bild */ object-fit: cover; /* Sorgt für vollständige Abdeckung */ } .form-label { display: flex; align-items: center; } .form-icon { background: var(--primary-color); padding: 6px; float: left; margin-right: 1em; color: white; border-radius: 6px; width: 1em; text-align: center; } .sl { list-style: none; padding-left: 0; margin: 1.5em 0 2em 0; } .sl li { position: relative; padding-left: 1.2em; /* Platz für den Spiegelstrich */ margin-top: 0.5em; } .sl li::before { content: "–"; /* Spiegelstrich */ position: absolute; left: 0; top: 0; } .testimonials-container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; text-align: center; } .testimonial { flex: 1; /* Für kleinere Screens */ max-width: 350px; padding: 30px; background: #f9f9f9; background: var(--background-color); cursor: pointer; border: 1px solid #ddd; border-radius: 0 0 15px 0; box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1), inset 0 5px 8px -5px rgba(180, 220, 240, 1); display: flex; flex-direction: column; align-items: center; } .testimonial .pic { width: 10em; height: 10em; border-radius: 50%; margin-bottom: 1.5em; } .testimonial-content { text-align: left; } .statement { font-size: 1rem; font-style: italic; margin-bottom: 10px; } .name { font-weight: normal; color: #333; } /* Responsive: Untereinander statt nebeneinander */ @media (max-width: 768px) { .sticky-wrapper { width: 6em; } .softbutton { min-width: unset; scale: 0.9; padding: 1em !important; } .softbutton-wrapper { /*gap: 0; justify-content: left; */ padding: 1em !important; } .navigation-preview-item { font-size: 9px; } .testimonials-headlines { text-align: center; } .testimonials-container { flex-direction: column; align-items: center; width: 100%; } .testimonial { text-align: left; align-items: center; } .testimonial img { margin-right: 15px; margin-bottom: 0; } .testimonial-content { text-align: left; } } .multi-image { display: inline-flex; align-items: flex-end; } .multi-image img { max-width: 350px; } .multi-image .front { z-index: 200; } .multi-image .back { z-index: 100; } .multi-image .secondary { margin-left: -35%; } .multi-image .smaller { scale: 0.8; transform-origin: bottom; } .multi-image .larger { scale: 1.2; transform-origin: bottom; } .center-container { display: flex; /* Zentriert den Container */ justify-content: center; align-items: center; position: relative; /* Ermöglicht das Platzieren des Play-Buttons */ } .video { max-width: 768px; /* Maximale Breite des Videos */ width: 100%; /* Flexible Breite */ } .play-button { position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; /* Runde Form */ width: 120px; /* Größerer Button */ height: 120px; /* Größere Höhe */ background-color: rgba(230, 0, 104, 0.8); /* Transparente Hintergrundfarbe */ z-index: 10; /* Über dem Video */ cursor: pointer; opacity: 1; /* Button sichtbar */ transition: opacity 0.3s ease; /* Sanftes Ein-/Ausblenden */ } .play-button::before { content: ''; /* Erzeugt das Dreieck */ display: block; width: 0; /* Keine Breite, da es nur das Dreieck erzeugt */ height: 0; /* Keine Höhe */ border-style: solid; /* Festlegung des Stils für das Dreieck */ border-width: 18px 0 18px 30px; /* Größe des Dreiecks (Höhe und Breite) */ border-color: transparent transparent transparent white; /* Weißes Dreieck */ position: absolute; /* Positionierung innerhalb des Buttons */ left: 50%; /* Horizontal zentrieren */ top: 50%; /* Vertikal zentrieren */ transform: translate(-50%, -50%); /* Zentrierung des Dreiecks */ } .play-button.hidden { opacity: 0; /* Versteckt den Button */ pointer-events: none; /* Deaktiviert Klicks auf den Button */ } .video { max-width: 100%; width: 100%; } .card-icon { border: 1px solid #333; border-bottom-right-radius: 9px; padding: 0.25em; color: #999; } div.product-category { font-family: 'Montserrat' !important; color: #fff; background-color: #216b65; margin: 2em 0 1em 0; padding: 0.25em 0 0.25em; box-shadow: inset 5px 0 8px -5px rgba(0, 0, 0, 0.4), /* Innerer Schatten links */ inset 0 5px 8px -5px rgba(0, 0, 0, 0.4); background: linear-gradient(45deg, #fff, #000, #fff); } h3.product-detail { text-align: center; font: inherit; } .card-icon-small { border: 1px solid #fff; border-bottom-right-radius: 6px; padding: 0.25em; color: #fff; } .data_notice { width: 100%; min-height: 2em; margin: 1em 1em 1em 1em; text-align: center; color: #999; line-height: 1.5em; } li.info-circle { list-style: none; /* Entfernt das Standard-Listensymbol */ position: relative; /* Erlaubt die Verwendung von `::before` */ padding-left: 25px; /* Platz für das Icon reservieren */ } li.info-circle::before { content: "\f05a"; /* Unicode für fa-info-circle */ font-family: "FontAwesome"; /* Font Awesome Schriftart */ position: absolute; left: 0; /* Icon linksbündig platzieren */ top: 10px; transform: translateY(-50%); /* Korrektur für vertikale Zentrierung */ font-size: 14px; /* Größe des Icons */ color: #007bff; /* Farbe des Icons */ } .save_notice { width: 100%; border-radius: 6px; padding: 6px 12px 6px 12px; border: 1px solid var(--text-color); } .link-to-button, .rate-button, .rate-button-checkout { font-size: .8em; background-color: var(--accent-color); font-weight: bold; display: inline-block; color: white; cursor: pointer; border-radius: 6px; padding: 10px 15px; text-transform: uppercase; font-family: inherit; text-decoration: none; text-align: center; } .helpdesk-image { aspect-ratio: 4 / 3; width: 80%; height: auto; } td.helpdesk { display: flex; justify-content: center; } .lebenslauf_tipp { line-height: 1.75em; background-color: #fff; padding: 1em; border-radius: 8px; } .tab-hint { padding: 0.1em 0.25em 0.15em 0.25em; border: 1px solid var(--primary-color); color: #fff; border-radius: 3px; background: var(--primary-color); margin: 0 0.25em 0 0.25em; white-space: nowrap; } .helpdesk-header { padding: 0.5em 0 0 0.5em; background-color: var(--text-color); color: var(--background-color); } /* Overlay-Stil */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */ z-index: 9999; display: flex; align-items: center; justify-content: center; } /* Spinner-Stil */ .spinner { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.3); /* Außenring mit Transparenz */ border-top: 5px solid #fff; /* Weißer Vordergrundring */ border-radius: 50%; animation: spin 1s linear infinite; } /* Stil für disabled-Button */ button[disabled] { background-color: #ccc; /* Grauer Hintergrund */ color: #888; /* Graue Schrift */ cursor: not-allowed; /* Nicht-erlaubt-Cursor */ opacity: 0.7; /* Transparent-Effekt */ } .gauge_limit-outer { position: absolute; /*width: 100%;*/ height: 100%; /* background: red; */ } .gauge_limit-inner { text-align: left; position: relative; border-left: 4px solid var(--secondary-color); /* background: green; */ width: 100px; height: 70px; margin-top: 0.2em; margin-left: 7.9em; transform: rotate(28deg); z-index: 100; } .tab-hint-active { background-color: #ddd; color: #333; font-weight: bold; padding: 0.1em 0.25em 0.15em 0.25em; border: 1 px solid #ddd } /* Animation für den Spinner */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .bubble { position: absolute; background-color: var(--error-color); color: #333; padding: 8px 12px; font-size: 12px; border-radius: 5px; white-space: normal; /* mehrzeilig statt Abschneiden */ overflow-wrap: break-word; /* Umbruch bei langen Wörtern */ box-sizing: border-box; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); z-index: 1000; top: unset; /* Standard-Top-Wert aufheben */ left: 0; /* Links bündig mit dem Feld */ } .bubble::after { content: ''; position: absolute; top: 100%; /* Spitze unten */ left: 10px; /* Position der Spitze */ border-width: 8px; /* Größe der Spitze */ border-style: solid; border-color: var(--error-color) transparent transparent transparent; /* Spitze zeigt nach oben */ } .close-icon { position: absolute; /* Für die feste Platzierung */ top: 5px; /* Abstand zum oberen Rand */ right: 5px; /* Abstand zum rechten Rand */ margin-left: 5px; cursor: pointer; font-size: 12px; color: #333; opacity: 0.8; transition: opacity 0.2s; } .close-icon:hover { opacity: 1; } .klassisch table.ht { width: 100%; table-layout: fixed; border-collapse: collapse; } .klassisch table.st { width: 100%; border-collapse: collapse; } .klassisch td.ht { vertical-align: top; border-collapse: collapse; } .klassisch td.ht-ml { padding-left: 2em; vertical-align: top; border-collapse: collapse; } .klassisch .spacer-left { margin-left: 0.25em; } .klassisch h1 { letter-spacing: 0.1em; text-transform: uppercase; font-size: 14pt; padding: 0 !important; margin: 0 !important; } .klassisch h2 { border-top: 1px solid silver; border-bottom: 1px solid silver; color: #666; padding: 3px 0 3px 6px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10pt; font-weight: normal; margin-bottom: 1em; } .klassisch .liste { text-transform: uppercase; color: #999; font-weight: bold; } .klassisch .liste-accent { font-family: 'Crimson Text', serif; font-size: 12pt; line-height: 1.25em; } .klassisch .spacer-xl-top { margin-top: 2em; } .klassisch .spacer-xl-bottom { margin-bottom: 2em; } .klassisch td, .klassisch h2 { font-family: 'Open Sans', sans-serif; } .klassisch .cv-section { margin-bottom: 2em !important; } .klassisch .cv-detail { margin-bottom: 1em; } .klassisch ul { list-style: none; padding: 0; } .klassisch li { padding: 0.2em 0 0 1em; position: relative; } .klassisch li::before { content: "–"; position: absolute; left: 0; } .Xklassisch div.chapter { padding-left: 1em; } .klassisch td { font-size: 9pt; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; vertical-align: top; } .klassisch td.subtable-value { font-size: 9pt; /*border: 1px solid red;*/ text-transform: uppercase; } .klassisch td.subtable-icon { vertical-align: top; } .klassisch .font-secondary { font-family: 'Crimson Text', serif; font-weight: bold; font-size: 1.5em; } .klassisch table { width: 100%; } .klassisch .subtable { height: 100%; } .klassisch .cv-table-wrapper { width: 2em; /*border: 1px solid green;*/ vertical-align: top; height: 100%; } .klassisch .cv-inner-table { height: auto; /*border: 1px solid blue;*/ box-sizing: border-box; /* Korrekte Höhenberechnung */ height: 100%; } .klassisch .cv-circle-cell { color: #666; line-height: 0.5em; padding-top: 0.5em; height: 1%; } .klassisch .cv-empty-cell { /*border: 1px solid #666;*/ empty-cells: show; width: 0.29em; /*wichtig, damit der Abstand zur Mitte des Punkts stimmt*/ height: 99%; } .klassisch td.arbeitgeber { padding-top: 0.5em; line-height: 0.5em; } .klassisch td.arbeitgeber-website { padding-top: 0; } .klassisch td.arbeitgeber-aufgaben { padding-top: 0.75em; } .klassisch .cv-border-cell { height: 99% !important; border-left: 1px solid #666; } .klassisch .cv-content-cell { height: 1%; vertical-align: top; } .heller { color: #999; } .spacer-left { margin-left: 0.25em; } .doc_manager_thumbnail { flex: 1 1 calc(33.33% - 10px); /* 3 pro Zeile mit Abstand */ max-width: 120px; /* Maximale Breite 120px */ aspect-ratio: 1 / 1.414; /* DIN A4-Verhältnis */ padding: 1em 0.5em; /* Innerer Rand */ box-sizing: border-box; /* Padding wird innerhalb der max-width berücksichtigt */ background-color: #f9f9f9; /* Optional: Hintergrundfarbe */ display: flex; /* Flexbox für zentrierten Inhalt */ align-items: flex-start; /* Vertikal zentriert */ justify-content: center; /* Horizontal zentriert */ } .div_main_document_container { width: 100%; justify-content: center; } .div_main_document_container_inner { width: 100%; } .doc_manager_thumbnail_large { flex: 1 1 100%; /* Nimmt die ganze Breite ein */ aspect-ratio: 1 / 1.414; /* DIN A4-Verhältnis */ padding: 5%; /* Innerer Rand */ box-sizing: border-box; /* Padding wird innerhalb der max-width berücksichtigt */ background-color: #f9f9f9; /* Optional: Hintergrundfarbe */ display: flex; /* Flexbox für zentrierten Inhalt */ align-items: flex-start; /* Vertikal zentriert */ justify-content: center; /* Horizontal zentriert */ } .doc_manager_thumbnail img { object-fit: fill; /*max-height: 100% !important; width: 200% !important;*/ } /* Container, der Icon und Text übereinander (vertikal) und mittig anzeigt */ .doc_manager_new { display: flex; /* Ermöglicht flexibles Layout */ flex-direction: column; /* Ordnet die Kinder (Icon, Text) untereinander an */ align-items: center; /* Zentriert horizontal (Icon und Text) */ justify-content: center; /* Zentriert vertikal, falls ein Container eine bestimmte Höhe hätte */ text-align: center; /* Falls mehrzeilige Texte hinzukommen, bleiben sie mittig */ font-size: 0.8em; } /* Optional: Zusätzlicher Abstand zwischen Icon und Text */ .doc_manager_new>i { margin-bottom: 0.25em; color: #999; } body { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 400 !important; background-color: var(--background-color); accent-color: var(--primary-color); color: var(--text-color); } .text_editor_preview_buttons { width: 100%; } .doc_manager_text_editor_container { width: 100%; } .doc_manager_text_editor_preview { box-sizing: border-box; border-radius: 12px; padding: 2em; border: 1px solid #666; width: 100%; background: var(--background-color); min-height: 20em; } .doc_manager_editor_controls { padding-right: 1em; max-width: 33%; min-width: 24em; overflow: auto; padding-bottom: 2em; box-sizing: border-box; } .text_editor_preview_buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-bottom: 10px; } /* Hauptcontainer für Editor-Kategorien */ .editor-category_container { padding: 1em 0 0 0; } /* Container für jedes Editor-Record */ .editor-record { display: flex; flex-direction: row; /* Stellt sicher, dass die Felder im Editor-Record übereinander angeordnet sind */ align-items: flex-start; /* Vertikale Ausrichtung am oberen Rand */ padding: 1em 0 0 0; } .editor-record_multi { border-top: 1px solid var(--primary-color); margin-top: 1em; } /* Zeile für Felder in einem Record */ .editor-field_row { display: flex; flex-direction: row; /* Ordnet die Felder horizontal an */ width: 100%; } /* Allgemeine Feldcontainer-Styling */ .editor-field { margin-right: 8px; } /* Drag-Handle-Styling */ .editor-drag_handle { display: inline-block; padding: 5px; background-color: var(--background-color); /* Dynamische Hintergrundfarbe */ color: #333; border: 1px solid #333; border-radius: 5px; cursor: pointer; margin-right: 0.75em; align-self: flex-start; /* Positioniert Drag-Handle oben */ } /* Hauptcontainer für Felder */ .editor-main_field_container { display: flex; align-items: center; /* Zentriert Inhalte vertikal */ } /* Container für Chevron-Symbol */ .editor-chevron_container { cursor: pointer; margin-right: 8px; align-self: flex-start; /* Positioniert Chevron-Symbol oben */ } /* Buttons zum Hinzufügen und Löschen */ .editor-delete_record_btn { margin-left: 10px; align-self: flex-start; /* Positioniert Icons oben */ } .editor-add_record_btn { margin-top: 1em; align-self: flex-start; width: 100%; /* Positioniert Icons oben */ } .editor-help_icon { position: relative; /* Tooltip positioniert sich relativ zum Icon */ cursor: pointer; } /* Tooltip-Container */ .editor-tooltip { position: absolute; background-color: rgba(0, 0, 0, 0.85); /* Schwarzer Hintergrund mit leichter Transparenz */ color: #fff; padding: 1em; /* Komfortables Padding */ border-radius: 4px; font-size: 0.85em; z-index: 999; white-space: normal; /* Zeilenumbruch bei längeren Texten */ display: inline-block; top: 100%; /* Tooltip erscheint unterhalb des Icons */ left: 0; /* Positioniert den Tooltip rechts des Icons */ margin-top: 10px; /* Abstand nach unten */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Schatten für besseren Effekt */ word-wrap: break-word; /* Lange Wörter umbrechen */ transform: translateX(-10px); /* Position leicht nach links verschieben */ z-index: 999; } /* Hilfe-Icon neben Feldern */ .editor-help_icon { margin-left: 5px; cursor: pointer; } /* Steuercontainer oben */ .editor-top_controls { display: flex; justify-content: flex-start; align-items: center; } /* Icon zum Ein- und Ausklappen */ .editor-field_display_container.collapsed { display: none; } .editor-field input { margin-top: 0.25em; } .editor-row { display: flex; width: 100%; flex-direction: column; /* Ordnet die editor-field_wrapper Elemente vertikal */ } .editor-nav_button { width: 100%; } .editor-field_wrapper { margin-top: 10px; width: 100%; margin-bottom: 10px; width: 100%; margin-top: 0em; } .editor-category_container button { background-color: var(--text-color); } .editor-toggle_optional_silent, .editor-nav_button { background-color: #999 !important; color: var(--background-color) !important; } /* CSS für die Ausrichtung und Darstellung des Chevrons und der Überschrift */ .editor-header_container { display: flex; justify-content: space-between; align-items: center; background-color: #fff; box-shadow: 8px 8px 8px #cbced1, -8px -8px 8px white; padding: 0.25em 1em; margin-bottom: 1em; } .editor-header_container_collapsed { display: flex; justify-content: space-between; align-items: center; background-color: #fff; box-shadow: 8px 8px 8px #cbced1, -8px -8px 8px white; padding: 0.25em 1em; } .editor-header { flex: 1; cursor: pointer; } .editor-chevron { cursor: pointer; margin-left: 10px; padding: 5px; } /* Container für das gesamte Foto-Feld */ .editor_photo_container { display: flex; justify-content: center; /* Zentriert den photoWrapper horizontal */ align-items: center; /* Zentriert den photoWrapper vertikal */ margin-top: 10px; /* Abstand zwischen Label und Foto */ } /* Wrapper für Foto und Löschen-Button */ .editor_photo_wrapper { display: flex; align-items: center; position: relative; /* Ermöglicht absolute Positionierung innerhalb */ } /* Foto oder Platzhalter */ .editor_photo_upload_field { width: 150px; /* Größe des großen Quadrats */ height: 150px; background-color: #f0f0f0; /* Grauer Hintergrund */ border: 2px solid #ccc; /* Grauer Rahmen */ border-radius: 50%; /* Runde Form */ display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; /* Ermöglicht Loslösen des Buttons */ } .editor_preview_photo_container { aspect-ratio: 1 / 1; /* Macht das Element quadratisch */ background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 50%; /* Rundes Quadrat */ background-position: center center; background-repeat: no-repeat; background-size: cover; /* Skaliert den Hintergrund korrekt */ display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; margin-left: 2em; margin-right: 2em; } /* Platzhalter-Inhalt (Icon) */ .editor_photo_placeholder { width: 100%; height: 100%; background-size: cover; /* Bild skalieren */ background-position: center; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; } .editor_photo_placeholder i { font-size: 75px; /* Größe des Icons */ color: #aaa; /* Farbe des Icons */ } .editor_preview_photo_container i { font-size: 8em; /* Größe des Icons */ color: #aaa; /* Farbe des Icons */ } .editor_preview_foto { background-position: center; background-repeat: no-repeat; } /* Löschen-Button */ .editor_photo_delete_button { width: 40px; /* Größe des kleinen Quadrats */ height: 40px; background-color: var(--text-color); /* Rote Hintergrundfarbe */ border: none; border-radius: 50%; /* Runde Form */ display: flex; justify-content: center; align-items: center; cursor: pointer; position: absolute; /* Absolut positioniert, um Foto-Zentrierung zu erhalten */ right: -50px; /* Platzierung rechts neben dem Foto */ top: 50%; /* Vertikale Ausrichtung */ transform: translateY(-50%); } .editor_photo_delete_button i { font-size: 20px; /* Größe des Icons im Button */ color: #fff; /* Weiße Icon-Farbe */ } /* CSS für den eingeklappten Zustand */ .collapsed { display: none; } .div_success { margin: 0.5em 0 1em 0; text-align: center; } #success_1 { font-size: 1em; font-weight: bold; } .ql-editor { font-size: 18px; font-family: Nunito; } .doc_manager_text_editor_preview, #doc_manager_text_editor .ql-editor { font-size: 18px; font-family: "Open Sans"; } .ql-editor ul li::before { font-size: 1.5em; line-height: 0.5; vertical-align: top; margin-right: 0.2em; margin-top: 0.15em; } /* Weniger linker Rand bei Listenpunkten */ .ql-editor ul { line-height: 1.2; padding-left: 1em; /* Geringerer linker Abstand der Liste */ } .ql-editor ul li { margin-left: -1em; /* Geringerer linker Abstand für Listenelemente */ } /* HIER*/ .form-category { border: 1px solid #ccc; padding: 15px; margin-bottom: 20px; position: relative; } .info-icon { cursor: pointer; color: #888; position: absolute; top: 10px; right: 10px; } .grid-container { display: grid; grid-template-columns: 1fr; gap: 10px; } .grid-item { display: flex; align-items: center; border: 1px solid #ddd; padding: 10px; background-color: #f9f9f9; } .template-group { display: flex; align-items: center; gap: 10px; } .handle { cursor: move; color: #888; } .delete-handle { cursor: pointer; color: #f00; } .instruction { font-size: 0.9em; color: #555; margin-bottom: 10px; } .grid-container.allowed-drop { cursor: move; } .grid-container.not-allowed-drop { cursor: not-allowed; } .highlight-eco { background-color: var(--accent-color); color: white; font-weight: bold !important; white-space: nowrap; padding: 0px 8px; } .highlight-top { background-color: var(--secondary-color); color: white; font-weight: bold !important; white-space: nowrap; padding: 0px 8px; } /* Container mit relativem Kontext */ .triangle-badge { position: relative; } /* Dreieck in der Ecke */ .triangle-badge::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 44px solid var(--secondary-color); border-left: 44px solid transparent; z-index: 1; } /* Stern-Icon */ .triangle-badge::after { content: '\f005'; /* Font Awesome Icon (Stern) */ font-family: FontAwesome; /* Font Awesome aktivieren */ position: absolute; top: 4px; right: 5px; color: white; /* Sternfarbe */ font-size: 18px; z-index: 2; /* Über dem Dreieck */ pointer-events: none; } #section-slider .tab_container { box-shadow: 0 0 24px rgba(180, 220, 240, 1); margin: 0 0 -20px 0; display: flex; flex-wrap: wrap; cursor: pointer; } #section-slider .slider-tab { width: 100%; flex: 1; padding-right: 1em; padding-left: 1em; align-self: end; } #section-slider .slider-tab.active { padding-bottom: 0px; border-left: 1px solid silver; border-right: 1px solid silver; /*border-bottom: 20px solid var(--primary-color);*/ } #section-slider .slider-tab:not(.active) .img { filter: saturate(60%) } #section-slider .slider-tab.active td.text h2 { font-weight: bold; } #section-slider .slider-tab:not(.active) td.text h2 { font-weight: normal; } #section-slider table { border-collapse: collapse; border: 0; margin-right: 1em; padding-right: 1em; } #section-slider .slider-tab:not(.active) { background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0) 50%), white; } #section-slider .slider-tab.active { background: white; } #section-slider .img { width: 80px; height: 80px; overflow: hidden; position: relative; border-radius: 50%; box-shadow: inset 0 0 12px rgba(180, 220, 240, 1); margin: 6px; } #section-slider .img1 { position: absolute; width: 240px; height: auto; top: -15px; left: -30px; rotate: -7deg; } #section-slider .img2 { position: absolute; width: 240px; height: auto; top: -12px; left: -115px; rotate: 5deg; } #section-slider .img3 { position: absolute; width: 240px; height: auto; left: -80px; top: -5px; } #section-slider td { vertical-align: middle; } #section-slider h2 { line-height: 1.15em; font-size: 1.25em; } #section-slider td.text { padding-left: 10px; line-height: 0.75em; } #section-slider .tab_container-tab.active { color: #333; font-weight: bold !important; box-shadow: none; /* Entfernt den Schein beim aktiven Tab */ } #section-slider .tab_container-tab:not(.active) { background-color: rgb(0, 94, 255); } #section-slider .tab_container-tab:not(.active)::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); pointer-events: none; } #section-slider .tab_container-tab.active::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; /*background: linear-gradient(to top, rgb(204, 231, 245), rgba(0,0,0, 0));*/ pointer-events: none; } .tab_container { margin-top: -4em; display: flex; flex-wrap: wrap; } .tab_container-tab { font-family: 'Montserrat' !important; color: #fff; padding: 10px 20px; margin-bottom: 0.75em; flex: 1; white-space: nowrap; cursor: pointer; font-weight: normal !important; position: relative; /* Erforderlich für das ::before-Pseudo-Element */ } .tab_container-tab.active { color: #333; font-weight: bold !important; box-shadow: none; /* Entfernt den Schein beim aktiven Tab */ } .tab_container-tab:not(.active) { background-color: rgb(0, 94, 255); } .tab_container-tab:not(.active)::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); pointer-events: none; } .tab_container-tab.active::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; /*background: linear-gradient(to top, rgb(204, 231, 245), rgba(0,0,0, 0));*/ pointer-events: none; } /* Dokumenten-Grid */ .doc_manager_document_grid { display: flex; flex-wrap: wrap; gap: 24px; /*align-items: center;*/ /*justify-content: center;*/ /*justify-content: space-between;*/ } /* Dokumenten-Item */ .doc_manager_document_item { width: 360px; /* Breiter, um Umbrüche zu vermeiden */ /*height: 200px;*/ /* Gleiche Höhe für alle Items */ box-sizing: border-box; } /* Container für Thumbnail und Info */ .doc_manager_content_container { display: flex; align-items: center; padding: 4px; /* 4px Abstand zu allen Seiten */ } /* Container für Thumbnail und Info */ .doc_manager_content_container_large { position: relative; align-items: center; overflow: hidden; /* 4px Abstand zu allen Seiten */ } .teaser_checkmark { background: var(--secondary-color); border-radius: 50%; margin-right: 0.25em; color: var(--background-color); padding: 3px } ul.teaser { display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin-bottom: 1em; } ul.teaser li { background: #fff; color: #666; /*padding: 2px 1em 2px 1em;*/ border-radius: 2px; margin-bottom: 0.25em; padding-right: 0.5em; box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1), inset 0 5px 8px -5px rgba(180, 220, 240, 1); white-space: nowrap; } .teaser_icon { width: 1em; text-align: center; margin: 0 0.25em 0 -1px; border-radius: 4px; background: var(--secondary-color); color: #fff; padding: 4px; } .teaser_icon_eco { width: 1em; text-align: center; margin: 0 0.25em 0 -1px; border-radius: 4px; background: var(--accent-color); color: #fff; padding: 4px; } .doc_manager_document_item_large { width: 100%; } @media (min-width: 1024px) { .doc_manager_document_item_large { /*width: 100%;*/ width: 48%; } } .doc_manager_document_info_preview_open, .doc_manager_document_info_large_mini { position: absolute; top: 1em; left: 50%; transform: translate(-50%, 1em); z-index: 2; border-radius: 5px; padding: 0.25em 1em; box-shadow: 0 12px 24px rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.6); color: #fff; text-align: center; white-space: nowrap; pointer-events: none; } .doc_manager_document_info_large_HM { position: relative; min-width: unset; width: 100%; top: unser; left: unset; transform: unset; border-radius: unset; box-shadow: unset; margin-top: -10em; /* Absolut positionieren relativ zum Thumbnail */ background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 80px); padding: 4em 2em 2em 2em; color: #fff; box-sizing: border-box; } .doc_manager_document_info_large { min-width: 275px; position: absolute; /* Absolut positionieren relativ zum Thumbnail */ top: 50%; /* 50% vom oberen Rand des Containers */ left: 50%; /* 50% vom linken Rand des Containers */ transform: translate(-50%, -50%); /* Verschieben um die Hälfte der eigenen Größe */ /*width: 80%; /* 80% der Breite des Thumbnails */ z-index: 2; /* Über dem Thumbnail anzeigen */ background-color: rgba(255, 255, 255, 0.9); border-radius: 6px; padding: 1em; box-shadow: 0 12px 24px rgba(255, 255, 255, 0.5); /* box-shadow: 0 12px 24px rgb(180, 220, 240); background: linear-gradient(30deg, #fff, #e2f3ff, #fff); background-color: #fff; border: 1em white; box-shadow: inset 0 0 0 1em #fff;*/ background: rgba(0, 0, 0, 0.6); color: #fff; } .doc_manager_thumbnail_large, .doc_manager_thumbnail_large_placeholder { flex-shrink: 0; width: 100%; /* Anpassen nach Bedarf */ position: relative; background-color: #fff; border: 2px solid #ccc; border-radius: 0; /* Kein Radius für existierende Items */ overflow: hidden; cursor: pointer; display: inline-block; } .noevents { /* verhindert Text markieren*/ user-select: none; -webkit-user-select: none; -ms-user-select: none; pointer-events: none; } .noselect { /* verhindert Text markieren*/ user-select: none; -webkit-user-select: none; -ms-user-select: none; } /* Thumbnail */ .doc_manager_thumbnail, .doc_manager_thumbnail_placeholder { flex-shrink: 0; width: 120px; height: 169px; /* Anpassen nach Bedarf */ position: relative; background-color: #fff; border: 2px solid #ccc; border-radius: 0; /* Kein Radius für existierende Items */ overflow: hidden; cursor: pointer; } /* Für neues Dokumenten-Item - gestrichelter Rahmen und Radius */ .doc_manager_new_document_item .doc_manager_thumbnail_placeholder { border: 2px dashed #ccc; border-radius: 6px; } .doc_manager_thumbnail_placeholder::before { content: ''; display: block; padding-top: 141.42%; /* A4-Seitenverhältnis */ } /* Thumbnail Plus Icon */ .doc_manager_thumbnail_plus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--primary-color); border-radius: 50%; width: 48px; /* Größe des Kreises */ height: 48px; display: flex; justify-content: center; align-items: center; } .doc_manager_thumbnail_plus i { font-size: 24px; color: #fff; } /* Dokumenten-Info */ .doc_manager_document_info, .doc_manager_document_info_preview { flex-grow: 1; padding-left: 10px; box-sizing: border-box; } /* Dokumenten-Name */ .doc_manager_document_info_preview .doc_manager_document_name { font-weight: normal; margin: 0; } /* Dokumenten-Typ */ .doc_manager_document_info_preview .doc_manager_document_typ { font-weight: bold; margin: 0; } .doc_manager_document_info .doc_manager_document_name { font-weight: bold; margin: 0; } .doc_manager_document_info .doc_manager_document_typ { font-weight: normal; margin: 0; } /* Dokumenten-Zeitstempel */ .doc_manager_document_timestamp { font-size: 0.9em; color: #666; margin: 5px 0; } /* Aktionen */ .doc_manager_document_actions { display: flex; flex-wrap: wrap; gap: 5px; } /* Aktionen Links und Buttons */ .doc_manager_document_actions a { flex: 1 1 auto; text-decoration: none; color: var(--text-color); background: none; border: none; padding: 0; font: inherit; cursor: pointer; white-space: nowrap; /* Umbrüche verhindern */ } /* PDF-Download Button */ .doc_manager_document_actions button.primary-button { width: 100%; /* Volle Breite des Optionscontainers */ margin-top: 5px; /* Optionaler Abstand nach oben */ } /* Aktionen Icons */ .doc_manager_document_actions a i, .doc_manager_document_actions button i { margin-right: 5px; } .doc_manager_editor_controls_container { display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; box-sizing: border-box; gap: 1rem; /* Optionaler Abstand */ } .doc_manager_editor_preview { background-color: #fff; border-radius: 12px; padding: 2em; border: 1px solid #666; } /* Editor ist 33%, Preview füllt den Rest */ @media (min-width: 768px) { .doc_manager_small { display: none !important; } .doc_manager_large { display: inherit !important; } .doc_manager_editor_controls { flex: 0 0 33%; } .doc_manager_editor_preview { background: var(--background-color); min-height: 20em; } .doc_manager_editor_preview_container { flex: 1; overflow: hidden; } } /* Auf kleinen Bildschirmen untereinander, Preview oben */ @media (max-width: 767px) { @keyframes arrow-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--bounce-distance, 10px)); } } .doc_manager_small { display: inherit !important; } .doc_manager_large { display: none !important; } .doc_manager_editor_controls { order: 2; width: 100%; max-width: unset !important; } .doc_manager_editor_preview_container { order: 1; width: 100%; } .doc_manager_editor_preview { background: var(--background-color); min-height: 20em; } #section-slider .slider-tab.active { order: 1; } .tab_container-tab.active { order: 1; } } /* Erstellen-Button */ .doc_manager_create_button { margin-top: 10px; } /* Sortierleiste */ #doc_manager_sorting_bar { margin-bottom: 20px; justify-content: center; } .doc_manager_sort_button { background-color: transparent; padding: 2px 6px; border: 1px solid var(--text-color); font: inherit; cursor: pointer; margin-right: 10px; color: #333; } .doc_manager_sort_button i { margin-left: 5px; } /* Editor-Stile */ #doc_manager_editor_controls .doc_manager_editor_controls_container { display: flex; align-items: center; gap: 10px; } #doc_manager_editor_controls #doc_manager_document_name_input { flex-grow: 1; } #doc_manager_editor_controls .doc_manager_editor_controls_buttons { display: flex; gap: 5px; margin-top: 1em; } #doc_manager_editor_controls .doc_manager_editor_controls_buttons button { flex-shrink: 0; } /* Allgemeines Button-Styling */ button { display: inline-block; align-items: center; gap: 5px; padding: 10px 15px; background-color: var(--primary-color); color: #fff; border: none; border-radius: 5px; cursor: pointer; } /* Icon im Plus-Button: Weißer, ausgefüllter Kreis */ button .fa-plus { background-color: #fff; color: var(--primary-color); border-radius: 50%; padding: 5px; } /* .tab_container { margin-top: -4em; display: flex; flex-wrap: wrap; } .tab_container-tab { font-family: 'Montserrat' !important; color: #333; background-color: rgba(255, 255, 255, 0.75); padding: 10px 20px; margin-bottom: 0.75em; flex: 1; white-space: nowrap; cursor: pointer; font-weight: normal !important; position: relative; } .tab_container-tab.active { color: #333; background-color: rgba(255, 255, 255, 0.75); font-weight: bold !important; box-shadow: none; } .tab_container-tab:not(.active)::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; background: linear-gradient(to top, rgb(204, 231, 245), rgba(0,0,0, 0)); pointer-events: none; } .tab_container-tab.active::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; background: linear-gradient(to top, rgb(204, 231, 245), rgba(0,0,0, 0)); pointer-events: none; } */ h1, h2, h3, h4, button { font-family: Montserrat; } input, textarea, select { font-family: Nunito !important; } /* Farbvariablen */ :root { --background-color: #fff; --text-color: #333; --primary-color: #005eff; --accent-color: #216b65; --secondary-color: rgb(230, 0, 104); --error-color: #ffa91f; /* --gauge-color-1: #E84C3D; --gauge-color-2: #e67e22; --gauge-color-3: #f1c40f; --gauge-color-4: #9baa1e; --gauge-color-5: #1eaa59; */ --gauge-color-1: #aaa; --gauge-color-2: #fff; --gauge-color-3: #fff; --gauge-color-4: #216b65; --gauge-color-5: #216b65; } .people-container { display: flex; justify-content: space-between; } .people-box { text-align: center; align-content: center; } a.hotline { color: white !important; font-family: Nunito; font-weight: bold; } li.hotline { background: var(--accent-color); padding: 5px 10px; border-bottom-right-radius: 12px; } .hspecials { display: flex; align-items: center; gap: 10px; /* Abstand zwischen den Links */ list-style-type: none; padding: 0; margin: 0; } .hspecials li { display: inline-block; } .hspecials li.hspecials-hide { display: inline-block; } a.hr { font-family: Nunito; color: var(--background-color) !important; font-weight: bold; } li.hr { background-color: var(--secondary-color); padding: 5px 10px; } /* Für schmalere Displays */ @media (max-width: 768px) { .hspecials { flex-direction: column; gap: 5px; /* Weniger Abstand zwischen den Links */ } .hspecials li.hspecials-hide { display: none; /* Versteckt das Trennsymbol auf mobilen Geräten */ } .hspecials li { width: 100%; /* Beide Links sind gleich breit */ text-align: center; /* Links zentriert auf der vollen Breite */ } li.hr { padding: 2px 10px; } li.hotline { padding: 2px 10px; } } .theater { padding: 20px 0 60px 0; } .centered_notice { width: 100%; height: 10em; display: flex; /* Flexbox aktivieren */ justify-content: center; /* Horizontales Zentrieren */ align-items: center; /* Vertikales Zentrieren */ text-align: center; /* Text zentrieren innerhalb des Elements */ } section.bye { box-shadow: inset 5px 0 8px -5px rgba(0, 0, 0, 0.4), inset 0 5px 8px -5px rgba(0, 0, 0, 0.4); margin-bottom: -4em; background: linear-gradient(45deg, #000, #216b65, #000); padding: 20px !important; } h1, h2, h3, h4, section, div { scroll-margin-top: 60px; } .bye-container { display: flex; flex-wrap: wrap; justify-content: space-between; /* Außenabstand des Containers */ gap: 20px; /* Abstand zwischen den Boxen */ } .bye-box { flex: 1 1 calc(50% - 20px); /* 33,333% minus die Hälfte des Abstands */ max-width: calc(50% - 20px); /* Maximale Breite, damit die Boxen sich nicht überschneiden */ background: linear-gradient(30deg, #ffffff, #eeeeee); border-bottom-right-radius: 24px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.3s ease; } .bye-box-pulse { background-color: #ffcc00; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; animation: pulse 3.7s ease-out infinite; animation-delay: 0s; animation-delay: 1s; } .bye-box-hover-zoom:hover { transform: scale(1.05); } .bye-box-content { display: flex; padding: 20px; flex-wrap: wrap; /* Erlaubt das Umfließen bei kleinen Bildschirmen */ } .bye-image-container { flex: 1; width: 33.333%; padding-right: 10px; } .pr { padding-right: 10px; } .pl { padding-left: 10px; } .bye-image-container { flex: 1; width: 33.333%; } .bye-image-container img { width: 100%; height: auto; } .bye-text-container { flex: 2; display: flex; flex-direction: column; justify-content: flex-start; } .bye-text-container h2 { margin: 0; font-size: 1.5em; } .bye-text-container p { margin: 0; color: #555; } @media (max-width: 768px) { .bye-box { flex: 1 1 100%; /* Boxen füllen bei kleinen Bildschirmen den gesamten Container aus */ max-width: 100%; } .bye-box-content { flex-direction: column; /* Elemente untereinander anordnen */ } .bye-image-container, .bye-text-container { width: 100%; /* Beide Elemente nehmen 100% des Platzes ein, also untereinander */ } .pl { padding-top: 12px; padding-left: 0; } } .codeModal-input { height: 50px !important; text-align: center !important; font-size: 24px !important; font-weight: bold !important; border-radius: 0 !important; border: 1px solid #333 !important; padding: 4px !important; margin: 0 1px; } /* CSS-Klasse für ein modernes Zitat mit großen Anführungszeichen */ .blockquote { margin: 3em 0 3em 0; padding: 20px 40px 20px; position: relative; background-color: var(--background-color); border-radius: 1em; } .blockquote p { font-family: "Merriweather"; font-size: 1.25em; font-weight: normal; font-style: italic; text-align: center; padding-top: 1em; color: var(--accent-color) } .blockquote:before { position: absolute; font-family: 'FontAwesome'; font-style: italic; top: 10; content: "\f10d"; font-size: 3em; color: var(--accent-color); } .pink-borders { border-top: 12px solid var(--accent-color) !important; } .report-procon-image-container { position: relative; display: inline-block; } .report-procon-image-container img { display: block; width: 100%; height: auto; filter: grayscale(100%); /* Bild in Schwarz-Weiß umwandeln */ } .report-procon-image-container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"width="4"height="4"viewBox="0 0 4 4"><circle cx="1"cy="1"r="1"fill="black"/><circle cx="3"cy="1"r="1"fill="black"/><circle cx="1"cy="3"r="1"fill="black"/><circle cx="3"cy="3"r="1"fill="black"/></svg>') repeat; opacity: 0.3; */ /* Transparenz des feinen Punktmusters */ pointer-events: none; /* Das Overlay ist nicht klickbar */ } .report-procon-container { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px auto; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; margin-top: 1em; border: 1px solid #999; /* border-top-left-radius: 1em; */ /*border-bottom-right-radius: 1em;*/ padding: 1em; background: linear-gradient(30deg, #ccc, #fff, #ccc); fill: #999; background: var(--background-color); border: 1px solid #ddd; border-radius: 0; box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1), /* Innerer Schatten links */ inset 0 5px 8px -5px rgba(180, 220, 240, 0.5); } .report-procon-column { flex: 1 1 48%; padding: 20px; box-sizing: border-box; margin-right: 2%; } .report-procon-column:last-child { margin-right: 0; /* Entfernt den rechten Rand von der letzten Spalte */ } .report-procon-column h3 { background-color: #333; color: #fff; padding: 0 12px; margin: -20px -20px 20px -20px; /* Negative Margin to kompensieren für Padding */ position: relative; /* Ermöglicht die Verwendung von Box-Schatten */ box-shadow: 5px 5px 10px rgba(180, 220, 240, 0.5); } .button-procon-teaser { background-color: var(--text-color); color: white; cursor: pointer; border: 0; padding: 10px 15px; font-weight: bold; text-transform: uppercase; font-family: inherit; box-shadow: 5px 5px 10px rgba(180, 220, 240, 0.5); /* Hellblauer Schatten unten und rechts */ } .report-procon-column ul { list-style: none; padding: 0; } .report-procon-column ul li { margin: 5px 0; } .report-procon-pro ul li:before { content: "\f058"; /* Font Awesome check icon */ font-family: FontAwesome; color: var(--accent-color); margin-right: 10px; } .report-procon-contra ul li:before { content: "\f057"; /* Font Awesome times icon */ font-family: FontAwesome; color: var(--secondary-color); margin-right: 10px; } @media (max-width: 768px) { .report-procon-column { flex: 1 1 100%; } } img.teaser-image { width: 75%; height: auto; } .button-inverse { background-color: var(--background-color); color: #333; padding: 0 12px 0 12px; margin-right: 6px; border-bottom-right-radius: 6px; font-weight: normal; } .version-info { float: right; font-size: 12px; color: #aaa; } .legal p { margin: 0.75em 0; } .uni-container { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 20px; /* Abstand von 20px zwischen den Boxen */ } .uni-box-colorful { border-radius: 6px; color: var(--background-color); padding: 20px; line-height: 1.5em; } .uni-box-1 { flex: 1; /* Nimmt den restlichen verfügbaren Platz ein */ } .uni-box-2 { flex: 0; /* Nimmt nur so viel Platz wie benötigt */ } /* Responsive Design */ @media (max-width: 600px) { .uni-container { flex-direction: column-reverse; align-items: flex-end; gap: 10px; /* Abstand von 20px zwischen den Boxen */ } .uni-box { text-align: center; padding: 20px; } } .wrapper { display: table; margin: 0 auto; /* background: rgba(255, 255, 255, 0.25); */ /*padding: 10px;*/ border-radius: 6px; /* box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 9px -1px #15222e; */ } .wrapper-header { font-family: Arial, Helvetica, sans-serif; text-align: center; color: rgba(255, 255, 255, 0.74); margin: 30px 0 15px; font-weight: normal; } .heart { margin: 0 8px; display: inline-block; animation: simplePulse ease-in-out 1.1s infinite; } .gauge { font-family: Arial, Helvetica, sans-serif; background: #e7e7e7; border-top: 2px solid #ccc; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29); width: 200px; height: 100px; border-radius: 100px 100px 0 0; position: relative; overflow: hidden; /* safari fix */ -webkit-transform-style: flat; -webkit-transform: translateZ(0px); } .gauge.min-scaled { transform: scale(0.5); } .gauge-center { content: ''; color: #fff; width: 60%; height: 60%; background: #15222E; border-radius: 100px 100px 0 0; position: absolute; box-shadow: 0 -13px 15px -10px rgba(0, 0, 0, 0.28); right: 21%; bottom: 0; color: #fff; } .gauge-center::before { content: 'Qualität'; font-size: 1em; width: 100%; padding: 18px 0 0 0; text-align: center; float: left; -webkit-font-smoothing: antialiased; } .gauge-center::after { content: 'Anschreiben'; width: 100%; float: left; opacitY: .6; text-align: center; } .needle, .needle2 { width: 78px; height: 7px; background: #15222E; border-bottom-left-radius: 100%; border-bottom-right-radius: 5px; border-top-left-radius: 100%; border-top-right-radius: 5px; position: absolute; bottom: 4px; left: 20px; transform-origin: 100% 4px; transform: rotate(0deg); box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.38); transition: transform 1s ease-in-out; } .needle.pendulum, .needle2.pendulum { animation: pendulum 1s infinite; } @keyframes pendulum { 0% { transform: rotate(calc(var(--rotation) - 5deg)); } 50% { transform: rotate(calc(var(--rotation) + 5deg)); } 100% { transform: rotate(calc(var(--rotation) - 5deg)); } } .slice-colors .st { position: absolute; bottom: 0; width: 60px; height: 0; border-bottom: 80px solid #000; border-left: 12px solid transparent; border-right: 12px solid transparent; } .slice-colors .st.slice-item:nth-child(1) { border-bottom-color: var(--gauge-color-1); left: -2px; } .slice-colors .st.slice-item:nth-child(2) { border-bottom-color: var(--gauge-color-2); transform: rotate(135deg); transform-origin: right; top: 12px; left: -65px; } .slice-colors .st.slice-item:nth-child(3) { border-bottom-color: var(--gauge-color-3); transform: rotate(179deg); transform-origin: right; top: -20px; left: -62px; border-bottom-width: 90px; border-left-width: 45px; border-right-width: 45px; width: 18px; } .slice-colors .st.slice-item:nth-child(4) { border-bottom-color: var(--gauge-color-4); transform: rotate(219deg); transform-origin: right; top: -23px; left: 43px; } .slice-colors .st.slice-item:nth-child(5) { border-bottom-color: var(--gauge-color-5); transform: rotate(240deg); transform-origin: right; right: 52px; } @-webkit-keyframes speed { 0% { transform: rotate(0); } 40% { transform: rotate(90deg); } 55% { transform: rotate(80deg); } 75% { transform: rotate(90deg); } } @-webkit-keyframes simplePulse { from { opacity: .4; } to { opacity: .98; } } .slide_bewerbung, .slide_lebenslauf { cursor: pointer; } #section-slider a, #section-products a { text-decoration: none; color: inherit; } .article h2, .article h3, .article h4 { margin: 4em 1em 0 0; font-family: Merriweather; } .article a { color: var(--accent-color) !important; } .article p { margin-top: 2em; line-height: 1.8em; } .article .left { display: inline-block; width: 70%; text-align: left; } .article .right { display: inline-block; width: 30%; text-align: right; } .article .left-footer { display: block; width: 100%; text-align: center; font-weight: bold; margin-top: 10px; } .article .price-card { max-width: unset; } .article .right-footer { display: block; width: 100%; text-align: center; font-weight: bold; margin-top: 10px; } @keyframes pulse { 0%, 20% { transform: scale(1); } 10% { transform: scale(1.1); } 90%, 100% { transform: scale(1.01); } } .pulse { animation: pulse 3.7s ease-out infinite; animation-delay: 1s; } .flag-icon { width: 20px; height: 15px; display: inline-block; background-size: cover; background-repeat: no-repeat; margin-right: 10px; } .flag-icon-de { background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath fill=%22%23cc2b1d%22 d=%22M1 11H31V21H1z%22%3E%3C/path%3E%3Cpath d=%22M5,4H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z%22%3E%3C/path%3E%3Cpath d=%22M5,20H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z%22 transform=%22rotate(180 16 24)%22 fill=%22%23f8d147%22%3E%3C/path%3E%3Cpath d=%22M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z%22 opacity=%22.15%22%3E%3C/path%3E%3Cpath d=%22M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z%22 fill=%22%23fff%22 opacity=%22.2%22%3E%3C/path%3E%3C/svg%3E'); } .flag-icon-gb { background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Crect x=%221%22 y=%224%22 width=%2230%22 height=%2224%22 rx=%224%22 ry=%224%22 fill=%22%23071b65%22%3E%3C/rect%3E%3Cpath d=%22M5.101,4h-.101c-1.981,0-3.615,1.444-3.933,3.334L26.899,28h.101c1.981,0,3.615-1.444,3.933-3.334L5.101,4Z%22 fill=%22%23fff%22%3E%3C/path%3E%3Cpath d=%22M22.25,19h-2.5l9.934,7.947c.387-.353,.704-.777,.929-1.257l-8.363-6.691Z%22 fill=%22%23b92932%22%3E%3C/path%3E%3Cpath d=%22M1.387,6.309l8.363,6.691h2.5L2.316,5.053c-.387,.353-.704,.777-.929,1.257Z%22 fill=%22%23b92932%22%3E%3C/path%3E%3Cpath d=%22M5,28h.101L30.933,7.334c-.318-1.891-1.952-3.334-3.933-3.334h-.101L1.067,24.666c.318,1.891,1.952,3.334,3.933,3.334Z%22 fill=%22%23fff%22%3E%3C/path%3E%3Crect x=%2213%22 y=%224%22 width=%226%22 height=%2224%22 fill=%22%23fff%22%3E%3C/rect%3E%3Crect x=%221%22 y=%2213%22 width=%2230%22 height=%226%22 fill=%22%23fff%22%3E%3C/rect%3E%3Crect x=%2214%22 y=%224%22 width=%224%22 height=%2224%22 fill=%22%23b92932%22%3E%3C/rect%3E%3Crect x=%2214%22 y=%221%22 width=%224%22 height=%2230%22 transform=%22translate(32) rotate(90)%22 fill=%22%23b92932%22%3E%3C/rect%3E%3Cpath d=%22M28.222,4.21l-9.222,7.376v1.414h.75l9.943-7.94c-.419-.384-.918-.671-1.471-.85Z%22 fill=%22%23b92932%22%3E%3C/path%3E%3Cpath d=%22M2.328,26.957c.414,.374,.904,.656,1.447,.832l9.225-7.38v-1.408h-.75L2.328,26.957Z%22 fill=%22%23b92932%22%3E%3C/path%3E%3Cpath d=%22M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z%22 opacity=%22.15%22%3E%3C/path%3E%3Cpath d=%22M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z%22 fill=%22%23fff%22 opacity=%22.2%22%3E%3C/path%3E%3C/svg%3E'); } .flag-icon-us { background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Crect x=%221%22 y=%224%22 width=%2230%22 height=%2224%22 rx=%224%22 ry=%224%22 fill=%22%23fff%22%3E%3C/rect%3E%3Cpath d=%22M1.638,5.846H30.362c-.711-1.108-1.947-1.846-3.362-1.846H5c-1.414,0-2.65,.738-3.362,1.846Z%22 fill=%22%23a62842%22%3E%3C/path%3E%3Cpath d=%22M2.03,7.692c-.008,.103-.03,.202-.03,.308v1.539H31v-1.539c0-.105-.022-.204-.03-.308H2.03Z%22 fill=%22%23a62842%22%3E%3C/path%3E%3Cpath fill=%22%23a62842%22 d=%22M2 11.385H31V13.231H2z%22%3E%3C/path%3E%3Cpath fill=%22%23a62842%22 d=%22M2 15.077H31V16.923H2z%22%3E%3C/path%3E%3Cpath fill=%22%23a62842%22 d=%22M1 18.769H31V20.615H1z%22%3E%3C/path%3E%3Cpath d=%22M1,24c0,.105,.023,.204,.031,.308H30.969c.008-.103,.031-.202,.031-.308v-1.539H1v1.539Z%22 fill=%22%23a62842%22%3E%3C/path%3E%3Cpath d=%22M30.362,26.154H1.638c.711,1.108,1.947,1.846,3.362,1.846H27c1.414,0,2.65-.738,3.362-1.846Z%22 fill=%22%23a62842%22%3E%3C/path%3E%3Cpath d=%22M5,4h11v12.923H1V8c0-2.208,1.792-4,4-4Z%22 fill=%22%23102d5e%22%3E%3C/path%3E%3Cpath d=%22M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z%22 opacity=%22.15%22%3E%3C/path%3E%3Cpath d=%22M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z%22 fill=%22%23fff%22 opacity=%22.2%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M4.601 7.463L5.193 7.033 4.462 7.033 4.236 6.338 4.01 7.033 3.279 7.033 3.87 7.463 3.644 8.158 4.236 7.729 4.827 8.158 4.601 7.463z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M7.58 7.463L8.172 7.033 7.441 7.033 7.215 6.338 6.989 7.033 6.258 7.033 6.849 7.463 6.623 8.158 7.215 7.729 7.806 8.158 7.58 7.463z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M10.56 7.463L11.151 7.033 10.42 7.033 10.194 6.338 9.968 7.033 9.237 7.033 9.828 7.463 9.603 8.158 10.194 7.729 10.785 8.158 10.56 7.463z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M6.066 9.283L6.658 8.854 5.927 8.854 5.701 8.158 5.475 8.854 4.744 8.854 5.335 9.283 5.109 9.979 5.701 9.549 6.292 9.979 6.066 9.283z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M9.046 9.283L9.637 8.854 8.906 8.854 8.68 8.158 8.454 8.854 7.723 8.854 8.314 9.283 8.089 9.979 8.68 9.549 9.271 9.979 9.046 9.283z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M12.025 9.283L12.616 8.854 11.885 8.854 11.659 8.158 11.433 8.854 10.702 8.854 11.294 9.283 11.068 9.979 11.659 9.549 12.251 9.979 12.025 9.283z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M6.066 12.924L6.658 12.494 5.927 12.494 5.701 11.799 5.475 12.494 4.744 12.494 5.335 12.924 5.109 13.619 5.701 13.19 6.292 13.619 6.066 12.924z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M9.046 12.924L9.637 12.494 8.906 12.494 8.68 11.799 8.454 12.494 7.723 12.494 8.314 12.924 8.089 13.619 8.68 13.19 9.271 13.619 9.046 12.924z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M12.025 12.924L12.616 12.494 11.885 12.494 11.659 11.799 11.433 12.494 10.702 12.494 11.294 12.924 11.068 13.619 11.659 13.19 12.251 13.619 12.025 12.924z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M13.539 7.463L14.13 7.033 13.399 7.033 13.173 6.338 12.947 7.033 12.216 7.033 12.808 7.463 12.582 8.158 13.173 7.729 13.765 8.158 13.539 7.463z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M4.601 11.104L5.193 10.674 4.462 10.674 4.236 9.979 4.01 10.674 3.279 10.674 3.87 11.104 3.644 11.799 4.236 11.369 4.827 11.799 4.601 11.104z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M7.58 11.104L8.172 10.674 7.441 10.674 7.215 9.979 6.989 10.674 6.258 10.674 6.849 11.104 6.623 11.799 7.215 11.369 7.806 11.799 7.58 11.104z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M10.56 11.104L11.151 10.674 10.42 10.674 10.194 9.979 9.968 10.674 9.237 10.674 9.828 11.104 9.603 11.799 10.194 11.369 10.785 11.799 10.56 11.104z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M13.539 11.104L14.13 10.674 13.399 10.674 13.173 9.979 12.947 10.674 12.216 10.674 12.808 11.104 12.582 11.799 13.173 11.369 13.765 11.799 13.539 11.104z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M4.601 14.744L5.193 14.315 4.462 14.315 4.236 13.619 4.01 14.315 3.279 14.315 3.87 14.744 3.644 15.44 4.236 15.01 4.827 15.44 4.601 14.744z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M7.58 14.744L8.172 14.315 7.441 14.315 7.215 13.619 6.989 14.315 6.258 14.315 6.849 14.744 6.623 15.44 7.215 15.01 7.806 15.44 7.58 14.744z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M10.56 14.744L11.151 14.315 10.42 14.315 10.194 13.619 9.968 14.315 9.237 14.315 9.828 14.744 9.603 15.44 10.194 15.01 10.785 15.44 10.56 14.744z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M13.539 14.744L14.13 14.315 13.399 14.315 13.173 13.619 12.947 14.315 12.216 14.315 12.808 14.744 12.582 15.44 13.173 15.01 13.765 15.44 13.539 14.744z%22%3E%3C/path%3E%3C/svg%3E'); } .flag-icon-fr { background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath fill=%22%23fff%22 d=%22M10 4H22V28H10z%22%3E%3C/path%3E%3Cpath d=%22M5,4h6V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z%22 fill=%22%23092050%22%3E%3C/path%3E%3Cpath d=%22M25,4h6V28h-6c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z%22 transform=%22rotate(180 26 16)%22 fill=%22%23be2a2c%22%3E%3C/path%3E%3Cpath d=%22M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z%22 opacity=%22.15%22%3E%3C/path%3E%3Cpath d=%22M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z%22 fill=%22%23fff%22 opacity=%22.2%22%3E%3C/path%3E%3C/svg%3E'); } .flag-icon-it { background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath fill=%22%23fff%22 d=%22M10 4H22V28H10z%22%3E%3C/path%3E%3Cpath d=%22M5,4h6V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z%22 fill=%22%2341914d%22%3E%3C/path%3E%3Cpath d=%22M25,4h6V28h-6c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z%22 transform=%22rotate(180 26 16)%22 fill=%22%23bf393b%22%3E%3C/path%3E%3Cpath d=%22M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z%22 opacity=%22.15%22%3E%3C/path%3E%3Cpath d=%22M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z%22 fill=%22%23fff%22 opacity=%22.2%22%3E%3C/path%3E%3C/svg%3E'); } .toc a { line-height: 2em; color: inherit; } .toc { background-color: #eee; } .toc ul ul { padding-left: 2em; } .hint-area ul ul { margin-left: 2em; background-color: var(--background-color); border-radius: 6px; padding: 0.5em; border-radius: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); color: #555; padding: 8px 24px; margin: 4px; box-shadow: inset 5px 0 4px -5px rgba(0, 0, 0, 0.4), inset 0 5px 4px -5px rgba(0, 0, 0, 0.4); } .hint-area ul { margin-top: 1em; } .hint-area ul>li { margin-top: 0.75em; } .hint-area ul>li ul li { margin-top: 0.25em; } .container-with-padding { padding: 20px; min-height: 100vh; } p { margin: 0; line-height: 1.4; } .table-container { display: block; margin: 1em auto; } .flex-table:first-of-type .flex-row { background: #666; color: white; } .first { font-weight: bold; } .flag-icon { margin-right: 0.1em; } .flex-table { display: flex; flex-flow: row wrap; transition: 0.5s; } .flex-table.row:nth-child(odd) .flex-row { background: #ddd; } .flex-table:hover { background: #F5F5F5; transition: 500ms; } .flex-row { box-sizing: border-box; width: calc(100% / 3); text-align: center; vertical-align: middle; padding: 0.5em 0.5em; } .logo-text { max-height: 1em; vertical-align: sub; background: white; padding-left: 2px; margin-right: 0.25em; } .comp-headline { color: white !important; background-color: #333 !important; } .bkicm { color: var(--accent-color); margin-bottom: .5em; } .rowspan { display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: center; } .column { display: flex; flex-flow: column wrap; width: 75%; padding: 0; } .column .flex-row { display: flex; flex-flow: row wrap; width: 100%; padding: 0; border: 0; } .column .flex-row:hover { background: #F5F5F5; transition: 500ms; } .flex-cell { width: calc(100% / 3); text-align: center; padding: 0.5em 0.5em; } .dti-iv { height: 3em; width: 3em; margin-top: 1em; border: 1px solid #999; /* border-top-left-radius: 1em; */ border-bottom-right-radius: 1em; padding: 0.5em; background: linear-gradient(30deg, #ccc, #fff, #ccc); fill: #999; background: var(--background-color); border: 1px solid #ddd; border-radius: 0 0 15px 0; box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1), /* Innerer Schatten links */ inset 0 5px 8px -5px rgba(180, 220, 240, 1); } .svg-button { border: 0; background: none; cursor: pointer; } .button-preview-nav.preview-active { background-color: var(--text-color) !important; color: white !important; } .button-preview-nav { background-color: white; color: var(--text-color); cursor: pointer; border: 0; padding: 10px 15px; font-weight: bold; text-transform: uppercase; font-family: inherit; } .button-primary { background-color: var(--primary-color); color: white; cursor: pointer; border: 0; padding: 10px 15px; font-weight: bold; text-transform: uppercase; font-family: inherit; } .kaufen_form .button-primary { background-color: var(--secondary-color); color: var(--background-color); font-family: inherit; } .kaufen_form a { color: var(--background-color); } .button-document-actions { background-color: var(--primary-color); color: white; cursor: pointer; border: 0; margin-top: 6px; padding: 10px 15px; font-weight: bold; font-family: inherit; box-shadow: unset !important; } button.silent { background: none; color: var(--text-color); cursor: pointer; border: 1px solid var(--text-color); padding: 10px 15px; font-weight: bold; text-transform: uppercase; font-family: inherit; } .kaufen_form button.silent { background-color: var(--background-color); color: var(--text-color); font-family: inherit; border: 1px solid var(--background-color); } button.download_wait { background-color: var(--background-color); border: 4px dashed var(--error-color); color: #333; } .mute { background-color: var(--text-color); border-bottom-right-radius: 0px; font-weight: normal; } .label { padding-left: 24px; } label { line-height: 1.5em; } .full-width { box-sizing: border-box; width: 100%; } .form-area { position: relative; border-radius: 12px; padding: 20px; box-sizing: border-box; background: rgba(236, 240, 243, 0.5); box-shadow: 8px 8px 8px #cbced1, -8px -8px 8px white; } td.plz { max-width: 5em; } input.plz { text-align: center; } .kaufen_form label { line-height: 1em; } .kaufen_form textarea, .kaufen_form select, .kaufen_form input:not([type]), .kaufen_form input[type=text], .kaufen_form input[type=email] { box-sizing: border-box; display: block; width: 100%; background: #fff; padding: 0 6px 0 6px; font-size: 16px; border-radius: 3px; box-shadow: unset !important; /*box-shadow: inset 3px 3px 3px #cbced1, inset -6px -6px 6px #fff;*/ border: 0px; width: 100%; border: 1px solid var(--secondary-color) } textarea, select, input:not([type]), input[type=text], input[type=email] { box-sizing: border-box; display: block; width: 100%; background: #fff; padding: 5px 10px 5px 10px; font-size: 18px; border-radius: 6px; box-shadow: inset 3px 3px 3px #cbced1, inset -6px -6px 6px #fff; border: 0px; width: 100%; border: 1px solid var(--primary-color) } textarea { padding: 20px; } #checkout { min-height: 27em; } .spickzettel { display: inline-block; font-weight: bold; border: 1px solid #000; border-bottom-right-radius: 0.5em; color: e60068; padding: 0 8px; margin: 0.25em 0.25em 0 0.25em; white-space: nowrap; background: rgba(255, 255, 255, 0.5); } .small { font-size: 12px; } .center { width: 100%; text-align: center; justify-content: center; } .right { float: right; } .left { float: left; } .checkout-nav { height: 2em; } .mobile-show { display: none; } .mobile-hide { display: inline-block; } .tablet-hide { display: none; } .tablet-show { display: inline-block; } .desktop-show { display: none; } h2, h3 { padding: 0; margin: 0; line-height: 1.5em; } li div { flex-grow: 1; /* Erlaubt dem div, den verfügbaren Platz einzunehmen */ white-space: normal; /* Erlaubt normale Zeilenumbrüche innerhalb des div */ } .flex { display: flex; } ul { list-style: none; /* Entfernt die Standard-Listensymbole */ padding: 0; /* Entfernt das Standard-Padding */ margin: 0; /* Entfernt das Standard-Margin */ } div.price-card ul li { display: flex; /* Aktiviert Flexbox für das Listenelement */ align-items: flex-start; /* Zentriert die Inhalte vertikal */ padding: 6px 10px; /* Setzt Padding für bessere Spacing */ white-space: nowrap; /* Verhindert Zeilenumbrüche zwischen Icon und div */ } li i { margin-top: 2px; /* Abstand zwischen Icon und Text */ flex-shrink: 0; /* Verhindert, dass das Icon skaliert wird */ } .image-half-width { max-width: 50%; } .link { text-decoration: none; hyphens: auto; color: inherit; } .spacer-right { padding-right: 12px; } .free { background: linear-gradient(30deg, #fff, #e2f3ff, #fff); padding: 1em; flex: 1 1 0px; } .landing-kostenlos .pricing-overview .pricing-table, .landing-lebenslauf .pricing-overview .pricing-table { /* Erweitert auf 3 Spalten, ansonsten gleich wie zuvor */ grid-template-columns: 1fr 1fr 1fr; } .landing-kostenlos.no-eco .pricing-overview .pricing-table, .landing-lebenslauf.no-eco .pricing-overview .pricing-table { /* Erweitert auf 3 Spalten, ansonsten gleich wie zuvor */ grid-template-columns: 1fr 1fr; } .landing-bewerbung .pricing-overview .pricing-table { /* Erweitert auf 3 Spalten, ansonsten gleich wie zuvor */ grid-template-columns: 1fr 1fr; } /* LANDING KOSTENLOS LINKE KARTEN */ .landing-kostenlos #card-eco-bewerbung, .landing-kostenlos #overview-card-eco-bewerbung { align-self: end; justify-self: end; } .landing-kostenlos #card-eco-lebenslauf, .landing-kostenlos #overview-card-eco-lebenslauf { align-self: start; justify-self: end; } .landing-bewerbung .price-card:nth-child(3) { align-self: end; justify-self: end; } .landing-bewerbung #overview-card-top-single /*.landing-bewerbung .price-card:nth-child(4) */ { grid-column: 2; align-self: center; justify-self: start; } .landing-lebenslauf .price-card:nth-child(3) { align-self: end; justify-self: end; } .landing-lebenslauf #overview-card-top-single { align-self: center; justify-self: start; } .landing-lebenslauf.no-eco #overview-card-top-single { align-self: center; justify-self: start; grid-column: 2; } /* Karte 4 in Spalte 3 (über beide Zeilen, wenn gewünscht) */ .landing-kostenlos #overview-card-top-single { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: center; } .landing-kostenlos #overview-card-top-package { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: center; } .landing-kostenlos.no-eco #overview-card-top-single { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: start; } .landing-kostenlos.no-eco #overview-card-top-package { grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center; } .landing-bewerbung #card-top-lebenslauf { align-self: center; justify-self: end; } .landing-bewerbung .price-card:nth-child(2) { align-self: start; justify-self: end; } /* Karte 4 in Spalte 3 (über beide Zeilen, wenn gewünscht) */ .landing-bewerbung .pricing-overview .price-card:nth-child(1) { grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center; } .landing-lebenslauf .price-card:nth-child(1) { align-self: end; justify-self: end; } .landing-lebenslauf #card-eco-lebenslauf { align-self: center; justify-self: end; } /* Karte 4 in Spalte 3 (über beide Zeilen, wenn gewünscht) */ .landing-lebenslauf .pricing-overview .price-card:nth-child(1) { grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center; } .landing-kostenlos .pricing-table { display: grid; grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */ grid-template-rows: auto auto; /* Zwei Zeilen */ gap: 20px; justify-content: center; /* Zentriert die gesamte Tabelle horizontal */ align-items: center; /* Zentriert Inhalte vertikal in ihren Zellen */ width: 100%; } .landing-kostenlos.no-eco .pricing-table { grid-template-columns: 1fr; } .landing-bewerbung .pricing-table { display: grid; grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */ grid-template-rows: auto auto; /* Zwei Zeilen */ gap: 20px; justify-content: center; /* Zentriert die gesamte Tabelle horizontal */ align-items: center; /* Zentriert Inhalte vertikal in ihren Zellen */ width: 100%; } .landing-lebenslauf .pricing-table { display: grid; grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */ grid-template-rows: auto auto; /* Zwei Zeilen */ gap: 20px; justify-content: center; /* Zentriert die gesamte Tabelle horizontal */ align-items: center; /* Zentriert Inhalte vertikal in ihren Zellen */ width: 100%; } .landing-lebenslauf.no-eco .pricing-table { display: grid; grid-template-columns: 1fr; /* Zwei gleich große Spalten */ grid-template-rows: auto auto; /* Zwei Zeilen */ gap: 20px; justify-content: center; /* Zentriert die gesamte Tabelle horizontal */ align-items: center; /* Zentriert Inhalte vertikal in ihren Zellen */ width: 100%; } .landing-kostenlos #card-top-bewerbung { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: start; } .landing-bewerbung #card-top-bewerbung { grid-column: 2; align-self: center; justify-self: start; } .landing-kostenlos.no-eco #card-top-bewerbung { grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center; } .landing-kostenlos #overview-card-top-package { justify-self: center; /* Horizontal zentriert */ } .landing-kostenlos.no-eco .price-card:nth-child(4) { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: start; } .landing-kostenlos.no-eco #overview-card-top-package { justify-self: end; /* Horizontal zentriert */ } .landing-bewerbung .price-card:nth-child(3) { grid-column: 1; grid-row: 1 / 2; align-self: center; justify-self: end; } .landing-bewerbung .pricing-overview .price-card:nth-child(2) { grid-column: 1; grid-row: 1 / 2; align-self: center; justify-self: end; } .landing-bewerbung .pricing-overview #overview-card-top-package { grid-column: 1; grid-row: 1 / 2; align-self: center; justify-self: end;/ } .landing-lebenslauf #card-top-lebenslauf { grid-column: 2; align-self: center; justify-self: start; } .landing-lebenslauf.no-eco #card-top-lebenslauf { grid-column: 1; align-self: center; justify-self: center; } .landing-lebenslauf .pricing-overview .price-card:nth-child(2) { grid-column: 1; grid-row: 1 / 2; align-self: center; justify-self: end; } .landing-lebenslauf .pricing-overview #overview-card-top-package { grid-column: 2; grid-row: 1 / 2; align-self: center; justify-self: start;/ } .landing-lebenslauf.no-eco .pricing-overview #overview-card-top-package { grid-column: 1; grid-row: 1 / 2; align-self: center; justify-self: end;/ } .price-card { width: 80%; background: var(--background-color); cursor: pointer; border: 1px solid #ddd; border-radius: 0 0 15px 0; box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1), /* Innerer Schatten links */ inset 0 5px 8px -5px rgba(180, 220, 240, 1); padding: 20px; max-width: 300px; display: flex; flex-direction: column; justify-content: s_packe-between; justify-self: center; /* Zentriert jede Karte horizontal innerhalb ihrer Spalte */ } .price-card h2 { text-align: center; color: var(--text-color); } .price-card ul { list-style: none; padding: 0; } .price-card li { padding: 6px 10px; background-color: var(--background-color); } .price-card li:nth-child(even) { background-color: #eee; } .deep-black { color: #000; } .tc-opts ul { list-style: none; padding: 0; } .tc-opts li { width: 100%; box-sizing: border-box; padding: 2px 10px; } .tc-opts .odd { background-color: #eee; } .price-card .fa-icon { color: #555; margin-right: 10px; } .price-footer { font-size: 1.2em; text-align: center; margin-top: 20px; } .price-footer span { font-size: 0.8em; } #content h1 { padding: 0 20px; margin: 0; } .site-header { box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100%; height: 60px; z-index: 1000; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: flex; align-items: center; padding: 0 20px; transition: all 0.3s ease; /* Übergang für sanfte Animation */ } .site-header.scrolled { height: 60px; /* Verkleinert die Höhe */ background-color: #f8f8f8; /* Ändert die Hintergrundfarbe */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Intensiverer Schatten */ } .container { padding-top: 40px; max-width: 1200px; margin: 0 auto; } .site-header { display: flex; justify-content: space-between; align-items: center; } .logo img { height: 30px; /* Anpassung der Logo-Größe */ } .header-nav ul { list-style: none; padding: 0; margin: 0; display: flex; } .header-nav li { margin-left: 20px; } .header-nav a { text-decoration: none; color: var(--text-color); } #bottom-footer { margin-top: 5em; padding: 20px; background: linear-gradient(30deg, #000, #333, #666); box-sizing: border-box; } .footer-links { white-space: nowrap; margin: 0.5em; line-height: 2em; } #bottom-footer .copyright-text { color: #fff; text-decoration: none; font-size: 14px; } #bottom-footer a { color: #fff; text-decoration: none; font-size: 16px; } .text-block { width: 100%; height: 100%; text-align: center; display: flex !important; justify-content: center; align-items: end; } #scroll-up { background-color: var(--primary-color); border-radius: 3px; bottom: 20px; color: #fff; display: none; padding: 10px 16px; position: fixed; opacity: 0.5; z-index: 9999; filter: alpha(opacity=50); right: 20px; } .swiper-button-next, .swiper-button-prev { box-sizing: border-box; top: var(--swiper-navigation-top-offset, 60%) !important; } .swiper { width: 100%; height: 100%; } .swiper-slide h3 { margin: 1em 0 1em 0; } .swiper-slide { text-align: center; font-size: 18px; background: var(--background-color); display: flex !important; justify-content: center; align-items: center; padding: 50px 0 50px 0; height: unset !important; } .swiper-pagination { position: relative !important; margin-top: -70px; } .autoplay-progress { position: relative; right: 16px; bottom: 16px; z-index: 10; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--primary-color); float: right; margin: -24px 0 0 -30px; } .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0px; z-index: 10; width: 100%; height: 100%; stroke-width: 4px; stroke: var(--primary-color); fill: none; stroke-dashoffset: calc(125.6px * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg); } /* Layout für die Slides */ .slide { display: flex; justify-content: space-between; /* Sorgt für Abstand zwischen den Elementen */ align-items: center; flex-wrap: nowrap; /* Verhindert das Umbruchverhalten */ width: 90%; } .hli { margin: 1em 0 0.5em 0; } .text-block-content { /* Beide Elemente nehmen gleiche Teile des verfügbaren Raumes ein */ flex: 2; text-align: left; } .text-block-image { flex: 1; } .ll-preview { transform: rotate(-10deg); /* Anpassen: Grad der Drehung */ /* Schatten hinzufügen */ box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* Anpassen: Schattenwerte */ /* Animation für einen weicheren Effekt (optional) */ transition: transform 0.3s ease, box-shadow 0.3s ease; max-width: 50%; padding: 1em; } .text-content { /* Beide Elemente nehmen gleiche Teile des verfügbaren Raumes ein */ flex: 1; text-align: left; padding-left: 80px; } .text-content-vv { /* Beide Elemente nehmen gleiche Teile des verfügbaren Raumes ein */ flex: 1; text-align: left; padding-right: 80px; } .image-content { flex: 1; padding-right: 80px; justify-content: center; align-items: flex-end; height: 100%; display: flex; } .image-content-vv { flex: 1; padding-left: 0px; justify-content: center; align-items: flex-end; height: 100%; display: flex; } .slider-image { width: 100%; /* Stellt sicher, dass das Bild innerhalb seines Containers skaliert */ height: auto; /* Erhält das Seitenverhältnis des Bildes */ } /* Grundlegender Stil für den Tab-Container */ .tabs { display: flex; flex-wrap: wrap; width: 100%; list-style: none; padding: 0; margin: 0 0 1em 0; } /* Stil für einzelne Tabs */ .tab { flex: 1 1 auto; /* Jeder Tab nimmt flexibel Platz ein, je nach verfügbarem Platz */ padding: 10px 0 10px 10px; margin: 2px; background-color: var(--background-color); color: var(--text-color); text-align: left; font-weight: normal; box-sizing: border-box; cursor: pointer; transition: transform 0.3s ease-in-out; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); /* Box-Shadow von Silber zu Weiß, unten */ box-shadow: inset 5px 0 8px -5px rgba(0, 0, 0, 0.4), /* Innerer Schatten links */ inset 0 5px 8px -5px rgba(0, 0, 0, 0.4); /* Innerer Schatten unten */ } /* Stil für die Nummern in den Tabs */ .tab-number { float: left; /* Die Nummer verschieben */ min-width: 1.5em; color: white; background-color: var(--text-color); border-bottom-right-radius: 5px; /* Abgerundeter Radius */ text-align: center; margin-right: 0.5em; font-weight: bold; } /* Stil für den aktiven Tab */ .tab.active { font-weight: bold; color: var(--text-color); } /* Besondere Stilregel für die Nummer des aktiven Tabs */ .tab.active .tab-number { background-color: var(--accent-color); font-weight: bold; } .padding-s { padding: .5em; } .generator-headline { font-family: 'Montserrat' !important; color: #fff; background-color: #216b65; padding: 10px 20px; box-shadow: inset 5px 0 8px -5px rgba(0, 0, 0, 0.4), /* Innerer Schatten links */ inset 0 5px 8px -5px rgba(0, 0, 0, 0.4); margin-bottom: 0.75em; background: linear-gradient(45deg, #000, #216b65, #000); } .radius { border-bottom-right-radius: 16px; } section { padding: 4em 20px; margin-top: 5em; box-sizing: border-box; } .best-option { width: 100%; background-color: var(--text-color); color: white; text-align: center; padding: 4px; text-transform: uppercase; font-weight: bold; } .white-txt { color: #fff; padding: 6px 0 6px 0; } .white { background-color: #ddd; background: linear-gradient(-45deg, white 0%, #ddd 25%, white 100%); /* box-shadow: 0 -10px 20px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.2); */ /* box-shadow: 0 -10px 20px rgba(226, 243, 255, 1), 0 10px 20px rgba(226, 243, 255, 1); */ box-shadow: 0 12px 24px rgba(220, 220, 220, 1); border-top: 1px solid #eee; } .grey { background-color: #ddd; background: linear-gradient(90deg, #fff 10%, #ddd 60%, #fff 90%); /* box-shadow: 0 -10px 20px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.2); */ /* box-shadow: 0 -10px 20px rgba(226, 243, 255, 1), 0 10px 20px rgba(226, 243, 255, 1); */ box-shadow: 0 12px 24px rgba(180, 220, 240, 1); /* box-shadow: 0 -12px 24px rgba(33, 107, 101, 0.3), 0 12px 24px rgba(33, 107, 101, 0.3); */ } .bold { font-weight: bold; } .hint-area { border-radius: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); color: #555; /* background: #fff; */ padding: 8px 24px; box-shadow: inset 5px 0 4px -5px rgba(0, 0, 0, 0.4), /* Innerer Schatten links */ inset 0 5px 4px -5px rgba(0, 0, 0, 0.4); } .fehler { border: 6px solid var(--error-color); border-radius: 12px; padding: 24px; /* margin: 4px; */ /* color: white; */ margin: 8px 0 8px 0; } .fehler_alt { border: 6px solid var(--error-color); border-radius: 12px; padding: 12px; /* margin: 4px; */ /* color: white; */ margin: 8px 0 8px 0; } .fe { border: 4px solid var(--error-color) !important; } .fep { border: 2px solid var(--error-color) !important; } /* Basis-Styling für die Überschriften */ .chevron-heading { cursor: pointer; user-select: none; /* Verhindert das Markieren des Textes */ position: relative; padding-left: 20px; margin: 6px 0 6px 0; } /* Styling für das Chevron-Symbol */ .chevron-icon::before { position: absolute; left: 0; font-size: 16px; transition: transform 0.3s ease; color: var(--primary-color); margin-top: -13px; } .check-icon::before { position: absolute; left: 0; font-size: 16px; transition: transform 0.3s ease; color: var(--accent-color); margin-top: -13px; } /* Versteckt den Inhalt initial */ .content { display: none; padding: 6px 20px; } /* Transformation des Chevrons beim Öffnen */ .chevron-heading.active .chevron-icon::before { transform: rotate(180deg); /* Dreht das Chevron um, um es als geöffnet darzustellen */ } .radio-wrapper input[type="radio"] { transform: scale(1.1); /* Verdoppelt die Größe des Radio-Buttons */ appearance: none; width: 20px; height: 20px; box-shadow: inset 3px 3px 3px #cbced1, inset -3px -3px 3px white; border-radius: 50%; /* Runde Form für Radio-Buttons, rechteckig für Checkboxen */ position: relative; background: #fff; border: 2px solid var(--primary-color); } .radio-wrapper input[type="checkbox"] { transform: scale(1.1); /* Verdoppelt die Größe des Radio-Buttons */ appearance: none; width: 20px; height: 20px; border-radius: 4px; position: relative; background: var(--primary-color); border: 2px solid var(--primary-color); } .kaufen_form .radio-wrapper input[type="checkbox"]:checked, .kaufen_form .radio-wrapper input[type="checkbox"], .kaufen_form .radio-wrapper input[type="radio"] { box-shadow: unset; border: 2px solid var(--secondary-color); } .kaufen_form .radio-wrapper { margin-right: 4px; } .kaufen_form .radio-wrapper input[type="checkbox"]:checked { background-color: var(--secondary-color); } .radio-wrapper input[type="checkbox"]:checked { box-shadow: unset; background: var(--primary-color); } .radio-wrapper input[type="checkbox"] { box-shadow: inset 3px 3px 3px #cbced1, inset -3px -3px 3px white; background: #fff; } /* Stil für das "Haken"-Symbol bei Auswahl */ input[type="checkbox"]:checked::before { content: ''; width: 5px; height: 10px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; position: absolute; top: 0px; left: 4px; transform: rotate(45deg); } /* Stil für das "Haken"-Symbol bei Auswahl */ input[type="radio"]:checked::before { content: ''; width: 10px; height: 10px; background-color: var(--primary-color); /* Farbe des Punktes */ border-radius: 50%; /* Runde Form */ position: absolute; top: 3px; left: 3px; } .radio-container { display: flex; align-items: flex-start; /* Richtet die Elemente am oberen Rand aus */ } .radio-wrapper { margin-right: 20px; /* Abstand zwischen dem Radio-Button und den Label-Elementen */ } .text-area-wrapper { display: flex; flex-direction: column; line-height: 1.25em; flex-grow: 1; /* Lässt den text-area-wrapper den restlichen Platz einnehmen */ } .a { padding: 10px; } .spacer-lg-top { margin-top: 12px; } .spacer-xl-top { margin-top: 24px; } .spacer-top { margin-top: 6px; } .spacer-xl-bottom { margin-bottom: 24px; } .spacer-lg-bottom { margin-bottom: 12px; } .spacer-bottom { margin-bottom: 6px; } .black { color: var(--text-color); } #progressBar { width: 90%; margin-left: 5%; background-color: #f3f3f3; border: 1px solid #ccc; position: relative; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); border-radius: 3px; overflow: hidden; } #progress { width: 0; height: 30px; background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 10px, #216b65 10px, #216b65 20px); text-align: center; line-height: 30px; color: white; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset; } #percentage { font-size: 1.5em; color: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 30px; line-height: 30px; z-index: 2; width: 5em; background: linear-gradient(to right, transparent, white 1em, rgba(255, 255, 255, 0.8) 2em, rgba(255, 255, 255, 0.8) 3em, white 4em, transparent 5em); padding: 0 10px; } .eco-left { border-top: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; padding: 0 0.25em; background-color: var(--accent-color); color: #fff; font-weight: bold; } .eco-right { border-top: 1px solid black; border-bottom: 1px solid black; border-right: 1px solid black; border-bottom-right-radius: 6px; padding: 0 0.5em 0 0.25em; background-color: var(--background-color); color: var(--text-color); font-weight: normal; } .top-chance-container { white-space: nowrap; } .top-chance-left { border-top: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; padding: 0 0.25em; background-color: var(--secondary-color); color: #fff; font-weight: bold; } .top-chance-middle { border-top: 1px solid black; border-bottom: 1px solid black; padding: 0 0.25em; background-color: var(--background-color); color: var(--text-color); font-weight: bold; } .top-chance-right { border-top: 1px solid black; border-bottom: 1px solid black; border-right: 1px solid black; border-bottom-right-radius: 6px; padding: 0 0.5em 0 0.25em; background-color: var(--background-color); color: var(--text-color); font-weight: normal; } .top-chance-container_m { margin-right: 0.5em; padding: 0; padding-right: 0.25em; padding-bottom: 0.1em; border: 1px solid #666; background-color: var(--background-color); border-bottom-right-radius: 12px; /* Größerer Radius unten rechts */ } .top-chance-left_m { background-color: var(--secondary-color); /* Sekundärfarbe (z.B. rot) */ color: #fff; padding-left: 3px; /* Links 3px Padding */ padding-right: 0.25em; font-weight: bold; display: inline-block; vertical-align: middle; height: 100%; /* Höhe 100%, damit die Farbe bis unten durchgeht */ } .top-chance-middle_m { background-color: var(--background-color); color: var(--text-color); padding-left: 0.25em; padding-right: 0.25em; font-weight: bold; display: inline-block; vertical-align: middle; height: 100%; /* Sicherstellen, dass die Höhe mit der linken Box übereinstimmt */ } .top-chance-right_m { font-weight: normal; padding-right: 0.5em; /* Etwas mehr Padding rechts */ background-color: var(--background-color); color: var(--text-color); display: inline-block; vertical-align: middle; height: 100%; /* Sicherstellen, dass die Höhe mit der linken Box übereinstimmt */ } .tlm { display: inline-flex; } .tlbt { font-size: 18px; display: inline-block; vertical-align: top; } .lkit { color: #fff; padding-top: 0.25em; padding-bottom: 0.25em; /* padding-right: 0.25em; */ padding-left: 0.25em; font-weight: normal; } .bkio { border: 0px solid #fff; border-radius: 2em; display: inline-block; padding: 0em; background-color: var(--secondary-color); margin-right: 0em; } .tch { vertical-align: middle; padding: 0.4em; } .pink { color: var(--secondary-color); } .pink-bg { background-color: var(--secondary-color) !important; /*box-shadow: 2px -3px 3px 2px rgba(255, 255, 255, 0.75);*/ } .person { width: 30px; height: 30px; margin: 6px 0 0 -16px; fill: var(--gauge-color-1); } .person-u { width: 30px; height: 30px; margin: 6px 0 0 -16px; fill: var(--accent-color); } .person-i { width: 40px; height: 40px; margin: 6px 0 0 -16px; fill: var(--secondary-color); } .advantage-ki { margin: 1em 0 3em 0; /* font-size: 18px; */ font-weight: bold; border-top: 1px silver solid; border-bottom: 1px silver solid; padding-top: 1em; padding-bottom: 1em; } .orange-bg { background-color: var(--error-color) !important; } .green { color: var(--accent-color); } .green-bg { background-color: var(--accent-color); } .blue { color: var(--primary-color); } .ldet { background-color: var(--background-color); color: var(--text-color); padding: 0.25em 0.5em 0.25em 0.25em; border-bottom-right-radius: 0.5em; border: 1px solid #000; border-left: 0; font-weight: bold; } .eco { font-size: 16px; } .top-chance-height { height: 50px; padding-top: 14px; } .format-option { display: inline-block; min-width: 18em; } .frage { margin-top: 0.25em; } .button-container { display: flex; justify-content: space-between; align-items: center; padding: 10px; } .svg-button { flex: 1; /* Erlaubt den Buttons, sich zu dehnen und den verfügbaren Platz zu nutzen */ } .middle-buttons { display: flex; flex-grow: 2; justify-content: flex-start; gap: 10px; } .middle-button { flex: 1; } button.small { padding: 6px 12px; } .tool-button { background-color: var(--text-color); flex: 1 1 auto; justify-content: center; } @media (max-width: 768px) { .doc_manager_document_item_large { /*width: 100%;*/ width: 100%; } .doc_manager_document_info_large { position: relative; min-width: unset; width: 100%; top: unser; left: unset; transform: unset; border-radius: unset; box-shadow: unset; margin-top: -10em; /* Absolut positionieren relativ zum Thumbnail */ background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 20%); padding: 4em 2em 2em 2em; color: #fff; box-sizing: border-box; } .rate-button-checkout { width: 100%; display: inline-block; box-sizing: border-box; } } .navigation_chevron { width: 3em; height: 3em; display: inline-block; vertical-align: middle; } .teaser_blurred { color: transparent; text-shadow: 0 0 6px #000; } .cover_offer { position: absolute; height: auto; left: 50%; min-width: 25em; max-width: 30em; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.75); margin: -45em auto auto auto; display: block; z-index: 999; box-shadow: 0 12px 24px rgba(180, 220, 240, 1); } .pd, .ps { vertical-align: top; } .discount_banner { padding: 1em; } .payment_methods { display: flex; background-color: #fff; margin: 0.5em 0 -0.25em 0; justify-content: center; padding: 0.25em 0 0.25em 0; border-ik: 5px; } .checkout_tabs { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; color: #fff; text-align: center; cursor: pointer; } .premium { background: linear-gradient(30deg, #fff, #e2f3ff, #fff); padding: 1em; flex: 1 1 0px; } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close-a { cursor: pointer; color: #aaa; font-size: 28px; float: left; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .ersparnis { background: var(--secondary-color); color: white; font-weight: bold !important; white-space: nowrap; padding: 0px 8px; /*border-radius: 5px;*/ /* Schräge Ränder nur an den 10% der beiden Enden */ /*clip-path: polygon(0% 100%, 4% 0%, 100% 0%, 96% 100%);*/ } .google-reviews { text-align: center; } .google-container { display: flex; height: 2em; margin: 2em 0 0.5em 0; } .google-logo { width: 2em; height: 2em; } .google-text { display: flex; flex-direction: column; margin: 0 0.5em; height: 100%; line-height: 1; } .google-title { font-family: 'Google Sans', 'Roboto', sans-serif; font-size: 0.9em; margin: 0; padding: 0; } .google-stars { font-size: 0.8em; margin: 0; padding: 0; } .google-footer { font-size: 10px; color: #555; margin-top: 0.5em; } .lu { text-decoration: underline !important; color: inherit !important; font-size: 12px !important; } .highlight { background: var(--accent-color); color: white; font-weight: bold !important; white-space: nowrap; padding: 0px 8px 2px 8px; /*border-radius: 5px;*/ /* Schräge Ränder nur an den 10% der beiden Enden */ } .discount_bg_free { background-color: #e2f3ff; border-bottom-right-radius: 1em; } .discount_bg { background-color: #ffc792; padding: 1em; border-bottom-right-radius: 1em; } .tab_premium { background: linear-gradient(30deg, #ccc, #333, #ccc); flex: 1; padding: 0.5em 0 0.5em 0; font-weight: normal; height: 16px; } .tab_premium_sel { background-color: #216b65; flex: 1; padding: 0.25em 0 0.25em 0; font-weight: bold; } .tab_to_premium { background: linear-gradient(30deg, #666, #999, #333); flex: 1; padding: 0.75em 0 0.75em 0; font-weight: bold; } .tab_free_sel { background-color: #216b65; flex: 1; padding: 0.25em 0 0.25em 0; font-weight: normal; } .fragen-preview { max-height: 5em; overflow: auto; } /* Ergebnis Editor!*/ textarea.teaser_preview { box-shadow: unset !important; border: 2px solid var(--primary-color); } .teaser_preview { background-color: white; overflow-y: auto; color: #666; border: 1px solid #ccc; padding: 1em; margin-bottom: 1em; height: 75em; box-shadow: brown; border-radius: 0px; line-height: 25px; padding: 64px; font-family: 'Open Sans'; font-size: 18px; } .clock-svg { display: block; } .circle { border-radius: 50%; position: relative; overflow: hidden; background-color: #ccc; border: 1px solid; /* Hintergrundfarbe der Uhr auf grün setzen */ } #arc { fill: var(--primary-color) } .upgrade { cursor: pointer; } .dti-right-premium-sm { margin: 0; float: left; width: 3em; margin-right: 16px; border: 1.5px solid #999; padding: 0.3em; } .goodies { float: left; text-align: left; width: 100%; font-size: 16px; margin-top: 1em; } .super-goodie-text-diff { box-sizing: border-box; background-color: rgba(255, 255, 255, 0.9); color: #333; padding: 0em 1em 0em 1em; text-align: left; display: inline-block; width: 100%; } .price_d_free { font-weight: bold; color: #fff; background-color: #666; border-bottom-right-radius: 0.5em; padding: 2px 12px; white-space: nowrap; line-height: 1.9em; } .slot_reserved { width: 100%; background-color: var(--text-color); color: white; font: inherit; line-height: 1.25em; border: 0; font-weight: normal; padding: 4px; } .slot_reserved_active { width: 100%; color: white; font: inherit; line-height: 1.25em; border: 0; padding: 4px; background-color: var(--primary-color); font-weight: bold; } .small { font-size: 14px; } td.coc2 { border: none; vertical-align: top; padding: 0 !important; border: none; font-size: 0.75em !important; } td.coc3 { border: none; vertical-align: top; margin-top: 0 !important; } td.coc3 label { margin: 0em; font-weight: normal; } /* Stil für den Frage-Container */ #frageTextContainer { display: flex; align-items: center; /* Vertikale Zentrierung */ min-height: 2em; /* Mindestens zwei Zeilen Platz (ca. 3 Em) */ } .nosidemargin { margin-left: 0 !important; } .offer-table {} .offer-row { display: flex; align-items: center; } .offer-radio-wrapper { flex: 0 0 5%; padding: 2px 4px; } .offer-content { flex: 1; text-align: left; } .offer-detail { flex: 1; padding: 2px 4px; ; text-align: left; } .offer-price { flex: 0 0 10%; padding: 2px 4px; ; text-align: right; white-space: nowrap; /* Verhindert das Umbrechen des Preises */ } .price-right { float: right; white-space: nowrap; /* Verhindert das Umbrechen des Preises */ } .line-higher { line-height: 1.5em; } @media all and (min-width: 1024px) { .toplinks { margin-top: 0.6em !important; max-width: 900px; } .tablet-hide { display: none; } .tablet-show { display: none; } .desktop-show { display: inline-block; } .desktop-hide { display: none; } .discount_text_free { display: flex; flex-direction: row; } } .cent { font-size: 0.9em; /* Reduziert die Schriftgröße */ vertical-align: 0.1em; } @media (max-width: 767px) { .cover_offer { position: relative; /* Ändere die Position zu "relative" */ top: auto; left: auto; transform: none; /* Rückgängig machen der Zentrierung */ margin-top: 10px; /* Abstand nach dem Hauptinhalt */ min-width: unset; } .discount_banner { padding: 0; } .landing-kostenlos .pricing-overview .pricing-table, .landing-kostenlos .pricing-table { grid-template-columns: 1fr !important; grid-template-rows: auto; } .landing-bewerbung .pricing-overview .pricing-table, .landing-bewerbung .pricing-table { grid-template-columns: 1fr !important; grid-template-rows: auto; } .landing-lebenslauf .pricing-overview .pricing-table, .landing-lebenslauf .pricing-table { grid-template-columns: 1fr !important; grid-template-rows: auto; } .price-card { width: 100% !important; grid-column: 1 !important; grid-row: auto !important; justify-self: center !important; } .desktop-show { display: none; } .desktop-hide { display: inline-block; } .tablet-hide { display: none; } .tablet-show { display: inline-block; } .slide-mobile-up { margin-top: -6em; padding-top: 4px; background: linear-gradient(to bottom, /* Richtung: von oben nach unten */ rgba(255, 255, 255, 0.7), /* Startfarbe: Weiß mit 0.7 Transparenz */ #ffffff 33% /* Ziel: Reines Weiß nach einem Drittel */ ); } .slide { flex-direction: column; text-align: center; } .text-block { flex-direction: column; text-align: center; } .text-content, .image-content { flex: 1 1 100%; } .image-content { order: 1; padding-right: 0px; } .multi-image { padding: 0 15% 0 15%; } .google-container { display: flex; justify-content: center; align-items: center; height: 2em; margin: 2em 0 0.5em 0; } .ll-preview { transform: rotate(-10deg); /* Anpassen: Grad der Drehung */ /* Schatten hinzufügen */ box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* Anpassen: Schattenwerte */ /* Animation für einen weicheren Effekt (optional) */ transition: transform 0.3s ease, box-shadow 0.3s ease; max-height: 450px; padding: 1em; margin-bottom: 1.5em; } .image-content-vv { order: 1; padding-right: 0px; } .text-content { order: 2; padding-left: 10px; padding-right: 10px; text-align: center; } .text-content-vv { order: 2; padding-left: 10px; text-align: center; padding-right: 10px; } .text-content-divider { box-shadow: inset 0 5px 8px -5px rgba(180, 220, 240, 1); padding: 1em; } .text-block-content, .text-block-image { flex: 1 1 100%; } .text-block-content, .text-block-image { flex: 1 1 100%; } .text-block-image { order: 1; padding-right: 0px; padding-top: 20px; } .text-block--content { order: 2; padding-left: 0px; } .image-half-width-mobile { max-width: 50%; } .mobile-center { text-align: center; } .frage { margin-top: 0.5em; } /* Ergänzungen aus css2 für max-width: 767px */ .teaser_preview { height: 50em; line-height: 18px; padding: 24px; font-family: 'Open Sans'; font-size: 14px; } .flowersm { padding-bottom: 0.3em; } .flex-row { width: calc(100% / 2); } .flex-row.first { width: 100%; font-weight: bold; } .column { width: 100%; } .image-half-width-tablet { max-width: 60%; } .slider-image { width: 70%; /* Stellt sicher, dass das Bild innerhalb seines Containers skaliert */ height: auto; /* Erhält das Seitenverhältnis des Bildes */ } } @media (max-width: 430px) { .google-container { display: flex; justify-content: center; align-items: center; height: 2em; margin: 2em 0 0.5em 0; } .data_notice { width: unset; } section { padding: 4em 0.5em; margin-top: 5em; box-sizing: border-box; } .doc_manager_editor_controls { padding-right: 1em; max-width: 33%; min-width: 100%; /* WICHTIG */ overflow: auto; padding-bottom: 2em; } .swiper-slide { padding: 25px 0 25px 0; } .container-with-padding { padding: 10px; min-height: 100vh; } #content h1 { padding: 0 10px; font-size: 1.5em; } .site-header { padding: 10px 10px; } .image-half-width-tablet { max-width: 100%; } .slide-mobile-up { margin-top: -3em; padding-top: 4px; background: linear-gradient(to bottom, /* Richtung: von oben nach unten */ rgba(255, 255, 255, 0.7), /* Startfarbe: Weiß mit 0.7 Transparenz */ #ffffff 33% /* Ziel: Reines Weiß nach einem Drittel */ ); } .ll-preview { transform: rotate(-10deg); /* Anpassen: Grad der Drehung */ /* Schatten hinzufügen */ box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* Anpassen: Schattenwerte */ /* Animation für einen weicheren Effekt (optional) */ transition: transform 0.3s ease, box-shadow 0.3s ease; max-height: 300px; padding: 1em; } .free-area { float: right; min-width: 50%; } .goodies { float: left; text-align: left; width: 100%; margin-top: 0.5em; } .super-goodie-text-diff { padding: 0em 0.25em 0em 0.25em; } .free { padding: 0.5em; } .free-area { float: right; min-width: 50%; } .bkicm { margin-bottom: .5em; } .desktop-show { display: none; } .desktop-hide { display: inline-block; } .top-chance-container { display: block; margin-top: 4px; } .logo img { height: 30px; } .header-nav ul { flex-direction: column; align-items: flex-start; margin-left: 10px; } .header-nav li { margin: 0; } .text-content, .text-content-vv { padding: 10px; font-size: 14px; } .image-content img { padding-right: 0px; } .text-block-content, .text-block-image { flex: 1 1 100%; } .text-block-image { order: 1; padding-right: 0px; } .text-block--content { order: 2; padding-left: 0px; } .mobile-show { display: block; } .mobile-hide { display: none; } .text-area-wrapper { display: block; width: 100%; margin-right: 0; padding-right: 0; } .text-area-wrapper p, .text-area-wrapper textarea { text-align: left; margin-left: 0; padding: 6px 18px; } .image-half-width-mobile { max-width: 40%; } .mobile-center { text-align: center; } .frage { margin-top: 0.5em; } .free { padding: 0.5em; } .super-goodie-text-diff { padding: 0em 0.25em 0em 0.25em; } div.premium, div.express { padding: 0.5em; } div.express { padding: 0.25em 0.5em 0.1em 0.2em; } .checkout_tabs { display: flex; background-color: #fff; justify-content: space-evenly; border-radius: 5px; color: #fff; text-align: center; cursor: pointer; } /* Stile, die definitiv im HTML erscheinen */ .navigation_preview { margin: 0; } .secth-alt, .secth { padding: 0.5em; } } .nowrap { white-space: nowrap; } /* SPIEL */ .slot_wrapper { display: flex; flex-wrap: nowrap; /* flex-direction: row; */ justify-content: space-evenly; width: 100%; } .debug { position: fixed; top: 4px; left: 50%; transform: translateX(-50%); padding: 4px; background: white; border: 1px solid rgba(0, 0, 0, 0.3); font-family: monospace; font-size: 1.6rem; } .slots { position: relative; width: 140px; display: flex; justify-content: space-between; padding: 12px; background: rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.6); border-right: 1px solid rgba(255, 255, 255, 0.6); border-left: 1px solid rgba(180, 220, 240, 1); border-bottom: 1px solid rgba(180, 220, 240, 1); box-shadow: -2px 2px 3px rgba(180, 220, 240, 1); border-radius: 3px; } .slots::before, .slots::after { content: ""; position: absolute; top: 50%; width: 10px; height: 2px; background-color: rgba(0, 0, 0, 0.5); } .slots::before { left: 0; transform: translate(-200%, -50%); } .slots::after { right: 0; transform: translate(200%, -50%); } @-webkit-keyframes win1 { 0% { background: linear-gradient(45deg, orange 0%, yellow 100%); box-shadow: 0 0 80px orange; } 100% { background: linear-gradient(45deg, grey 0%, lightgrey 100%); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); } } @keyframes win1 { 0% { background: linear-gradient(45deg, orange 0%, yellow 100%); box-shadow: 0 0 80px orange; } 100% { background: linear-gradient(45deg, grey 0%, lightgrey 100%); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); } } @-webkit-keyframes win2 { 0% { background: linear-gradient(45deg, lightblue 0%, lightgreen 100%); box-shadow: 0 0 80px lightgreen; } 100% { background: linear-gradient(45deg, grey 0%, lightgrey 100%); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); } } @keyframes win2 { 0% { background: linear-gradient(45deg, lightblue 0%, lightgreen 100%); box-shadow: 0 0 80px lightgreen; } 100% { background: linear-gradient(45deg, grey 0%, lightgrey 100%); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); } } .slots.win1 { -webkit-animation: win1 200ms steps(2, end) infinite; animation: win1 200ms steps(2, end) infinite; } .slots.win2 { -webkit-animation: win2 200ms steps(2, end) infinite; animation: win2 200ms steps(2, end) infinite; } .slots .reel { position: relative; width: 40px; height: 120px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 3px; overflow: hidden; background-image: url(/slotreel.webp); background-position: 0 0; background-repeat: repeat-y; background-size: 40px; } .slots .reel::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%); box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, 0.3); } .slots p { position: absolute; bottom: 0; left: 50%; width: 100%; transform: translate(-50%, calc(100% + 30px)); text-align: center; font-size: 0.8rem; color: #444; } .slots p a { color: red; font-weight: 700; } /* Modal Background */ .modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(255, 255, 255, 0.7); /* Weißer transparenter Hintergrund */ /* Verwenden Sie Flexbox für vollständige Zentrierung */ display: flex; align-items: center; /* Zentriert vertikal */ justify-content: center; /* Zentriert horizontal */ } .kaufen_spinner { background: linear-gradient(30deg, #fff, #eee, #fff); background-color: #e2f3ff; border-bottom-right-radius: 1em; padding: 1em; } .kaufen { background: linear-gradient(30deg, #fff, #e2f3ff, #fff); background-color: #e2f3ff; border-bottom-right-radius: 1em; padding: 1em; } .kaufen_outer { min-width: 275px; max-width: 345px; padding: 1em; border-radius: 6px; box-shadow: 0 12px 24px rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.6); color: #fff; } .kaufen_hint { background-color: rgba(255, 255, 255, 0.75) !important; padding: 0.5em; border: radius 6px; text-align: center; } /* Modal Content */ .modal-content { background-color: #fefefe; padding: 5px 10px 15px 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 80%; max-width: 400px; min-height: 150px; /* Verhindert, dass der Dialog zu klein wird */ box-shadow: 0 12px 24px rgba(180, 220, 240, 1); } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* 1) List-Bullets bei<ul>und<li>entfernen */ .inline-accordion, .inline-accordion li { list-style: none; margin: 0; padding: 0; } /* 2) WebKit-Disclosure-Marker ausblenden */ .inline-accordion details summary::-webkit-details-marker { display: none; } /* 3) Non-WebKit Disclosure-Marker (Firefox, Edge) ausblenden */ .inline-accordion details summary::marker { display: none; } /* Klick-Pointer und keine Hover-Farbe */ .inline-accordion details summary { cursor: pointer; color: inherit; background: none; } .inline-accordion details summary:hover { color: inherit; background: none; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .accordion:hover, .accordion.active { background-color: #ccc; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .upper-case { text-transform: uppercase; } .editor_preview_buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-bottom: 10px; } .editor_preview_button { flex-grow: 1; flex-basis: auto; padding: 10px; background-color: var(--text-color); color: white; border: none; border-radius: 5px; font-size: 14px; text-align: center; } .editor_preview_button i { margin-right: 5px; }</ul>