Modernize practice website design

This commit is contained in:
2026-09-29 13:30:09 +02:00
parent 471f5f70a3
commit 4022e4adb6
4 changed files with 350 additions and 28 deletions
+1
View File
@@ -2,4 +2,5 @@ FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html COPY index.html /usr/share/nginx/html/index.html
COPY impressum.html /usr/share/nginx/html/impressum.html COPY impressum.html /usr/share/nginx/html/impressum.html
COPY logo.png /usr/share/nginx/html/logo.png COPY logo.png /usr/share/nginx/html/logo.png
COPY praxis-hero.png /usr/share/nginx/html/praxis-hero.png
COPY favicon.svg /usr/share/nginx/html/favicon.svg COPY favicon.svg /usr/share/nginx/html/favicon.svg
+59 -2
View File
@@ -262,6 +262,62 @@
@media (max-width: 540px) { @media (max-width: 540px) {
section { padding: 52px 16px; } section { padding: 52px 16px; }
} }
/* ─── 2026 visual refresh ──────────────────────────────── */
:root {
--ink: #20302c;
--muted: #66736f;
--sage: #e9f1ec;
--cream: #fbf8f3;
--red-soft: #f9e9ec;
--line: rgba(32, 48, 44, .11);
--radius: 20px;
}
body { color: var(--ink); background: var(--cream); }
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 { max-width: 1180px; height: 82px; }
.nav-logo img { height: 48px; }
.nav-links a { color: #41504c; font-weight: 600; }
.nav-phone { border-radius: 999px; padding: 11px 18px; box-shadow: 0 8px 22px rgba(200,16,46,.20); }
.nav-phone 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); }
section { padding: 90px 24px; scroll-margin-top: 82px; }
section.alt { background: #f3f6f3; }
.section-inner { max-width: 920px; }
.section-title {
font-family: 'DM Sans', sans-serif;
color: var(--ink);
font-size: clamp(2.2rem, 5vw, 3.3rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.04em;
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; }
.legal-section h3 { font-family: 'DM Sans', sans-serif; color: var(--ink); font-size: 1.25rem; letter-spacing: -.015em; margin-top: 42px; }
.legal-section p, .legal-section li { color: #53615d; line-height: 1.75; }
.legal-section .legal-box { padding: 26px 28px; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(35,55,48,.07); }
.back-link { padding: 8px 14px; margin-bottom: 38px; border-radius: 999px; background: var(--red-soft); }
footer { padding: 50px 24px; background: #21332e; color: #bfd0c8; }
footer img { height: 44px; opacity: .88; }
footer a { color: #eef4f1; }
@media (max-width: 768px) {
nav { height: 72px; padding: 0 20px; }
.mobile-menu { padding: 20px; box-shadow: 0 18px 30px rgba(35,55,48,.10); }
section { padding: 70px 20px; }
}
@media (max-width: 540px) { section { padding: 60px 16px; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; }
}
</style> </style>
</head> </head>
<body> <body>
@@ -283,7 +339,8 @@
<button id="font-large" title="Große Schriftgröße">A+</button> <button id="font-large" title="Große Schriftgröße">A+</button>
</div> </div>
<a class="nav-phone" href="tel:+4314931773"> <a class="nav-phone" href="tel:+4314931773">
📞 +43 1 493 17 73 <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> </a>
<button class="hamburger" id="hamburger" aria-label="Menü öffnen"> <button class="hamburger" id="hamburger" aria-label="Menü öffnen">
<span></span><span></span><span></span> <span></span><span></span><span></span>
@@ -294,7 +351,7 @@
<a href="/#leistungen">Leistungen</a> <a href="/#leistungen">Leistungen</a>
<a href="/#aktuelles">Aktuelles</a> <a href="/#aktuelles">Aktuelles</a>
<a href="/#kontakt">Kontakt</a> <a href="/#kontakt">Kontakt</a>
<a class="nav-phone" href="tel:+4314931773">📞 +43 1 493 17 73</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;"> <div class="font-toggle-wrap" style="justify-content:center;">
<button id="font-normal-mobile" title="Normale Schriftgröße">A</button> <button id="font-normal-mobile" title="Normale Schriftgröße">A</button>
<button id="font-large-mobile" title="Große Schriftgröße">A+</button> <button id="font-large-mobile" title="Große Schriftgröße">A+</button>
+288 -24
View File
@@ -493,6 +493,259 @@
.leistungen-grid { grid-template-columns: 1fr; } .leistungen-grid { grid-template-columns: 1fr; }
section { padding: 52px 16px; } 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> </style>
</head> </head>
<body> <body>
@@ -539,7 +792,8 @@ const SCHLIESSZEITEN = [
<button id="font-large" title="Große Schriftgröße">A+</button> <button id="font-large" title="Große Schriftgröße">A+</button>
</div> </div>
<a class="nav-phone" href="tel:+4314931773"> <a class="nav-phone" href="tel:+4314931773">
📞 +43 1 493 17 73 <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> </a>
<button class="hamburger" id="hamburger" aria-label="Menü öffnen"> <button class="hamburger" id="hamburger" aria-label="Menü öffnen">
<span></span><span></span><span></span> <span></span><span></span><span></span>
@@ -550,7 +804,7 @@ const SCHLIESSZEITEN = [
<a href="#leistungen">Leistungen</a> <a href="#leistungen">Leistungen</a>
<a href="#aktuelles">Aktuelles</a> <a href="#aktuelles">Aktuelles</a>
<a href="#kontakt">Kontakt</a> <a href="#kontakt">Kontakt</a>
<a class="nav-phone" href="tel:+4314931773">📞 +43 1 493 17 73</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;"> <div class="font-toggle-wrap" style="justify-content:center;">
<button id="font-normal-mobile" title="Normale Schriftgröße">A</button> <button id="font-normal-mobile" title="Normale Schriftgröße">A</button>
<button id="font-large-mobile" title="Große Schriftgröße">A+</button> <button id="font-large-mobile" title="Große Schriftgröße">A+</button>
@@ -560,47 +814,49 @@ const SCHLIESSZEITEN = [
<!-- ─── Hero ─────────────────────────────────────────────── --> <!-- ─── Hero ─────────────────────────────────────────────── -->
<section id="hero"> <section id="hero">
<img class="hero-watermark"
src="/logo.png"
alt="" aria-hidden="true" />
<div class="hero-inner"> <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="hero-text">
<h1>Ihre Ärztin für<br><span>Allgemeinmedizin</span><br>in Wien</h1> <div class="eyebrow">Allgemeinmedizin in 1160 Wien</div>
<p>Dr. med. Carina Kautsch – persönliche, umfassende medizinische Betreuung in 1160 Wien.</p> <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"> <div class="hero-cta">
<a class="btn btn-primary" href="tel:+4314931773">📞 Jetzt anrufen</a> <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> <a class="btn btn-outline" href="#oeffnungszeiten">Öffnungszeiten</a>
</div> </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 class="hero-logo-wrap">
<img src="/logo.png" alt="meineOrdi" />
</div> </div>
</div> </div>
<div class="hero-cards"> <div class="hero-cards">
<div class="hero-card"> <div class="hero-card">
<div class="hero-card-icon">📍</div> <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>
<div class="hero-card-label">Adresse</div> <div class="hero-card-label">Adresse</div>
<div class="hero-card-value">Pfenninggeldgasse 1B/3<br>A-1160 Wien</div> <div class="hero-card-value">Pfenninggeldgasse 1B/3<br>A-1160 Wien</div>
</div> </div>
</div> </div>
<div class="hero-card"> <div class="hero-card">
<div class="hero-card-icon">📞</div> <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>
<div class="hero-card-label">Telefon</div> <div class="hero-card-label">Telefon</div>
<div class="hero-card-value">+43 / 1 / 493 17 73</div> <div class="hero-card-value">+43 / 1 / 493 17 73</div>
</div> </div>
</div> </div>
<div class="hero-card"> <div class="hero-card">
<div class="hero-card-icon">✉️</div> <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>
<div class="hero-card-label">E-Mail</div> <div class="hero-card-label">E-Mail</div>
<div class="hero-card-value">info@meineordi.at</div> <div class="hero-card-value">info@meineordi.at</div>
</div> </div>
</div> </div>
<div class="hero-card"> <div class="hero-card">
<div class="hero-card-icon">🕐</div> <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>
<div class="hero-card-label">Heute</div> <div class="hero-card-label">Heute</div>
<div class="hero-card-value" id="todays-hours">–</div> <div class="hero-card-value" id="todays-hours">–</div>
@@ -614,6 +870,7 @@ const SCHLIESSZEITEN = [
<div class="section-inner"> <div class="section-inner">
<h2 class="section-title">Öffnungszeiten</h2> <h2 class="section-title">Öffnungszeiten</h2>
<p class="section-sub">Bitte vereinbaren Sie telefonisch einen Termin.</p> <p class="section-sub">Bitte vereinbaren Sie telefonisch einen Termin.</p>
<div class="hours-layout">
<div class="hours-grid"> <div class="hours-grid">
<div class="hour-card"> <div class="hour-card">
<span class="hour-day">Montag</span> <span class="hour-day">Montag</span>
@@ -640,6 +897,13 @@ const SCHLIESSZEITEN = [
<span class="hour-closed">geschlossen</span> <span class="hour-closed">geschlossen</span>
</div> </div>
</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> </div>
</section> </section>
@@ -659,32 +923,32 @@ const SCHLIESSZEITEN = [
<p class="section-sub">Umfassende allgemeinmedizinische Versorgung für die ganze Familie.</p> <p class="section-sub">Umfassende allgemeinmedizinische Versorgung für die ganze Familie.</p>
<div class="leistungen-grid"> <div class="leistungen-grid">
<div class="leistung-card"> <div class="leistung-card">
<div class="leistung-icon">🩺</div> <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-title">Allgemeine Untersuchung</div>
<div class="leistung-desc">Vorsorgeuntersuchungen, Gesundencheck und allgemeine Diagnostik.</div> <div class="leistung-desc">Vorsorgeuntersuchungen, Gesundencheck und allgemeine Diagnostik.</div>
</div> </div>
<div class="leistung-card"> <div class="leistung-card">
<div class="leistung-icon">💊</div> <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-title">Rezepte & Überweisungen</div>
<div class="leistung-desc">Ausstellung von Rezepten und Überweisungen.</div> <div class="leistung-desc">Ausstellung von Rezepten und Überweisungen.</div>
</div> </div>
<div class="leistung-card"> <div class="leistung-card">
<div class="leistung-icon">🩸</div> <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-title">Laboruntersuchungen</div>
<div class="leistung-desc">Blutabnahme und Befundbesprechung in der Ordination.</div> <div class="leistung-desc">Blutabnahme und Befundbesprechung in der Ordination.</div>
</div> </div>
<div class="leistung-card"> <div class="leistung-card">
<div class="leistung-icon">❤️</div> <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-title">Chronische Erkrankungen</div>
<div class="leistung-desc">Langzeitbetreuung bei Diabetes, Bluthochdruck, Schilddrüsenerkrankungen u. v. m.</div> <div class="leistung-desc">Langzeitbetreuung bei Diabetes, Bluthochdruck, Schilddrüsenerkrankungen u. v. m.</div>
</div> </div>
<div class="leistung-card"> <div class="leistung-card">
<div class="leistung-icon">🌡️</div> <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-title">Akutbehandlung</div>
<div class="leistung-desc">Behandlung akuter Erkrankungen und Verletzungen, Krankmeldungen.</div> <div class="leistung-desc">Behandlung akuter Erkrankungen und Verletzungen, Krankmeldungen.</div>
</div> </div>
<div class="leistung-card"> <div class="leistung-card">
<div class="leistung-icon">💉</div> <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-title">Impfungen</div>
<div class="leistung-desc">Reise- und Standardimpfungen nach aktuellem Impfplan.</div> <div class="leistung-desc">Reise- und Standardimpfungen nach aktuellem Impfplan.</div>
</div> </div>
@@ -732,28 +996,28 @@ const SCHLIESSZEITEN = [
<div class="kontakt-inner"> <div class="kontakt-inner">
<div class="kontakt-rows"> <div class="kontakt-rows">
<div class="kontakt-row"> <div class="kontakt-row">
<div class="kontakt-icon">📍</div> <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>
<div class="kontakt-label">Adresse</div> <div class="kontakt-label">Adresse</div>
<div class="kontakt-value">Pfenninggeldgasse 1B/3<br>A-1160 Wien</div> <div class="kontakt-value">Pfenninggeldgasse 1B/3<br>A-1160 Wien</div>
</div> </div>
</div> </div>
<div class="kontakt-row"> <div class="kontakt-row">
<div class="kontakt-icon">📞</div> <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>
<div class="kontakt-label">Telefon</div> <div class="kontakt-label">Telefon</div>
<div class="kontakt-value"><a href="tel:+4314931773">+43 / 1 / 493 17 73</a></div> <div class="kontakt-value"><a href="tel:+4314931773">+43 / 1 / 493 17 73</a></div>
</div> </div>
</div> </div>
<div class="kontakt-row"> <div class="kontakt-row">
<div class="kontakt-icon">✉️</div> <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>
<div class="kontakt-label">E-Mail</div> <div class="kontakt-label">E-Mail</div>
<div class="kontakt-value"><a href="mailto:info@meineordi.at">info@meineordi.at</a></div> <div class="kontakt-value"><a href="mailto:info@meineordi.at">info@meineordi.at</a></div>
</div> </div>
</div> </div>
<div class="kontakt-row"> <div class="kontakt-row">
<div class="kontakt-icon">👩‍⚕️</div> <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>
<div class="kontakt-label">Ärztin</div> <div class="kontakt-label">Ärztin</div>
<div class="kontakt-value">Dr. med. Carina Kautsch<br>Ärztin für Allgemeinmedizin</div> <div class="kontakt-value">Dr. med. Carina Kautsch<br>Ärztin für Allgemeinmedizin</div>
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB