@leuffen/themejs1 4.0.3 → 5.0.3

package/_tpl/pages/kontakt-anfahrt-maps-top.de.md

@@ -0,0 +1,61 @@
+---
+description: "\U0001F4CD Finden Sie uns in Freudenstadt-Wittlensweiler! \U0001F697\U0001F6B2\U0001F68C
+  Leichte Anfahrt mit Auto, Fahrrad oder Bus. Barrierefreier Zugang. \U0001F4E7 Kontaktieren
+  Sie uns jetzt!"
+icon: bi bi-phone
+header: '<map class="top" style="--joda-use: map()"></map>'
+lang: de
+layout: article
+order: 99
+permalink: /kontakt
+pid: pages/kontakt-anfahrt
+ptags:
+- nav
+published: true
+skipHead: false
+title: Kontakt & Anfahrt
+type: article
+_schiller_instructions: ""
+---
+## Ihre Hausarztpraxis in Freudenstadt-Wittlensweiler
+{: layout="use: #sec-card-2col; mobile_reverse: no"}
+
+
+{% include el/address.html %}
+
+
+---
+{: layout="use: accordion()" .aside}
+
+### [i class="bi bi-bus-front-fill text-primary"] Anfahrt mit dem Bus
+
+Die Bushaltestelle "Freudenstadt-Wittlensweiler, Kirche" befindet ca. 150 Meter von der Praxis entfernt.
+
+Sie erreichen uns über die lokalen Verkehrslinien. 
+
+Zugang barrierefrei im Erdgeschoss.
+
+
+### [i class="bi bi-car-front-fill text-primary"] Anfahrt mit dem Auto
+
+Parkplätze sind in der Nähe der Praxis vorhanden. 
+
+Zugang barrierefrei im Erdgeschoss.
+
+
+
+## Schreiben Sie uns. Wir melden uns umgehend bei Ihnen.
+{: layout="use: #cta-form"}
+
+
+---
+
+[input type="text"  name="Name" required .mb-3]
+[input type="email" name="E-Mail" .mb-3]
+[input type="tel" name="Telefon" .mb-3]
+
+---
+
+[textarea name="Ihre Nachricht" required .mb-3 style="height: 120px;"]
+[input type="checkbox" name="Datenschutz" label="Ich akzeptiere die Datenschutzbestimmungen" required .mb-3]
+[input type="submit" name="Absenden" value="Absenden" class="btn btn-primary" .my-3]

package/_tpl/pages/kontakt-anfahrt.de.md

@@ -54,5 +54,5 @@ Anfahrtsbeschreibung mit dem Auto
 ---
 
 [textarea name="Ihre Nachricht" required .mb-3 style="height: 120px;"]
-[input type="checkbox" name="Ihre Nachricht" label="Ich akzeptiere die Datenschutzbestimmungen" required .mb-3]
+[input type="checkbox" name="Datenschutz" label="Ich akzeptiere die Datenschutzbestimmungen" required .mb-3]
 [input type="submit" name="Absenden" value="Absenden" class="btn btn-primary" .my-3]

package/_tpl/pages/termin-redirect.de.md

@@ -0,0 +1,21 @@
+---
+description: ""
+icon: bi bi-phone
+lang: de
+layout: article
+order: 80
+permalink: /termin
+pid: pages/termin
+ptags:
+- nav
+published: true
+short_title: Termin vereinbaren
+skipHead: false
+title: Termin vereinbaren
+type: article
+---
+
+<script>
+window.location.href = "{{site.data.general.termin_url}}";
+</script>
+

package/_variables.scss

@@ -13,6 +13,7 @@ $danger:    #bf1c0a !default;
 $warning:   #bf760a !default;
 $dark:      #006837 !default;
 
+$background: rgba(217, 217, 217, 0.24) !default;
 $background-primary:        #b7eaf9 !default;
 $background-accent:         #ddd    !default;
 
@@ -26,8 +27,20 @@ $paragraph-margin-bottom:   1.5rem !default;
 $minibar-text-color:        black !default;
 $minibar-color:             transparent !default;
 
+$section-border-radius:             0 !default;
 $border-radius:             0 !default;
 
+$section-border-color:      #ddd !default;
 
+$text-color: #707070 !default;
 
+$text-footer: $text-color !default;
+$background-footer: $background !default;
+
+
+$background-dark: #000 !default;
+$text-dark: #fff !default;
+$border-color: #999 !default;
+
+$header-text-transform: uppercase !default;
 

