/* Nur About-Bereich überschreiben */
#section-about h4 {
  color: #000; /* Schwarz für Hauptzeile */
}
#section-about h4 span {
  display: block;
}
#section-about h4 span:not(:first-child) {
  color: #555; /* Grau für zweite/dritte Zeile */
  font-size: 22px;
}


/* Überschreibt Canvas-Grün im About-Bereich */
#section-about h4.tk-about-title span {
  color: #000;              /* Erste Zeile schwarz */
  display: block;
  font-size: 30px;
}

/* Zweite und dritte Zeile */
#section-about h4.tk-about-title span:nth-child(n+2) {
  color: #555;              /* Grau */
  font-size: 22px;
}


/* Navigation Hover-Farbe überschreiben */
.primary-menu .menu-link {
    transition: color 0.3s ease;  /* weiches Überblenden */
}

.primary-menu .menu-link:hover,
.primary-menu .menu-link:focus {
    color: #ccc !important;  /* Hellgrau */
}

/* Aktiver Menüpunkt ebenfalls hellgrau */
.primary-menu .menu-item.current a,
.primary-menu .menu-item.active a {
    color: #ccc !important;
}

/* Go To Top Button Hover überschreiben */
#gotoTop:hover {
    color: #ccc !important;         /* Pfeil selbst hellgrau */
    border-color: #ccc !important;  /* Rand hellgrau */
    background-color: transparent !important; /* kein grüner Hintergrund */
}


#gotoTop {
    transition: all 0.3s ease;
}

/* Untertitel unter Logo im Slider */
.subtitle-role {
  font-size: 40px;       /* groß wie Portfolio/Autor */
  font-weight: 300;      /* schlank */
  letter-spacing: 2px;
  margin-top: 20px;
  color: #555;           /* dezentes Grau */
}


/* Untertitel unter Logo im Slider */
.subtitle-role {
  font-size: 28px;        /* kleiner als H1, ähnlich wie Portfolio/Autor */
  font-weight: 300;       /* sehr leicht */
  letter-spacing: 2px;    /* etwas Luft */
  margin-top: 10px;       /* enger unter H1 */
  color: #555;            /* dezentes Grau */
  text-transform: none;   /* keine Versalien */
}


/* Untertitel unter Logo im Slider */
.subtitle-role {
  font-size: 20px !important;     /* bewusst kleiner */
  font-weight: 300 !important;    /* dünn */
  line-height: 1.4;               /* angenehme Höhe */
  letter-spacing: 1px;            /* leicht gesperrt */
  margin-top: 8px;
  color: #777 !important;         /* dezentes Hellgrau */
  text-transform: none !important;/* nicht alles groß */
}


/* Untertitel unter Logo im Slider */
.subtitle-role {
  font-size: 28px !important;     /* größer, aber noch klar unter H1 */
  font-weight: 300 !important;    /* schlank */
  line-height: 1.4;
  letter-spacing: 2px;            /* dezente Laufweite */
  margin-top: 12px;
  color: #777 !important;         /* hellgrau */
  text-transform: none !important;
}

/* Markierte Texte (Text-Selection) anpassen */
::selection {
  background: #ccc;   /* Hellgrau Hintergrund */
  color: #000;        /* Schwarzer Text */
}

::-moz-selection {     /* Für Firefox extra */
  background: #ccc;
  color: #000;
}

/* Verhindert Textmarkierung auf der ganzen Seite */
body {
  user-select: none;
  -webkit-user-select: none; /* für Safari/Chrome */
  -moz-user-select: none;    /* für Firefox */
  -ms-user-select: none;     /* für ältere IE */
}

/* Text-Logo oben links */
#logo .logo-text {
  font-family: 'Roboto', sans-serif; /* oder deine Wunschschrift */
  font-size: 28px;                   /* Größe anpassen */
  font-weight: 600;                  /* etwas kräftiger */
  color: #fff;                       /* weiß für transparenten Header */
  text-decoration: none;             /* kein Unterstrich */
  letter-spacing: 1px;               /* etwas Laufweite */
}

#logo .logo-text:hover {
  color: #ccc; /* beim Hover dezent grau */
}

/* Text-Logo Grundstil (oben, transparenter Header) */
#logo .logo-text {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color 0.3s ease; /* weiches Umschalten */
  color: #fff; /* oben: weiß */
}

/* Hover im transparenten Header */
#logo .logo-text:hover {
  color: #ccc;
}

/* Sobald Header sticky wird (beim Scrollen) */
.sticky-header #logo .logo-text {
  color: #000; /* schwarz auf hellem Hintergrund */
}

/* Hover im sticky Header */
.sticky-header #logo .logo-text:hover {
  color: #555;
}

/* Text-Logo immer sichtbar */
#logo .logo-text {
  color: #000 !important;   /* Immer schwarz */
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
}

/* Hover-Effekt */
#logo .logo-text:hover {
  color: #555 !important;
}

/* About-Block: Überschrift luftiger */
.tk-about-title span {
  letter-spacing: 1px;   /* Standard: 0 – mehr Abstand */
}

/* Wenn du die erste Zeile stärker betonen willst */
.tk-about-title span:first-child {
  letter-spacing: 2px;   /* Hauptzeile etwas weiter */
}

/* Text-Logo: immer einzeilig & nicht abschneiden */
#logo { 
  overflow: visible !important;    /* nichts hart clippen */
}
#logo .logo-text {
  display: inline-block;           
  white-space: nowrap;             /* kein Zeilenumbruch */
  text-overflow: clip;             
  overflow: visible;               
  font-size: clamp(16px, 6vw, 28px); /* passt sich an: min 16px, max 28px */
  letter-spacing: 1px;
}

/* Header-Layout: Flex-Container darf schrumpfen, damit das Logo Platz bekommt */
.header-row { 
  min-width: 0;                    /* wichtig für Flex-Overflow */
}
#logo { 
  flex: 0 1 auto;                  /* Logo darf schrumpfen statt zu überlaufen */
}

/* Extra-Feintuning auf sehr kleinen Screens */
@media (max-width: 420px) {
  #logo .logo-text { 
    letter-spacing: 0.5px;         /* etwas enger, damit alles reinpasst */
  }
}

/* Logo-Container darf nicht abschneiden */
#logo, 
#header, 
.header-row {
  overflow: visible !important;
}

#logo .logo-text {
  white-space: nowrap;            /* eine Zeile */
  font-size: 26px;                /* Standard */
  font-weight: 600;
}

/* Für Smartphones verkleinern */
@media (max-width: 480px) {
  #logo .logo-text {
    font-size: 18px;              /* kleiner, damit es reinpasst */
  }
}

#logo {
  flex: 0 1 auto !important;   /* Logo darf schrumpfen */
  min-width: 0 !important;     /* verhindert Abschneiden */
}

/* verhindert, dass das y im Slider abgeschnitten wird */
.emphasis-title h1 {
  line-height: 1.2;         /* mehr Zeilenhöhe */
  padding-bottom: 10px;     /* extra Platz unten */
  overflow: visible;        /* nichts beschneiden */
}

.slider-inner,
.vertical-middle {
  overflow: visible !important;
}

/* Problemfix: Slider-Titel nicht abschneiden */
.emphasis-title {
  overflow: visible !important;
}

.emphasis-title h1 {
  line-height: 1.3 !important;  /* mehr Zeilenhöhe */
  margin-bottom: 0 !important;
  padding-bottom: 6px !important; /* Platz für Unterlängen */
}

.slider-inner,
.vertical-middle {
  overflow: visible !important;  /* nichts clippen */
}

/* Slider-Titel-Container fixen */
.emphasis-title {
  display: inline-block;        /* Breite richtet sich nach Inhalt */
  max-width: 100% !important;   /* nicht enger als Viewport */
  overflow: visible !important; /* nichts beschneiden */
  padding-right: 10px;          /* kleine Sicherheitsluft rechts */
  box-sizing: content-box;      /* damit padding nicht abgeschnitten wird */
}

.emphasis-title h1 {
  font-size: 72px;
  white-space: nowrap;          /* immer eine Zeile */
}

/* Slider-Container darf nichts abschneiden */
#slider .slider-inner,
#slider .vertical-middle,
#slider .emphasis-title {
  overflow: visible !important;
}

/* Titel responsiv & ohne hartes Letter-Spacing */
#slider .emphasis-title h1 {
  /* Größe passt sich Viewport an: min 28px, max 64px */
  font-size: clamp(28px, 8vw, 64px);
  /* sanftes Letter-Spacing statt fixer 15px */
  letter-spacing: clamp(1px, 0.6vw, 8px);
  margin: 0 auto;
  display: inline-block;     /* für zentrierte Breite, aber ohne nowrap */
  padding-inline: 2vw;       /* kleine Luft links/rechts, verhindert Kappung */
  line-height: 1.15;
}

/* Feintuning für sehr kleine Screens */
@media (max-width: 420px) {
  #slider .emphasis-title h1 {
    letter-spacing: 1px;
    padding-inline: 3vw;     /* etwas mehr Rand, damit nichts anstößt */
  }
}

/* Feintuning für Mobile: Titel näher an den Counter schieben */
@media (max-width: 767px) {
  #slider .emphasis-title {
    margin-top: -20px;   /* schiebt Block leicht nach unten */
  }

  #slider .emphasis-title h1 {
    font-size: clamp(24px, 7vw, 48px); /* etwas kleiner am Handy */
  }

  #slider .subtitle-role {
    font-size: 16px;     /* Untertitel dezenter am Handy */
  }
}

@media (max-width: 767px) {
  #slider .emphasis-title {
    position: relative;
    top: 40px; /* nur auf kleinen Screens nach unten */
  }
}