/* lora-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lora-v37-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lora-v37-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/lora-v37-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/lora-v37-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/lora-v37-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/lora-v37-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lora-v37-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/lora-v37-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/poppins-v24-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/poppins-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/poppins-v24-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --color-blue: #0056a4;
	--color-gold: #cea537;
    --color-black: #000000;
    --font-head: 'Lora', Georgia, serif;
	--font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tm-page h1, h1, .h1 {
    font-family: var(--font-head) !important;
    font-weight: 900 !important;
    font-size: clamp(32px, 4.5vw, 48px) !important;
    line-height: 1.05 !important;
    letter-spacing: 2% !important;
    color: var(--color-gold) !important;
    margin: 0 !important;
	padding-top: clamp(20px, 2.2vw, 36px) !important;
	padding-bottom: clamp(20px, 2.2vw, 36px) !important;
}


.tm-page h2, h2, .h2 {
    font-family: var(--font-head) !important;
    font-weight: 500 !important;
    font-size: clamp(18px, 2.7vw, 28px) !important;
	line-height: clamp(1.3, 1.1 + 0.3vw, 1.3);
    letter-spacing: 1% !important;
    color: var(--color-gold) !important;
    margin: 0 !important;
	padding-top: clamp(18px, 2.0vw, 32px) !important;
	padding-bottom: clamp(18px, 2.0vw, 32px) !important;
}

.tm-page h2.seaside {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.tm-page h3, h3, .h3 {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: clamp(16px, 1.8vw, 24px) !important;
    line-height: 1.3 !important;
    letter-spacing: 2% !important;
    color: var(--color-gold) !important;
    margin: 0 !important;
}

.tm-page p, p, body.body-text {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 1.3vw, 20px) !important;
    line-height: 1.7 !important;
    color: var(--color-gold) !important;
    margin: 0 !important;
	padding-bottom: clamp(16px, 2.2vw, 24px) !important;
}

ul, li {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 1.3vw, 20px) !important;
    line-height: 1.7 !important;
    color: var(--color-gold) !important;	
}

/* Auszeichnung im Text (bold) */
.tm-page p strong, p strong, .body-text strong, strong {
    font-weight: 600 !important;
}

/* ============================================
   EINLEITUNG 1
   ============================================ */
.intro-1 {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: clamp(24px, 3.2vw, 38px) !important;
    line-height: 1.5 !important;
    color: var(--color-gold) !important;
    margin: 0 !important;
}

/* ============================================
   EINLEITUNG 2
   ============================================ */
.intro-2 {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: clamp(20px, 2.8vw, 32px) !important;
    line-height: 1.45 !important;
    color: var(--color-gold) !important;
    margin: 0 !important;
}

/* ============================================
   BLICKFANG
   ============================================ */
.highlight {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: clamp(34px, 5vw, 68px) !important;
    line-height: 1.1 !important;
    color: var(--color-gold) !important;
    margin: 0 !important;
}

.tm-page a, a, .link {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: clamp(16px, 1.8vw, 20px) !important;
    letter-spacing: 1% !important;
    color: var(--color-gold) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.tm-page a:hover, a:hover, .link:hover {
    color: var(--color-gold) !important;
}

.hero-logo {
  display: block;
  width: min(80vw, 600px);
  height: auto;
  margin: 0 auto;
}

.outlined {
  color: #fff;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
}

.tm-page .uk-navbar-nav a, .tm-page .uk-navbar-dropdown a, .uk-dropdown-nav > li > a { 
	font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: clamp(14px, 1.8vw, 20px) !important
}

.uk-navbar-nav > li > a {
	letter-spacing: 1% !important;
}

/* Grundzustand: keine sichtbare Linie */
.uk-navbar-dropdown .uk-nav > li > a {
    position: relative;
    text-decoration: none;
}

.uk-navbar-dropdown .uk-nav > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.15em;
    width: 100%;
    height: 2px;
    background-color: #FFD700;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

/* Hover/Fokus: Linie fährt von der Mitte nach außen auf */
.uk-navbar-dropdown .uk-nav > li > a:hover::after,
.uk-navbar-dropdown .uk-nav > li > a:focus::after {
    transform: scaleX(1);         /* volle Breite, wächst aus der Mitte */
}

/* Navbar-Toggle (Hamburger) größer machen */
.uk-navbar-toggle .uk-navbar-toggle-icon {
    width: clamp(1.5rem, 2vw, 2.5rem);   /* min, fluid, max */
    height: clamp(3.0rem, 2vw, 3.5rem);
}

.uk-navbar-toggle .uk-icon svg {
    background: transparent;
}


/* Pfeil im Language Switcher verkleinern */
.uk-subnav.uk-dropnav .uk-drop-parent-icon svg {
    width: clamp(1.2rem, 2vw, 1.7rem);   /* min, fluid, max */
    height: clamp(1.2rem, 2vw, 1.7rem);
}

/* Optional: Abstand zur Sprache verkleinern */
.uk-subnav.uk-dropnav .uk-drop-parent-icon {
    margin-left: 4px;
}

.tm-page .uk-subnav a { 
	font-family: var(--font-body) !important;
    font-weight: 500 !important;
}

@media (max-width: 410px) {
  .uk-text-middle {
    display: none !important;
  }
}


.tm-page a.btn_seaside { 
	color: #ffffff !important;
	text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;	
}

.tm-page .btn_seaside, .btn_seaside {
    background: #c4a12f !important;
    color: #ffffff !important;
    border-radius: 9999px;
    border: none;                     /* echte Border weg, wir machen alles über box-shadow */
    padding: 0.0em 1.0em;
    text-transform: uppercase;
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: clamp(11px, 1.4vw, 16px) !important;
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease;
}

/* Normalzustand mit Doppelrand */
.btn_seaside {
    /* Syntax: h-offset v-offset blur spread color */
    box-shadow:
        0 0 0 1px #000000,   /* äußerer 1px schwarzer Rand */
        0 0 0 5px #8b5a2b;   /* 4px brauner Rand darüber (1 + 4 = 5px spread) */
}

/* Hover: Hintergrund halbtransparent, Glow dazu, Ränder bleiben */
.btn_seaside:hover,
.btn_seaside:focus {
    transform: translateY(-1px);
    background-color: rgba(212, 175, 55, 0.5) !important; /* Gold mit 0.5 Transparenz */

    box-shadow:
        0 0 0 1px #000000,                       /* äußerer schwarzer Rand */
        0 0 0 5px #8b5a2b,                       /* brauner Rand */
        0 0 8px rgba(212, 175, 55, 0.8),         /* Glow 1 */
        0 0 16px rgba(212, 175, 55, 0.6);        /* Glow 2 */
}

.uk-icon svg {
    width: clamp(3rem, 4vw, 4rem);   /* min, fluid, max */
    height: clamp(3rem, 4vw, 4rem);
	background-color: rgba(212, 175, 55, 0.1);
}

.btn_social {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.gold-line {
  border: none;
  border-top: 5px solid #c4a12f; /* Gold */
  margin: 0px 0px 20px 0px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Wrapper für horizontales Scrollen */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabelle selbst */
.account-table {
  width: 100%;
  max-width: 800px;
  min-width: 600px; /* verhindert zu starkes Zusammenschieben */
  border-collapse: collapse;
  background-color: rgba(0, 0, 0, 0.25); /* leicht abgedunkelt über Braun */
  border-radius: 6px;
  overflow: hidden;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 1.3vw, 20px) !important;
  line-height: 1.7 !important;
  color: var(--color-gold) !important;
  white-space: nowrap; /* kein Umbruch in Zellen */
}

/* Header */
.account-table thead th {
  padding: 10px 14px;
  background: linear-gradient(90deg, #8b6b2b, #c4a12f);
  color: #1c1307; /* sehr dunkles Braun für hohen Kontrast */
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

/* Zellen */
.account-table td {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  white-space: nowrap;
}

/* Zebra-Streifen */
.account-table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.35);
}

/* Hover-Effekt */
.account-table tbody tr:hover {
  background-color: rgba(255, 215, 0, 0.18);
}

/* Optional: Scroll-Hinweis auf kleinen Screens */
@media (max-width: 768px) {
  .table-responsive::after {
    content: "← → Scroll sideways through the table";
    display: block;
    font-size: 12px;
    color: rgba(255, 215, 0, 0.7);
    margin-top: 8px;
    text-align: center;
  }
}

.uk-button-large {
	line-height: 40px !important;
}