505 lines
8.2 KiB
CSS
505 lines
8.2 KiB
CSS
:root {
|
||
color-scheme: light;
|
||
}
|
||
|
||
:root.dark {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
background: #f5f5f5;
|
||
color: #222;
|
||
}
|
||
|
||
/*
|
||
* Fixe Navbar überlappt den Kartenanfang – 80px
|
||
* Freiraum halten (alle Modi, auch Portrait).
|
||
*/
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: min(700px, calc(100% - 32px));
|
||
padding-top: 80px;
|
||
}
|
||
|
||
.navbar {
|
||
position: fixed;
|
||
top: 16px;
|
||
left: 2%;
|
||
width: 96%;
|
||
box-sizing: border-box;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 15px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
-webkit-backdrop-filter: blur(7px);
|
||
backdrop-filter: blur(7px);
|
||
border-radius: 14px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 12px 40px rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.logo-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 0 1 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
.logo-bar img {
|
||
display: block;
|
||
height: 60px;
|
||
max-width: 100%;
|
||
width: auto;
|
||
}
|
||
|
||
.nav-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
/* Hamburger: nur im Phone-Portrait sichtbar.
|
||
* "button.nav-toggle" ist spezifischer als ".button",
|
||
* sonst überschreibt display: inline-block diese Regel. */
|
||
button.nav-toggle {
|
||
display: none;
|
||
}
|
||
|
||
/* Enger als der globale 6px-Margin der Buttons */
|
||
.navbar .button {
|
||
margin: 0;
|
||
}
|
||
|
||
.lang-menu {
|
||
position: relative;
|
||
}
|
||
|
||
.lang-dropdown {
|
||
display: none;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 100%;
|
||
min-width: 150px;
|
||
margin-top: 6px;
|
||
padding: 6px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.lang-dropdown.open {
|
||
display: block;
|
||
}
|
||
|
||
.lang-dropdown button {
|
||
display: block;
|
||
width: 100%;
|
||
margin: 0;
|
||
padding: 10px 14px;
|
||
border: 0;
|
||
border-radius: 6px;
|
||
background: none;
|
||
text-align: left;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.lang-dropdown button:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.lang-dropdown button.active {
|
||
font-weight: 600;
|
||
background: #f0f8ff;
|
||
}
|
||
|
||
.lang-flag {
|
||
width: 20px;
|
||
height: 13px;
|
||
margin-right: 6px;
|
||
border-radius: 2px;
|
||
vertical-align: -2px;
|
||
}
|
||
|
||
.card {
|
||
box-sizing: border-box;
|
||
width: min(600px, 100%);
|
||
padding: 32px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
-webkit-backdrop-filter: blur(7px);
|
||
backdrop-filter: blur(7px);
|
||
border-radius: 14px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 12px 40px rgba(0, 0, 0, 0.45);
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
p {
|
||
color: #555;
|
||
}
|
||
|
||
button, .button {
|
||
display: inline-block;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
padding: 12px 20px;
|
||
margin: 6px;
|
||
font-size: 16px;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.primary {
|
||
background: #1f73e8;
|
||
color: white;
|
||
}
|
||
|
||
.secondary {
|
||
background: #e9e9e9;
|
||
color: #222;
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.status {
|
||
margin-top: 24px;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.spinner {
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 8px;
|
||
border: 2px solid #ccc;
|
||
border-top-color: #333;
|
||
border-radius: 50%;
|
||
animation: spin 0.7s linear infinite;
|
||
vertical-align: -3px;
|
||
}
|
||
|
||
.download {
|
||
margin-top: 24px;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.room {
|
||
font-family: monospace;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.error {
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
background: #fff0f0;
|
||
color: #900;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 16px;
|
||
text-align: left;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-group textarea {
|
||
min-height: 80px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.form-actions {
|
||
margin-top: 24px;
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.success-message {
|
||
margin-top: 24px;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
background: #f0f8ff;
|
||
color: #0066cc;
|
||
}
|
||
|
||
.adhoc-result {
|
||
margin-top: 24px;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
background: #f0fff4;
|
||
color: #1a7f37;
|
||
}
|
||
|
||
/*
|
||
* scrollIntoView() richtet das Ziel am Viewport-Rand
|
||
* aus, wo die fixe Navbar liegt. scroll-margin-top hält
|
||
* das Ziel unter der Navbar frei.
|
||
*/
|
||
.adhoc-result,
|
||
.success-message {
|
||
scroll-margin-top: 110px;
|
||
}
|
||
|
||
.adhoc-link {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.adhoc-link a {
|
||
font-family: monospace;
|
||
word-break: break-all;
|
||
color: #0066cc;
|
||
}
|
||
|
||
/*
|
||
* Verhindert abgeschnittene Inhalte, wenn die Karte
|
||
* höher als der Viewport ist ("center" schneidet oben ab).
|
||
*/
|
||
@supports (align-items: safe center) {
|
||
body {
|
||
align-items: safe center;
|
||
}
|
||
}
|
||
|
||
/* Sehr schmale Telefone: noch kompakter */
|
||
@media (max-width: 400px) {
|
||
.navbar {
|
||
left: 2%;
|
||
width: 96%;
|
||
padding: 8px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.logo-bar img {
|
||
height: 32px;
|
||
}
|
||
|
||
.nav-actions {
|
||
gap: 6px;
|
||
}
|
||
|
||
.nav-actions .button {
|
||
padding: 8px 12px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
/*
|
||
* Phone: Navbar-Aktionen in beiden Ausrichtungen
|
||
* hinter dem Hamburger-Button als Dropdown anzeigen.
|
||
*
|
||
* Landscape-Phone: Viewport breiter als 600px – kurze
|
||
* Seite (Höhe) und Touch-Eingabe entscheiden.
|
||
*/
|
||
@media (max-width: 600px),
|
||
(orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
|
||
body {
|
||
/*
|
||
* Padding statt margin-bottom an der Karte:
|
||
* Ränder am Scroll-Ende werden vom Scrollbereich
|
||
* nicht erfasst, Padding schon.
|
||
*/
|
||
padding-bottom: 10px;
|
||
/* 10px unten abziehen */
|
||
min-height: calc(100vh - 10px);
|
||
}
|
||
|
||
.navbar {
|
||
top: 8px;
|
||
left: 4%;
|
||
width: 92%;
|
||
padding: 10px;
|
||
}
|
||
|
||
.logo-bar img {
|
||
height: 40px;
|
||
}
|
||
|
||
button, .button {
|
||
padding: 10px 14px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.card {
|
||
padding: 20px;
|
||
}
|
||
|
||
/* Navbar ist hier flacher als am Desktop */
|
||
.adhoc-result,
|
||
.success-message {
|
||
scroll-margin-top: 80px;
|
||
}
|
||
|
||
button.nav-toggle {
|
||
display: inline-flex;
|
||
}
|
||
|
||
/* ".navbar .button" setzt margin: 0 – deshalb
|
||
* höher spezifisch ans Ziel: Button nach rechts */
|
||
.navbar .nav-toggle {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.nav-actions {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
right: 0;
|
||
margin: 8px 0 0;
|
||
padding: 8px;
|
||
min-width: 200px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.nav-actions.open {
|
||
display: flex;
|
||
}
|
||
|
||
/* Alle Panel-Buttons gleich breit, Text zentriert */
|
||
.nav-actions .button {
|
||
text-align: center;
|
||
}
|
||
|
||
/* Sprach-Button liegt im .lang-menu-Wrapper */
|
||
.nav-actions .lang-menu .button {
|
||
display: block;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root.dark .nav-actions {
|
||
background: #242424;
|
||
}
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/*
|
||
* Dark-Theme über die Klasse "dark" am html-Element.
|
||
* JS setzt sie anhand der gespeicherten Wahl oder der
|
||
* System-Einstellung (siehe detectTheme).
|
||
*/
|
||
:root.dark body {
|
||
background: #181818;
|
||
color: #eee;
|
||
}
|
||
|
||
:root.dark .navbar {
|
||
background: rgba(36, 36, 36, 0.72);
|
||
}
|
||
|
||
:root.dark .card {
|
||
background: rgba(36, 36, 36, 0.72);
|
||
}
|
||
|
||
:root.dark .lang-dropdown {
|
||
background: #242424;
|
||
}
|
||
|
||
:root.dark .lang-dropdown button:hover {
|
||
background: #303030;
|
||
}
|
||
|
||
:root.dark .lang-dropdown button.active {
|
||
background: #1a3a5a;
|
||
}
|
||
|
||
:root.dark p {
|
||
color: #bbb;
|
||
}
|
||
|
||
:root.dark .secondary {
|
||
background: #444;
|
||
color: #eee;
|
||
}
|
||
|
||
:root.dark .status,
|
||
:root.dark .download {
|
||
background: #303030;
|
||
}
|
||
|
||
:root.dark .spinner {
|
||
border-color: #555;
|
||
border-top-color: #ddd;
|
||
}
|
||
|
||
:root.dark .form-group label {
|
||
color: #ddd;
|
||
}
|
||
|
||
:root.dark .form-group input,
|
||
:root.dark .form-group textarea {
|
||
background: #303030;
|
||
border-color: #555;
|
||
color: #eee;
|
||
}
|
||
|
||
:root.dark .success-message {
|
||
background: #1a3a5a;
|
||
color: #99ccff;
|
||
}
|
||
|
||
:root.dark .adhoc-result {
|
||
background: #1c3527;
|
||
color: #7ee2a8;
|
||
}
|
||
|
||
:root.dark .logo-bar img {
|
||
filter: url(#logo-dark-tint);
|
||
}
|
||
|
||
:root.dark .adhoc-link a {
|
||
color: #99ccff;
|
||
}
|