Last active
April 5, 2026 19:32
-
-
Save jenssgb/8c4f8734aada70f519084705b852f752 to your computer and use it in GitHub Desktop.
Sommerurlaub 2026 — Familie Schneider
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>🏖️ Sommerurlaub 2026 — Familie Schneider</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: #0f172a; | |
| color: #e2e8f0; | |
| line-height: 1.6; | |
| padding: 20px; | |
| max-width: 960px; | |
| margin: 0 auto; | |
| } | |
| h1 { font-size: 2em; margin-bottom: 8px; color: #38bdf8; } | |
| .subtitle { color: #94a3b8; font-size: 1.1em; margin-bottom: 4px; } | |
| .period { color: #67e8f9; font-size: 1em; margin-bottom: 8px; font-weight: 600; } | |
| .updated { color: #64748b; font-size: 0.85em; margin-bottom: 32px; } | |
| h2 { | |
| font-size: 1.4em; | |
| color: #f0abfc; | |
| margin: 36px 0 16px 0; | |
| border-bottom: 1px solid #334155; | |
| padding-bottom: 8px; | |
| } | |
| .section-icon { margin-right: 8px; } | |
| /* === Quick Facts === */ | |
| .facts-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 16px; | |
| margin: 16px 0 32px 0; | |
| } | |
| .fact-card { | |
| background: #1e293b; | |
| border-radius: 12px; | |
| padding: 20px; | |
| text-align: center; | |
| border-top: 3px solid #38bdf8; | |
| } | |
| .fact-card.warn { border-top-color: #f59e0b; } | |
| .fact-card.hot { border-top-color: #ef4444; } | |
| .fact-number { font-size: 2.2em; font-weight: 700; color: #38bdf8; } | |
| .fact-card.warn .fact-number { color: #f59e0b; } | |
| .fact-card.hot .fact-number { color: #ef4444; } | |
| .fact-label { color: #94a3b8; font-size: 0.9em; margin-top: 4px; } | |
| /* === Calendar === */ | |
| .cal-wrapper { margin: 16px 0 32px 0; } | |
| .cal-month-title { | |
| font-size: 1.2em; | |
| color: #67e8f9; | |
| margin: 20px 0 10px 0; | |
| font-weight: 600; | |
| } | |
| .cal-grid { | |
| display: grid; | |
| grid-template-columns: 40px repeat(7, 1fr); | |
| gap: 2px; | |
| } | |
| .cal-header { | |
| background: #1e293b; | |
| color: #94a3b8; | |
| text-align: center; | |
| padding: 8px 4px; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .cal-kw { | |
| background: transparent; | |
| color: #475569; | |
| font-size: 0.75em; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 4px; | |
| } | |
| .cal-day { | |
| text-align: center; | |
| padding: 10px 4px; | |
| border-radius: 6px; | |
| font-size: 0.95em; | |
| font-weight: 500; | |
| position: relative; | |
| } | |
| .cal-day.empty { background: transparent; } | |
| .cal-day.outside { | |
| background: #0f172a; | |
| color: #334155; | |
| } | |
| .cal-day.normal { | |
| background: #1e293b; | |
| color: #94a3b8; | |
| } | |
| .cal-day.vacation { | |
| background: #065f46; | |
| color: #6ee7b7; | |
| font-weight: 700; | |
| position: relative; | |
| } | |
| .cal-day.vacation.weekend { | |
| background: #064e3b; | |
| color: #34d399; | |
| border: 1px solid #047857; | |
| position: relative; | |
| } | |
| .cal-day.vacation.start { | |
| border-left: 3px solid #10b981; | |
| } | |
| .cal-day.vacation.end { | |
| border-right: 3px solid #10b981; | |
| } | |
| .cal-day.weekend:not(.vacation) { | |
| background: #1e293b; | |
| color: #64748b; | |
| } | |
| .cal-day.today { | |
| border: 2px solid #f59e0b; | |
| } | |
| .ferien-count { | |
| display: block; | |
| font-size: 0.6em; | |
| font-weight: 400; | |
| opacity: 0.8; | |
| margin-top: 1px; | |
| color: #94a3b8; | |
| } | |
| .ferien-count.peak { color: #f87171; font-weight: 600; } | |
| .cal-legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| margin: 12px 0; | |
| font-size: 0.85em; | |
| color: #94a3b8; | |
| } | |
| .cal-legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .legend-swatch { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 4px; | |
| display: inline-block; | |
| } | |
| /* === Overlap Table === */ | |
| .overlap-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 12px 0 8px 0; | |
| font-size: 0.9em; | |
| } | |
| .overlap-table th { | |
| background: #1e293b; | |
| color: #94a3b8; | |
| text-align: left; | |
| padding: 10px 12px; | |
| font-weight: 600; | |
| font-size: 0.85em; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .overlap-table td { | |
| padding: 10px 12px; | |
| border-bottom: 1px solid #1e293b; | |
| } | |
| .overlap-table tr:hover td { background: #1e293b; } | |
| .tag { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| } | |
| .tag-full { background: #7f1d1d; color: #fca5a5; } | |
| .tag-partial { background: #78350f; color: #fcd34d; } | |
| .tag-home { background: #312e81; color: #a5b4fc; } | |
| .overlap-bar-bg { | |
| background: #334155; | |
| border-radius: 4px; | |
| height: 10px; | |
| width: 100%; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .overlap-bar-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| } | |
| .fill-full { background: #ef4444; } | |
| .fill-partial { background: #f59e0b; } | |
| .fill-home { background: #818cf8; } | |
| /* === Alert box === */ | |
| .alert { | |
| background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%); | |
| border-radius: 12px; | |
| padding: 16px 20px; | |
| margin: 20px 0; | |
| border-left: 4px solid #ef4444; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| } | |
| .alert-icon { font-size: 1.5em; flex-shrink: 0; } | |
| .alert-text { color: #fecaca; font-size: 0.95em; } | |
| .alert-text strong { color: #fca5a5; } | |
| /* === Footer === */ | |
| footer { | |
| margin-top: 48px; | |
| padding-top: 16px; | |
| border-top: 1px solid #1e293b; | |
| color: #475569; | |
| font-size: 0.8em; | |
| text-align: center; | |
| } | |
| @media (max-width: 600px) { | |
| body { padding: 12px; } | |
| h1 { font-size: 1.5em; } | |
| .cal-grid { gap: 1px; } | |
| .cal-day { padding: 8px 2px; font-size: 0.8em; } | |
| .cal-kw { font-size: 0.65em; } | |
| .facts-grid { grid-template-columns: repeat(2, 1fr); } | |
| .overlap-table { font-size: 0.8em; } | |
| .overlap-table td, .overlap-table th { padding: 8px 6px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🏖️ Sommerurlaub 2026</h1> | |
| <p class="subtitle">Familie Schneider — Jens, Chantal, Lilly & Carly</p> | |
| <p class="period">📅 20. Juli – 7. August 2026</p> | |
| <p class="updated">Stand: 05. April 2026</p> | |
| <!-- ===== QUICK FACTS ===== --> | |
| <h2><span class="section-icon">⚡</span>Auf einen Blick</h2> | |
| <div class="facts-grid"> | |
| <div class="fact-card" id="countdown-card"> | |
| <div class="fact-number" id="countdown">106</div> | |
| <div class="fact-label">Tage bis zur Abreise</div> | |
| </div> | |
| <div class="fact-card"> | |
| <div class="fact-number">19</div> | |
| <div class="fact-label">Urlaubstage (inkl. An-/Abreise)</div> | |
| </div> | |
| <div class="fact-card warn"> | |
| <div class="fact-number">🗓️ 19</div> | |
| <div class="fact-label">Nächte (Mo 20.07. – Fr 07.08.)</div> | |
| </div> | |
| <div class="fact-card hot"> | |
| <div class="fact-number">16/16</div> | |
| <div class="fact-label">Bundesländer mit Ferien<br><small style="color:#fca5a5">am 3.–7. Aug.</small></div> | |
| </div> | |
| </div> | |
| <!-- ===== KALENDER ===== --> | |
| <h2><span class="section-icon">📅</span>Kalender</h2> | |
| <div class="cal-legend"> | |
| <div class="cal-legend-item"><span class="legend-swatch" style="background:#065f46"></span> Urlaub (Werktag)</div> | |
| <div class="cal-legend-item"><span class="legend-swatch" style="background:#064e3b;border:1px solid #047857"></span> Urlaub (Wochenende)</div> | |
| <div class="cal-legend-item"><span class="legend-swatch" style="background:#1e293b"></span> Normal</div> | |
| <div class="cal-legend-item"><span class="legend-swatch" style="background:#0f172a;border:1px solid #334155"></span> Außerhalb</div> | |
| <div class="cal-legend-item"><span style="font-size:0.75em;color:#94a3b8">14/16</span> = Bundesländer mit Ferien</div> | |
| </div> | |
| <div class="cal-wrapper"> | |
| <!-- JULI 2026 --> | |
| <div class="cal-month-title">Juli 2026</div> | |
| <div class="cal-grid"> | |
| <!-- Header --> | |
| <div class="cal-header"></div> | |
| <div class="cal-header">Mo</div> | |
| <div class="cal-header">Di</div> | |
| <div class="cal-header">Mi</div> | |
| <div class="cal-header">Do</div> | |
| <div class="cal-header">Fr</div> | |
| <div class="cal-header">Sa</div> | |
| <div class="cal-header">So</div> | |
| <!-- KW 27: 29.06-05.07 → Juli starts Wed --> | |
| <div class="cal-kw">KW27</div> | |
| <div class="cal-day outside"></div> | |
| <div class="cal-day outside"></div> | |
| <div class="cal-day normal">1</div> | |
| <div class="cal-day normal">2</div> | |
| <div class="cal-day normal">3</div> | |
| <div class="cal-day weekend">4</div> | |
| <div class="cal-day weekend">5</div> | |
| <!-- KW 28: 06-12 --> | |
| <div class="cal-kw">KW28</div> | |
| <div class="cal-day normal">6</div> | |
| <div class="cal-day normal">7</div> | |
| <div class="cal-day normal">8</div> | |
| <div class="cal-day normal">9</div> | |
| <div class="cal-day normal">10</div> | |
| <div class="cal-day weekend">11</div> | |
| <div class="cal-day weekend">12</div> | |
| <!-- KW 29: 13-19 --> | |
| <div class="cal-kw">KW29</div> | |
| <div class="cal-day normal">13</div> | |
| <div class="cal-day normal">14</div> | |
| <div class="cal-day normal">15</div> | |
| <div class="cal-day normal">16</div> | |
| <div class="cal-day normal">17</div> | |
| <div class="cal-day weekend">18</div> | |
| <div class="cal-day weekend">19</div> | |
| <!-- KW 30: 20-26 → Urlaub ab 20. --> | |
| <div class="cal-kw">KW30</div> | |
| <div class="cal-day vacation start">20<span class="ferien-count">14/16</span></div> | |
| <div class="cal-day vacation">21<span class="ferien-count">14/16</span></div> | |
| <div class="cal-day vacation">22<span class="ferien-count">14/16</span></div> | |
| <div class="cal-day vacation">23<span class="ferien-count">14/16</span></div> | |
| <div class="cal-day vacation">24<span class="ferien-count">14/16</span></div> | |
| <div class="cal-day vacation weekend">25<span class="ferien-count">14/16</span></div> | |
| <div class="cal-day vacation weekend">26<span class="ferien-count">14/16</span></div> | |
| <!-- KW 31: 27-31 (+1-2 Aug) --> | |
| <div class="cal-kw">KW31</div> | |
| <div class="cal-day vacation">27<span class="ferien-count">14/16</span></div> | |
| <div class="cal-day vacation">28<span class="ferien-count">14/16</span></div> | |
| <div class="cal-day vacation">29<span class="ferien-count">14/16</span></div> | |
| <div class="cal-day vacation">30<span class="ferien-count">15/16</span></div> | |
| <div class="cal-day vacation">31<span class="ferien-count">15/16</span></div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day empty"></div> | |
| </div> | |
| <!-- AUGUST 2026 --> | |
| <div class="cal-month-title">August 2026</div> | |
| <div class="cal-grid"> | |
| <!-- Header --> | |
| <div class="cal-header"></div> | |
| <div class="cal-header">Mo</div> | |
| <div class="cal-header">Di</div> | |
| <div class="cal-header">Mi</div> | |
| <div class="cal-header">Do</div> | |
| <div class="cal-header">Fr</div> | |
| <div class="cal-header">Sa</div> | |
| <div class="cal-header">So</div> | |
| <!-- KW 31 cont: 1-2 Aug (Sa+So) --> | |
| <div class="cal-kw">KW31</div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day vacation weekend">1<span class="ferien-count">15/16</span></div> | |
| <div class="cal-day vacation weekend">2<span class="ferien-count">15/16</span></div> | |
| <!-- KW 32: 3-9 → Urlaub bis 7. --> | |
| <div class="cal-kw">KW32</div> | |
| <div class="cal-day vacation">3<span class="ferien-count peak">16/16</span></div> | |
| <div class="cal-day vacation">4<span class="ferien-count peak">16/16</span></div> | |
| <div class="cal-day vacation">5<span class="ferien-count peak">16/16</span></div> | |
| <div class="cal-day vacation">6<span class="ferien-count peak">16/16</span></div> | |
| <div class="cal-day vacation end">7<span class="ferien-count peak">16/16</span></div> | |
| <div class="cal-day weekend">8</div> | |
| <div class="cal-day weekend">9</div> | |
| <!-- KW 33: 10-16 --> | |
| <div class="cal-kw">KW33</div> | |
| <div class="cal-day normal">10</div> | |
| <div class="cal-day normal">11</div> | |
| <div class="cal-day normal">12</div> | |
| <div class="cal-day normal">13</div> | |
| <div class="cal-day normal">14</div> | |
| <div class="cal-day weekend">15</div> | |
| <div class="cal-day weekend">16</div> | |
| <!-- KW 34: 17-23 --> | |
| <div class="cal-kw">KW34</div> | |
| <div class="cal-day normal">17</div> | |
| <div class="cal-day normal">18</div> | |
| <div class="cal-day normal">19</div> | |
| <div class="cal-day normal">20</div> | |
| <div class="cal-day normal">21</div> | |
| <div class="cal-day weekend">22</div> | |
| <div class="cal-day weekend">23</div> | |
| <!-- KW 35: 24-30 --> | |
| <div class="cal-kw">KW35</div> | |
| <div class="cal-day normal">24</div> | |
| <div class="cal-day normal">25</div> | |
| <div class="cal-day normal">26</div> | |
| <div class="cal-day normal">27</div> | |
| <div class="cal-day normal">28</div> | |
| <div class="cal-day weekend">29</div> | |
| <div class="cal-day weekend">30</div> | |
| <!-- KW 36: 31 --> | |
| <div class="cal-kw">KW36</div> | |
| <div class="cal-day normal">31</div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day empty"></div> | |
| <div class="cal-day empty"></div> | |
| </div> | |
| </div> | |
| <!-- ===== FERIENÜBERLAPPUNG ===== --> | |
| <h2><span class="section-icon">🏫</span>Ferienüberlappung (20.07. – 07.08.)</h2> | |
| <div class="alert"> | |
| <div class="alert-icon">🔥</div> | |
| <div class="alert-text"> | |
| <strong>Achtung Hochsaison:</strong> Ab dem <strong>3. August</strong> starten auch Bayern als letztes Bundesland in die Ferien — damit haben vom 3.–7. August erstmals <strong>alle 16 Bundesländer gleichzeitig frei</strong>. Genau eure letzten 5 Urlaubstage! | |
| </div> | |
| </div> | |
| <table class="overlap-table"> | |
| <thead> | |
| <tr> | |
| <th>Bundesland</th> | |
| <th>Sommerferien</th> | |
| <th>Überlappung</th> | |
| <th style="width:120px">Anteil</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>🏠 <strong>NRW</strong></td> | |
| <td>20.07. – 01.09.</td> | |
| <td><span class="tag tag-home">HEIMAT — VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-home" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Berlin</td> | |
| <td>09.07. – 22.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Brandenburg</td> | |
| <td>09.07. – 22.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Bremen</td> | |
| <td>02.07. – 12.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Hamburg</td> | |
| <td>09.07. – 19.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Hessen</td> | |
| <td>29.06. – 07.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Meckl.-Vorpommern</td> | |
| <td>13.07. – 22.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Niedersachsen</td> | |
| <td>02.07. – 12.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Rheinland-Pfalz</td> | |
| <td>29.06. – 07.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Saarland</td> | |
| <td>29.06. – 07.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Sachsen</td> | |
| <td>04.07. – 14.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Sachsen-Anhalt</td> | |
| <td>04.07. – 14.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Schleswig-Holstein</td> | |
| <td>04.07. – 15.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Thüringen</td> | |
| <td>04.07. – 14.08.</td> | |
| <td><span class="tag tag-full">VOLL</span></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-full" style="width:100%"></br></div></td> | |
| </tr> | |
| <tr> | |
| <td>Baden-Württemberg</td> | |
| <td>30.07. – 12.09.</td> | |
| <td><span class="tag tag-partial">TEIL — 9 Tage</span> <small style="color:#94a3b8">(ab 30.07.)</small></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-partial" style="width:47%"></div></div></td> | |
| </tr> | |
| <tr> | |
| <td>Bayern</td> | |
| <td>03.08. – 14.09.</td> | |
| <td><span class="tag tag-partial">TEIL — 5 Tage</span> <small style="color:#94a3b8">(ab 03.08.)</small></td> | |
| <td><div class="overlap-bar-bg"><div class="overlap-bar-fill fill-partial" style="width:26%"></div></div></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <!-- ===== WARUM TEURER ALS 2025? ===== --> | |
| <h2><span class="section-icon">📊</span>Warum teurer als 2025?</h2> | |
| <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:16px 0"> | |
| <div style="background:#1e293b;border-radius:12px;padding:20px;border-left:4px solid #f59e0b"> | |
| <div style="font-size:1.1em;font-weight:700;color:#fbbf24;margin-bottom:12px">⚖️ Feriendichte im Vergleich</div> | |
| <div style="display:flex;justify-content:space-between;margin-bottom:16px"> | |
| <div style="text-align:center;flex:1"> | |
| <div style="font-size:2em;font-weight:700;color:#94a3b8">13,3</div> | |
| <div style="font-size:.75em;color:#64748b">⌀ Bundesländer 2025</div> | |
| </div> | |
| <div style="text-align:center;padding-top:12px;color:#475569;font-size:1.5em">→</div> | |
| <div style="text-align:center;flex:1"> | |
| <div style="font-size:2em;font-weight:700;color:#f87171">14,7</div> | |
| <div style="font-size:.75em;color:#64748b">⌀ Bundesländer 2026</div> | |
| </div> | |
| </div> | |
| <div style="font-size:.8em;color:#94a3b8;line-height:1.5"> | |
| <div style="margin-bottom:4px">📅 <strong>2025:</strong> Erste Woche nur 9/16 → Quasi-Nebensaison</div> | |
| <div>📅 <strong>2026:</strong> Ab Tag 1 sofort 14/16 → Durchgehend Hochsaison</div> | |
| </div> | |
| <div style="margin-top:12px;padding:8px 12px;background:#7f1d1d;border-radius:6px;font-size:.8em;color:#fca5a5;text-align:center"> | |
| +10% mehr Feriendichte = deutlich höhere Nachfrage & Preise | |
| </div> | |
| </div> | |
| <div style="background:#1e293b;border-radius:12px;padding:20px;border-left:4px solid #818cf8"> | |
| <div style="font-size:1.1em;font-weight:700;color:#a5b4fc;margin-bottom:12px">💰 Referenz Sommer 2025</div> | |
| <div style="margin-bottom:12px"> | |
| <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #334155"> | |
| <span style="font-size:.85em">🏕️ Falkensteiner Zadar</span> | |
| <span style="font-weight:700;color:#4ade80">€2.700</span> | |
| </div> | |
| <div style="font-size:.7em;color:#64748b;padding:2px 0 6px">1 Woche · Mobile Home · Frühstück</div> | |
| <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #334155"> | |
| <span style="font-size:.85em">🏨 Kinderhotel Bär, Serfaus</span> | |
| <span style="font-weight:700;color:#f87171">€5.700</span> | |
| </div> | |
| <div style="font-size:.7em;color:#64748b;padding:2px 0 6px">1 Woche · All-Inclusive Kinderhotel</div> | |
| </div> | |
| <div style="display:flex;justify-content:space-between;padding:10px 12px;background:#0f172a;border-radius:6px;font-weight:700"> | |
| <span>Gesamt 2025 (2 Wochen)</span> | |
| <span style="color:#fbbf24;font-size:1.1em">€8.400</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ===== REGIONEN & GEHEIMTIPPS ===== --> | |
| <h2><span class="section-icon">🗺️</span>Regionen & Geheimtipps</h2> | |
| <style> | |
| .regions-wrapper{margin:16px 0} | |
| .group-title{font-size:1.05em;color:#f0abfc;margin:16px 0 8px 0;font-weight:700;border-bottom:1px solid #334155;padding-bottom:6px} | |
| .region-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:8px 0 14px 0} | |
| .region-card{background:#1e293b;border-radius:10px;padding:12px;border-top:3px solid #334155;transition:border-color .15s;min-height:auto} | |
| .region-card:hover{border-color:#38bdf8} | |
| .region-head{display:flex;align-items:center;gap:8px;margin-bottom:8px} | |
| .region-flag{font-size:1.3em} | |
| .region-name{font-weight:700;font-size:1em;flex:1} | |
| .region-type{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.72em;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap} | |
| .type-geheimtipp{background:#065f46;color:#6ee7b7} | |
| .type-klassiker{background:#1e3a5f;color:#7dd3fc} | |
| .type-bewaehrt{background:#312e81;color:#a5b4fc} | |
| .type-kombi{background:#f97316;color:#fff} | |
| .region-desc{font-size:.78em;color:#94a3b8;line-height:1.35;margin-bottom:8px;max-height:3.2em;overflow:hidden} | |
| .region-facts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} | |
| .region-fact{font-size:.72em;padding:3px 8px;border-radius:4px;background:#0f172a;color:#cbd5e1} | |
| .price-1{background:#065f46;color:#6ee7b7} | |
| .price-2{background:#78350f;color:#fcd34d} | |
| .price-3{background:#7f1d1d;color:#fca5a5} | |
| .region-status{font-size:.72em;padding:3px 8px;border-radius:4px;font-weight:600} | |
| .status-unchecked{background:rgba(139,143,163,.12);color:#8b8fa3} | |
| .status-research{background:rgba(245,158,11,.12);color:#f59e0b} | |
| .status-fav{background:rgba(52,211,153,.12);color:#34d399} | |
| .region-stars{color:#fbbf24;font-size:.85em;letter-spacing:1px} | |
| @media (max-width:600px){.region-grid{grid-template-columns:1fr}.region-card{padding:10px}.group-title{font-size:1em}} | |
| </style> | |
| <div class="regions-wrapper"> | |
| <div class="group-title">🏖️ Bewährte Klassiker</div> | |
| <div class="region-grid"> | |
| <div class="region-card" style="border-top-color:#818cf8"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇭🇷</span> | |
| <span class="region-name">Kroatien — Istrien/Dalmatien</span> | |
| <span class="region-type type-bewaehrt">Bewährt</span> | |
| </div> | |
| <div class="region-desc">Letztes Jahr Falkensteiner Zadar — bewährt, aber 2026 teurer wegen Feriendichte. Valamar-Resorts, tolle Kinder-Infrastruktur.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">🚗 ~10h Auto</span> | |
| <span class="region-fact price-3">€€€</span> | |
| <span class="region-fact">🏖️ Kies + Sand</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-research">📋 In Recherche</span> | |
| </div> | |
| <div class="region-card" style="border-top-color:#7dd3fc"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇸🇮</span> | |
| <span class="region-name">Slowenien — Portorož/Piran</span> | |
| <span class="region-type type-klassiker">Klassiker</span> | |
| </div> | |
| <div class="region-desc">Kürzeste Anreise aller Optionen! Kombination Strand + Ljubljana + Bleder See. Nur 46km Küste = eng in Hochsaison.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">🚗 ~8h Auto</span> | |
| <span class="region-fact price-2">€€</span> | |
| <span class="region-fact">🏖️ Sand (Portorož)</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| <div class="region-card" style="border-top-color:#7dd3fc"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇬🇷</span> | |
| <span class="region-name">Chalkidiki — Kassandra</span> | |
| <span class="region-type type-klassiker">Klassiker</span> | |
| </div> | |
| <div class="region-desc">3 Halbinseln, türkise Buchten, Kassandra = familientauglichste. Ikos Oceania & Kassandra Palace als Top-Resorts. Flach abfallende Strände.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">🚗 ~18h / ✈️ Thessaloniki 2,5h</span> | |
| <span class="region-fact price-2">€€</span> | |
| <span class="region-fact">🏖️ Sand, flach</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| <!-- Neu: Menorca --> | |
| <div class="region-card" style="border-top-color:#38bdf8"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇪🇸</span> | |
| <span class="region-name">Menorca — Balearen (familienfreundlich)</span> | |
| <span class="region-type type-klassiker">Klassiker</span> | |
| </div> | |
| <div class="region-desc">Geschützte Buchten wie Son Bou, Cala Galdana und Binibeca bieten feinen Sand und ruhiges, flach abfallendes Wasser. Familienhotels wie Royal Son Bou Family Club sind explizit auf Kleinkinder ausgelegt — ruhiger als Mallorca.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">✈️ ~2.5h Flug</span> | |
| <span class="region-fact price-2">€€</span> | |
| <span class="region-fact">🏖️ Feinsand, flach</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| <!-- Neu: Algarve --> | |
| <div class="region-card" style="border-top-color:#fbbf24"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇵🇹</span> | |
| <span class="region-name">Algarve — Portugal (Südwest)</span> | |
| <span class="region-type type-klassiker">Klassiker</span> | |
| </div> | |
| <div class="region-desc">Breite Sandstrände, geschützte Lagunen (Ria Formosa) und familienfreundliche Resorts (z. B. Martinhal in Sagres). Gute Infrastruktur, Rettungsschwimmer und viele ruhige Buchten für Kleinkinder.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">✈️ ~3h Flug</span> | |
| <span class="region-fact price-2">€€</span> | |
| <span class="region-fact">🏖️ Feinsand, teils Klippen</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| </div> | |
| <div class="group-title">💎 Geheimtipps</div> | |
| <div class="region-grid"> | |
| <div class="region-card" style="border-top-color:#6ee7b7"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇦🇱</span> | |
| <span class="region-name">Albanien — Ksamil/Saranda</span> | |
| <span class="region-type type-geheimtipp">Geheimtipp</span> | |
| </div> | |
| <div class="region-desc">Türkisblaues Wasser, karibisches Feeling. Preise 40-50% unter Kroatien. Infrastruktur im Aufbau, Ksamil wird voller. Tipp: Saranda statt Ksamil.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">🚗 ~14h / ✈️ Korfu+Fähre</span> | |
| <span class="region-fact price-1">€</span> | |
| <span class="region-fact">🏖️ Sand, flach</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| <div class="region-card" style="border-top-color:#6ee7b7"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇲🇪</span> | |
| <span class="region-name">Montenegro — Budva/Kotor</span> | |
| <span class="region-type type-geheimtipp">Geheimtipp</span> | |
| </div> | |
| <div class="region-desc">Kroatien-Vibes zu halben Preisen. Bucht von Kotor = UNESCO Weltkulturerbe. Jaz Beach bei Familien beliebt. Deutlich günstiger als Kroatien.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">🚗 ~12h Auto</span> | |
| <span class="region-fact price-2">€€</span> | |
| <span class="region-fact">🏖️ Sand + Kies</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| <div class="region-card" style="border-top-color:#6ee7b7"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇮🇹</span> | |
| <span class="region-name">Apulien — Salento</span> | |
| <span class="region-type type-geheimtipp">Geheimtipp</span> | |
| </div> | |
| <div class="region-desc">"Malediven Italiens" — Punta Prosciutto, Marina di Pescoluse: weißer Sand, flach abfallendes Wasser, perfekt für Lilly (5) und Carly (3). Authentisch italienisch.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">🚗 ~14h / ✈️ Bari 2,5h</span> | |
| <span class="region-fact price-2">€€</span> | |
| <span class="region-fact">🏖️ Feinsand, sehr flach</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| <!-- Neu: Korsika --> | |
| <div class="region-card" style="border-top-color:#ef4444"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇫🇷</span> | |
| <span class="region-name">Korsika — Palombaggia & Süd</span> | |
| <span class="region-type type-geheimtipp">Geheimtipp</span> | |
| </div> | |
| <div class="region-desc">Traumstrände wie Palombaggia und Santa Giulia bei Porto-Vecchio bieten weichen Sand und geschützte Buchten. Viele familienfreundliche Campingplätze (z. B. Acqua Dolce) und kurze Transfers ins bergige Inland.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">✈️ ~1.5–2h Flug / 🚗 ~12h+Fähre</span> | |
| <span class="region-fact price-3">€€€</span> | |
| <span class="region-fact">🏖️ Feinsand + Kies, geschützte Buchten</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| </div> | |
| <div class="group-title">🏔️ Strand + Berg Kombis</div> | |
| <div class="region-grid"> | |
| <!-- Neu: Gardasee + Südtirol (Kombi) --> | |
| <div class="region-card" style="border-top-color:#f97316"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇮🇹</span> | |
| <span class="region-name">Kombi: Gardasee (See) + Südtirol (Berge)</span> | |
| <span class="region-type type-kombi">Kombi</span> | |
| </div> | |
| <div class="region-desc">Gardasee (Riva, Bardolino) bietet seichte Ufer, Gardaland & Aquaparks für Kinder; in 2. Woche kurze Fahrt nach Südtirol (Seiser Alm/Bolzano) für leichte Familienwanderungen und ruhige Bergluft. Ideal, wenn ihr Strand und Berge kombinieren möchtet.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">🚗 ~9–10h (Gardasee) + ~2h Transfer</span> | |
| <span class="region-fact price-3">€€€</span> | |
| <span class="region-fact">🏖️ Seestrand/Kies · Bergwege leicht</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| <!-- Neu: Rügen (Ostsee) - kein Flug --> | |
| <div class="region-card" style="border-top-color:#60a5fa"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇩🇪</span> | |
| <span class="region-name">Deutschland — Rügen (Ostsee)</span> | |
| <span class="region-type type-klassiker">Klassiker</span> | |
| </div> | |
| <div class="region-desc">Breite feinsandige Strände (Binz, Sellin), flache Einstiege für Kleinkinder und viele Familienattraktionen (Baumwipfelpfad, Karls Erlebnis-Dorf, Rasender Roland). Kein Flug nötig — gut mit Auto/ E-Auto erreichbar.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">🚗 ~7–8h Auto</span> | |
| <span class="region-fact price-2">€€</span> | |
| <span class="region-fact">🏖️ Feinsand, flach</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| <!-- Neu: Türkische Ägäis (Bodrum / Çeşme) - familienfreundlich, nicht Riviera --> | |
| <div class="region-card" style="border-top-color:#f97316"> | |
| <div class="region-head"> | |
| <span class="region-flag">🇹🇷</span> | |
| <span class="region-name">Türkische Ägäis — Bodrum / Çeşme</span> | |
| <span class="region-type type-klassiker">Klassiker</span> | |
| </div> | |
| <div class="region-desc">Çeşme (Ilica) und Buchten um Bodrum (z. B. Camel Beach) bieten oft flache Einstiege und familienfreundliche, kleinere Hotels. Ruhiger als die Antalya-Riviera und oft gutes Preis-Leistungs-Verhältnis.</div> | |
| <div class="region-facts"> | |
| <span class="region-fact">✈️ ~3h Flug</span> | |
| <span class="region-fact price-2">€€</span> | |
| <span class="region-fact">🏖️ Sand + Kies, flach</span> | |
| <span class="region-fact"><span class="region-stars">⭐⭐⭐⭐</span></span> | |
| </div> | |
| <span class="region-status status-unchecked">🔍 Noch nicht geprüft</span> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| 🤖 Gepflegt von Data — zuletzt aktualisiert am 05.04.2026 | |
| </footer> | |
| <script> | |
| // Live countdown | |
| (function() { | |
| const departure = new Date('2026-07-20T00:00:00+02:00'); | |
| function update() { | |
| const now = new Date(); | |
| const diff = Math.ceil((departure - now) / (1000 * 60 * 60 * 24)); | |
| const el = document.getElementById('countdown'); | |
| if (el) el.textContent = diff > 0 ? diff : '🏖️'; | |
| const card = document.getElementById('countdown-card'); | |
| if (card && diff <= 30) { card.classList.add('hot'); card.classList.remove('warn'); } | |
| else if (card && diff <= 60) { card.classList.add('warn'); } | |
| } | |
| update(); | |
| setInterval(update, 60000 * 60); // hourly | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment