Merge branch 'dev' into building_backend

blog/README.md

@@ -1,43 +0,0 @@
-# Astro Starter Kit: Minimal
-
-```sh
-npm create astro@latest -- --template minimal
-```
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-/
-├── public/
-├── src/
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

blog/README.mdx

@@ -0,0 +1,73 @@
+# Readme
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## Bilder für Webuseage convertieren
+
+`magick convert input_file -resize 50% output_file`
+
+`magick mogrify -format webp -quality 80 *.jpg`
+
+## Vorlage für MDX-Artikel
+
+---
+title: 
+subtitle: 
+description:
+image:
+    path: titelbild_artikelordner.webp
+    alt: 
+author: Bernd das Brot
+date: 2026-08-29
+slug: Wie-soll-die-URL-aussehen?
+time2read: 0
+---
+import BlogLink from '../../components/blog/BlogLink.astro'
+import SingleImage from '../../components/blog/SingleImage.astro'
+import DoubleImage from '../../components/blog/DoubleImage.astro'
+
+Hier kann man in den Artikel einleiten.<br /> 
+Evtl. ist es das gleiche wie die Beschreibung.
+
+---
+<br />
+## Große Überschrift für einen Abschnitt
+
+Textus schreibus .
+
+<SingleImage 
+    src="artikelordner/name.webp" 
+    alt="" 
+    description=""
+/>
+
+Lorem ipsum dolor sit amet.
+
+### Zwischenüberschrift
+
+Lorem Ipsum <BlogLink text="Lorem Ipsum" url="https://www.loremipsum.com/" />. 
+
+<DoubleImage 
+    src1="artikelordner/name.webp"
+    alt1=""
+    src2="artikelordner/name.webp"
+    alt2=""
+    description=""
+/>
+
+<br />
+
+---
+
+**Hier ist Platz für ein Schlusswort.**

blog/astro.config.mjs

@@ -1,5 +1,6 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
@@ -8,4 +9,5 @@ export default defineConfig({
     build: {
       assets: '_assets',
     },
+    integrations: [mdx()]
   });

blog/package.json

@@ -12,9 +12,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/preact": "^6.0.1",
+    "@astrojs/mdx": "^7.0.8",
+    "@astrojs/preact": "^6.0.2",
     "@astrojs/rss": "^4.0.19",
-    "astro": "^7.1.4",
+    "astro": "^7.2.2",
     "preact": "^10.29.0"
   }
 }

blog/public/scripts/image-modal.js

@@ -0,0 +1,23 @@
+const backdrop = document.querySelector("#image-backdrop");
+const preview = document.querySelector("#image-preview");
+
+if (backdrop instanceof HTMLElement && preview instanceof HTMLImageElement) {
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) return;
+
+        if (!backdrop.hidden && backdrop.contains(event.target)) {
+            backdrop.hidden = true;
+            document.body.style.overflow = "";
+            return;
+        }
+
+        const image = event.target.closest("article img");
+
+        if (!(image instanceof HTMLImageElement)) return;
+
+        preview.src = image.currentSrc || image.src;
+        preview.alt = image.alt;
+        backdrop.hidden = false;
+        document.body.style.overflow = "hidden";
+    });
+}

blog/src/components/Header.astro

@@ -1,66 +1,158 @@
+---
+import Logo from "./Logo.astro";
+---
+
 <header>
-  <span id="name">Blauwasser Mausis</span>
+  <Logo />
-  <span class="vertical-line"></span>
+
   <nav>
     <div class="nav-left">
-      <a class="nav-link" href="/">Startseite</a>
+      <Logo />
-      <!-- <a class="nav-link" href="/about">Über uns</a> -->
+      <a href="/">Startseite</a>
     </div>
     <div class="nav-right">
-      <a class="nav-link" href="/impressum">Impressum</a>
+      <a href="/impressum" style="#789">Impressum</a>
-      <a class="nav-link" href="/privacy-policy">Datenschutz</a>
+      <a href="/privacy-policy" style="#789">Datenschutz</a>
     </div>
   </nav>
+
+  <input type="checkbox" id="menu-toggle" class="menu-icon" />
+  <label for="menu-toggle" class="menu-icon" aria-label="Menü öffnen">
+    ☰
+  </label>
+
+  <label for="menu-toggle" class="menu-backdrop"></label>
 </header>
 
 <style>
   * {
+    box-sizing: border-box;
     color: var(--primary-text);
   }
 
   header {
-    padding: 24px;
+    position: relative;
-    display: flex;
-    align-items: center;
-    background-color: var(--primary-color);
-  }
-
-  #name {
-    font-weight: bold;
-    width: min-content;
-  }
-
-  .vertical-line {
-    border-right: 3px solid var(--primary-text);
-    padding-left: 16px;
-    height: 2rem;
-  }
-
-  nav {
     width: 100%;
+    padding: 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 20px;
   }
 
-  a {
+  nav {
-    font-size: 1.5rem;
+    display: flex;
-    padding-left: 16px;
+    align-items: center;
-    color: var(--primary-text);
+    justify-content: flex-end;
-    width: fit-content;
+    flex: 1;
-  }
-
-  .nav-left {
   }
 
   .nav-right {
     display: flex;
-    flex-wrap: wrap;
+    align-items: center;
-    justify-content: end;
+    gap: 16px;
-    
   }
 
-  .nav-right > a {
+  a {
-    font-size: 1rem;
+    color: var(--primary-text);
+    text-decoration: none;
+  }
+
+  #menu-toggle,
+  .menu-icon,
+  .menu-backdrop,
+  .nav-left {
+    display: none;
+  }
+
+  @media only screen and (max-width: 800px) {
+    * {
+      font-size: 1.2rem;
+    }
+
+    .menu-icon {
+      display: block;
+      position: relative;
+      font-size: 1.6rem;
+      cursor: pointer;
+      z-index: 4;
+    }
+
+    #menu-toggle {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .mobile-nav {
+      display: block;
+    }
+
+    nav {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 66vw;
+      min-width: 320px;
+      height: 100vh;
+      padding: 32px 0 0 32px;
+      background: var(--primary-color);
+
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+
+      transform: translateX(-100%);
+      transition: transform 0.3s ease;
+      z-index: 10;
+
+      a {
+        color: whitesmoke;
+      }
+    }
+
+    .nav-left,
+    .nav-right {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .nav-left {
+      gap: 32px;
+      margin-bottom: 64px;
+    }
+
+    nav:has(~ #menu-toggle:checked) {
+      transform: translateX(0);
+    }
+
+    .menu-backdrop {
+      display: block;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.25);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+      z-index: 9;
+    }
+
+    #menu-toggle:checked ~ .menu-backdrop {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+  }
+
+  .vertical-line {
+    visibility: hidden;
   }
 </style>

blog/src/components/Logo.astro

@@ -0,0 +1,20 @@
+<a id="logo-container" class="no-link-link" href="/">
+  <img id="logo-img" src="/BWM_512.webp" />
+  <span id="logo-text">Blauwasser Mausis</span>
+</a>
+
+<style>
+  #logo-container {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  #logo-img {
+    height: 64px;
+  }
+
+  #logo-text {
+    font-weight: bold;
+  }
+</style>

blog/src/components/PostGrid.astro

@@ -1,9 +1,8 @@
 ---
-import type { Post } from "../types/global";
 import PostPreviewSmall from "./PostPreviewSmall.astro";
 
 interface Props {
-  posts: Array<Post>;
+  posts: Array<any>;
 }
 
 const { posts } = Astro.props;
