<?php if (!defined('ABSPATH')) exit; ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="color-scheme" content="light dark" />
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<a class="skip-link" href="#content">Zum Inhalt springen</a>

<div class="app" id="top">
  <!-- Top Navigation (styleguide-based) -->
  <header class="topnav" aria-label="Hauptnavigation">
    <div class="topnav__inner">
      <a class="brand" href="<?php echo esc_url(home_url('/')); ?>" aria-label="Startseite">
        <img
          class="brand__logo"
          src="<?php echo esc_url(get_template_directory_uri().'/assets/img/juconnect.svg'); ?>"
          data-logo-light="<?php echo esc_url(get_template_directory_uri().'/assets/img/juconnect.svg'); ?>"
          data-logo-dark="<?php echo esc_url(get_template_directory_uri().'/assets/img/juconnect_light.svg'); ?>"
          alt="JuConnect Logo" />
        <div class="brand__text">
          <div class="brand__name"><?php bloginfo('name'); ?></div>
          <div class="brand__tagline"><?php bloginfo('description'); ?></div>
        </div>
      </a>

      <nav class="topnav__menu" aria-label="Menü">
        <?php
          wp_nav_menu([
            'theme_location' => 'primary',
            'container' => false,
            'menu_class' => 'topnav__list',
            'fallback_cb' => false,
            'depth' => 2,
          ]);
        ?>
      </nav>
    </div>
  </header>

  <!-- Main -->
  <main class="main" id="content" tabindex="-1">
