1164 lines
47 KiB
HTML
1164 lines
47 KiB
HTML
<!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;
|
||
color: #222;
|
||
background: #fff;
|
||
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;
|
||
--shadow: 0 6px 28px rgba(0,0,0,.14);
|
||
--radius: 12px;
|
||
}
|
||
|
||
/* ─── 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;
|
||
background: #fff;
|
||
border-bottom: 1px solid #eee;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,.07);
|
||
}
|
||
nav {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
height: 68px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
}
|
||
.nav-logo img { height: 42px; width: auto; }
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28px;
|
||
list-style: none;
|
||
}
|
||
.nav-links a {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #444;
|
||
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;
|
||
padding: 9px 18px;
|
||
border-radius: 8px;
|
||
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 {
|
||
margin-top: 4px;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* ─── Section Helpers ───────────────────────────────────── */
|
||
section { padding: 72px 24px; }
|
||
section.alt { background: var(--bg-alt); }
|
||
.section-inner {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
}
|
||
.section-title {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: clamp(2rem, 4vw, 2.8rem);
|
||
font-weight: 700;
|
||
color: var(--red);
|
||
margin-bottom: 10px;
|
||
}
|
||
.section-sub {
|
||
font-size: 16px;
|
||
color: #666;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
/* ─── Hero ──────────────────────────────────────────────── */
|
||
#hero {
|
||
padding: 80px 24px 60px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
min-height: 520px;
|
||
}
|
||
.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;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 48px;
|
||
position: relative;
|
||
}
|
||
.hero-text {
|
||
flex: 1;
|
||
animation: fadeUp .7s ease both;
|
||
}
|
||
.hero-text h1 {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: clamp(2.4rem, 5vw, 3.6rem);
|
||
font-weight: 700;
|
||
line-height: 1.15;
|
||
color: #111;
|
||
margin-bottom: 12px;
|
||
}
|
||
.hero-text h1 span { color: var(--red); }
|
||
.hero-text p {
|
||
font-size: 18px;
|
||
color: #555;
|
||
margin-bottom: 32px;
|
||
max-width: 480px;
|
||
}
|
||
.hero-cta {
|
||
display: flex;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 13px 26px;
|
||
border-radius: 9px;
|
||
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 { background: transparent; 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;
|
||
margin: 48px auto 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
animation: fadeUp .7s .35s ease both;
|
||
}
|
||
.hero-card {
|
||
background: var(--bg-alt);
|
||
border-radius: var(--radius);
|
||
padding: 20px 18px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
}
|
||
.hero-card-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
|
||
.hero-card-label {
|
||
font-size: 13px;
|
||
color: #888;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
}
|
||
.hero-card-value {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #222;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ─── Öffnungszeiten ────────────────────────────────────── */
|
||
.hours-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
max-width: 600px;
|
||
}
|
||
.hour-card {
|
||
background: #fff;
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
border-left: 4px solid var(--red);
|
||
padding: 18px 22px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
transition: transform .2s, box-shadow .2s;
|
||
}
|
||
.hour-card:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,.17); }
|
||
.hour-day { font-weight: 600; color: #333; }
|
||
.hour-time { color: var(--red); font-weight: 600; font-size: 15px; }
|
||
.hour-closed { color: #aaa; font-style: italic; }
|
||
|
||
/* ─── Schließzeiten ─────────────────────────────────────── */
|
||
#schliesszeiten .no-closures {
|
||
background: #fff;
|
||
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);
|
||
box-shadow: var(--shadow);
|
||
border-top: 4px solid var(--red);
|
||
padding: 22px 24px;
|
||
}
|
||
.closure-dates {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 1.4rem;
|
||
font-weight: 700;
|
||
color: var(--red);
|
||
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);
|
||
gap: 20px;
|
||
}
|
||
.leistung-card {
|
||
background: #fff;
|
||
border-radius: var(--radius);
|
||
box-shadow: 0 3px 18px rgba(0,0,0,.08);
|
||
padding: 28px 24px;
|
||
transition: transform .2s, box-shadow .2s;
|
||
}
|
||
.leistung-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.13); }
|
||
.leistung-icon { font-size: 2.2rem; margin-bottom: 14px; }
|
||
.leistung-title { font-weight: 700; font-size: 17px; margin-bottom: 8px; color: #222; }
|
||
.leistung-desc { font-size: 15px; color: #666; line-height: 1.55; }
|
||
|
||
/* ─── Aktuelles ─────────────────────────────────────────── */
|
||
.aktuelles-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
max-width: 780px;
|
||
}
|
||
.aktuell-item {
|
||
background: #fff;
|
||
border-radius: var(--radius);
|
||
box-shadow: 0 3px 18px rgba(0,0,0,.08);
|
||
padding: 22px 26px;
|
||
border-left: 4px solid var(--red);
|
||
}
|
||
.aktuell-title { font-weight: 700; color: #222; margin-bottom: 6px; font-size: 17px; }
|
||
.aktuell-body { font-size: 15px; color: #555; line-height: 1.6; }
|
||
|
||
/* ─── Kontakt ────────────────────────────────────────────── */
|
||
.kontakt-inner {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
align-items: start;
|
||
}
|
||
.kontakt-rows { display: flex; flex-direction: column; gap: 18px; }
|
||
.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; color: #999; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
|
||
.kontakt-value { font-size: 17px; font-weight: 500; color: #222; }
|
||
.kontakt-value a:hover { color: var(--red); }
|
||
.map-wrap {
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.map-wrap iframe {
|
||
width: 100%;
|
||
height: 360px;
|
||
border: 0;
|
||
display: block;
|
||
}
|
||
|
||
/* ─── Footer ────────────────────────────────────────────── */
|
||
footer {
|
||
background: #1a1a1a;
|
||
color: #aaa;
|
||
padding: 36px 24px;
|
||
text-align: center;
|
||
}
|
||
.footer-inner {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
footer img { height: 38px; filter: brightness(0) invert(1); opacity: .7; }
|
||
footer p { font-size: 14px; }
|
||
footer a { color: #ccc; }
|
||
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;
|
||
border-radius: 7px;
|
||
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);
|
||
background: #fff0f2;
|
||
}
|
||
.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-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: 48px; }
|
||
.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 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 { height: 44px; filter: brightness(0) invert(1); opacity: .88; }
|
||
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: 42px; }
|
||
.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; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
SCHLIESSZEITEN — edit only this array to manage holidays
|
||
═══════════════════════════════════════════════════════════ -->
|
||
<script>
|
||
const SCHLIESSZEITEN = [
|
||
{
|
||
dates: "13.7. – 31.7.",
|
||
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:
|
||
// {
|
||
// dates: "DD.MM. – DD.MM.",
|
||
// 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="/logo.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">A</button>
|
||
<button id="font-large" title="Große Schriftgröße">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">
|
||
<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">A</button>
|
||
<button id="font-large-mobile" title="Große Schriftgröße">A+</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ─── Hero ─────────────────────────────────────────────── -->
|
||
<section id="hero">
|
||
<div class="hero-inner">
|
||
<figure class="hero-visual">
|
||
<img src="/praxis-hero.png" alt="Stethoskop in einer hellen, freundlichen Ordination" width="1944" height="1024" fetchpriority="high" />
|
||
</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">Pfenninggeldgasse 1B/3<br>A-1160 Wien</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">+43 / 1 / 493 17 73</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">info@meineordi.at</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>
|
||
|
||
<!-- ─── 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 ────────────────────────────────────────────── -->
|
||
<footer>
|
||
<div class="footer-inner">
|
||
<img src="/logo.png" alt="meineOrdi" />
|
||
<p>
|
||
© <span id="footer-year"></span> Dr. med. Carina Kautsch ·
|
||
Ärztin für Allgemeinmedizin · 1160 Wien
|
||
</p>
|
||
<p style="font-size:13px;">
|
||
<a href="/impressum.html">Impressum</a> · <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');
|
||
hamburger.addEventListener('click', () => {
|
||
hamburger.classList.toggle('open');
|
||
mobileMenu.classList.toggle('open');
|
||
});
|
||
mobileMenu.querySelectorAll('a').forEach(a => {
|
||
a.addEventListener('click', () => {
|
||
hamburger.classList.remove('open');
|
||
mobileMenu.classList.remove('open');
|
||
});
|
||
});
|
||
|
||
// Footer year
|
||
document.getElementById('footer-year').textContent = new Date().getFullYear();
|
||
|
||
// 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',
|
||
};
|
||
|
||
// Check if today falls within any defined closure period
|
||
function isClosureDay() {
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
for (const c of SCHLIESSZEITEN) {
|
||
// Parse date strings like "30.3." from "30.3. – 3.4."
|
||
const parts = c.dates.split('–');
|
||
if (parts.length !== 2) continue;
|
||
function parseDate(s) {
|
||
const p = s.trim().replace(/\.$/, '').split('.');
|
||
const d = parseInt(p[0]), m = parseInt(p[1]) - 1;
|
||
let start = new Date(today.getFullYear(), m, d);
|
||
return start;
|
||
}
|
||
const start = parseDate(parts[0]);
|
||
const end = parseDate(parts[1]);
|
||
// Handle year wrap (e.g. 28.12. – 3.1.)
|
||
if (end < start) end.setFullYear(end.getFullYear() + 1);
|
||
if (today >= start && today <= end) return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
const day = new Date().getDay(); // 0=Sun, 1=Mon, …
|
||
const el = document.getElementById('todays-hours');
|
||
el.textContent = isClosureDay() ? 'Geschlossen' : (hours[day] || 'Geschlossen');
|
||
})();
|
||
|
||
// 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">${c.dates}</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);
|
||
localStorage.setItem('fontSize', large ? 'large' : 'normal');
|
||
}
|
||
|
||
// Apply saved preference
|
||
setSize(localStorage.getItem('fontSize') === 'large');
|
||
|
||
btnNorm.addEventListener('click', () => setSize(false));
|
||
btnLrg.addEventListener('click', () => setSize(true));
|
||
btnNormM.addEventListener('click', () => setSize(false));
|
||
btnLrgM.addEventListener('click', () => setSize(true));
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|