package/elements/elements.scss

@@ -1,3 +1,2 @@
 @import "liweco";
-@import "e-card-default/e-card-default";
 @import "e-form/e-form";

package/elements/elements.ts

@@ -1,2 +1 @@
-export * from "./e-card-default/e-card-default";
 export * from "./e-form/e-form";

package/index.scss

@@ -1,3 +1,5 @@
+@import "bootstrap";
+
 @import "sections/defaults";
 @import "sections/sections";
 @import "elements/elements";

package/late.scss

@@ -1,3 +1,4 @@
 /* Very imporant for Pagespeed: Load fonts last */
 @import "themes/_vendor/font-bootstrap-icons";
 @import "themes/_vendor/font-ubuntu";
+@import "themes/_vendor/font-garamond";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leuffen/themejs1",
-  "version": "4.0.3",
+  "version": "5.0.3",
 
   "description": "",
   "license": "proprietary",
@@ -27,10 +27,10 @@
   ],
   "author": "",
   "dependencies": {
-    "@leuffen/jodastyle": "^1.0.8",
+    "@leuffen/jodastyle": "^3.0.2",
     "@kasimirjs/embed": "^1.0.8",
-    "@leuffen/isl-base": "^1.0.5",
-    "@leuffen/liscom": "^1.0.2",
+    "@leuffen/isl-base": "^2.0.2",
+    "@leuffen/liscom": "^2.0.1",
     "@leuffen/liweco-base": "^2.0.2",
     "bootstrap": "^5.3.0"
   },

package/sections/_defaults.scss

@@ -1,15 +1,21 @@
 :root {
-    --t-background: #f5f5f5;
-    --t-background-footer: #fff;
+    --t-background: #{$background};
+    --t-background-footer: #{$background-footer};
     --t-section-background: transparent;
-    --t-section-background-accent: #e7e7eb;
+    --t-section-background-accent: #{$background-accent};
     --t-section-background-primary: #D6EED9;
+
+    --t-section-border-color: #{$section-border-color};
+    --t-section-border-radius: #{$section-border-radius};
+
     --t-text-background: #fff;
     --t-text-color: #707070;
     --t-text-background-light: var(--t-background);
     --t-text-color-accent: var(--bs-gray-900);
     --t-text-color-primary: var(--bs-primary);
+    --t-header-text-transform: var(--header-text-transform);
 
+    --t-border-color: #{$border-color};
     --t-navbar-height: 88px;
 
     /* What to substract from 100vh to start the next elemment after fullsize header */

package/sections/cta-base/cta-base.ts

@@ -4,9 +4,9 @@ Joda.registerTemplate("cta-base",
     // language=HTML
     `
 
-        <div class="tjs__cta-base">
+        <section class="tjs__cta-base">
             <div class="[[layout.container]]">
                 <slot></slot>
             </div>
-        </div>
+        </section>
     `);

package/sections/cta-form/cta-form.ts

@@ -3,18 +3,20 @@ import {Joda} from "@leuffen/jodastyle";
 Joda.registerTemplate("cta-form",
     // language=HTML
     `
-        <form class="tjs__cta-form" data-micx-formmail-preset="default" data-micx-formmail-sent-message="E-Mail erfolgreich gesendet!">
-            <div class="container">
-                <slot data-select=":scope h2"></slot>
-            </div>
-            <div class="wrapper">
+        <section class="tjs__cta-form">
+            <form  data-micx-formmail-preset="default" data-micx-formmail-sent-message="E-Mail erfolgreich gesendet!">
                 <div class="container">
-                    <div class="row g-3">
-                        <slot data-select=".section-hr" data-replace=""></slot>
+                    <slot data-select=":scope h2"></slot>
+                </div>
+                <div class="wrapper">
+                    <div class="container">
+                        <div class="row g-3">
+                            <slot data-select=".section-hr" data-replace=""></slot>
 
+                        </div>
                     </div>
                 </div>
-            </div>
 
-        </form>
+            </form>
+        </section>
     `);

package/sections/footer-base/footer-base.scss

@@ -1,5 +1,18 @@
 .tjs__footer-base {
+
+
+
+    &.dark {
+        background-color: var(--t-background-dark);
+        color: var(--t-text-dark);
+
+        a {
+            color: var(--t-text-dark);
+        }
+    }
+
     background-color: var(--t-background-footer);
+    color: var(--t-text-footer);
     width: 100%;
     min-height: 100px;
     overflow: hidden;
@@ -9,6 +22,7 @@
     border-top: 4px solid var(--t-section-background-accent);
     border-bottom: 4px solid var(--t-section-background-accent);
 
+
     .row {
         margin: 0;
 
@@ -17,20 +31,35 @@
         }
     }
 
+    a {
+        opacity: 0.8;
+        transition: opacity 0.2s ease-in-out;
+        &:hover {
+            opacity: 1;
+        }
+    }
+
     .subfooter {
-        background: var(--t-background);
         width: 100%;
         padding: 20px;
         overflow: hidden;
         border-top: 1px solid var(--t-section-background);
         text-align: center;
+
+        img {
+            filter: grayscale(100%);
+            &:hover {
+                filter: grayscale(0%);
+            }
+        }
+
     }
     h3 {
         margin-top: 20px;
         margin-bottom: 5px;
         font-size: 1em;
         text-transform: uppercase;
-        color: var(--bs-gray);
+        color: var(--t-header-color);
         font-weight: bold;
     }
     .container-fluid .content {
@@ -50,8 +79,12 @@
         }
      }
     .content {
-          --joda-class: ":: border-bottom :xl: border-end";
+         border-right: 1px solid var(--t-section-border-color);
+        &:last-of-type {
+            border-right: none;
+        }
       }
+
     .content:last-of-type {
            --joda-class: unset;
        }

package/sections/footer-base/footer-base.ts

@@ -4,14 +4,14 @@ Joda.registerTemplate("footer-base",
     // language=HTML
     `
 
-        <div class="tjs__footer-base [[layout.class]]">
+        <footer class="tjs__footer-base [[layout.class]]">
             <div class="[[layout.container]] h-100">
                 <div class="row">
-                    <slot data-select=".section-h3 > .content" data-class=":: col-12 :xl: col"></slot>
+                    <slot data-select=".section-h3 > .content" data-child-class=":: col-12 :xl: col"></slot>
                 </div>
             </div>
             <div class="subfooter">
                 <slot data-select="#minifooter"></slot>
             </div>
-        </div>
+        </footer>
     `);

package/sections/hero-max/hero-max.scss

@@ -85,8 +85,10 @@
     }
 
 
-
-
+    h1.glow {
+        color: white;
+        text-shadow: 0 0 10px var(--t-text-color), 0 0 20px var(--t-text-color), 0 0 30px var(--t-text-color), 0 0 40px var(--t-text-color), 0 0 50px var(--t-text-color), 0 0 60px var(--t-text-color), 0 0 70px var(--t-text-color);
+    }
 
 
 

package/sections/hero-max/hero-max.ts

@@ -5,7 +5,7 @@ Joda.registerTemplate("hero-max",
     // language=HTML
     `
 
-        <div class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]]">
+        <section class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]] :: mobile :lg: desktop">
             <slot data-select="img.background, :scope>.content>p.background>img" class="slideshow"></slot>
             <div class="tjs__hero-max--out-wrapper ">
                 <div class="tjs__hero-max--container [[layout.container]]">
@@ -17,5 +17,6 @@ Joda.registerTemplate("hero-max",
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
+
     `);

package/sections/hero-title-small/hero-title-small.scss

@@ -12,16 +12,28 @@
         max-height: 60vh;
         min-height: 250px;
         width: 100%;
-        padding-bottom: 40px
-    }
+        padding-bottom: 40px;
 
-    .imagewrapper > img {
-        object-fit: cover;
-        object-position: center center;
-        width: 100%;
-        height: 100%;
+        &:has(slot:empty) {
+            visibility: hidden;
+            min-height: 0;
+            height: 0;
+        }
+
+        & > slot {
+            width: 100%;
+            height: 100%;
+
+            & > img, & > div {
+                object-fit: cover;
+                object-position: center center;
+                width: 100%;
+                height: 100%
+            }
+        }
     }
 
+
     h1 {
         padding: 20px;
     }

package/sections/hero-title-small/hero-title-small.ts

