@font-face {
  font-family: 'Werbeagentur';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v25-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-100.svg#Werbeagentur') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbeagentur';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v25-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-200.svg#Werbeagentur') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbeagentur';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v25-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-300.svg#Werbeagentur') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbeagentur';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-regular.svg#Werbeagentur') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbeagentur';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v25-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-500.svg#Werbeagentur') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbeagentur';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v25-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-600.svg#Werbeagentur') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbeagentur';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-700.svg#Werbeagentur') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbeagentur';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-v25-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-800.svg#Werbeagentur') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbeagentur';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v25-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-900.svg#Werbeagentur') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbung';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-100.svg#Werbung') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbung';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-300.svg#Werbung') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbung';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Werbung') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbung';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-500.svg#Werbung') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbung';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-700.svg#Werbung') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Werbung';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-v30-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-900.svg#Werbung') format('svg'); /* Legacy iOS */
}

body {
    font-family: 'Werbung', Arial, sans-serif;
	font-size: 20px;
	line-height: 1;
	color: #FFF;
}

h1, h2, h3 {
  font-family: "Werbeagentur", Arial, sans-serif;
  text-transform: uppercase;
  line-height: 1;
  color: #FFF;
}

 .outline-text {
            /* Schriftgröße und fette Schriftart für bessere Lesbarkeit der Outline */
            font-size: 4rem;
            font-weight: bold;
            font-family: sans-serif;
            
            /* Farbe der Füllung auf transparent setzen (nur der Rahmen bleibt) */
            color: transparent;
            -webkit-text-stroke: 1px #ffffff; 
            text-stroke: 1px #ffffff;
            
            /* Weicher Übergang für den Farbeffekt */
            transition: color 0.3s ease, -webkit-text-stroke 0.3s ease;
        }

        .outline-text:hover {
            /* Füllung weiß beim Mouseover */
            color: #ffffff;
            
            /* Optional: Die Outline anpassen, damit sie sich farblich abhebt */
            -webkit-text-stroke: 2px #ffffff;
            text-stroke: 2px #ffffff;
        }