/* Globale Variablen für Farben - Cyber Space Thema (Nur Dark Mode) */ :root { --primary-color: #4aa6ff; --primary-color-rgb: 74, 166, 255; --secondary-color: #7dd7ff; --background-color: #0c1520; --text-color: #e4efff; --muted-color: #9bb0c6; --card-background: #111c2e; --border-color: #22314d; --hover-glow: rgba(74, 166, 255, 0.3); --shadow-color: rgba(14, 23, 42, 0.75); --header-bg: linear-gradient(135deg, rgba(7, 18, 36, 0.95), rgba(15, 33, 61, 0.98)); --font-main: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-cyber: 'Orbitron', sans-serif; } /* Optional: Import für Orbitron Schriftart (bereits im HTML empfohlen) */ /* @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap'); */ html { overflow-x: hidden; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; font-family: var(--font-main); background-color: var(--background-color); background-image: radial-gradient(circle at top left, rgba(74, 166, 255, 0.08), transparent 18%), radial-gradient(circle at bottom right, rgba(125, 215, 255, 0.06), transparent 22%); color: var(--text-color); line-height: 1.6; overflow-x: hidden; max-width: 100%; } .container { width: min(92%, 1200px); max-width: 1200px; margin: 0 auto; padding: 24px; } /* --- Header --- */ header { padding: 20px 0; background: var(--header-bg); border-bottom: 1px solid rgba(34, 49, 77, 0.45); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18); } .header-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; /* Standardmäßig kein Umbruch, Social Icons bleiben rechts */ width: 100%; } .profile-header { display: flex; align-items: center; /* margin-bottom: 10px; Entfernt, da der Header-Container jetzt die Ausrichtung steuert */ flex-shrink: 0; /* Verhindert, dass dieser Teil zu stark schrumpft */ } .profile-pic-placeholder { width: 80px; /* Etwas kleiner für mehr Platz im Header */ height: 80px; /* Etwas kleiner für mehr Platz im Header */ background-color: #333; border-radius: 50%; margin-right: 20px; /* Etwas weniger Margin */ border: 3px solid var(--primary-color); object-fit: cover; } header h1 { margin: 0 0 5px 0; font-family: var(--font-cyber); color: var(--primary-color); font-size: 1.8em; /* Ggf. anpassen, falls zu groß mit Icons daneben */ } header p { margin: 0; font-size: 1em; /* Ggf. anpassen */ color: var(--text-color); } .header-actions { display: flex; align-items: center; gap: 20px; /* Abstand für Social Media Icons, falls mal mehr dazu kommt */ /* margin-left: auto; wird durch space-between im Parent erledigt */ } .header-tagline { margin: 10px 0 0; color: var(--muted-color); font-size: 0.95rem; line-height: 1.5; max-width: 520px; } .social-media-icons { display: flex; gap: 18px; /* Abstand zwischen den Social Icons */ } .social-icon { color: var(--text-color); font-size: 1.6em; /* Größe der Social Icons */ transition: color 0.3s ease, transform 0.3s ease; } .social-icon:hover, .social-icon:focus { color: var(--primary-color); transform: scale(1.15); /* Etwas stärkere Hervorhebung */ } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; } .project-entry { background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(74, 166, 255, 0.18); border-radius: 14px; padding: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .project-entry:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(14, 23, 42, 0.25); border-color: rgba(74, 166, 255, 0.35); } .project-entry h3 { margin: 0 0 10px; color: var(--primary-color); font-size: 1.1rem; } .project-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .project-icon { width: 60px; height: 60px; border-radius: 8px; object-fit: contain; flex-shrink: 0; } .project-entry p { color: var(--text-color); opacity: 0.9; margin-bottom: 14px; } .project-entry a { color: var(--secondary-color); text-decoration: none; font-weight: 600; } .project-entry a:hover { color: var(--primary-color); text-decoration: underline; } /* --- Navigation --- */ nav { position: sticky; top: 0; z-index: 1000; padding: 10px 0; background-color: rgba(10, 15, 20, 0.85); backdrop-filter: blur(5px); } .nav-links { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; } .nav-button { padding: 12px 18px; text-decoration: none; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; color: var(--text-color); background-color: rgba(74, 166, 255, 0.08); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; letter-spacing: 0.3px; } .nav-button:hover { transform: translateY(-2px); background-color: rgba(74, 166, 255, 0.15); color: var(--primary-color); box-shadow: 0 8px 20px rgba(74, 166, 255, 0.15); border-color: rgba(74, 166, 255, 0.3); } .nav-button:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* --- Education Logos --- */ .education-entry { position: relative; padding-left: 0; border-left: none; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; } .education-logo-container { flex-shrink: 0; width: 64px; height: 64px; background: linear-gradient(135deg, rgba(74, 166, 255, 0.25) 0%, rgba(125, 215, 255, 0.18) 100%); border: 1px solid rgba(74, 166, 255, 0.35); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; grid-column: 1; grid-row: 1 / 4; box-shadow: inset 0 2px 8px rgba(74, 166, 255, 0.2); } .education-logo { max-width: 90%; max-height: 90%; object-fit: contain; filter: brightness(1.5) contrast(1.2); } .education-logo-dark { filter: brightness(2.2) contrast(1.8) saturate(1.2) !important; } .company-logo-container { flex-shrink: 0; width: 64px; height: 64px; background: linear-gradient(135deg, rgba(74, 166, 255, 0.25) 0%, rgba(125, 215, 255, 0.18) 100%); border: 1px solid rgba(74, 166, 255, 0.35); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; grid-column: 1; grid-row: 1 / 3; box-shadow: inset 0 2px 8px rgba(74, 166, 255, 0.2); } .company-logo { max-width: 90%; max-height: 90%; object-fit: contain; filter: brightness(1.5) contrast(1.2); } .company-logo-dark { filter: brightness(2.2) contrast(1.8) saturate(1.2) !important; } .education-entry h3 { grid-column: 2; margin-top: 0; } .education-entry p { grid-column: 2; margin: 5px 0; } .education-entry h3:first-of-type { grid-row: 1; } .job-entry h3 { grid-column: 2; margin-top: 0; } .job-entry > p { grid-column: 2; margin: 5px 0; } .job-entry ul { grid-column: 2; } html[lang="ar"] .education-entry { grid-template-columns: 1fr 64px; } html[lang="ar"] .education-logo-container { grid-column: 2; } html[lang="ar"] .education-entry h3, html[lang="ar"] .education-entry p { grid-column: 1; } /* --- Platform Badges --- */ .project-platforms { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .project-buttons { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s ease; } .btn-android { background-color: #34a853; color: white; border: 1px solid #34a853; } .btn-android:hover { background-color: #2d8e47; box-shadow: 0 8px 16px rgba(52, 168, 83, 0.25); transform: translateY(-2px); } .btn-ios-disabled { background-color: rgba(255, 255, 255, 0.08); color: rgba(228, 239, 255, 0.5); border: 1px solid rgba(74, 166, 255, 0.15); cursor: not-allowed; } .btn-ios-disabled:hover { background-color: rgba(255, 255, 255, 0.08); transform: none; } .btn-ios { background-color: #000; color: white; border: 1px solid #333; } .btn-ios:hover { background-color: #1a1a1a; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); transform: translateY(-2px); } .btn-store-icon { width: 20px; height: 20px; object-fit: contain; } /* Korrektur für den Scroll-Versatz durch die sticky Navigationsleiste */ section[id] { scroll-margin-top: 75px; /* Passe diesen Wert bei Bedarf an! (Höhe der Nav-Leiste) */ } /* --- Allgemeine Card-Struktur --- */ .card { margin-bottom: 30px; padding: 25px; border-radius: 8px; background-color: var(--card-background); border: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0,0,0,0.25); opacity: 0; /* Start: Unsichtbar */ transform: translateY(30px); /* Start: Leicht nach unten verschoben */ transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out; } .card.is-visible { opacity: 1; /* Endzustand: Sichtbar */ transform: translateY(0); /* Endzustand: An der richtigen Position */ } .card h2 { margin-top: 0; font-family: var(--font-cyber); border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; margin-bottom: 20px; color: var(--primary-color); } .card .entry { margin-bottom: 20px; padding-left: 15px; border-left: 3px solid var(--secondary-color); } .card .entry.job-entry { padding-left: 0; border-left: none; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; } html[lang="ar"] .card .entry.job-entry { grid-template-columns: 1fr 64px; } html[lang="ar"] .card .entry.job-entry .company-logo-container { grid-column: 2; } html[lang="ar"] .card .entry.job-entry h3, html[lang="ar"] .card .entry.job-entry > p, html[lang="ar"] .card .entry.job-entry ul { grid-column: 1; } .card .entry:last-child { margin-bottom: 0; } .card .entry h3 { margin-top: 0; margin-bottom: 5px; color: var(--text-color); font-size: 1.15em; /* Etwas größer für bessere Hierarchie */ } .card .entry p { margin: 5px 0; } /* Stile für Datum/Meta-Infos und Institution in Sections wie Bildung, Berufserfahrung, Ehrenamt */ .entry-meta { font-size: 0.9em; color: var(--text-color); opacity: 0.8; margin-bottom: 5px; } .entry-institution { font-style: italic; margin-bottom: 10px; color: var(--text-color); /* Normale Textfarbe */ opacity: 0.9; /* Optional: Leicht transparent für Hierarchie */ } /* --- Berufserfahrung (einklappbar) --- */ .collapsible-trigger { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: color 0.2s ease-in-out; /* H3-Stile werden von .card .entry h3 geerbt */ } .collapsible-trigger:hover { color: var(--primary-color); } .collapsible-trigger .arrow { font-size: 0.8em; margin-left: 10px; transition: transform 0.3s ease-in-out; color: var(--primary-color); } .collapsible-trigger.open .arrow { transform: rotate(90deg); } .collapsible-content { /* Dies ist die UL für Berufserfahrungsdetails */ display: none; padding-left: 0; margin-top: 10px; animation: fadeIn 0.5s ease-in-out; list-style-type: none; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .collapsible-content li { margin-bottom: 8px; position: relative; padding-left: 20px; } .collapsible-content li::before { content: '»'; position: absolute; left: 0; font-weight: bold; color: var(--primary-color); } /* --- Ehrenamt (Listen-Details) --- */ .entry-details { /* Dies ist die UL für Ehrenamtsdetails */ list-style: none; padding-left: 0; margin-top: 10px; } .entry-details li { margin-bottom: 8px; position: relative; padding-left: 20px; } .entry-details li::before { content: '•'; /* Standard-Bullet oder '»' oder Font Awesome Icon */ position: absolute; left: 0; font-weight: bold; color: var(--primary-color); } /* --- Hobbys (Standard-Liste im Card) --- */ #hobbys ul { list-style: none; padding-left: 0; } #hobbys ul li { margin-bottom: 8px; position: relative; padding-left: 20px; } #hobbys ul li::before { content: '»'; position: absolute; left: 0; font-weight: bold; color: var(--primary-color); } /* --- Kenntnisse --- */ .kenntnisse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .skill-category h3 { margin-bottom: 10px; color: var(--secondary-color); font-size: 1.1em; /* Konsistenz mit anderen Unterüberschriften */ } .skills-list { list-style: none; padding-left: 0; } .skills-list li { padding-left: 0; margin-bottom: 10px; /* Etwas mehr Abstand für Skill-Bars */ } .skills-list li::before { content: ''; /* Keine Standard-Bullets für Skills-Liste */ } .skill-bar { display: block; width: 100%; height: 8px; border-radius: 4px; margin-top: 5px; background-color: var(--border-color); } .skill-level { display: block; height: 100%; border-radius: 4px; background-color: var(--primary-color); } .skill-level.cplusplus { width: 75%; } .skill-level.php { width: 75%; } .skill-level.java { width: 50%; } .skill-level.python { width: 50%; } .skill-level.windows { width: 90%; } .skill-level.linux { width: 50%; } .skill-level.pentest { width: 50%; } .skill-level.devsecops { width: 30%; } .contact-methods { margin-top: 25px; margin-bottom: 25px; display: flex; flex-direction: column; gap: 20px; } .contact-item { display: flex; align-items: center; font-size: 1.1em; background-color: rgba(var(--primary-color-rgb), 0.05); padding: 15px; border-radius: 6px; border-left: 4px solid var(--primary-color); transition: background-color 0.3s ease; } .contact-item:hover { background-color: rgba(var(--primary-color-rgb), 0.1); } .contact-icon { /* Für Font Awesome Tag */ font-size: 1.8em; margin-right: 20px; color: var(--primary-color); min-width: 35px; text-align: center; line-height: 1; } .contact-icon i { display: block; /* Stellt sicher, dass das Icon korrekt zentriert ist */ } .contact-link { color: var(--text-color); text-decoration: none; word-break: break-all; transition: color 0.3s ease, text-shadow 0.3s ease; } .contact-link:hover, .contact-link:focus { color: var(--primary-color); text-shadow: 0 0 8px var(--hover-glow); text-decoration: underline; text-decoration-color: var(--primary-color); } .contact-prompt { margin-top: 30px; font-style: italic; text-align: center; opacity: 0.85; font-size: 1em; } /* --- Footer --- */ footer { text-align: center; padding: 30px 0; margin-top: 40px; border-top: 1px solid var(--border-color); color: #aaa; } .cyber-footer-text { font-family: var(--font-cyber); font-size: 0.9em; letter-spacing: 2px; opacity: 0.7; color: var(--primary-color); } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--background-color); } ::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); } .card:hover { transform: translateY(-5px) scale(1.01); /* Bisheriges translateY(30px) wird von .is-visible überschrieben, also nur die leichte Anhebung */ box-shadow: 0 6px 25px rgba(var(--primary-color-rgb), 0.15); /* Leuchtenderer Schatten */ border-color: var(--primary-color); /* Akzentuierte Border */ } /* --- Sprachen-Liste mit Flaggen --- */ .language-list li { display: flex; /* Flagge und Text nebeneinander */ align-items: center; /* Vertikal zentrieren */ margin-bottom: 12px; /* Etwas mehr Abstand zwischen den Sprachen */ } .language-flag { width: 28px; /* Größe der Flagge, anpassen nach Bedarf */ height: auto; /* Höhe automatisch anpassen, um Seitenverhältnis zu wahren */ margin-right: 12px; /* Abstand zwischen Flagge und Text */ border-radius: 3px; /* Optional: Leicht abgerundete Ecken für Flaggen */ box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Optional: Subtiler Schatten für die Flagge */ } .language-info { display: flex; flex-direction: column; /* Sprache und Niveau untereinander, falls gewünscht */ /* oder flex-direction: row; und align-items: baseline; für nebeneinander */ font-size: 1em; } .language-level { font-size: 0.85em; opacity: 0.8; /* margin-left: 8px; // Nur wenn Niveau neben dem Sprachnamen stehen soll */ } @media (max-width: 768px) { .header-container { flex-wrap: wrap; /* Umbruch erlauben */ justify-content: center; gap: 15px; } .profile-header { flex-direction: column; align-items: center; text-align: center; width: 100%; } .profile-pic-placeholder { margin-right: 0; margin-bottom: 10px; } .header-text { text-align: center; } .header-tagline { max-width: 100%; } .header-actions { width: 100%; justify-content: center; } header h1 { font-size: 1.6em; /* Etwas kleiner auf Tablets */ } .card h2 { font-size: 1.3em; /* Etwas kleiner */ } body { font-size: 15px; /* Basis-Schriftgröße ggf. leicht reduzieren */ } .nav-links { gap: 5px 10px; /* Vertikalen und horizontalen Abstand reduzieren */ justify-content: center; /* Sicherstellen, dass umgebrochene Zeilen zentriert sind */ } .nav-button { padding: 8px 12px; /* Weniger Padding */ font-size: 0.9em; /* Kleinere Schrift */ } } @media (max-width: 480px) { .header-container { padding: 0 10px; } .profile-header { flex-direction: column; align-items: center; text-align: center; } header h1 { font-size: 1.4em; /* Noch kleiner auf Handys */ word-break: break-word; } .card h2 { font-size: 1.2em; } body { font-size: 14px; } .nav-button { padding: 8px 12px; /* Nav-Buttons kompakter */ font-size: 0.9em; } .social-icon { font-size: 1.4em; /* Social Icons etwas kleiner */ } .card { padding: 15px; /* Weniger Padding in Karten */ margin-bottom: 20px; /* Weniger Abstand zwischen Karten */ } .contact-item { padding: 10px; /* Weniger Padding */ font-size: 1em; /* Ggf. Schrift anpassen */ } .contact-icon { font-size: 1.6em; margin-right: 15px; } .profile-pic-placeholder { width: 60px; height: 60px; margin-right: 15px; } .nav-links { gap: 5px 8px; /* Noch weniger horizontaler Abstand */ } .nav-button { padding: 6px 10px; /* Noch weniger Padding */ font-size: 0.8em; /* Noch kleinere Schrift */ } .contact-item { padding: 12px; /* Etwas weniger Padding */ /* font-size: 1em; */ /* Schriftgröße ggf. anpassen, falls noch zu groß */ } .contact-icon { font-size: 1.6em; /* Icon etwas kleiner */ margin-right: 15px; /* Weniger Abstand */ min-width: 30px; /* Minimalbreite ggf. anpassen */ } .contact-link { /* Entferne break-all, damit der Browser besser umbricht (z.B. bei @) */ word-break: normal; /* Optional: Verhindere Umbruch ganz (kann zu Overflow führen!) */ /* white-space: nowrap; */ /* Optional: Füge leichten Zeichenabstand hinzu, falls das hilft */ /* letter-spacing: -0.5px; */ } } /* Stelle sicher, dass Font Awesome Icons sich gut einfügen */ .skill-icon.fab, .skill-icon.fas { line-height: inherit; /* Stellt sicher, dass FA Icons die Höhe nutzen */ /* Hier könnten weitere FA-spezifische Anpassungen hin */ } /* --- Tech-Skills-Liste mit Icons --- */ /* Stellen Sie sicher, dass alle alten Regeln für .skill-header, .skill-icon etc. aus dem Bereich Zeile 443-488 ENTFERNT wurden! */ .tech-skills-list li { margin-bottom: 18px; /* Abstand für Icon-Zeile + Balken */ } .skill-header { display: flex; align-items: center; /* Vertikale Ausrichtung */ margin-bottom: 6px; /* Abstand zum Skill-Balken */ flex-wrap: nowrap; min-height: 1.7em; /* Stellt sicher, dass die Zeile Höhe hat */ } /* Basis-Styling für den ICON-CONTAINER (gilt für und mit dieser Klasse) */ /* --- Tech-Skills-Liste mit Icons --- */ /* ... (Regeln für .tech-skills-list li, .skill-header bleiben) ... */ /* Basis-Styling für den ICON-CONTAINER (gilt für und den -Wrapper) */ .skill-icon { display: inline-flex; /* Lässt den Container sich wie ein Icon verhalten */ align-items: center; /* Zentriert den Inhalt (SVG oder Font-Icon) vertikal */ justify-content: center; /* Zentriert den Inhalt horizontal */ width: 30px; /* Feste Breite für den Container */ height: 1.7em; /* Feste Höhe, relativ zur Schriftgröße des Elternelements von
  • */ margin-right: 10px; flex-shrink: 0; vertical-align: middle; /* Wichtig für die Ausrichtung in der Zeile */ color: var(--primary-color); /* Farbe für SVG (currentColor) und FA Icons */ /* Debugging-Hilfe: background-color: rgba(255, 0, 0, 0.1); */ } /* Spezifisch für Font Awesome Icons () im Container */ .skill-icon.fab, .skill-icon.fas { font-size: 1.7em; /* Passt die FA-Icon Größe an die Container-Höhe an */ line-height: 1; /* Stellt sicher, dass FA Icon vertikal zentriert ist */ /* 'color' wird von .skill-icon geerbt */ /* Resets für img-ähnliche Eigenschaften, die hier nicht gelten */ max-width: none; max-height: none; object-fit: initial; } /* Spezifische Größenanpassung für Linux FA Icon */ .skill-icon.fa-linux { font-size: 1.5em; /* Etwas kleiner, falls nötig */ } /* --- NEU / KORRIGIERT: Styling für den SVG-Wrapper und das Inline-SVG --- */ .skill-icon.svg-icon-wrapper { /* Dieser Wrapper hat bereits die Dimensionen von .skill-icon (width: 30px, height: 1.7em) */ /* Die 'color' Eigenschaft wird an das SVG weitergegeben für 'currentColor' */ /* Stelle sicher, dass keine Font-Awesome spezifischen Stile (wie font-size) hier reinspielen */ font-size: initial; /* Setzt die Font-Size des Wrappers zurück, damit das SVG nicht doppelt skaliert wird */ } .skill-icon.svg-icon-wrapper svg { display: block; /* Verhindert extra Platz unter dem SVG */ width: 100%; /* SVG soll die Breite des Wrappers (30px) füllen */ height: 100%; /* SVG soll die Höhe des Wrappers (1.7em) füllen */ /* Das 'fill="currentColor"' Attribut MUSS in deinen SVG-Pfaden stehen! */ } /* --- Restliche Skill-Stylings (.skill-name, .skill-level-text etc.) --- */ .skill-name { font-weight: 500; margin-right: 8px; white-space: nowrap; } .skill-level-text { font-size: 0.85em; opacity: 0.8; margin-left: auto; padding-left: 10px; white-space: nowrap; flex-shrink: 0; } #cpp-logo-image { transform: scale(2) translateY(-7px); transform-origin: center top; } .reise-flag { width: 30px; /* Größe der Flagge, anpassen nach Bedarf */ height: auto; /* Höhe automatisch anpassen, um Seitenverhältnis zu wahren */ margin-right: 6px; /* Abstand zwischen Flagge und Text */ margin-left: 6px; /* Abstand zwischen Flagge und Text */ border-radius: 3px; /* Optional: Leicht abgerundete Ecken für Flaggen */ box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Optional: Subtiler Schatten für die Flagge */ } /* --- Language Switcher --- */ .language-switcher { display: flex; gap: 10px; /* Adjust spacing between buttons */ align-items: center; margin-right: 20px; /* Space between switcher and social icons */ } .lang-button { background-color: transparent; color: var(--text-color); border: 1px solid var(--text-color); border-radius: 50%; /* Makes it round like an icon */ width: 36px; /* Adjust to match social icon size (approx. 1.6em font-size + padding) */ height: 36px; /* Adjust to match social icon size */ font-family: var(--font-cyber); /* Optional: Use your cyber font */ font-size: 0.9em; /* Adjust as needed */ font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; display: flex; align-items: center; justify-content: center; padding: 0; /* Remove default padding if any */ line-height: 1; /* Ensure text is centered vertically */ } .lang-button:hover, .lang-button:focus { color: var(--primary-color); border-color: var(--primary-color); transform: scale(1.1); } .lang-button.active { background-color: var(--primary-color); color: var(--card-background); border-color: var(--primary-color); cursor: default; /* Indicate it's the current language */ } /* Adjustments for smaller screens if necessary */ @media (max-width: 768px) { .language-switcher { margin-right: 0; margin-bottom: 10px; /* Add space if it wraps under profile info */ } .header-actions { flex-direction: column; /* Stack language switcher and social icons */ align-items: center; } } .text-align-right { text-align: right !important; /* !important kann helfen, andere text-align Regeln zu überschreiben, falls nötig */ } html[lang="ar"] .collapsible-trigger.open .arrow { transform: rotate(-90deg); /* Lässt ◀ nach unten zeigen */ } /* Anpassungen für Listen und Aufzählungspunkte für Arabisch */ html[lang="ar"] .collapsible-content li, html[lang="ar"] .entry-details li, html[lang="ar"] #hobbys ul li { padding-left: 0; /* Alten linken Einzug entfernen */ padding-right: 25px; /* Neuen rechten Einzug hinzufügen (Wert ggf. anpassen) */ /* text-align: right; ist bereits durch .text-align-right Klasse im JS abgedeckt */ } html[lang="ar"] .collapsible-content li::before, html[lang="ar"] .entry-details li::before, html[lang="ar"] #hobbys ul li::before { left: auto; /* Alte linke Positionierung aufheben */ right: 0; /* Pfeil/Bullet rechts positionieren */ } html[lang="ar"] .collapsible-trigger.text-align-right { flex-direction: row-reverse; /* Kehrt die Reihenfolge von Text und Pfeil um */ } html[lang="ar"] .collapsible-trigger.text-align-right .arrow { margin-left: 0; /* Alten linken Margin entfernen, falls vorhanden */ margin-right: 10px; /* Abstand zwischen Pfeil (jetzt links) und Text */ } /* Bestehende Anpassungen für Listen und Aufzählungspunkte für Arabisch */ html[lang="ar"] .collapsible-content li, html[lang="ar"] .entry-details li, html[lang="ar"] #hobbys ul li { padding-left: 0; padding-right: 25px; /* Wert ggf. anpassen, sollte größer sein als die Breite des Bullets */ } html[lang="ar"] .collapsible-content li::before, html[lang="ar"] .entry-details li::before, html[lang="ar"] #hobbys ul li::before { left: auto; right: 0; } /* NEU: Inhalt der Aufzählungspunkte für Arabisch anpassen/spiegeln */ html[lang="ar"] .collapsible-content li::before, html[lang="ar"] #hobbys ul li::before { /* Betrifft '»' */ content: '«'; /* Gespiegelter Pfeil für Arabisch */ } /* Der Punkt '•' für .entry-details li::before ist symmetrisch und muss nicht geändert werden, es sei denn, du möchtest ein anderes Symbol. */ html[lang="ar"] .kenntnisse-grid { direction: rtl; /* Dies kehrt die Flussrichtung der Grid-Items um */ } /* Um Nebeneffekte von direction: rtl auf den Text innerhalb der Grid-Items zu korrigieren, muss für die Kinder explizit wieder LTR gesetzt werden, wenn deren Inhalt LTR bleiben soll, oder man verlässt sich auf die text-align-right Klasse für den Text. */ html[lang="ar"] .kenntnisse-grid > .skill-category { direction: ltr; /* Setzt die Richtung für den Inhalt der Kategorie zurück */ /* text-align: right; sollte weiterhin durch die JS-Klasse auf den Text-Elementen wirken */ } html[lang="ar"] nav .nav-links { flex-direction: row-reverse; } html[lang="ar"] nav .nav-links li:last-child a { margin-left: 0; margin-right: 15px; /* falls vorher margin-left da war */ } /* Sicherstellen, dass Texte in der Sprachen-Liste rechtsbündig sind, auch wenn .skill-category direction: ltr hat. */ html[lang="ar"] .language-list .language-info { text-align: right !important; /* Direkte Regel für Rechtsbündigkeit */ /* Die .text-align-right Klasse sollte dies auch tun, aber das ist eine zusätzliche Absicherung */ } /* Die Icons (Flaggen) in .language-list sind links vom Text. Wenn die Flaggen auch nach rechts sollen (also rechts vom Text in RTL): */ html[lang="ar"] .language-list li { display: flex; /* Ist schon vorhanden */ flex-direction: row-reverse; /* Kehrt Flagge und Textinfo um */ /* justify-content: flex-end; */ /* Kann helfen, den gesamten Block rechtsbündig zu machen, falls nötig */ } html[lang="ar"] .language-list li .language-flag { margin-right: 0; /* Alten rechten Margin entfernen */ margin-left: 12px; /* Neuen linken Margin für Abstand zum Text */ } html[lang="ar"] #hobby-travel-container { display: flex; /* Macht das li zum Flex-Container */ align-items: center; /* Zentriert Text und Flaggen vertikal zueinander */ justify-content: flex-end; /* Schiebt den gesamten Inhalt (Text + Flaggenblock) nach rechts */ /* Wichtig: Dies ist für die Ausrichtung des Blocks innerhalb des li, wenn das li breiter ist als sein Inhalt. */ } /* Der Text-Span selbst (wird durch JS .text-align-right rechtsbündig) */ html[lang="ar"] #hobby-travel-container #hobby-travel-text { /* text-align: right; wird schon durch die .text-align-right Klasse vom JS gesetzt */ margin-left: 8px; /* Abstand zwischen Text (jetzt rechts) und der ersten Flagge (jetzt links davon) */ } /* Reihenfolge der Kind-Elemente (Text-Span und Flaggen) im Flex-Container umkehren. Da die Flaggen im HTML nach dem Text-Span kommen, erscheinen sie durch row-reverse jetzt VOR (also links von) dem Text-Span. */ html[lang="ar"] #hobby-travel-container { flex-direction: row-reverse; /* Text-Span wird rechts, Flaggen-Gruppe links davon */ } /* Arabisch: Header-Text auf mobilen Geräten zentriert halten */ @media (max-width: 768px) { html[lang="ar"] .header-text { text-align: center !important; } html[lang="ar"] .header-tagline { text-align: center !important; } html[lang="ar"] .profile-header { align-items: center; } }