Embed

<!DOCTYPE html>
<html lang="de">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Sprachwahl Widget</title>
 <style>
 /* Widget Container - fest positioniert ganz oben links */
 .language-switcher {
 position: fixed;
 top: 5px;
 left: 20px;
 z-index: 9999;
 background-color: #B8CDE2;
 border-radius: 12px;
 padding: 8px 12px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 font-family: Arial, sans-serif;
 max-width: 280px;
 }

 /* Scrollbarer Container für Flaggen */
 .flags-container {
 display: flex;
 gap: 8px;
 overflow-x: auto;
 padding: 4px 0;
 scrollbar-width: thin;
 scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
 }

 .flags-container::-webkit-scrollbar {
 height: 4px;
 }

 .flags-container::-webkit-scrollbar-track {
 background: rgba(255, 255, 255, 0.2);
 border-radius: 2px;
 }

 .flags-container::-webkit-scrollbar-thumb {
 background: rgba(255, 255, 255, 0.5);
 border-radius: 2px;
 }

 .flags-container::-webkit-scrollbar-thumb:hover {
 background: rgba(255, 255, 255, 0.7);
 }

 /* Einzelne Flaggen-Buttons */
 .flag-button {
 min-width: 40px;
 height: 40px;
 border-radius: 50%;
 border: 2px solid white;
 cursor: pointer;
 transition: all 0.3s ease;
 background-size: cover;
 background-position: center;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 position: relative;
 overflow: hidden;
 }

 .flag-button:hover {
 transform: scale(1.1);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 border-color: #ffffff;
 }

 .flag-button.active {
 border-color: #4CAF50;
 border-width: 3px;
 box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
 }

 /* Tooltip für Sprachnamen */
 .flag-button::after {
 content: attr(data-lang);
 position: absolute;
 bottom: -30px;
 left: 50%;
 transform: translateX(-50%);
 background: rgba(0, 0, 0, 0.8);
 color: white;
 padding: 4px 8px;
 border-radius: 4px;
 font-size: 11px;
 white-space: nowrap;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s ease;
 }

 .flag-button:hover::after {
 opacity: 1;
 }

 /* Flaggen-Hintergründe mit SVG-Flaggen */
 .flag-de {
 background: linear-gradient(to bottom, #000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%);
 }

 .flag-en {
 background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9IiMwMDIzNjgiLz4KPHN0cmlwZSB4MT0iMCIgeTE9IjIiIHgyPSI0MCIgeTI9IjIiIGZpbGw9IiNmZmZmZmYiIGhlaWdodD0iMyIvPgo8c3RyaXBlIHgxPSIwIiB5MT0iNiIgeDI9IjQwIiB5Mj0iNiIgZmlsbD0iI2JmMDAzMCIgaGVpZ2h0PSIzIi8+CjxzdHJpcGUgeDE9IjAiIHkxPSIxMCIgeDI9IjQwIiB5Mj0iMTAiIGZpbGw9IiNmZmZmZmYiIGhlaWdodD0iMyIvPgo8L3N2Zz4K');
 background: 
 repeating-linear-gradient(0deg, #B22234 0px, #B22234 3px, #FFFFFF 3px, #FFFFFF 6px),
 #3C3B6E;
 background-size: 100% 70%, 40% 30%;
 background-position: 0 30%, 0 0;
 background-repeat: repeat-x, no-repeat;
 }

 .flag-ru {
 background: linear-gradient(to bottom, #FFFFFF 33%, #0039A6 33%, #0039A6 66%, #D52B1E 66%);
 }

 .flag-es {
 background: linear-gradient(to bottom, #C60B1E 25%, #FFC400 25%, #FFC400 75%, #C60B1E 75%);
 }

 .flag-ar {
 background: linear-gradient(to bottom, #CE1126 33%, #FFFFFF 33%, #FFFFFF 66%, #000000 66%);
 }

 /* Mobile Optimierung */
 @media (max-width: 768px) {
 .language-switcher {
 top: 5px;
 left: 10px;
 max-width: 250px;
 padding: 6px 10px;
 }

 .flag-button {
 min-width: 35px;
 height: 35px;
 }

 .flags-container {
 gap: 6px;
 }
 }

 /* Loading Animation */
 .loading {
 opacity: 0.6;
 pointer-events: none;
 }

 /* Status Indicator */
 .status-indicator {
 position: absolute;
 top: -5px;
 right: -5px;
 width: 12px;
 height: 12px;
 background: #4CAF50;
 border-radius: 50%;
 border: 2px solid white;
 opacity: 0;
 transition: opacity 0.3s ease;
 }

 .flag-button.active .status-indicator {
 opacity: 1;
 }
 </style>
</head>
<body>
 <div class="language-switcher" id="languageSwitcher">
 <div class="flags-container" id="flagsContainer">
 <button class="flag-button flag-international" data-lang="Translate" data-code="translate" onclick="activateTranslate()" id="translateButton">
 🌐
 <div class="status-indicator"></div>
 </button>
 </div>
 </div>

 <script>
 // Aktuelle Sprache verfolgen
 let currentLanguage = 'de';
 let isTranslating = false;

 // Prüfen ob bereits auf übersetzter Seite
 function isOnTranslatedPage() {
 return window.location.href.includes('translate.goog') || 
 window.location.href.includes('translate.google.com') ||
 new URLSearchParams(window.location.search).get('_x_tr_tl');
 }

 // Google Translate initialisieren
 function googleTranslateElementInit() {
 new google.translate.TranslateElement({
 pageLanguage: 'de',
 includedLanguages: 'de,en,ru,es,ar',
 layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
 autoDisplay: false,
 multilanguagePage: true
 }, 'google_translate_element');
 }

 // Verstecktes Google Translate Element erstellen
 function initializeTranslate() {
 if (!document.getElementById('google_translate_element')) {
 const translateDiv = document.createElement('div');
 translateDiv.id = 'google_translate_element';
 translateDiv.style.display = 'none';
 document.body.appendChild(translateDiv);

 // Google Translate Script laden
 const script = document.createElement('script');
 script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
 script.async = true;
 document.head.appendChild(script);
 }
 }

 // Übersetzung aktivieren
 function activateTranslate() {
 // Prüfen ob bereits auf übersetzter Seite
 if (isOnTranslatedPage()) {
 console.log('Bereits auf übersetzter Seite - Klick ignoriert');
 return false;
 }

 // Verhindere Mehrfachklicks
 if (isTranslating) {
 console.log('Übersetzung läuft bereits - Klick ignoriert');
 return false;
 }

 // Sofort sperren
 isTranslating = true;
 
 const switcher = document.getElementById('languageSwitcher');
 const button = document.getElementById('translateButton');
 
 // Button komplett deaktivieren
 button.onclick = null;
 button.disabled = true;
 button.style.pointerEvents = 'none';
 button.style.opacity = '0.5';
 button.style.cursor = 'not-allowed';
 
 // Loading-Zustand
 switcher.classList.add('loading');
 button.classList.add('active');

 // URL aufbauen und weiterleiten
 const currentUrl = window.location.href;
 const translateUrl = `https://translate.google.com/translate?sl=de&tl=en&u=${encodeURIComponent(currentUrl)}`;
 
 console.log('Weiterleitung zu Google Translate...');
 window.location.href = translateUrl;
 
 return false;
 }

 // Aktuelle Sprache aus URL erkennen
 function detectCurrentLanguage() {
 const urlParams = new URLSearchParams(window.location.search);
 const hash = window.location.hash;
 
 // Google Translate Parameter prüfen
 if (urlParams.get('_x_tr_tl') || hash.includes('translate.google.com') || window.location.href.includes('translate.google.com')) {
 // Button als aktiv markieren wenn auf übersetzter Seite
 const button = document.querySelector('.flag-international');
 if (button) {
 button.classList.add('active');
 }
 }
 }

 // Touch-Scrolling für Mobile optimieren
 function initializeMobileScroll() {
 const container = document.getElementById('flagsContainer');
 let isScrolling = false;
 let startX = 0;
 let scrollLeft = 0;

 container.addEventListener('touchstart', (e) => {
 isScrolling = true;
 startX = e.touches[0].pageX - container.offsetLeft;
 scrollLeft = container.scrollLeft;
 });

 container.addEventListener('touchmove', (e) => {
 if (!isScrolling) return;
 e.preventDefault();
 const x = e.touches[0].pageX - container.offsetLeft;
 const walk = (x - startX) * 2;
 container.scrollLeft = scrollLeft - walk;
 });

 container.addEventListener('touchend', () => {
 isScrolling = false;
 });
 }

 // Widget initialisieren
 document.addEventListener('DOMContentLoaded', function() {
 // Prüfen ob bereits auf übersetzter Seite
 if (isOnTranslatedPage()) {
 console.log('Auf übersetzter Seite - Button wird deaktiviert');
 const button = document.getElementById('translateButton');
 if (button) {
 button.disabled = true;
 button.style.pointerEvents = 'none';
 button.style.opacity = '0.5';
 button.onclick = null;
 button.classList.add('active');
 }
 }
 
 detectCurrentLanguage();
 initializeMobileScroll();
 
 // Smooth Scrolling für Flaggen-Container
 const container = document.getElementById('flagsContainer');
 if (container) {
 container.style.scrollBehavior = 'smooth';
 }
 
 console.log('Sprachwahl-Widget erfolgreich geladen');
 });

 // Resize Handler für Mobile
 window.addEventListener('resize', function() {
 const switcher = document.getElementById('languageSwitcher');
 if (window.innerWidth <= 768) {
 switcher.style.maxWidth = '250px';
 } else {
 switcher.style.maxWidth = '280px';
 }
 });
 </script>
</body>
</html>

Text

<h2 style="white-space:pre-line">Datenschutzerklärung</h2>
1. Allgemeine Hinweise  Der Schutz Ihrer persönlichen Daten ist uns ein besonderes Anliegen. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
Diese Website erfasst und verarbeitet personenbezogene Daten nur im technisch notwendigen Umfang. In keinem Fall werden Daten verkauft oder aus anderen Gründen an Dritte weitergegeben, außer dies ist zur Vertragserfüllung erforderlich oder gesetzlich vorgeschrieben.
 
2. Verantwortliche Stelle  
Balak Gastro UG (haftungsbeschränkt)
Art Hotel House One
Baldreitstraße 1
76530 Baden-Baden
Deutschland
Telefon: +49 (0) 1520 5411111
E-Mail: info@arthotel-ho.com
Verantwortlich für den Datenschutz: 
Rolan Balak
3. Erhebung und Verarbeitung personenbezogener Daten  Wir erheben personenbezogene Daten nur, wenn Sie uns diese im Rahmen einer Buchung, Anfrage oder Registrierung mitteilen. Dies betrifft z. B.:
Name, Anschrift Telefonnummer, E-Mail-Adresse Buchungsdetails (z. B. An- und Abreisedatum, Zimmerkategorie)  
Diese Daten verwenden wir ausschließlich zur Vertragserfüllung oder zur Bearbeitung Ihrer Anfrage.
4. Server-Logfiles  Beim Besuch dieser Website werden automatisch Informationen erfasst, die Ihr Browser übermittelt. Dazu gehören:
IP-Adresse Datum und Uhrzeit der Anfrage Browsertyp/-version Betriebssystem Referrer-URL Hostname des zugreifenden Rechners  Diese Daten sind nicht bestimmten Personen zuordenbar und werden nicht mit anderen Datenquellen zusammengeführt. Sie dienen ausschließlich der technischen Sicherheit und Optimierung der Website.
5. Cookies  Unsere Website verwendet sogenannte „Cookies“. Diese richten auf Ihrem Endgerät keinen Schaden an, sondern dienen der Benutzerfreundlichkeit und Funktionalität. Sie können die Verwendung von Cookies in den Einstellungen Ihres Browsers steuern oder deaktivieren.
6. Kontaktformular / Buchungsanfrage  Wenn Sie uns per Formular Anfragen oder Buchungen zukommen lassen, werden Ihre Angaben inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.
7. Google Maps / Google Fonts (optional)  Diese Website kann Inhalte von Drittanbietern wie Google Maps oder Google Fonts einbinden. Beim Laden dieser Inhalte kann Ihre IP-Adresse an Google übermittelt werden. Es gelten die Datenschutzbestimmungen von Google:
https://policies.google.com/privacy
8. Ihre Rechte Sie haben jederzeit das Recht auf:
Auskunft über Ihre bei uns gespeicherten Daten Berichtigung unrichtiger Daten Löschung oder Einschränkung der Verarbeitung Widerspruch gegen die Datenverarbeitung Datenübertragbarkeit Beschwerde bei einer Aufsichtsbehörde  Bitte richten Sie Ihre Anfrage an: info@arthouseone.de
9. SSL-Verschlüsselung  Diese Seite nutzt aus Sicherheitsgründen eine SSL-Verschlüsselung. Eine verschlüsselte Verbindung erkennen Sie daran, dass die Adresszeile des Browsers mit „https://“ beginnt.
 
Stand: Juli 2025