@@ -12,7 +11,7 @@ const { posts } = Astro.props;
 <div class="post-grid">
   {
     posts.map((post_file: any) => (
-      <PostPreviewSmall url={post_file.url} post={post_file.frontmatter} />
+      <PostPreviewSmall post={post_file.data} />
     ))
   }
 </div>

blog/src/components/PostImageBig.astro

@@ -0,0 +1,8 @@
+---
+const {imgPath, alt} = Astro.props
+---
+
+<img src={imgPath} 
+     alt={alt} 
+     style="max-width: 100%; height: auto;" 
+     loading="lazy">

blog/src/components/PostPreviewLarge.astro

@@ -1,34 +1,40 @@
 ---
-import type { Post } from "../types/global";
 import { findImageByPath } from "../lib/findImage";
 import { Image } from "astro:assets";
+import { formatLocalizedDateString } from "../lib/formatDate";
+import type { PostData } from "../content.config";
 
 interface Props {
-  post: Post;
+  post: PostData;
-  url: string;
 }
 
-const { post, url } = Astro.props;
+const { post } = Astro.props;
 
 const img = findImageByPath(post.image.path);
+const localeDate = formatLocalizedDateString(post.date)
 ---
 
-<a href={url} class="no-link-link">
 <div class="wide-container">
   <div class="image-col col rounded">
+    <a href={`/blog/${post.slug}`}>
       <Image src={img} alt={post.image.alt} layout="constrained" />
+    </a>
   </div>
   <div class="text-col col">
-      <div class="top-info">
+    <a href={`/blog/${post.slug}`} class="headline-link">
-        <span>Autor: {post.author}</span>
-        <span>{post.date}</span>
-      </div>
       <h2 class="headline">{post.title}</h2>
-      <h7 class="subtitle">{post.subtitle}</h7>
+    </a>
+    <h7>{post.subtitle}</h7>
+    <div class="top-info">
+      <span>{localeDate}</span>
+      <span class="vertical-line"></span>
+      <span>Autor: {post.author}</span>
+       <span class="vertical-line"></span>
+      <span>Lesezeit: {post.time2read} min</span>
+    </div>
     <p class="description">{post.description}</p>
   </div>
 </div>
-</a>
 
 <style>
   .wide-container {
@@ -69,9 +75,16 @@ const img = findImageByPath(post.image.path);
   }
 
   .top-info {
-    display: flex;
     justify-content: space-between;
-    margin-bottom: 16px;
+    margin: 16px 0;
+    font-size: 1.125rem;
+    color: lightslategray;
+  }
+
+  .vertical-line {
+    color: #789;
+    border-right-width: 2px;
+    margin-right: 16px;
   }
 
   @media only screen and (max-width: 800px) {

blog/src/components/PostPreviewSmall.astro

@@ -1,27 +1,28 @@
 ---
-
+import type { PostData } from "../content.config";
 import { findImageByPath } from "../lib/findImage";
-import type { Post } from "../types/global";
+import { formatLocalizedDateString } from "../lib/formatDate";
 
 interface Props {
-  post: Post;
+  post: PostData;
-  url: string;
 }
 
-const { post, url } = Astro.props;
+const { post } = Astro.props;
 
 const img = findImageByPath(post.image.path)
+const localeDate = formatLocalizedDateString(post.date)
 ---
 
-<a href={url} class="no-link-link">
+<a href={`/blog/${post.slug}`} class="no-link-link">
   <div class="frame rounded">
     <img src={img.src} alt={post.image.alt} class="rounded" />
     <h2 class="headline">{post.title}</h2>
     <h7 class="subtitle">{post.subtitle}</h7>
+    <p>Lesezeit: {post.time2read} min</p>
     <p class="description">{post.description}</p>
     <div class="bottom-info">
       <span>Author: {post.author}</span>
-      <span>{post.date}</span>
+      <span>{localeDate}</span>
     </div>
   </div>
 </a>

blog/src/components/blog/BlogLink.astro

@@ -0,0 +1,5 @@
+---
+const {text, url} = Astro.props;
+---
+
+<a href={url} target="_blank" rel="noopener noreferrer">{text}</a>

blog/src/components/blog/DoubleImage.astro

@@ -0,0 +1,45 @@
+---
+import { Image } from "astro:assets";
+
+const { src1, src2, alt1, alt2, description } = Astro.props;
+---
+
+<div class="container">
+    <Image
+        src=`/blog_img/${src1}`
+        alt={alt1}
+        width={1200}
+        height={800}
+        class="rounded blog-image"
+        loading="lazy"
+    />
+    <Image
+        src=`/blog_img/${src2}`
+        alt={alt2}
+        width={1200}
+        height={800}
+        class="rounded blog-image"
+        loading="lazy"
+    />
+</div>
+<p>{description}</p>
+
+<style>
+    .container {
+        display: flex;
+        flex-direction: row;
+        gap: 2%;
+    }
+
+    .blog-image {
+        width: 49%;
+        height: auto;
+    }
+
+    p {
+        margin-top: 0;
+        font-weight: lighter;
+        font-style: oblique;
+        text-align: center;
+    }
+</style>

blog/src/components/blog/SingleImage.astro

@@ -0,0 +1,29 @@
+---
+import { Image } from "astro:assets";
+
+const { src, alt, description } = Astro.props;
+---
+
+<Image
+    src=`/blog_img/${src}`
+    alt={alt}
+    width={1200}
+    height={800}
+    class="rounded blog-image"
+    loading="lazy"
+/>
+<p>{description}</p>
+
+<style>
+    .blog-image {
+        width: 100%;
+        height: auto;
+    }
+
+    p {
+        margin-top: -8px;
+        font-weight: lighter;
+        font-style: oblique;
+        text-align: center;
+    }
+</style>

blog/src/content.config.ts

@@ -0,0 +1,30 @@
+import { defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+import { z } from 'astro/zod';
+
+
+const postSchema = z.object({
+    title: z.string(),
+    subtitle: z.string(),
+    description: z.string(),
+    image: z.object({
+        path: z.string(),
+        alt: z.string()
+    }),
+    author: z.string(),
+    date: z.coerce.date(),
+    slug: z.string(),
+    time2read: z.int()
+});
+
+export type PostData = z.infer<typeof postSchema>;
+
+const posts = defineCollection({
+    loader: glob({
+        pattern: "**/*.{md,mdx}",
+        base: "./src/pages/blog/",
+    }),
+    schema: postSchema
+});
+
+export const collections = { posts };

blog/src/layouts/BlogPostLayout.astro

@@ -2,48 +2,69 @@
 import { Image } from "astro:assets";
 import BackNav from "../components/BackNav.astro";
 import { findImageByPath } from "../lib/findImage";
-import type { Post } from "../types/global";
 import Main from "./Main.astro";
+import { formatLocalizedDateString } from "../lib/formatDate";
+import type { PostData } from "../content.config";
 
 interface Props {
-  frontmatter: Post;
+  postData: PostData;
 }
 
-const { frontmatter } = Astro.props;
+const { postData } = Astro.props;
+
+const titleImg = findImageByPath(postData.image.path);
+const localeDate = formatLocalizedDateString(postData.date);
 
-const titleImg = findImageByPath(frontmatter.image.path);
 ---
 
 <Main>
-  <article>
+  <article class="markdown-content">
     <Image
       id="titleImg"
       src={titleImg}
-      alt={frontmatter.image.alt}
+      alt={postData.image.alt}
       class="rounded"
     />
-    <h1 class="headline">{frontmatter.title}</h1>
+    <h1 class="headline">{postData.title}</h1>
-    <span class="subtitle">{frontmatter.subtitle}</span>
-    <hr />
     <div class="bottom-info">
-      <span>Autor: {frontmatter.author}</span>
+      <span>Autor: {postData.author}</span>
-      <span>{frontmatter.date}</span>
+      <span>{localeDate}</span>
     </div>
-    <hr />
     <slot />
     <BackNav />
+    <p class="disclaimer">
+      Disclaimer: Dieser Artikel ist ausschließlich privat und wird nicht durch
+      Produktplatzierung, Affiliate-Links oder ähnliches Unterstützt. Links
+      dienen allein dem Zweck der Information.
+    </p>
   </article>
+
+  <div id="image-backdrop" hidden>
+    <img id="image-preview" class="rounded" src="" alt="" />
+  </div>
 </Main>
 
+<script is:inline src="/scripts/image-modal.js"></script>
+
 <style>
   article {
     max-width: 900px;
     padding: 0 clamp(8px, 32px, 64px);
   }
 
+  .markdown-content {
+    font-size: 1.5rem;
+    line-height: 1.6;
+
+
+    img {
+      cursor: zoom-in;
+    }
+  }
+
   #titleImg {
     width: 100%;
-    height: 200px;
+    height: 300px;
     object-fit: cover;
     object-position: center;
   }
@@ -51,6 +72,44 @@ const titleImg = findImageByPath(frontmatter.image.path);
   .bottom-info {
     display: flex;
     justify-content: space-between;
+    margin-top: 16px;
   }
 
+  .disclaimer {
+    margin: 32px 0 64px 0;
+    font-size: smaller;
+  }
+
+  #image-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+
+    display: grid;
+    place-items: center;
+
+    padding: 24px;
+    background: rgba(0, 0, 0, 0.8);
+    cursor: pointer;
+  }
+
+  #image-backdrop[hidden] {
+    display: none;
+  }
+
+  #image-preview {
+    max-width: 90vw;
+    max-height: 90vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    cursor: pointer;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .markdown-content {
+      font-size: 1.25rem;
+      line-height: 1.4;
+    }
+  }
 </style>

blog/src/layouts/Main.astro

@@ -6,7 +6,7 @@ import "../styles/global.css";
 <html lang="de">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link
       rel="alternate"
       type="application/rss+xml"

blog/src/lib/findImage.ts

@@ -1,4 +1,4 @@
-const images = import.meta.glob("/src/assets/**/*.{jpg,png}", { eager: true }) as Record<string, { default: string }>;
+const images = import.meta.glob("/public/**/*.{jpg,png,webp}", { eager: true }) as Record<string, { default: string }>;
 
 export function findImageByPath(path: string, { fallback }: { fallback?: string } = {}): any {
   if (!path) return fallback ?? null;

blog/src/lib/formatDate.ts

@@ -0,0 +1,3 @@
+export function formatLocalizedDateString(date: Date): string {
+    return date.toLocaleDateString('de-DE')
+}

blog/src/pages/blog/1_Under_Construction.mdx

@@ -1,14 +1,16 @@
 ---
-layout: ../../layouts/BlogPostLayout.astro
 title: Under Construction
-subtitle: Wir befinden uns im Aufbau
+subtitle: Wir bauen für Sie
 description: Bald könnt ihr hier unsere ersten Abenteuer mitverfolgen. Und keine Sorge...an der Webseite wird auch noch gearbeitet!
 image:
     path: construction.png
     alt: Under Construction
 author: Tim
-date: '2026-07-10'
+date: 2026-07-10
+slug: Under-Construction
+time2read: 1
 ---
+import BlogLink from '../../components/blog/BlogLink.astro'
 
 # All Endings Are Beginnings
 
@@ -24,5 +26,5 @@ Seid gespannt!
 Ich habe vor einen Email Newsletter einzurichten. Bis das soweit ist empfehle ich euch den RSS Feed.
 Wenn ihr davon noch nie gehört habt; es ist eine tolle Möglichkeit Nachrichten ohne Algorithmus oder spezielle App zu verfolgen.
 
-Eine schöne Anleitung (und ein cooles Projekt auch), wie man einen RSS Feed abonniert findet ihr hier -> [Anleitung](https://kus-projekt.de/anleitung-zum-abonnieren-des-rss-feeds/) \
+Eine schöne Anleitung (und ein cooles Projekt auch), wie man einen RSS Feed abonniert findet ihr hier -> <BlogLink text="Anleitung" url="https://kus-projekt.de/anleitung-zum-abonnieren-des-rss-feeds/" /> <br />
 Unser Feed läuft unter [blauwasser-mausis.de/rss.xml](../../rss.xml).

blog/src/pages/blog/2_Ostseeurlaub.mdx

@@ -0,0 +1,126 @@
+---
+title: Ostseeurlaub
+subtitle: Finden wir ein Boot? Suchen wir überhaupt oder faulenzen wir nur?
+description: Ostseeurlaub bedeutet für mich ganz viele Kindheitserinnerungen. Besonders diese Woche war vollgepackt davon. Hier meine Reiseempfehlung...
+image:
+    path: ostsee.webp
+    alt: Chiara und Tim vor einem Strand
+author: Tim
+date: 2026-08-20
+slug: Ostseeurlaub
+time2read: 6
+---
+
+import BlogLink from '../../components/blog/BlogLink.astro'
+import SingleImage from '../../components/blog/SingleImage.astro'
+import DoubleImage from '../../components/blog/DoubleImage.astro'
+
+Eigentlich soll es hier um unser (zukünftiges) Boot und die Segelreisen gehen. 
+Bis wir davon berichten können dauert es aber noch ein bisschen. Was wir bis dahin machen? 
+Das Leben als Privatière genießen! Und das sieht so aus... 
+
+---
+<br />
+## Ostseecamp Rerik
+Unser erstes light-Abenteuer führt uns an die Ostsee. Mit meiner Mutter und kleinem Bruder verbringen wir eine Woche im Ostseecamp Seeblick bei Rerik.
+
+Freitag morgen, 5 Uhr geht's los. Chiara war da bereits in Kiel und beging den letzten Tag ihres Praktikums in einer Werft. (Vielleicht teilt sie diese Erfahrung auch noch in einem Post). 
+
+Das Ostseecamp kannte ich schon aus den letzten drei Urlauben (vor 2017). Unser Platz hat perfekten zweite Reihe Blick von den Klippen auf das Meer. Der Name ist nicht nur Marketing. Immer eine leichte Briese frische Meeresluft, so lassen sich die Temperaturen gut aushalten. Ab uns zu sehen wir Segelschiffe und sogar ein paar Traditionssegler auf dem Weg zur HanseSail. Dass das Animationsprogramm an diesem Tag bis 23 Uhr geht will mir, im Schlafsack liegend, aber nicht einleuchten. Ab 10 ist Nachtruhe!<br />
+Einschlafen klappt dann aber doch irgendwie. Wenn man hier eins lernt, dann auch bei einer Geräuschkulisse zu schlafen.
+
+---
+<br />
+## Tschu Tschuuuu
+
+<DoubleImage 
+    src1="ostseeurlaub/molly_1.webp"
+    alt1="Chiara und Tim stehen vor der Dampflok Molly."
+    src2="ostseeurlaub/molly_2.webp"
+    alt2="Chiara und Tim stehen neben der Dampflok Molly."
+/>
+
+Da wir nur eine Woche haben (sonst waren es drei), tüffteln wir uns einen straffen Plan aus.
+Station Nummer 1 ist eine Fahrt mit der Molly. Eine süße Schmalspurbahn zwischen Kühlungsborn und Bad Doberan. Das Ruckeln, der Windzug und dicke schwarze Rauch sind immer wieder ein herliches Erlebnis und nur ein geringer Preis dafür, Pünktlich zu sein. Looking at you, Fernverkehr!
+Vorbei an Heiligendamm, der Pferderennbahn, durch Felder und Wälder.
+
+In der kühle des Doberaner Klosters lässt es sich gut aushalten, bis es zurück zu Molly geht. 
+Zurück Kühlungsborn nutzen wir den Tag für ein kleines Mittagessen und einen Besuch des Strandes.
+Es dauert zwar ein bisschen, bei genauen Suchen findet sich zwischen den Strandkörben, Menschen und Sandburgen doch etwas Sand zum liegen.
+Hier kommen wir schon zu einem meiner Highlights der Woche: Chiara, die das erste Mal in Wellen springt. So richtig schön große 2 Meter Wellen. Erst zögerlich und dann mit immer mehr Inbrunst. Die Stunde vergeht schnell, wenn man gegen die Macht des Meeres ankämpft. Das macht als Erwachsener noch genauso viel Spaß wie als Kind. Nur die Wellen sind in der Zwischenzeit irgendwie kleiner geworden...
+
+---
+<br />
+## Toms Erlebnis-Dorf
+<SingleImage 
+    src="ostseeurlaub/karls.webp"
+    alt="Chiara und Tim stehen vor dem Eingangsschild zum Karls Erlebnisdorf in Rövershagen."
+ />
+
+Nächster Halt ist <BlogLink text="Karls Erlebnis-Dorf" url="https://karls.de/" /> in Rövershagen. Eine meiner jüngeren Kindheitserinnerungen. 
+Hier muss ich immer an Tom denken, einen lieben Kollegen. Er hat in seiner Jugend im Karls Erlebnis-Dorf bei Berlin in der Pfannkuchen-Schmiede gearbeitet. Liebe Grüße!<br />
+*PS: Es gibt keinen herzhaften veggy Pfannkuchen. Skandal!!11!*
+
+
+Dieses erdbeerige Vergnügungsparadies bietet eine Menge Attraktionen für Familien. Vom Erdbeer-Schnaps über das Stockbrot bis zur saucoolen Murmelbahn.
+Mit dem Tagesticket können wir jegliche Attraktion fahren. Das machen wir auch! Alle Achterbahnen und Fahrgeschäfte nehmen wir mit. Auch das kleine Karoussel mit dem man einen riesen Lärm machen kann, Oink! Määähhh!, und die Treggerbahn kriegen uns begeistert. Hier wird Kapitalismus in besonders schöne Bänder gehüllt!
+
+<SingleImage 
+    src="ostseeurlaub/karls_mais.webp"
+    alt="Chiara sizt in einem riesigen Maisbad."
+    description="Chiara wird im Mais verbuddelt"
+ />
+
+Besonders freue ich mich auf die Eiswelt. In einer großen Halle stellen Bildhauis ihre Kunst aus und zeigen sogar live wie es geht. Das Thema in diesem Jahr ist Märchen (Und irgendwie ist auch die AIDA dabei...).
+
+<DoubleImage 
+    src1="ostseeurlaub/karls_eis_thron.webp"
+    alt1="Chiara und Tim auf einem Thron aus Eis."
+    src2="ostseeurlaub/karls_eis_aida.webp"
+    alt2="Chiara und Tim stehen auf einem kleinen AIDA Bug aus Eis und spielen diese eine Szene aus Titanic nach."
+    description="Die blauen Mäntel bekommt man übrigens wegen der -15°C"
+/>
+
+Sogar zwei Rutschen aus Eis haben sie gebaut. Wunderschön und spaßig dazu. Außerdem die schnellste Abkühlung, die man im Sommer kriegen kann ;) 
+
+---
+<br />
+## Nun doch ein bisschen Segelboot und Störtebeker 
+Donnerstag ist der große Tag für Störtebeker. Das Open-Air Theater auf der großartigen Naturbühne Ralswiek. Als Kind war es eine Konstante im Rügenurlaub. Das Ganze ist zwar 2,5 Stunden entfernt, aber die nehmen wir gerne in Kauf. 
+Als Zwischenstopp gucken wir uns in Rostock die schönen Traditionssegler an, die für die 
+<a href="https://www.hansesail.com/" target="_blank">HanseSail</a> im Stadthafen liegen.
+
+Ganz uneigentnützig ist der Besuch in Rostock allerdings auch nicht. Wir haben endlich den Termin mit unserer Bootsberaterin Marie. Dafür suchen wir uns einen ruhigen Ort mit stabilem Netz. Für beides taugt der Campingplatz nicht. 
+
+Der 3,5 Stunden-Workshop mit Marie vergeht wie im Flug. Sie hilft uns mit ihrem Wissen und erfragt Dinge, über die wir uns noch keine Gedanken gemacht haben.<br /> 
+Wenn ich eins mitgenommen habe: Immer prüfen aus welchem Stahl die Edelstahlkette ist. Sonst lieber wegschmeißen und zur versinkten Kette greifen :D
+
+In den nächsten Wochen erhalten wir konkrete Rückmeldungen vom Bootsmarkt und dann heißt es: Boote besichtigen! :)
+Dafür nehmen wir euch natürlich mit (metaphorisch!).
+
+Aber nun ab zu den <a href="https://www.stoertebeker.de/de/" target="_blank">Störtebeker Festspielen</a>, wir sind spät dran. 
+Wem dieses Erlebnis bisher noch nicht zuteil wurde: Absolute Empfehlung! In den letzten 4 Jahren haben wir es immer geschafft und sind weiterhin große Fans. Dafür lohnt sich auch mal ein verpennter nächster Tag.
+Spoilern werde ich natürlich nicht. Nur soviel: **So'n großer Feuerball, Junge!**
+
+<SingleImage 
+    src="ostseeurlaub/stoertebeker.webp"
+    alt="Chiara sizt in einem riesigen Maisbad."
+    description="Nach der Vorstellung auf dem Weg zum Auto"
+ />
+
+---
+<br />
+## Zufälle
+Der letzte ganze Tag verläuft eher typisch. Lange schlafen. Lesen. Kleine Spaziergänge. Eis essen.
+Nach so viel Action brauchen wir das auch mal.
+
+Während mein kleiner Bruder beim Volleyball Tournier mit seinen Aufschlägen physische Schmerzen verteilt, entdecke ich, dass der Mensch, der meinen Laptop über Kleinanzeigen kaufen will, in Wismar wohnt.
+Nur 20 Bahnminuten von uns entfernt!
+Den Laptop bringe ich ihm direkt vorbei und wir nutzen die Gelegenheit uns den Hafen von Wismar anzugucken. 
+
+Mit dem NEUEN Laptop, sind wir übrigens SEHR zufrieden ;). Der Framework 13 Pro ist wahrlich ein Meisterwerk.
+<br />
+
+---
+
+**Diese Woche war vollgepackt mit Kindheitserinnerungen, Erholung und Abenteuer. Das Wetter hätte nicht besser sein können. Zu sagen, dass wir es genoßen hätten wäre eine Untertreibung. Entsprechend erholt sind wir danach und bereit für das nächste Abenteuer. Zeit für Kontrast zum Strand...**

blog/src/pages/blog/3_Matrei.mdx

@@ -0,0 +1,267 @@
+---
+title: Luxusurlaub in den Bergen - Hike & Bike im Wipptal
+subtitle: Das ist jetzt also unser Leben. Luxushotels, 3-Gänge-Menüs und die schönsten Umgebungen.
+description: Was könnte ein besser Kontrast zum Zelturlaub an der Ostsee sein, als eine Woche in einem luxuriösen Hotel, mitten in den Alpen? Und wenn ihr jetzt denkt, dass wir unsere Abfindung verschleudern...das ganze hat uns nur 80€ p.P. gekostet ;). Wie das funktioniert erfahrt ihr im Artikel.
+image:
+    path: titelbild_matrei.webp
+    alt: Chiara und Tim in der nähe der Bergeralm mit tollen Bergen im Hintergrund.
+author: Tim
+date: 2026-08-29
+slug: Luxusurlaub-in-Matrei
+time2read: 14
+---
+import BlogLink from '../../components/blog/BlogLink.astro'
+import SingleImage from '../../components/blog/SingleImage.astro'
+import DoubleImage from '../../components/blog/DoubleImage.astro'
+
+Was könnte ein besser Kontrast zum Zelturlaub an der Ostsee sein, als eine Woche in einem luxuriösen Hotel, mitten in den Alpen?<br />
+Und wenn ihr jetzt denkt, dass wir unsere Abfindung verschleudern...das ganze hat uns nur 80€ p.P. gekostet ;)<br />
+Wie das funktioniert erfahrt ihr im Artikel.
+<br />
+
+---
+
+>**TL;DR (Lesezeit: 10 sek)** <br />
+Chiara meint ich soll eine Kurzfassung anbieten, weil der Artikel so lang ist...<br />
+Na bitte:
+Schöne Woche, jederzeit wieder. <br />
+Ciao Kakao.
+
+---
+<br />
+## Es gibt immer einen Zug ~~früher~~ später
+Ich schlage die Augen auf. <br />
+Wir liegen auf der Couch im Wohnzimmer meiner Schwester. Sie ist mit ihrer Familie im Urlaub und wir dürfen hier unterkommen. Die Vögel zwitschern schon und die Sonne taucht die Dachgiebel in goldenes Licht. Wunderschön ruhig.<br />
+
+Fuck. <br />
+Um 4:30 sollten die Fenster nicht so hell und ich nicht so ausgeschlafen sein. Beide Wecker haben nicht geklingelt! 
+Meinen habe ich ausversehen wieder ausgemacht und Chiaras Handy war stumm. Den Zug um 5:20 können wir vergessen. 
+
+Eigentlich wollen wir nach Österreich für eine [Gesundheitswoche](#infos-gesundheitsreisen). Das Thema der Woche ist Hike & Bike im Wipptal. Was uns genau erwartet wissen wir noch nicht. Der Name lässt allerdings auch nicht viel Platz für Fantasie.
+
+Mit einem Stresspegel, der sich umgekehrt proportional zum Wasserstand des Rheins verhält, suchen wir nach einer alternativen Verbindung. Ein ICE bringt uns nach München und zwar so, dass wir den geplanten Anschluss nach Insbruck noch erreichen?!? <br />
+Man muss auch mal Glück haben. Wieso wir unbedingt 4:30 aufstehen wollten erschließt sich uns jetzt jedenfalls nicht mehr. Also ab unter die Dusche, schnell noch etwas trinken und...da guckt mich meine Schwester aus dem Wohnzimmer an. Ich dagegen stehe nackt in der Küche.<br />
+Die sind mitten in der Nacht aus dem Urlaub zurückgekommen. Das leere Schlafzimmer war offenstichtlich kein ausreichendes Indiz für unsere Ungestörtheit ^^.
+
+Unsere Situation müssen wir auch nicht mehr erklären. Durch die aufgeregten und viel zu lauten Gespräche zwischen Chiara und mir haben sie alles in bestem Stereo mitbekommen.
+
+Mit den Zügen klappt letztendlich alles und wir kommen, trotz der verschlafenen zwei Stunden, pünktlich und nicht zu müde in Matrei an.
+
+<SingleImage 
+    src="matrei/anfahrt.webp" 
+    alt="Chiara macht ein Selfie auf dem Boden eines RailJet sitzend. Tim guckt im Hintergrund grimmig." 
+    description="Den RailJet München\<-\>Innsbruck haben wir selten leer erlebt"
+/>
+
+---
+<br />
+## Parkhotel
+Das Hotel (Parkhotel) hätte besser nicht sein können. Nur 100 Meter vom Bahnhof entfernt, Online-CheckIn, kleiner Saunabereich, mini Parkanlage (daher wohl der Name), fantastische Küche und unfassbar freundliches Personal. Looking at you, Georgio! 
+
+Überhaupt sind alle Menschen, mit denen wir Kontakt haben sehr freundlich. 
+Die Nähe zu Italien und  entspannte Atmosphäre der Berge scheint eine positive Wirkung auf das Gemüt der Leute zu haben. In deutschen Großstädten stolpert man da seltener drüber.
+
+Kurz vor dem Essen lernen wir das Wochenprogramm und die Gruppe bei einem alkoholfreien Aperitif kennen. Außer uns sind noch drei Frauen dabei. Jeweils von Systel, Vertrieb und E&C.
+
+Das reicht auch als Gemeinsamkeit und wir kommen sofort gut mit Franzi und Karin ins Gespräch. Das abendliche 3-Gänge-Menü lässt nichts zu wünschen übrig. Um alle Bedürfnisse (glutenfrei, vegetarisch, laktosefrei) wird sich herzlichst gekümmert. Nur einen Kritikpunkt gibt es: Die Menge. Viel zu viel! Und das von mir...
+Aufgegessen habe ich natürlich jeden Gang; war aber nicht einfach. Auch die Reste unserer Mitstreiterinnen zu probieren habe ich mir selbstverständlich nicht nehmen lassen. Das Steak des heimischen Rindes war unglaublich lecker.
+
+
+<DoubleImage 
+    src1="matrei/food_1.webp"
+    alt1="Hauptgang des Abends, Tagliatelle mit Rucola, Parmesan und getrockneten Tomaten"
+    src2="matrei/food_2.webp"
+    alt2="Nachtisch des Abends, viel zu viel Tonkacréme mit Früchten, einem selbstgemachten Keks und Bisé."
+    description="Zwei der drei abendlichen Gänge"
+/>
+
+Während des Essens schaltet sich auch die dritte, bisher unbenannte Person, hinzu: Olga. Ihren richtigen Namen werden wir bis zum Ende nicht erfahren. Nur eins möchte ich hier zu ihr schreiben: Sie teilt uns ihre Hoffnung zu, dass wir nicht so viel Bergauf laufen werden.
+Die überraschten Blicke aus der Wander-Erfahrenen Runde könnt ihr euch selbst ausmalen.
+
+Nach diesem guten Start erleben wir noch ein grandioses Alpen-Gewitter von unserem Balkon aus und sinken bald in tiefen Schlaf.
+
+---
+<br />
+## In diesem Kapitel erfährst du, wie du über 100 wirst!11!
+
+Gesundheitswandern ist das Konzept, welches diese Woche als Gesundheitsreise auszeichnet. Vier Module á 2 Stunden. 
+Eine Methode, um Menschen, die wenig Bewegung in ihrem Leben haben, wieder Spaß am draußensein zu vermitteln. So erzählt es uns unsere Wanderführerin Irmgard. 
+
+Für unserer Gruppe merkt sie schnell, dass es bei diesen theoretischen Impulsen bleiben kann. Wandern lieben wir fast alle.
+Nur bei genauerem hinsehen kann man erahnen, dass Irmi vermutlich nicht mehr 40 ist. Groß, schlank, mit einer kerzengraden Haltung und sicherem Schritt.
+Sie ist 75 Jahre alt! Super beeindruckend.
+
+Mit dem Bus geleitet sie uns in das Obernbergtal und von dort geht es einen sanften Anstieg an einem Bach entlang. Das Highlight finden wir nach der Umrundung des Obernberger Sees auf der Steiner Alm. Trotz Sprachbarriere (österreichisch) schaffen wir es uns mit unserer Dolmetscherin Franzi und Irmi eine zünftige Jause zu bestellen. Ich gönne mir gebratenen Käse, frisch von der Alm selbst, mit zwei Karsknödeln und Sauerkraut (vermutlich das beste, dass ich bisher gegessen habe). Chiara probiert den Rohmilchkäse in der Hoffnung auf etwas ähnliches wie Handkäs mit Musik. Ähnlichkeit hat es.
+
+Die Idylle ist Perfekt. Die Runde um den Obernberger See ist schattig, so dass wir beim Auf- und Abstieg vor der Sonne geschützt sind.
+
+Irmi ist nicht nur körperlich fit, sondern auch geistig völlig ausgeglichen. Routiniert und ruhig geht sie die Wege, gibt ein perfektes Tempo vor und erklärt uns immer wieder Dinge zu Pflanzen, Fitness, Gesundheit oder lokaler Folklore. 
+Als Vorbild hat sie sich uns schon jetzt in unseren Hirnwindungen verkeilt.
+
+<SingleImage 
+    src="matrei/wandern_1.webp" 
+    alt="Chiara und Tim vor einer Gebirgskette." 
+    description="Auf den Berg im Hintergrund geht's am Donnerstag"
+/>
+
+Mit dem Bus fahren wir wieder zum Hotel und verabschieden uns bis zum nächsten Morgen. Die übrige Zeit zum Abendessen verbringen wir mit den erkunden der Sauna. Vom Dampfbad mit Salzpeeling, über die finnische Sauna bis zur Rotlichtkabine probieren wir alles aus. Schließlich müssen unsere geschundenen Körper wieder aufpäppelt werden. 
+
+Routiniert geht es weiter, wie jeden Abend: Salat, Vorpseise, Hauptgang, Nachspeise, ins Bett fallen.
+
+### Maria Waldrast
+
+Die Wanderung am Dienstag führt uns zum Kloster <BlogLink text="Maria Waldrast" url="https://www.mariawaldrast.at/" />. Sogar ein eigenes Shuttle bekommen wir! 
+Irmi erzählt uns die Entstehungsgeschichte dieses Pilgerortes und weist uns auf das heilende Wasser hin, dass aus einem Brunnen quillt. Es soll besonders gut für die Augen sein. 
+Ob da nun was dran ist oder nicht, heilendes Wasser lässt man nicht links liegen. Also tauschen wir das Hotelwasser gegen den edlen Placebo-Tropfen.
+
+Die Route führt uns vorbei am Berg Serles, wo wir Irmi der <BlogLink text="Sage" url="https://de.wikipedia.org/wiki/Serles#:~:text=Sage" /> des namensgebenden König Serles und seiner zwei Söhnen lauschen. Wiedereinmal ein beeindruckendes Panorama. Schwer zu greifen und auf eine Art unwirklich. Kein wunder, dass sich so viele Mythen um die Berge ranken. 
+
+Bei einem kleinen Gipfelkreuz angekommen machen wir eine kurze Rast. Das heißt aber vorallem: Irmi zeigt uns Dehnungen, Kräftigungs- und Koordinationsübungen um den Körper dehnbar und fit zu halten. Sie selbst macht diese regelmäßig jeden Morgen.
+(So routiniert sind wir gerade noch nicht, nutzen aber schon gerne Wartepausen am Bahnhof, um die eine oder andere Übung unterzubringen. 
+Bleibt flexibel!)
+
+Als weitere Events werden uns mittem im Wald Kühe und Pferde geboten. Eines der Pferde hat schwarz-weißes kuhmuster. Hihi :) 
+
+Mittag machen wir am Ende der Rundwanderung im Kloster. Eine angepriesene Gourmet-Alm hatte leider zu :(.
+
+Mit dem Shuttle geht es gegen 15 Uhr wieder zurück zum Hotel und was soll ich sagen...Sauna, Abendessen und ab ins Bett!
+
+<DoubleImage 
+    src1="matrei/wanderung_1_gpx.webp"
+    alt1="Wanderung am Montag zur Steiner Alm. Distanz: 11,7 km."
+    src2="matrei/wanderung_2_gpx.webp"
+    alt2="Wanderung am Montag zur Steiner Alm. Distanz: 4,42 km."
+    description="Links: Steiner Alm. Rechts: Rundwanderung Maria Waldrast"
+/>
+
+---
+<br />
+## E-Mountainbike-Tour
+Das Navis Tal, welches heute auf dem Plan steht, wurde uns von Irmi schon als das schönste der Seitentäler angepriesen. Mit dem Bus fahren wir tief ins Tal zum namensgebenden Ort Navis. Oder ist es andersherum?
+Dort finden wir einen kleinen E-Bike-Verleih vor dem schon mehrere dicke Dinger parken. Aus jedem Rahmen könnte man zwei bis drei Räder machen. Und auch die Reifen reichen für zwei. Echte Monster. 
+
+Eigentlich nichts spannendes, E-Bikes sieht man mittlerweile genauso häufig wie Fahrräder. Wir waren allerdings noch nie elektrisch Unterwegs. Erst recht nicht mit so hochgerüsteten Mountainbikes.
+
+Unsere Expeditionsleitung Randi zeigt uns auf der Karte die Almenrunde, das heutige Programm. Irgendwas um die 16 Kilometer, mit der Option selbstständig weiterzufahren. 
+
+Mountain ist in diesem Tal Programm. Wir schrauben uns in langen steilen Serpentinen mit über 8% Steigung nach oben. 
+Mein Ego wird hier auf die Probe gestellt, denn natürlich halte ich E-Bikes für schummeln ^^. Ohne Unterstützung merke ich schnell, dass es kaum möglich ist auf glattem Asphalt zu fahren. Während sich das Gewicht noch vertraut anfühlt, die Reiseräder sind noch schwerer, erzeugen die dicken Reifen so viel Reibung, dass man beim leichtesten Berg schon aus der puste kommt. Zumindest, wenn man mit den anderen E-Bikes mithalten will.
+Auf der Schotterpiste nehme ich den erste Berg noch ohne Motor. Dann gebe ich auf und nutze Eco. 
+
+**ACHTUNG: Unnötiger philosophischer Ausflug** <br />
+Mir fallen jetzt Gespräche ein, in denen mir gesagt wurde, dass man im Eco-Modus ja trotzdem treten muss und es immernoch anstrengend ist.
+Das stimmt auch. Allerdings übernimmt Eco (klar, je nach Einstellung) mind. 60% der Arbeit. Eher mehr. Und die geistesstärke am Berg nicht höher zu Schalten muss man erstmal haben. Ein E-Bike kauft man sich ja nicht, um den Motor dann nicht zu nutzen...
+
+Was will ich mit diesem Ausflug eigentlich sagen? Ich weiß es auch nicht. So ein Rad erweitert den Möglichkeitenraum von vielen Menschen. Das ist erstmal was gutes. 
+Für mich entwertet es das Erlebnis und das Gefühl mir die Freiheit auf dem Gipfel selbst erkämpft zu haben. Der Motor nimmt mir diese Freiheit, denn ohne ihn gehts nicht so weit, schnell, hoch.
+
+Die Ambivalenz dahinter ist mir durchaus bewusst. Das Fahrrad selbst ist ja bereits ein Hilfsmittel. <br />
+Freiheit ist eben immer die Freiheit, der Fahrradlenkenden. <br /> 
+**Unnötiger philosophischer Ausflug ENDE**
+
+Die Höhenmeter, die wir hinter uns bringen sind beeindruckend. Normalerweise bräuchte man Stunden, Schokolade, Pausen und viel Wasser dafür. Ein kurzes Stück Trail zwischen zwei Fahrradwegen wird zum Highlight des Aufstiegs. Die Federung und der Gripp der Reifen sind hier genau passend.
+Nach ca. 1,5 Stunden erreichen wir die erste Alm. Dort gibt's etwas kleines zu Essen und Holunder-Brause.
+Für Franzi wird als besondere Belohnung frische Buttermilch serviert. Schmeckt sehr anders als aus dem heimischen Supermarkt.
+
+Auch mit Randi reden wir mittlerweile über verschiedene Themen. Ihr Blick auf das Leben ist erfrischend und macht Mut Wege zu gehen, die anders sind, als wir es vorgelebt bekommen.
+Auch sie strahlt diese stoische Ruhe und Gelassenheit aus, die uns an Irmi schon so beeindruckt hat.
+
+Nach der Alm beginnt der Spaß erst so richtig. Ein großer Teil der erkämpften Höhenmeter wird zurückgegeben und durch schnelles Bergabfahren ersetzt. Am liebsten sind mir die fast ebenen Wege mit viel "Flow" (mir fällt kein passendes deutsches Wort ein) und einer guten Aussicht. 
+
+<SingleImage 
+    src="matrei/ebike_1.webp" 
+    alt="Chiara neben ihrem E-Bike guckt das Tal hinunter." 
+/>
+
+Entsprechend schnell kommt jetzt auch die zweite Alm in Sicht. Hier trennen sich nach einem weiteren Getränk unsere Wege. Karin, Franzi, Chiara und ich entscheiden uns für die längere Runde. Hier kann ich auch endlich mein neues GPS mit den Karten von <BlogLink text="OpenfietsMaps" url="https://www.openfietsmap.nl/" /> ausprobieren. Spoiler: Es war genauer als die Papier-Radkarte von Randi ;)
+
+Für uns vier geht es nun sehr weit nach oben. Natürlich kommt am Ende des Weges wieder eine Alm :D. Hat aber geschlossen.
+Der Weg, der uns hier empfohlen wurde ist kein einfacher Radweg mehr. Es ist ein roter Mountainbike Trail. Für Chiara und mich kein Problem, sind wir doch ausreichend fit und mit dem Bike geübt. Bei unserer Begleitung habe ich wenigstens kleine Bedenken. Die ein oder andere Stelle ist schwierig und manchmal ist schieben die sicherere Variante. Am Ende haben wir es zusammen als Gruppe richtig gut gemeistert.
+
+<SingleImage 
+    src="matrei/gruppe.webp" 
+    alt="Gruppenfoto von Karin, Franzi, Chiara und Tim am höchsten Punkt der Tour." 
+    description="Am höchsten Punkt der Tour. (v.l.n.r.: Karin, Franzi, Chiara, Tim)"
+/>
+
+Diese Woche gibt es an allen Ecken Menschen, die man sich super zum Vorbild nehmen kann. Spätestens nach diesem Tag gehört Karin auch mit dazu. Ihre Kondition und Koordination ist besser als die der meisten 40+er, die ich kenne. Und dabei ist sie über 61!!!
+Wenn ich in 32 Jahren immer noch so agil, fit und abenteurlustig bin habe ich viel richtig gemacht. Weiter so Karin! Wir bewundern deinen Weg.
+
+Nach dem Trail müssen wir nur noch ins Tal hinunter. Die Hände krampfen durch das viele Bremsen, als wir über 1000 Höhenmeter hinabsausen.
+
+<DoubleImage 
+    src1="matrei/trail_1.webp"
+    alt1="Bild vom Trail."
+    src2="matrei/trail_2.webp"
+    alt2="Weiteres Bild vom Trail."
+    description="Hier gehts auch mal eine Stufe und steiniges Geländer runter"
+/>
+
+An der Hauptstraße angekommen entscheiden wir den Turbomodus auszuprobieren. Volle Kraft auf Spaß! Spätestens jetzt fahren wir E-Moped und kein Fahrrad mehr. Die 5 Kilometer fühlen sich an wie Radeln mit Rückenwind von 8 Beauffort ^^.
+
+Zum Abschluss gibts ein Wassereis während wir auf den Bus warten. Der Rest des Abends sollte euch mittlerweile bekannt vorkommen ;)
+
+<SingleImage 
+    src="matrei/ebike_gpx.webp" 
+    alt="Kartenausschnitt mit Route der Radtour und Höhenmeter-Diagramm. Distanz: 33,4 km" 
+/>
+
+---
+<br />
+## Bogenschießen und große Runde mit der Gondel
+Am Donnerstag ist das offizielle Programm vorbei. Quasi ein freier Tag. 
+Während andere wandern gehen oder sich Sterzing in Italien angucken entscheiden wir uns für das optionale Angebot Bogenschießen zu gehen. 
+In meiner Kindheit hatte ich mit diversen Bögen zu tun und freue mich total darauf. Chiara dagegen hatte noch nie einen Bogen in der Hand. 
+
+Der unglaublich freundliche Kursleiter steckt uns schon bei der Fahrt zum Gelände mit seinem Enthusiasmus an. Dabei ist er selbst erst seit zwei Jahren im Sport dabei. Sein Sohn hatte ihn überredet, obwohl er die Idee doof fand. Jetzt ist er jeden Tag auf dem Schießstand. Schon wieder eine Lektion vorgelebt bekommen. Immer offen gegenüber Neuem sein. So viele Weisheiten im Wipptal...
+
+Wir werden ausgerüstet, bekommen eine ausführliche Einweisung in die Technik und gehen dann auf eine Art Parcour durch den Wald. Aufgebaut ist das ganze ähnlich wie Golf. Es gibt mehrere Stationen mit jeweils einem Ziel, auf welches von einer markierten Position geschossen wird. Drei Pfeile pro Person, der erste Treffer zählt. So erschießen wir Wildschweine, Rehe, Gämse, Murmeltiere, Rebhühner und sogar einen Bären!
+
+Chiara ist wirklich gut und liegt mit den Punkten nur knapp hinter unserem Lehrmeister. 
+Insgesamt schießen wir alle sehr gut.
+Wenn ihr mal im Wipptal oder in Innsbruck seid: Klare Empfehlung -> <BlogLink text="Bogenschießen im Wipptal" url="https://www.wipptal.at/bogenschiessen" /> 
+
+<SingleImage 
+    src="matrei/bogenschießen.webp" 
+    alt="Chiara zielt mit gespanntem Bogen auf eine Zielscheibe." 
+/>
+
+Danach fahren wir schnell zur einzigen Bergbahn im Wipptal, um eine Wanderung zum Lichtsee zu machen. Hier oben finden wir das bisher atemberaubenste Panorama. 
+Eine Dreiviertelstunde vor dem Ziel treffen wir Karin und Franzi, die gerade den Rückweg antreten. Auch sie haben die Runde absolviert.
+
+Am See angekommen schwimme ich eine kleine Runde zur Erfrischung. Es sind immerhin über 25°C. Viele andere tun es mir gleich. 
+
+Auf dem Rückweg werde ich von einer Biene als Rastplatz/Verkehrsmittel benutzt. Mitllerweile ist es sehr windig. Da hätte ich auch keine Lust zu fliegen.
+
+<SingleImage 
+    src="matrei/bergbiene.webp" 
+    alt="Eine Biene ruht sich auf Tims blauem Kopftuch aus." 
+    description="Sieht sie nicht plüschig aus?!"
+/>
+
+Mit Gondel und Bus verlassen wir die luftigen höhen wieder und kehren zurück ins Hotel für das letzte Abendmahl.
+
+<SingleImage 
+    src="matrei/wanderung_3_gpx.webp" 
+    alt="Wanderung am Donnerstag zum Lichtsee. Distanz: 9,84 km." 
+    description="Rundwanderung zum Lichtsee"
+/>
+Am nächsten Morgen entscheiden wir uns für einen späteren Zug als geplant. Das ausführliche Frühstück mit Karin und Franzi wollen wir uns einfach nicht nehmen lassen. Ein toller Ausklang für eine tolle Woche.
+<br />
+
+---
+
+**Abschließend können wir sagen: Die Gesundheitsreise im Wipptal lohnt sich. Wer ohne Ambitionen zu sportlichen Höchstleistungen Antritt, kommt hier voll auf ihre kosten. Im Parkhotel fühlen wir uns pudelwohl und die nette Gesellschaft hat uns die Woche versüßt (Ganz liebe Grüße!). Eine der angenehmeren Arten sein Bahnnetzwerk zu erweitern und spannende Einblicke in andere Geschäftsfelder zu bekommen. Spoiler: Aufregen können sich alle über die DB ^^.** 
+
+**Gerade sind wir voll in der Planung, um Boote überall in Europa zu besichtigen. Gar nicht so einfach zu koordinieren. Flugreisen zu planen ist jedenfalls ein Krampf. Wo wir überall landen? Seid gespannt...**
+
+---
+
+<br />
+
+### Infos Gesundheitsreisen
+Gesundheitsreisen sind Urlaube mit zertifiziertem Sport- / Gesundheitsprogramm. Welcher Sport, ist ganz individuell. Von Yoga, Pilates bis Walking und Wasserarobik ist alles dabei. Anders als beim Bildungsurlaub könnt ihr euch nicht von der Arbeitgeberin freistellen lassen. Zumindest nicht nach der gesetzlichen Grundlage. Tarifverträge etc. sagen da vielleicht etwas anderes. 
+Wer bei der Bahn arbeitet und Mitglied der EVG ist kann sich alle zwei Jahre (bisher war es jedes Jahr :/ ) durch den Fonds eine solche Reise mit 600€ bezuschussen lassen. Als Mitglied der Bahn-BKK zahlt man je nach Angebot nur 50€, denn diese erstattet die kosten des Kurses. Wenn nicht kommen diese Kosten noch hinzu. Meist um die 150€. Ein Blick auf die Seite der eigenen Krankenkasse lohnt sich. Viele erstatten einen gewissen Betrag dennoch.
+
+Es muss auch nicht immer eine ganze Woche sein. Spannende Wochenendekurse (z.B. City-Prävention) finden sich auch.
+<BlogLink text="Guckt euch mal um, hier findet ihr bestimmt etwas, dass euch gefällt." url="https://www.gesundheitreisen.de/fonds-soziale-sicherung" />

blog/src/pages/blog/[slug].astro

@@ -0,0 +1,24 @@
+---
+import { getCollection, render } from "astro:content";
+import BlogPostLayout from "../../layouts/BlogPostLayout.astro";
+
+export async function getStaticPaths() {
+    const posts = await getCollection('posts');
+
+    return posts.map((post) => ({
+        params: {
+            slug: post.data.slug,
+        },
+        props: {
+            post,
+        },
+    }));
+}
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+
+<BlogPostLayout postData={post.data}>
+    <Content />
+</BlogPostLayout>

blog/src/pages/index.astro

@@ -2,19 +2,19 @@
 import Main from "../layouts/Main.astro";
 import PostPreviewLarge from "../components/PostPreviewLarge.astro";
 import PostGrid from "../components/PostGrid.astro";
+import { getCollection } from "astro:content";
 
-const allPosts: Array<any> = Object.values(
+const allPostsSorted = (await getCollection('posts')).sort(
-  import.meta.glob("./posts/*.md", { eager: true })
+  (postA, postB) =>
+    postB.data.date.getTime() -  postA.data.date.getTime()
 );
 
-const posts = allPosts.slice(0, allPosts.length - 1)
+const [mostRecentPost, ...sortedPosts] = allPostsSorted;
-const mostRecentPost = allPosts.at(allPosts.length - 1);
 ---
 
 <Main title="Startseite">
   <PostPreviewLarge
-    url={mostRecentPost.url}
+    post={mostRecentPost.data}
-    post={mostRecentPost.frontmatter}
   />
- <PostGrid posts={posts} />
+ <PostGrid posts={sortedPosts} />
 </Main>

blog/src/pages/rss.xml.js

@@ -3,7 +3,7 @@ import rss, { pagesGlobToRssItems } from '@astrojs/rss';
 export async function GET(context) {
 
     const posts = Object.values(
-        import.meta.glob("./posts/*.md", { eager: true })
+        import.meta.glob("./blog/*.{md,mdx}", { eager: true })
       );
 
     return rss({
@@ -12,9 +12,10 @@ export async function GET(context) {
         site: context.site,
         items: posts.map(post => ({
             title: post.frontmatter.title,
+            subtitle: post.frontmatter.subtitle,
             pubDate: Date.parse(post.frontmatter.date),
             description: post.frontmatter.description,
-            link: post.url,
+            link: `/blog/${post.frontmatter.slug}`
         })),
         customData: `<language>de-de</language>`,
     });

blog/src/styles/global.css

@@ -1,6 +1,6 @@
 :root {
-    --primary-color: rgb(32, 33, 79);
+    --primary-color: #416A79;
-    --primary-text: rgb(215, 213, 213);
+    --primary-text: #454545;
 }
 
 * {
@@ -8,7 +8,8 @@
     box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
     height: 100%;
     margin: 0;
 }
@@ -38,7 +39,13 @@ body {
 .headline {
     margin-top: 8px;
     margin-bottom: 0;
-    font-weight: bold;
+    font-weight: normal;
+    font-size: 28px;
+}
+
+.headline-link {
+    color: var(--primary-color);
+    text-decoration: none;
 }
 
 .subtitle {
@@ -46,9 +53,15 @@ body {
 }
 
 .description {
-    font-weight: bold;
+    font-size: 1.125rem;
 }
 
 .rounded {
     border-radius: 8px;
 }
+
+.vertical-line {
+    border-right-style: solid;
+    padding-left: 16px;
+    height: 2rem;
+}

blog/src/types/global.ts

@@ -1,11 +0,0 @@
-export interface Post {
-    title: String,
-    subtitle: String, 
-    description: String,
-    date: String, 
-    author: String,
-    image: {
-        path: string,
-        alt: string
-    }
-}