Files
web_meineordi/index.html
T

833 lines
47 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Dr. med. Carina Kautsch – Ärztin für Allgemeinmedizin in 1160 Wien. Öffnungszeiten, Leistungen und Kontakt." />
<title>Dr. Carina Kautsch – Allgemeinmedizin Wien</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.stranto.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
/* ─── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; font-size: 18px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* ─── Variables ─────────────────────────────────────────── */
:root { --red: #C8102E; --red-dk: #a00d24; --bg-alt: #f7f7f7; }
/* ─── Animations ────────────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes floatLogo {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* ─── Header / Nav ──────────────────────────────────────── */
header { position: sticky; top: 0; z-index: 100; }
nav { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-logo img { width: auto; }
.nav-links { display: flex; align-items: center; list-style: none; }
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: var(--red); }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; transition: background .2s; }
.nav-phone:hover { background: var(--red-dk); }
/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 26px; height: 2px; background: #333; border-radius: 2px; transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobile-menu { display: none; flex-direction: column; background: #fff; border-top: 1px solid #eee; padding: 16px 24px 20px; gap: 16px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 17px; font-weight: 500; color: #333; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu .nav-phone { padding: 11px 18px; margin-top: 4px; justify-content: center; color: #fff; }
/* ─── Section Helpers ───────────────────────────────────── */
.section-inner { max-width: 1100px; margin: 0 auto; }
/* ─── Hero ──────────────────────────────────────────────── */
#hero { position: relative; overflow: hidden; }
.hero-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 480px; opacity: .04; pointer-events: none; user-select: none; }
.hero-inner { max-width: 1100px; margin: 0 auto; align-items: center; gap: 48px; }
.hero-text { flex: 1; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; transition: all .2s; cursor: pointer; border: none; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dk); transform: translateY(-2px); }
.btn-outline { color: var(--red); border: 2px solid var(--red); }
.btn-outline:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.hero-logo-wrap { flex-shrink: 0; animation: fadeUp .7s .2s ease both; }
.hero-logo-wrap img { width: 280px; animation: floatLogo 4s ease-in-out infinite; }
.hero-cards { max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); animation: fadeUp .7s .35s ease both; }
.hero-card { display: flex; align-items: flex-start; gap: 14px; }
.hero-card-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.hero-card-label { font-weight: 500; text-transform: uppercase; }
.hero-card-value { font-weight: 600; margin-top: 2px; }
/* ─── Öffnungszeiten ────────────────────────────────────── */
.hours-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.hour-card { background: #fff; display: flex; justify-content: space-between; align-items: center; transition: transform .2s, box-shadow .2s; }
.hour-day { font-weight: 600; color: #333; }
.hour-time { font-weight: 600; font-size: 15px; }
.hour-closed { color: #aaa; font-style: italic; }
/* ─── Schließzeiten ─────────────────────────────────────── */
#schliesszeiten .no-closures { border-radius: var(--radius); padding: 28px 28px; border: 2px dashed #ddd; color: #888; font-style: italic; max-width: 480px; }
.closure-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.closure-card { background: #fff; border-radius: var(--radius); padding: 22px 24px; }
.closure-dates { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.closure-reason { font-weight: 600; color: #333; margin-bottom: 12px; }
.closure-deputy-label { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #999; margin-bottom: 6px; }
.closure-deputy-name { font-weight: 600; color: #222; margin-bottom: 2px; }
.closure-deputy-detail { font-size: 15px; color: #555; line-height: 1.5; }
/* ─── Leistungen ────────────────────────────────────────── */
.leistungen-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.leistung-card { background: #fff; transition: transform .2s, box-shadow .2s; }
.leistung-icon { font-size: 2.2rem; }
.leistung-title { font-weight: 700; margin-bottom: 8px; }
.leistung-desc { line-height: 1.55; }
/* ─── Aktuelles ─────────────────────────────────────────── */
.aktuelles-list { flex-direction: column; }
.aktuell-title { font-weight: 700; }
.aktuell-body { font-size: 15px; line-height: 1.6; }
/* ─── Kontakt ────────────────────────────────────────────── */
.kontakt-inner { display: grid; grid-template-columns: 1fr 1fr; }
.kontakt-rows { display: flex; flex-direction: column; }
.kontakt-row { display: flex; align-items: flex-start; gap: 16px; }
.kontakt-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.kontakt-label { font-size: 13px; text-transform: uppercase; margin-bottom: 2px; }
.kontakt-value { font-size: 17px; font-weight: 500; }
.kontakt-value a:hover { color: var(--red); }
.map-wrap { overflow: hidden; }
.map-wrap iframe { width: 100%; border: 0; display: block; }
/* ─── Footer ────────────────────────────────────────────── */
footer { text-align: center; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
footer p { font-size: 14px; }
footer a:hover { color: #fff; }
/* ─── Font Size Toggle ──────────────────────────────────── */
.font-toggle-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.font-toggle-wrap button { background: none; border: 2px solid #ddd; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 700; color: #666; line-height: 1; transition: all .2s; padding: 5px 9px; }
.font-toggle-wrap button.active { border-color: var(--red); color: var(--red); }
.font-toggle-wrap button:first-child { font-size: 14px; }
.font-toggle-wrap button:last-child { font-size: 18px; }
/* Large font overrides */
body.large-font { font-size: 22px; }
body.large-font .nav-links a { font-size: 17px; }
body.large-font .nav-phone { font-size: 17px; }
body.large-font .section-title { font-size: clamp(2.2rem, 4vw, 3.2rem); }
body.large-font .hero-text h1 { font-size: clamp(2.8rem, 5vw, 4rem); }
body.large-font .hero-text p { font-size: 20px; }
body.large-font .leistung-title { font-size: 19px; }
body.large-font .leistung-desc { font-size: 17px; }
body.large-font .aktuell-title { font-size: 19px; }
body.large-font .aktuell-body { font-size: 17px; }
body.large-font .hour-day { font-size: 18px; }
body.large-font .hour-time { font-size: 17px; }
body.large-font .kontakt-value { font-size: 19px; }
body.large-font .hero-card-value { font-size: 17px; }
body.large-font .closure-deputy-detail { font-size: 17px; }
/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
.leistungen-grid { grid-template-columns: repeat(2, 1fr); }
.hero-cards { grid-template-columns: repeat(2, 1fr); }
.kontakt-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.nav-links, nav > .nav-phone { display: none; }
.hamburger { display: flex; }
.hero-inner { flex-direction: column-reverse; text-align: center; }
.hero-logo-wrap img { width: 180px; margin: 0 auto; }
.hero-cta { justify-content: center; }
.hero-text p { margin: 0 auto 32px; }
.hours-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
.hero-cards { grid-template-columns: 1fr; }
.leistungen-grid { grid-template-columns: 1fr; }
section { padding: 52px 16px; }
}
/* ─── 2026 visual refresh ──────────────────────────────── */
:root { --ink: #20302c; --muted: #66736f; --sage: #e9f1ec; --sage-mid: #a8c7b6; --cream: #fbf8f3; --red-soft: #f9e9ec; --line: rgba(32, 48, 44, .11); --shadow: 0 18px 50px rgba(35, 55, 48, .10); --radius: 20px; }
body { color: var(--ink); background: var(--cream); }
section { padding: 96px 24px; scroll-margin-top: 82px; }
section.alt { background: #f3f6f3; }
.section-inner, nav, .hero-inner, .hero-cards { max-width: 1180px; }
.section-title { font-family: 'DM Sans', sans-serif; color: var(--ink); font-size: clamp(2rem, 4vw, 3.15rem); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; margin-bottom: 12px; }
.section-title::before { content: ''; display: block; width: 42px; height: 4px; margin-bottom: 20px; border-radius: 999px; background: var(--red); }
.section-sub { color: var(--muted); font-size: 17px; margin-bottom: 44px; }
header { background: rgba(255, 255, 255, .94); border-bottom: 1px solid rgba(32, 48, 44, .08); box-shadow: 0 8px 30px rgba(35, 55, 48, .06); backdrop-filter: blur(16px); }
nav { height: 82px; }
.nav-logo img { height: 64px; }
.nav-links { gap: 30px; }
.nav-links a { color: #41504c; font-size: 15px; font-weight: 600; }
.nav-phone { border-radius: 999px; padding: 11px 18px; box-shadow: 0 8px 22px rgba(200, 16, 46, .20); }
.nav-phone svg, .btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.font-toggle-wrap button { border-color: var(--line); border-radius: 999px; }
.font-toggle-wrap button.active { background: var(--red-soft); }
#hero { padding: 30px 24px 0; min-height: auto; background:
radial-gradient(circle at 8% 10%, rgba(168, 199, 182, .22), transparent 28%),
var(--cream); }
.hero-watermark { display: none; }
.hero-inner { position: relative; display: block; min-height: 590px; overflow: hidden; border-radius: 30px; background: #f4f1eb; box-shadow: var(--shadow); }
.hero-inner::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(251,248,243,.99) 0%, rgba(251,248,243,.96) 33%, rgba(251,248,243,.58) 51%, rgba(251,248,243,0) 72%); }
.hero-visual { position: absolute; inset: 0; margin: 0; }
.hero-visual picture { display: block; width: 100%; height: 100%; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-text { position: relative; z-index: 2; width: 55%; padding: 84px 0 72px 64px; animation: fadeUp .7s ease both; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--red); font-size: 13px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 20px; }
.eyebrow::before { content: ''; width: 26px; height: 2px; background: currentColor; }
.hero-text h1 { max-width: 620px; font-family: 'DM Sans', sans-serif; font-size: clamp(2.8rem, 5.3vw, 4.35rem); font-weight: 600; line-height: 1.02; letter-spacing: -.055em; color: var(--ink); margin-bottom: 24px; }
.hero-text h1 span { color: var(--red); }
.hero-text p { max-width: 510px; color: #52615c; font-size: 18px; line-height: 1.65; margin-bottom: 32px; }
.btn { min-height: 52px; padding: 13px 22px; border-radius: 999px; }
.btn-primary { box-shadow: 0 10px 26px rgba(200,16,46,.20); }
.btn-outline { background: rgba(255,255,255,.72); border-color: rgba(200,16,46,.38); }
.hero-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; color: #4f605a; font-size: 14px; font-weight: 600; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 18px; height: 18px; color: #668f79; fill: none; stroke: currentColor; stroke-width: 2; }
.hero-cards { position: relative; z-index: 3; margin: -34px auto 0; padding: 0 26px; gap: 0; border-radius: 20px; background: #fff; box-shadow: 0 16px 46px rgba(35,55,48,.12); }
.hero-card { min-width: 0; padding: 24px 22px; background: #fff; border-radius: 0; border-right: 1px solid var(--line); }
.hero-card:last-child { border-right: 0; }
.hero-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--sage); color: #527b65; }
.hero-card-icon svg, .leistung-icon svg, .kontakt-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-card-label { color: #87918e; font-size: 12px; letter-spacing: .08em; }
.hero-card-value { color: var(--ink); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
#oeffnungszeiten { padding-top: 110px; }
.hours-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 28px; align-items: stretch; }
.hours-grid { max-width: none; gap: 12px; }
.hour-card { border: 1px solid var(--line); border-left: 0; border-radius: 14px; box-shadow: none; padding: 17px 20px; }
.hour-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(35,55,48,.08); }
.hour-time { color: var(--red); }
.hours-note { padding: 34px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.hours-note .eyebrow { color: #d9b6bc; margin-bottom: 16px; }
.hours-note h3 { font-size: 1.7rem; line-height: 1.2; letter-spacing: -.025em; margin-bottom: 16px; }
.hours-note p { color: #d9e0dd; font-size: 16px; margin-bottom: 26px; }
.hours-note .btn { background: #fff; color: var(--ink); }
#schliesszeiten { background: var(--cream); }
#schliesszeiten .no-closures { border-color: var(--sage-mid); background: rgba(255,255,255,.62); }
.closure-card { border: 1px solid var(--line); border-top: 4px solid var(--red); box-shadow: 0 12px 34px rgba(35,55,48,.08); }
.closure-dates { font-family: 'DM Sans', sans-serif; color: var(--red); }
.leistungen-grid { gap: 18px; }
.leistung-card { position: relative; overflow: hidden; min-height: 225px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.leistung-card::after { content: ''; position: absolute; right: -34px; bottom: -48px; width: 110px; height: 110px; border-radius: 50%; background: var(--sage); transition: transform .3s ease; }
.leistung-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(35,55,48,.10); }
.leistung-card:hover::after { transform: scale(1.22); }
.leistung-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 22px; border-radius: 15px; background: var(--red-soft); color: var(--red); }
.leistung-title { position: relative; z-index: 1; color: var(--ink); font-size: 18px; }
.leistung-desc { position: relative; z-index: 1; color: var(--muted); font-size: 15px; }
#aktuelles { background: var(--cream); }
.aktuelles-list { display: grid; grid-template-columns: repeat(3, 1fr); max-width: none; gap: 18px; }
.aktuell-item { padding: 30px; border: 1px solid var(--line); border-left: 1px solid var(--line); border-top: 4px solid var(--sage-mid); border-radius: var(--radius); box-shadow: none; background: #fff; }
.aktuell-title { color: var(--ink); font-size: 18px; margin-bottom: 14px; }
.aktuell-body { color: var(--muted); }
.kontakt-inner { gap: 28px; align-items: stretch; }
.kontakt-rows { padding: 34px; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.kontakt-row { padding: 19px 0; border-bottom: 1px solid var(--line); }
.kontakt-row:first-child { padding-top: 0; }
.kontakt-row:last-child { padding-bottom: 0; border-bottom: 0; }
.kontakt-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--sage); color: #527b65; }
.kontakt-label { color: #87918e; letter-spacing: .08em; }
.kontakt-value { color: var(--ink); }
.map-wrap { border-radius: var(--radius); box-shadow: 0 14px 36px rgba(35,55,48,.10); }
.map-wrap iframe { height: 100%; min-height: 410px; }
footer { padding: 50px 24px; background: #21332e; color: #bfd0c8; }
footer img { display: block; box-sizing: content-box; height: 60px; width: auto; padding: 12px 18px; border-radius: 12px; background: #fff; filter: none; opacity: 1; }
footer a { color: #eef4f1; }
@media (max-width: 980px) {
.nav-links { gap: 18px; }
.hero-text { width: 63%; padding-left: 46px; }
.hero-inner::after { background: linear-gradient(90deg, rgba(251,248,243,.99) 0%, rgba(251,248,243,.93) 43%, rgba(251,248,243,.2) 75%); }
.aktuelles-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
section { padding: 72px 20px; }
nav { height: 72px; padding: 0 20px; }
.mobile-menu { padding: 20px; box-shadow: 0 18px 30px rgba(35,55,48,.10); }
#hero { padding: 18px 16px 0; }
.hero-inner { display: flex; flex-direction: column; min-height: 0; text-align: left; }
.hero-inner::after { display: none; }
.hero-text { order: 1; width: 100%; padding: 42px 28px 34px; }
.hero-text h1 { font-size: clamp(2.55rem, 12vw, 3.8rem); }
.hero-text p { margin: 0 0 28px; }
.hero-cta { justify-content: flex-start; }
.hero-visual { position: relative; order: 2; height: 330px; }
.hero-visual img { object-position: 65% center; }
.hero-cards { grid-template-columns: repeat(2, 1fr); margin: 18px auto 0; padding: 0; }
.hero-card:nth-child(2) { border-right: 0; }
.hero-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.hours-layout { grid-template-columns: 1fr; }
.hours-note { padding: 28px; }
.kontakt-inner { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
section { padding: 64px 16px; }
.nav-logo img { height: 56px; }
.hero-text { padding: 36px 22px 30px; }
.hero-cta { display: grid; }
.btn { justify-content: center; }
.hero-trust { gap: 12px; flex-direction: column; }
.hero-visual { height: 260px; }
.hero-cards { grid-template-columns: 1fr; }
.hero-card, .hero-card:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
.hero-card:last-child { border-bottom: 0; }
.hours-grid { grid-template-columns: 1fr; }
.leistungen-grid { grid-template-columns: 1fr; }
.kontakt-rows { padding: 26px; }
.map-wrap iframe { min-height: 330px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Keyboard navigation and patient information */
:focus-visible { outline: 3px solid #C8102E; outline-offset: 4px; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 200; padding: 12px 18px; background: #fff; color: #20302c; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.font-toggle-wrap button { min-width: 44px; min-height: 44px; }
.hero-card-value a { text-decoration: none; }
.hero-card-value a:hover { color: var(--red); }
.first-visit { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; }
.first-visit figure { margin: 0; }
.first-visit img { width: 100%; height: auto; border-radius: var(--radius); }
@media (max-width: 768px) {
.first-visit { grid-template-columns: 1fr; gap: 24px; }
}
.first-visit p { margin-bottom: 16px; }
.first-visit a { text-decoration: underline; text-underline-offset: 3px; }
.first-visit a[href^="tel:"], .first-visit a[href^="mailto:"] { text-decoration: none; }
</style>
</head>
<body>
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
<!-- ═══════════════════════════════════════════════════════════
SCHLIESSZEITEN — edit only this array to manage holidays
═══════════════════════════════════════════════════════════ -->
<script>
const SCHLIESSZEITEN = [
{
start: "2026-07-13",
end: "2026-07-31",
reason: "Urlaub",
deputy: "Dr. Monika Bauer",
deputyAddr: "1160 Wien, Gablenzgasse 118/11/5",
deputyPhone: "01 492 52 52",
deputyHours: "Mo 8–12 Uhr · Di 12–16 Uhr · Mi 8–12 Uhr · Do 15–19 Uhr · Fr 11–15 Uhr"
},
// Add more closures here:
// {
// start: "2027-12-28", // YYYY-MM-DD, including the year
// end: "2028-01-03",
// reason: "Urlaub",
// deputy: "Dr. Vorname Nachname",
// deputyAddr: "1160 Wien, Musterstraße 1",
// deputyPhone: "01 / 000 00 00",
// deputyHours: "Mo–Fr 8–12 Uhr"
// },
];
</script>
<!-- ─── Header ───────────────────────────────────────────── -->
<header>
<nav>
<a class="nav-logo" href="#hero">
<img src="/meineordi.png" alt="meineOrdi Logo" />
</a>
<ul class="nav-links">
<li><a href="#oeffnungszeiten">Öffnungszeiten</a></li>
<li><a href="#leistungen">Leistungen</a></li>
<li><a href="#aktuelles">Aktuelles</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
<div class="font-toggle-wrap" aria-label="Schriftgröße">
<button id="font-normal" title="Normale Schriftgröße" aria-pressed="false">A</button>
<button id="font-large" title="Große Schriftgröße" aria-pressed="false">A+</button>
</div>
<a class="nav-phone" href="tel:+4314931773">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg>
+43 1 493 17 73
</a>
<button class="hamburger" id="hamburger" aria-label="Menü öffnen" aria-expanded="false" aria-controls="mobile-menu">
<span></span><span></span><span></span>
</button>
</nav>
<div class="mobile-menu" id="mobile-menu">
<a href="#oeffnungszeiten">Öffnungszeiten</a>
<a href="#leistungen">Leistungen</a>
<a href="#aktuelles">Aktuelles</a>
<a href="#kontakt">Kontakt</a>
<a class="nav-phone" href="tel:+4314931773"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg> +43 1 493 17 73</a>
<div class="font-toggle-wrap" style="justify-content:center;">
<button id="font-normal-mobile" title="Normale Schriftgröße" aria-pressed="false">A</button>
<button id="font-large-mobile" title="Große Schriftgröße" aria-pressed="false">A+</button>
</div>
</div>
</header>
<main id="main-content" tabindex="-1">
<!-- ─── Hero ─────────────────────────────────────────────── -->
<section id="hero">
<div class="hero-inner">
<figure class="hero-visual">
<picture>
<source type="image/webp" srcset="/praxis-hero-960.webp 960w, /praxis-hero.webp 1916w" sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1228px) calc(100vw - 48px), 1180px" />
<img src="/praxis-hero.png" alt="Stethoskop in einer hellen, freundlichen Ordination" width="1916" height="821" fetchpriority="high" />
</picture>
</figure>
<div class="hero-text">
<div class="eyebrow">Allgemeinmedizin in 1160 Wien</div>
<h1>Medizin, die sich <span>Zeit für Sie</span> nimmt.</h1>
<p>Dr. med. Carina Kautsch und Ihr Team begleiten Sie persönlich, aufmerksam und umfassend – in jeder Lebensphase.</p>
<div class="hero-cta">
<a class="btn btn-primary" href="tel:+4314931773"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg> Jetzt anrufen</a>
<a class="btn btn-outline" href="#oeffnungszeiten">Öffnungszeiten</a>
</div>
<div class="hero-trust" aria-label="Vorteile der Ordination">
<span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg> Persönliche Betreuung</span>
<span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg> Kurze Wege</span>
</div>
</div>
</div>
<div class="hero-cards">
<div class="hero-card">
<div class="hero-card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg></div>
<div>
<div class="hero-card-label">Adresse</div>
<div class="hero-card-value"><a href="https://www.google.com/maps/dir/?api=1&amp;destination=Pfenninggeldgasse+1B%2F3%2C+1160+Wien" aria-label="Route zur Ordination planen">Pfenninggeldgasse 1B/3<br>A-1160 Wien</a></div>
</div>
</div>
<div class="hero-card">
<div class="hero-card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg></div>
<div>
<div class="hero-card-label">Telefon</div>
<div class="hero-card-value"><a href="tel:+4314931773">+43 / 1 / 493 17 73</a></div>
</div>
</div>
<div class="hero-card">
<div class="hero-card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></div>
<div>
<div class="hero-card-label">E-Mail</div>
<div class="hero-card-value"><a href="mailto:info@meineordi.at">info@meineordi.at</a></div>
</div>
</div>
<div class="hero-card">
<div class="hero-card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div>
<div>
<div class="hero-card-label">Heute</div>
<div class="hero-card-value" id="todays-hours">–</div>
</div>
</div>
</div>
</section>
<!-- ─── Öffnungszeiten ────────────────────────────────────── -->
<section id="oeffnungszeiten" class="alt">
<div class="section-inner">
<h2 class="section-title">Öffnungszeiten</h2>
<p class="section-sub">Bitte vereinbaren Sie telefonisch einen Termin.</p>
<div class="hours-layout">
<div class="hours-grid">
<div class="hour-card">
<span class="hour-day">Montag</span>
<span class="hour-time">14:00 – 19:00</span>
</div>
<div class="hour-card">
<span class="hour-day">Dienstag</span>
<span class="hour-time">14:00 – 18:00</span>
</div>
<div class="hour-card">
<span class="hour-day">Mittwoch</span>
<span class="hour-time">07:30 – 11:30</span>
</div>
<div class="hour-card">
<span class="hour-day">Donnerstag</span>
<span class="hour-time">13:00 – 17:00</span>
</div>
<div class="hour-card">
<span class="hour-day">Freitag</span>
<span class="hour-time">09:00 – 12:00</span>
</div>
<div class="hour-card">
<span class="hour-day">Sa / So</span>
<span class="hour-closed">geschlossen</span>
</div>
</div>
<aside class="hours-note">
<div class="eyebrow">Terminvereinbarung</div>
<h3>Wir sind gerne für Sie da.</h3>
<p>Bitte rufen Sie uns vor Ihrem Besuch an. So können wir Ihren Termin gut planen und Wartezeiten möglichst kurz halten.</p>
<a class="btn" href="tel:+4314931773"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg> +43 1 493 17 73</a>
</aside>
</div>
</div>
</section>
<section id="erster-besuch">
<div class="section-inner first-visit">
<div>
<h2 class="section-title">Ihr erster Besuch</h2>
<p>Bitte vereinbaren Sie vor Ihrem Besuch telefonisch einen Termin unter <a href="tel:+4314931773">+43 1 493 17 73</a>.</p>
<p>Bei der Terminvereinbarung können Sie auch Fragen zu Kassenleistungen, zur Aufnahme neuer Patientinnen und Patienten, zu benötigten Unterlagen und zum Zugang zur Ordination klären.</p>
<p>Sie finden uns in der Pfenninggeldgasse 1B/3, 1160 Wien. <a href="https://www.google.com/maps/dir/?api=1&amp;destination=Pfenninggeldgasse+1B%2F3%2C+1160+Wien">Anreise planen</a></p>
</div>
<figure>
<img src="/erster-besuch-abstrakt.webp" alt="" width="1200" height="800" loading="lazy" decoding="async" />
</figure>
</div>
</section>
<!-- ─── Schließzeiten ─────────────────────────────────────── -->
<section id="schliesszeiten">
<div class="section-inner">
<h2 class="section-title">Schließzeiten</h2>
<p class="section-sub">Vertretung während der Abwesenheit</p>
<div id="closure-container"></div>
</div>
</section>
<!-- ─── Leistungen ────────────────────────────────────────── -->
<section id="leistungen" class="alt">
<div class="section-inner">
<h2 class="section-title">Leistungen</h2>
<p class="section-sub">Umfassende allgemeinmedizinische Versorgung für die ganze Familie.</p>
<div class="leistungen-grid">
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3v5a6 6 0 0 0 12 0V3"/><path d="M8 3H4m16 0h-4M12 14v2a4 4 0 0 0 8 0v-1"/><circle cx="20" cy="13" r="2"/></svg></div>
<div class="leistung-title">Allgemeine Untersuchung</div>
<div class="leistung-desc">Vorsorgeuntersuchungen, Gesundencheck und allgemeine Diagnostik.</div>
</div>
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8.5 15.5 7-7a4.24 4.24 0 0 1 6 6l-7 7a4.24 4.24 0 0 1-6-6Z"/><path d="m12 12 6 6"/></svg></div>
<div class="leistung-title">Rezepte & Überweisungen</div>
<div class="leistung-desc">Ausstellung von Rezepten und Überweisungen.</div>
</div>
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2s6 7 6 12a6 6 0 0 1-12 0c0-5 6-12 6-12Z"/><path d="M9 15a3 3 0 0 0 3 2"/></svg></div>
<div class="leistung-title">Laboruntersuchungen</div>
<div class="leistung-desc">Blutabnahme und Befundbesprechung in der Ordination.</div>
</div>
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21l7.8-7.5 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z"/><path d="M3.5 12h4l1.5-3 3 6 2-4 1 1h5.5"/></svg></div>
<div class="leistung-title">Chronische Erkrankungen</div>
<div class="leistung-desc">Langzeitbetreuung bei Diabetes, Bluthochdruck, Schilddrüsenerkrankungen u. v. m.</div>
</div>
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 14.76V5a4 4 0 0 0-8 0v9.76a6 6 0 1 0 8 0Z"/><path d="M10 9v7"/></svg></div>
<div class="leistung-title">Akutbehandlung</div>
<div class="leistung-desc">Behandlung akuter Erkrankungen und Verletzungen, Krankmeldungen.</div>
</div>
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m18 2 4 4M17 7l2-2M3 21l6-6M5 13l6 6M7 11l6 6 6-6-6-6-6 6Z"/></svg></div>
<div class="leistung-title">Impfungen</div>
<div class="leistung-desc">Reise- und Standardimpfungen nach aktuellem Impfplan.</div>
</div>
</div>
</div>
</section>
<!-- ─── Aktuelles ─────────────────────────────────────────── -->
<section id="aktuelles">
<div class="section-inner">
<h2 class="section-title">Aktuelles</h2>
<p class="section-sub">Wichtige Hinweise aus der Ordination</p>
<div class="aktuelles-list">
<div class="aktuell-item">
<div class="aktuell-title">Rezeptbestellung</div>
<div class="aktuell-body">
Rezepte für Dauermedikamente können telefonisch oder per E-Mail bestellt werden.
Bitte geben Sie Name, Geburtsdatum und die gewünschten Medikamente an.
Die Abholung ist nach Vereinbarung möglich.
</div>
</div>
<div class="aktuell-item">
<div class="aktuell-title">Diabetiker-Bedarf</div>
<div class="aktuell-body">
Für die Verordnung von Diabetes-Hilfsmitteln (Teststreifen, Insulinnadeln etc.)
ist ein aktuelles Laborbefund erforderlich. Bitte rechtzeitig einen Termin vereinbaren.
</div>
</div>
<div class="aktuell-item">
<div class="aktuell-title">Krankmeldungen</div>
<div class="aktuell-body">
Krankmeldungen werden nur nach persönlicher Untersuchung ausgestellt.
Telefonische Krankschreibungen sind leider nicht möglich.
</div>
</div>
</div>
</div>
</section>
<!-- ─── Kontakt & Standort ────────────────────────────────── -->
<section id="kontakt" class="alt">
<div class="section-inner">
<h2 class="section-title">Kontakt & Standort</h2>
<p class="section-sub">Wir freuen uns auf Ihren Besuch.</p>
<div class="kontakt-inner">
<div class="kontakt-rows">
<div class="kontakt-row">
<div class="kontakt-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg></div>
<div>
<div class="kontakt-label">Adresse</div>
<div class="kontakt-value">Pfenninggeldgasse 1B/3<br>A-1160 Wien</div>
</div>
</div>
<div class="kontakt-row">
<div class="kontakt-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg></div>
<div>
<div class="kontakt-label">Telefon</div>
<div class="kontakt-value"><a href="tel:+4314931773">+43 / 1 / 493 17 73</a></div>
</div>
</div>
<div class="kontakt-row">
<div class="kontakt-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></div>
<div>
<div class="kontakt-label">E-Mail</div>
<div class="kontakt-value"><a href="mailto:info@meineordi.at">info@meineordi.at</a></div>
</div>
</div>
<div class="kontakt-row">
<div class="kontakt-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="7" r="4"/><path d="M5.5 21a6.5 6.5 0 0 1 13 0M16 13.8v4.7m-2.3-2.35h4.6"/></svg></div>
<div>
<div class="kontakt-label">Ärztin</div>
<div class="kontakt-value">Dr. med. Carina Kautsch<br>Ärztin für Allgemeinmedizin</div>
</div>
</div>
</div>
<div class="map-wrap">
<iframe
src="https://maps.google.com/maps?q=Pfenninggeldgasse+1B%2F3,+1160+Wien,+Austria&t=&z=16&ie=UTF8&iwloc=&output=embed"
title="Standort der Ordination"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>
</div>
</section>
<!-- ─── Footer ────────────────────────────────────────────── -->
</main>
<footer>
<div class="footer-inner">
<img src="/meineordi.png" alt="meineOrdi" />
<p>
&copy; <span id="footer-year"></span> Dr. med. Carina Kautsch &nbsp;·&nbsp;
Ärztin für Allgemeinmedizin &nbsp;·&nbsp; 1160 Wien
</p>
<p style="font-size:13px;">
<a href="/impressum.html">Impressum</a> &nbsp;·&nbsp; <a href="/impressum.html#datenschutz">Datenschutz</a>
</p>
</div>
</footer>
<!-- ─── Scripts ───────────────────────────────────────────── -->
<script>
// Hamburger menu
const hamburger = document.getElementById('hamburger');
const mobileMenu = document.getElementById('mobile-menu');
function setMenuOpen(open) {
hamburger.classList.toggle('open', open);
mobileMenu.classList.toggle('open', open);
hamburger.setAttribute('aria-expanded', String(open));
hamburger.setAttribute('aria-label', open ? 'Menü schließen' : 'Menü öffnen');
}
hamburger.addEventListener('click', () => setMenuOpen(hamburger.getAttribute('aria-expanded') !== 'true'));
document.addEventListener('keydown', event => {
if (event.key === 'Escape' && hamburger.getAttribute('aria-expanded') === 'true') {
setMenuOpen(false);
hamburger.focus();
}
});
window.matchMedia('(min-width: 769px)').addEventListener('change', event => {
if (event.matches) setMenuOpen(false);
});
mobileMenu.querySelectorAll('a').forEach(a => {
a.addEventListener('click', () => {
setMenuOpen(false);
const target = document.getElementById(a.hash.slice(1));
if (target && a.pathname === window.location.pathname) {
target.setAttribute('tabindex', '-1');
target.focus({ preventScroll: true });
}
});
});
// Footer year
document.getElementById('footer-year').textContent = new Date().getFullYear();
function viennaDate(now = new Date()) {
const parts = new Intl.DateTimeFormat('en-GB', {
timeZone: 'Europe/Vienna', year: 'numeric', month: '2-digit', day: '2-digit'
}).formatToParts(now);
const value = type => parts.find(part => part.type === type).value;
return `${value('year')}-${value('month')}-${value('day')}`;
}
function isClosureDay(today, closures = SCHLIESSZEITEN) {
return closures.some(c => c.start <= today && today <= c.end);
}
// Austrian national holidays; movable dates are relative to Easter Sunday.
// Reference: https://www.wien.gv.at/inhalt/feiertage
function isPublicHoliday(today) {
if (['01-01', '01-06', '05-01', '08-15', '10-26', '11-01', '12-08', '12-25', '12-26'].includes(today.slice(5))) return true;
const year = Number(today.slice(0, 4));
const a = year % 19, b = Math.floor(year / 100), c = year % 100;
const d = Math.floor(b / 4), e = b % 4;
const f = Math.floor((b + 8) / 25), g = Math.floor((b - f + 1) / 3);
const h = (19 * a + b - d - g + 15) % 30;
const i = Math.floor(c / 4), k = c % 4;
const l = (32 + 2 * e + 2 * i - h - k) % 7;
const m = Math.floor((a + 11 * h + 22 * l) / 451);
const month = Math.floor((h + l - 7 * m + 114) / 31);
const day = (h + l - 7 * m + 114) % 31 + 1;
return [1, 39, 50, 60].some(offset =>
new Date(Date.UTC(year, month - 1, day + offset)).toISOString().slice(0, 10) === today);
}
function formatClosureDates(closure) {
const format = iso => iso.split('-').reverse().join('.');
return `${format(closure.start)} – ${format(closure.end)}`;
}
// Today's hours in hero card
(function() {
const hours = {
1: '14:00 – 19:00',
2: '14:00 – 18:00',
3: '07:30 – 11:30',
4: '13:00 – 17:00',
5: '09:00 – 12:00',
};
function updateTodaysHours() {
const today = viennaDate();
const day = new Date(`${today}T12:00:00Z`).getUTCDay();
const el = document.getElementById('todays-hours');
el.textContent = isClosureDay(today) ? 'Geschlossen – Abwesenheit'
: isPublicHoliday(today) ? 'Geschlossen – Feiertag' : (hours[day] || 'Geschlossen');
}
updateTodaysHours();
setInterval(updateTodaysHours, 60000);
})();
// Render closure cards
function renderClosures() {
const container = document.getElementById('closure-container');
if (!SCHLIESSZEITEN || SCHLIESSZEITEN.length === 0) {
container.innerHTML = '<p class="no-closures">Derzeit keine Schließzeiten geplant.</p>';
return;
}
const cards = SCHLIESSZEITEN.map(c => `
<div class="closure-card">
<div class="closure-dates">${formatClosureDates(c)}</div>
<div class="closure-reason">${c.reason}</div>
<div class="closure-deputy-label">Vertretung</div>
<div class="closure-deputy-name">${c.deputy}</div>
<div class="closure-deputy-detail">
${c.deputyAddr}<br>
Tel: ${c.deputyPhone}<br>
${c.deputyHours}
</div>
</div>
`).join('');
container.innerHTML = `<div class="closure-cards">${cards}</div>`;
}
renderClosures();
// Font size toggle
(function() {
const body = document.body;
const btnNorm = document.getElementById('font-normal');
const btnLrg = document.getElementById('font-large');
const btnNormM = document.getElementById('font-normal-mobile');
const btnLrgM = document.getElementById('font-large-mobile');
function setSize(large) {
body.classList.toggle('large-font', large);
btnNorm.classList.toggle('active', !large);
btnLrg.classList.toggle('active', large);
btnNormM.classList.toggle('active', !large);
btnLrgM.classList.toggle('active', large);
[btnNorm, btnNormM].forEach(button => button.setAttribute('aria-pressed', String(!large)));
[btnLrg, btnLrgM].forEach(button => button.setAttribute('aria-pressed', String(large)));
try { localStorage.setItem('fontSize', large ? 'large' : 'normal'); } catch {}
}
// Apply saved preference
let savedLarge = false;
try { savedLarge = localStorage.getItem('fontSize') === 'large'; } catch {}
setSize(savedLarge);
btnNorm.addEventListener('click', () => setSize(false));
btnLrg.addEventListener('click', () => setSize(true));
btnNormM.addEventListener('click', () => setSize(false));
btnLrgM.addEventListener('click', () => setSize(true));
})();
</script>
</body>
</html>