@@ -7,7 +7,7 @@ Joda.registerTemplate("hero-title-small",
 
     <div class="tjs__hero-title-small">
         <div class="imagewrapper">
-            <slot data-select="img" data-replace="true"></slot>
+            <slot data-select="img, .top"></slot>
         </div>
 
         <slot></slot>

package/sections/image-gallery1/image-gallery1.scss

@@ -0,0 +1,87 @@
+
+
+.tjs-image-gallery1 {
+    padding: var(--t-section-padding);
+    background: var(--t-section-background);
+
+    &__header {
+        text-align: center;
+        padding-bottom: 40px;
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__images {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        ul {
+            margin: 0;
+
+            &> li {
+                list-style: none;
+                margin: 0;
+            }
+        }
+
+
+    }
+
+    &__images-image {
+
+
+        flex-grow: 3;
+        transform: scale(100%);
+        transition: transform 0.2s ease-in-out;
+        min-width: 300px;
+        padding: 5px;
+        display: inline-block;
+        img {
+            &:hover {
+
+
+            }
+            border-radius: var(--t-section-border-radius);
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center center;
+        }
+    }
+
+    &.mobile &__images-image {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 16/9;
+    }
+
+    &__images-image:last-child {
+        width: 50%;
+        height: auto;
+        aspect-ratio: 16/9;
+        flex-grow: 3;
+    }
+
+    &__images-image:nth-child(1n) {
+        width: 75%;
+        height: auto;
+        aspect-ratio: 16/9;
+    }
+    &__images-image:nth-child(2n) {
+        width: 25%;
+        aspect-ratio: 2/1;
+    }
+    &__images-image:nth-child(3n) {
+        width: 25%;
+        aspect-ratio: 5/4;
+    }
+    &__images-image:nth-child(4n) {
+        width: 25%;
+        aspect-ratio: 2/1;
+    }
+    &__images-image:nth-child(5n) {
+        width: 50%;
+        aspect-ratio: 2/1;
+    }
+}

package/sections/image-gallery1/image-gallery1.ts

@@ -0,0 +1,22 @@
+import {Joda} from "@leuffen/jodastyle";
+
+
+Joda.registerTemplate("image-gallery1__images-image",
+    // language=HTML
+    `
+
+        <slot class="tjs-image-gallery1__images-image" data-select="img"></slot>
+
+    `);
+
+
+Joda.registerTemplate("image-gallery1",
+    // language=HTML
+    `
+
+        <section class="tjs-image-gallery1 container :: mobile :lg: desktop">
+            <slot class="tjs-image-gallery1__header"></slot>
+            <slot class="tjs-image-gallery1__images" data-select="ul > li" data-child-layout="use: #image-gallery1__images-image"></slot>
+        </section>
+
+    `);

package/sections/sec-card-2col/sec-card-2col.scss

@@ -23,16 +23,18 @@
         --joda-class: p-4 p-lg-5 ;
     }
 
+
+
     .row > .tjs__sec-card-2col--col-start  {
-        --joda-class: "col-12 col-md-6 p-4 p-lg-5 order-2 order-md-1";
+        --joda-class: "col-12 col-lg-6 p-4 p-lg-5 order-2 order-lg-1";
     }
 
 
     .row > .tjs__sec-card-2col--col-end  {
 
-        --joda-class: "col-12 col-md-6 order-1 order-md-2";
-        &:has(> .aside) {
-            --joda-class: "col-12 col-md-6 order-2 order-md-1";
+        --joda-class: "col-12 col-lg-6 order-1 order-lg-2";
+        &:has(> slot > .aside) {
+            --joda-class: "col-12 col-lg-6 order-3 order-lg-1";
         }
         slot {
             display: block;
@@ -49,14 +51,16 @@
 
 
     .tjs__sec-card-2col--container {
-          border: 1px solid var(--bs-gray-500);
+          border: 1px solid var(--t-section-border-color);
+        border-radius: var(--t-section-border-radius);
+        overflow: hidden;
         background-color: white;
         padding: 0;
     }
 
 }
 
-.section-h2:nth-of-type(odd) .tjs__sec-card-2col .row {
+.tjs__sec-card-2col:nth-of-type(odd) .row {
     flex-direction: row-reverse;
-    --joda-class: "flex-row-reverse";
+    //--joda-class: "flex-row-reverse";
 }

package/sections/sec-card-2col/sec-card-2col.ts

@@ -1,13 +1,15 @@
 import {Joda} from "@leuffen/jodastyle";
 
 
+
+
 Joda.registerTemplate("sec-card-2col",
     // language=HTML
     `
 
-        <div class="tjs__sec-card-2col">
+        <section class="tjs__sec-card-2col">
             <div class="tjs__sec-card-2col--container [[layout.container]]">
-                <div class="row [[layout.order === 'reverse' ? 'flex-row-reverse': '']]">
+                <div class="row [[layout.order === 'reverse' ? 'flex-row-reverse': '']] [[layout.mobile_reverse === 'yes' ? ':: flex-row-reverse :lg:': '']]">
                     <div class="tjs__sec-card-2col--col-start tjs__section-text">
                         <slot></slot>
                     </div>
@@ -16,5 +18,5 @@ Joda.registerTemplate("sec-card-2col",
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
     `);

package/sections/sec-legal-content/sec-legal-content.scss

@@ -6,7 +6,8 @@
 
     .inner-wrapper {
 
-        border: 1px solid var(--bs-gray-500);
+        border: 1px solid var(--t-section-border-color);
+        border-radius: var(--t-section-border-radius);
         background-color: white;
         padding: var(--t-section-inner-padding);
 

package/sections/sec-legal-content/sec-legal-content.ts

@@ -5,7 +5,7 @@ Joda.registerTemplate("sec-legal-content",
     // language=HTML
     `
 
-        <div class="tjs__sec-legal-content :: mobile :lg:">
+        <section class="tjs__sec-legal-content :: mobile :lg:">
             <div class="out-wrapper">
                 <div class="container p-0">
                     <div class="inner-wrapper :: p-4 :lg: p-5">
@@ -15,6 +15,7 @@ Joda.registerTemplate("sec-legal-content",
                         </div>
                     </div>
                 </div>
+
             </div>
-        </div>
+        </section>
     `);

package/sections/sec-multi-card/sec-multi-card.scss

@@ -1,6 +1,7 @@
 
 .tjs__sec-multi-card {
 
+
     padding: var(--t-section-padding);
 
     background: var(--t-section-background);
@@ -10,13 +11,57 @@
         text-align: center;
         padding-bottom: 40px;
     }
-     .card {
 
-    }
 
 
-    .row .section-h3 {
-        --joda-class: col;
-        --joda-use: #e-card-default;
+
+    &__item {
+        @extend .col;
+
+        .wrapper {
+
+
+
+
+            border: 1px solid var(--t-section-border-color);
+            border-radius: var(--t-section-border-radius);
+            overflow: hidden;
+            background-color: white;
+            height: 100%;
+            min-width: 300px;
+
+            --aspect-ratio: var(--layout-aspect-ratio, 16 / 9);
+
+
+
+
+
+            .tjs__sec-multi-card__item-img {
+                &:empty {
+                    display: none;
+                }
+
+                width: 100%;
+                aspect-ratio: var(--aspect-ratio);
+                display: block;
+                overflow: hidden;
+                img {
+
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+
+
+            }
+
+            .tjs__sec-multi-card__item__body {
+                @extend  .p-4;
+                height: 100%;
+            }
+        }
+
     }
+
+
 }

package/sections/sec-multi-card/sec-multi-card.ts

@@ -1,6 +1,22 @@
 import {Joda} from "@leuffen/jodastyle";
 
+Joda.registerTemplate("sec-multi-card__item",
+    // language=HTML
+    `
+        <div class="col tjs__sec-multi-card__item">
+            <div class="wrapper">
+
+                <slot class="tjs__sec-multi-card__item-img" data-select="img"></slot>
+
+
+                <div class="tjs__sec-multi-card__item__body text-format">
+                    <slot></slot>
+                </div>
+            </div>
 
+        </div>
+    `
+);
 Joda.registerTemplate("sec-multi-card",
     // language=HTML
     `
@@ -10,9 +26,7 @@ Joda.registerTemplate("sec-multi-card",
                 <slot data-select=":scope > .content"></slot>
             </div>
             <div class="container">
-                <div class="row g-3 row-cols-1 row-cols-lg-[[ layout.cols ?? 3 ]]">
-                    <slot data-select=":scope > .children > *" data-replace=""></slot>
-                </div>
+                <slot class="row g-3 row-cols-1 row-cols-lg-[[ layout.cols ?? 3 ]]" data-select=":scope > .children > *"  data-child-layout="use: #sec-multi-card__item"></slot>
             </div>
         </div>
     `);

package/sections/sections.scss

@@ -12,3 +12,4 @@
 @import "sec-card-feature/sec-card-feature";
 @import "hero-title-small/hero-title-small";
 @import "cta-form/cta-form";
+@import "image-gallery1/image-gallery1";

package/sections/sections.ts

@@ -11,3 +11,4 @@ import "./sec-multi-card/sec-multi-card";
 import "./sec-card-feature/sec-card-feature";
 import "./hero-title-small/hero-title-small";
 import "./cta-form/cta-form";
+import "./image-gallery1/image-gallery1";

package/themes/_vendor/font-garamond.scss

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: 'Garamond';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-Regular.woff2");
+}
+@font-face {
+    font-family: 'Garamond';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-Italic.woff2");
+}
+@font-face {
+    font-family: 'Garamond';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-Bold.woff2");
+}
+
+
+@font-face {
+    font-family: 'Garamond';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-BoldItalic.woff2");
+}

package/themes/theme1/index.scss

@@ -3,10 +3,22 @@
 
 :root {
     --layout-container: container;
+
+
+
+    --t-border-radius: #{$section-border-radius};
+    --t-background-footer: #{$background-footer};
+    --t-text-footer: #{$text-footer};
+    --t-footer-header-color: #{$text-footer};
+    --t-section-border-color: #{$section-border-color};
+    --t-background-dark: #{$background-dark};
+    --t-text-dark: #{$text-dark};
+    --t-header-dark: #{$text-dark};
+    --t-link-dark: #{$text-dark};
 }
 .theme1 {
     @include default-element-format();
-
+    --t-background: #{$background};
     color: var(--t-text-color);
     background: var(--t-background);
 
@@ -15,12 +27,14 @@
         color: var(--t-text-color);
     }
 
+    font-size: $font-size-base;
     h1 {
         font-size: 2.4em;
         line-height: 1.2em;
     }
     h2, h3,h4,h5 {
         line-height: 1.2em;
+
     }
     h3,h4,h5 {
         font-size: 1.15em;
@@ -30,16 +44,23 @@
         line-height: 1.4em;
     }
 
+
+
+    table > tbody > tr > td {
+        background: transparent;
+    }
+
     .tjs__section-text {
-        h2 {
-            text-transform: uppercase;
+        h2:has(+ blockquote) {
+            text-transform: var(--t-header-text-transform, uppercase);
             font-weight: bold;
             font-size: 16px;
             color: var(--t-text-color-primary) !important;
             margin: var(--t-paragraf-margin);
         }
-        blockquote > p {
-            font-size: 2.1em;
+
+        h2, blockquote > p {
+            font-size: 1.9em;
             line-height: 1.2em;
             color: var(--t-text-color) !important;
             margin: var(--t-header-margin, 0 0 20px 0);
@@ -69,15 +90,13 @@
         color: var(--t-text-color);
     }
 
-    font-size: 1.1rem;
 
-    --t-background: #f5f5f5;
+
     --t-background-footer: #fff;
     --t-section-background: transparent;
-    --t-section-background-accent: #e7e7eb;
     --t-section-background-primary: #{$background-primary};
     --t-text-background: #fff;
-    --t-text-color: #707070;
+    --t-text-color: #{$text-color};
     --t-text-background-light: var(--t-background);
     --t-text-color-accent: var(--bs-gray-900);
     --t-text-color-primary: var(--bs-primary);
@@ -107,7 +126,7 @@
     }
 
     .btn {
-        border-radius: 0;
+        border-radius: $border-radius;
     }
 
     map {

package/elements/e-card-default/e-card-default.scss

@@ -1,33 +0,0 @@
-@import "bootstrap/scss/bootstrap";
-
-.tjs__e-card-default {
-
-    border: 1px solid var(--bs-gray-500);
-    background-color: white;
-    height: 100%;
-    min-width: 300px;
-
-    &.card {
-        height: 100%;
-    }
-
-    --aspect-ratio: var(--layout-aspect-ratio, 16 / 9);
-
-    .tjs__e-card-default__img {
-        width: 100%;
-        aspect-ratio: var(--aspect-ratio);
-        display: block;
-        overflow: hidden;
-        img {
-
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-    }
-
-    .tjs__e-card-default__body {
-        @extend  .p-4;
-        height: 100%;
-    }
-}

package/elements/e-card-default/e-card-default.ts

@@ -1,16 +0,0 @@
-import {Joda} from "@leuffen/jodastyle";
-
-
-Joda.registerTemplate("e-card-default",
-    // language=HTML
-    `
-        <div class="tjs__e-card-default">
-            <div class="tjs__e-card-default__img">
-                <slot data-select="img" data-replace></slot>
-            </div>
-
-            <div class="tjs__e-card-default__body text-format">
-                <slot></slot>
-            </div>
-        </div>
-    `);